@rokkit/chart 1.0.0-next.11 → 1.0.0-next.121

package/src/Plot/Root.svelte

@@ -0,0 +1,112 @@
+<script>
+  import { setContext } from 'svelte';
+  import { ChartBrewer } from '../lib/brewing/index.svelte.js';
+  
+  let {
+    data = [],
+    width = 600,
+    height = 400,
+    margin = { top: 20, right: 30, bottom: 40, left: 50 },
+    fill = null,
+    responsive = true,
+    animationDuration = 300
+  } = $props();
+  
+  // Create chart brewer instance
+  let brewer = $state(new ChartBrewer({
+    width,
+    height,
+    margin,
+    animationDuration
+  }));
+  
+  // Chart dimensions derived from brewer
+  let dimensions = $derived(brewer.getDimensions());
+  
+  // Process data
+  $effect(() => {
+    // If data has a select method (dataset object), call it to get actual data
+    const chartData = data.select && typeof data.select === 'function' ? data.select() : data;
+    
+    // Update brewer with data and fields
+    brewer.setData(chartData);
+    brewer.setFields({ color: fill });
+    
+    // Create scales after setting data
+    brewer.createScales();
+  });
+  
+  // Update chart dimensions when props change
+  $effect(() => {
+    brewer.setDimensions({ width, height, margin });
+  });
+  
+  // Provide chart context to child components
+  setContext('chart-brewer', brewer);
+  
+  // Handle responsive behavior
+  let container;
+  
+  $effect(() => {
+    if (!responsive || !container || !document) return;
+    
+    const resizeObserver = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) return;
+      
+      const containerWidth = entry.contentRect.width;
+      const aspectRatio = height / width;
+      
+      // Update chart dimensions while maintaining aspect ratio
+      brewer.setDimensions({
+        width: containerWidth,
+        height: containerWidth * aspectRatio
+      });
+      
+      // Update scales after dimensions change
+      brewer.createScales();
+    });
+    
+    // Start observing container size
+    resizeObserver.observe(container);
+    
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+</script>
+
+<div class="chart-container" bind:this={container} data-plot-root>
+  <svg
+    width={dimensions.width}
+    height={dimensions.height}
+    viewBox="0 0 {dimensions.width} {dimensions.height}"
+    role="img"
+    aria-label="Chart visualization"
+  >
+    <g 
+      class="chart-area"
+      transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
+      data-plot-canvas
+    >
+      <slot />
+    </g>
+  </svg>
+</div>
+
+<style>
+  .chart-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+  
+  svg {
+    display: block;
+    overflow: visible;
+  }
+  
+  .chart-area {
+    pointer-events: all;
+  }
+</style>

package/src/Plot/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './Root.svelte'
+export { default as Axis } from './Axis.svelte'
+export { default as Bar } from './Bar.svelte'
+export { default as Legend } from './Legend.svelte'
+export { default as Grid } from './Grid.svelte'

package/src/Symbol.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { components } from './symbols'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 10,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		name = 'circle',
+		...restProps
+	} = $props()
+
+	let RenderShape = $derived(components[name] ?? components.default)
+	let props = $derived({ ...restProps, x, y, size, fill, stroke })
+</script>
+
+<!-- {#snippet defaultSymbol(props)}
+	<circle cx={x} cy={y} r={size / 2} {fill} {stroke} />
+{/snippet} -->
+<RenderShape {...props} />

package/src/{chart/Texture.svelte → Texture.svelte}

@@ -1,8 +1,8 @@
 <script>
 	export let id
-	export let fill
 	export let path
-	export let contrast
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
 	export let thickness = 0.5
 	export let patternUnits = 'userSpaceOnUse'
 	export let size = 10
@@ -11,6 +11,6 @@
 <pattern {id} {patternUnits} width={size} height={size}>
 	<rect width={size} height={size} {fill} />
 	{#if path}
-		<path d={path} fill="none" stroke={contrast} stroke-width={thickness} />
+		<path d={path} fill="none" {stroke} stroke-width={thickness} />
 	{/if}
 </pattern>

package/src/elements/Bar.svelte

@@ -25,11 +25,5 @@
 
 <rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
 <rect x={$scales.x(0)} {y} width={5} {height} {fill} />
-<Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
-<Label
-	x={width}
-	y={y + height - 14}
-	anchor={textAnchor}
-	label={formattedValue}
-	small
-/>
+<Label x={width} y={y + textHeight + 8} anchor={textAnchor} text={name} />
+<Label x={width} y={y + height - 14} anchor={textAnchor} text={formattedValue} small />

package/src/elements/ColorRamp.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../lib/utils'
+	import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0
@@ -14,13 +14,11 @@
 		.range([x, x + width])
 		.domain(scale.domain())
 	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), value: d }))
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
 
 	$: colors = ticks.map(({ value }) => ({
 		color: scale(value),
-		offset: `${scalePercent(value)}%`,
+		offset: `${scalePercent(value)}%`
 	}))
 	$: id = uniqueId('legend-')
 </script>

package/src/elements/ContinuousLegend.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
+	// import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0
@@ -9,16 +9,15 @@
 	export let width = 100
 	export let tickCount = 5
 	export let scale
+	export let id = 'legend'
 
 	$: scaleTicks = scaleLinear()
 		.range([x, x + 100])
 		.domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), label: d }))
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
 
 	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	// $: id = uniqueId('legend-')
 </script>
 
 <defs>

package/src/elements/DefinePatterns.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { uniq } from 'ramda'
+
+	export let size = 10
+	export let patternUnits = 'userSpaceOnUse'
+	/** @type {Array<import('./types').Pattern>} */
+	export let patterns = []
+
+	$: names = uniq(patterns.map(({ id }) => id))
+</script>
+
+{#if names.length < patterns.length}
+	<error> Patterns should be an array and should have unique names for each pattern </error>
+{:else if patterns.length > 0}
+	<defs>
+		{#each patterns as { id, component, fill, stroke }}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<svelte:component this={component} {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -6,17 +6,15 @@
 	export let space = 2
 	export let padding = 5
 	export let scale
-	export let tickCount
+	export let tickCount = 10
 
 	$: sizeWithSpace = size + space
 	$: ticks = scale.ticks.apply(scale, [tickCount])
 </script>
 
 {#each ticks as tick, i}
-	<text
-		x={x + padding + i * sizeWithSpace + size / 2}
-		y={y + size / 2}
-		font-size={textSize}>{tick}</text
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
 	>
 	<rect
 		x={x + padding + i * sizeWithSpace}

package/src/elements/Label.svelte

@@ -1,12 +1,13 @@
 <script>
-	export let small = false
-	export let label
-	export let angle = 0
-	export let anchor = 'middle'
 	export let x
 	export let y
+	export let text
+	export let angle = 0
+	export let small = false
+	export let anchor = 'middle'
 
 	$: transform = `translate(${x},${y}) rotate(${angle})`
+	$: anchor = ['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle'
 </script>
 
-<text class="label" class:small text-anchor={anchor} {transform}>{label}</text>
+<text class="label" class:small text-anchor={anchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { swatch, swatchGrid } from '../old_lib'
+	import Symbol from '../Symbol.svelte'
+
+	export let base = 'teal'
+	export let size = 4
+	export let shade = 600
+
+	$: grid = swatchGrid($swatch.keys.symbol.length, size, 10)
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index}
+		<Symbol
+			{x}
+			{y}
+			size={r * 2}
+			name={$swatch.keys.symbol[index]}
+			fill={$swatch.palette[base][shade]}
+			stroke={$swatch.palette[base][shade]}
+		/>
+	{/each}
+</svg>

package/src/elements/index.js

@@ -0,0 +1,6 @@
+export { default as Bar } from './Bar.svelte'
+export { default as ColorRamp } from './ColorRamp.svelte'
+export { default as ContinuousLegend } from './ContinuousLegend.svelte'
+export { default as Label } from './Label.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { default as SymbolGrid } from './SymbolGrid.svelte'

package/src/examples/BarChartExample.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { Plot } from '../index.js';
+  import { dataset } from '@rokkit/data';
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
+  ];
+
+  // Use the dataset class to process the data
+  const data = dataset(sampleData)
+    .groupBy('category')
+    .summarize('name', { count: values => values.length })
+    .rollup();
+
+  // Chart dimensions
+  const width = 600;
+  const height = 400;
+  const margin = { top: 20, right: 100, bottom: 60, left: 60 };
+
+  // Click handler for bars
+  function handleBarClick(item) {
+    console.log('Bar clicked:', item);
+    alert(`Clicked on ${item.category} with count ${item.count}`);
+  }
+</script>
+
+<div class="example">
+  <h2>Bar Chart Example</h2>
+
+  <div class="chart-wrapper">
+    <Plot.Root {data} {width} {height} {margin} fill="category">
+      <Plot.Grid direction="y" lineStyle="dashed" />
+      <Plot.Axis type="x" field="category" label="Product Category" />
+      <Plot.Axis type="y" field="count" label="Number of Products" />
+      <Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} />
+      <Plot.Legend title="Categories" />
+    </Plot.Root>
+  </div>
+
+  <div class="code-example">
+    <h3>Example Code:</h3>
+    <pre>
+&lt;script&gt;
+  import { Plot } from '@rokkit/chart';
+  import { dataset } from '@rokkit/data';
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
+  ];
+
+  // Use the dataset class to process the data
+  const data = dataset(sampleData)
+    .groupBy('category')
+    .summarize('name', { count: values => values.length })
+    .rollup();
+&lt;/script&gt;
+
+&lt;Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 100, bottom: 60, left: 60 }} fill="category"&gt;
+  &lt;Plot.Grid direction="y" lineStyle="dashed" /&gt;
+  &lt;Plot.Axis type="x" field="category" label="Product Category" /&gt;
+  &lt;Plot.Axis type="y" field="count" label="Number of Products" /&gt;
+  &lt;Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} /&gt;
+  &lt;Plot.Legend title="Categories" /&gt;
+&lt;/Plot.Root&gt;
+    </pre>
+  </div>
+</div>

package/src/index.js

@@ -1,16 +1,18 @@
-// export { aes } from './lib/aes'
-// export { timelapse } from './lib/timelapse'
-// export { axisTicks } from './lib/axis'
-export { timer, elapsed } from './lib/timer'
-// export { default as Chart } from './chart/Chart.svelte'
-// export { default as Axis } from './chart/Axis.svelte'
-export { default as Swatch } from './chart/Swatch.svelte'
-// export { default as AxisTicks } from './chart/AxisTicks.svelte'
-// export { default as AxisGrid } from './chart/AxisGrid.svelte'
-// export { default as AxisLabels } from './chart/AxisLabels.svelte'
-export { default as BarPlot } from './plots/BarPlot.svelte'
-export { default as LinePlot } from './plots/LinePlot.svelte'
-export { default as BoxPlot } from './plots/BoxPlot.svelte'
-export { default as ViolinPlot } from './plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/ScatterPlot.svelte'
-export * from './components/lib'
+import Root from './Plot/Root.svelte';
+import Axis from './Plot/Axis.svelte';
+import Bar from './Plot/Bar.svelte';
+import Grid from './Plot/Grid.svelte';
+import Legend from './Plot/Legend.svelte';
+
+// Export components
+export const Plot = {
+  Root,
+  Axis,
+  Bar,
+  Grid,
+  Legend
+};
+
+// Export utilities
+export { ChartBrewer } from './lib/brewing/index.svelte.js';
+export * from './lib/brewing/index.svelte.js';

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

@@ -0,0 +1,179 @@
+import { scaleBand } from 'd3-scale';
+
+import { } from './types.js';
+
+/**
+ * @typedef {import('./types').TickData} TickData
+ * @typedef {import('./types').AxisData} AxisData
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Creates x-axis tick data for rendering
+ * 
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createXAxis(scales, dimensions, options = {}) {
+  if (!scales.x) return { ticks: [] };
+  
+  const { tickCount = null, tickFormat = null, label = '' } = options;
+  const xScale = scales.x;
+  
+  // Determine tick values
+  let tickValues;
+  if (xScale.ticks) {
+    // For continuous scales (linear, time)
+    tickValues = tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks();
+  } else {
+    // For band scales
+    tickValues = xScale.domain();
+    if (tickCount !== null && tickCount < tickValues.length) {
+      const step = Math.max(1, Math.floor(tickValues.length / tickCount));
+      tickValues = tickValues.filter((_, i) => i % step === 0);
+    }
+  }
+  
+  // Format ticks
+  const formatter = tickFormat || (v => v);
+  
+  // Generate tick data
+  const ticks = tickValues.map(value => {
+    const position = xScale.bandwidth 
+      ? xScale(value) + xScale.bandwidth() / 2 
+      : xScale(value);
+    
+    return {
+      value,
+      position,
+      formattedValue: formatter(value)
+    };
+  });
+  
+  return {
+    ticks,
+    label,
+    transform: `translate(0, ${dimensions.innerHeight})`,
+    labelTransform: `translate(${dimensions.innerWidth / 2}, 35)`
+  };
+}
+
+/**
+ * Creates y-axis tick data for rendering
+ * 
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createYAxis(scales, dimensions, options = {}) {
+  if (!scales.y) return { ticks: [] };
+  
+  const { tickCount = null, tickFormat = null, label = '' } = options;
+  const yScale = scales.y;
+  
+  // Determine tick values
+  let tickValues = [];
+  
+  if (yScale.ticks) {
+    tickValues = tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks();
+  } else if (yScale.domain) {
+    tickValues = yScale.domain();
+    if (tickCount !== null && tickValues.length > tickCount) {
+      const step = Math.max(1, Math.floor(tickValues.length / tickCount));
+      tickValues = tickValues.filter((_, i) => i % step === 0);
+    }
+  }
+  
+  // Format ticks
+  const formatter = tickFormat || (v => v);
+  
+  // Generate tick data
+  const ticks = tickValues.map(value => ({
+    value,
+    position: yScale(value),
+    formattedValue: formatter(value)
+  }));
+  
+  return {
+    ticks,
+    label,
+    transform: 'translate(0, 0)',
+    labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
+  };
+}
+
+/**
+ * Creates grid line data for rendering
+ * 
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Grid options
+ * @param {string} [options.direction='both'] - Grid direction ('x', 'y', or 'both')
+ * @param {number} [options.xTickCount] - Number of x-axis ticks
+ * @param {number} [options.yTickCount] - Number of y-axis ticks
+ * @returns {Object} Grid rendering data
+ */
+export function createGrid(scales, dimensions, options = {}) {
+  const { direction = 'both', xTickCount = null, yTickCount = null } = options;
+  const result = { xLines: [], yLines: [] };
+  
+  // Generate X grid lines (vertical)
+  if ((direction === 'x' || direction === 'both') && scales.x) {
+    const xAxis = createXAxis(scales, dimensions, { tickCount: xTickCount });
+    result.xLines = xAxis.ticks.map(tick => ({
+      x1: tick.position,
+      y1: 0,
+      x2: tick.position,
+      y2: dimensions.innerHeight
+    }));
+  }
+  
+  // Generate Y grid lines (horizontal)
+  if ((direction === 'y' || direction === 'both') && scales.y) {
+    const yAxis = createYAxis(scales, dimensions, { tickCount: yTickCount });
+    result.yLines = yAxis.ticks.map(tick => ({
+      x1: 0,
+      y1: tick.position,
+      x2: dimensions.innerWidth,
+      y2: tick.position
+    }));
+  }
+  
+  return result;
+}
+
+/**
+ * Creates DOM attributes for a tick element
+ * 
+ * @param {TickData} tick - Tick data
+ * @param {string} axis - Axis type ('x' or 'y')
+ * @returns {Object} Attributes for the tick
+ */
+export function createTickAttributes(tick, axis) {
+  if (axis === 'x') {
+    return {
+      'data-plot-tick': 'major',
+      'transform': `translate(${tick.position}, 0)`,
+      'text-anchor': 'middle'
+    };
+  } else {
+    return {
+      'data-plot-tick': 'major',
+      'transform': `translate(0, ${tick.position})`,
+      'text-anchor': 'end',
+      'dominant-baseline': 'middle'
+    };
+  }
+}