@multiplatform.one/components 6.0.4 → 6.3.0

package/src/charts/BarChart.tsx

@@ -0,0 +1,138 @@
+import { useTranslation } from "react-i18next";
+import type { YStackProps } from "tamagui";
+import { XAxis, YAxis } from "./Axis";
+import { ChartSurface } from "./ChartSurface";
+import { describeChart, describeDatum } from "./accessibility";
+import { computeCartesianPlot, resolveSeriesFills, thinCategories } from "./composeChart";
+import { createBandScale, createLinearScale, getLinearTicks, valueDomain } from "./math";
+import { BarSeries } from "./series";
+import type { ChartDatum, ChartDatumEvents } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+export interface BarChartProps
+  extends ChartDatumEvents, Omit<YStackProps, "children" | "width" | "height"> {
+  data: ChartDatum[];
+  /** Drawing height in px (default 200). */
+  height?: number;
+  /** Explicit width bypasses responsive measurement. */
+  width?: number;
+  /**
+   * Bars are one series by default and paint the theme identity. Set true
+   * when each bar IS a category — bars take the identity-led categorical
+   * palette instead (LC-27).
+   */
+  categorical?: boolean;
+  /** Explicit single-series color (data value — passes through untouched). */
+  color?: string;
+  /** Explicit per-datum colors (data values — pass through untouched). */
+  colors?: string[];
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  /** y tick count hint (default 4). */
+  yTicks?: number;
+  valueFormatter?: (value: number) => string;
+  /** Chart title used in the generated accessible summary. */
+  title?: string;
+  /** Override the generated accessible summary. */
+  label?: string;
+}
+
+/**
+ * Categorical bar chart: d3 band/linear scales, zero-based value axis,
+ * knob-driven chrome, palette-driven marks, 44px column hit targets.
+ */
+export function BarChart({
+  data,
+  height = 200,
+  width,
+  categorical = false,
+  color,
+  colors,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  yTicks = 4,
+  valueFormatter,
+  title,
+  label,
+  onDatumPress,
+  onDatumHoverIn,
+  onDatumHoverOut,
+  ...stackProps
+}: BarChartProps) {
+  const { t } = useTranslation();
+  const { palette, labelFontSize } = useChartTheme();
+  const fills = resolveSeriesFills(data, palette, { color, colors, categorical });
+  const format = valueFormatter ?? ((value: number) => value.toLocaleString());
+  const ariaLabel =
+    label ?? describeChart({ typeLabel: t("Bar chart"), title, data, formatValue: valueFormatter });
+  const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
+
+  return (
+    <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
+      {(size) => {
+        const domain = valueDomain(data.map((datum) => datum.value));
+        // Ticks come from the domain alone, so the margin scale needs no
+        // meaningful range yet — the plot rectangle depends on label widths.
+        const marginScale = createLinearScale({ domain, range: [0, 1] });
+        const tickValues = getLinearTicks(marginScale, yTicks);
+        const plot = computeCartesianPlot(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map((value) => format(value)),
+          fontSize: labelFontSize,
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        const xScale = createBandScale({
+          domain: data.map((datum) => datum.label),
+          range: [plot.x, plot.x + plot.width],
+        });
+        const yScale = createLinearScale({
+          domain,
+          range: [plot.y + plot.height, plot.y],
+        });
+        return (
+          <>
+            {showYAxis || showGrid ? (
+              <YAxis
+                plot={plot}
+                scale={yScale}
+                ticks={yTicks}
+                tickFormat={(value) => format(value)}
+                showLabels={showYAxis}
+                showGrid={showGrid}
+              />
+            ) : null}
+            <BarSeries
+              data={data}
+              xScale={xScale}
+              yScale={yScale}
+              plot={plot}
+              fills={fills}
+              onDatumPress={onDatumPress}
+              onDatumHoverIn={onDatumHoverIn}
+              onDatumHoverOut={onDatumHoverOut}
+              datumLabel={
+                interactive
+                  ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
+                  : undefined
+              }
+            />
+            {showXAxis ? (
+              <XAxis
+                plot={plot}
+                scale={xScale}
+                tickValues={thinCategories(
+                  data.map((datum) => datum.label),
+                  plot.width,
+                  labelFontSize,
+                )}
+              />
+            ) : null}
+          </>
+        );
+      }}
+    </ChartSurface>
+  );
+}

package/src/charts/ChartSurface.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useState, type ReactNode } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { YStack, type YStackProps } from "tamagui";
+import { Svg, chartRootA11yProps } from "./svg";
+import type { ChartSize } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+export interface ChartSurfaceProps extends Omit<YStackProps, "children" | "width" | "height"> {
+  /**
+   * Generated accessible summary for the whole chart (Axiom 12) — rendered
+   * as `role="img"` + label. Build it with `describeChart()`.
+   */
+  label: string;
+  /** Drawing height in px (default 200). */
+  height?: number;
+  /**
+   * Explicit width bypasses `onLayout` measurement (SSR, tests, fixed
+   * layouts). Omit it to track the parent width responsively.
+   */
+  width?: number;
+  /** Pixel-space render prop — receives the measured viewport. */
+  children: (size: ChartSize) => ReactNode;
+}
+
+/**
+ * Responsive SVG chart viewport.
+ *
+ * Measures its own width via `onLayout` (ResizeObserver-backed on web, native
+ * layout on RN) and hands children a pixel-space viewport, so scales resolve
+ * to real device pixels: strokes stay crisp, no `preserveAspectRatio="none"`
+ * distortion, and touch-target floors are true 44px.
+ *
+ * Draw-in: the surface carries the knob `transition` with a mount
+ * `enterStyle` (fade + rise). Both are omitted entirely at `animation=none`
+ * or OS reduced motion (A-CONTINUOUS; LC-24 pairing — styles never render
+ * without a driver).
+ */
+export function ChartSurface({
+  label,
+  height = 200,
+  width: widthProp,
+  children,
+  ...stackProps
+}: ChartSurfaceProps) {
+  const { transition, animationEnabled } = useChartTheme();
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const width = widthProp ?? measuredWidth;
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const next = event.nativeEvent.layout.width;
+    setMeasuredWidth((prev) => (Math.abs(prev - next) >= 0.5 ? next : prev));
+  }, []);
+
+  return (
+    <YStack
+      width="100%"
+      height={height}
+      overflow="hidden"
+      onLayout={widthProp === undefined ? handleLayout : undefined}
+      {...(animationEnabled ? { transition, enterStyle: { opacity: 0, y: 6 } } : {})}
+      {...stackProps}
+    >
+      {width > 0 ? (
+        <Svg width={width} height={height} {...chartRootA11yProps(label)}>
+          {children({ width, height })}
+        </Svg>
+      ) : null}
+    </YStack>
+  );
+}

package/src/charts/Charts.stories.tsx

@@ -0,0 +1,187 @@
+import { action } from "@multiplatform.one/storybook";
+import { Preset } from "@multiplatform.one/theme";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { Text, Theme, XStack, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { AreaChart, LineChart } from "./LineChart";
+import { BarChart } from "./BarChart";
+import { PieChart } from "./PieChart";
+import { Sparkline } from "./Sparkline";
+import type { ChartDatum } from "./types";
+
+const monthly: ChartDatum[] = [
+  { label: "Jan", value: 420 },
+  { label: "Feb", value: 380 },
+  { label: "Mar", value: 640 },
+  { label: "Apr", value: 520 },
+  { label: "May", value: 870 },
+  { label: "Jun", value: 760 },
+];
+
+const categories: ChartDatum[] = [
+  { label: "Open", value: 34 },
+  { label: "In Progress", value: 21 },
+  { label: "Blocked", value: 8 },
+  { label: "Review", value: 13 },
+  { label: "Done", value: 55 },
+];
+
+const trend = [4, 6, 5, 9, 7, 11, 10, 14, 12, 16];
+
+const meta: Meta = {
+  title: "Components/Charts",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Universal chart catalog: headless d3 math rendered through react-native-svg (plain inline SVG on web). Series colors come from the canonical chart palette; chrome follows knobs and the theme ramps.",
+      },
+    },
+  },
+};
+export default meta;
+
+export const Bar = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <BarChart data={monthly} title="Revenue" onDatumPress={action("onDatumPress")} />
+    </YStack>
+  ),
+};
+
+export const BarCategorical = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <BarChart data={categories} categorical title="Tickets by status" />
+    </YStack>
+  ),
+};
+
+export const Line = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <LineChart data={monthly} title="Revenue" onDatumPress={action("onDatumPress")} />
+    </YStack>
+  ),
+};
+
+export const Area = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <AreaChart data={monthly} curve="monotone" title="Revenue" />
+    </YStack>
+  ),
+};
+
+export const Pie = {
+  render: () => (
+    <YStack maxWidth={560}>
+      <PieChart data={categories} title="Tickets by status" onDatumPress={action("onDatumPress")} />
+    </YStack>
+  ),
+};
+
+export const Donut = {
+  render: () => (
+    <YStack maxWidth={560}>
+      <PieChart data={categories} donut title="Tickets by status" />
+    </YStack>
+  ),
+};
+
+export const SparklineRow = {
+  name: "Sparkline",
+  render: () => (
+    <XStack maxWidth={560} gap="$4" alignItems="center">
+      <YStack flex={1}>
+        <Text fontSize="$2">Weekly active</Text>
+        <Sparkline data={trend} title="Weekly active" />
+      </YStack>
+      <YStack flex={1}>
+        <Text fontSize="$2">No area</Text>
+        <Sparkline data={trend} showArea={false} title="Weekly active" />
+      </YStack>
+    </XStack>
+  ),
+};
+
+/** Explicit data colors are values, not chrome — they pass through (Axiom 11). */
+export const DataColors = {
+  render: () => (
+    <YStack maxWidth={560} gap="$4">
+      <BarChart
+        data={[
+          { label: "A", value: 30, color: "#8250df" },
+          { label: "B", value: 45, color: "#1a7f37" },
+          { label: "C", value: 25 },
+        ]}
+        title="Explicit data colors"
+      />
+    </YStack>
+  ),
+};
+
+export const DarkScheme = {
+  render: () => (
+    <Theme name="dark">
+      <Card maxWidth={560}>
+        <YStack gap="$4">
+          <BarChart data={monthly} title="Revenue" />
+          <PieChart data={categories} donut title="Tickets by status" />
+        </YStack>
+      </Card>
+    </Theme>
+  ),
+};
+
+export const TintRed = {
+  render: () => (
+    <Theme name="red">
+      <Card maxWidth={560}>
+        <YStack gap="$4">
+          <BarChart data={monthly} title="Revenue" />
+          <LineChart data={monthly} title="Revenue" />
+          <PieChart data={categories} title="Tickets by status" />
+        </YStack>
+      </Card>
+    </Theme>
+  ),
+};
+
+export const TintGray = {
+  render: () => (
+    <Theme name="gray">
+      <Card maxWidth={560}>
+        <YStack gap="$4">
+          <BarChart data={monthly} title="Revenue" />
+          <PieChart data={categories} title="Tickets by status" />
+        </YStack>
+      </Card>
+    </Theme>
+  ),
+};
+
+/** animation=none: no draw-in, no motion (A-CONTINUOUS floor). */
+export const AnimationNone = {
+  render: () => (
+    <Preset overrides={{ animation: "none" }}>
+      <YStack maxWidth={560} gap="$4">
+        <BarChart data={monthly} title="Revenue" />
+        <AreaChart data={monthly} title="Revenue" />
+      </YStack>
+    </Preset>
+  ),
+};
+
+/** Phone-width column — nothing overflows or clips at 320px (LC-10). */
+export const NarrowViewport = {
+  render: () => (
+    <YStack width={320} gap="$4">
+      <BarChart data={monthly} title="Revenue" />
+      <LineChart data={monthly} title="Revenue" />
+      <PieChart data={categories} donut title="Tickets by status" />
+      <Sparkline data={trend} title="Weekly active" />
+    </YStack>
+  ),
+};

package/src/charts/LineChart.tsx

@@ -0,0 +1,172 @@
+import { useTranslation } from "react-i18next";
+import type { YStackProps } from "tamagui";
+import { XAxis, YAxis } from "./Axis";
+import { ChartSurface } from "./ChartSurface";
+import { describeChart, describeDatum } from "./accessibility";
+import { computeCartesianPlot, thinCategories } from "./composeChart";
+import { createLinearScale, createPointScale, getLinearTicks, valueDomain } from "./math";
+import { AreaSeries, LineSeries } from "./series";
+import type { ChartCurve, ChartDatum, ChartDatumEvents } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+export interface LineChartProps
+  extends ChartDatumEvents, Omit<YStackProps, "children" | "width" | "height"> {
+  data: ChartDatum[];
+  /** Drawing height in px (default 200). */
+  height?: number;
+  /** Explicit width bypasses responsive measurement. */
+  width?: number;
+  /** Explicit series color (data value — passes through untouched). */
+  color?: string;
+  /** Fill the area under the line (AreaChart preset). */
+  showArea?: boolean;
+  /** Area fill opacity (default 0.18). */
+  areaOpacity?: number;
+  curve?: ChartCurve;
+  /** Dot on each datum (default true). */
+  showPoints?: boolean;
+  strokeWidth?: number;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  yTicks?: number;
+  valueFormatter?: (value: number) => string;
+  /** Chart title used in the generated accessible summary. */
+  title?: string;
+  /** Override the generated accessible summary. */
+  label?: string;
+  /** Accessible type label override (AreaChart passes its own). */
+  typeLabel?: string;
+}
+
+/**
+ * Single-series line chart over category points: d3 point/linear scales,
+ * knob-driven chrome, palette identity stroke, 44px point hit targets.
+ */
+export function LineChart({
+  data,
+  height = 200,
+  width,
+  color,
+  showArea = false,
+  areaOpacity,
+  curve = "linear",
+  showPoints = true,
+  strokeWidth = 2,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  yTicks = 4,
+  valueFormatter,
+  title,
+  label,
+  typeLabel,
+  onDatumPress,
+  onDatumHoverIn,
+  onDatumHoverOut,
+  ...stackProps
+}: LineChartProps) {
+  const { t } = useTranslation();
+  const { palette, labelFontSize } = useChartTheme();
+  // One line = one series: explicit `color` is a data value and passes
+  // through; the default is the theme identity (LC-27).
+  const stroke = color ?? palette.single;
+  const format = valueFormatter ?? ((value: number) => value.toLocaleString());
+  const ariaLabel =
+    label ??
+    describeChart({
+      typeLabel: typeLabel ?? (showArea ? t("Area chart") : t("Line chart")),
+      title,
+      data,
+      formatValue: valueFormatter,
+    });
+  const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
+
+  return (
+    <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
+      {(size) => {
+        const domain = valueDomain(data.map((datum) => datum.value));
+        const marginScale = createLinearScale({ domain, range: [0, 1] });
+        const tickValues = getLinearTicks(marginScale, yTicks);
+        const plot = computeCartesianPlot(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map((value) => format(value)),
+          fontSize: labelFontSize,
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        const xScale = createPointScale({
+          domain: data.map((datum) => datum.label),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5,
+        });
+        const yScale = createLinearScale({
+          domain,
+          range: [plot.y + plot.height, plot.y],
+        });
+        const points = data.map((datum) => ({
+          x: xScale(datum.label) ?? plot.x,
+          y: yScale(datum.value),
+        }));
+        return (
+          <>
+            {showYAxis || showGrid ? (
+              <YAxis
+                plot={plot}
+                scale={yScale}
+                ticks={yTicks}
+                tickFormat={(value) => format(value)}
+                showLabels={showYAxis}
+                showGrid={showGrid}
+              />
+            ) : null}
+            {showArea ? (
+              <AreaSeries
+                points={points}
+                baseline={plot.y + plot.height}
+                color={stroke}
+                opacity={areaOpacity}
+                curve={curve}
+              />
+            ) : null}
+            <LineSeries
+              data={data}
+              points={points}
+              color={stroke}
+              strokeWidth={strokeWidth}
+              curve={curve}
+              showPoints={showPoints}
+              bounds={size}
+              onDatumPress={onDatumPress}
+              onDatumHoverIn={onDatumHoverIn}
+              onDatumHoverOut={onDatumHoverOut}
+              datumLabel={
+                interactive
+                  ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
+                  : undefined
+              }
+            />
+            {showXAxis ? (
+              <XAxis
+                plot={plot}
+                scale={xScale}
+                tickValues={thinCategories(
+                  data.map((datum) => datum.label),
+                  plot.width,
+                  labelFontSize,
+                )}
+              />
+            ) : null}
+          </>
+        );
+      }}
+    </ChartSurface>
+  );
+}
+
+export type AreaChartProps = Omit<LineChartProps, "showArea">;
+
+/** Area chart — the LineChart family with the area fill on by default. */
+export function AreaChart(props: AreaChartProps) {
+  return <LineChart showArea {...props} />;
+}