Selection, tooltip, legend and export

// 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>  );}