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

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

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity'
 import {} from './types.js'
 
 /**
@@ -7,6 +8,45 @@ import {} from './types.js'
  * @typedef {import('./types').ChartDimensions} ChartDimensions
  */
 
+const DEFAULT_COLOR = '#4682b4'
+
+/**
+ * @param {Object} d - data item
+ * @param {{ fields: Object, scales: Object, dimensions: Object, defaultColor: string }} ctx
+ * @returns {BarData}
+ */
+function buildBar(d, ctx) {
+	const { fields, scales, dimensions, defaultColor } = ctx
+	const { x: xField, y: yField, color: colorField } = fields
+	const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10
+	const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2
+	return {
+		data: d,
+		x: barX,
+		y: scales.y(d[yField]),
+		width: barWidth,
+		height: dimensions.innerHeight - scales.y(d[yField]),
+		color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
+	}
+}
+
+/**
+ * @param {Object} options
+ * @param {Object} fields
+ * @param {Object} scales
+ * @returns {{ ctx: Object }|null} null if input is invalid
+ */
+function parseBarsInput(options, fields, scales) {
+	if (!scales.x || !scales.y) return null
+	const opts = options || {}
+	return {
+		fields,
+		scales,
+		dimensions: opts.dimensions,
+		defaultColor: opts.defaultColor !== undefined ? opts.defaultColor : DEFAULT_COLOR
+	}
+}
+
 /**
  * Creates bar data for rendering
  *
@@ -19,28 +59,16 @@ import {} from './types.js'
  * @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, fields, scales, dimensions, defaultColor = '#4682b4') {
-	if (!data || data.length === 0 || !scales.x || !scales.y) return []
-
-	const { x: xField, y: yField, color: colorField } = fields
-
-	return data.map((d) => {
-		const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10
-		const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2
-
-		return {
-			data: d,
-			x: barX,
-			y: scales.y(d[yField]),
-			width: barWidth,
-			height: dimensions.innerHeight - scales.y(d[yField]),
-			color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
-		}
-	})
+export function createBars(data, fields, scales, options) {
+	if (!data || !data.length) return []
+	const ctx = parseBarsInput(options, fields, scales)
+	if (!ctx) return []
+	return data.map((d) => buildBar(d, ctx))
 }
 
 /**
@@ -61,52 +89,87 @@ export function filterBars(bars, selection) {
 	})
 }
 
+/**
+ * @param {Object} item - data item
+ * @param {Object} scales - chart scales
+ * @param {{ yField: string, colorField: string, group: unknown, barX: number, barWidth: number, dimensions: Object }} ctx
+ * @returns {BarData}
+ */
+function buildGroupBar(item, scales, ctx) {
+	const { yField, colorField, group, barX, barWidth, dimensions } = ctx
+	return {
+		data: item,
+		group,
+		x: barX,
+		y: scales.y(item[yField]),
+		width: barWidth,
+		height: dimensions.innerHeight - scales.y(item[yField]),
+		color: scales.color ? scales.color(item[colorField]) : DEFAULT_COLOR
+	}
+}
+
+/**
+ * @param {Object} scales
+ * @param {{ groupItems: Array, groupField: string, group: unknown, i: number, yField: string, colorField: string, barWidth: number, padding: number, dimensions: Object, xPos: number }} ctx
+ * @returns {BarData|null}
+ */
+function buildOneGroupBar(scales, ctx) {
+	const { groupItems, groupField, group, i, yField, colorField, barWidth, padding, dimensions, xPos } = ctx
+	const item = groupItems.find((d) => d[groupField] === group)
+	if (!item) return null
+	const barX = xPos + i * (barWidth + padding)
+	return buildGroupBar(item, scales, { yField, colorField, group, barX, barWidth, dimensions })
+}
+
+/**
+ * @param {Object} fields
+ * @param {Object} options
+ * @returns {{ xField: string, yField: string, groupField: string, colorField: string, dimensions: Object, padding: number }}
+ */
+function parseGroupedBarsConfig(fields, options) {
+	const opts = options || {}
+	return {
+		xField: fields.x,
+		yField: fields.y,
+		groupField: fields.group,
+		colorField: fields.color !== undefined ? fields.color : fields.group,
+		dimensions: opts.dimensions,
+		padding: opts.padding !== undefined ? opts.padding : 0.1
+	}
+}
+
 /**
  * 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
+ * @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, fields, scales, dimensions, options = {}) {
-	if (!data || data.length === 0 || !fields.group) return { groups: [], bars: [] }
+export function createGroupedBars(data, fields, scales, options) {
+	if (!data || !data.length || !fields.group) return { groups: [], bars: [] }
 
-	const { x: xField, y: yField, group: groupField, color: colorField = groupField } = fields
-	const { padding = 0.1 } = options
+	const { xField, yField, groupField, colorField, dimensions, padding } =
+		parseGroupedBarsConfig(fields, options)
 
-	// Get unique groups and x values
-	const groups = [...new Set(data.map((d) => d[groupField]))]
-	const xValues = [...new Set(data.map((d) => d[xField]))]
+	const groups = [...new SvelteSet(data.map((d) => d[groupField]))]
+	const xValues = [...new SvelteSet(data.map((d) => d[xField]))]
 
-	// Calculate group width and individual bar width
 	const xScale = scales.x
 	const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20
 	const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length
 
-	// Create bars for each group
 	const bars = []
-
 	xValues.forEach((xValue) => {
 		const groupItems = data.filter((d) => d[xField] === xValue)
 		const xPos = xScale(xValue)
-
 		groups.forEach((group, i) => {
-			const item = groupItems.find((d) => d[groupField] === group)
-			if (!item) return
-
-			const barX = xPos + i * (barWidth + padding)
-			bars.push({
-				data: item,
-				group,
-				x: barX,
-				y: scales.y(item[yField]),
-				width: barWidth,
-				height: dimensions.innerHeight - scales.y(item[yField]),
-				color: scales.color ? scales.color(item[colorField]) : '#4682b4'
-			})
+			const ctx = { groupItems, groupField, group, i, yField, colorField, barWidth, padding, dimensions, xPos }
+			const bar = buildOneGroupBar(scales, ctx)
+			if (bar) bars.push(bar)
 		})
 	})
 

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

@@ -112,7 +112,7 @@ export class ChartBrewer {
 	 * @returns {Array} Data for rendering bars
 	 */
 	createBars() {
-		return createBars(this.#data, this.#fields, this.#scales, this.#dimensions)
+		return createBars(this.#data, this.#fields, this.#scales, { dimensions: this.#dimensions })
 	}
 
 	/**
@@ -152,7 +152,10 @@ export class ChartBrewer {
 	 * @returns {Object} Legend rendering data
 	 */
 	createLegend(options = {}) {
-		return createLegend(this.#data, this.#fields, this.#scales, this.#dimensions, options)
+		return createLegend(this.#data, this.#fields, this.#scales, {
+			...options,
+			dimensions: this.#dimensions
+		})
 	}
 
 	/**

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

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity'
 import {} from './types.js'
 
 /**
@@ -8,6 +9,70 @@ import {} from './types.js'
  * @typedef {import('./types').ChartDimensions} ChartDimensions
  */
 
+const LEGEND_DEFAULTS = { title: '', align: 'right', shape: 'rect', markerSize: 10 }
+
+/**
+ * Compute the x-position for legend alignment
+ * @param {string} align
+ * @param {number} innerWidth
+ * @param {number} approximateWidth
+ * @returns {number}
+ */
+function legendX(align, innerWidth, approximateWidth) {
+	if (align === 'right') return innerWidth - approximateWidth
+	if (align === 'center') return (innerWidth - approximateWidth) / 2
+	return 0
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {Function} colorScale
+ * @param {{ shape: string, markerSize: number, titleOffset: number }} style
+ * @returns {LegendItem[]}
+ */
+function buildLegendItems(colorValues, colorScale, style) {
+	const { shape, markerSize, titleOffset } = style
+	return colorValues.map((value, index) => ({
+		value,
+		color: colorScale(value),
+		y: index * (markerSize + 5) + titleOffset,
+		shape,
+		markerSize
+	}))
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {number} markerSize
+ * @returns {number}
+ */
+function approximateLegendWidth(colorValues, markerSize) {
+	return Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ dimensions: Object, title: string, align: string, shape: string, markerSize: number }}
+ */
+function parseLegendOptions(options) {
+	const merged = Object.assign({}, LEGEND_DEFAULTS, options || {})
+	return {
+		dimensions: merged.dimensions,
+		title: merged.title,
+		align: merged.align,
+		shape: merged.shape,
+		markerSize: merged.markerSize
+	}
+}
+
+/**
+ * @param {Object|undefined} dimensions
+ * @returns {number}
+ */
+function innerWidth(dimensions) {
+	return dimensions ? dimensions.innerWidth : 0
+}
+
 /**
  * Creates legend data for rendering
  *
@@ -16,50 +81,28 @@ import {} from './types.js'
  * @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')
  * @param {number} [options.markerSize=10] - Size of legend markers
  * @returns {LegendData} Legend rendering data
  */
-export function createLegend(data, fields, scales, dimensions, options = {}) {
+export function createLegend(data, fields, scales, options) {
 	if (!data || !fields.color || !scales.color) {
 		return { items: [], title: '', transform: 'translate(0, 0)' }
 	}
 
-	const { title = '', align = 'right', shape = 'rect', markerSize = 10 } = options
+	const { dimensions, title, align, shape, markerSize } = parseLegendOptions(options)
+	const colorValues = [...new SvelteSet(data.map((d) => d[fields.color]))]
+	const titleOffset = title ? 15 : 0
+	const style = { shape, markerSize, titleOffset }
+	const items = buildLegendItems(colorValues, scales.color, style)
+	const approxWidth = approximateLegendWidth(colorValues, markerSize)
+	const x = legendX(align, innerWidth(dimensions), approxWidth)
 
-	// Get unique color values
-	const colorValues = [...new Set(data.map((d) => d[fields.color]))]
-
-	// Create legend items
-	const items = colorValues.map((value, index) => ({
-		value,
-		color: scales.color(value),
-		y: index * (markerSize + 5) + (title ? 15 : 0),
-		shape,
-		markerSize
-	}))
-
-	// Calculate approximate width for alignment
-	const approximateWidth =
-		Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
-
-	// Calculate position based on alignment
-	let x = 0
-	if (align === 'right') {
-		x = dimensions.innerWidth - approximateWidth
-	} else if (align === 'center') {
-		x = (dimensions.innerWidth - approximateWidth) / 2
-	}
-
-	return {
-		items,
-		title,
-		transform: `translate(${x}, 0)`
-	}
+	return { items, title, transform: `translate(${x}, 0)` }
 }
 
 /**

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

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity'
 import { min, max } from 'd3-array'
 import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
 import { schemeCategory10 } from 'd3-scale-chromatic'
@@ -10,64 +11,84 @@ import {} from './types.js'
  */
 
 /**
- * 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
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
  */
-export function createScales(data, fields, dimensions, options = {}) {
-	const scales = {
-		x: null,
-		y: null,
-		color: null
-	}
-
-	if (!data || data.length === 0 || !fields.x || !fields.y) {
-		return scales
-	}
-
-	const padding = options.padding !== undefined ? options.padding : 0.2
-
-	// Extract values
-	const xValues = data.map((d) => d[fields.x])
-	const yValues = data.map((d) => d[fields.y])
-
-	// Determine x scale type
+function buildXScale(xValues, dimensions, padding) {
 	const xIsDate = xValues.some((v) => v instanceof Date)
 	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
 
-	// Create x scale based on data type
 	if (xIsDate) {
-		scales.x = scaleTime()
+		return scaleTime()
 			.domain([min(xValues), max(xValues)])
 			.range([0, dimensions.innerWidth])
 			.nice()
-	} else if (xIsNumeric) {
-		scales.x = scaleLinear()
+	}
+	if (xIsNumeric) {
+		return scaleLinear()
 			.domain([min([0, ...xValues]), max(xValues)])
 			.range([0, dimensions.innerWidth])
 			.nice()
-	} else {
-		scales.x = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
 	}
+	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+}
 
-	// Create y scale
-	scales.y = scaleLinear()
-		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
+/**
+ * @param {Array} data
+ * @param {string} colorField
+ * @returns {import('d3-scale').ScaleOrdinal}
+ */
+function buildColorScale(data, colorField) {
+	const colorValues = [...new SvelteSet(data.map((d) => d[colorField]))]
+	return scaleOrdinal().domain(colorValues).range(schemeCategory10)
+}
+
+/**
+ * @param {Array} data
+ * @param {string} yField
+ * @param {Object} dimensions
+ * @returns {import('d3-scale').ScaleContinuousNumeric}
+ */
+function buildYScale(data, yField, dimensions) {
+	const yValues = data.map((d) => d[yField])
+	return scaleLinear()
+		.domain([0, max(yValues) * 1.1])
 		.nice()
 		.range([dimensions.innerHeight, 0])
+}
 
-	// Create color scale if color field is set
-	if (fields.color) {
-		const colorValues = [...new Set(data.map((d) => d[fields.color]))]
-		scales.color = scaleOrdinal().domain(colorValues).range(schemeCategory10)
-	}
+/**
+ * @param {Array} data
+ * @param {ScaleFields} fields
+ * @returns {boolean}
+ */
+function hasRequiredFields(data, fields) {
+	return Boolean(data && data.length && fields.x && fields.y)
+}
+
+/**
+ * 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, fields, dimensions, options = {}) {
+	if (!hasRequiredFields(data, fields)) return { x: null, y: null, color: null }
+
+	const padding = options.padding ?? 0.2
+	const xValues = data.map((d) => d[fields.x])
 
-	return scales
+	return {
+		x: buildXScale(xValues, dimensions, padding),
+		y: buildYScale(data, fields.y, dimensions),
+		color: fields.color ? buildColorScale(data, fields.color) : null
+	}
 }
 
 /**

package/src/lib/context.js

@@ -4,80 +4,62 @@ import * as d3 from 'd3'
 
 const CHART_CONTEXT = 'chart-context'
 
+const DEFAULT_OPTIONS = {
+	width: 600,
+	height: 400,
+	margin: { top: 20, right: 30, bottom: 40, left: 50 },
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+	responsive: true,
+	animationDuration: 300,
+	data: []
+}
+
 /**
- * Creates chart context and provides it to child components
- *
- * @param {Object} options Initial chart options
- * @returns {Object} Chart context with all stores and methods
+ * @param {Object} config
+ * @returns {import('svelte/store').Writable}
  */
-export function createChartContext(options = {}) {
-	// Default config values
-	const defaultOptions = {
-		width: 600,
-		height: 400,
-		margin: { top: 20, right: 30, bottom: 40, left: 50 },
-		padding: { top: 0, right: 0, bottom: 0, left: 0 },
-		responsive: true,
-		animationDuration: 300,
-		data: []
-	}
-
-	// Merge options with defaults
-	const config = { ...defaultOptions, ...options }
-
-	// Create stores for reactive properties
-	const dimensions = writable({
+function createDimensionsStore(config) {
+	return writable({
 		width: config.width,
 		height: config.height,
 		margin: { ...config.margin },
 		padding: { ...config.padding }
 	})
+}
 
-	const data = writable(config.data)
-	const scales = writable({})
-
-	// Compute inner dimensions (subtracting margins)
-	const innerDimensions = derived(dimensions, ($dimensions) => {
-		return {
-			width:
-				$dimensions.width -
-				$dimensions.margin.left -
-				$dimensions.margin.right -
-				$dimensions.padding.left -
-				$dimensions.padding.right,
-			height:
-				$dimensions.height -
-				$dimensions.margin.top -
-				$dimensions.margin.bottom -
-				$dimensions.padding.top -
-				$dimensions.padding.bottom
-		}
-	})
-
-	// Store for plot elements (bars, lines, etc.)
-	const plots = writable([])
-
-	// Store for axes
-	const axes = writable({
-		x: null,
-		y: null
-	})
-
-	const legend = writable({
-		enabled: false,
-		items: []
-	})
+/**
+ * @param {import('svelte/store').Writable} dimensions
+ * @returns {import('svelte/store').Readable}
+ */
+function createInnerDimensions(dimensions) {
+	return derived(dimensions, ($d) => ({
+		width:
+			$d.width - $d.margin.left - $d.margin.right - $d.padding.left - $d.padding.right,
+		height:
+			$d.height - $d.margin.top - $d.margin.bottom - $d.padding.top - $d.padding.bottom
+	}))
+}
 
-	// Helper to add a new plot
-	function addPlot(plot) {
+/**
+ * @param {import('svelte/store').Writable} plots
+ * @returns {(plot: unknown) => () => void}
+ */
+function makeAddPlot(plots) {
+	return function addPlot(plot) {
 		plots.update((currentPlots) => [...currentPlots, plot])
 		return () => {
 			plots.update((currentPlots) => currentPlots.filter((p) => p !== plot))
 		}
 	}
+}
 
-	// Helper to update scales based on data and dimensions
-	function updateScales(xKey, yKey, colorKey = null) {
+/**
+ * @param {import('svelte/store').Writable} data
+ * @param {import('svelte/store').Readable} innerDimensions
+ * @returns {(xKey: string, yKey: string, colorKey?: string|null) => import('svelte/store').Readable}
+ */
+function makeUpdateScales(data, innerDimensions) {
+	return function updateScales(xKey, yKey, colorKey = null) {
 		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
 			if (!$data || $data.length === 0) return null
 
@@ -94,7 +76,6 @@ export function createChartContext(options = {}) {
 				.range([$innerDimensions.height, 0])
 
 			let colorScale = null
-
 			if (colorKey) {
 				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
 				colorScale = d3.scaleOrdinal().domain(uniqueCategories).range(d3.schemeCategory10)
@@ -103,8 +84,28 @@ export function createChartContext(options = {}) {
 			return { xScale, yScale, colorScale }
 		})
 	}
+}
+
+/**
+ * Creates chart context and provides it to child components
+ *
+ * @param {Object} options Initial chart options
+ * @returns {Object} Chart context with all stores and methods
+ */
+export function createChartContext(options = {}) {
+	const config = { ...DEFAULT_OPTIONS, ...options }
+
+	const dimensions = createDimensionsStore(config)
+	const data = writable(config.data)
+	const scales = writable({})
+	const innerDimensions = createInnerDimensions(dimensions)
+	const plots = writable([])
+	const axes = writable({ x: null, y: null })
+	const legend = writable({ enabled: false, items: [] })
+
+	const addPlot = makeAddPlot(plots)
+	const updateScales = makeUpdateScales(data, innerDimensions)
 
-	// Create and set context
 	const chartContext = {
 		dimensions,
 		innerDimensions,