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

package/src/lib/scales.svelte.js

@@ -1,64 +1,90 @@
+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'
 
 /**
- * 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
+ * @param {Array} xValues
+ * @param {Object} dimensions
+ * @param {number} padding
+ * @returns {Object}
  */
-export function createScales(data, xKey, yKey, dimensions, options = {}) {
-	if (!data || data.length === 0) return {}
-
-	const { colorKey = null, padding = 0.2 } = options
-
-	// Determine if x values are numeric, dates, or categorical
-	const xValues = data.map((d) => d[xKey])
+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
-	let xScale
 	if (xIsDate) {
-		xScale = scaleTime()
+		return scaleTime()
 			.domain([min(xValues), max(xValues)])
 			.range([0, dimensions.innerWidth])
 			.nice()
-	} else if (xIsNumeric) {
-		xScale = scaleLinear()
+	}
+	if (xIsNumeric) {
+		return scaleLinear()
 			.domain([min([0, ...xValues]), max(xValues)])
 			.range([0, dimensions.innerWidth])
 			.nice()
-	} else {
-		xScale = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
 	}
+	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+}
 
-	// Create y-scale
-	const yValues = data.map((d) => d[yKey])
-	const yScale = scaleLinear()
-		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
-		.nice()
-		.range([dimensions.innerHeight, 0])
+/**
+ * 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)
+}
 
-	// Create color scale if colorKey is provided
-	let colorScale = null
-	if (colorKey) {
-		const uniqueCategories = [...new Set(data.map((d) => d[colorKey]))]
-		colorScale = 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, yScale, colorScale }
+	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 {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, height, margin) {
@@ -81,6 +107,44 @@ 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
  *
@@ -92,31 +156,17 @@ export function getOriginValue(scale) {
  */
 export function createTicks(scale, axis, count = null, fontSize = 12) {
 	const [minRange, maxRange] = scale.range()
-	let ticks = []
-	let offset = 0
+	const tickCount = count ?? defaultTickCount(maxRange - minRange, axis, fontSize)
 
-	// Calculate default count based on available space
-	if (!count) {
-		count = Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 3 : 6)))
-	}
-
-	// Get ticks based on scale type
+	let ticks, offset
 	if (scale.ticks) {
-		ticks = scale.ticks(Math.round(count))
+		ticks = scale.ticks(Math.round(tickCount))
+		offset = 0
 	} else {
-		offset = scale.bandwidth() / 2
-		count = Math.min(Math.round(count), scale.domain().length)
-
-		ticks = scale.domain()
-		if (count < scale.domain().length) {
-			const step = Math.ceil(scale.domain().length / count)
-			ticks = ticks.filter((_, i) => i % step === 0)
-		}
+		const band = bandTicks(scale, tickCount)
+		ticks = band.ticks
+		offset = band.offset
 	}
 
-	// Format ticks with positions
-	return ticks.map((t) => ({
-		value: t,
-		position: scale(t) + (axis === 'x' ? offset : 0)
-	}))
+	return formatTicks(ticks, scale, offset, axis === 'x')
 }

package/src/lib/utils.js

@@ -6,16 +6,18 @@ import { max } from 'd3-array'
  * 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, xKey, yKey, dimensions, options = {}) {
+export function createScales(data, dimensions, options = {}) {
 	if (!data || data.length === 0) return {}
 
+	const { xKey, yKey, colorKey } = options
+
 	const xScale = scaleBand()
 		.domain(data.map((d) => d[xKey]))
 		.range([0, dimensions.width])
@@ -28,8 +30,8 @@ export function createScales(data, xKey, yKey, dimensions, options = {}) {
 
 	let colorScale = null
 
-	if (options.colorKey) {
-		const uniqueCategories = [...new Set(data.map((d) => d[options.colorKey]))]
+	if (colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[colorKey]))]
 		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
 	}
 
@@ -84,6 +86,18 @@ export function uniqueId(prefix = 'chart') {
 	return `${prefix}-${Math.random().toString(36).substring(2, 10)}`
 }
 
+/**
+ * Format a single key-value pair for tooltip
+ * @param {string} key
+ * @param {unknown} value
+ * @param {Function|undefined} formatter
+ * @returns {string}
+ */
+function formatField(key, value, formatter) {
+	const formatted = formatter ? formatter(value) : value
+	return `${key}: ${formatted}`
+}
+
 /**
  * Formats tooltip content for a data point
  *
@@ -97,13 +111,10 @@ export function formatTooltipContent(d, options = {}) {
 	const { xKey, yKey, xFormat, yFormat } = options
 
 	if (xKey && yKey) {
-		const xValue = d[xKey]
-		const yValue = d[yKey]
-
-		const xFormatted = xFormat ? xFormat(xValue) : xValue
-		const yFormatted = yFormat ? yFormat(yValue) : yValue
-
-		return `${xKey}: ${xFormatted}<br>${yKey}: ${yFormatted}`
+		return [
+			formatField(xKey, d[xKey], xFormat),
+			formatField(yKey, d[yKey], yFormat)
+		].join('<br>')
 	}
 
 	return Object.entries(d)