blazeplot 0.1.10 → 0.1.12

package/README.md

@@ -78,10 +78,15 @@ push();
 | `chart.addLine(config, style?)` / `addArea` / `addScatter` / `addBar` | Typed helpers that set the series mode for you. |
 | `chart.removeSeries(series)` | Remove a previously added series. |
 | `chart.setViewport({ xMin, xMax, yMin, yMax })` | Set the visible data range. |
+| `chart.getViewport()` | Return the current visible data range. |
+| `chart.pan(intent)` / `chart.zoom(intent)` | Plugin-facing camera interaction helpers. |
+| `chart.clientToData(clientX, clientY)` / `chart.dataToPlot(x, y)` | Convert between client/plot coordinates and data coordinates. |
 | `chart.resize(dpr?)` | Resize the internal plot canvas to match its CSS size × DPR. |
 | `chart.start()` | Start the render loop (rAF). |
 | `chart.stop()` | Stop the render loop. |
 | `chart.canvas` | Read-only access to the internal plot canvas. |
+| `chart.xAxisElement` / `chart.yAxisElement` | Plugin-facing access to outside axis gutter elements. |
+| `chart.theme` | Resolved theme values used by the chart and built-in plugins. |
 | `chart.getFrameStats(target?)` | Copy per-frame benchmark counters into a reusable object. |
 | `chart.getSeriesState()` | Return public series metadata/state for plugins or custom UI. |
 | `chart.setSeriesVisible(series, visible)` | Toggle visibility and notify series-state subscribers. |
@@ -94,13 +99,41 @@ push();
 
 | Property | Default | Description |
 |---|---|---|
-| `viewportPolicy?` | — | Custom pan/zoom/viewport behavior hooks. |
+| `viewportPolicy?` | — | Optional `beforeRender` viewport hook. Pass the same policy to `interactionsPlugin({ viewportPolicy })` for pan/zoom hooks. |
 | `hover?` | `{ mode: "nearest-x" }` | Default hover picking behavior. `mode` can be `"nearest-x"` or `"nearest-point"`. |
 | `plugins?` | `[]` | Optional `ChartPlugin` instances, e.g. `legendPlugin()` and `tooltipPlugin()`. |
+| `theme?` | built-in dark theme | Override chart, axis, palette, legend, and tooltip colors/fonts. |
 | `grid?` | `true` | Show grid lines. |
-| `gridStyle?` | `{ color: [0.22,0.30,0.44,0.45] }` | Grid line color and width. |
+| `gridStyle?` | `{ color: theme.gridColor }` | Grid line color and width; overrides the theme grid color. |
 | `axes?` | `true` | Show axis tick labels. `true`/`false`, or per-axis `{ x?: boolean \| AxisConfig, y?: boolean \| AxisConfig }`. |
 
+### `ChartTheme`
+
+```css
+:root {
+  --plot-bg: #050816;
+  --plot-grid: rgb(148 163 184 / 0.22);
+  --plot-axis: #cbd5e1;
+  --series-a: #38bdf8;
+  --series-b: oklch(70% 0.19 22);
+}
+```
+
+```ts
+new Chart(container, {
+  theme: {
+    backgroundColor: "var(--plot-bg)",
+    gridColor: "var(--plot-grid)",
+    axisColor: "var(--plot-axis)",
+    seriesColors: ["var(--series-a)", "var(--series-b)"],
+    tooltipBackgroundColor: "rgb(4 8 16 / 0.85)",
+    legendBackgroundColor: "rgb(4 8 16 / 0.85)",
+  },
+});
+```
+
+WebGL-facing colors (`backgroundColor`, `gridColor`, `seriesColors`) accept either normalized RGBA tuples (`[r,g,b,a]`) or CSS colors, including CSS variables inherited by the chart container. BlazePlot resolves CSS colors internally to WebGL-compatible RGBA floats while preserving CSS strings for DOM styling where appropriate. Per-series styles and plugin options still override theme defaults.
+
 ### `AxisConfig`
 
 | Property | Default | Description |
@@ -130,19 +163,21 @@ new Chart(canvas, {
 
 ```js
 import { Chart } from "blazeplot";
+import { interactionsPlugin } from "blazeplot/plugins/interactions";
 import { legendPlugin } from "blazeplot/plugins/legend";
 import { tooltipPlugin } from "blazeplot/plugins/tooltip";
 
 const chart = new Chart(container, {
   hover: { mode: "nearest-x" },
   plugins: [
+    interactionsPlugin({ axis: "xy" }),
     legendPlugin(),
     tooltipPlugin({ mode: "nearest-point" }),
   ],
 });
 ```
 
-Built-in plugins are optional. They consume public APIs (`getSeriesState`, `setSeriesVisible`, `pick`, and `subscribe`) so custom UI can use the same contract. The default tooltip updates while the cursor is still on live charts and highlights the raw sample(s) it is reporting.
+Built-in plugins are optional. `interactionsPlugin()` provides plain-drag box zoom, Shift+drag plot pan, wheel zoom, double-click reset, and `axis: "x" | "y" | "xy"`. When outside axes are visible, scrolling an axis zooms that axis and dragging an axis pans that axis; the plugin also applies a subtle axis hover color/filter configurable with `axisHover`, `axisHoverColor`, and `axisHoverFilter`. Legend/tooltip consume public APIs (`getSeriesState`, `setSeriesVisible`, `pick`, and `subscribe`) so custom UI can use the same contract. The default tooltip updates while the cursor is still on live charts and highlights the raw sample(s) it is reporting.
 
 ### `SeriesStore`
 
@@ -176,6 +211,8 @@ Built-in plugins are optional. They consume public APIs (`getSeriesState`, `setS
 
 ### `ViewportPolicy`
 
+`beforeRender` is consumed by `Chart`; `beforePan` and `beforeZoom` are consumed by `interactionsPlugin({ viewportPolicy })`.
+
 ```ts
 interface ViewportPolicy {
   beforePan?(camera: Camera2D, intent: PanIntent): PanIntent | null;
@@ -194,7 +231,7 @@ interface ViewportPolicy {
 src/
   core/          # Data model — series, datasets, LOD
   render/        # GPU abstraction + regl backend
-  interaction/   # Camera, input, axis ticks
+  interaction/   # Camera, axis ticks, interaction intent types
   ui/            # Orchestrator (Chart)
 ```
 
@@ -218,8 +255,11 @@ bun run build
 Output:
 
 ```
-dist/index.js        ES module
-dist/index.d.ts      TypeScript declarations
+dist/index.js                  ES module
+dist/index.d.ts                TypeScript declarations
+dist/plugins/interactions.js   Optional interactions plugin
+dist/plugins/legend.js         Optional legend plugin
+dist/plugins/tooltip.js        Optional tooltip plugin
 ```
 
 ## Why WebGL2?

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Chart } from './ui/Chart.js';
 export type { ChartFrameStats, ChartOptions, ChartScreenshotOptions, AxisConfig, TypedSeriesConfig, ChartHoverState, ChartPickItem, ChartPickMode, ChartPickOptions, ChartPlugin, ChartPluginHandle, ChartSeriesState } from './ui/Chart.js';
+export { DEFAULT_CHART_THEME } from './ui/theme.js';
+export type { ChartTheme, ResolvedChartTheme, RgbaColor, CssColor, ThemeColor } from './ui/theme.js';
 export type { AxisPosition } from './ui/ChartLayout.js';
 export { SeriesStore } from './core/SeriesStore.js';
 export { RingBuffer } from './core/RingBuffer.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,sBAAsB,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC7O,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjM,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,sBAAsB,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC7O,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACrG,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjM,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}