Connect data

const st = useChartData(url, { refreshMs: 60_000 });

<ChartState loading={st.loading} error={st.error} empty={st.empty} onRetry={st.reload}>
  <BarChart data={st.data} x="q" y="v" />
</ChartState>

import { BarChart, ChartCard, ChartState, useChartData } from "ztd-charts";

/**
 * Load from a REST JSON API.
 * If the response is wrapped like { data: { items: [...] } }, select pulls out the inner array.
 */
export function RestJsonChart({ url = "/data/orders.json" }: { url?: string }) {
  const orders = useChartData<{ day: string; orders: number }>(url, {
    select: "data.items",
    refreshMs: 60_000,
    init: { headers: { Accept: "application/json" } },
  });
  return (
    <ChartCard title="Orders by weekday" subtitle="REST JSON, refreshed every minute" takeaway="Friday is the busiest day" level="basic" replay>
      <ChartState loading={orders.loading && !orders.data.length} error={orders.error} empty={orders.empty} onRetry={orders.reload}>
        <BarChart data={orders.data} x="day" y="orders" unit=" orders" />
      </ChartState>
    </ChartCard>
  );
}

import { ChartCard, ChartState, LineChart, parseCSV, useChartData } from "ztd-charts";

/**
 * Pass a CSV file URL as is. It is read with parseCSV, based on the content-type or the .csv extension.
 * Cells such as "1,234", "12%" and "₩5,000" become numbers.
 */
export function CsvChart({ url = "/data/sales.csv" }: { url?: string }) {
  const sales = useChartData(url);
  return (
    <ChartCard title="Monthly revenue by channel" subtitle="CSV (USD K)" takeaway="Social grows fast" level="basic" replay>
      <ChartState loading={sales.loading && !sales.data.length} error={sales.error} empty={sales.empty} onRetry={sales.reload}>
        <LineChart data={sales.data} x="month" y="revenue" series="channel" highlight="Social" unit="K" />
      </ChartState>
    </ChartCard>
  );
}

// If you already have the text, parse it right away
export const rows = parseCSV(`month,channel,revenue
2025-01,Search,120
2025-01,Social,64`);

import { ChartCard, ChartState, DonutChart, useChartData } from "ztd-charts";

/**
 * Google Sheets: choose File > Share > Publish to web > CSV, or use one of these address formats.
 *   https://docs.google.com/spreadsheets/d/<sheet ID>/export?format=csv&gid=<tab ID>
 *   https://docs.google.com/spreadsheets/d/<sheet ID>/gviz/tq?tqx=out:csv&sheet=<tab name>
 * Addresses with format=csv or out:csv are read as CSV.
 */
export function SheetChart({ url }: { url: string }) {
  const sheet = useChartData(url);
  return (
    <ChartCard title="Budget by channel" subtitle="Google Sheets CSV" takeaway="Search ads take half" level="basic" replay>
      <ChartState loading={sheet.loading && !sheet.data.length} error={sheet.error} empty={sheet.empty} onRetry={sheet.reload}>
        <DonutChart data={sheet.data} label="channel" value="budget" centerLabel="Budget ($K)" />
      </ChartState>
    </ChartCard>
  );
}