@rokkit/chart 1.0.0-next.151 → 1.0.0-next.155

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/PlotState.svelte.d.ts +26 -0
  2. package/dist/index.d.ts +6 -1
  3. package/dist/lib/brewing/BoxBrewer.svelte.d.ts +3 -5
  4. package/dist/lib/brewing/QuartileBrewer.svelte.d.ts +9 -0
  5. package/dist/lib/brewing/ViolinBrewer.svelte.d.ts +3 -4
  6. package/dist/lib/brewing/colors.d.ts +10 -1
  7. package/dist/lib/brewing/marks/points.d.ts +17 -2
  8. package/dist/lib/keyboard-nav.d.ts +15 -0
  9. package/dist/lib/plot/preset.d.ts +1 -1
  10. package/dist/lib/preset.d.ts +30 -0
  11. package/package.json +2 -1
  12. package/src/AnimatedPlot.svelte +375 -207
  13. package/src/Chart.svelte +81 -84
  14. package/src/ChartProvider.svelte +10 -0
  15. package/src/FacetPlot/Panel.svelte +30 -16
  16. package/src/FacetPlot.svelte +100 -76
  17. package/src/Plot/Area.svelte +26 -19
  18. package/src/Plot/Axis.svelte +81 -59
  19. package/src/Plot/Bar.svelte +47 -89
  20. package/src/Plot/Grid.svelte +23 -19
  21. package/src/Plot/Legend.svelte +213 -147
  22. package/src/Plot/Line.svelte +31 -21
  23. package/src/Plot/Point.svelte +35 -22
  24. package/src/Plot/Root.svelte +46 -91
  25. package/src/Plot/Timeline.svelte +82 -82
  26. package/src/Plot/Tooltip.svelte +68 -62
  27. package/src/Plot.svelte +290 -174
  28. package/src/PlotState.svelte.js +338 -265
  29. package/src/Sparkline.svelte +95 -56
  30. package/src/charts/AreaChart.svelte +22 -20
  31. package/src/charts/BarChart.svelte +23 -21
  32. package/src/charts/BoxPlot.svelte +15 -15
  33. package/src/charts/BubbleChart.svelte +17 -17
  34. package/src/charts/LineChart.svelte +20 -20
  35. package/src/charts/PieChart.svelte +30 -20
  36. package/src/charts/ScatterPlot.svelte +20 -19
  37. package/src/charts/ViolinPlot.svelte +15 -15
  38. package/src/crossfilter/CrossFilter.svelte +33 -29
  39. package/src/crossfilter/FilterBar.svelte +17 -25
  40. package/src/crossfilter/FilterHistogram.svelte +290 -0
  41. package/src/crossfilter/FilterSlider.svelte +69 -65
  42. package/src/crossfilter/createCrossFilter.svelte.js +94 -90
  43. package/src/geoms/Arc.svelte +114 -69
  44. package/src/geoms/Area.svelte +67 -39
  45. package/src/geoms/Bar.svelte +184 -126
  46. package/src/geoms/Box.svelte +101 -91
  47. package/src/geoms/LabelPill.svelte +11 -11
  48. package/src/geoms/Line.svelte +110 -86
  49. package/src/geoms/Point.svelte +130 -90
  50. package/src/geoms/Violin.svelte +51 -41
  51. package/src/geoms/lib/areas.js +122 -99
  52. package/src/geoms/lib/bars.js +195 -144
  53. package/src/index.js +21 -14
  54. package/src/lib/brewing/BoxBrewer.svelte.js +8 -50
  55. package/src/lib/brewing/CartesianBrewer.svelte.js +11 -7
  56. package/src/lib/brewing/PieBrewer.svelte.js +5 -5
  57. package/src/lib/brewing/QuartileBrewer.svelte.js +51 -0
  58. package/src/lib/brewing/ViolinBrewer.svelte.js +8 -49
  59. package/src/lib/brewing/brewer.svelte.js +242 -195
  60. package/src/lib/brewing/colors.js +34 -5
  61. package/src/lib/brewing/marks/arcs.js +28 -28
  62. package/src/lib/brewing/marks/areas.js +54 -41
  63. package/src/lib/brewing/marks/bars.js +34 -34
  64. package/src/lib/brewing/marks/boxes.js +51 -51
  65. package/src/lib/brewing/marks/lines.js +37 -30
  66. package/src/lib/brewing/marks/points.js +74 -26
  67. package/src/lib/brewing/marks/violins.js +57 -57
  68. package/src/lib/brewing/patterns.js +25 -11
  69. package/src/lib/brewing/scales.js +17 -17
  70. package/src/lib/brewing/stats.js +37 -29
  71. package/src/lib/brewing/symbols.js +1 -1
  72. package/src/lib/chart.js +2 -1
  73. package/src/lib/keyboard-nav.js +37 -0
  74. package/src/lib/plot/crossfilter.js +5 -5
  75. package/src/lib/plot/facet.js +30 -30
  76. package/src/lib/plot/frames.js +30 -29
  77. package/src/lib/plot/helpers.js +4 -4
  78. package/src/lib/plot/preset.js +48 -34
  79. package/src/lib/plot/scales.js +64 -39
  80. package/src/lib/plot/stat.js +47 -47
  81. package/src/lib/preset.js +41 -0
  82. package/src/patterns/DefinePatterns.svelte +24 -24
  83. package/src/patterns/README.md +3 -0
  84. package/src/patterns/patterns.js +328 -176
  85. package/src/patterns/scale.js +61 -32
  86. package/src/spec/chart-spec.js +64 -21
@@ -8,6 +8,9 @@ export class PlotState {
8
8
  colors: Map<unknown, {
9
9
  fill: string;
10
10
  stroke: string;
11
+ }> | Map<null, {
12
+ fill: any;
13
+ stroke: any;
11
14
  }>;
12
15
  patterns: Map<unknown, string> | SvelteMap<any, any>;
13
16
  symbols: Map<unknown, string> | SvelteMap<any, any>;
@@ -40,9 +43,32 @@ export class PlotState {
40
43
  get innerWidth(): number;
41
44
  get innerHeight(): number;
42
45
  get mode(): string;
46
+ get chartPreset(): {
47
+ colors: string[];
48
+ shades: {
49
+ light: {
50
+ fill: string;
51
+ stroke: string;
52
+ };
53
+ dark: {
54
+ fill: string;
55
+ stroke: string;
56
+ };
57
+ };
58
+ opacity: {
59
+ area: number;
60
+ box: number;
61
+ violin: number;
62
+ point: number;
63
+ };
64
+ patterns: string[];
65
+ symbols: string[];
66
+ };
43
67
  get hovered(): null;
44
68
  setHovered(data: any): void;
45
69
  clearHovered(): void;
70
+ applyZoom(transform: any): void;
71
+ resetZoom(): void;
46
72
  #private;
47
73
  }
48
74
  import { SvelteMap } from 'svelte/reactivity';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export namespace PlotLayers {
1
+ export namespace Plot {
2
2
  export { Root };
3
3
  export { Axis };
4
4
  export { Bar };
@@ -9,7 +9,9 @@ export namespace PlotLayers {
9
9
  export { Point };
10
10
  export { Arc };
11
11
  }
12
+ export namespace PlotLayers { }
12
13
  export { default as PlotChart } from "./Plot.svelte";
14
+ export { default as ChartProvider } from "./ChartProvider.svelte";
13
15
  export { default as FacetPlot } from "./FacetPlot.svelte";
14
16
  export { default as AnimatedPlot } from "./AnimatedPlot.svelte";
15
17
  export { default as GeomBar } from "./geoms/Bar.svelte";
@@ -34,12 +36,14 @@ export { ChartBrewer } from "./lib/brewing/index.svelte.js";
34
36
  export * from "./lib/brewing/index.svelte.js";
35
37
  export { CartesianBrewer } from "./lib/brewing/CartesianBrewer.svelte.js";
36
38
  export { PieBrewer } from "./lib/brewing/PieBrewer.svelte.js";
39
+ export { QuartileBrewer } from "./lib/brewing/QuartileBrewer.svelte.js";
37
40
  export { BoxBrewer } from "./lib/brewing/BoxBrewer.svelte.js";
38
41
  export { ViolinBrewer } from "./lib/brewing/ViolinBrewer.svelte.js";
39
42
  export { createCrossFilter } from "./crossfilter/createCrossFilter.svelte.js";
40
43
  export { default as CrossFilter } from "./crossfilter/CrossFilter.svelte";
41
44
  export { default as FilterBar } from "./crossfilter/FilterBar.svelte";
42
45
  export { default as FilterSlider } from "./crossfilter/FilterSlider.svelte";
46
+ export { default as FilterHistogram } from "./crossfilter/FilterHistogram.svelte";
43
47
  import Root from './Plot/Root.svelte';
44
48
  import Axis from './Plot/Axis.svelte';
45
49
  import Bar from './Plot/Bar.svelte';
@@ -49,3 +53,4 @@ import Line from './Plot/Line.svelte';
49
53
  import Area from './Plot/Area.svelte';
50
54
  import Point from './Plot/Point.svelte';
51
55
  import Arc from './Plot/Arc.svelte';
56
+ export { createChartPreset, defaultPreset } from "./lib/preset.js";
@@ -1,10 +1,8 @@
1
1
  /**
2
- * Brewer for box plots. Always computes quartile statistics regardless of the stat prop.
3
- * Groups by x + fill (primary) or x + color (fallback).
2
+ * Brewer for box plots.
4
3
  * fill = box interior color, color = whisker/outline stroke.
5
4
  */
6
- export class BoxBrewer extends ChartBrewer {
7
- transform(data: any, channels: any): any;
5
+ export class BoxBrewer extends QuartileBrewer {
8
6
  boxes: any[];
9
7
  }
10
- import { ChartBrewer } from './brewer.svelte.js';
8
+ import { QuartileBrewer } from './QuartileBrewer.svelte.js';
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Shared base for box and violin plots.
3
+ * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
4
+ * Subclasses add their mark-specific $derived (boxes, violins, etc.).
5
+ */
6
+ export class QuartileBrewer extends ChartBrewer {
7
+ transform(data: any, channels: any): any;
8
+ }
9
+ import { ChartBrewer } from './brewer.svelte.js';
@@ -1,9 +1,8 @@
1
1
  /**
2
- * Brewer for violin plots. Computes the same quartile statistics as BoxBrewer.
2
+ * Brewer for violin plots.
3
3
  * fill = violin body color, color = outline stroke.
4
4
  */
5
- export class ViolinBrewer extends ChartBrewer {
6
- transform(data: any, channels: any): any;
5
+ export class ViolinBrewer extends QuartileBrewer {
7
6
  violins: any[];
8
7
  }
9
- import { ChartBrewer } from './brewer.svelte.js';
8
+ import { QuartileBrewer } from './QuartileBrewer.svelte.js';
@@ -1,3 +1,10 @@
1
+ /**
2
+ * Returns true if the value looks like a CSS color literal (not a field name).
3
+ * Supports hex (#rgb, #rrggbb, #rrggbbaa), and functional notations (rgb, hsl, oklch, etc.).
4
+ * @param {unknown} value
5
+ * @returns {boolean}
6
+ */
7
+ export function isLiteralColor(value: unknown): boolean;
1
8
  /**
2
9
  * Extracts distinct values for a given field from the data array.
3
10
  * @param {Object[]} data
@@ -9,9 +16,11 @@ export function distinct(data: Object[], field: string | null): unknown[];
9
16
  * Assigns palette colors to an array of distinct values.
10
17
  * @param {unknown[]} values
11
18
  * @param {'light'|'dark'} mode
19
+ * @param {typeof defaultPreset} preset
12
20
  * @returns {Map<unknown, {fill: string, stroke: string}>}
13
21
  */
14
- export function assignColors(values: unknown[], mode?: "light" | "dark"): Map<unknown, {
22
+ export function assignColors(values: unknown[], mode?: "light" | "dark", preset?: typeof defaultPreset): Map<unknown, {
15
23
  fill: string;
16
24
  stroke: string;
17
25
  }>;
26
+ import { defaultPreset } from '../preset.js';
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Returns a Map assigning shape names to distinct values, cycling through available shapes.
3
3
  * @param {unknown[]} values
4
+ * @param {typeof defaultPreset} preset
4
5
  * @returns {Map<unknown, string>}
5
6
  */
6
- export function assignSymbols(values: unknown[]): Map<unknown, string>;
7
+ export function assignSymbols(values: unknown[], preset?: typeof defaultPreset): Map<unknown, string>;
7
8
  /**
8
9
  * Builds an SVG path string for a given shape name and radius.
9
10
  * @param {string} shapeName
@@ -11,6 +12,15 @@ export function assignSymbols(values: unknown[]): Map<unknown, string>;
11
12
  * @returns {string}
12
13
  */
13
14
  export function buildSymbolPath(shapeName: string, r: number): string;
15
+ /**
16
+ * Returns a stable pseudo-random offset for a given index.
17
+ * Uses a linear congruential generator seeded by index — no external dependency,
18
+ * stable across re-renders.
19
+ * @param {number} i - row index (seed)
20
+ * @param {number} range - total spread (jitter is ±range/2)
21
+ * @returns {number}
22
+ */
23
+ export function jitterOffset(i: number, range: number): number;
14
24
  /**
15
25
  * Builds point geometry for scatter/bubble charts.
16
26
  * @param {Object[]} data
@@ -21,6 +31,7 @@ export function buildSymbolPath(shapeName: string, r: number): string;
21
31
  * @param {Function|null} sizeScale
22
32
  * @param {Map<unknown, string>|null} symbolMap — maps symbol field value → shape name
23
33
  * @param {number} defaultRadius
34
+ * @param {{ width?: number, height?: number }|null} jitter
24
35
  */
25
36
  export function buildPoints(data: Object[], channels: {
26
37
  x: string;
@@ -28,7 +39,10 @@ export function buildPoints(data: Object[], channels: {
28
39
  color?: string;
29
40
  size?: string;
30
41
  symbol?: string;
31
- }, xScale: Function, yScale: Function, colors: Map<any, any>, sizeScale: Function | null, symbolMap: Map<unknown, string> | null, defaultRadius?: number): {
42
+ }, xScale: Function, yScale: Function, colors: Map<any, any>, sizeScale: Function | null, symbolMap: Map<unknown, string> | null, defaultRadius?: number, jitter?: {
43
+ width?: number;
44
+ height?: number;
45
+ } | null): {
32
46
  data: Object;
33
47
  cx: any;
34
48
  cy: any;
@@ -38,3 +52,4 @@ export function buildPoints(data: Object[], channels: {
38
52
  symbolPath: string | null;
39
53
  key: any;
40
54
  }[];
55
+ import { defaultPreset } from '../../preset.js';
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Svelte action: arrow key navigation between sibling data elements within a geom.
3
+ *
4
+ * When applied to a focusable SVG element with `enabled=true`, ArrowLeft/ArrowRight
5
+ * move focus between elements sharing the same `[data-plot-geom]` container.
6
+ *
7
+ * Usage: `<circle use:keyboardNav={keyboard} ...>`
8
+ *
9
+ * @param {Element} node
10
+ * @param {boolean} enabled
11
+ */
12
+ export function keyboardNav(node: Element, enabled: boolean): {
13
+ update(newEnabled: any): void;
14
+ destroy: () => any;
15
+ };
@@ -4,7 +4,7 @@ export function resolvePreset(name: any, helpers?: {}): {
4
4
  symbols: any;
5
5
  };
6
6
  export namespace DEFAULT_PRESET {
7
- export let colors: string[];
7
+ export let colors: any[];
8
8
  export { PATTERN_ORDER as patterns };
9
9
  export { SYMBOL_ORDER as symbols };
10
10
  }
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Creates a chart preset by deep-merging overrides with the default preset.
3
+ * All fields are optional. `opacity` is merged key-by-key so partial overrides work.
4
+ * @param {Partial<typeof defaultPreset>} [overrides]
5
+ * @returns {typeof defaultPreset}
6
+ */
7
+ export function createChartPreset(overrides?: Partial<typeof defaultPreset>): typeof defaultPreset;
8
+ export namespace defaultPreset {
9
+ let colors: string[];
10
+ namespace shades {
11
+ namespace light {
12
+ let fill: string;
13
+ let stroke: string;
14
+ }
15
+ namespace dark {
16
+ let fill_1: string;
17
+ export { fill_1 as fill };
18
+ let stroke_1: string;
19
+ export { stroke_1 as stroke };
20
+ }
21
+ }
22
+ namespace opacity {
23
+ let area: number;
24
+ let box: number;
25
+ let violin: number;
26
+ let point: number;
27
+ }
28
+ let patterns: string[];
29
+ let symbols: string[];
30
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/chart",
3
- "version": "1.0.0-next.151",
3
+ "version": "1.0.0-next.155",
4
4
  "type": "module",
5
5
  "description": "Data-driven chart components",
6
6
  "repository": {
@@ -54,6 +54,7 @@
54
54
  "d3-selection": "^3.0.0",
55
55
  "d3-shape": "^3.2.0",
56
56
  "d3-transition": "^3.0.1",
57
+ "d3-zoom": "^3.0.0",
57
58
  "ramda": "^0.32.0"
58
59
  }
59
60
  }