@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

package/README.md

@@ -1,55 +1,159 @@
-# Charts for Svelte
+# @rokkit/chart
 
-The core idea behind the implementation is to use the respective strengths of both D3 and Svelte to build Themable, Composable, Animated, Responsive, Accessible, and Reactive Data Visualization components.
+Data-driven D3 chart components for Svelte 5, inspired by the composable approach of [dc.js](https://dc-js.github.io/dc.js/).
 
-- [D3](https://d3js.org/) makes working with SVG a breeze. It provides a large set of utility functions for graph visualization that includes the computation of scales, interpolation, shapes, and more.
-- [Svelte](https://svelte.dev/) makes UI development fun again. It provides modularization, interactivity, reactivity, and responsiveness.
+## Install
 
-This component library borrows concepts from the following articles, products, and repositories.
+```bash
+bun add @rokkit/chart
+# or
+npm install @rokkit/chart
+```
 
-- [Introduction to Accessible Contrast and Color for Data Visualization](https://observablehq.com/@frankelavsky/chartability-contrast-series) by [Frank Elavsky](https://observablehq.com/@frankelavsky)
-- [Animated, Responsive, and Reactive Data Visualization with Svelte](https://www.infoq.com/news/2020/10/svelte-d3-animation-data-vis/)
-- [Barchart Race using Svelte & D3](https://t.co/iIoJw4f7Jc?amp=1) by [Amelia Wattenberger](https://mobile.twitter.com/Wattenberger) & [Russell Goldenberg](https://mobile.twitter.com/codenberg)
-- [The D3.js Graph Gallery](https://www.d3-graph-gallery.com/index.html)
-- [DC.js](https://dc-js.github.io/dc.js/) is an awesome implementation of interactive animated charts using D3.
+## Overview
 
-## Getting Started
+`@rokkit/chart` provides composable SVG chart components built on D3. All components are placed inside `Plot.Root`, which manages shared state (scales, dimensions, color mapping) via Svelte context. Child components read from that context — you do not wire them together manually.
 
-Get started quickly using [degit](https://github.com/Rich-Harris/degit).
+## Usage
 
-```bash
-degit jerrythomas/sparsh-ui/sites/playground my-app
+### Basic bar chart
+
+```svelte
+<script>
+  import { Plot } from '@rokkit/chart'
+
+  const data = [
+    { month: 'Jan', sales: 120, returns: 30 },
+    { month: 'Feb', sales: 150, returns: 20 },
+    { month: 'Mar', sales: 90, returns: 40 }
+  ]
+</script>
+
+<Plot.Root {data} width={600} height={400} fill="month">
+  <Plot.Grid />
+  <Plot.Axis type="x" field="month" label="Month" />
+  <Plot.Axis type="y" field="sales" label="Sales" />
+  <Plot.Bar x="month" y="sales" />
+  <Plot.Legend />
+</Plot.Root>
 ```
 
-## Features
-
-- [x] Fill patterns
-- [x] Symbols
-- [x] Colors
-- [ ] Themes
-
-### Plots
-
-- [x] Box
-- [ ] Violin
-- [x] Scatter
-- [ ] Line
-- [ ] Histogram
-- [ ] StackedBar
-- [ ] Funnel
-
-### Chart
-
-- [x] Axis
-  - [x] Labels
-  - [x] Grid
-  - [x] Ticks
-- [ ] Margins
-- [ ] Legend
-- [ ] Composable
-- [ ] Facet Grid
-- [ ] Combine multiple plots
-- [ ] Animation
-- [ ] Time lapse
-  - [ ] Sliding window
-  - [ ] Rolling window
+### Using `@rokkit/data` for preprocessing
+
+```svelte
+<script>
+  import { Plot } from '@rokkit/chart'
+  import { dataset } from '@rokkit/data'
+
+  const raw = [
+    { category: 'Electronics', name: 'A', revenue: 450 },
+    { category: 'Clothing', name: 'B', revenue: 320 },
+    { category: 'Electronics', name: 'C', revenue: 620 }
+  ]
+
+  const data = dataset(raw)
+    .groupBy('category')
+    .summarize('name', { total: (vals) => vals.reduce((s, v) => s + v.revenue, 0) })
+    .rollup()
+</script>
+
+<Plot.Root {data} fill="category" width={500} height={350}>
+  <Plot.Axis type="x" field="category" />
+  <Plot.Axis type="y" field="total" />
+  <Plot.Bar x="category" y="total" />
+  <Plot.Legend />
+</Plot.Root>
+```
+
+### Using `ChartBrewer` for advanced control
+
+`ChartBrewer` is the reactive state manager that `Plot.Root` uses internally. Use it directly when you need programmatic access to scales, axes, or legend state outside of the component tree.
+
+```js
+import { ChartBrewer, createScales, createBars } from '@rokkit/chart'
+
+const brewer = new ChartBrewer({
+  width: 600,
+  height: 400,
+  margin: { top: 20, right: 30, bottom: 40, left: 50 },
+  padding: 0.2,
+  animationDuration: 300
+})
+
+brewer.setData(data)
+brewer.setFields({ x: 'month', y: 'sales', color: 'month' })
+brewer.createScales()
+
+const scales = brewer.getScales()
+const dimensions = brewer.getDimensions()
+```
+
+## API
+
+### Components (`Plot` namespace)
+
+| Component     | Description                                               |
+| ------------- | --------------------------------------------------------- |
+| `Plot.Root`   | Chart container. Manages dimensions, scales, and context. |
+| `Plot.Bar`    | Bar series. Reads x/y fields and renders SVG rects.       |
+| `Plot.Axis`   | X or Y axis with optional label and tick formatting.      |
+| `Plot.Grid`   | Background grid lines derived from axis scales.           |
+| `Plot.Legend` | Color legend; clicking items filters the visible series.  |
+
+### `Plot.Root` props
+
+| Prop                | Type               | Default                               | Description                                                           |
+| ------------------- | ------------------ | ------------------------------------- | --------------------------------------------------------------------- |
+| `data`              | `array \| dataset` | `[]`                                  | Chart data. Accepts a plain array or a `@rokkit/data` dataset object. |
+| `width`             | `number`           | `600`                                 | SVG width in pixels.                                                  |
+| `height`            | `number`           | `400`                                 | SVG height in pixels.                                                 |
+| `margin`            | `object`           | `{top:20,right:30,bottom:40,left:50}` | Chart margins.                                                        |
+| `fill`              | `string`           | `null`                                | Field name used for color mapping.                                    |
+| `responsive`        | `boolean`          | `true`                                | Resize with the container.                                            |
+| `animationDuration` | `number`           | `300`                                 | Transition duration in ms.                                            |
+
+### `Plot.Bar` props
+
+| Prop                | Type       | Default     | Description                                   |
+| ------------------- | ---------- | ----------- | --------------------------------------------- |
+| `x`                 | `string`   | —           | Field for x-axis values.                      |
+| `y`                 | `string`   | —           | Field for y-axis values.                      |
+| `fill`              | `string`   | —           | Field for color mapping (overrides root).     |
+| `color`             | `string`   | `'#4682b4'` | Fallback bar color when no fill field is set. |
+| `opacity`           | `number`   | `1`         | Bar opacity.                                  |
+| `animationDuration` | `number`   | `300`       | Per-bar transition duration in ms.            |
+| `onClick`           | `function` | `null`      | Click handler; receives the data row.         |
+
+### `Plot.Axis` props
+
+| Prop         | Type         | Default | Description                       |
+| ------------ | ------------ | ------- | --------------------------------- |
+| `type`       | `'x' \| 'y'` | `'x'`   | Axis orientation.                 |
+| `field`      | `string`     | —       | Data field this axis represents.  |
+| `label`      | `string`     | `''`    | Axis label.                       |
+| `ticks`      | `number`     | —       | Suggested tick count.             |
+| `tickFormat` | `function`   | —       | D3 tick formatter.                |
+| `grid`       | `boolean`    | `false` | Render grid lines from this axis. |
+
+### Utility functions
+
+| Export                                    | Description                                 |
+| ----------------------------------------- | ------------------------------------------- |
+| `createDimensions(width, height, margin)` | Compute chart area dimensions with margins  |
+| `createScales(data, fields, dimensions)`  | Generate D3 band/linear scales              |
+| `createBars(data, scales, fields)`        | Compute bar x/y/width/height attributes     |
+| `createGroupedBars(data, scales, fields)` | Compute grouped bar layout                  |
+| `createLegend(data, colorScale)`          | Build legend item array                     |
+| `filterByLegend(data, activeItems)`       | Filter data rows by active legend selection |
+| `createXAxis(scale, options)`             | Build D3 x-axis descriptor                  |
+| `createYAxis(scale, options)`             | Build D3 y-axis descriptor                  |
+| `createGrid(scales, dimensions)`          | Build grid line descriptors                 |
+
+## Dependencies
+
+- `d3-scale`, `d3-axis`, `d3-format`, `d3-selection`, `d3-array`, `d3-transition`, `d3-scale-chromatic`
+- `@rokkit/core`, `@rokkit/data`, `@rokkit/states`
+
+---
+
+Part of [Rokkit](https://github.com/jerrythomas/rokkit) — a Svelte 5 component library and design system.

package/package.json

@@ -1,63 +1,60 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.16",
-  "description": "Components for making interactive charts.",
+  "version": "1.0.0-next.160",
+  "type": "module",
+  "description": "Data-driven chart components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "src/index.js",
-  "svelte": "src/index.js",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
+  "npm": {
+    "publish": false
+  },
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^8.33.0",
-    "js-yaml": "^4.1.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "~0.19.1",
-    "shared-config": "1.0.0",
-    "eslint-config-shared": "1.0.0"
-  },
-  "dependencies": {
-    "d3-array": "^3.2.2",
-    "d3-collection": "^1.0.7",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "date-fns": "^2.29.3",
-    "ramda": "^0.28.0",
-    "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.16"
+  "scripts": {
+    "prepublishOnly": "cp ../../LICENSE . && bun clean && bun tsc --project tsconfig.build.json",
+    "postpublish": "rm -f LICENSE",
+    "clean": "rm -rf dist",
+    "build": "bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json",
+    "LICENSE"
   ],
   "exports": {
-    "./src": "./src",
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js"
-    }
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    },
+    "./patterns": "./src/patterns/index.js",
+    "./symbols": "./src/symbols/index.js",
+    "./symbols/*": "./src/symbols/*",
+    "./patterns/*": "./src/patterns/*",
+    "./charts/*": "./src/charts/*"
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@rokkit/core": "latest",
+    "@rokkit/data": "latest",
+    "@rokkit/states": "latest",
+    "d3-array": "^3.2.4",
+    "d3-axis": "^3.0.0",
+    "d3-format": "^3.1.2",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
+    "ramda": "^0.32.0"
   }
-}
+}