Interaction and states

// apps/docs/examples/charts/interaction.tsx'use client';
import {useRef, useState} from 'react';import {MONTHLY_SALES, SALES_SERIES} from '@/lib/examples/chart-data';
import {  BarChart,  englishChartTranslator,  type ChartHandle,  type ChartItemRef,} from '@workspace/active-charts';import {Button} from '@workspace/active-ui/components/primitives/button';
/** A readable name for a selected bar: its series and its month. */function describe(ref: ChartItemRef): string {  if ('seriesId' in ref) return `${ref.seriesId} @ ${String(ref.key)}`;  return JSON.stringify(ref);}
/** * Selection under the host's control, the shared tooltip and legend, and * the export of the imperative handle. Click a bar, or move to it with the * arrow keys and press Space, to select it; Shift+F10 opens the chart's menu * with copy, the data table and export. */export default function ChartInteraction() {  const chart = useRef<ChartHandle>(null);  const [selected, setSelected] = useState<ChartItemRef[]>([]);  const [exported, setExported] = useState<string | null>(null);  return (    <div className="flex w-full flex-col gap-4">      <BarChart        ref={chart}        data={MONTHLY_SALES}        xKey="month"        xAxis="category"        series={SALES_SERIES}        legend        tooltip={{enabled: true, mode: 'shared'}}        selection        selectedItems={selected}        onSelectionChange={(next) => setSelected(next)}        height={300}        locale="en-GB"        t={englishChartTranslator}      />      <div className="flex flex-wrap items-center gap-2">        <Button          variant="outline"          size="sm"          onClick={async () => {            const result = await chart.current?.exportAsCsv('sales.csv');            setExported(              result ? `${result.filename}: ${result.blob.size} bytes` : null,            );          }}        >          Export CSV        </Button>        <Button          variant="outline"          size="sm"          onClick={async () => {            const result = await chart.current?.exportAsPng('sales.png', 2);            setExported(              result ? `${result.filename}: ${result.blob.size} bytes` : null,            );          }}        >          Export PNG        </Button>        <Button          variant="ghost"          size="sm"          disabled={selected.length === 0}          onClick={() => setSelected([])}        >          Clear selection        </Button>      </div>      <p className="text-sm" aria-live="polite" data-chart-selection>        Selected:{' '}        {selected.length > 0 ? selected.map(describe).join(', ') : 'nothing'}      </p>      {exported ? (        <p className="text-muted-foreground text-sm">{exported}</p>      ) : null}    </div>  );}

// apps/docs/examples/charts/states.tsx'use client';
import {  BarChart,  ChartDefaults,  englishChartTranslator,  GaugeChart,  SankeyChart,} from '@workspace/active-charts';
/** * What a chart shows when it cannot draw the data truthfully: no rows, a * gauge whose range is empty, a flow that loops. Each is a translated * unavailable state, not an empty frame or a broken drawing. */export default function ChartStates() {  return (    <ChartDefaults locale="en-GB" t={englishChartTranslator}>      <div className="grid w-full gap-6 sm:grid-cols-3">        <section aria-label="No rows" data-chart-state="empty">          <p className="mb-2 text-sm font-medium">No rows</p>          <BarChart            data={[]}            xKey="month"            xAxis="category"            yKey="sales"            name="Sales"            height={180}          />        </section>        <section aria-label="Empty range" data-chart-state="range">          <p className="mb-2 text-sm font-medium">Empty gauge range</p>          <GaugeChart value={5} min={10} max={10} label="Score" height={180} />        </section>        <section aria-label="A loop" data-chart-state="cycle">          <p className="mb-2 text-sm font-medium">A flow with a loop</p>          <SankeyChart            nodes={[              {id: 'a', label: 'A'},              {id: 'b', label: 'B'},            ]}            links={[              {source: 'a', target: 'b', value: 3},              {source: 'b', target: 'a', value: 1},            ]}            height={180}          />        </section>      </div>    </ChartDefaults>  );}