LineChart

import { useState, type ComponentProps } from "react";
import { t6LineChartFixture } from "@grassroot/demo-fixtures";
import { LineChart } from "@grassroot/charts-react";
import type { CurveKind } from "@grassroot/charts-react";
 
/** Ordered loosest-to-tightest fit, so stepping through the toggles reads as a
 * progression rather than an arbitrary list. */
const CURVES: readonly CurveKind[] = ["linear", "monotone-x", "catmull-rom", "basis", "step"];
const FIXTURE = t6LineChartFixture.props() as unknown as ComponentProps<typeof LineChart>;
 
export default function LineChartDemo() {
  const [curve, setCurve] = useState<CurveKind>("linear");
  return (
    <div>
      <div className="gr-demo-toggles" role="group" aria-label="Curve interpolation">
        {CURVES.map((kind) => (
          <button
            key={kind}
            type="button"
            aria-pressed={curve === kind}
            onClick={() => setCurve(kind)}
          >
            {kind}
          </button>
        ))}
      </div>
      <LineChart {...FIXTURE} ariaLabel="Line chart" curve={curve} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { t6LineChartFixture } from "@grassroot/demo-fixtures";
import { LineChart } from "@grassroot/charts-vue";
import type { CurveKind } from "@grassroot/charts-vue";
import type { ChartXDomain } from "@grassroot/ui-machines/chart-shell";
 
const props = defineProps<{
  onSelectedIdsChange?: (ids: readonly string[]) => void;
  onBrushDomainChange?: (domain: ChartXDomain) => void;
  onZoomDomainChange?: (domain: ChartXDomain) => void;
}>();
 
const CURVES: readonly CurveKind[] = ["linear", "monotone-x", "catmull-rom", "basis", "step"];
const curve = ref<CurveKind>("linear");
</script>
<template>
  <div>
    <div class="gr-demo-toggles" role="group" aria-label="Curve interpolation">
      <button
        v-for="kind in CURVES"
        :key="kind"
        type="button"
        :aria-pressed="curve === kind"
        @click="curve = kind"
      >
        {{ kind }}
      </button>
    </div>
    <LineChart
      v-bind="{ ...t6LineChartFixture.props(), ariaLabel: 'Line chart', ...$attrs }"
      :curve="curve"
      @selected-ids-change="props.onSelectedIdsChange?.($event)"
      @brush-domain-change="props.onBrushDomainChange?.($event)"
      @zoom-domain-change="props.onZoomDomainChange?.($event)"
    />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { t6LineChartFixture } from "@grassroot/demo-fixtures";
import { GrassrootLineChart } from "@grassroot/charts-angular";
import type { CurveKind } from "@grassroot/charts-angular";
 
const CURVES: readonly CurveKind[] = ["linear", "monotone-x", "catmull-rom", "basis", "step"];
 
@Component({
  selector: "app-line-chart-chart-demo",
  standalone: true,
  imports: [GrassrootLineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div>
    <div class="gr-demo-toggles" role="group" aria-label="Curve interpolation">
      @for (kind of curves; track kind) {
        <button type="button" [attr.aria-pressed]="curve() === kind" (click)="curve.set(kind)">
          {{ kind }}
        </button>
      }
    </div>
    <grassroot-line-chart
    [series]="fixture.series"
    [ariaLabel]="'Line chart'"
    [tooltip]="fixture.tooltip"
    [legend]="fixture.legend"
    [curve]="curve()"
    [selectionMode]="fixture.selectionMode"
    [selectedIds]="fixture.defaultSelectedIds"
    [brushDomain]="fixture.defaultBrushDomain"
    [zoomDomain]="fixture.defaultZoomDomain"
    [zoomOnBrush]="fixture.zoomOnBrush"
    (selectedIdsChange)="selected($event)"
    (brushDomainChange)="brushed($event)"
    (zoomDomainChange)="zoomed($event)"
  />
  </div>`,
})
export class LineChartDemoComponent {
  readonly fixture = t6LineChartFixture.props();
  readonly curves = CURVES;
  readonly curve = signal<CurveKind>("linear");
  protected selected(ids: readonly string[]): void { this.callback("onSelectedIdsChange", ids); }
  protected brushed(domain: unknown): void { this.callback("onBrushDomainChange", domain); }
  protected zoomed(domain: unknown): void { this.callback("onZoomDomainChange", domain); }
  private callback(key: string, value: unknown): void {
    const callback = this.bind(key);
    if (typeof callback === "function") callback(value);
  }
}
export default LineChartDemoComponent;

<script lang="ts">
  import { t6LineChartFixture } from "@grassroot/demo-fixtures";
  import { LineChart } from "@grassroot/charts-svelte";
  import type { CurveKind } from "@grassroot/charts-svelte";
 
  const CURVES: readonly CurveKind[] = ["linear", "monotone-x", "catmull-rom", "basis", "step"];
  let curve = $state<CurveKind>("linear");
</script>
 
<div>
  <div class="gr-demo-toggles" role="group" aria-label="Curve interpolation">
    {#each CURVES as kind (kind)}
      <button type="button" aria-pressed={curve === kind} onclick={() => (curve = kind)}>
        {kind}
      </button>
    {/each}
  </div>
  <LineChart {...t6LineChartFixture.props()} ariaLabel="Line chart" {curve} />
</div>

/** @jsxImportSource solid-js */
import { For, createSignal, type ComponentProps } from "solid-js";
import { t6LineChartFixture } from "@grassroot/demo-fixtures";
import { LineChart } from "@grassroot/charts-solid";
import type { CurveKind } from "@grassroot/charts-solid";
 
const CURVES: readonly CurveKind[] = ["linear", "monotone-x", "catmull-rom", "basis", "step"];
const FIXTURE = t6LineChartFixture.props() as unknown as ComponentProps<typeof LineChart>;
 
export default function LineChartDemo() {
  const [curve, setCurve] = createSignal<CurveKind>("linear");
  return (
    <div>
      <div class="gr-demo-toggles" role="group" aria-label="Curve interpolation">
        <For each={CURVES}>
          {(kind) => (
            <button type="button" aria-pressed={curve() === kind} onClick={() => setCurve(kind)}>
              {kind}
            </button>
          )}
        </For>
      </div>
      <LineChart {...FIXTURE} ariaLabel="Line chart" curve={curve()} />
    </div>
  );
}