@rokkit/chart 1.0.0-next.15 → 1.0.0-next.150

package/src/lib/brewing/marks/points.js

@@ -0,0 +1,57 @@
+import { symbol, symbolCircle, symbolSquare, symbolTriangle, symbolDiamond, symbolCross, symbolStar } from 'd3-shape'
+
+const SYMBOL_TYPES = [symbolCircle, symbolSquare, symbolTriangle, symbolDiamond, symbolCross, symbolStar]
+const SYMBOL_NAMES = ['circle', 'square', 'triangle', 'diamond', 'cross', 'star']
+
+/**
+ * Returns a Map assigning shape names to distinct values, cycling through available shapes.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values) {
+  return new Map(values.map((v, i) => [v, SYMBOL_NAMES[i % SYMBOL_NAMES.length]]))
+}
+
+/**
+ * Builds an SVG path string for a given shape name and radius.
+ * @param {string} shapeName
+ * @param {number} r
+ * @returns {string}
+ */
+export function buildSymbolPath(shapeName, r) {
+  const idx = SYMBOL_NAMES.indexOf(shapeName)
+  const type = idx >= 0 ? SYMBOL_TYPES[idx] : symbolCircle
+  return symbol().type(type).size(Math.PI * r * r)() ?? ''
+}
+
+/**
+ * Builds point geometry for scatter/bubble charts.
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string, size?: string, symbol?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {Function|null} sizeScale
+ * @param {Map<unknown, string>|null} symbolMap  — maps symbol field value → shape name
+ * @param {number} defaultRadius
+ */
+export function buildPoints(data, channels, xScale, yScale, colors, sizeScale, symbolMap, defaultRadius = 5) {
+  const { x: xf, y: yf, color: cf, size: sf, symbol: symf } = channels
+  return data.map((d) => {
+    const colorKey = cf ? d[cf] : null
+    const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#444' }
+    const r = sf && sizeScale ? sizeScale(d[sf]) : defaultRadius
+    const shapeName = symf && symbolMap ? (symbolMap.get(d[symf]) ?? 'circle') : null
+    const symbolPath = shapeName ? buildSymbolPath(shapeName, r) : null
+    return {
+      data: d,
+      cx: xScale(d[xf]),
+      cy: yScale(d[yf]),
+      r,
+      fill: colorEntry.fill,
+      stroke: colorEntry.stroke,
+      symbolPath,
+      key: colorKey
+    }
+  })
+}

package/src/lib/brewing/marks/violins.js

@@ -0,0 +1,90 @@
+import { line, curveCatmullRom } from 'd3-shape'
+
+// Relative widths at each stat anchor (fraction of max half-width)
+const DENSITY_AT = { iqr_min: 0.08, q1: 0.55, median: 1.0, q3: 0.55, iqr_max: 0.08 }
+const ANCHOR_ORDER = ['iqr_max', 'q3', 'median', 'q1', 'iqr_min']
+
+/**
+ * Builds a closed violin shape path for each group.
+ * Input rows must have { q1, median, q3, iqr_min, iqr_max } from applyBoxStat.
+ *
+ * When `fill` differs from `x`, violins are sub-grouped within each x-band
+ * (one narrower violin per fill value per x category, like grouped bars).
+ * Violin body uses the lighter fill shade; outline uses the darker stroke shade.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, fill?: string }} channels
+ *   `fill` drives violin interior and outline (defaults to x-field).
+ * @param {import('d3-scale').ScaleBand} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map} colors
+ * @returns {Array}
+ */
+export function buildViolins(data, channels, xScale, yScale, colors) {
+  const { x: xf, fill: ff } = channels
+  const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
+  const grouped = ff && ff !== xf
+
+  const pathGen = line()
+    .x((pt) => pt.x)
+    .y((pt) => pt.y)
+    .curve(curveCatmullRom.alpha(0.5))
+
+  if (grouped) {
+    const fillValues = [...new Set(data.map((d) => d[ff]))]
+    const n = fillValues.length
+    const subBandWidth = bw / n
+    const halfMax = subBandWidth * 0.45
+
+    return data.map((d) => {
+      const fillVal = d[ff]
+      const subIndex = fillValues.indexOf(fillVal)
+      const bandStart = xScale(d[xf]) ?? 0
+      const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2
+      const colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+
+      const rightPts = ANCHOR_ORDER.map((key) => ({
+        x: cx + halfMax * DENSITY_AT[key],
+        y: yScale(d[key])
+      }))
+      const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+        x: cx - halfMax * DENSITY_AT[key],
+        y: yScale(d[key])
+      }))
+
+      return {
+        data: d,
+        cx,
+        d:      pathGen([...rightPts, ...leftPts, rightPts[0]]),
+        fill:   colorEntry.fill,
+        stroke: colorEntry.stroke
+      }
+    })
+  }
+
+  // Non-grouped: one violin per x category
+  const halfMax = bw * 0.45
+
+  return data.map((d) => {
+    const fillKey = ff ? d[ff] : d[xf]
+    const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
+    const cx = (xScale(d[xf]) ?? 0) + (typeof xScale.bandwidth === 'function' ? bw / 2 : 0)
+
+    const rightPts = ANCHOR_ORDER.map((key) => ({
+      x: cx + halfMax * DENSITY_AT[key],
+      y: yScale(d[key])
+    }))
+    const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+      x: cx - halfMax * DENSITY_AT[key],
+      y: yScale(d[key])
+    }))
+
+    return {
+      data: d,
+      cx,
+      d:      pathGen([...rightPts, ...leftPts, rightPts[0]]),
+      fill:   colorEntry.fill,
+      stroke: colorEntry.stroke
+    }
+  })
+}

package/src/lib/brewing/patterns.js

@@ -0,0 +1,31 @@
+/**
+ * Converts a data key to a safe SVG element ID for pattern references.
+ * Spaces and non-word characters are replaced to avoid broken url(#...) refs.
+ * @param {unknown} key
+ * @returns {string}
+ */
+export function toPatternId(key) {
+  return `chart-pat-${String(key).replace(/\s+/g, '-').replace(/[^\w-]/g, '_')}`
+}
+
+// Keys must match the keys in packages/chart/src/patterns/patterns.js
+export const PATTERN_ORDER = [
+  'diagonal',
+  'dots',
+  'triangles',
+  'hatch',
+  'lattice',
+  'swell',
+  'checkerboard',
+  'waves',
+  'petals'
+]
+
+/**
+ * Assigns patterns from PATTERN_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignPatterns(values) {
+  return new Map(values.map((v, i) => [v, PATTERN_ORDER[i % PATTERN_ORDER.length]]))
+}

package/src/lib/brewing/scales.js

@@ -0,0 +1,51 @@
+import { scaleBand, scaleLinear, scaleSqrt } from 'd3-scale'
+import { max, extent } from 'd3-array'
+
+/**
+ * Builds an x scale (band for categorical, linear for numeric).
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} width - inner width (pixels)
+ * @param {{ padding?: number }} opts
+ */
+export function buildXScale(data, field, width, opts = {}) {
+  const values = [...new Set(data.map((d) => d[field]))]
+  const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && v !== ''))
+  if (isNumeric) {
+    const [minVal, maxVal] = extent(data, (d) => Number(d[field]))
+    return scaleLinear().domain([minVal, maxVal]).range([0, width]).nice()
+  }
+  return scaleBand()
+    .domain(values)
+    .range([0, width])
+    .padding(opts.padding ?? 0.2)
+}
+
+/**
+ * Builds a y linear scale from 0 to max, extended by any layer overrides.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} height - inner height (pixels)
+ * @param {Array<{data?: Object[], y?: string}>} layers
+ */
+export function buildYScale(data, field, height, layers = []) {
+  let maxVal = max(data, (d) => Number(d[field])) ?? 0
+  for (const layer of layers) {
+    if (layer.data && layer.y) {
+      const layerMax = max(layer.data, (d) => Number(d[layer.y])) ?? 0
+      if (layerMax > maxVal) maxVal = layerMax
+    }
+  }
+  return scaleLinear().domain([0, maxVal]).range([height, 0]).nice()
+}
+
+/**
+ * Builds a sqrt scale for bubble/point size.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} maxRadius
+ */
+export function buildSizeScale(data, field, maxRadius = 20) {
+  const maxVal = max(data, (d) => Number(d[field])) ?? 1
+  return scaleSqrt().domain([0, maxVal]).range([0, maxRadius])
+}

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

@@ -0,0 +1,82 @@
+import { SvelteSet } from 'svelte/reactivity'
+import { min, max } from 'd3-array'
+import { scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import {} from './types.js'
+import { buildXScale } from '../xscale.js'
+
+/**
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * @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/stats.js

@@ -0,0 +1,62 @@
+import { sum, mean, min, max, quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+
+function sortedQuantile(values, p) {
+  return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Built-in reduction functions. Each receives an array of numeric values.
+ * @type {Record<string, (values: number[]) => number>}
+ */
+export const STAT_FNS = {
+  sum,
+  mean,
+  min,
+  max,
+  count: (values) => values.length
+}
+
+/**
+ * Computes box plot quartile statistics grouped by x (and optionally color).
+ * Output rows have { q1, median, q3, iqr_min, iqr_max } replacing the raw y values.
+ *
+ * @param {Object[]} data
+ * @param {{ x?: string, y?: string, color?: string }} channels
+ * @returns {Object[]}
+ */
+export function applyBoxStat(data, channels) {
+  const { x: xf, y: yf, color: cf } = channels
+  if (!xf || !yf) return data
+  const by = [xf, cf].filter(Boolean)
+  return dataset(data)
+    .groupBy(...by)
+    .summarize((row) => row[yf], {
+      q1:      (v) => sortedQuantile(v, 0.25),
+      median:  (v) => sortedQuantile(v, 0.5),
+      q3:      (v) => sortedQuantile(v, 0.75),
+      iqr_min: (v) => { const q1 = sortedQuantile(v, 0.25); const q3 = sortedQuantile(v, 0.75); return q1 - 1.5 * (q3 - q1) },
+      iqr_max: (v) => { const q1 = sortedQuantile(v, 0.25); const q3 = sortedQuantile(v, 0.75); return q3 + 1.5 * (q3 - q1) }
+    })
+    .rollup()
+    .select()
+}
+
+/**
+ * Aggregates data by one or more grouping fields, reducing the value field
+ * using the given stat. Accepts a built-in name or a custom function.
+ *
+ * @param {Object[]} data
+ * @param {{ by: string[], value: string, stat: string|Function }} opts
+ * @returns {Object[]}
+ */
+export function applyAggregate(data, { by, value, stat }) {
+  if (stat === 'identity' || by.length === 0 || value === null || value === undefined) return data
+  const fn = typeof stat === 'function' ? stat : STAT_FNS[stat]
+  if (fn === null || fn === undefined) return data
+  return dataset(data)
+    .groupBy(...by)
+    .summarize((row) => row[value], { [value]: fn })
+    .rollup()
+    .select()
+}

package/src/lib/brewing/symbols.js

@@ -0,0 +1,10 @@
+export const SYMBOL_ORDER = ['circle', 'square', 'triangle', 'diamond', 'plus', 'cross', 'star']
+
+/**
+ * Assigns shapes from SYMBOL_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values) {
+  return new Map(values.map((v, i) => [v, SYMBOL_ORDER[i % SYMBOL_ORDER.length]]))
+}

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/chart.js

@@ -0,0 +1,213 @@
+import { min, max } from 'd3-array'
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'
+
+function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
+}
+
+function getScale(domain, range, padding = 0) {
+	if (domain.some(isNaN)) {
+		return scaleBand().domain(domain).range(range).padding(padding)
+	} else if (domain[0] instanceof Date) {
+		return scaleTime()
+			.domain([min(domain), max(domain)])
+			.range(range)
+			.nice()
+	}
+
+	return scaleLinear()
+		.domain([min([0, ...domain]), max([0, ...domain])])
+		.range(range)
+		.nice()
+}
+
+class Chart {
+	// data = []
+	// width = 512
+	// height = 512
+	// origin = { x: 0, y: 0 }
+	// range = {
+	// 	x: [0, this.width],
+	// 	y: [this.height, 0]
+	// }
+	// x
+	// y
+	// stat = 'identity'
+	// scale
+	// fill
+	// color
+	// value
+	// shape
+	// valueFormat
+	// valueLabel
+	// domain
+	// margin
+	// spacing
+	// padding
+	// flipCoords = false
+
+	constructor(data, opts) {
+		this.width = Number(opts.width) || 2048
+		this.height = Number(opts.height) || 2048
+		this.flipCoords = opts.flipCoords || false
+		this.x = opts.x
+		this.y = opts.y
+		this.value = opts.value || opts.y
+		this.valueLabel = opts.valueLabel || this.value
+		this.valueFormat = opts.valueFormat || ((d) => d)
+		this.fill = opts.fill || opts.x
+		this.color = opts.color || opts.fill
+		this.shape = opts.shape || opts.fill
+
+		this.padding = opts.padding !== undefined ? Number(opts.padding) : 32
+
+		this.spacing =
+			Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5 ? Number(opts.spacing) : 0
+		this.margin = {
+			top: Number(opts.margin?.top) || 0,
+			left: Number(opts.margin?.left) || 0,
+			right: Number(opts.margin?.right) || 0,
+			bottom: Number(opts.margin?.bottom) || 0
+		}
+		this.domain = {
+			x: [...new Set(data.map((d) => d[this.x]))],
+			y: [...new Set(data.map((d) => d[this.y]))]
+		}
+		if (this.flipCoords) {
+			this.domain = { y: this.domain.x, x: this.domain.y }
+		}
+		this.stat = opts.stat || 'identity'
+
+		this.data = data.map((d) => ({
+			x: this.flipCoords ? d[this.y] : d[this.x],
+			y: this.flipCoords ? d[this.x] : d[this.y],
+			// fill: d[this.fill],
+			color: d[this.color]
+			// shape: d[this.shape]
+		}))
+
+		this.refresh()
+	}
+
+	padding(value) {
+		this.padding = value
+		return this.refresh()
+	}
+
+	margin(value) {
+		this.margin = value
+		return this.refresh()
+	}
+
+	refresh() {
+		this.range = {
+			x: [this.margin.left + this.padding, this.width - this.margin.right - this.padding],
+			y: [this.height - this.padding - this.margin.bottom, this.margin.top + this.padding]
+		}
+
+		const scale = {
+			x: getScale(this.domain.x, this.range.x, this.spacing),
+			y: getScale(this.domain.y, this.range.y, this.spacing)
+		}
+
+		// scale['value'] = this.value === this.x ? scale.x : scale.y
+
+		this.origin = {
+			x: getOriginValue(scale.x),
+			y: getOriginValue(scale.y)
+		}
+
+		this.scale = scale
+
+		return this
+	}
+
+	// get scale() {
+	// 	return this.scale
+	// }
+	// get origin() {
+	// 	return this.origin
+	// }
+	// get margin() {
+	// 	return this.margin
+	// }
+	// get range() {
+	// 	const [x1, x2] = this.scale.x.range()
+	// 	const [y1, y2] = this.scale.y.range()
+
+	// 	return { x1, y1, x2, y2 }
+	// }
+	// get data() {
+	// 	// aggregate data group by x,y,fill,shape, color
+	// 	// stat = [min, max, avg, std, q1, q3, median, sum, count, box, all]
+
+	// 	return this.data
+	// }
+	// get width() {
+	// 	return this.width
+	// }
+	// get height() {
+	// 	return this.height
+	// }
+	// set width(value) {
+	// 	this.width = value
+	// }
+	// set height(value) {
+	// 	this.height = value
+	// }
+	// get domain() {
+	// 	return this.domain
+	// }
+	// get flipCoords() {
+	// 	return this.flipCoords
+	// }
+	aggregate(value, stat) {
+		this.value = value
+		this.stat = stat
+
+		// this.data = nest(this.data)
+	}
+
+	ticks(axis, count, fontSize = 8) {
+		const scale = this.scale[axis]
+		const [minRange, maxRange] = scale.range()
+		let ticks = []
+		let offset = 0
+
+		count = count || Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 8 : 8)))
+
+		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 diff = scale.domain().length - count
+				ticks = ticks.filter((d, i) => i % diff === 0)
+			}
+		}
+
+		ticks = ticks
+			.map((t) => ({
+				label: t,
+				pos: scale(t)
+			}))
+			.map(({ label, pos }) => ({
+				label,
+				offset: {
+					x: axis === 'x' ? offset : 0,
+					y: axis === 'y' ? offset : 0
+				},
+				x: axis === 'x' ? pos : this.origin.x,
+				y: axis === 'y' ? pos : this.origin.y
+			}))
+
+		return ticks
+	}
+}
+
+export function chart(data, aes) {
+	return new Chart(data, aes)
+}