---
import DocLayout from "../../layouts/DocLayout.astro";
import ComponentSection from "../../components/docs/ComponentSection.astro";
import { PieChartDemo } from "~/components/demos/Chart/ChartDemo";
import ComponentExample from "~/components/docs/ComponentExample.astro";
import Heading from "~/components/docs/Heading.astro";
---

<DocLayout
  title="Custom Chart"
  description="Example charts using the Chart component."
  sourceFile="components/chart/EChart.tsx"
>
  <ComponentSection>
    <Heading level={2} class="mb-6">Custom Chart</Heading>

    <ComponentExample
      code={`import { Chart } from "@cloudflare/kumo"

const options = useMemo(
  () => ({
      series: [
        {
          type: "pie",
          data: [
            { value: 101, name: "Series A" },
            { value: 202, name: "Series B" },
            { value: 303, name: "Series C" },
            { value: 404, name: "Series D" },
            { value: 505, name: "Series E" },
          ],
        },
      ],
    }) as echarts.EChartsOption,
  [],
)

<Chart options={options} echarts={echarts} />
`}
    >
      <PieChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>
</DocLayout>
