@advui/charts 0.5.0

package/dist/components/pie-chart/PieChart.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIconColor } from '@advui/icons';
+import { ChartFrame, G, Path, Svg, SvgText, arcPath, formatFull, useChartColors, useChartInk, } from '../../charts';
+const percent = (part, total) => total > 0 ? `${Math.round((part / total) * 1000) / 10}%` : '0%';
+/**
+ * Part-to-whole at a glance, for up to six parts. Each slice is named in the
+ * legend with its share; the tooltip (hover, tap or arrow keys) and the
+ * table view give the exact values. For close values, a bar chart reads better.
+ */
+export function PieChart({ title, description, data, variant = 'donut', maxSlices = 6, height = 240, width, valueFormatter = formatFull, text: textProp, labels, }) {
+    const text = {
+        label: 'Label',
+        value: 'Value',
+        share: 'Share',
+        other: 'Other',
+        total: 'Total',
+        ...textProp,
+    };
+    const colors = useChartColors();
+    const ink = useChartInk('$background');
+    const foreground = useIconColor('$foreground') ?? 'currentColor';
+    // Largest first; past the limit, the tail folds into one "Other" slice.
+    const positive = data.filter((d) => d.value > 0).sort((a, b) => b.value - a.value);
+    const slices = positive.length > maxSlices
+        ? [
+            ...positive.slice(0, maxSlices - 1),
+            {
+                label: text.other,
+                value: positive.slice(maxSlices - 1).reduce((sum, d) => sum + d.value, 0),
+            },
+        ]
+        : positive;
+    const folded = positive.length > maxSlices;
+    const total = slices.reduce((sum, d) => sum + d.value, 0);
+    const colorOf = (i) => (folded && i === slices.length - 1 ? ink.axis : colors[i % 8]);
+    let angle = 0;
+    const arcs = slices.map((slice, i) => {
+        const start = angle;
+        angle += total > 0 ? (slice.value / total) * Math.PI * 2 : 0;
+        return { ...slice, start, end: angle, color: colorOf(i) };
+    });
+    const geometry = (w) => {
+        const outer = Math.min(w, height) / 2 - 8;
+        return { cx: w / 2, cy: height / 2, outer, inner: variant === 'donut' ? outer * 0.62 : 0 };
+    };
+    return (_jsx(ChartFrame, { title: title, description: description, legend: arcs.map((arc) => ({
+            label: arc.label,
+            color: arc.color,
+            shape: 'square',
+            detail: percent(arc.value, total),
+        })), height: height, width: width, count: arcs.length, hitTest: (x, y, w) => {
+            const { cx, cy, outer, inner } = geometry(w);
+            const dx = x - cx;
+            const dy = y - cy;
+            const r = Math.hypot(dx, dy);
+            if (r > outer + 8 || r < inner)
+                return null;
+            const a = (Math.atan2(dx, -dy) + Math.PI * 2) % (Math.PI * 2);
+            const found = arcs.findIndex((arc) => a >= arc.start && a < arc.end);
+            return found >= 0 ? found : null;
+        }, anchor: (i, w) => {
+            const { cx, outer } = geometry(w);
+            const mid = (arcs[i].start + arcs[i].end) / 2;
+            return { x: cx + outer * Math.sin(mid), y: 0 };
+        }, tooltip: (i) => ({
+            title: arcs[i].label,
+            rows: [
+                {
+                    label: percent(arcs[i].value, total),
+                    value: valueFormatter(arcs[i].value),
+                    color: arcs[i].color,
+                    shape: 'square',
+                },
+            ],
+        }), table: {
+            columns: [text.label, text.value, text.share],
+            rows: [
+                ...arcs.map((arc) => [arc.label, valueFormatter(arc.value), percent(arc.value, total)]),
+                [text.total, valueFormatter(total), '100%'],
+            ],
+            numeric: [false, true, true],
+        }, labels: labels, children: (w, active) => {
+            const { cx, cy, outer, inner } = geometry(w);
+            // A 2px gap between slices, as angle at the outer edge.
+            const gap = arcs.length > 1 ? 2 / outer : 0;
+            return (_jsxs(Svg, { width: w, height: height, children: [arcs.map((arc, i) => (_jsx(G, { opacity: active == null || active === i ? 1 : 0.55, children: _jsx(Path, { d: arcPath(cx, cy, active === i ? outer + 4 : outer, inner, arc.start + gap / 2, Math.max(arc.start + gap / 2, arc.end - gap / 2)), fill: arc.color }) }, arc.label))), variant === 'donut' ? (_jsxs(_Fragment, { children: [_jsx(SvgText, { x: cx, y: cy - 6, fill: foreground, fontSize: 20, fontWeight: "600", textAnchor: "middle", children: valueFormatter(total) }), _jsx(SvgText, { x: cx, y: cy + 16, fill: ink.text, fontSize: 12, textAnchor: "middle", children: text.total })] })) : null] }));
+        } }));
+}
+//# sourceMappingURL=PieChart.js.map

package/dist/components/pie-chart/PieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../src/components/pie-chart/PieChart.tsx"],"names":[],"mappings":"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"}

package/dist/components/pie-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PieChart, type PieChartProps, type PieSlice } from './PieChart';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/pie-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/pie-chart/index.js

@@ -0,0 +1,2 @@
+export { PieChart } from './PieChart';
+//# sourceMappingURL=index.js.map

package/dist/components/pie-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAqC,MAAM,YAAY,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/area-chart';
+export * from './components/bar-chart';
+export * from './components/line-chart';
+export * from './components/pie-chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,7 @@
+// Chart components. The shared internals in ./charts (frame, legend, tooltip,
+// table view, scales and the SVG layer) are not part of the public API.
+export * from './components/area-chart';
+export * from './components/bar-chart';
+export * from './components/line-chart';
+export * from './components/pie-chart';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wEAAwE;AACxE,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA"}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@advui/charts",
+  "version": "0.5.0",
+  "description": "Bar, line, area and pie charts for Adv UI: SVG on web, react-native-svg on iOS and Android, with a legend, tooltips and a table view.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zinmin232/advui.git",
+    "directory": "packages/charts"
+  },
+  "homepage": "https://github.com/zinmin232/advui/tree/main/packages/charts#readme",
+  "bugs": {
+    "url": "https://github.com/zinmin232/advui/issues"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/examples",
+    "!src/**/*.meta.ts"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "react-native": "./dist/index.js"
+  },
+  "dependencies": {
+    "@advui/icons": "0.5.0"
+  },
+  "peerDependencies": {
+    "@advui/core": "^0.5.0",
+    "@advui/data": "^0.5.0",
+    "react": ">=19",
+    "react-native": "*",
+    "react-native-svg": ">=15",
+    "tamagui": "^2.7.7"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/react-native": "^14.0.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^22.15.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "@advui/data": "0.5.0",
+    "@advui/eslint-config": "0.1.0",
+    "@advui/tsconfig": "0.1.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "babel-preset-expo": "~57.0.13",
+    "expo": "~57.0.25",
+    "happy-dom": "^20.14.5",
+    "jest": "^29.7.0",
+    "jest-expo": "~57.0.5",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-svg": "15.15.4",
+    "react-native-web": "~0.21.0",
+    "tamagui": "2.7.7",
+    "test-renderer": "~1.2.0",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "@advui/core": "0.5.0",
+    "@advui/theme": "0.5.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "test:native": "jest --config jest.native.config.js"
+  }
+}

package/src/charts/ChartFrame.tsx

@@ -0,0 +1,303 @@
+import { useIconColor } from '@advui/icons'
+import { type ReactNode, useId, useRef, useState } from 'react'
+import { type GetProps, View, VisuallyHidden, XStack, isWeb } from 'tamagui'
+import { Button, Text } from '@advui/core'
+import { Table } from '@advui/data'
+
+/** One series (a line, a set of bars): the data field it reads and its name. */
+export interface ChartSeries {
+  key: string
+  label: string
+}
+
+export interface ChartLabels {
+  showTable: string
+  hideTable: string
+  /** Read before the arrow-key hint on the focused plot. */
+  keyboardHint: string
+}
+
+export const defaultChartLabels: ChartLabels = {
+  showTable: 'Show table',
+  hideTable: 'Hide table',
+  keyboardHint: 'Use the arrow keys to read each value.',
+}
+
+/** The chart palette, in its fixed order, as resolved colors. */
+export function useChartColors(): string[] {
+  // Hooks in a fixed order: one per slot.
+  return [
+    useIconColor('$chart1'),
+    useIconColor('$chart2'),
+    useIconColor('$chart3'),
+    useIconColor('$chart4'),
+    useIconColor('$chart5'),
+    useIconColor('$chart6'),
+    useIconColor('$chart7'),
+    useIconColor('$chart8'),
+  ].map((color) => color ?? 'currentColor')
+}
+
+/** Axis text, gridlines and the surface, as resolved colors. */
+export function useChartInk(surface: string) {
+  return {
+    text: useIconColor('$mutedForeground') ?? 'currentColor',
+    grid: useIconColor('$border') ?? 'currentColor',
+    axis: useIconColor('$borderStrong') ?? 'currentColor',
+    surface: useIconColor(surface) ?? 'transparent',
+  }
+}
+
+export interface LegendItem {
+  label: string
+  color: string
+  /** Mirrors the mark: a line for line charts, a square for bars, areas and slices. */
+  shape: 'line' | 'square'
+  /** Extra text after the label, e.g. a slice's share. */
+  detail?: string
+}
+
+export interface TooltipContent {
+  title: string
+  rows: { label: string; value: string; color: string; shape: LegendItem['shape'] }[]
+}
+
+export interface ChartFrameProps {
+  /** Names the chart (its accessible name and heading). */
+  title: string
+  description?: string
+  legend: LegendItem[]
+  /** Plot height in pixels, including the axes. */
+  height: number
+  /** Fixed plot width; by default the chart fills its container. */
+  width?: number
+  /** Number of positions the arrow keys step through. */
+  count: number
+  /** The position under a point in the plot, or null. */
+  hitTest: (x: number, y: number, width: number) => number | null
+  tooltip: (index: number) => TooltipContent | null
+  /** Where the tooltip points, in plot coordinates. */
+  anchor: (index: number, width: number) => { x: number; y: number }
+  /** Draws the plot at the measured width; `active` is the hovered position. */
+  children: (width: number, active: number | null) => ReactNode
+  table: { columns: string[]; rows: string[][]; numeric: boolean[] }
+  labels?: Partial<ChartLabels>
+  frameProps?: GetProps<typeof View>
+}
+
+/**
+ * The frame every chart shares: title, legend, a measured plot with a
+ * tooltip (hover, tap or arrow keys), and a table view of the same data.
+ */
+export function ChartFrame({
+  title,
+  description,
+  legend,
+  height,
+  width: fixedWidth,
+  count,
+  hitTest,
+  tooltip,
+  anchor,
+  children,
+  table,
+  labels: labelsProp,
+  frameProps,
+}: ChartFrameProps) {
+  const labels = { ...defaultChartLabels, ...labelsProp }
+  const [measured, setMeasured] = useState(0)
+  const width = fixedWidth ?? measured
+  const [active, setActive] = useState<number | null>(null)
+  const [showTable, setShowTable] = useState(false)
+  const titleId = useId()
+  const tableId = useId()
+  const plotRef = useRef<HTMLElement | null>(null)
+  const content = active != null ? tooltip(active) : null
+
+  const pointAt = (clientX: number, clientY: number) => {
+    const rect = plotRef.current?.getBoundingClientRect()
+    if (!rect) return
+    setActive(hitTest(clientX - rect.left, clientY - rect.top, width))
+  }
+
+  const onKeyDown = (event: { key: string; preventDefault: () => void }) => {
+    const last = count - 1
+    const moves: Record<string, number> = {
+      ArrowRight: Math.min(last, (active ?? -1) + 1),
+      ArrowDown: Math.min(last, (active ?? -1) + 1),
+      ArrowLeft: Math.max(0, (active ?? count) - 1),
+      ArrowUp: Math.max(0, (active ?? count) - 1),
+      Home: 0,
+      End: last,
+    }
+    if (event.key in moves && count > 0) {
+      event.preventDefault()
+      setActive(moves[event.key]!)
+    } else if (event.key === 'Escape') setActive(null)
+  }
+
+  const point = active != null && width > 0 ? anchor(active, width) : null
+  const summary = content
+    ? `${content.title}: ${content.rows.map((r) => `${r.label} ${r.value}`).join(', ')}`
+    : ''
+
+  return (
+    <View
+      render="figure"
+      margin={0}
+      gap="$3"
+      width="100%"
+      aria-labelledby={titleId}
+      {...frameProps}
+    >
+      <View gap="$1">
+        <Text id={titleId} size="sm" weight="semibold">
+          {title}
+        </Text>
+        {description ? (
+          <Text size="xs" tone="muted">
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {legend.length > 0 ? (
+        <XStack flexWrap="wrap" columnGap="$4" rowGap="$1.5">
+          {legend.map((item) => (
+            <XStack key={item.label} alignItems="center" gap="$1.5">
+              <View
+                aria-hidden
+                backgroundColor={item.color as never}
+                width={item.shape === 'line' ? '$3' : '$2.5'}
+                height={item.shape === 'line' ? 2 : '$2.5'}
+                borderRadius={item.shape === 'line' ? '$full' : '$xs'}
+              />
+              <Text size="xs" tone="muted">
+                {item.label}
+                {item.detail ? ` · ${item.detail}` : ''}
+              </Text>
+            </XStack>
+          ))}
+        </XStack>
+      ) : null}
+
+      <View
+        ref={plotRef as never}
+        position="relative"
+        height={height}
+        width={fixedWidth ?? '100%'}
+        onLayout={(event: { nativeEvent: { layout: { width: number } } }) =>
+          setMeasured(Math.floor(event.nativeEvent.layout.width))
+        }
+        // The plot is one focusable image; the arrow keys read it point by point.
+        role="img"
+        aria-label={`${title}. ${description ? `${description}. ` : ''}${labels.keyboardHint}`}
+        {...(isWeb
+          ? {
+              tabIndex: 0,
+              onKeyDown,
+              onBlur: () => setActive(null),
+              onMouseMove: (event: { clientX: number; clientY: number }) =>
+                pointAt(event.clientX, event.clientY),
+              onMouseLeave: () => setActive(null),
+            }
+          : {
+              accessible: true,
+              // Native has no live region here: the reading becomes the plot's value.
+              ...(summary && { accessibilityValue: { text: summary } }),
+              onPress: (event: { nativeEvent: { locationX: number; locationY: number } }) =>
+                setActive(hitTest(event.nativeEvent.locationX, event.nativeEvent.locationY, width)),
+            })}
+        borderRadius="$sm"
+        focusVisibleStyle={{
+          outlineColor: '$ring',
+          outlineStyle: 'solid',
+          outlineWidth: 2,
+          outlineOffset: 4,
+        }}
+      >
+        {width > 0 ? children(width, active) : null}
+        {content && point ? (
+          <View
+            aria-hidden
+            pointerEvents="none"
+            position="absolute"
+            top={0}
+            {...(point.x < width / 2 ? { left: point.x + 12 } : { right: width - point.x + 12 })}
+            backgroundColor="$popover"
+            borderWidth={1}
+            borderColor="$border"
+            borderRadius="$md"
+            paddingHorizontal="$2.5"
+            paddingVertical="$2"
+            gap="$1"
+            minWidth="$32"
+            zIndex={1}
+          >
+            <Text size="xs" tone="muted">
+              {content.title}
+            </Text>
+            {content.rows.map((row) => (
+              <XStack key={row.label} alignItems="center" gap="$2">
+                <View
+                  backgroundColor={row.color as never}
+                  width="$2.5"
+                  height={row.shape === 'line' ? 2 : '$2.5'}
+                  borderRadius={row.shape === 'line' ? '$full' : '$xs'}
+                />
+                <Text size="sm" weight="semibold">
+                  {row.value}
+                </Text>
+                <Text size="xs" tone="muted" flexShrink={1}>
+                  {row.label}
+                </Text>
+              </XStack>
+            ))}
+          </View>
+        ) : null}
+      </View>
+      {/* Outside the plot: an img's contents are hidden from assistive technology. */}
+      {isWeb ? <VisuallyHidden aria-live="polite">{summary}</VisuallyHidden> : null}
+
+      <View alignItems="flex-start" gap="$2">
+        <Button
+          size="sm"
+          variant="ghost"
+          // Lines the label up with the title above.
+          marginLeft="$-3"
+          aria-expanded={showTable}
+          {...(isWeb && { 'aria-controls': tableId })}
+          onPress={() => setShowTable(!showTable)}
+        >
+          {showTable ? labels.hideTable : labels.showTable}
+        </Button>
+        {showTable ? (
+          <View id={tableId} width="100%">
+            <Table aria-label={title} size="sm" minWidth={Math.max(320, table.columns.length * 96)}>
+              <Table.Header>
+                <Table.Row>
+                  {table.columns.map((column, i) => (
+                    <Table.Head key={column} align={table.numeric[i] ? 'end' : 'start'}>
+                      {column}
+                    </Table.Head>
+                  ))}
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {table.rows.map((row, r) => (
+                  <Table.Row key={r}>
+                    {row.map((cell, i) => (
+                      <Table.Cell key={i} align={table.numeric[i] ? 'end' : 'start'}>
+                        {cell}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  )
+}