@rokkit/chart 1.0.0-next.13 → 1.0.0-next.131

package/README.md

@@ -1,55 +1,149 @@
-# 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 chart components for Svelte inspired by [dc.js](https://dc-js.github.io/dc.js/docs/stock.html). This package combines the power of D3.js with the reactivity and component-based approach of Svelte.
 
-- [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.
+## Installation
 
-This component library borrows concepts from the following articles, products, and repositories.
+```bash
+bun add @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.
+## Usage
 
-## Getting Started
+The chart package provides a set of composable components that can be combined to create various chart types.
 
-Get started quickly using [degit](https://github.com/Rich-Harris/degit).
+### Basic Bar Chart Example
 
-```bash
-degit jerrythomas/sparsh-ui/sites/playground my-app
+```svelte
+<script>
+  import { Plot } from '@rokkit/chart'
+  import { dataset } from '@rokkit/data'
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 }
+    // More data...
+  ]
+
+  // Use the dataset class to process the data
+  let data = dataset(sampleData)
+    .groupBy('model')
+    .summarize('name', { count: (values) => values.length })
+    .rollup()
+</script>
+
+<Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 30, bottom: 40, left: 50 }}>
+  <Plot.Grid direction="y" />
+  <Plot.Axis type="x" field="model" label="Model" />
+  <Plot.Axis type="y" field="count" label="Count" />
+  <Plot.Bar x="model" y="count" fill="category" />
+  <Plot.Legend title="Categories" />
+</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
+## Available Components
+
+### Plot.Root
+
+The container component for all charts.
+
+**Props:**
+
+- `data` - The dataset to visualize (array or dataset object)
+- `width` - Width of the chart in pixels (default: 600)
+- `height` - Height of the chart in pixels (default: 400)
+- `margin` - Object with top, right, bottom, left margins (default: `{ top: 20, right: 30, bottom: 40, left: 50 }`)
+- `fill` - Field to use for color mapping (optional)
+- `responsive` - Whether to make the chart responsive (default: true)
+- `animationDuration` - Duration of animations in milliseconds (default: 300)
+
+### Plot.Axis
+
+Renders an axis for the chart.
+
+**Props:**
+
+- `type` - Type of axis ('x' or 'y')
+- `field` - Data field to use for this axis
+- `label` - Axis label text
+- `ticks` - Number of ticks to display (optional)
+- `tickFormat` - Function to format tick labels (optional)
+- `grid` - Whether to show grid lines (default: false)
+
+### Plot.Bar
+
+Renders a bar chart.
+
+**Props:**
+
+- `x` - Field to use for x-axis values
+- `y` - Field to use for y-axis values
+- `fill` - Field to use for coloring the bars (optional)
+- `color` - Fixed color for bars if fill is not provided (default: "#4682b4")
+- `opacity` - Opacity of the bars (default: 1)
+- `animationDuration` - Duration of animations in milliseconds (default: 300)
+- `onClick` - Callback for click events on bars (optional)
+
+### Plot.Grid
+
+Renders grid lines for the chart.
+
+**Props:**
+
+- `direction` - Direction of grid lines ('x', 'y', or 'both') (default: 'both')
+- `xTicks` - Number of ticks for x-axis grid (optional)
+- `yTicks` - Number of ticks for y-axis grid (optional)
+- `color` - Color of grid lines (default: 'currentColor')
+- `opacity` - Opacity of grid lines (default: 0.1)
+- `lineStyle` - Line style for grid lines ('solid', 'dashed', 'dotted') (default: 'solid')
+
+### Plot.Legend
+
+Renders a legend for the chart.
+
+**Props:**
+
+- `title` - Title for the legend (optional)
+- `align` - Alignment of the legend ('left', 'right', 'center') (default: 'right')
+- `verticalAlign` - Vertical position of the legend ('top', 'bottom') (default: 'top')
+- `shape` - Shape for legend items ('circle', 'rect') (default: 'rect')
+- `markerSize` - Size of the legend markers (default: 10)
+- `onClick` - Callback when a legend item is clicked (optional)
+
+## Using with Rokkit Dataset Class
+
+The chart components work seamlessly with the `@rokkit/data` package, allowing for powerful data transformations:
+
+```svelte
+<script>
+  import { Plot } from '@rokkit/chart'
+  import { dataset } from '@rokkit/data'
+
+  let input = [
+    // Your raw data here
+  ]
+
+  $: processedData = dataset(input)
+    .groupBy('category')
+    .summarize('name', {
+      count: (values) => values.length,
+      total: (values) => values.reduce((a, b) => a + b, 0)
+    })
+    .rollup()
+</script>
+
+<Plot.Root data={processedData} fill="category">
+  <Plot.Axis type="x" field="category" />
+  <Plot.Axis type="y" field="count" />
+  <Plot.Bar x="category" y="count" />
+</Plot.Root>
+```
+
+## Advanced Features
+
+- Tooltips are automatically generated for data points
+- Interactive legends for filtering data
+- Responsive design by default
+- Animated transitions when data changes

package/dist/Plot/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./Root.svelte";
+export { default as Axis } from "./Axis.svelte";
+export { default as Bar } from "./Bar.svelte";
+export { default as Legend } from "./Legend.svelte";
+export { default as Grid } from "./Grid.svelte";

package/dist/elements/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Bar } from "./Bar.svelte";
+export { default as ColorRamp } from "./ColorRamp.svelte";
+export { default as ContinuousLegend } from "./ContinuousLegend.svelte";
+export { default as Label } from "./Label.svelte";
+export { default as DefinePatterns } from "./DefinePatterns.svelte";
+export { default as SymbolGrid } from "./SymbolGrid.svelte";

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export namespace Plot {
+    export { Root };
+    export { Axis };
+    export { Bar };
+    export { Grid };
+    export { Legend };
+}
+export { ChartBrewer } from "./lib/brewing/index.svelte.js";
+export * from "./lib/brewing/index.svelte.js";
+import Root from './Plot/Root.svelte';
+import Axis from './Plot/Axis.svelte';
+import Bar from './Plot/Bar.svelte';
+import Grid from './Plot/Grid.svelte';
+import Legend from './Plot/Legend.svelte';

package/dist/lib/brewing/axes.svelte.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @typedef {import('./types').TickData} TickData
+ * @typedef {import('./types').AxisData} AxisData
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+/**
+ * Creates x-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createXAxis(scales: {
+    x: Function;
+}, dimensions: Object, options?: {
+    tickCount?: number | undefined;
+    tickFormat?: Function | undefined;
+    label?: string | undefined;
+}): AxisData;
+/**
+ * Creates y-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createYAxis(scales: {
+    y: Function;
+}, dimensions: Object, options?: {
+    tickCount?: number | undefined;
+    tickFormat?: Function | undefined;
+    label?: string | undefined;
+}): AxisData;
+/**
+ * Creates grid line data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Grid options
+ * @param {string} [options.direction='both'] - Grid direction ('x', 'y', or 'both')
+ * @param {number} [options.xTickCount] - Number of x-axis ticks
+ * @param {number} [options.yTickCount] - Number of y-axis ticks
+ * @returns {Object} Grid rendering data
+ */
+export function createGrid(scales: Object, dimensions: Object, options?: {
+    direction?: string | undefined;
+    xTickCount?: number | undefined;
+    yTickCount?: number | undefined;
+}): Object;
+/**
+ * Creates DOM attributes for a tick element
+ *
+ * @param {TickData} tick - Tick data
+ * @param {string} axis - Axis type ('x' or 'y')
+ * @returns {Object} Attributes for the tick
+ */
+export function createTickAttributes(tick: TickData, axis: string): Object;
+export type TickData = import("./types").TickData;
+export type AxisData = import("./types").AxisData;
+export type ChartScales = import("./types").ChartScales;
+export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/bars.svelte.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import('./types').BarData} BarData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+/**
+ * Creates bar data for rendering
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.x - X-axis field
+ * @param {string} fields.y - Y-axis field
+ * @param {string} fields.color - Color field (optional)
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Function} scales.color - Color scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {string} defaultColor - Default color if no color scale is provided
+ * @returns {BarData[]} Bar data for rendering
+ */
+export function createBars(data: any[], fields: {
+    x: string;
+    y: string;
+    color: string;
+}, scales: {
+    x: Function;
+    y: Function;
+    color: Function;
+}, dimensions: Object, defaultColor?: string): BarData[];
+/**
+ * Filter bars based on a selection criteria
+ *
+ * @param {BarData[]} bars - Bar data array
+ * @param {Object} selection - Selection criteria
+ * @returns {BarData[]} Filtered bars
+ */
+export function filterBars(bars: BarData[], selection: Object): BarData[];
+/**
+ * Creates a grouped bars layout
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Options
+ * @returns {Object} Grouped bar data
+ */
+export function createGroupedBars(data: any[], fields: Object, scales: Object, dimensions: Object, options?: Object): Object;
+export type BarData = import("./types").BarData;
+export type ScaleFields = import("./types").ScaleFields;
+export type ChartScales = import("./types").ChartScales;
+export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/dimensions.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Creates chart dimensions based on width, height and margins
+ *
+ * @param {number} width - Total chart width
+ * @param {number} height - Total chart height
+ * @param {ChartMargin} margin - Chart margins
+ * @returns {ChartDimensions} Chart dimensions
+ */
+export function createDimensions(width?: number, height?: number, margin?: ChartMargin): ChartDimensions;
+/**
+ * Updates existing dimensions with new values
+ *
+ * @param {ChartDimensions} dimensions - Current dimensions
+ * @param {Object} updates - Values to update
+ * @param {number} [updates.width] - New width
+ * @param {number} [updates.height] - New height
+ * @param {ChartMargin} [updates.margin] - New margin
+ * @returns {ChartDimensions} Updated dimensions
+ */
+export function updateDimensions(dimensions: ChartDimensions, updates?: {
+    width?: number | undefined;
+    height?: number | undefined;
+    margin?: import("./types.js").ChartMargin | undefined;
+}): ChartDimensions;
+/**
+ * @typedef {import('./types').ChartMargin} ChartMargin
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+/**
+ * Default chart margin
+ * @type {ChartMargin}
+ */
+export const DEFAULT_MARGIN: ChartMargin;
+export type ChartMargin = import("./types").ChartMargin;
+export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/index.svelte.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Main class that manages chart state and provides access to all brewing functions
+ */
+export class ChartBrewer {
+    /**
+     * Creates a new ChartBrewer instance
+     *
+     * @param {Object} options Configuration options
+     */
+    constructor(options?: Object);
+    /**
+     * Sets the data for the chart
+     *
+     * @param {Array} data Data array
+     * @returns {ChartBrewer} this for method chaining
+     */
+    setData(data: any[]): ChartBrewer;
+    /**
+     * Sets the field mappings for axes and color
+     *
+     * @param {Object} fields Field mappings
+     * @returns {ChartBrewer} this for method chaining
+     */
+    setFields({ x, y, color }: Object): ChartBrewer;
+    /**
+     * Sets the dimensions of the chart
+     *
+     * @param {Object} dimensions Chart dimensions
+     * @returns {ChartBrewer} this for method chaining
+     */
+    setDimensions({ width, height, margin }: Object): ChartBrewer;
+    /**
+     * Creates scales based on data and dimensions
+     *
+     * @returns {ChartBrewer} this for method chaining
+     */
+    createScales(): ChartBrewer;
+    /**
+     * Creates bar data for rendering
+     *
+     * @returns {Array} Data for rendering bars
+     */
+    createBars(): any[];
+    /**
+     * Creates x-axis tick data for rendering
+     *
+     * @param {Object} options Axis options
+     * @returns {Object} Axis rendering data
+     */
+    createXAxis(options?: Object): Object;
+    /**
+     * Creates y-axis tick data for rendering
+     *
+     * @param {Object} options Axis options
+     * @returns {Object} Axis rendering data
+     */
+    createYAxis(options?: Object): Object;
+    /**
+     * Creates grid line data for rendering
+     *
+     * @param {Object} options Grid options
+     * @returns {Object} Grid rendering data
+     */
+    createGrid(options?: Object): Object;
+    /**
+     * Creates legend data for rendering
+     *
+     * @param {Object} options Legend options
+     * @returns {Object} Legend rendering data
+     */
+    createLegend(options?: Object): Object;
+    /**
+     * Gets all chart dimensions
+     *
+     * @returns {Object} Chart dimensions
+     */
+    getDimensions(): Object;
+    /**
+     * Gets all chart scales
+     *
+     * @returns {Object} Chart scales
+     */
+    getScales(): Object;
+    /**
+     * Gets the animation duration
+     *
+     * @returns {number} Animation duration in ms
+     */
+    getAnimationDuration(): number;
+    /**
+     * Gets the data being used
+     *
+     * @returns {Array} Chart data
+     */
+    getData(): any[];
+    /**
+     * Gets the fields configuration
+     *
+     * @returns {Object} Fields configuration
+     */
+    getFields(): Object;
+    #private;
+}
+import { createDimensions } from './dimensions.svelte.js';
+import { updateDimensions } from './dimensions.svelte.js';
+import { createScales } from './scales.svelte.js';
+import { getOrigin } from './scales.svelte.js';
+import { createBars } from './bars.svelte.js';
+import { filterBars } from './bars.svelte.js';
+import { createGroupedBars } from './bars.svelte.js';
+import { createXAxis } from './axes.svelte.js';
+import { createYAxis } from './axes.svelte.js';
+import { createGrid } from './axes.svelte.js';
+import { createTickAttributes } from './axes.svelte.js';
+import { createLegend } from './legends.svelte.js';
+import { filterByLegend } from './legends.svelte.js';
+import { createLegendItemAttributes } from './legends.svelte.js';
+export { createDimensions, updateDimensions, createScales, getOrigin, createBars, filterBars, createGroupedBars, createXAxis, createYAxis, createGrid, createTickAttributes, createLegend, filterByLegend, createLegendItemAttributes };

package/dist/lib/brewing/legends.svelte.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import('./types').LegendItem} LegendItem
+ * @typedef {import('./types').LegendData} LegendData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+/**
+ * Creates legend data for rendering
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.color - Color field
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.color - Color scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Legend options
+ * @param {string} [options.title=''] - Legend title
+ * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
+ * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
+ * @param {number} [options.markerSize=10] - Size of legend markers
+ * @returns {LegendData} Legend rendering data
+ */
+export function createLegend(data: any[], fields: {
+    color: string;
+}, scales: {
+    color: Function;
+}, dimensions: Object, options?: {
+    title?: string | undefined;
+    align?: string | undefined;
+    shape?: string | undefined;
+    markerSize?: number | undefined;
+}): LegendData;
+/**
+ * Filter data based on legend selection
+ *
+ * @param {Array} data - Chart data
+ * @param {string} colorField - Field used for color mapping
+ * @param {Array} selectedValues - Selected legend values
+ * @returns {Array} Filtered data
+ */
+export function filterByLegend(data: any[], colorField: string, selectedValues: any[]): any[];
+/**
+ * Create attributes for legend items
+ *
+ * @param {LegendItem} item - Legend item
+ * @returns {Object} Attributes for the legend item
+ */
+export function createLegendItemAttributes(item: LegendItem): Object;
+export type LegendItem = import("./types").LegendItem;
+export type LegendData = import("./types").LegendData;
+export type ScaleFields = import("./types").ScaleFields;
+export type ChartScales = import("./types").ChartScales;
+export type ChartDimensions = import("./types").ChartDimensions;

package/dist/lib/brewing/scales.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+/**
+ * Creates scales based on data, fields, and dimensions
+ *
+ * @param {Array} data - Chart data
+ * @param {ScaleFields} fields - Field mappings
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Scale options
+ * @param {number} [options.padding=0.2] - Padding for band scales
+ * @returns {ChartScales} Chart scales
+ */
+export function createScales(data: any[], fields: ScaleFields, dimensions: Object, options?: {
+    padding?: number | undefined;
+}): ChartScales;
+/**
+ * Gets the origin coordinates for the axes
+ *
+ * @param {ChartScales} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @returns {Object} Origin coordinates
+ */
+export function getOrigin(scales: ChartScales, dimensions: Object): Object;
+export type ChartScales = import("./types").ChartScales;
+export type ScaleFields = import("./types").ScaleFields;
+export type ChartDimensions = import("./types").ChartDimensions;