{"_id":"@zuilib/charts","_rev":"3-67f2c90221de8e8cdc996ba23290d2dd","name":"@zuilib/charts","dist-tags":{"latest":"0.5.0"},"versions":{"0.3.0":{"name":"@zuilib/charts","version":"0.3.0","keywords":["charts","recharts","analytics","dataviz","cross-filter","design-system","react","typescript"],"_id":"@zuilib/charts@0.3.0","maintainers":[{"name":"mahuzedada","email":"chatis@afrointelligence.com"}],"dist":{"shasum":"2c127751fcabc115ea217149368f8a38eded5d0e","tarball":"https://registry.npmjs.org/@zuilib/charts/-/charts-0.3.0.tgz","fileCount":41,"integrity":"sha512-nqWUBkNhR5YVHS0orMl4/hx033iabizjw98M+0xuSqkWwcxR17GE/uCGf+4nqJ2Be4SRtfFSNVdWwsy0dopsfQ==","signatures":[{"sig":"MEQCIEtqYt5f26lRLwBm4HsWiIbtybzr1nJZRc/u88dicZ+BAiBY7eKqONOkoLH+8EyYpkC4gzhHRj0NbXhqvOVojj4iLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":123473},"type":"module","_from":"file:zuilib-charts-0.3.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./chart":{"types":"./dist/chart.d.ts","import":"./dist/chart.js"},"./format":{"types":"./dist/format.d.ts","import":"./dist/format.js"},"./interop":{"types":"./dist/interop.d.ts","import":"./dist/interop.js"},"./registry":{"types":"./dist/registry.d.ts","import":"./dist/registry.js"},"./authoring":{"types":"./dist/authoring.d.ts","import":"./dist/authoring.js"},"./chart-frame":{"types":"./dist/chart-frame.d.ts","import":"./dist/chart-frame.js"},"./chart-legend":{"types":"./dist/chart-legend.d.ts","import":"./dist/chart-legend.js"},"./cross-filter":{"types":"./dist/cross-filter.d.ts","import":"./dist/cross-filter.js"},"./package.json":"./package.json","./chart-tooltip":{"types":"./dist/chart-tooltip.d.ts","import":"./dist/chart-tooltip.js"},"./chart-defaults":{"types":"./dist/chart-defaults.d.ts","import":"./dist/chart-defaults.js"}},"scripts":{"test":"node scripts/check-logical.mjs && vitest run","build":"tsup","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"mahuzedada","email":"chatis@afrointelligence.com"},"_resolved":"/private/var/folders/mn/n3l7wn4s7bzbxsb8xcdwyvyc0000gn/T/e19b8f554b5d7fe8cea23eaaea254fad/zuilib-charts-0.3.0.tgz","_integrity":"sha512-nqWUBkNhR5YVHS0orMl4/hx033iabizjw98M+0xuSqkWwcxR17GE/uCGf+4nqJ2Be4SRtfFSNVdWwsy0dopsfQ==","_npmVersion":"11.13.0","description":"ZUI — enterprise analytics charts on Recharts: a serializable chart spec, styled primitives, and cross-filtering that links charts to data tables","directories":{},"sideEffects":false,"_nodeVersion":"24.17.0","dependencies":{"@zuilib/components":"^0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","jsdom":"^30.0.1","react":"^18.2.0","vitest":"^4.1.11","axe-core":"^4.13.0","recharts":"^3.0.0","react-dom":"^18.2.0","typescript":"^6.0.2","@types/react":"^18.0.0","@zuilib/tokens":"^0.2.0","@types/react-dom":"^18.0.0","@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^7.0.1","@testing-library/user-event":"^14.6.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","recharts":"^3.0.0","react-dom":"^18.0.0 || ^19.0.0","@zuilib/tokens":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_0.3.0_1788297851560_0.7459298063802959","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@zuilib/charts","version":"0.4.0","keywords":["charts","recharts","analytics","dataviz","cross-filter","design-system","react","typescript"],"_id":"@zuilib/charts@0.4.0","maintainers":[{"name":"mahuzedada","email":"chatis@afrointelligence.com"}],"dist":{"shasum":"c50f32a9154e931fd21e4148a2dd1ff3ced0c0db","tarball":"https://registry.npmjs.org/@zuilib/charts/-/charts-0.4.0.tgz","fileCount":43,"integrity":"sha512-8IfNu4jn59punFfOPxxKJD11CfM/TYfCKfxKMO4jPVoCHq13HXtbBMOAH/IhYVosDfmI0PUMgAWg1GMydP7pfQ==","signatures":[{"sig":"MEQCIAb+OZJFvxVtL8Ao4zb2s3sTNNhDEb2lirN12bDsYH2zAiBgqnW7ndfio1fKSDh9+/lYSZFl8J3ja1ftsrhOPBvNbw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIGWSBU6mexNZFgb3R9T0BNLqhx7I5XHbrT2uHo898wUTAiEApFCER6Kw5GIti7dlUBUZJUCFoRDWRm/oYblZewIX0Pg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":120097},"type":"module","_from":"file:zuilib-charts-0.4.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./chart":{"types":"./dist/chart.d.ts","import":"./dist/chart.js"},"./format":{"types":"./dist/format.d.ts","import":"./dist/format.js"},"./interop":{"types":"./dist/interop.d.ts","import":"./dist/interop.js"},"./registry":{"types":"./dist/registry.d.ts","import":"./dist/registry.js"},"./authoring":{"types":"./dist/authoring.d.ts","import":"./dist/authoring.js"},"./chart-frame":{"types":"./dist/chart-frame.d.ts","import":"./dist/chart-frame.js"},"./chart-legend":{"types":"./dist/chart-legend.d.ts","import":"./dist/chart-legend.js"},"./cross-filter":{"types":"./dist/cross-filter.d.ts","import":"./dist/cross-filter.js"},"./package.json":"./package.json","./tailwind.css":"./dist/tailwind.css","./chart-tooltip":{"types":"./dist/chart-tooltip.d.ts","import":"./dist/chart-tooltip.js"},"./chart-defaults":{"types":"./dist/chart-defaults.d.ts","import":"./dist/chart-defaults.js"},"./forecast-chart":{"types":"./dist/forecast-chart.d.ts","import":"./dist/forecast-chart.js"}},"scripts":{"test":"node scripts/check-logical.mjs && vitest run","build":"tsup","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"mahuzedada","email":"chatis@afrointelligence.com"},"_resolved":"/private/var/folders/mn/n3l7wn4s7bzbxsb8xcdwyvyc0000gn/T/5970289176a919baa7e53a3b66b1808c/zuilib-charts-0.4.0.tgz","_integrity":"sha512-8IfNu4jn59punFfOPxxKJD11CfM/TYfCKfxKMO4jPVoCHq13HXtbBMOAH/IhYVosDfmI0PUMgAWg1GMydP7pfQ==","_npmVersion":"11.13.0","description":"ZUI — enterprise analytics charts on Recharts: a serializable chart spec, styled primitives, and cross-filtering that links charts to data tables","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.17.0","dependencies":{"recharts":"^3.0.0","@zuilib/primitives":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","jsdom":"^30.0.1","react":"^18.2.0","vitest":"^4.1.11","axe-core":"^4.13.0","react-dom":"^18.2.0","typescript":"^6.0.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^7.0.1","@testing-library/user-event":"^14.6.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_0.4.0_1788759725214_0.072385241030688","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"_id":"@zuilib/charts@0.5.0","dist":{"shasum":"d2130800587677ec0c34aa647c9c8ac579facf3b","tarball":"https://registry.npmjs.org/@zuilib/charts/-/charts-0.5.0.tgz","fileCount":44,"integrity":"sha512-2MXYw7ikzsibFjxvRgWgl297vs9tR/lVLLQGkW/kHTDvfBA65fBmjSvjoPgdCR1AUZ+QG0NxRiVyVkQikKq9NA==","signatures":[{"sig":"MEUCIQDX/77Ma5WKFpVySC2CAG24D+hGp7NTs94W7JBef+qKHwIgC7TDu0VbifAozek+9aaBXkzGG279h/rFQni4QxREqds=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCSTJkIAcKxV1dCTv5IoYvFhhDNxxHy5Hs9uslhn9Q19wIgRMMOwteiWD2kUpvIRhxJJG2EUEkvEAAXlefpVuF4U6U="}],"unpackedSize":121252},"name":"@zuilib/charts","type":"module","_from":"file:zuilib-charts-0.5.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./chart":{"types":"./dist/chart.d.ts","import":"./dist/chart.js"},"./format":{"types":"./dist/format.d.ts","import":"./dist/format.js"},"./interop":{"types":"./dist/interop.d.ts","import":"./dist/interop.js"},"./registry":{"types":"./dist/registry.d.ts","import":"./dist/registry.js"},"./authoring":{"types":"./dist/authoring.d.ts","import":"./dist/authoring.js"},"./chart-frame":{"types":"./dist/chart-frame.d.ts","import":"./dist/chart-frame.js"},"./chart-legend":{"types":"./dist/chart-legend.d.ts","import":"./dist/chart-legend.js"},"./cross-filter":{"types":"./dist/cross-filter.d.ts","import":"./dist/cross-filter.js"},"./package.json":"./package.json","./tailwind.css":"./dist/tailwind.css","./chart-tooltip":{"types":"./dist/chart-tooltip.d.ts","import":"./dist/chart-tooltip.js"},"./chart-defaults":{"types":"./dist/chart-defaults.d.ts","import":"./dist/chart-defaults.js"},"./forecast-chart":{"types":"./dist/forecast-chart.d.ts","import":"./dist/forecast-chart.js"}},"license":"MIT","scripts":{"test":"node scripts/check-logical.mjs && vitest run","build":"tsup","typecheck":"tsc --noEmit -p tsconfig.json"},"version":"0.5.0","_npmUser":{"name":"mahuzedada","email":"chatis@afrointelligence.com"},"keywords":["charts","recharts","analytics","dataviz","cross-filter","design-system","react","typescript"],"_resolved":"/private/var/folders/mn/n3l7wn4s7bzbxsb8xcdwyvyc0000gn/T/75868773918be64f8d3b3f61bf283b3e/zuilib-charts-0.5.0.tgz","_integrity":"sha512-2MXYw7ikzsibFjxvRgWgl297vs9tR/lVLLQGkW/kHTDvfBA65fBmjSvjoPgdCR1AUZ+QG0NxRiVyVkQikKq9NA==","_npmVersion":"11.13.0","description":"ZUI — enterprise analytics charts on Recharts: a serializable chart spec, styled primitives, and cross-filtering that links charts to data tables","directories":{},"maintainers":[{"name":"mahuzedada","email":"chatis@afrointelligence.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"24.17.0","dependencies":{"recharts":"^3.0.0","@zuilib/primitives":"^0.4.0"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","jsdom":"^30.0.1","react":"^18.2.0","vitest":"^4.1.11","axe-core":"^4.13.0","react-dom":"^18.2.0","typescript":"^6.0.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@testing-library/dom":"^10.4.1","@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^7.0.1","@testing-library/user-event":"^14.6.6"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/charts_0.5.0_1789964949374_0.4156657521450602"}}},"time":{"created":"2026-09-01T21:24:11.346Z","modified":"2026-09-21T04:29:09.630Z","0.3.0":"2026-09-01T21:24:11.706Z","0.4.0":"2026-09-07T05:42:05.313Z","0.5.0":"2026-09-21T04:29:09.454Z"},"keywords":["charts","recharts","analytics","dataviz","cross-filter","design-system","react","typescript"],"description":"ZUI — enterprise analytics charts on Recharts: a serializable chart spec, styled primitives, and cross-filtering that links charts to data tables","maintainers":[{"name":"mahuzedada","email":"chatis@afrointelligence.com"}],"readme":"# @zuilib/charts\n\nEnterprise analytics charts on Recharts, styled only through ZUI tokens: a\nserializable chart spec for runtime chart builders, styled primitives for\nhand-written composition, and cross-filtering that links charts to each\nother and to `@zuilib/data-grid` — without a hard dependency on it.\n\n## Install\n\n```bash\npnpm add @zuilib/charts\n```\n\nReact and React DOM are the required peers. Recharts, the ZUI primitives and\ntokens install transitively. Install `recharts` yourself only when your own\ncode imports it for hand-written composition.\n\nFor a Tailwind v4 host, load the component and chart source entries once:\n\n```css\n@import \"tailwindcss\";\n@import \"@zuilib/primitives/tailwind.css\";\n@import \"@zuilib/charts/tailwind.css\";\n```\n\n## Usage\n\n```tsx\nimport Chart from '@zuilib/charts'\n\n// Plain JSON: store it, send it from a server, let users build it.\nconst spec = {\n  version: 1,\n  type: 'bar',\n  title: 'Revenue by region',\n  xKey: 'region',\n  series: [{field: 'revenue', label: 'Revenue', format: 'currency:USD'}],\n  yAxis: {format: 'compact'},\n}\n\n<Chart spec={spec} rows={rows} />\n```\n\n## Component API\n\n### Chart — `@zuilib/charts`\n\n| Prop | Type | Default |\n|------|------|---------|\n| `spec` | `ChartSpec` | required — the serializable chart description |\n| `rows` | `ChartRow[]` | required — the rows behind the chart |\n| `registry` | `ChartRegistry` | built-ins — `createChartRegistry(defaultChartTypes, yourDefs)` adds or overrides types without forking the component |\n| `formats` | `Record<string, FormatterFn \\| FormatterFactory>` | — custom formatter tokens the spec may name (functions stay out of the spec) |\n| `locale` | `string` | user's locale — BCP 47 tag for formatted values |\n| `width` / `height` | `number` | responsive — fixed pixel size for tests and SSR |\n| `aspect` | `number` | `16/9` — responsive width/height ratio when `height` is left out; the chart never gets shorter than 200px |\n| `loading` | `boolean` | `false` — renders a skeleton instead of the chart |\n| `error` | `ReactNode` | — renders an error state instead of the chart |\n| `emptyState` | `ReactNode` | the `noData` label — renders when `rows` is empty |\n| `hiddenSeries` / `defaultHiddenSeries` / `onHiddenSeriesChange` | `string[]`, `string[]`, `(fields: string[]) => void` | — series fields hidden by the legend; controlled when `hiddenSeries` is passed, otherwise kept internally from `defaultHiddenSeries` |\n| `onMarkClick` | `(event: ChartMarkEvent) => void` | — every mark click, whether or not a `CrossFilterProvider` is present |\n| `labels` | `Partial<ChartLabels>` | English — every built-in string |\n| `animate` | `boolean` | `true` unless the user prefers reduced motion |\n| `ariaLabel` | `string` | the spec's title — accessible name of the figure |\n| `className` | `string` | merged onto the container |\n\n## Sizing\n\nA chart fills its container. Leave `width` and `height` out and the frame\nmeasures itself: the height follows `aspect` (16/9) with a 200px floor so a\nphone-width chart keeps a readable plot; pass `height` to fix the height and\nkeep the width fluid; pass both for a fixed size (tests, SSR). The frame is\na CSS size container (`@container`, `min-w-0`), so it never holds a flex or\ngrid parent open at the width of a previous render — put it in any column\nwithout a `min-w-0` of your own. Under 384px the value axis sizes to its\nlabels and the category axis keeps only its end ticks; the legend wraps and,\non touch pointers, its buttons grow to 44px hit areas. Desktop rendering\ndoes not change.\n\n## Entry points\n\n`@zuilib/charts` (or `./chart`) is the config-driven renderer: ten chart\ntypes (line, area, bar, pie/donut, scatter, composed, radar, radial-bar,\nfunnel, treemap) from one discriminated `ChartSpec`, with loading, error\nand empty states, a controlled `hiddenSeries` legend, and `onMarkClick`.\nFormats are named tokens (`'currency:USD'`, `'compact'`, `'percent'`,\n`'date:short'`) resolved through `./format`; custom formatter functions\narrive via the `formats` prop so the spec stays JSON.\n\n`./registry` is the open chart-type registry `<Chart>` dispatches through.\nEvery type is a `ChartTypeDef` — renderer, cross-filter fields, and a\ncomplete JSON Schema of its spec variant — and\n`createChartRegistry(defaultChartTypes, yourDefs)` merges defs last-wins\nby `type`, so an app adds or overrides a chart type without forking the\npackage:\n\n```tsx\nimport { createChartRegistry, defaultChartTypes, defineChartType, chartTypeSchema } from '@zuilib/charts/registry'\n\nconst registry = createChartRegistry(defaultChartTypes, [\n  defineChartType<GaugeChartSpec>({\n    type: 'gauge',\n    family: 'named',\n    render: GaugeRenderer, // receives RendererProps<GaugeChartSpec> from @zuilib/charts/authoring\n    crossFilterField: (spec) => spec.nameKey,\n    schema: chartTypeSchema('gauge', {\n      nameKey: { type: 'string' },\n      valueKey: { type: 'string' },\n    }, ['nameKey', 'valueKey']),\n  }),\n])\n\n<Chart spec={gaugeSpec} rows={rows} registry={registry} />\n```\n\nCustom specs type as `CustomChartSpec` (`type` plus the shared options and\nwhatever the def's schema declares); built-in specs stay the closed\n`ChartSpec` union, so the escape hatch never loosens their checking.\n`chartSpecJsonSchema(registry?)` emits the whole ChartSpec JSON Schema\n(draft 2020-12, per-type `if`/`then` conditionals from the defs' complete\nfragments) for validation and structured generation — one source, so the\nschema can't drift from what renders.\n\n`./authoring` is the custom-chart authoring surface: `RendererProps` (what\na registered renderer receives) and the mark-interaction helpers\n(`reportMarkClick`, `activeCategoryValues`, `markDimOpacity`,\n`MarkInteraction`) that keep an app-registered chart type's clicks and\ndimming consistent with the built-ins.\n\n`./chart-frame`, `./chart-tooltip`, `./chart-legend` and\n`./chart-defaults` are the primitives for hand-written Recharts\ncomposition: `ChartFrame` owns the series-color CSS variables\n(`fill={seriesColorVar('revenue')}`) and the states; `ChartTooltipPanel`\nand `ChartLegendList` render on popover tokens via Recharts'\n`Tooltip`/`Legend` `content` prop, the legend as real buttons (click\nisolates, shift-click toggles, `aria-pressed`).\n\n`./cross-filter` is the shared filter/highlight state\n(`CrossFilterProvider`, `useCrossFilter`) with the same\ncontrolled/uncontrolled whole-state contract as the data grid; `./interop`\nis four pure converters (`toColumnFilters`, `fromColumnFilters`,\n`toHighlight`, `applyFilters`) that wire it to a data grid's\n`columnFilters` and row selection structurally, with zero imports.\n\n## Theming\n\nSeries colors are the `--chart-1` … `--chart-8` tokens — a categorical\npalette validated for color-vision-deficiency separation in both modes.\nSlots are assigned in fixed declaration order and never cycled. A brand may\noverride `--chart-1` with its primary hue; overriding more slots requires\nre-validating the order. Grid lines, ticks, tooltips and states read the\nsame semantic tokens as every other ZUI package.\n\n## Localisation\n\nEvery built-in string is overridable through the `labels` prop\n(`ChartLabels`), and every formatted value honors the `locale` prop.\nMark entrance animation follows `prefers-reduced-motion` (or the `animate`\nprop).\n","readmeFilename":"README.md","license":"MIT"}