@rokkit/chart 1.0.0-next.136 → 1.0.0-next.138

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

@@ -1,9 +1,3 @@
-/**
- * @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
  *
@@ -18,7 +12,7 @@
  */
 export function createXAxis(scales: {
     x: Function;
-}, dimensions: Object, options?: {
+}, dimensions: Object, options: {
     tickCount?: number | undefined;
     tickFormat?: Function | undefined;
     label?: string | undefined;
@@ -37,7 +31,7 @@ export function createXAxis(scales: {
  */
 export function createYAxis(scales: {
     y: Function;
-}, dimensions: Object, options?: {
+}, dimensions: Object, options: {
     tickCount?: number | undefined;
     tickFormat?: Function | undefined;
     label?: string | undefined;
@@ -53,7 +47,7 @@ export function createYAxis(scales: {
  * @param {number} [options.yTickCount] - Number of y-axis ticks
  * @returns {Object} Grid rendering data
  */
-export function createGrid(scales: Object, dimensions: Object, options?: {
+export function createGrid(scales: Object, dimensions: Object, options: {
     direction?: string | undefined;
     xTickCount?: number | undefined;
     yTickCount?: number | undefined;

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

@@ -1,9 +1,3 @@
-/**
- * @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
  *
@@ -16,8 +10,9 @@
  * @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
+ * @param {Object} options - Options including dimensions and defaultColor
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {string} [options.defaultColor='#4682b4'] - Default color if no color scale
  * @returns {BarData[]} Bar data for rendering
  */
 export function createBars(data: any[], fields: {
@@ -28,7 +23,10 @@ export function createBars(data: any[], fields: {
     x: Function;
     y: Function;
     color: Function;
-}, dimensions: Object, defaultColor?: string): BarData[];
+}, options: {
+    dimensions: Object;
+    defaultColor?: string | undefined;
+}): BarData[];
 /**
  * Filter bars based on a selection criteria
  *
@@ -43,11 +41,15 @@ export function filterBars(bars: BarData[], selection: Object): BarData[];
  * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {Object} scales - Chart scales
- * @param {Object} dimensions - Chart dimensions
- * @param {Object} options - Options
+ * @param {Object} options - Options including dimensions and padding
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {number} [options.padding=0.1] - Padding between bars in a group
  * @returns {Object} Grouped bar data
  */
-export function createGroupedBars(data: any[], fields: Object, scales: Object, dimensions: Object, options?: Object): Object;
+export function createGroupedBars(data: any[], fields: Object, scales: Object, options: {
+    dimensions: Object;
+    padding?: number | undefined;
+}): Object;
 export type BarData = import("./types").BarData;
 export type ScaleFields = import("./types").ScaleFields;
 export type ChartScales = import("./types").ChartScales;

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

@@ -1,10 +1,3 @@
-/**
- * @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
  *
@@ -13,8 +6,8 @@
  * @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 {Object} options - Legend options including dimensions
+ * @param {Object} options.dimensions - Chart dimensions
  * @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')
@@ -25,7 +18,8 @@ export function createLegend(data: any[], fields: {
     color: string;
 }, scales: {
     color: Function;
-}, dimensions: Object, options?: {
+}, options: {
+    dimensions: Object;
     title?: string | undefined;
     align?: string | undefined;
     shape?: string | undefined;

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

@@ -1,8 +1,3 @@
-/**
- * @typedef {import('./types').ChartScales} ChartScales
- * @typedef {import('./types').ScaleFields} ScaleFields
- * @typedef {import('./types').ChartDimensions} ChartDimensions
- */
 /**
  * Creates scales based on data, fields, and dimensions
  *

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

@@ -1,21 +1,21 @@
-/**
- * Creates appropriate scales based on data and dimensions
- *
- * @param {Array} data The dataset
- * @param {string} xKey Field to use for x-axis
- * @param {string} yKey Field to use for y-axis
- * @param {Object} dimensions Chart dimensions
- * @param {Object} options Additional options
- * @returns {Object} Object containing xScale, yScale, and colorScale
- */
-export function createScales(data: any[], xKey: string, yKey: string, dimensions: Object, options?: Object): Object;
+export function createScales(data: any, dimensions: any, options: any): {
+    xScale?: undefined;
+    yScale?: undefined;
+    colorScale?: undefined;
+} | {
+    xScale: Object;
+    yScale: any;
+    colorScale: Object | null;
+};
 /**
  * Calculates the actual chart dimensions after applying margins
  *
- * @param {Object} dimensions Original dimensions
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} margin
  * @returns {Object} Dimensions with calculated inner width and height
  */
-export function calculateChartDimensions(width: any, height: any, margin: any): Object;
+export function calculateChartDimensions(width: number, height: number, margin: Object): Object;
 /**
  * Gets the axis origin value
  *

package/dist/lib/utils.d.ts

@@ -2,14 +2,16 @@
  * Creates appropriate scales based on data and dimensions
  *
  * @param {Array} data The dataset
- * @param {string} xKey Field to use for x-axis
- * @param {string} yKey Field to use for y-axis
  * @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[], xKey: string, yKey: string, dimensions: Object, options?: {
+export function createScales(data: any[], dimensions: Object, options?: {
+    xKey: string;
+    yKey: string;
     colorKey?: string | undefined;
 }): Object;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.136",
+  "version": "1.0.0-next.138",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {

package/src/lib/brewing/axes.svelte.js

@@ -9,6 +9,84 @@ import {} from './types.js'
  * @typedef {import('./types').ChartDimensions} ChartDimensions
  */
 
+const IDENTITY = (v) => v
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function xTicksFromContinuous(xScale, tickCount) {
+	return tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks()
+}
+
+/**
+ * @param {Array} domain
+ * @param {number} tickCount
+ * @returns {Array}
+ */
+function downsampleDomain(domain, tickCount) {
+	const step = Math.max(1, Math.floor(domain.length / tickCount))
+	return domain.filter((_, i) => i % step === 0)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function xTicksFromBand(xScale, tickCount) {
+	const domain = xScale.domain()
+	if (tickCount === null || tickCount >= domain.length) return domain
+	return downsampleDomain(domain, tickCount)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function resolveXTicks(xScale, tickCount) {
+	return xScale.ticks ? xTicksFromContinuous(xScale, tickCount) : xTicksFromBand(xScale, tickCount)
+}
+
+/**
+ * @param {Object} xScale
+ * @param {unknown} value
+ * @returns {number}
+ */
+function xPosition(xScale, value) {
+	return xScale.bandwidth ? xScale(value) + xScale.bandwidth() / 2 : xScale(value)
+}
+
+/**
+ * @param {Object} scale
+ * @param {Array} values
+ * @param {Function} formatter
+ * @param {(scale: Object, v: unknown) => number} getPosition
+ * @returns {Array}
+ */
+function mapTicks(scale, values, formatter, getPosition) {
+	return values.map((value) => ({
+		value,
+		position: getPosition(scale, value),
+		formattedValue: formatter(value)
+	}))
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ tickCount: number|null, formatter: Function, label: string }}
+ */
+function parseAxisOptions(options) {
+	const opts = options || {}
+	return {
+		tickCount: opts.tickCount !== undefined ? opts.tickCount : null,
+		formatter: opts.tickFormat ? opts.tickFormat : IDENTITY,
+		label: opts.label ? opts.label : ''
+	}
+}
+
 /**
  * Creates x-axis tick data for rendering
  *
@@ -21,40 +99,10 @@ import {} from './types.js'
  * @param {string} [options.label] - Axis label
  * @returns {AxisData} Axis rendering data
  */
-export function createXAxis(scales, dimensions, options = {}) {
+export function createXAxis(scales, dimensions, options) {
 	if (!scales.x) return { ticks: [] }
-
-	const { tickCount = null, tickFormat = null, label = '' } = options
-	const xScale = scales.x
-
-	// Determine tick values
-	let tickValues
-	if (xScale.ticks) {
-		// For continuous scales (linear, time)
-		tickValues = tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks()
-	} else {
-		// For band scales
-		tickValues = xScale.domain()
-		if (tickCount !== null && tickCount < tickValues.length) {
-			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
-			tickValues = tickValues.filter((_, i) => i % step === 0)
-		}
-	}
-
-	// Format ticks
-	const formatter = tickFormat || ((v) => v)
-
-	// Generate tick data
-	const ticks = tickValues.map((value) => {
-		const position = xScale.bandwidth ? xScale(value) + xScale.bandwidth() / 2 : xScale(value)
-
-		return {
-			value,
-			position,
-			formattedValue: formatter(value)
-		}
-	})
-
+	const { tickCount, formatter, label } = parseAxisOptions(options)
+	const ticks = mapTicks(scales.x, resolveXTicks(scales.x, tickCount), formatter, xPosition)
 	return {
 		ticks,
 		label,
@@ -63,6 +111,37 @@ export function createXAxis(scales, dimensions, options = {}) {
 	}
 }
 
+/**
+ * @param {Object} yScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function yTicksFromDomain(yScale, tickCount) {
+	const domain = yScale.domain()
+	if (tickCount === null || domain.length <= tickCount) return domain
+	return downsampleDomain(domain, tickCount)
+}
+
+/**
+ * @param {Object} yScale
+ * @param {number|null} tickCount
+ * @returns {Array}
+ */
+function resolveYTicks(yScale, tickCount) {
+	if (yScale.ticks) return tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks()
+	if (yScale.domain) return yTicksFromDomain(yScale, tickCount)
+	return []
+}
+
+/**
+ * @param {Object} scale
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+function yPositionPassthrough(scale, value) {
+	return scale(value)
+}
+
 /**
  * Creates y-axis tick data for rendering
  *
@@ -75,40 +154,69 @@ export function createXAxis(scales, dimensions, options = {}) {
  * @param {string} [options.label] - Axis label
  * @returns {AxisData} Axis rendering data
  */
-export function createYAxis(scales, dimensions, options = {}) {
+export function createYAxis(scales, dimensions, options) {
 	if (!scales.y) return { ticks: [] }
-
-	const { tickCount = null, tickFormat = null, label = '' } = options
-	const yScale = scales.y
-
-	// Determine tick values
-	let tickValues = []
-
-	if (yScale.ticks) {
-		tickValues = tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks()
-	} else if (yScale.domain) {
-		tickValues = yScale.domain()
-		if (tickCount !== null && tickValues.length > tickCount) {
-			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
-			tickValues = tickValues.filter((_, i) => i % step === 0)
-		}
+	const { tickCount, formatter, label } = parseAxisOptions(options)
+	const ticks = mapTicks(scales.y, resolveYTicks(scales.y, tickCount), formatter, yPositionPassthrough)
+	return {
+		ticks,
+		label,
+		transform: 'translate(0, 0)',
+		labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
 	}
+}
 
-	// Format ticks
-	const formatter = tickFormat || ((v) => v)
+/**
+ * @param {Object} scales
+ * @param {Object} dimensions
+ * @param {number|null} xTickCount
+ * @returns {Array}
+ */
+function buildXLines(scales, dimensions, xTickCount) {
+	return createXAxis(scales, dimensions, { tickCount: xTickCount }).ticks.map((tick) => ({
+		x1: tick.position,
+		y1: 0,
+		x2: tick.position,
+		y2: dimensions.innerHeight
+	}))
+}
 
-	// Generate tick data
-	const ticks = tickValues.map((value) => ({
-		value,
-		position: yScale(value),
-		formattedValue: formatter(value)
+/**
+ * @param {Object} scales
+ * @param {Object} dimensions
+ * @param {number|null} yTickCount
+ * @returns {Array}
+ */
+function buildYLines(scales, dimensions, yTickCount) {
+	return createYAxis(scales, dimensions, { tickCount: yTickCount }).ticks.map((tick) => ({
+		x1: 0,
+		y1: tick.position,
+		x2: dimensions.innerWidth,
+		y2: tick.position
 	}))
+}
 
+/**
+ * @param {Object} opts
+ * @returns {{ direction: string, xTickCount: number|null, yTickCount: number|null }}
+ */
+function parseGridOptions(opts) {
+	const o = opts || {}
 	return {
-		ticks,
-		label,
-		transform: 'translate(0, 0)',
-		labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
+		direction: o.direction !== undefined ? o.direction : 'both',
+		xTickCount: o.xTickCount !== undefined ? o.xTickCount : null,
+		yTickCount: o.yTickCount !== undefined ? o.yTickCount : null
+	}
+}
+
+/**
+ * @param {string} direction
+ * @returns {{ showX: boolean, showY: boolean }}
+ */
+function gridDirections(direction) {
+	return {
+		showX: direction === 'x' || direction === 'both',
+		showY: direction === 'y' || direction === 'both'
 	}
 }
 
@@ -123,33 +231,13 @@ export function createYAxis(scales, dimensions, options = {}) {
  * @param {number} [options.yTickCount] - Number of y-axis ticks
  * @returns {Object} Grid rendering data
  */
-export function createGrid(scales, dimensions, options = {}) {
-	const { direction = 'both', xTickCount = null, yTickCount = null } = options
-	const result = { xLines: [], yLines: [] }
-
-	// Generate X grid lines (vertical)
-	if ((direction === 'x' || direction === 'both') && scales.x) {
-		const xAxis = createXAxis(scales, dimensions, { tickCount: xTickCount })
-		result.xLines = xAxis.ticks.map((tick) => ({
-			x1: tick.position,
-			y1: 0,
-			x2: tick.position,
-			y2: dimensions.innerHeight
-		}))
-	}
-
-	// Generate Y grid lines (horizontal)
-	if ((direction === 'y' || direction === 'both') && scales.y) {
-		const yAxis = createYAxis(scales, dimensions, { tickCount: yTickCount })
-		result.yLines = yAxis.ticks.map((tick) => ({
-			x1: 0,
-			y1: tick.position,
-			x2: dimensions.innerWidth,
-			y2: tick.position
-		}))
+export function createGrid(scales, dimensions, options) {
+	const { direction, xTickCount, yTickCount } = parseGridOptions(options)
+	const { showX, showY } = gridDirections(direction)
+	return {
+		xLines: showX && scales.x ? buildXLines(scales, dimensions, xTickCount) : [],
+		yLines: showY && scales.y ? buildYLines(scales, dimensions, yTickCount) : []
 	}
-
-	return result
 }
 
 /**