@rokkit/chart 1.0.2 → 1.0.4

package/dist/lib/utils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Creates appropriate scales based on data and dimensions
+ *
+ * @param {Array} data The dataset
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} [options] Additional options
+ * @param {string} options.xKey Field to use for x-axis
+ * @param {string} options.yKey Field to use for y-axis
+ * @param {string} [options.colorKey] Field to use for color mapping
+ * @returns {Object} Object containing xScale, yScale, and colorScale
+ */
+export function createScales(data: any[], dimensions: Object, options?: {
+    xKey: string;
+    yKey: string;
+    colorKey?: string | undefined;
+}): Object;
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {Object} dimensions Original dimensions
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(dimensions: Object): Object;
+/**
+ * Normalizes data for use with D3 charts
+ *
+ * @param {Array|Object} inputData Raw data or dataset object
+ * @returns {Array} Normalized data array
+ */
+export function normalizeData(inputData: any[] | Object): any[];
+/**
+ * Generates a unique ID for SVG elements
+ *
+ * @param {string} prefix Prefix for the ID
+ * @returns {string} A unique ID
+ */
+export function uniqueId(prefix?: string): string;
+/**
+ * Formats tooltip content for a data point
+ *
+ * @param {Object} d Data point
+ * @param {Object} options Tooltip format options
+ * @returns {string} Formatted tooltip HTML content
+ */
+export function formatTooltipContent(d: Object, options?: Object): string;
+/**
+ * Generates a tooltip formatter function
+ *
+ * @param {Object} options Tooltip format options
+ * @returns {Function} A function that formats tooltip content
+ */
+export function createTooltipFormatter(options?: Object): Function;
+/**
+ * Calculates the transform attribute for SVG elements
+ *
+ * @param {number} x X position
+ * @param {number} y Y position
+ * @returns {string} Transform attribute value
+ */
+export function transform(x: number, y: number): string;
+export function scaledPathCollection(paths: any): {};

package/dist/lib/xscale.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Builds an appropriate D3 x-axis scale based on value types.
+ * Returns scaleTime for Date values, scaleLinear for numeric values,
+ * or scaleBand for categorical values.
+ *
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
+ */
+export function buildXScale(xValues: any[], dimensions: Object, padding: number): any | any;

package/dist/patterns/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PatternDef } from "./PatternDef.svelte";
+export { default as DefinePatterns } from "./DefinePatterns.svelte";
+export { PATTERNS } from "./patterns.js";
+export { scaleMark, resolveMarkAttrs } from "./scale.js";

package/dist/patterns/patterns.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Unified pattern library.
+ *
+ * Each entry is an array of mark descriptors.  All geometry is in normalized
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
+ *
+ * Mark types
+ * ----------
+ * circle   { cx, cy, r }
+ * line     { x1, y1, x2, y2 }           coordinates may exceed 0–1 for seamless tiling
+ * polygon  { points: [x,y][] }
+ * rect     { x, y, w, h }
+ * path     { d: [cmd, ...args][] }       SVG path commands as nested arrays (H/V take one arg)
+ *
+ * Appearance
+ * ----------
+ * fill: true      → element uses fill color (stroke: none)
+ * fill: false     → element uses stroke color (fill: none)   ← default
+ * fillOpacity: n  → applied as fill-opacity on filled marks
+ * opacity: n      → applied as opacity on any mark
+ */
+/** @typedef {{ type: 'circle',  cx: number, cy: number, r: number,              fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
+/** @typedef {{ type: 'line',    x1: number, y1: number, x2: number, y2: number, fill?: false,   strokeWidth?: number }} LineMark */
+/** @typedef {{ type: 'polygon', points: [number,number][],                       fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
+/** @typedef {{ type: 'rect',    x: number,  y: number,  w: number,  h: number,  fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
+/** @typedef {{ type: 'path',    d: (string|number)[][],                          fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
+/** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
+/** @type {Record<string, PatternMark[]>} */
+export const PATTERNS: Record<string, PatternMark[]>;
+export type CircleMark = {
+    type: "circle";
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type LineMark = {
+    type: "line";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    fill?: false;
+    strokeWidth?: number;
+};
+export type PolygonMark = {
+    type: "polygon";
+    points: [number, number][];
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type RectMark = {
+    type: "rect";
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type PathMark = {
+    type: "path";
+    d: (string | number)[][];
+    fill?: boolean;
+    fillOpacity?: number;
+    opacity?: number;
+};
+export type PatternMark = CircleMark | LineMark | PolygonMark | RectMark | PathMark;

package/dist/patterns/scale.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Scale all geometric coordinates in a mark by `size`.
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
+ * @param {PatternMark} mark
+ * @param {number} size
+ * @returns {object}
+ */
+export function scaleMark(mark: PatternMark, size: number): object;
+/**
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
+ * `attrs` can be spread directly onto the SVG element.
+ *
+ * Per-mark overrides respected:
+ *   mark.strokeWidth  → `stroke-width` (takes precedence over `thickness`)
+ *   mark.fillOpacity  → `fill-opacity`
+ *   mark.opacity      → `opacity`
+ *
+ * @param {object} scaledMark  Output of scaleMark
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
+ * @returns {{ type: string, attrs: object }}
+ */
+export function resolveMarkAttrs(scaledMark: object, { fill, stroke, thickness }: {
+    fill: string;
+    stroke: string;
+    thickness: number;
+}): {
+    type: string;
+    attrs: object;
+};
+import type { PatternMark } from './patterns.js';

package/dist/symbols/constants/index.d.ts

@@ -0,0 +1 @@
+export const namedShapes: {};

package/dist/symbols/index.d.ts

@@ -0,0 +1,5 @@
+export const shapes: string[];
+export const components: {
+    default: import("svelte/legacy").LegacyComponentType;
+    'rounded-square': import("svelte/legacy").LegacyComponentType;
+};

package/package.json

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

package/src/ChartExporter.svelte

@@ -26,6 +26,7 @@
 	 * @param {SVGSVGElement} svg
 	 * @returns {SVGSVGElement}
 	 */
+	// eslint-disable-next-line complexity
 	function inlineStyles(svg) {
 		const clone = /** @type {SVGSVGElement} */ (svg.cloneNode(true))
 		const computed = getComputedStyle(svg)

package/src/PlotState.svelte.js

@@ -191,6 +191,7 @@ export class PlotState {
 	// use it instead of deriving distinct values from the local panel data.
 	colors = $derived.by(() => {
 		const field = this.#effectiveChannels.color
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		if (isLiteralColor(field)) return new Map([[null, { fill: field, stroke: field }]])
 		const values = this.#colorDomain ?? distinct(this.#data, field)
 		// No color channel but data exists → use first preset color for single-series rendering.

package/src/crossfilter/FilterHistogram.svelte

@@ -149,7 +149,7 @@
 	>
 		<g transform="translate({margin.left},{margin.top})">
 			<!-- Y axis ticks -->
-			{#each yTicks as tick}
+			{#each yTicks as tick (tick)}
 				<line
 					x1={0}
 					x2={innerWidth}
@@ -181,7 +181,7 @@
 			/>
 
 			<!-- X axis ticks -->
-			{#each xTicks as tick}
+			{#each xTicks as tick (tick)}
 				<text
 					x={xScale(tick)}
 					y={innerHeight + 12}
@@ -193,7 +193,7 @@
 			{/each}
 
 			<!-- Bars -->
-			{#each binned as b}
+			{#each binned as b (b.x0)}
 				{@const bx = xScale(b.x0) + 1}
 				{@const bw = Math.max(0, xScale(b.x1) - xScale(b.x0) - 1)}
 				{@const by = yScale(b.length)}

package/src/geoms/Hexbin.svelte

@@ -40,9 +40,11 @@
 	const continuousColor = $derived(plotState.continuousColorScale)
 
 	// Hex binning: group data points into hexagonal cells
+	// eslint-disable-next-line max-params, complexity
 	function hexBin(data, xField, yField, xScale, yScale, r) {
 		const dx = r * 2 * Math.sin(Math.PI / 3) // horizontal spacing
 		const dy = r * 1.5                        // vertical spacing
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const bins = new Map()
 
 		for (const d of data) {

package/src/geoms/Ribbon.svelte

@@ -43,6 +43,7 @@
 	const innerWidth = $derived(plotState.innerWidth)
 
 	// Compute Sankey-style layout
+	// eslint-disable-next-line max-lines-per-function, complexity
 	const ribbons = $derived.by(() => {
 		if (!data?.length) return { links: [], sourceNodes: [], targetNodes: [] }
 
@@ -55,7 +56,9 @@
 		}))
 
 		// Compute node positions
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const sourceMap = new Map()
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const targetMap = new Map()
 		for (const f of flows) {
 			sourceMap.set(f.source, (sourceMap.get(f.source) ?? 0) + f.value)
@@ -86,11 +89,14 @@
 		}
 
 		// Build ribbon paths
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const sourceOffsets = new Map(sourceNodes.map((n) => [n.name, n.y]))
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const targetOffsets = new Map(targetNodes.map((n) => [n.name, n.y]))
 		const x0 = 0
 		const x1 = innerWidth
 
+		// eslint-disable-next-line complexity
 		const links = flows.map((f, i) => {
 			const sy0 = sourceOffsets.get(f.source) ?? 0
 			const ty0 = targetOffsets.get(f.target) ?? 0

package/src/geoms/Waterfall.svelte

@@ -42,6 +42,7 @@
 	const xScale = $derived(plotState.xScale)
 	const yScale = $derived(plotState.yScale)
 
+	// eslint-disable-next-line max-lines-per-function
 	const bars = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
 		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10

package/src/lib/keyboard-nav.js

@@ -10,6 +10,7 @@
  * @param {boolean} enabled
  */
 export function keyboardNav(node, enabled) {
+	// eslint-disable-next-line complexity
 	function handleKeydown(e) {
 		if (!enabled) return
 		if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return