Noora (0.8.0)

Alert
Alert
Avatar
Avatar
Badge
Badge
Banner
Banner
Breadcrumbs
Breadcrumbs
Button
Button
Button Group
Button Group
Card
Card
Chart
Chart
Checkbox
Checkbox
Digit Input
Digit Input
Dismiss Icon
Dismiss Icon
Dropdown
Dropdown
Hint Text
Hint Text
Label
Label
Line Divider
Line Divider
Link Button
Link Button
Modal
Modal
Neutral Button
Neutral Button
Pagination Group
Pagination Group
Progress Bar
Progress Bar
Status Badge
Status Badge
Tab Menu Horizontal
Tab Menu Horizontal
Tab Menu Vertical
Tab Menu Vertical
Table
Table
Tag
Tag
Text Divider
Text Divider
Text Input
Text Input
Time
Time
Tooltip
Tooltip

Chart

Multi-series line chart with different dates Open in playground

<.chart
  id="chart-single-multi-series-line"
  type="line"
  style="width: 600px; height: 300px;"
  series={[%{data: [["2024-08-24", 32], ["2024-09-15", 38], ["2024-10-03", 42], ["2024-10-20", 36], ["2024-11-08", 48], ["2024-11-27", 64], ["2024-12-15", 53]], name: "Binary cache effectiveness", type: "line", symbol: "none"}, %{data: [["2024-09-05", 48], ["2024-09-18", 52], ["2024-10-10", 45], ["2024-10-26", 38], ["2024-11-15", 42], ["2024-12-02", 56], ["2024-12-20", 62], ["2025-01-08", 58], ["2025-01-25", 64], ["2025-02-10", 60], ["2025-02-28", 66], ["2025-03-15", 70], ["2025-04-02", 65], ["2025-04-20", 72], ["2025-05-07", 68], ["2025-05-25", 74], ["2025-06-12", 78]], name: "Selective test effectiveness", type: "line", symbol: "none"}]}
  extra_options={%{xAxis: %{type: "time", axisLabel: %{formatter: "fn:toLocaleDate", margin: 16, showMaxLabel: true}}, yAxis: %{axisLabel: %{formatter: "{value}%"}}, tooltip: %{valueFormat: "{value}%"}}}
  y_axis_min={0}
  y_axis_max={100}
/>

Horizontal bar comparison Open in playground

<.chart
  id="chart-single-horizontal-bar-comparison"
  type="bar"
  labels={["Selective Test", "Build Cache"]}
  style="width: 500px; height: 146px;"
  horizontal
  series={[%{data: [19, 22], type: "bar", barGap: "-100%"}, %{data: [7.2, 9], type: "bar"}]}
  extra_options={%{xAxis: %{axisLabel: %{formatter: "{value}h", margin: 25}, splitLine: %{lineStyle: %{type: "dashed"}}}, yAxis: %{axisLine: %{show: false}, boundaryGap: false}, grid: %{width: 400, height: 76}}}
  bar_width={24}
  bar_radius={7}
/>

Test run duration chart showing pass/fail status Open in playground

{"colors":["var:noora-chart-primary","var:noora-chart-secondary","var:noora-chart-tertiary","var:noora-chart-quaternary"],"xAxis":{"type":"category","axisLabel":{"show":false,"fontSize":10},"axisLine":{"show":false},"axisTick":{"show":false},"splitLine":{"lineStyle":{"type":"dashed"}}},"yAxis":{"min":0,"type":"value","axisLabel":{"formatter":"fn:formatSeconds","fontSize":10},"axisLine":{"show":false},"axisTick":{"show":false},"splitLine":{"lineStyle":{"type":"dashed"}}},"grid":{"containLabel":true},"legend":{"show":false},"series":[{"data":[{"value":28,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":23,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":19,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":25,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":37,"itemStyle":{"color":"var:noora-chart-tertiary"}},{"value":35,"itemStyle":{"color":"var:noora-chart-tertiary"}},{"value":22,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":18,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":16,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":21,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":24,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":19,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":32,"itemStyle":{"color":"var:noora-chart-tertiary"}},{"value":20,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":17,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":21,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":25,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":23,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":18,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":15,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":22,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":30,"itemStyle":{"color":"var:noora-chart-tertiary"}},{"value":20,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":19,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":24,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":27,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":23,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":20,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":18,"itemStyle":{"color":"var:noora-chart-primary"}},{"value":22,"itemStyle":{"color":"var:noora-chart-primary"}}],"label":{"show":false},"name":"Test Run","type":"bar","stack":null,"barWidth":8,"itemStyle":{"borderRadius":2}}],"tooltip":{"show":false,"trigger":"axis"},"textStyle":{"fontFamily":"Geist Mono"}}

<.chart
  id="chart-single-test-run-duration"
  type="bar"
  style="width: 700px; height: 300px;"
  series={[%{data: [%{value: 28, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 23, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 19, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 25, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 37, itemStyle: %{color: "var:noora-chart-tertiary"}}, %{value: 35, itemStyle: %{color: "var:noora-chart-tertiary"}}, %{value: 22, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 18, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 16, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 21, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 24, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 19, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 32, itemStyle: %{color: "var:noora-chart-tertiary"}}, %{value: 20, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 17, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 21, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 25, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 23, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 18, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 15, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 22, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 30, itemStyle: %{color: "var:noora-chart-tertiary"}}, %{value: 20, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 19, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 24, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 27, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 23, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 20, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 18, itemStyle: %{color: "var:noora-chart-primary"}}, %{value: 22, itemStyle: %{color: "var:noora-chart-primary"}}], name: "Test Run", type: "bar"}]}
  extra_options={%{xAxis: %{axisLabel: %{show: false}}, yAxis: %{axisLabel: %{formatter: "fn:formatSeconds"}}, tooltip: %{show: false}}}
  y_axis_min={0}
  grid_lines
  bar_width={8}
  bar_radius={2}
/>