@manta-eu/react 0.1.8 → 0.1.10

package/src/components/chart/RadarChart.tsx

@@ -0,0 +1,35 @@
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart as RechartsRadarChart } from "recharts";
+import type { ChartConfig } from "./chart";
+import { ChartTooltip, ChartTooltipContent } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import type { RadarChartData } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+
+export type RadarChartProps = {
+  data: RadarChartData;
+};
+
+export function RadarChart(props: RadarChartProps) {
+  const { data } = props;
+
+  const config = {
+    value: { label: "Value", color: chartColorAt(0) },
+  } satisfies ChartConfig;
+
+  return (
+    <ChartFrame config={config} title={data.title} height={data.height}>
+      <RechartsRadarChart data={data.data}>
+        <PolarGrid />
+        <PolarAngleAxis dataKey="subject" />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Radar
+          dataKey="value"
+          stroke="var(--color-value)"
+          fill="var(--color-value)"
+          fillOpacity={0.3}
+          isAnimationActive={false}
+        />
+      </RechartsRadarChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/ScatterChart.tsx

@@ -0,0 +1,63 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { CartesianGrid, LabelList, Scatter, ScatterChart as RechartsScatterChart, XAxis, YAxis } from "recharts";
+import { renderAnnotations, valueLabelProps } from "./annotations";
+import { ChartTooltip, ChartTooltipContent } from "./chart";
+import type { ChartConfig } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import type { ScatterChartData } from "./chart-schemas";
+import { ChartFrame } from "./ChartFrame";
+
+export type ScatterChartProps = {
+  data: ScatterChartData;
+};
+
+export function ScatterChart(props: ScatterChartProps) {
+  const { data } = props;
+
+  const config = {
+    x: { label: data.xAxisLabel ?? "X" },
+    y: { label: data.yAxisLabel ?? "Y", color: chartColorAt(0) },
+  } satisfies ChartConfig;
+
+  return (
+    <ChartFrame config={config} title={data.title} height={data.height}>
+      <RechartsScatterChart
+        accessibilityLayer
+        margin={{ top: 8, right: 12, left: 8, bottom: isPresent(data.xAxisLabel) ? 16 : 0 }}
+      >
+        <CartesianGrid strokeDasharray="2 3" />
+        <XAxis
+          type="number"
+          dataKey="x"
+          name={data.xAxisLabel}
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={24}
+          label={
+            isPresent(data.xAxisLabel) ? { value: data.xAxisLabel, position: "insideBottom", offset: -4 } : undefined
+          }
+        />
+        <YAxis
+          type="number"
+          dataKey="y"
+          name={data.yAxisLabel}
+          tickLine={false}
+          axisLine={false}
+          width={isPresent(data.yAxisLabel) ? 56 : 44}
+          label={
+            isPresent(data.yAxisLabel) ? { value: data.yAxisLabel, angle: -90, position: "insideLeft" } : undefined
+          }
+        />
+        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
+        <Scatter data={data.data} fill="var(--color-y)" isAnimationActive={false}>
+          {data.showValueLabels ? <LabelList {...valueLabelProps} dataKey="y" /> : null}
+        </Scatter>
+        {renderAnnotations(data.annotations, {
+          x: data.data.map((point) => point.x),
+          y: data.data.map((point) => point.y),
+        })}
+      </RechartsScatterChart>
+    </ChartFrame>
+  );
+}

package/src/components/chart/annotations.tsx

@@ -0,0 +1,214 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ReactElement } from "react";
+import { ReferenceArea, ReferenceDot, ReferenceLine } from "recharts";
+import { match } from "ts-pattern";
+import type { Annotation, AnnotationStat, AnnotationTone } from "./chart-schemas";
+
+const labelFill = "var(--color-muted-foreground)";
+
+const toneColor: Record<AnnotationTone, string> = {
+  danger: "var(--color-error-foreground)",
+  warning: "var(--color-warning-foreground)",
+  success: "var(--color-success-foreground)",
+  info: "var(--color-info-foreground)",
+  neutral: "var(--color-muted-foreground)",
+};
+
+const labelHalo = { stroke: "var(--color-background)", strokeWidth: 1.5, paintOrder: "stroke" } as const;
+
+export const valueLabelProps = { position: "top", fill: labelFill, fontSize: 11, offset: 8, ...labelHalo } as const;
+
+type LabelAnchor = "insideTopRight" | "insideBottomRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "top";
+
+function annotationLabel(value: string, position: LabelAnchor, fill: string) {
+  return { value, position, fill, fontSize: 11, ...labelHalo };
+}
+
+const annotationDefaultColor = "var(--color-muted-foreground)";
+
+function resolveColor(fallback: string, tone?: AnnotationTone, color?: string): string {
+  if (isPresent(color)) {
+    return color;
+  }
+  if (isPresent(tone)) {
+    return toneColor[tone];
+  }
+  return fallback;
+}
+
+export type StatContext = {
+  x?: number[];
+  y?: number[];
+  bar?: number[];
+  line?: number[];
+  series?: Record<string, { values: number[]; yAxisId?: string }>;
+};
+
+const statLabels: Record<AnnotationStat, string> = {
+  average: "Average",
+  median: "Median",
+  min: "Min",
+  max: "Max",
+  p90: "P90",
+};
+
+const statValueFormat = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+
+function computeStat(values: number[], stat: AnnotationStat): number | undefined {
+  const finite = values.filter((value) => Number.isFinite(value));
+  if (!isPresent(finite)) {
+    return undefined;
+  }
+  return match(stat)
+    .with("average", () => finite.reduce((sum, value) => sum + value, 0) / finite.length)
+    .with("min", () => Math.min(...finite))
+    .with("max", () => Math.max(...finite))
+    .with("median", () => percentile(finite, 50))
+    .with("p90", () => percentile(finite, 90))
+    .exhaustive();
+}
+
+function percentile(values: number[], p: number): number {
+  const sorted = [...values].sort((a, b) => a - b);
+  const rank = (p / 100) * (sorted.length - 1);
+  const low = Math.floor(rank);
+  const high = Math.ceil(rank);
+  const lowValue = sorted[low] ?? 0;
+  const highValue = sorted[high] ?? lowValue;
+  return lowValue + (highValue - lowValue) * (rank - low);
+}
+
+function resolveStatSource(
+  annotation: Extract<Annotation, { kind: "stat-line" }>,
+  stats?: StatContext,
+): { axis: "x" | "y"; values: number[]; yAxisId?: string } | undefined {
+  if (isPresent(annotation.series)) {
+    const named = stats?.series?.[annotation.series];
+    if (named !== undefined && isPresent(named.values)) {
+      return { axis: "y", values: named.values, yAxisId: named.yAxisId };
+    }
+    if (annotation.series !== "bar" && annotation.series !== "line") {
+      return undefined;
+    }
+    const seriesValues = annotation.series === "bar" ? stats?.bar : stats?.line;
+    if (isPresent(seriesValues)) {
+      return { axis: "y", values: seriesValues };
+    }
+  }
+  const requestedAxis = annotation.axis ?? "y";
+  const requestedValues = requestedAxis === "x" ? stats?.x : stats?.y;
+  if (isPresent(requestedValues)) {
+    return { axis: requestedAxis, values: requestedValues };
+  }
+  const yValues = stats?.y;
+  if (isPresent(yValues)) {
+    return { axis: "y", values: yValues };
+  }
+  return undefined;
+}
+
+export function renderAnnotations(annotations?: Annotation[], stats?: StatContext): ReactElement[] {
+  if (!isPresent(annotations)) {
+    return [];
+  }
+  return annotations
+    .map((annotation, index) => renderAnnotation(annotation, index, stats))
+    .filter((element): element is ReactElement => element !== null);
+}
+
+type ReferenceLineArgs = {
+  key: string;
+  axis: "x" | "y";
+  value: string | number;
+  label?: string;
+  labelPosition: LabelAnchor;
+  stroke: string;
+  dash?: string;
+  yAxisId?: string;
+};
+
+function referenceLine(args: ReferenceLineArgs): ReactElement {
+  const { key, axis, value, label, labelPosition, stroke, dash, yAxisId } = args;
+  const position = axis === "y" ? { y: value } : { x: value };
+  return (
+    <ReferenceLine
+      key={key}
+      {...position}
+      {...(yAxisId === undefined ? {} : { yAxisId })}
+      stroke={stroke}
+      strokeDasharray={dash ?? "6 4"}
+      strokeWidth={1.5}
+      ifOverflow="extendDomain"
+      label={isPresent(label) ? annotationLabel(label, labelPosition, stroke) : undefined}
+    />
+  );
+}
+
+function renderAnnotation(annotation: Annotation, index: number, stats?: StatContext): ReactElement | null {
+  const key = `annotation-${index}`;
+
+  return match(annotation)
+    .with({ kind: "reference-line" }, (line) =>
+      referenceLine({
+        key,
+        axis: line.axis,
+        value: line.value,
+        label: line.label,
+        labelPosition: line.axis === "y" ? "insideTopRight" : "insideTop",
+        stroke: resolveColor(annotationDefaultColor, line.tone, line.color),
+        dash: line.strokeDasharray,
+      }),
+    )
+    .with({ kind: "stat-line" }, (line) => {
+      const source = resolveStatSource(line, stats);
+      if (source === undefined) {
+        return null;
+      }
+      const value = computeStat(source.values, line.stat);
+      if (value === undefined) {
+        return null;
+      }
+      return referenceLine({
+        key,
+        axis: source.axis,
+        value,
+        label: line.label ?? `${statLabels[line.stat]} · ${statValueFormat.format(value)}`,
+        labelPosition: source.axis === "y" ? "insideBottomRight" : "insideBottom",
+        stroke: resolveColor(annotationDefaultColor, line.tone, line.color),
+        dash: line.strokeDasharray,
+        yAxisId: source.yAxisId,
+      });
+    })
+    .with({ kind: "reference-area" }, (area) => {
+      const fill = resolveColor(annotationDefaultColor, area.tone, area.color);
+      const position = area.axis === "y" ? { y1: area.from, y2: area.to } : { x1: area.from, x2: area.to };
+      return (
+        <ReferenceArea
+          key={key}
+          {...position}
+          fill={fill}
+          fillOpacity={0.12}
+          stroke="none"
+          ifOverflow="extendDomain"
+          label={isPresent(area.label) ? annotationLabel(area.label, "insideTopLeft", labelFill) : undefined}
+        />
+      );
+    })
+    .with({ kind: "reference-point" }, (point) => {
+      const fill = resolveColor(annotationDefaultColor, point.tone, point.color);
+      return (
+        <ReferenceDot
+          key={key}
+          x={point.x}
+          y={point.y}
+          r={5}
+          fill={fill}
+          stroke="var(--color-background)"
+          strokeWidth={1.5}
+          ifOverflow="extendDomain"
+          label={isPresent(point.label) ? annotationLabel(point.label, "top", labelFill) : undefined}
+        />
+      );
+    })
+    .exhaustive();
+}

package/src/components/chart/chart-colors.ts

@@ -0,0 +1,10 @@
+export const chartColorPalette = [
+  "var(--color-chart-01, #bb8581)",
+  "var(--color-chart-02, #ebadfb)",
+  "var(--color-chart-03, #d1d6fd)",
+  "var(--color-chart-04, #ee8e68)",
+] as const;
+
+export function chartColorAt(index: number): string {
+  return chartColorPalette[index % chartColorPalette.length] ?? chartColorPalette[0];
+}

package/src/components/chart/chart-schemas.ts

@@ -0,0 +1,374 @@
+import { z } from "zod/v4";
+import { chartColorPalette } from "./chart-colors";
+import { offsetSeriesKeys } from "./stacks";
+
+const baseChartSchema = z.object({
+  title: z.string().optional(),
+  height: z.number().int().min(120).max(600).optional(),
+});
+
+const cartesianAxisFields = {
+  xAxisLabel: z.string().optional(),
+  yAxisLabel: z.string().optional(),
+};
+
+const seriesKeySchema = z
+  .string()
+  .regex(/^[A-Za-z_][A-Za-z0-9_]*$/, "A series key is letters, digits and underscores, starting with a letter");
+
+export const chartSeriesAxes = ["left", "right"] as const;
+export const chartSeriesKinds = ["bar", "line"] as const;
+export const maxChartSeries = chartColorPalette.length;
+
+export const chartSeriesSchema = z.object({
+  key: seriesKeySchema,
+  label: z.string().optional(),
+  axis: z.enum(chartSeriesAxes).optional(),
+});
+
+export const composedChartSeriesSchema = chartSeriesSchema.extend({
+  kind: z.enum(chartSeriesKinds),
+});
+
+const multiSeriesFields = {
+  series: z.array(chartSeriesSchema).min(1).max(maxChartSeries).optional(),
+  rightAxisLabel: z.string().optional(),
+};
+
+const xyDataPointSchema = z.looseObject({
+  x: z.union([z.string(), z.number()]),
+  y: z.number().optional(),
+});
+
+const nameValueDataPointSchema = z.object({
+  name: z.string(),
+  value: z.number(),
+});
+
+const seriesNameValueDataPointSchema = z.looseObject({
+  name: z.string(),
+  value: z.number().optional(),
+});
+
+type StatSeriesChart = { annotations?: { kind: string; series?: string }[] };
+
+type SeriesChart = StatSeriesChart & {
+  data: Record<string, unknown>[];
+  series?: { key: string; axis?: "left" | "right"; kind?: "bar" | "line" }[];
+  stacked?: boolean;
+};
+
+function checkStatSeries(
+  chart: StatSeriesChart,
+  ctx: z.core.$RefinementCtx<StatSeriesChart>,
+  keys: string[] = [],
+  offset = new Set<string>(),
+) {
+  const known = new Set<string>([...annotationSeriesValues, ...keys]);
+  chart.annotations?.forEach((annotation, index) => {
+    if (annotation.series === undefined) {
+      return;
+    }
+    if (offset.has(annotation.series)) {
+      ctx.addIssue({
+        code: "custom",
+        message: `"${annotation.series}" is stacked on another series, so a stat line on it would not line up; leave out "series" to measure the stack total`,
+        path: ["annotations", index, "series"],
+      });
+    } else if (!known.has(annotation.series)) {
+      ctx.addIssue({
+        code: "custom",
+        message: `"${annotation.series}" is not a series of this chart`,
+        path: ["annotations", index, "series"],
+      });
+    }
+  });
+}
+
+function checkSeries(valueKeys: readonly string[], categoryKey: string) {
+  return (chart: SeriesChart, ctx: z.core.$RefinementCtx<SeriesChart>) => {
+    const { data, series } = chart;
+    checkStatSeries(
+      chart,
+      ctx,
+      series?.map(({ key }) => key),
+      offsetSeriesKeys(series, chart.stacked),
+    );
+    if (series === undefined) {
+      data.forEach((point, index) => {
+        valueKeys.forEach((key) => {
+          if (typeof point[key] !== "number") {
+            ctx.addIssue({ code: "custom", message: `Expected a number for "${key}"`, path: ["data", index, key] });
+          }
+        });
+      });
+      return;
+    }
+    const seen = new Set<string>();
+    series.forEach(({ key }, index) => {
+      if (key === categoryKey) {
+        ctx.addIssue({ code: "custom", message: `"${key}" is the category field`, path: ["series", index, "key"] });
+      }
+      if (seen.has(key)) {
+        ctx.addIssue({ code: "custom", message: `"${key}" is listed twice`, path: ["series", index, "key"] });
+      }
+      seen.add(key);
+    });
+    data.forEach((point, index) => {
+      series.forEach(({ key }) => {
+        const value = point[key];
+        if (value !== undefined && value !== null && typeof value !== "number") {
+          ctx.addIssue({ code: "custom", message: `Expected a number for "${key}"`, path: ["data", index, key] });
+        }
+      });
+    });
+    series.forEach(({ key }, index) => {
+      if (!data.some((point) => typeof point[key] === "number")) {
+        ctx.addIssue({
+          code: "custom",
+          message: `"${key}" has no values: give each point a number under "${key}"`,
+          path: ["series", index, "key"],
+        });
+      }
+    });
+  };
+}
+
+export type SeriesChartData<Chart extends { series?: unknown }, Point> =
+  | (Omit<Chart, "data" | "series"> & { data: Point[]; series?: undefined })
+  | (Chart & { series: NonNullable<Chart["series"]> });
+
+function asSeriesChartData<Data extends SeriesChart>() {
+  // checkSeries has proven the shape; this only tells TypeScript.
+  return (chart: SeriesChart) => chart as Data;
+}
+
+const scatterDataPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+});
+
+const radarDataPointSchema = z.object({
+  subject: z.string(),
+  value: z.number(),
+});
+
+const composedDataPointSchema = z.looseObject({
+  name: z.string(),
+  barValue: z.number().optional(),
+  lineValue: z.number().optional(),
+});
+
+const axisValueSchema = z.union([z.string(), z.number()]);
+
+export const annotationTones = ["danger", "warning", "success", "info", "neutral"] as const;
+export const annotationStats = ["average", "median", "min", "max", "p90"] as const;
+export const annotationSeriesValues = ["bar", "line"] as const;
+
+export const annotationToneSchema = z.enum(annotationTones);
+export const annotationStatSchema = z.enum(annotationStats);
+const annotationSeriesSchema = z.enum(annotationSeriesValues);
+
+const referenceLineAnnotationSchema = z.object({
+  kind: z.literal("reference-line"),
+  axis: z.enum(["x", "y"]),
+  value: axisValueSchema,
+  label: z.string().optional(),
+  tone: annotationToneSchema.optional(),
+  color: z.string().optional(),
+  strokeDasharray: z.string().optional(),
+});
+
+const statLineAnnotationSchema = z.object({
+  kind: z.literal("stat-line"),
+  stat: annotationStatSchema,
+  axis: z.enum(["x", "y"]).optional(),
+  series: z.union([annotationSeriesSchema, seriesKeySchema]).optional(),
+  label: z.string().optional(),
+  tone: annotationToneSchema.optional(),
+  color: z.string().optional(),
+  strokeDasharray: z.string().optional(),
+});
+
+const referenceAreaAnnotationSchema = z.object({
+  kind: z.literal("reference-area"),
+  axis: z.enum(["x", "y"]),
+  from: axisValueSchema,
+  to: axisValueSchema,
+  label: z.string().optional(),
+  tone: annotationToneSchema.optional(),
+  color: z.string().optional(),
+});
+
+const referencePointAnnotationSchema = z.object({
+  kind: z.literal("reference-point"),
+  x: axisValueSchema,
+  y: z.number(),
+  label: z.string().optional(),
+  tone: annotationToneSchema.optional(),
+  color: z.string().optional(),
+});
+
+export const annotationSchema = z.discriminatedUnion("kind", [
+  referenceLineAnnotationSchema,
+  statLineAnnotationSchema,
+  referenceAreaAnnotationSchema,
+  referencePointAnnotationSchema,
+]);
+
+const cartesianAnnotationFields = {
+  annotations: z.array(annotationSchema).optional(),
+  showValueLabels: z.boolean().optional(),
+};
+
+export const lineChartFieldsSchema = baseChartSchema.extend({
+  type: z.literal("line"),
+  data: z.array(xyDataPointSchema).min(1),
+  ...cartesianAxisFields,
+  ...cartesianAnnotationFields,
+  ...multiSeriesFields,
+});
+
+export type LineChartData = SeriesChartData<z.infer<typeof lineChartFieldsSchema>, { x: string | number; y: number }>;
+
+export const lineChartSchema = lineChartFieldsSchema
+  .superRefine(checkSeries(["y"], "x"))
+  .transform(asSeriesChartData<LineChartData>());
+
+export const areaChartFieldsSchema = baseChartSchema.extend({
+  type: z.literal("area"),
+  data: z.array(xyDataPointSchema).min(1),
+  stacked: z.boolean().optional(),
+  ...cartesianAxisFields,
+  ...cartesianAnnotationFields,
+  ...multiSeriesFields,
+});
+
+export type AreaChartData = SeriesChartData<z.infer<typeof areaChartFieldsSchema>, { x: string | number; y: number }>;
+
+export const areaChartSchema = areaChartFieldsSchema
+  .superRefine(checkSeries(["y"], "x"))
+  .transform(asSeriesChartData<AreaChartData>());
+
+export const barChartFieldsSchema = baseChartSchema.extend({
+  type: z.literal("bar"),
+  data: z.array(seriesNameValueDataPointSchema).min(1),
+  stacked: z.boolean().optional(),
+  ...cartesianAxisFields,
+  ...cartesianAnnotationFields,
+  ...multiSeriesFields,
+});
+
+export type BarChartData = SeriesChartData<z.infer<typeof barChartFieldsSchema>, { name: string; value: number }>;
+
+export const barChartSchema = barChartFieldsSchema
+  .superRefine(checkSeries(["value"], "name"))
+  .transform(asSeriesChartData<BarChartData>());
+
+export const pieChartSchema = baseChartSchema.extend({
+  type: z.literal("pie"),
+  data: z.array(nameValueDataPointSchema).min(1),
+});
+
+export const scatterChartSchema = baseChartSchema
+  .extend({
+    type: z.literal("scatter"),
+    data: z.array(scatterDataPointSchema).min(1),
+    ...cartesianAxisFields,
+    ...cartesianAnnotationFields,
+  })
+  .superRefine((chart, ctx) => checkStatSeries(chart, ctx));
+
+export const radarChartSchema = baseChartSchema.extend({
+  type: z.literal("radar"),
+  data: z.array(radarDataPointSchema).min(1),
+});
+
+export const composedChartFieldsSchema = baseChartSchema.extend({
+  type: z.literal("composed"),
+  data: z.array(composedDataPointSchema).min(1),
+  barLabel: z.string().optional(),
+  lineLabel: z.string().optional(),
+  stacked: z.boolean().optional(),
+  ...cartesianAxisFields,
+  ...cartesianAnnotationFields,
+  ...multiSeriesFields,
+  series: z.array(composedChartSeriesSchema).min(1).max(maxChartSeries).optional(),
+});
+
+export type ComposedChartData = SeriesChartData<
+  z.infer<typeof composedChartFieldsSchema>,
+  { name: string; barValue: number; lineValue: number }
+>;
+
+export const composedChartSchema = composedChartFieldsSchema
+  .superRefine(checkSeries(["barValue", "lineValue"], "name"))
+  .transform(asSeriesChartData<ComposedChartData>());
+
+export const chartSchema = z.discriminatedUnion("type", [
+  lineChartSchema,
+  areaChartSchema,
+  barChartSchema,
+  pieChartSchema,
+  scatterChartSchema,
+  radarChartSchema,
+  composedChartSchema,
+]);
+
+const generateChartDataPointSchema = z.looseObject({
+  x: z.union([z.string(), z.number()]).optional(),
+  y: z.number().optional(),
+  name: z.string().optional(),
+  value: z.number().optional(),
+  subject: z.string().optional(),
+  barValue: z.number().optional(),
+  lineValue: z.number().optional(),
+});
+
+const generateChartAnnotationSchema = z.object({
+  kind: z.enum(["reference-line", "stat-line", "reference-area", "reference-point"]),
+  axis: z.enum(["x", "y"]).optional(),
+  value: axisValueSchema.optional(),
+  from: axisValueSchema.optional(),
+  to: axisValueSchema.optional(),
+  x: axisValueSchema.optional(),
+  y: z.number().optional(),
+  stat: annotationStatSchema.optional(),
+  series: z.union([annotationSeriesSchema, seriesKeySchema]).optional(),
+  label: z.string().optional(),
+  tone: annotationToneSchema.optional(),
+  color: z.string().optional(),
+  strokeDasharray: z.string().optional(),
+});
+
+export const generateChartInputSchema = z.object({
+  type: z.enum(["line", "area", "bar", "pie", "scatter", "radar", "composed"]),
+  title: z.string().optional(),
+  height: z.number().int().min(120).max(600).optional(),
+  xAxisLabel: z.string().optional(),
+  yAxisLabel: z.string().optional(),
+  barLabel: z.string().optional(),
+  lineLabel: z.string().optional(),
+  rightAxisLabel: z.string().optional(),
+  data: z.array(generateChartDataPointSchema).min(1),
+  series: z
+    .array(chartSeriesSchema.extend({ kind: z.enum(chartSeriesKinds).optional() }))
+    .min(1)
+    .max(maxChartSeries)
+    .optional(),
+  stacked: z.boolean().optional(),
+  annotations: z.array(generateChartAnnotationSchema).optional(),
+  showValueLabels: z.boolean().optional(),
+});
+
+export type PieChartData = z.infer<typeof pieChartSchema>;
+export type ScatterChartData = z.infer<typeof scatterChartSchema>;
+export type RadarChartData = z.infer<typeof radarChartSchema>;
+export type ChartData = z.infer<typeof chartSchema>;
+export type ChartType = ChartData["type"];
+export type ChartSeries = z.infer<typeof chartSeriesSchema>;
+export type ComposedChartSeries = z.infer<typeof composedChartSeriesSchema>;
+export type Annotation = z.infer<typeof annotationSchema>;
+export type AnnotationTone = z.infer<typeof annotationToneSchema>;
+export type AnnotationStat = z.infer<typeof annotationStatSchema>;
+export type GenerateChartInput = z.infer<typeof generateChartInputSchema>;