Data a chart cannot draw

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