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

package/src/Chart.svelte

@@ -1,101 +1,95 @@
 <script>
-  import { setContext } from 'svelte'
-  import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
+	import { setContext } from 'svelte'
+	import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
 
-  /**
-   * @type {{
-   *   spec?: import('./spec/chart-spec.js').ChartSpec,
-   *   data?: Object[],
-   *   x?: string,
-   *   y?: string,
-   *   color?: string,
-   *   pattern?: string,
-   *   fill?: string,
-   *   size?: string,
-   *   label?: string,
-   *   symbol?: string,
-   *   width?: number,
-   *   height?: number,
-   *   mode?: 'light' | 'dark',
-   *   children?: import('svelte').Snippet
-   * }}
-   */
-  let {
-    spec = undefined,
-    data = [],
-    x = undefined,
-    y = undefined,
-    color = undefined,
-    pattern = undefined,
-    fill = undefined,
-    size = undefined,
-    label = undefined,
-    symbol = undefined,
-    width = 600,
-    height = 400,
-    mode = 'light',
-    children
-  } = $props()
+	/**
+	 * @type {{
+	 *   spec?: import('./spec/chart-spec.js').ChartSpec,
+	 *   data?: Object[],
+	 *   x?: string,
+	 *   y?: string,
+	 *   color?: string,
+	 *   pattern?: string,
+	 *   fill?: string,
+	 *   size?: string,
+	 *   label?: string,
+	 *   symbol?: string,
+	 *   width?: number,
+	 *   height?: number,
+	 *   mode?: 'light' | 'dark',
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let {
+		spec = undefined,
+		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		pattern = undefined,
+		fill = undefined,
+		size = undefined,
+		label = undefined,
+		symbol = undefined,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		children
+	} = $props()
 
-  const brewer = new ChartBrewer()
-  setContext('chart-brewer', brewer)
+	const brewer = new ChartBrewer()
+	setContext('chart-brewer', brewer)
 
-  $effect(() => {
-    if (spec) {
-      brewer.update({
-        data: spec.data,
-        channels: spec.channels,
-        width,
-        height,
-        mode,
-        layers: spec.layers
-      })
-    } else {
-      const channels = {}
-      if (x)       channels.x = x
-      if (y)       channels.y = y
-      if (color)   channels.color = color
-      if (pattern) channels.pattern = pattern
-      if (fill)    channels.fill = fill
-      if (size)    channels.size = size
-      if (label)   channels.label = label
-      if (symbol)  channels.symbol = symbol
-      brewer.update({ data, channels, width, height, mode })
-    }
-  })
+	function buildChannels() {
+		const channels = {}
+		if (x) channels.x = x
+		if (y) channels.y = y
+		if (color) channels.color = color
+		if (pattern) channels.pattern = pattern
+		if (fill) channels.fill = fill
+		if (size) channels.size = size
+		if (label) channels.label = label
+		if (symbol) channels.symbol = symbol
+		return channels
+	}
 
+	$effect(() => {
+		if (spec) {
+			brewer.update({
+				data: spec.data,
+				channels: spec.channels,
+				width,
+				height,
+				mode,
+				layers: spec.layers
+			})
+		} else {
+			brewer.update({ data, channels: buildChannels(), width, height, mode })
+		}
+	})
 </script>
 
 <div class="chart-container" data-chart-root>
-  <svg
-    {width}
-    {height}
-    viewBox="0 0 {width} {height}"
-    role="img"
-    aria-label="Chart visualization"
-  >
-    <g
-      class="chart-area"
-      data-chart-canvas
-    >
-      {@render children?.()}
-    </g>
-  </svg>
+	<svg {width} {height} viewBox="0 0 {width} {height}" role="img" aria-label="Chart visualization">
+		<g class="chart-area" data-chart-canvas>
+			{@render children?.()}
+		</g>
+	</svg>
 </div>
 
 <style>
-  .chart-container {
-    position: relative;
-    width: 100%;
-    height: auto;
-  }
+	.chart-container {
+		position: relative;
+		width: 100%;
+		height: auto;
+	}
 
-  svg {
-    display: block;
-    overflow: visible;
-  }
+	svg {
+		display: block;
+		overflow: visible;
+	}
 
-  .chart-area {
-    pointer-events: all;
-  }
+	.chart-area {
+		pointer-events: all;
+	}
 </style>

package/src/ChartProvider.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { setContext } from 'svelte'
+	import { createChartPreset } from './lib/preset.js'
+
+	let { preset = createChartPreset(), children } = $props()
+
+	setContext('chart-preset', { get current() { return preset } })
+</script>
+
+{@render children?.()}

package/src/FacetPlot/Panel.svelte

@@ -1,23 +1,37 @@
 <script>
-  import PlotChart from '../Plot.svelte'
+	import PlotChart from '../Plot.svelte'
 
-  let {
-    data, x, y, color, geoms = [], helpers = {},
-    width, height, mode, grid, legend,
-    xDomain, yDomain, colorDomain,
-    children
-  } = $props()
+	let {
+		data,
+		x,
+		y,
+		color,
+		geoms = [],
+		helpers = {},
+		width,
+		height,
+		mode,
+		grid,
+		legend,
+		xDomain,
+		yDomain,
+		colorDomain,
+		children
+	} = $props()
 
-  // Build spec with domain overrides so PlotState uses them
-  const spec = $derived({
-    data, x, y, color,
-    geoms,
-    xDomain,
-    yDomain,
-    colorDomain
-  })
+	// Build spec with domain overrides so PlotState uses them
+	const spec = $derived({
+		data,
+		x,
+		y,
+		color,
+		geoms,
+		xDomain,
+		yDomain,
+		colorDomain
+	})
 </script>
 
 <PlotChart {spec} {helpers} {width} {height} {mode} {grid} {legend}>
-  {@render children?.()}
+	{@render children?.()}
 </PlotChart>

package/src/FacetPlot.svelte

@@ -1,90 +1,114 @@
 <script>
-  import { splitByField, getFacetDomains } from './lib/plot/facet.js'
-  import { distinct } from './lib/brewing/colors.js'
-  import PlotPanel from './FacetPlot/Panel.svelte'
+	import { splitByField, getFacetDomains } from './lib/plot/facet.js'
+	import { distinct } from './lib/brewing/colors.js'
+	import PlotPanel from './FacetPlot/Panel.svelte'
 
-  /**
-   * @type {{
-   *   data: Object[],
-   *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
-   *   x?: string,
-   *   y?: string,
-   *   color?: string,
-   *   geoms?: import('./lib/plot/types.js').GeomSpec[],
-   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
-   *   panelWidth?: number,
-   *   panelHeight?: number,
-   *   width?: number,
-   *   height?: number,
-   *   mode?: 'light' | 'dark',
-   *   grid?: boolean,
-   *   legend?: boolean,
-   *   children?: import('svelte').Snippet
-   * }}
-   */
-  let {
-    data = [],
-    facet,
-    x,
-    y,
-    fill,
-    color,
-    geoms = [],
-    helpers = {},
-    panelWidth,
-    panelHeight,
-    width = 900,
-    height = 300,
-    mode = 'light',
-    grid = true,
-    legend = false,
-    children
-  } = $props()
+	/**
+	 * @type {{
+	 *   data: Object[],
+	 *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
+	 *   x?: string,
+	 *   y?: string,
+	 *   color?: string,
+	 *   fill?: string,
+	 *   pattern?: string,
+	 *   symbol?: string,
+	 *   geom?: string,
+	 *   stat?: string,
+	 *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+	 *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+	 *   panelWidth?: number,
+	 *   panelHeight?: number,
+	 *   width?: number,
+	 *   height?: number,
+	 *   mode?: 'light' | 'dark',
+	 *   grid?: boolean,
+	 *   legend?: boolean,
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let {
+		data = [],
+		facet,
+		x,
+		y,
+		fill = undefined,
+		color = undefined,
+		pattern = undefined,
+		symbol = undefined,
+		geom = 'bar',
+		stat = 'identity',
+		geoms = [],
+		helpers = {},
+		panelWidth,
+		panelHeight,
+		width = 900,
+		height = 300,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		children
+	} = $props()
 
-  // `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
-  const colorChannel = $derived(fill ?? color)
+	// `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
+	const colorChannel = $derived(fill ?? color)
 
-  const panels  = $derived(splitByField(data, facet.by))
-  const scales  = $derived(facet.scales ?? 'fixed')
-  const domains = $derived(
-    x && y ? getFacetDomains(panels, { x, y }, scales) : new Map()
-  )
+	// Effective geom list: explicit array takes precedence; otherwise build from shorthand props
+	const effectiveGeoms = $derived(
+		geoms.length > 0
+			? geoms
+			: [
+					{
+						type: geom,
+						stat,
+						...(pattern !== undefined && { pattern }),
+						...(symbol !== undefined && { symbol })
+					}
+				]
+	)
 
-  // Global color domain ensures the same value maps to the same color in every panel.
-  const colorDomain = $derived(colorChannel ? distinct(data, colorChannel) : undefined)
+	const panels = $derived(splitByField(data, facet.by))
+	const scales = $derived(facet.scales ?? 'fixed')
+	const domains = $derived(x && y ? getFacetDomains(panels, { x, y }, scales) : new Map())
 
-  const cols = $derived(facet.cols ?? Math.min(panels.size, 3))
-  const pw   = $derived(panelWidth  ?? Math.floor(width / cols))
-  const ph   = $derived(panelHeight ?? height)
+	// Global color domain ensures the same value maps to the same color in every panel.
+	const colorDomain = $derived(colorChannel ? distinct(data, colorChannel) : undefined)
+
+	const cols = $derived(facet.cols ?? Math.min(panels.size, 3))
+	const pw = $derived(panelWidth ?? Math.floor(width / cols))
+	const ph = $derived(panelHeight ?? height)
 </script>
 
 <div data-facet-grid style:--facet-cols={cols}>
-  {#each [...panels.entries()] as [facetValue, panelData] (`${facetValue}`)}
-    <div data-facet-panel data-facet-value={facetValue}>
-      <div data-facet-title>{facetValue}</div>
-      <PlotPanel
-        data={panelData}
-        {x} {y} color={colorChannel}
-        {geoms} {helpers}
-        width={pw}
-        height={ph}
-        {mode} {grid}
-        legend={false}
-        xDomain={domains.get(facetValue)?.xDomain}
-        yDomain={domains.get(facetValue)?.yDomain}
-        {colorDomain}
-      >
-        <!-- Render caller-supplied geoms inside every panel (each gets its own PlotState context) -->
-        {@render children?.()}
-      </PlotPanel>
-    </div>
-  {/each}
+	{#each [...panels.entries()] as [facetValue, panelData] (`${facetValue}`)}
+		<div data-facet-panel data-facet-value={facetValue}>
+			<div data-facet-title>{facetValue}</div>
+			<PlotPanel
+				data={panelData}
+				{x}
+				{y}
+				color={colorChannel}
+				geoms={effectiveGeoms}
+				{helpers}
+				width={pw}
+				height={ph}
+				{mode}
+				{grid}
+				legend={false}
+				xDomain={domains.get(facetValue)?.xDomain}
+				yDomain={domains.get(facetValue)?.yDomain}
+				{colorDomain}
+			>
+				<!-- Render caller-supplied geoms inside every panel (each gets its own PlotState context) -->
+				{@render children?.()}
+			</PlotPanel>
+		</div>
+	{/each}
 </div>
 
 <!-- Single shared legend outside the grid -->
 {#if legend}
-  <div data-facet-legend>
-    <!-- Legend content rendered by first panel; simplified for now -->
-  </div>
+	<div data-facet-legend>
+		<!-- Legend content rendered by first panel; simplified for now -->
+	</div>
 {/if}
-

package/src/Plot/Area.svelte

@@ -1,25 +1,32 @@
 <script>
 	import { getContext } from 'svelte'
+	import { area as d3Area } from 'd3-shape'
 
-	const brewer = getContext('chart-brewer')
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		y0 = undefined,
+		fill = 'steelblue',
+		opacity = 0.7,
+		curve = undefined
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const path = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return null
+		const innerHeight = state.innerHeight
+		const areaGen = d3Area()
+			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
+			.y1((d) => state.yScale(y ? d[y] : d) ?? 0)
+			.y0((d) => (y0 !== undefined ? state.yScale(d[y0] ?? y0) : innerHeight) ?? innerHeight)
+			.defined((d) => d != null)
+		if (curve) areaGen.curve(curve)
+		return areaGen(data)
+	})
 </script>
 
-{#if brewer && brewer.areas && brewer.areas.length > 0}
-	<g class="chart-areas" data-plot-type="area">
-		{#each brewer.areas as seg (seg.key ?? seg.d)}
-			<path
-				d={seg.d}
-				fill={seg.fill}
-				stroke={seg.stroke}
-				opacity="0.7"
-				data-plot-element="area"
-			/>
-		{/each}
-	</g>
+{#if path}
+	<path d={path} {fill} {opacity} stroke="none" data-plot-element="area" />
 {/if}
-
-<style>
-	.chart-areas {
-		pointer-events: none;
-	}
-</style>

package/src/Plot/Axis.svelte

@@ -1,73 +1,95 @@
 <script>
-  import { getContext } from 'svelte'
+	import { getContext } from 'svelte'
 
-  /** @type {'x' | 'y'} */
-  let { type = 'x', label = '' } = $props()
+	/** @type {'x' | 'y'} */
+	let { type = 'x', label = '', format = undefined } = $props()
 
-  const state = getContext('plot-state')
+	const state = getContext('plot-state')
 
-  const xTicks = $derived.by(() => {
-    const s = state.xScale
-    if (!s) return []
-    if (typeof s.bandwidth === 'function') {
-      return s.domain().map((val) => ({
-        value: val,
-        pos: (s(val) ?? 0) + s.bandwidth() / 2
-      }))
-    }
-    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
-  })
+	const xTicks = $derived.by(() => {
+		const s = state.xScale
+		if (!s) return []
+		if (typeof s.bandwidth === 'function') {
+			return s.domain().map((val) => ({
+				value: val,
+				pos: (s(val) ?? 0) + s.bandwidth() / 2
+			}))
+		}
+		return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+	})
 
-  const yTicks = $derived.by(() => {
-    const s = state.yScale
-    if (!s) return []
-    if (typeof s.bandwidth === 'function') {
-      return s.domain().map((val) => ({
-        value: val,
-        pos: (s(val) ?? 0) + s.bandwidth() / 2
-      }))
-    }
-    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
-  })
+	const yTicks = $derived.by(() => {
+		const s = state.yScale
+		if (!s) return []
+		if (typeof s.bandwidth === 'function') {
+			return s.domain().map((val) => ({
+				value: val,
+				pos: (s(val) ?? 0) + s.bandwidth() / 2
+			}))
+		}
+		return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+	})
 
-  const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
-  const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
+	const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
+	const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
 </script>
 
 {#if type === 'x'}
-  <g class="axis x-axis" transform={xTransform} data-plot-axis="x">
-    <line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
-    {#each xTicks as tick (tick.value)}
-      <g transform="translate({tick.pos}, 0)" data-plot-tick>
-        <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" />
-        <text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
-          {tick.value}
-        </text>
-      </g>
-    {/each}
-    {#if label}
-      <text x={state.innerWidth / 2} y="36" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
-    {/if}
-  </g>
+	<g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+		<line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
+		{#each xTicks as tick (tick.value)}
+			<g transform="translate({tick.pos}, 0)" data-plot-tick>
+				<line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" />
+				<text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
+					{format ? format(tick.value) : tick.value}
+				</text>
+			</g>
+		{/each}
+		{#if label}
+			<text
+				x={state.innerWidth / 2}
+				y="36"
+				text-anchor="middle"
+				class="axis-label"
+				data-plot-axis-label>{label}</text
+			>
+		{/if}
+	</g>
 {:else}
-  <g class="axis y-axis" transform={yTransform} data-plot-axis="y">
-    <line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
-    {#each yTicks as tick (tick.value)}
-      <g transform="translate(0, {tick.pos})" data-plot-tick>
-        <line x1="-6" y1="0" x2="0" y2="0" stroke="currentColor" />
-        <text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
-          {tick.value}
-        </text>
-      </g>
-    {/each}
-    {#if label}
-      <text transform="rotate(-90)" x={-(state.innerHeight / 2)} y="-40" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
-    {/if}
-  </g>
+	<g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+		<line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
+		{#each yTicks as tick (tick.value)}
+			<g transform="translate(0, {tick.pos})" data-plot-tick>
+				<line x1="-6" y1="0" x2="0" y2="0" stroke="currentColor" />
+				<text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
+					{format ? format(tick.value) : tick.value}
+				</text>
+			</g>
+		{/each}
+		{#if label}
+			<text
+				transform="rotate(-90)"
+				x={-(state.innerHeight / 2)}
+				y="-40"
+				text-anchor="middle"
+				class="axis-label"
+				data-plot-axis-label>{label}</text
+			>
+		{/if}
+	</g>
 {/if}
 
 <style>
-  .axis { font-size: 11px; fill: currentColor; stroke: currentColor; }
-  .axis-label { font-size: 13px; font-weight: 500; }
-  [data-plot-axis-line] { stroke: currentColor; }
+	.axis {
+		font-size: 11px;
+		fill: currentColor;
+		stroke: currentColor;
+	}
+	.axis-label {
+		font-size: 13px;
+		font-weight: 500;
+	}
+	[data-plot-axis-line] {
+		stroke: currentColor;
+	}
 </style>