<.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}
/>

<.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}
/>

<.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}
/>