@rokkit/chart 1.0.0-next.14 → 1.0.0-next.140

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

@@ -0,0 +1,137 @@
+import { SvelteSet } from 'svelte/reactivity'
+import {} from './types.js'
+
+/**
+ * @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
+ */
+
+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
+ *
+ * @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} 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, options) {
+	if (!data || !fields.color || !scales.color) {
+		return { items: [], title: '', transform: 'translate(0, 0)' }
+	}
+
+	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)
+
+	return { items, title, transform: `translate(${x}, 0)` }
+}
+
+/**
+ * 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, colorField, selectedValues) {
+	if (!selectedValues || selectedValues.length === 0) {
+		return data
+	}
+
+	return data.filter((d) => selectedValues.includes(d[colorField]))
+}
+
+/**
+ * Create attributes for legend items
+ *
+ * @param {LegendItem} item - Legend item
+ * @returns {Object} Attributes for the legend item
+ */
+export function createLegendItemAttributes(item) {
+	return {
+		'data-plot-legend-item': '',
+		transform: `translate(0, ${item.y})`,
+		role: 'img',
+		'aria-label': `Legend item for ${item.value}`
+	}
+}

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

@@ -0,0 +1,106 @@
+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'
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
+ */
+function buildXScale(xValues, dimensions, padding) {
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	if (xIsDate) {
+		return scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	if (xIsNumeric) {
+		return scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+}
+
+/**
+ * @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])
+}
+
+/**
+ * @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 {
+		x: buildXScale(xValues, dimensions, padding),
+		y: buildYScale(data, fields.y, dimensions),
+		color: fields.color ? buildColorScale(data, fields.color) : null
+	}
+}
+
+/**
+ * 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, dimensions) {
+	return {
+		x: scales.y ? scales.y(0) : dimensions.innerHeight,
+		y: scales.x ? (scales.x.ticks ? scales.x(Math.max(0, min(scales.x.domain()))) : 0) : 0
+	}
+}

package/src/lib/brewing/types.js

@@ -0,0 +1,73 @@
+/**
+ * @typedef {Object} ChartMargin
+ * @property {number} top - Top margin
+ * @property {number} right - Right margin
+ * @property {number} bottom - Bottom margin
+ * @property {number} left - Left margin
+ */
+
+/**
+ * @typedef {Object} ChartDimensions
+ * @property {number} width - Total chart width
+ * @property {number} height - Total chart height
+ * @property {ChartMargin} margin - Chart margins
+ * @property {number} innerWidth - Chart width without margins
+ * @property {number} innerHeight - Chart height without margins
+ */
+
+/**
+ * @typedef {Object} ChartScales
+ * @property {Function} x - X-axis scale function
+ * @property {Function} y - Y-axis scale function
+ * @property {Function} color - Color scale function
+ */
+
+/**
+ * @typedef {Object} ScaleFields
+ * @property {string} x - X-axis field
+ * @property {string} y - Y-axis field
+ * @property {string} color - Color field
+ */
+
+/**
+ * @typedef {Object} TickData
+ * @property {*} value - Tick value
+ * @property {number} position - Tick position in pixels
+ * @property {string} formattedValue - Formatted tick label
+ */
+
+/**
+ * @typedef {Object} AxisData
+ * @property {TickData[]} ticks - Tick data
+ * @property {string} label - Axis label
+ * @property {string} transform - SVG transform attribute value
+ * @property {string} labelTransform - SVG transform for the label
+ */
+
+/**
+ * @typedef {Object} BarData
+ * @property {Object} data - Original data point
+ * @property {number} x - X position
+ * @property {number} y - Y position
+ * @property {number} width - Width of the bar
+ * @property {number} height - Height of the bar
+ * @property {string} color - Color of the bar
+ */
+
+/**
+ * @typedef {Object} LegendItem
+ * @property {*} value - Legend item value
+ * @property {string} color - Item color
+ * @property {number} y - Y position
+ * @property {string} shape - Shape type ('rect' or 'circle')
+ * @property {number} markerSize - Size of the marker
+ */
+
+/**
+ * @typedef {Object} LegendData
+ * @property {LegendItem[]} items - Legend items
+ * @property {string} title - Legend title
+ * @property {string} transform - SVG transform attribute value
+ */
+
+export {}

package/src/lib/context.js

@@ -0,0 +1,133 @@
+import { getContext, setContext } from 'svelte'
+import { writable, derived } from 'svelte/store'
+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: []
+}
+
+/**
+ * @param {Object} config
+ * @returns {import('svelte/store').Writable}
+ */
+function createDimensionsStore(config) {
+	return writable({
+		width: config.width,
+		height: config.height,
+		margin: { ...config.margin },
+		padding: { ...config.padding }
+	})
+}
+
+/**
+ * @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
+	}))
+}
+
+/**
+ * @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))
+		}
+	}
+}
+
+/**
+ * @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
+
+			const xScale = d3
+				.scaleBand()
+				.domain($data.map((d) => d[xKey]))
+				.range([0, $innerDimensions.width])
+				.padding(0.2)
+
+			const yScale = d3
+				.scaleLinear()
+				.domain([0, d3.max($data, (d) => d[yKey])])
+				.nice()
+				.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)
+			}
+
+			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)
+
+	const chartContext = {
+		dimensions,
+		innerDimensions,
+		data,
+		scales,
+		plots,
+		axes,
+		legend,
+		addPlot,
+		updateScales
+	}
+
+	setContext(CHART_CONTEXT, chartContext)
+
+	return chartContext
+}
+
+/**
+ * Gets chart context provided by parent component
+ *
+ * @returns {Object} Chart context
+ */
+export function getChartContext() {
+	return getContext(CHART_CONTEXT)
+}

package/src/lib/scales.svelte.js

@@ -0,0 +1,172 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { min, max } from 'd3-array'
+
+/**
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {Object}
+ */
+function buildXScale(xValues, dimensions, padding) {
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	if (xIsDate) {
+		return scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	if (xIsNumeric) {
+		return scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	}
+	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+}
+
+/**
+ * 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
+ * @param {number} [options.padding=0.2] Padding for band scales
+ * @returns {Object} Object containing xScale, yScale, and colorScale
+ */
+/**
+ * @param {Array} data
+ * @param {string} colorKey
+ * @returns {Object}
+ */
+function buildColorScale(data, colorKey) {
+	const uniqueCategories = [...new SvelteSet(data.map((d) => d[colorKey]))]
+	return scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ xKey: string, yKey: string, colorKey: string|undefined, padding: number }}
+ */
+function parseScaleOptions(options) {
+	const opts = options || {}
+	return {
+		xKey: opts.xKey,
+		yKey: opts.yKey,
+		colorKey: opts.colorKey,
+		padding: opts.padding !== undefined ? opts.padding : 0.2
+	}
+}
+
+export function createScales(data, dimensions, options) {
+	if (!data || !data.length) return {}
+
+	const { xKey, yKey, colorKey, padding } = parseScaleOptions(options)
+	const xValues = data.map((d) => d[xKey])
+	const yValues = data.map((d) => d[yKey])
+	const colorScale = colorKey ? buildColorScale(data, colorKey) : null
+
+	return {
+		xScale: buildXScale(xValues, dimensions, padding),
+		yScale: scaleLinear().domain([0, max(yValues) * 1.1]).nice().range([dimensions.innerHeight, 0]),
+		colorScale
+	}
+}
+
+/**
+ * Calculates the actual chart dimensions after applying margins
+ *
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} margin
+ * @returns {Object} Dimensions with calculated inner width and height
+ */
+export function calculateChartDimensions(width, height, margin) {
+	return {
+		width,
+		height,
+		margin,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
+}
+
+/**
+ * Gets the axis origin value
+ *
+ * @param {Object} scale D3 scale
+ * @returns {number} Origin value
+ */
+export function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, min(scale.domain()))) : scale.range()[0]
+}
+
+/**
+ * Resolve tick values for a band scale, applying downsampling when needed
+ * @param {Object} scale
+ * @param {number} count
+ * @returns {{ ticks: Array, offset: number }}
+ */
+function bandTicks(scale, count) {
+	const offset = scale.bandwidth() / 2
+	const domain = scale.domain()
+	const cappedCount = Math.min(Math.round(count), domain.length)
+	const step = Math.ceil(domain.length / cappedCount)
+	const ticks = cappedCount < domain.length ? domain.filter((_, i) => i % step === 0) : domain
+	return { ticks, offset }
+}
+
+/**
+ * @param {number} rangeSize
+ * @param {string} axis
+ * @param {number} fontSize
+ * @returns {number}
+ */
+function defaultTickCount(rangeSize, axis, fontSize) {
+	const divisor = fontSize * (axis === 'y' ? 3 : 6)
+	return Math.abs(rangeSize / divisor)
+}
+
+/**
+ * @param {Array} ticks
+ * @param {Object} scale
+ * @param {number} offset
+ * @param {boolean} isXAxis
+ * @returns {Array}
+ */
+function formatTicks(ticks, scale, offset, isXAxis) {
+	const pos = isXAxis ? offset : 0
+	return ticks.map((t) => ({ value: t, position: scale(t) + pos }))
+}
+
+/**
+ * Creates axis ticks
+ *
+ * @param {Object} scale D3 scale
+ * @param {string} axis Axis type ('x' or 'y')
+ * @param {number} count Number of ticks
+ * @param {number} fontSize Font size for determining tick density
+ * @returns {Array} Array of tick objects
+ */
+export function createTicks(scale, axis, count = null, fontSize = 12) {
+	const [minRange, maxRange] = scale.range()
+	const tickCount = count ?? defaultTickCount(maxRange - minRange, axis, fontSize)
+
+	let ticks, offset
+	if (scale.ticks) {
+		ticks = scale.ticks(Math.round(tickCount))
+		offset = 0
+	} else {
+		const band = bandTicks(scale, tickCount)
+		ticks = band.ticks
+		offset = band.offset
+	}
+
+	return formatTicks(ticks, scale, offset, axis === 'x')
+}