ConfidenceBandChart

import { useState } from "react";
import { ConfidenceBandChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
const bands = [
  {
    id: "apr-01",
    x: "1 Apr",
    y: 38.4,
    low: 36.9,
    high: 39.8,
  },
  {
    id: "apr-08",
    x: "8 Apr",
    y: 39.1,
    low: 37.5,
    high: 40.6,
  },
  {
    id: "apr-15",
    x: "15 Apr",
    y: 39.8,
    low: 38.1,
    high: 41.4,
  },
  {
    id: "apr-22",
    x: "22 Apr",
    y: 40.2,
    low: 38.4,
    high: 41.9,
  },
  {
    id: "apr-29",
    x: "29 Apr",
    y: 40.9,
    low: 39,
    high: 42.7,
  },
  {
    id: "may-06",
    x: "6 May",
    y: 41.4,
    low: 39.5,
    high: 43.2,
  },
  {
    id: "may-13",
    x: "13 May",
    y: 41.1,
    low: 39.2,
    high: 43,
  },
  {
    id: "may-20",
    x: "20 May",
    y: 41.8,
    low: 39.8,
    high: 43.7,
  },
  {
    id: "may-27",
    x: "27 May",
    y: 42.6,
    low: 40.6,
    high: 44.5,
  },
  {
    id: "jun-03",
    x: "3 Jun",
    y: 42.9,
    low: 40.8,
    high: 44.9,
  },
  {
    id: "jun-10",
    x: "10 Jun",
    y: 43.4,
    low: 41.3,
    high: 45.4,
  },
  {
    id: "jun-17",
    x: "17 Jun",
    y: 43.8,
    low: 41.6,
    high: 45.9,
  },
  {
    id: "jun-24",
    x: "24 Jun",
    y: 43.2,
    low: 41,
    high: 45.4,
  },
  {
    id: "jul-01",
    x: "1 Jul",
    y: 44.1,
    low: 41.8,
    high: 46.3,
  },
  {
    id: "jul-08",
    x: "8 Jul",
    y: 44.8,
    low: 42.4,
    high: 47.1,
  },
  {
    id: "jul-15",
    x: "15 Jul",
    y: 45.3,
    low: 42.8,
    high: 47.7,
  },
  {
    id: "jul-22",
    x: "22 Jul",
    y: 45,
    low: 42.5,
    high: 47.5,
  },
  {
    id: "jul-29",
    x: "29 Jul",
    y: 46.2,
    low: 43.6,
    high: 48.7,
  },
  {
    id: "aug-05",
    x: "5 Aug",
    y: 46.9,
    low: 44.1,
    high: 49.6,
  },
  {
    id: "aug-12",
    x: "12 Aug",
    y: 47.6,
    low: 44.6,
    high: 50.4,
  },
];
 
export default function ConfidenceBandChartDemo() {
  const [fit, setFit] = useState<"none" | "linear">("none");
  return (
    <div>
      <VariantToggle
        label="Fit"
        options={[
          { value: "none" as const, label: "Observed" },
          { value: "linear" as const, label: "Linear" },
        ]}
        value={fit}
        onChange={setFit}
      />
      <ConfidenceBandChart
        data={bands}
        fit={fit}
        ariaLabel="Weekly fulfilled orders in thousands with a 95% confidence band from 1 April to 12 August 2026" />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { ConfidenceBandChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const fit = ref<"none" | "linear">("none");
const fits = [
  { value: "none", label: "Observed" },
  { value: "linear", label: "Linear" },
];
const bands = [
  {
    id: "apr-01",
    x: "1 Apr",
    y: 38.4,
    low: 36.9,
    high: 39.8,
  },
  {
    id: "apr-08",
    x: "8 Apr",
    y: 39.1,
    low: 37.5,
    high: 40.6,
  },
  {
    id: "apr-15",
    x: "15 Apr",
    y: 39.8,
    low: 38.1,
    high: 41.4,
  },
  {
    id: "apr-22",
    x: "22 Apr",
    y: 40.2,
    low: 38.4,
    high: 41.9,
  },
  {
    id: "apr-29",
    x: "29 Apr",
    y: 40.9,
    low: 39,
    high: 42.7,
  },
  {
    id: "may-06",
    x: "6 May",
    y: 41.4,
    low: 39.5,
    high: 43.2,
  },
  {
    id: "may-13",
    x: "13 May",
    y: 41.1,
    low: 39.2,
    high: 43,
  },
  {
    id: "may-20",
    x: "20 May",
    y: 41.8,
    low: 39.8,
    high: 43.7,
  },
  {
    id: "may-27",
    x: "27 May",
    y: 42.6,
    low: 40.6,
    high: 44.5,
  },
  {
    id: "jun-03",
    x: "3 Jun",
    y: 42.9,
    low: 40.8,
    high: 44.9,
  },
  {
    id: "jun-10",
    x: "10 Jun",
    y: 43.4,
    low: 41.3,
    high: 45.4,
  },
  {
    id: "jun-17",
    x: "17 Jun",
    y: 43.8,
    low: 41.6,
    high: 45.9,
  },
  {
    id: "jun-24",
    x: "24 Jun",
    y: 43.2,
    low: 41,
    high: 45.4,
  },
  {
    id: "jul-01",
    x: "1 Jul",
    y: 44.1,
    low: 41.8,
    high: 46.3,
  },
  {
    id: "jul-08",
    x: "8 Jul",
    y: 44.8,
    low: 42.4,
    high: 47.1,
  },
  {
    id: "jul-15",
    x: "15 Jul",
    y: 45.3,
    low: 42.8,
    high: 47.7,
  },
  {
    id: "jul-22",
    x: "22 Jul",
    y: 45,
    low: 42.5,
    high: 47.5,
  },
  {
    id: "jul-29",
    x: "29 Jul",
    y: 46.2,
    low: 43.6,
    high: 48.7,
  },
  {
    id: "aug-05",
    x: "5 Aug",
    y: 46.9,
    low: 44.1,
    high: 49.6,
  },
  {
    id: "aug-12",
    x: "12 Aug",
    y: 47.6,
    low: 44.6,
    high: 50.4,
  },
];
</script>
 
<template>
  <div>
    <VariantToggle v-model="fit" label="Fit" :options="fits" />
    <ConfidenceBandChart
      :data="bands"
      :fit="fit"
      aria-label="Weekly fulfilled orders in thousands with a 95% confidence band from 1 April to 12 August 2026" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootConfidenceBandChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-confidence-band-chart-chart-demo",
  standalone: true,
  imports: [GrassrootConfidenceBandChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Fit"
      [options]="fits"
      [value]="fit()"
      (valueChange)="setFit($event)"
    /><grassroot-confidence-band-chart
    [fit]="fit()"
    [data]="bands"
    ariaLabel="Weekly fulfilled orders in thousands with a 95% confidence band from 1 April to 12 August 2026"
  />`,
})
export class ConfidenceBandChartDemoComponent {
  readonly fit = signal<"none" | "linear">("none");
  readonly fits = [
    { value: "none", label: "Observed" },
    { value: "linear", label: "Linear" },
  ] as const;
  readonly bands = [
    {
      id: "apr-01",
      x: "1 Apr",
      y: 38.4,
      low: 36.9,
      high: 39.8,
    },
    {
      id: "apr-08",
      x: "8 Apr",
      y: 39.1,
      low: 37.5,
      high: 40.6,
    },
    {
      id: "apr-15",
      x: "15 Apr",
      y: 39.8,
      low: 38.1,
      high: 41.4,
    },
    {
      id: "apr-22",
      x: "22 Apr",
      y: 40.2,
      low: 38.4,
      high: 41.9,
    },
    {
      id: "apr-29",
      x: "29 Apr",
      y: 40.9,
      low: 39,
      high: 42.7,
    },
    {
      id: "may-06",
      x: "6 May",
      y: 41.4,
      low: 39.5,
      high: 43.2,
    },
    {
      id: "may-13",
      x: "13 May",
      y: 41.1,
      low: 39.2,
      high: 43,
    },
    {
      id: "may-20",
      x: "20 May",
      y: 41.8,
      low: 39.8,
      high: 43.7,
    },
    {
      id: "may-27",
      x: "27 May",
      y: 42.6,
      low: 40.6,
      high: 44.5,
    },
    {
      id: "jun-03",
      x: "3 Jun",
      y: 42.9,
      low: 40.8,
      high: 44.9,
    },
    {
      id: "jun-10",
      x: "10 Jun",
      y: 43.4,
      low: 41.3,
      high: 45.4,
    },
    {
      id: "jun-17",
      x: "17 Jun",
      y: 43.8,
      low: 41.6,
      high: 45.9,
    },
    {
      id: "jun-24",
      x: "24 Jun",
      y: 43.2,
      low: 41,
      high: 45.4,
    },
    {
      id: "jul-01",
      x: "1 Jul",
      y: 44.1,
      low: 41.8,
      high: 46.3,
    },
    {
      id: "jul-08",
      x: "8 Jul",
      y: 44.8,
      low: 42.4,
      high: 47.1,
    },
    {
      id: "jul-15",
      x: "15 Jul",
      y: 45.3,
      low: 42.8,
      high: 47.7,
    },
    {
      id: "jul-22",
      x: "22 Jul",
      y: 45,
      low: 42.5,
      high: 47.5,
    },
    {
      id: "jul-29",
      x: "29 Jul",
      y: 46.2,
      low: 43.6,
      high: 48.7,
    },
    {
      id: "aug-05",
      x: "5 Aug",
      y: 46.9,
      low: 44.1,
      high: 49.6,
    },
    {
      id: "aug-12",
      x: "12 Aug",
      y: 47.6,
      low: 44.6,
      high: 50.4,
    },
  ];
  setFit(value: string): void {
    if (value === "none" || value === "linear") this.fit.set(value);
  }
}
 
export default ConfidenceBandChartDemoComponent;

<script lang="ts">
  import { ConfidenceBandChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let fit = $state<"none" | "linear">("none");
  const fits = [
    { value: "none", label: "Observed" },
    { value: "linear", label: "Linear" },
  ];
  const bands = [
    {
      id: "apr-01",
      x: "1 Apr",
      y: 38.4,
      low: 36.9,
      high: 39.8,
    },
    {
      id: "apr-08",
      x: "8 Apr",
      y: 39.1,
      low: 37.5,
      high: 40.6,
    },
    {
      id: "apr-15",
      x: "15 Apr",
      y: 39.8,
      low: 38.1,
      high: 41.4,
    },
    {
      id: "apr-22",
      x: "22 Apr",
      y: 40.2,
      low: 38.4,
      high: 41.9,
    },
    {
      id: "apr-29",
      x: "29 Apr",
      y: 40.9,
      low: 39,
      high: 42.7,
    },
    {
      id: "may-06",
      x: "6 May",
      y: 41.4,
      low: 39.5,
      high: 43.2,
    },
    {
      id: "may-13",
      x: "13 May",
      y: 41.1,
      low: 39.2,
      high: 43,
    },
    {
      id: "may-20",
      x: "20 May",
      y: 41.8,
      low: 39.8,
      high: 43.7,
    },
    {
      id: "may-27",
      x: "27 May",
      y: 42.6,
      low: 40.6,
      high: 44.5,
    },
    {
      id: "jun-03",
      x: "3 Jun",
      y: 42.9,
      low: 40.8,
      high: 44.9,
    },
    {
      id: "jun-10",
      x: "10 Jun",
      y: 43.4,
      low: 41.3,
      high: 45.4,
    },
    {
      id: "jun-17",
      x: "17 Jun",
      y: 43.8,
      low: 41.6,
      high: 45.9,
    },
    {
      id: "jun-24",
      x: "24 Jun",
      y: 43.2,
      low: 41,
      high: 45.4,
    },
    {
      id: "jul-01",
      x: "1 Jul",
      y: 44.1,
      low: 41.8,
      high: 46.3,
    },
    {
      id: "jul-08",
      x: "8 Jul",
      y: 44.8,
      low: 42.4,
      high: 47.1,
    },
    {
      id: "jul-15",
      x: "15 Jul",
      y: 45.3,
      low: 42.8,
      high: 47.7,
    },
    {
      id: "jul-22",
      x: "22 Jul",
      y: 45,
      low: 42.5,
      high: 47.5,
    },
    {
      id: "jul-29",
      x: "29 Jul",
      y: 46.2,
      low: 43.6,
      high: 48.7,
    },
    {
      id: "aug-05",
      x: "5 Aug",
      y: 46.9,
      low: 44.1,
      high: 49.6,
    },
    {
      id: "aug-12",
      x: "12 Aug",
      y: 47.6,
      low: 44.6,
      high: 50.4,
    },
  ];
</script>
 
<div>
  <VariantToggle
    label="Fit"
    options={fits}
    value={fit}
    onchange={(value) => (fit = value as typeof fit)}
  />
  <ConfidenceBandChart
    {fit}
    data={bands}
    ariaLabel="Weekly fulfilled orders in thousands with a 95% confidence band from 1 April to 12 August 2026" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { ConfidenceBandChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
const bands = [
  {
    id: "apr-01",
    x: "1 Apr",
    y: 38.4,
    low: 36.9,
    high: 39.8,
  },
  {
    id: "apr-08",
    x: "8 Apr",
    y: 39.1,
    low: 37.5,
    high: 40.6,
  },
  {
    id: "apr-15",
    x: "15 Apr",
    y: 39.8,
    low: 38.1,
    high: 41.4,
  },
  {
    id: "apr-22",
    x: "22 Apr",
    y: 40.2,
    low: 38.4,
    high: 41.9,
  },
  {
    id: "apr-29",
    x: "29 Apr",
    y: 40.9,
    low: 39,
    high: 42.7,
  },
  {
    id: "may-06",
    x: "6 May",
    y: 41.4,
    low: 39.5,
    high: 43.2,
  },
  {
    id: "may-13",
    x: "13 May",
    y: 41.1,
    low: 39.2,
    high: 43,
  },
  {
    id: "may-20",
    x: "20 May",
    y: 41.8,
    low: 39.8,
    high: 43.7,
  },
  {
    id: "may-27",
    x: "27 May",
    y: 42.6,
    low: 40.6,
    high: 44.5,
  },
  {
    id: "jun-03",
    x: "3 Jun",
    y: 42.9,
    low: 40.8,
    high: 44.9,
  },
  {
    id: "jun-10",
    x: "10 Jun",
    y: 43.4,
    low: 41.3,
    high: 45.4,
  },
  {
    id: "jun-17",
    x: "17 Jun",
    y: 43.8,
    low: 41.6,
    high: 45.9,
  },
  {
    id: "jun-24",
    x: "24 Jun",
    y: 43.2,
    low: 41,
    high: 45.4,
  },
  {
    id: "jul-01",
    x: "1 Jul",
    y: 44.1,
    low: 41.8,
    high: 46.3,
  },
  {
    id: "jul-08",
    x: "8 Jul",
    y: 44.8,
    low: 42.4,
    high: 47.1,
  },
  {
    id: "jul-15",
    x: "15 Jul",
    y: 45.3,
    low: 42.8,
    high: 47.7,
  },
  {
    id: "jul-22",
    x: "22 Jul",
    y: 45,
    low: 42.5,
    high: 47.5,
  },
  {
    id: "jul-29",
    x: "29 Jul",
    y: 46.2,
    low: 43.6,
    high: 48.7,
  },
  {
    id: "aug-05",
    x: "5 Aug",
    y: 46.9,
    low: 44.1,
    high: 49.6,
  },
  {
    id: "aug-12",
    x: "12 Aug",
    y: 47.6,
    low: 44.6,
    high: 50.4,
  },
];
 
export default function ConfidenceBandChartDemo() {
  const [fit, setFit] = createSignal<"none" | "linear">("none");
  const fits = [
    { value: "none", label: "Observed" },
    { value: "linear", label: "Linear" },
  ];
  return (
    <div>
      <VariantToggle
        label="Fit"
        options={fits}
        value={fit}
        onChange={(value) => setFit(value as "none" | "linear")}
      />
      <ConfidenceBandChart
        data={bands}
        fit={fit()}
        ariaLabel="Weekly fulfilled orders in thousands with a 95% confidence band from 1 April to 12 August 2026" />
    </div>
  );
}