@rokkit/chart 1.0.0-next.12 → 1.0.0-next.122

package/src/lib/context.js

@@ -0,0 +1,132 @@
+import { getContext, setContext } from 'svelte'
+import { writable, derived } from 'svelte/store'
+import * as d3 from 'd3'
+
+const CHART_CONTEXT = 'chart-context'
+
+/**
+ * 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 = {}) {
+	// 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({
+		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: []
+	})
+
+	// Helper to add a new plot
+	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) {
+		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 }
+		})
+	}
+
+	// Create and set context
+	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,122 @@
+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
+ */
+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])
+	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()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else if (xIsNumeric) {
+		xScale = scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else {
+		xScale = 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])
+
+	// 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)
+	}
+
+	return { xScale, yScale, colorScale }
+}
+
+/**
+ * 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(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]
+}
+
+/**
+ * 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()
+	let ticks = []
+	let offset = 0
+
+	// 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
+	if (scale.ticks) {
+		ticks = scale.ticks(Math.round(count))
+	} 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)
+		}
+	}
+
+	// Format ticks with positions
+	return ticks.map((t) => ({
+		value: t,
+		position: scale(t) + (axis === 'x' ? offset : 0)
+	}))
+}

package/src/lib/utils.js

@@ -1,157 +1,133 @@
-import { scaleBand, scaleLinear } from 'd3-scale'
-import { min, max } from 'd3-array'
-import { ascending, quantile } from 'd3-array'
-import { nest } from 'd3-collection'
-import { omit } from 'ramda'
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { max } from 'd3-array'
 
 /**
- * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.
+ * Creates appropriate scales based on data and dimensions
  *
- * - Attempts to find a best fit square if both columns and rows are not specified
- * - Value in columns is prioritized over rows for recalculating the grid
- * - Supports padding between the items
- *
- * @param {number} count
- * @param {number} size
- * @param {number} pad
- * @param {number} columns
- * @param {number} rows
- * @returns
+ * @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.colorKey] Field to use for color mapping
+ * @returns {Object} Object containing xScale, yScale, and colorScale
  */
-export function swatch(count, size, pad = 0, columns, rows) {
-	if (columns > 0) {
-		rows = Math.ceil(count / columns)
-	} else if (rows > 0) {
-		columns = Math.ceil(count / rows)
-	} else {
-		columns = Math.ceil(Math.sqrt(count))
-		rows = Math.ceil(count / columns)
-	}
+export function createScales(data, xKey, yKey, dimensions, options = {}) {
+	if (!data || data.length === 0) return {}
+
+	const xScale = scaleBand()
+		.domain(data.map((d) => d[xKey]))
+		.range([0, dimensions.width])
+		.padding(0.2)
 
-	const width = (size + pad) * columns + pad
-	const height = (size + pad) * rows + pad
-	const data = [...Array(count).keys()].map((index) => ({
-		cx: (size + pad) / 2 + (index % columns) * (size + pad),
-		cy: (size + pad) / 2 + Math.floor(index / columns) * (size + pad),
-		r: size / 2
-	}))
+	const yScale = scaleLinear()
+		.domain([0, max(data, (d) => d[yKey]) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.height, 0])
+
+	let colorScale = null
+
+	if (options.colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[options.colorKey]))]
+		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+	}
 
-	return { width, height, data }
+	return { xScale, yScale, colorScale }
 }
+
 /**
- * Get a scale function mapping the values between a range of lower and upper values
+ * Calculates the actual chart dimensions after applying margins
  *
- * @param {Array} values
- * @param {Array[2]} bounds
- * @param {number} buffer
- * @returns
+ * @param {Object} dimensions Original dimensions
+ * @returns {Object} Dimensions with calculated inner width and height
  */
-export function getScale(values, bounds, buffer = 0, ordinal = false) {
-	if (ordinal || values.some(isNaN)) {
-		return scaleBand().range(bounds).domain(values).padding(0.5)
-	} else {
-		values = values.map((x) => +x)
-
-		let minValue = min([...values, 0])
-		let maxValue = max(values)
-
-		if (minValue < 0 && maxValue > 0) {
-			maxValue = max([-1 * minValue, maxValue])
-			minValue = -1 * maxValue
-		}
-		const margin = (maxValue - minValue) * buffer
-		return scaleLinear()
-			.domain([minValue - margin, maxValue + margin])
-			.range(bounds)
+export function calculateChartDimensions(dimensions) {
+	const { width, height, margin } = dimensions
+
+	return {
+		...dimensions,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
 	}
 }
+
 /**
- * Obtain the scale function for the `x` and `y` fields in the data set.
+ * Normalizes data for use with D3 charts
  *
- * @param {array<dict>} data
- * @param {string} x
- * @param {string} y
- * @param {number} width
- * @param {number} height
- * @returns
+ * @param {Array|Object} inputData Raw data or dataset object
+ * @returns {Array} Normalized data array
  */
-export function getScales(data, x, y, width, height, margin, ordinal) {
-	const xValues = [...new Set(data.map((item) => item[x]))]
-	const yValues = [...new Set(data.map((item) => item[y]))]
+export function normalizeData(inputData) {
+	if (!inputData) return []
 
-	return {
-		x: getScale(xValues, [0 + margin.left, width - margin.right], 0, ordinal.x),
-		y: getScale(yValues, [height - margin.top, margin.bottom], 0.1, ordinal.y)
+	// If it's a dataset class instance, call select() to get the data
+	if (inputData.select && typeof inputData.select === 'function') {
+		return inputData.select()
 	}
+
+	// If it's already an array, return as is
+	if (Array.isArray(inputData)) {
+		return inputData
+	}
+
+	return []
 }
 
 /**
- * Summarize `data` by fields `x` and `y` and return a nested array with
- * key as unique `x` values and value as statistical summaries of `y` values
+ * Generates a unique ID for SVG elements
  *
- * @param {*} data
- * @param {*} x
- * @param {*} y
- * @returns
+ * @param {string} prefix Prefix for the ID
+ * @returns {string} A unique ID
  */
-export function aggregate(data, x, y) {
-	const summary = nest()
-		.key((d) => d[x])
-		.rollup((d) => {
-			let values = d.map((g) => g[y]).sort(ascending)
-			let q1 = quantile(values, 0.25)
-			let q3 = quantile(values, 0.75)
-			let median = quantile(values, 0.5)
-			let interQuantileRange = q3 - q1
-			let min = q1 - 1.5 * interQuantileRange
-			let max = q3 + 1.5 * interQuantileRange
-			return { q1, q3, median, interQuantileRange, min, max }
-		})
-		.entries(data)
-	return summary
+export function uniqueId(prefix = 'chart') {
+	return `${prefix}-${Math.random().toString(36).substring(2, 10)}`
 }
 
 /**
- * Generate a palette with same size as input data containing values from palette array.
- * After the palette array is exhausted the fallback value is used
+ * Formats tooltip content for a data point
  *
- * @param {Array} values
- * @param {Array} palette
- * @param {*}     fallback
- * @returns
+ * @param {Object} d Data point
+ * @param {Object} options Tooltip format options
+ * @returns {string} Formatted tooltip HTML content
  */
-export function getPaletteForValues(values, palette, fallback) {
-	return values.map((_, index) =>
-		index < palette.length ? palette[index] : fallback
-	)
+export function formatTooltipContent(d, options = {}) {
+	if (!d) return ''
+
+	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 Object.entries(d)
+		.map(([key, value]) => `${key}: ${value}`)
+		.join('<br>')
 }
 
 /**
- * Converts input object array into a nested key,value array.
- * 'key' contains unique values for the attribute specified by the key parameter
- * and value contains array of all remaining attributes in an array.
+ * Generates a tooltip formatter function
  *
- * @param {Array<Object>} data
- * @param {string} key
- * @param {string} label
- * @returns
+ * @param {Object} options Tooltip format options
+ * @returns {Function} A function that formats tooltip content
  */
-export function toNested(data, key, label) {
-	return nest()
-		.key((d) => d[key])
-		.rollup((values) => values.map((value) => omit([key], value)))
-		.entries(data.sort((a, b) => ascending(a[label], b[label])))
+export function createTooltipFormatter(options = {}) {
+	return (d) => formatTooltipContent(d, options)
 }
+
 /**
- * Repeats array items of b using array items of a ask keys
+ * Calculates the transform attribute for SVG elements
  *
- * @param {Array} b
- * @param {Array} a
- * @returns {Object} with keys as items in a and values as items in b
+ * @param {number} x X position
+ * @param {number} y Y position
+ * @returns {string} Transform attribute value
  */
-export function repeatAcross(b, a) {
-	return a.reduce(
-		(acc, item, index) => ({ ...acc, [item]: b[index % b.length] }),
-		{}
-	)
+export function transform(x, y) {
+	return `translate(${x}, ${y})`
 }

package/src/old_lib/brewer.js

@@ -0,0 +1,25 @@
+/**
+ * Get fill patterns for a set of values
+ *
+ * @param {Array} values - Array of values
+ * @param {Object} swatch - Object with keys for color, gray, and pattern
+ * @param {Boolean} gray - Boolean to determine if gray or color
+ * @returns {Object} - Object with keys for pattern and color
+ */
+export function getFillPatterns(values, swatch, gray = false) {
+	const colors = gray ? swatch.keys.gray : swatch.keys.color
+	const max_colors = colors.length
+	const max_patterns = swatch.keys.pattern.length
+
+	const mix = values
+		.map((value, index) => ({
+			[value]: {
+				pattern: swatch.keys.pattern[index % max_patterns],
+				color: colors[index % max_colors]
+			}
+		}))
+		.reduce((acc, current) => ({ ...acc, ...current }), {})
+	return mix
+}
+
+// export function getStrokePatterns() {}