---
import DocLayout from "../../layouts/DocLayout.astro";
import ComponentSection from "../../components/docs/ComponentSection.astro";
import {
  PieChartPreviewDemo,
  TimeseriesChartPreviewDemo,
  LegendDefaultDemo,
  LegendCompactDemo,
  ChartExampleDemo,
} from "~/components/demos/Chart/ChartDemo";
import { ColorDemo } from "~/components/demos/Chart/ColorDemo";
import ChartCard from "~/components/demos/Chart/ChartCard.astro";
import Heading from "~/components/docs/Heading.astro";
import CodeBlock from "~/components/docs/CodeBlock.astro";
import ComponentExample from "~/components/docs/ComponentExample.astro";
---

<DocLayout
  title="Charts"
  description="Charts built on ECharts."
  sourceFile="components/chart/index.ts"
>
  <ComponentSection>
    <p class="mb-4">
      Chart components are built on ECharts. Install it as a dependency:
    </p>

    <CodeBlock code={"npm install echarts"} lang="bash" />

    <p class="my-4">
      For optimal bundle size, import only the ECharts components you need. The
      examples below show the minimum required imports for our use cases.
    </p>

    <CodeBlock
      code={`import * as echarts from "echarts/core";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { useEffect, useMemo, useState } from "react";
import {
  AriaComponent,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  TooltipComponent,
  CanvasRenderer,
  AriaComponent,
]);`}
      lang="tsx"
    />
  </ComponentSection>

  <ComponentSection>
    <Heading level={2} class="mb-6">Available Charts</Heading>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <ChartCard
        title="Timeseries Chart"
        description="A specialized chart for displaying time-based data."
        href="/charts/timeseries"
      >
        <TimeseriesChartPreviewDemo client:visible />
      </ChartCard>

      <ChartCard
        title="Custom Chart"
        description="Examples like pie charts."
        href="/charts/custom"
      >
        <PieChartPreviewDemo client:visible />
      </ChartCard>
    </div>
  </ComponentSection>

  <ComponentSection>
    <Heading level={2} class="mb-6">Coloring</Heading>

    <div class="space-y-6">
      <p>
        Use semantic colors for meaning (errors, warnings) and categorical
        colors for differentiating arbitrary series.
      </p>

      <CodeBlock
        code={`import { ChartPalette } from "@cloudflare/kumo";

const attention = ChartPalette.semantic("Attention", isDarkMode);
const series0 = ChartPalette.color(0, isDarkMode);`}
        lang="tsx"
      />

      <ColorDemo />
    </div>
  </ComponentSection>

  <ComponentSection>
    <Heading level={2} class="mb-6">Legend</Heading>

    <p class="mb-6">
      Use <code>LegendItem</code> to display chart series information with color
      indicators.
    </p>

    <Heading level={3} class="mb-4">LargeItem</Heading>
    <ComponentExample
      code={`<ChartLegend.LargeItem
  name="Requests"
  color={ChartPalette.semantic("Neutral", isDarkMode)}
  value="1,234"
  unit="req/s"
/>`}
    >
      <LegendDefaultDemo client:visible />
    </ComponentExample>

    <Heading level={3} class="mb-4 mt-8">SmallItem</Heading>
    <ComponentExample
      code={`<ChartLegend.SmallItem
  name="Series A"
  color={ChartPalette.color(0, isDarkMode)}
  value="45%"
/>`}
    >
      <LegendCompactDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ChartExampleDemo client:visible />
</DocLayout>
