@rokkit/chart 1.3.7 → 1.3.9

package/dist/lib/preset.d.ts

@@ -21,9 +21,19 @@ export namespace defaultPreset {
     }
     namespace opacity {
         let area: number;
+        let bar: number;
+        let line: number;
+        let point: number;
+        let arc: number;
         let box: number;
         let violin: number;
-        let point: number;
+        let jitter: number;
+        let heatmap: number;
+        let candlestick: number;
+        let hexbin: number;
+        let ribbon: number;
+        let waterfall: number;
+        let rule: number;
     }
     let patterns: string[];
     let symbols: string[];

package/dist/lib/preset.js

@@ -7,11 +7,23 @@ export const defaultPreset = {
     light: { fill: '300', stroke: '700' },
     dark:  { fill: '500', stroke: '200' }
   },
+  // Per-geom default mark opacity. `alpha` (a fixed 0–1 prop on each geom / Plot.Root)
+  // overrides these; solid marks default to 1 so `alpha` is the single opacity knob.
   opacity: {
-    area:   0.6,
-    box:    0.5,
-    violin: 0.5,
-    point:  0.8
+    area:        0.6,
+    bar:         1,
+    line:        1,
+    point:       0.8,
+    arc:         1,
+    box:         0.5,
+    violin:      0.5,
+    jitter:      0.8,
+    heatmap:     1,
+    candlestick: 1,
+    hexbin:      1,
+    ribbon:      0.5,
+    waterfall:   1,
+    rule:        1
   },
   patterns: ['diagonal', 'dots', 'triangles', 'hatch', 'lattice', 'swell',
              'checkerboard', 'waves', 'petals', 'brick', 'diamonds', 'tile',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {

package/dist/Plot/Arc.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { ChartBrewer } from '../lib/brewing/brewer.svelte.js'
-
-	const brewer = getContext<ChartBrewer>('chart-brewer')
-</script>
-
-{#if brewer && brewer.arcs && brewer.arcs.length > 0}
-	<g
-		class="chart-arcs"
-		data-plot-type="arc"
-		transform="translate({brewer.width / 2}, {brewer.height / 2})"
-	>
-		{#each brewer.arcs as arc (arc.key)}
-			<path
-				d={arc.d}
-				fill={arc.fill}
-				stroke={arc.stroke}
-				stroke-width="1"
-				data-plot-element="arc"
-			/>
-		{/each}
-	</g>
-{/if}
-
-<style>
-	.chart-arcs {
-		pointer-events: none;
-	}
-</style>

package/dist/Plot/Arc.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Arc: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Arc = InstanceType<typeof Arc>;
-export default Arc;

package/dist/Plot/Area.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import { area as d3Area, type CurveFactory } from 'd3-shape'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		y0?: string
-		fill?: string
-		opacity?: number
-		curve?: CurveFactory
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		y0 = undefined,
-		fill = 'steelblue',
-		opacity = 0.7,
-		curve = undefined
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const path = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return null
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const innerHeight = state.innerHeight
-		const areaGen = d3Area<Datum>()
-			.x((d) => xScale(accessor(d, x)) ?? 0)
-			.y1((d) => yScale(accessor(d, y)) ?? 0)
-			.y0((d) =>
-				y0 !== undefined
-					? (yScale((typeof d === 'object' ? d[y0] : undefined) ?? y0) ?? innerHeight)
-					: innerHeight
-			)
-			.defined((d) => d != null)
-		if (curve) areaGen.curve(curve)
-		return areaGen(data)
-	})
-</script>
-
-{#if path}
-	<path d={path} {fill} {opacity} stroke="none" data-plot-element="area" />
-{/if}

package/dist/Plot/Area.svelte.d.ts

@@ -1,14 +0,0 @@
-import { type CurveFactory } from 'd3-shape';
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    y0?: string;
-    fill?: string;
-    opacity?: number;
-    curve?: CurveFactory;
-};
-declare const Area: import("svelte").Component<Props, {}, "">;
-type Area = ReturnType<typeof Area>;
-export default Area;

package/dist/Plot/Bar.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		fill?: string
-		opacity?: number
-	}
-
-	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 }: Props =
-		$props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const bars = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale) return []
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const innerHeight = state.innerHeight
-		const src = data ?? []
-		if (!src.length) return []
-
-		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
-		const padding = typeof xScale.bandwidth === 'function' ? bw * 0.05 : 0
-
-		// Baseline at y=0 when domain spans zero (supports negative bars)
-		const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
-		const baseline =
-			yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
-				? (yScale(0) ?? innerHeight)
-				: innerHeight
-
-		return src.map((d) => {
-			const xVal = accessor(d, x)
-			const yVal = accessor(d, y)
-			const xPos = (xScale(xVal) ?? 0) + padding
-			const yPos = yScale(yVal) ?? baseline
-			return {
-				x: xPos,
-				y: Math.min(yPos, baseline),
-				width: bw * 0.9,
-				height: Math.abs(baseline - yPos),
-				label: `${xVal}: ${yVal}`
-			}
-		})
-	})
-</script>
-
-{#each bars as bar, i (i)}
-	<rect
-		x={bar.x}
-		y={bar.y}
-		width={bar.width}
-		height={bar.height}
-		{fill}
-		{opacity}
-		data-plot-element="bar"
-		role="graphics-symbol"
-		aria-label={bar.label}
-	/>
-{/each}

package/dist/Plot/Bar.svelte.d.ts

@@ -1,11 +0,0 @@
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    fill?: string;
-    opacity?: number;
-};
-declare const Bar: import("svelte").Component<Props, {}, "">;
-type Bar = ReturnType<typeof Bar>;
-export default Bar;

package/dist/Plot/Line.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import { line as d3Line, type CurveFactory } from 'd3-shape'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		stroke?: string
-		strokeWidth?: number
-		curve?: CurveFactory
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		stroke = 'steelblue',
-		strokeWidth = 2,
-		curve = undefined
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const path = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return null
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const lineGen = d3Line<Datum>()
-			.x((d) => xScale(accessor(d, x)) ?? 0)
-			.y((d) => yScale(accessor(d, y)) ?? 0)
-			.defined((d) => d != null)
-		if (curve) lineGen.curve(curve)
-		return lineGen(data)
-	})
-</script>
-
-{#if path}
-	<path
-		d={path}
-		fill="none"
-		{stroke}
-		stroke-width={strokeWidth}
-		stroke-linejoin="round"
-		stroke-linecap="round"
-		data-plot-element="line"
-	/>
-{/if}

package/dist/Plot/Line.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type CurveFactory } from 'd3-shape';
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    curve?: CurveFactory;
-};
-declare const Line: import("svelte").Component<Props, {}, "">;
-type Line = ReturnType<typeof Line>;
-export default Line;

package/dist/Plot/Point.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		r?: number
-		fill?: string
-		stroke?: string
-		strokeWidth?: number
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		r = 4,
-		fill = 'steelblue',
-		stroke = 'white',
-		strokeWidth = 1
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const points = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return []
-		const xScale = state.xScale
-		const yScale = state.yScale
-		return data
-			.map((d) => ({
-				cx: xScale(accessor(d, x)) ?? null,
-				cy: yScale(accessor(d, y)) ?? null,
-				label: `(${accessor(d, x)}, ${accessor(d, y)})`
-			}))
-			.filter((p) => p.cx !== null && p.cy !== null)
-	})
-</script>
-
-{#each points as pt, i (i)}
-	<circle
-		cx={pt.cx}
-		cy={pt.cy}
-		{r}
-		{fill}
-		{stroke}
-		stroke-width={strokeWidth}
-		data-plot-element="point"
-		role="graphics-symbol"
-		aria-label={pt.label}
-	/>
-{/each}

package/dist/Plot/Point.svelte.d.ts

@@ -1,13 +0,0 @@
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    r?: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-};
-declare const Point: import("svelte").Component<Props, {}, "">;
-type Point = ReturnType<typeof Point>;
-export default Point;

package/dist/lib/brewer.d.ts

@@ -1,9 +0,0 @@
-/**
- * Get fill patterns for a set of values
- *
- * @param {Array} values - Array of values
- * @param {Object} swatch - Object with keys for color, gray, and pattern
- * @param {Boolean} gray - Boolean to determine if gray or color
- * @returns {Object} - Object with keys for pattern and color
- */
-export function getFillPatterns(values: any[], swatch: Object, gray?: boolean): Object;

package/dist/lib/brewer.js

@@ -1,25 +0,0 @@
-/**
- * Get fill patterns for a set of values
- *
- * @param {Array} values - Array of values
- * @param {Object} swatch - Object with keys for color, gray, and pattern
- * @param {Boolean} gray - Boolean to determine if gray or color
- * @returns {Object} - Object with keys for pattern and color
- */
-export function getFillPatterns(values, swatch, gray = false) {
-	const colors = gray ? swatch.keys.gray : swatch.keys.color
-	const max_colors = colors.length
-	const max_patterns = swatch.keys.pattern.length
-
-	const mix = values
-		.map((value, index) => ({
-			[value]: {
-				pattern: swatch.keys.pattern[index % max_patterns],
-				color: colors[index % max_colors]
-			}
-		}))
-		.reduce((acc, current) => ({ ...acc, ...current }), {})
-	return mix
-}
-
-// export function getStrokePatterns() {}

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

@@ -1,8 +0,0 @@
-/**
- * Brewer for box plots.
- * fill = box interior color, color = whisker/outline stroke.
- */
-export class BoxBrewer extends QuartileBrewer {
-    boxes: any[];
-}
-import { QuartileBrewer } from './QuartileBrewer.svelte.js';

package/dist/lib/brewing/BoxBrewer.svelte.js

@@ -1,14 +0,0 @@
-import { QuartileBrewer } from './QuartileBrewer.svelte.js'
-import { buildBoxes } from './marks/boxes.js'
-
-/**
- * Brewer for box plots.
- * fill = box interior color, color = whisker/outline stroke.
- */
-export class BoxBrewer extends QuartileBrewer {
-	boxes = $derived(
-		this.xScale && this.yScale
-			? buildBoxes(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
-			: []
-	)
-}

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

@@ -1,8 +0,0 @@
-/**
- * Brewer for cartesian charts (Bar, Line, Area).
- * Groups by x (and fill/color if set) and applies the given stat.
- */
-export class CartesianBrewer extends ChartBrewer {
-    transform(data: any, channels: any, stat: any): any;
-}
-import { ChartBrewer } from './brewer.svelte.js';

package/dist/lib/brewing/CartesianBrewer.svelte.js

@@ -1,21 +0,0 @@
-import { SvelteSet } from 'svelte/reactivity'
-import { ChartBrewer } from './brewer.svelte.js'
-import { applyAggregate } from './stats.js'
-
-/**
- * Brewer for cartesian charts (Bar, Line, Area).
- * Groups by x (and fill/color if set) and applies the given stat.
- */
-export class CartesianBrewer extends ChartBrewer {
-	transform(data, channels, stat) {
-		if (stat === 'identity' || !channels.x || !channels.y) return data
-		// Group by all mapped aesthetic dimensions so they survive aggregation.
-		// e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
-		const by = [
-			...new SvelteSet(
-				[channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean)
-			)
-		]
-		return applyAggregate(data, { by, value: channels.y, stat })
-	}
-}

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

@@ -1,8 +0,0 @@
-/**
- * Brewer for pie charts. Always aggregates by the label field.
- * 'identity' is not meaningful for pie charts — falls back to 'sum'.
- */
-export class PieBrewer extends ChartBrewer {
-    transform(data: any, channels: any, stat: any): any;
-}
-import { ChartBrewer } from './brewer.svelte.js';

package/dist/lib/brewing/PieBrewer.svelte.js

@@ -1,14 +0,0 @@
-import { ChartBrewer } from './brewer.svelte.js'
-import { applyAggregate } from './stats.js'
-
-/**
- * Brewer for pie charts. Always aggregates by the label field.
- * 'identity' is not meaningful for pie charts — falls back to 'sum'.
- */
-export class PieBrewer extends ChartBrewer {
-	transform(data, channels, stat) {
-		if (!channels.label || !channels.y) return data
-		const effectiveStat = stat === 'identity' ? 'sum' : (stat ?? 'sum')
-		return applyAggregate(data, { by: [channels.label], value: channels.y, stat: effectiveStat })
-	}
-}

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

@@ -1,9 +0,0 @@
-/**
- * Shared base for box and violin plots.
- * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
- * Subclasses add their mark-specific $derived (boxes, violins, etc.).
- */
-export class QuartileBrewer extends ChartBrewer {
-    transform(data: any, channels: any): any;
-}
-import { ChartBrewer } from './brewer.svelte.js';

package/dist/lib/brewing/QuartileBrewer.svelte.js

@@ -1,51 +0,0 @@
-import { quantile, ascending } from 'd3-array'
-import { dataset } from '@rokkit/data'
-import { ChartBrewer } from './brewer.svelte.js'
-import { buildXScale, buildYScale } from './scales.js'
-
-function sortedQuantile(values, p) {
-	return quantile([...values].sort(ascending), p)
-}
-
-/**
- * Shared base for box and violin plots.
- * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
- * Subclasses add their mark-specific $derived (boxes, violins, etc.).
- */
-export class QuartileBrewer extends ChartBrewer {
-	transform(data, channels) {
-		if (!channels.x || !channels.y) return data
-		const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
-		return dataset(data)
-			.groupBy(...by)
-			.summarize((row) => row[channels.y], {
-				q1: (v) => sortedQuantile(v, 0.25),
-				median: (v) => sortedQuantile(v, 0.5),
-				q3: (v) => sortedQuantile(v, 0.75),
-				iqr_min: (v) => {
-					const q1 = sortedQuantile(v, 0.25)
-					const q3 = sortedQuantile(v, 0.75)
-					return q1 - 1.5 * (q3 - q1)
-				},
-				iqr_max: (v) => {
-					const q1 = sortedQuantile(v, 0.25)
-					const q3 = sortedQuantile(v, 0.75)
-					return q3 + 1.5 * (q3 - q1)
-				}
-			})
-			.rollup()
-			.select()
-	}
-
-	xScale = $derived(
-		this.channels.x && this.processedData.length > 0
-			? buildXScale(this.processedData, this.channels.x, this.innerWidth)
-			: null
-	)
-
-	yScale = $derived(
-		this.channels.y && this.processedData.length > 0
-			? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
-			: null
-	)
-}

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

@@ -1,8 +0,0 @@
-/**
- * Brewer for violin plots.
- * fill = violin body color, color = outline stroke.
- */
-export class ViolinBrewer extends QuartileBrewer {
-    violins: any[];
-}
-import { QuartileBrewer } from './QuartileBrewer.svelte.js';

package/dist/lib/brewing/ViolinBrewer.svelte.js

@@ -1,14 +0,0 @@
-import { QuartileBrewer } from './QuartileBrewer.svelte.js'
-import { buildViolins } from './marks/violins.js'
-
-/**
- * Brewer for violin plots.
- * fill = violin body color, color = outline stroke.
- */
-export class ViolinBrewer extends QuartileBrewer {
-	violins = $derived(
-		this.xScale && this.yScale
-			? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
-			: []
-	)
-}

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

@@ -1,66 +0,0 @@
-/**
- * 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;