@rokkit/chart 1.0.0-next.151 → 1.0.0-next.158

package/src/geoms/lib/bars.js

@@ -1,6 +1,7 @@
 import { scaleBand } from 'd3-scale'
 import { stack } from 'd3-shape'
 import { toPatternId } from '../../lib/brewing/patterns.js'
+import { isLiteralColor } from '../../lib/brewing/colors.js'
 
 /**
  * Returns a band scale suitable for bar x-positioning.
@@ -9,10 +10,10 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * derives a band scale from the distinct values in the data.
  */
 function ensureBandX(xScale, data, xField) {
-  if (typeof xScale?.bandwidth === 'function') return xScale
-  const [r0, r1] = xScale.range()
-  const domain = [...new Set(data.map((d) => d[xField]))]
-  return scaleBand().domain(domain).range([r0, r1]).padding(0.2)
+	if (typeof xScale?.bandwidth === 'function') return xScale
+	const [r0, r1] = xScale.range()
+	const domain = [...new Set(data.map((d) => d[xField]))]
+	return scaleBand().domain(domain).range([r0, r1]).padding(0.2)
 }
 
 /**
@@ -20,153 +21,203 @@ function ensureBandX(xScale, data, xField) {
  * These are the fields that cause multiple bars within a single x-band.
  */
 function subBandFields(channels) {
-  const { x: xf, color: cf, pattern: pf } = channels
-  const seen = new Set()
-  const out = []
-  for (const f of [cf, pf]) {
-    if (f && f !== xf && !seen.has(f)) { seen.add(f); out.push(f) }
-  }
-  return out
+	const { x: xf, color: cf, pattern: pf } = channels
+	const seen = new Set()
+	const out = []
+	for (const f of [cf, pf]) {
+		if (f && f !== xf && !seen.has(f) && !isLiteralColor(f)) {
+			seen.add(f)
+			out.push(f)
+		}
+	}
+	return out
 }
 
 export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
-  const { x: xf, y: yf, color: cf, pattern: pf } = channels
-
-  const bandScale = ensureBandX(xScale, data, xf)
-
-  // Sub-banding: only fields that differ from x drive grouping within a band
-  const subFields = subBandFields(channels)
-  const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
-  const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
-  const subScale = subDomain.length > 1
-    ? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
-    : null
-
-  return data.map((d, i) => {
-    const xVal = d[xf]
-    const colorKey = cf ? d[cf] : null
-    const patternKey = pf ? d[pf] : null
-    const subKey = getSubKey(d)
-
-    const colorEntry = colors?.get(colorKey) ?? colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
-      ? toPatternId(String(patternKey))
-      : null
-
-    const bandX = bandScale(xVal) ?? 0
-    const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
-    const barX = bandX + subX
-    const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
-    const barY = yScale(d[yf])
-    const barHeight = innerHeight - barY
-
-    return {
-      data: d,
-      key: `${String(xVal)}::${subKey}::${i}`,
-      x: barX,
-      y: barY,
-      width: barWidth,
-      height: barHeight,
-      fill: colorEntry.fill,
-      stroke: colorEntry.stroke,
-      patternId
-    }
-  })
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Sub-banding: only fields that differ from x drive grouping within a band
+	const subFields = subBandFields(channels)
+	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
+	const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
+	const subScale =
+		subDomain.length > 1
+			? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
+			: null
+
+	// Baseline for bars: at y=0 when domain spans zero (supports negative bars),
+	// otherwise at the bottom of the chart area.
+	const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
+	const baseline =
+		yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
+			? (yScale(0) ?? innerHeight)
+			: innerHeight
+
+	return data.map((d, i) => {
+		const xVal = d[xf]
+		const colorKey = cf ? d[cf] : null
+		const patternKey = pf ? d[pf] : null
+		const subKey = getSubKey(d)
+
+		const colorEntry = colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+
+		const bandX = bandScale(xVal) ?? 0
+		const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
+		const barX = bandX + subX
+		const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
+		const barY = yScale(d[yf]) ?? baseline
+
+		return {
+			data: d,
+			key: `${String(xVal)}::${subKey}::${i}`,
+			x: barX,
+			y: Math.min(barY, baseline),
+			width: barWidth,
+			height: Math.abs(baseline - barY),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId
+		}
+	})
 }
 
 export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
-  const { x: xf, y: yf, color: cf, pattern: pf } = channels
-
-  const bandScale = ensureBandX(xScale, data, xf)
-
-  // Stack dimension: first non-x grouping field (prefer pattern, then color)
-  const subFields = subBandFields(channels)
-  if (subFields.length === 0) {
-    return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
-  }
-  const stackField = subFields[0]
-
-  const xCategories = [...new Set(data.map((d) => d[xf]))]
-  const stackCategories = [...new Set(data.map((d) => d[stackField]))]
-
-  const lookup = new Map()
-  for (const d of data) {
-    if (!lookup.has(d[xf])) lookup.set(d[xf], {})
-    lookup.get(d[xf])[d[stackField]] = Number(d[yf])
-  }
-
-  const wide = xCategories.map((xVal) => {
-    const row = { [xf]: xVal }
-    for (const sk of stackCategories) row[sk] = lookup.get(xVal)?.[sk] ?? 0
-    return row
-  })
-
-  const stackGen = stack().keys(stackCategories)
-  const layers = stackGen(wide)
-
-  const bars = []
-  for (const layer of layers) {
-    const stackKey = layer.key
-
-    for (const point of layer) {
-      const [y0, y1] = point
-      const xVal = point.data[xf]
-
-      // Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
-      const colorKey = cf
-        ? (cf === xf ? xVal : cf === stackField ? stackKey : null)
-        : null
-      const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
-
-      // Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
-      const patternKey = pf
-        ? (pf === xf ? xVal : pf === stackField ? stackKey : null)
-        : null
-      const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
-        ? toPatternId(String(patternKey))
-        : null
-
-      bars.push({
-        data: point.data,
-        key: `${String(xVal)}::${String(stackKey)}`,
-        x: bandScale(xVal) ?? 0,
-        y: yScale(y1),
-        width: bandScale.bandwidth(),
-        height: yScale(y0) - yScale(y1),
-        fill: colorEntry.fill,
-        stroke: colorEntry.stroke,
-        patternId
-      })
-    }
-  }
-  return bars
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+
+	const bandScale = ensureBandX(xScale, data, xf)
+
+	// Stack dimension: first non-x grouping field (prefer pattern, then color)
+	const subFields = subBandFields(channels)
+	if (subFields.length === 0) {
+		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+	}
+	const stackField = subFields[0]
+
+	const xCategories = [...new Set(data.map((d) => d[xf]))]
+	const stackCategories = [...new Set(data.map((d) => d[stackField]))]
+
+	const lookup = new Map()
+	for (const d of data) {
+		if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+		lookup.get(d[xf])[d[stackField]] = Number(d[yf])
+	}
+
+	const wide = xCategories.map((xVal) => {
+		const row = { [xf]: xVal }
+		for (const sk of stackCategories) row[sk] = lookup.get(xVal)?.[sk] ?? 0
+		return row
+	})
+
+	const stackGen = stack().keys(stackCategories)
+	const layers = stackGen(wide)
+
+	const bars = []
+	for (const layer of layers) {
+		const stackKey = layer.key
+
+		for (const point of layer) {
+			const [y0, y1] = point
+			const xVal = point.data[xf]
+
+			// Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
+			const colorKey = cf ? (cf === xf ? xVal : cf === stackField ? stackKey : null) : null
+			const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+
+			// Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
+			const patternKey = pf ? (pf === xf ? xVal : pf === stackField ? stackKey : null) : null
+			const patternId =
+				patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+					? toPatternId(String(patternKey))
+					: null
+
+			bars.push({
+				data: point.data,
+				key: `${String(xVal)}::${String(stackKey)}`,
+				x: bandScale(xVal) ?? 0,
+				y: yScale(y1),
+				width: bandScale.bandwidth(),
+				height: yScale(y0) - yScale(y1),
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId
+			})
+		}
+	}
+	return bars
 }
 
 export function buildHorizontalBars(data, channels, xScale, yScale, colors, _innerHeight) {
-  const { x: xf, y: yf, color: cf } = channels
-  const colorKeys = cf ? [...new Set(data.map((d) => d[cf]))] : []
-  const subScale = colorKeys.length > 1
-    ? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
-    : null
-
-  return data.map((d) => {
-    const yVal = d[yf]
-    const colorKey = cf ? d[cf] : null
-    const colorEntry = colors?.get(colorKey) ?? colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-
-    const bandY = yScale(yVal) ?? 0
-    const subY = subScale ? (subScale(colorKey) ?? 0) : 0
-
-    return {
-      data: d,
-      key: `${String(yVal)}::${String(colorKey ?? '')}`,
-      x: 0,
-      y: bandY + subY,
-      width: xScale(d[xf]),
-      height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
-      fill: colorEntry.fill,
-      stroke: colorEntry.stroke,
-      patternId: null
-    }
-  })
+	const { x: xf, y: yf, color: cf } = channels
+	const isBand = typeof yScale?.bandwidth === 'function'
+
+	if (!isBand) {
+		// Linear y-scale: rank-based bar chart race.
+		// Each row has a numeric _rank that tweens smoothly between frames.
+		// No sub-grouping — each rank position holds exactly one entity.
+		const [r0, r1] = yScale.range() // [innerHeight, 0]
+		const [d0, d1] = yScale.domain() // [0, N-1]
+		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
+		const barH = step * 0.9
+
+		return data.map((d) => {
+			const rankVal = Number(d[yf])
+			const colorKey = cf ? d[cf] : null
+			const colorEntry =
+				colors?.get(colorKey) ??
+				colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+			const centerY = yScale(rankVal) ?? 0
+			return {
+				data: d,
+				// Key by entity name (_entity) so Svelte reuses elements as rank tweens
+				key: `${String(d._entity ?? d[yf])}::${String(colorKey ?? '')}`,
+				x: 0,
+				y: centerY - barH / 2,
+				width: xScale(d[xf]) ?? 0,
+				height: barH,
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke,
+				patternId: null
+			}
+		})
+	}
+
+	// Band scale: standard grouped horizontal bars.
+	// Only create sub-bands when multiple entities share the same y-band (true grouping).
+	const yVals = new Set(data.map((d) => d[yf]))
+	const colorKeys = cf && !isLiteralColor(cf) ? [...new Set(data.map((d) => d[cf]))] : []
+	const hasSubBands = colorKeys.length > 1 && data.length > yVals.size
+	const subScale = hasSubBands
+		? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
+		: null
+
+	return data.map((d) => {
+		const yVal = d[yf]
+		const colorKey = cf ? d[cf] : null
+		const colorEntry =
+			colors?.get(colorKey) ??
+			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+
+		const bandY = yScale(yVal) ?? 0
+		const subY = subScale ? (subScale(colorKey) ?? 0) : 0
+
+		return {
+			data: d,
+			key: `${String(yVal)}::${String(colorKey ?? '')}`,
+			x: 0,
+			y: bandY + subY,
+			width: xScale(d[xf]) ?? 0,
+			height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			patternId: null
+		}
+	})
 }

package/src/index.js

@@ -8,8 +8,8 @@ import Area from './Plot/Area.svelte'
 import Point from './Plot/Point.svelte'
 import Arc from './Plot/Arc.svelte'
 
-// Export components (old Plot namespace — renamed to avoid collision with new PlotChart export)
-export const PlotLayers = {
+// Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
+export const Plot = {
 	Root,
 	Axis,
 	Bar,
@@ -21,20 +21,25 @@ export const PlotLayers = {
 	Arc
 }
 
+/** @deprecated Use Plot instead */
+export const PlotLayers = Plot
+
 // New Plot system
-export { default as PlotChart }    from './Plot.svelte'
+export { default as PlotChart } from './Plot.svelte'
+export { default as ChartProvider } from './ChartProvider.svelte'
+export { createChartPreset, defaultPreset } from './lib/preset.js'
 
 // Facets and Animation
-export { default as FacetPlot }    from './FacetPlot.svelte'
+export { default as FacetPlot } from './FacetPlot.svelte'
 export { default as AnimatedPlot } from './AnimatedPlot.svelte'
 
 // Geom components (for declarative use inside PlotChart)
-export { default as GeomBar }    from './geoms/Bar.svelte'
-export { default as GeomLine }   from './geoms/Line.svelte'
-export { default as GeomArea }   from './geoms/Area.svelte'
-export { default as GeomPoint }  from './geoms/Point.svelte'
-export { default as GeomArc }    from './geoms/Arc.svelte'
-export { default as GeomBox }    from './geoms/Box.svelte'
+export { default as GeomBar } from './geoms/Bar.svelte'
+export { default as GeomLine } from './geoms/Line.svelte'
+export { default as GeomArea } from './geoms/Area.svelte'
+export { default as GeomPoint } from './geoms/Point.svelte'
+export { default as GeomArc } from './geoms/Arc.svelte'
+export { default as GeomBox } from './geoms/Box.svelte'
 export { default as GeomViolin } from './geoms/Violin.svelte'
 
 // Export standalone components
@@ -57,11 +62,13 @@ export { ChartBrewer } from './lib/brewing/index.svelte.js'
 export * from './lib/brewing/index.svelte.js'
 export { CartesianBrewer } from './lib/brewing/CartesianBrewer.svelte.js'
 export { PieBrewer } from './lib/brewing/PieBrewer.svelte.js'
+export { QuartileBrewer } from './lib/brewing/QuartileBrewer.svelte.js'
 export { BoxBrewer } from './lib/brewing/BoxBrewer.svelte.js'
 export { ViolinBrewer } from './lib/brewing/ViolinBrewer.svelte.js'
 
 // CrossFilter system
-export { createCrossFilter }           from './crossfilter/createCrossFilter.svelte.js'
-export { default as CrossFilter }      from './crossfilter/CrossFilter.svelte'
-export { default as FilterBar }        from './crossfilter/FilterBar.svelte'
-export { default as FilterSlider }     from './crossfilter/FilterSlider.svelte'
+export { createCrossFilter } from './crossfilter/createCrossFilter.svelte.js'
+export { default as CrossFilter } from './crossfilter/CrossFilter.svelte'
+export { default as FilterBar } from './crossfilter/FilterBar.svelte'
+export { default as FilterSlider } from './crossfilter/FilterSlider.svelte'
+export { default as FilterHistogram } from './crossfilter/FilterHistogram.svelte'

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

@@ -1,56 +1,14 @@
-import { quantile, ascending } from 'd3-array'
-import { dataset } from '@rokkit/data'
-import { ChartBrewer } from './brewer.svelte.js'
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
 import { buildBoxes } from './marks/boxes.js'
-import { buildXScale, buildYScale } from './scales.js'
-
-function sortedQuantile(values, p) {
-  return quantile([...values].sort(ascending), p)
-}
 
 /**
- * Brewer for box plots. Always computes quartile statistics regardless of the stat prop.
- * Groups by x + fill (primary) or x + color (fallback).
+ * Brewer for box plots.
  * fill = box interior color, color = whisker/outline stroke.
  */
-export class BoxBrewer extends ChartBrewer {
-  transform(data, channels) {
-    if (!channels.x || !channels.y) return data
-    const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
-    return dataset(data)
-      .groupBy(...by)
-      .summarize((row) => row[channels.y], {
-        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()
-  }
-
-  /**
-   * Override xScale to use processedData (post-transform rows have the x field).
-   */
-  xScale = $derived(
-    this.channels.x && this.processedData.length > 0
-      ? buildXScale(this.processedData, this.channels.x, this.innerWidth)
-      : null
-  )
-
-  /**
-   * Override yScale to use iqr_max as the upper bound of the quartile data.
-   */
-  yScale = $derived(
-    this.channels.y && this.processedData.length > 0
-      ? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
-      : null
-  )
-
-  boxes = $derived(
-    this.xScale && this.yScale
-      ? buildBoxes(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
-      : []
-  )
+export class BoxBrewer extends QuartileBrewer {
+	boxes = $derived(
+		this.xScale && this.yScale
+			? buildBoxes(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
 }

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

@@ -7,11 +7,15 @@ import { applyAggregate } from './stats.js'
  * Groups by x (and fill/color if set) and applies the given stat.
  */
 export class CartesianBrewer extends ChartBrewer {
-  transform(data, channels, stat) {
-    if (stat === 'identity' || !channels.x || !channels.y) return data
-    // Group by all mapped aesthetic dimensions so they survive aggregation.
-    // e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
-    const by = [...new SvelteSet([channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean))]
-    return applyAggregate(data, { by, value: channels.y, stat })
-  }
+	transform(data, channels, stat) {
+		if (stat === 'identity' || !channels.x || !channels.y) return data
+		// Group by all mapped aesthetic dimensions so they survive aggregation.
+		// e.g. x=region, fill=region, pattern=quarter → by=['region','quarter']
+		const by = [
+			...new SvelteSet(
+				[channels.x, channels.fill, channels.color, channels.pattern].filter(Boolean)
+			)
+		]
+		return applyAggregate(data, { by, value: channels.y, stat })
+	}
 }

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

@@ -6,9 +6,9 @@ import { applyAggregate } from './stats.js'
  * 'identity' is not meaningful for pie charts — falls back to 'sum'.
  */
 export class PieBrewer extends ChartBrewer {
-  transform(data, channels, stat) {
-    if (!channels.label || !channels.y) return data
-    const effectiveStat = stat === 'identity' ? 'sum' : (stat ?? 'sum')
-    return applyAggregate(data, { by: [channels.label], value: channels.y, stat: effectiveStat })
-  }
+	transform(data, channels, stat) {
+		if (!channels.label || !channels.y) return data
+		const effectiveStat = stat === 'identity' ? 'sum' : (stat ?? 'sum')
+		return applyAggregate(data, { by: [channels.label], value: channels.y, stat: effectiveStat })
+	}
 }

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

@@ -0,0 +1,51 @@
+import { quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+import { ChartBrewer } from './brewer.svelte.js'
+import { buildXScale, buildYScale } from './scales.js'
+
+function sortedQuantile(values, p) {
+	return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Shared base for box and violin plots.
+ * Groups by x + fill (primary) or x + color (fallback) and computes quartile statistics.
+ * Subclasses add their mark-specific $derived (boxes, violins, etc.).
+ */
+export class QuartileBrewer extends ChartBrewer {
+	transform(data, channels) {
+		if (!channels.x || !channels.y) return data
+		const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
+		return dataset(data)
+			.groupBy(...by)
+			.summarize((row) => row[channels.y], {
+				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()
+	}
+
+	xScale = $derived(
+		this.channels.x && this.processedData.length > 0
+			? buildXScale(this.processedData, this.channels.x, this.innerWidth)
+			: null
+	)
+
+	yScale = $derived(
+		this.channels.y && this.processedData.length > 0
+			? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
+			: null
+	)
+}

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

@@ -1,55 +1,14 @@
-import { quantile, ascending } from 'd3-array'
-import { dataset } from '@rokkit/data'
-import { ChartBrewer } from './brewer.svelte.js'
+import { QuartileBrewer } from './QuartileBrewer.svelte.js'
 import { buildViolins } from './marks/violins.js'
-import { buildXScale, buildYScale } from './scales.js'
-
-function sortedQuantile(values, p) {
-  return quantile([...values].sort(ascending), p)
-}
 
 /**
- * Brewer for violin plots. Computes the same quartile statistics as BoxBrewer.
+ * Brewer for violin plots.
  * fill = violin body color, color = outline stroke.
  */
-export class ViolinBrewer extends ChartBrewer {
-  transform(data, channels) {
-    if (!channels.x || !channels.y) return data
-    const by = [channels.x, channels.fill ?? channels.color].filter(Boolean)
-    return dataset(data)
-      .groupBy(...by)
-      .summarize((row) => row[channels.y], {
-        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()
-  }
-
-  /**
-   * Override xScale to use processedData (post-transform rows have the x field).
-   */
-  xScale = $derived(
-    this.channels.x && this.processedData.length > 0
-      ? buildXScale(this.processedData, this.channels.x, this.innerWidth)
-      : null
-  )
-
-  /**
-   * Override yScale to use iqr_max as the upper bound of the quartile data.
-   */
-  yScale = $derived(
-    this.channels.y && this.processedData.length > 0
-      ? buildYScale(this.processedData, 'iqr_max', this.innerHeight)
-      : null
-  )
-
-  violins = $derived(
-    this.xScale && this.yScale
-      ? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
-      : []
-  )
+export class ViolinBrewer extends QuartileBrewer {
+	violins = $derived(
+		this.xScale && this.yScale
+			? buildViolins(this.processedData, this.channels, this.xScale, this.yScale, this.colorMap)
+			: []
+	)
 }