---
import DocLayout from "../../layouts/DocLayout.astro";
import ComponentSection from "../../components/docs/ComponentSection.astro";
import ComponentExample from "../../components/docs/ComponentExample.astro";
import {
  BasicLineChartDemo,
  BarChartDemo,
  CustomAxisLabelFormatDemo,
  GradientLineChartDemo,
  IncompleteDataChartDemo,
  LoadingChartDemo,
  TimeRangeSelectionChartDemo,
} from "~/components/demos/Chart/ChartDemo";
import Heading from "~/components/docs/Heading.astro";
---

<DocLayout
  title="Timeseries Chart"
  description="A specialized chart for displaying time-based data."
  sourceFile="components/chart/TimeseriesChart.tsx"
>
  <p class="mb-12">
    The timeseries chart is a specialized chart for displaying time-based data.
    Each data point is a tuple of <code>[timestamp_in_ms, value]</code>.
  </p>

  <ComponentSection>
    <Heading level={3} class="mb-4">Basic Line Chart</Heading>

    <p class="my-4">
      A simple line chart displaying multiple data series over time.
    </p>

    <ComponentExample
      code={`import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
  {
    name: "Requests",
    color: ChartPalette.semantic("Neutral", isDarkMode),
    data: [
      [timestamp_in_ms, value],
      [timestamp_in_ms, value],
      ...
    ],
  },
  {
    name: "Errors",
    color: ChartPalette.semantic("Attention", isDarkMode),
    data: [
      [timestamp_in_ms, value],
      [timestamp_in_ms, value],
      ...
    ],
  },
];

<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="Count"
/>`}
    >
      <BasicLineChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Custom Axis & Tooltip Formats</Heading>

    <p class="my-4">
      Use <code>xAxisTickFormat</code> and <code>yAxisTickFormat</code> to
      control how axis tick labels are rendered. The x-axis formatter receives the raw
      timestamp in milliseconds; the y-axis formatter receives the raw numeric value.
      Both return a display string.
    </p>

    <p class="my-4">
      Use <code>tooltipValueFormat</code> to control how values appear in the
      hover tooltip. It receives the raw y-value and returns a display string.
      When omitted, the raw value is shown.
    </p>

    <ComponentExample
      code={`import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="Requests"
  xAxisTickFormat={(ts) => {
    const d = new Date(ts);
    return d.getHours().toString().padStart(2, "0")
      + ":" + d.getMinutes().toString().padStart(2, "0");
  }}
  yAxisTickFormat={(value) => {
    if (value >= 1000) return value / 1000 + "k";
    return value.toString();
  }}
  tooltipValueFormat={(value) =>
    (value / 1000).toFixed(1) + "k requests"
  }
/>`}
    >
      <CustomAxisLabelFormatDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Gradient Fill</Heading>

    <p class="my-4">
      Set <code>gradient</code> to <code>true</code> to render a vertical gradient
      fill beneath each line series. The fill fades from the series color at the
      top to transparent at the bottom, giving the chart a polished area-chart look
      without losing the clarity of individual lines.
    </p>

    <ComponentExample
      code={`<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="Count"
  gradient
/>`}
    >
      <GradientLineChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Incomplete Data</Heading>

    <p class="my-4">
      Use the <code>incomplete</code> prop to indicate regions where data may be
      incomplete or still being collected.
    </p>

    <ComponentExample
      code={`import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
  {
    name: "Bandwidth",
    color: ChartPalette.color(0, isDarkMode),
    data: [
      [timestamp_in_ms, value],
      [timestamp_in_ms, value],
      ...
    ],
  },
];

<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="Mbps"
  incomplete={{ after: timestamp_in_ms }}
/>`}
    >
      <IncompleteDataChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Time Range Selection</Heading>

    <p class="my-4">
      Enable time range selection by providing the <code>onTimeRangeChange</code
      >
      callback. Users can click and drag on the chart to select a time range.
    </p>

    <ComponentExample
      code={`import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
  {
    name: "CPU Usage",
    color: ChartPalette.color(0, isDarkMode),
    data: [
      [timestamp_in_ms, value],
      [timestamp_in_ms, value],
      ...
    ],
  },
];

<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="%"
  onTimeRangeChange={(from, to) => {
    alert("Selected range: " + from + " - " + to);
  }}
/>`}
    >
      <TimeRangeSelectionChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Bar Chart</Heading>

    <p class="my-4">
      Set <code>type="bar"</code> to render series as stacked bars instead of lines.
      All other props — axes, tooltips, colors — work identically.
    </p>

    <ComponentExample
      code={`<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  type="bar"
  data={data}
  xAxisName="Time (UTC)"
  yAxisName="Count"
/>`}
    >
      <BarChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={3} class="mb-4">Loading State</Heading>

    <p class="my-4">
      Set <code>loading</code> to <code>true</code> to display an animated sine-wave
      skeleton while data is being fetched. The chart canvas is hidden until loading
      completes; swap back to <code>loading={`{false}`}</code> to reveal the chart.
    </p>

    <ComponentExample
      code={`const [isLoading, setIsLoading] = useState(true);

<TimeseriesChart
  echarts={echarts}
  isDarkMode={isDarkMode}
  data={data}
  loading={isLoading}
/>`}
    >
      <LoadingChartDemo client:visible />
    </ComponentExample>
  </ComponentSection>
</DocLayout>
