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

package/README.md

@@ -16,30 +16,30 @@ The chart package provides a set of composable components that can be combined t
 
 ```svelte
 <script>
-   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 },
-     // More data...
-   ]
-   
-   // Use the dataset class to process the data
-   let data = dataset(sampleData)
-     .groupBy('model')
-     .summarize('name', { count: values => values.length })
-     .rollup()
+  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 }
+    // More data...
+  ]
+
+  // Use the dataset class to process the data
+  let data = dataset(sampleData)
+    .groupBy('model')
+    .summarize('name', { count: (values) => values.length })
+    .rollup()
 </script>
 
 <Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 30, bottom: 40, left: 50 }}>
-   <Plot.Grid direction="y" />
-   <Plot.Axis type="x" field="model" label="Model" />
-   <Plot.Axis type="y" field="count" label="Count" />
-   <Plot.Bar x="model" y="count" fill="category" />
-   <Plot.Legend title="Categories" />
+  <Plot.Grid direction="y" />
+  <Plot.Axis type="x" field="model" label="Model" />
+  <Plot.Axis type="y" field="count" label="Count" />
+  <Plot.Bar x="model" y="count" fill="category" />
+  <Plot.Legend title="Categories" />
 </Plot.Root>
 ```
 
@@ -50,6 +50,7 @@ The chart package provides a set of composable components that can be combined t
 The container component for all charts.
 
 **Props:**
+
 - `data` - The dataset to visualize (array or dataset object)
 - `width` - Width of the chart in pixels (default: 600)
 - `height` - Height of the chart in pixels (default: 400)
@@ -63,6 +64,7 @@ The container component for all charts.
 Renders an axis for the chart.
 
 **Props:**
+
 - `type` - Type of axis ('x' or 'y')
 - `field` - Data field to use for this axis
 - `label` - Axis label text
@@ -75,6 +77,7 @@ Renders an axis for the chart.
 Renders a bar chart.
 
 **Props:**
+
 - `x` - Field to use for x-axis values
 - `y` - Field to use for y-axis values
 - `fill` - Field to use for coloring the bars (optional)
@@ -88,6 +91,7 @@ Renders a bar chart.
 Renders grid lines for the chart.
 
 **Props:**
+
 - `direction` - Direction of grid lines ('x', 'y', or 'both') (default: 'both')
 - `xTicks` - Number of ticks for x-axis grid (optional)
 - `yTicks` - Number of ticks for y-axis grid (optional)
@@ -100,6 +104,7 @@ Renders grid lines for the chart.
 Renders a legend for the chart.
 
 **Props:**
+
 - `title` - Title for the legend (optional)
 - `align` - Alignment of the legend ('left', 'right', 'center') (default: 'right')
 - `verticalAlign` - Vertical position of the legend ('top', 'bottom') (default: 'top')
@@ -113,23 +118,26 @@ The chart components work seamlessly with the `@rokkit/data` package, allowing f
 
 ```svelte
 <script>
-   import { Plot } from '@rokkit/chart'
-   import { dataset } from '@rokkit/data'
-   
-   let input = [
-     // Your raw data here
-   ]
-   
-   $: processedData = dataset(input)
-     .groupBy('category')
-     .summarize('name', { count: values => values.length, total: values => values.reduce((a, b) => a + b, 0) })
-     .rollup()
+  import { Plot } from '@rokkit/chart'
+  import { dataset } from '@rokkit/data'
+
+  let input = [
+    // Your raw data here
+  ]
+
+  $: processedData = dataset(input)
+    .groupBy('category')
+    .summarize('name', {
+      count: (values) => values.length,
+      total: (values) => values.reduce((a, b) => a + b, 0)
+    })
+    .rollup()
 </script>
 
 <Plot.Root data={processedData} fill="category">
-   <Plot.Axis type="x" field="category" />
-   <Plot.Axis type="y" field="count" />
-   <Plot.Bar x="category" y="count" />
+  <Plot.Axis type="x" field="category" />
+  <Plot.Axis type="y" field="count" />
+  <Plot.Bar x="category" y="count" />
 </Plot.Root>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.121",
+  "version": "1.0.0-next.122",
   "type": "module",
   "description": "Data-driven chart components",
   "author": "Jerry Thomas <me@jerrythomas.name>",

package/src/Plot/Axis.svelte

@@ -1,103 +1,95 @@
 <script>
-  import { getContext } from 'svelte';
-  import { createXAxis, createYAxis, createTickAttributes } from '../lib/brewing/axes.svelte.js';
+	import { getContext } from 'svelte'
+	import { createXAxis, createYAxis, createTickAttributes } from '../lib/brewing/axes.svelte.js'
 
-  let {
-    type = 'x',
-    field = null,
-    label = '',
-    ticks = null,
-    tickFormat = null,
-    grid = false
-  } = $props();
+	let {
+		type = 'x',
+		field = null,
+		label = '',
+		ticks = null,
+		tickFormat = null,
+		grid = false
+	} = $props()
 
-  // Get brewer from context
-  const brewer = getContext('chart-brewer');
-  
-  // Set field mappings in the brewer
-  $effect(() => {
-    if (field) {
-      brewer.setFields({
-        [type]: field
-      });
-      
-      // Ensure scales are updated
-      brewer.createScales();
-    }
-  });
-  
-  // Compute axis data whenever scales change
-  let axisData = $derived(
-    type === 'x' 
-      ? brewer.createXAxis({ tickCount: ticks, tickFormat, label }) 
-      : brewer.createYAxis({ tickCount: ticks, tickFormat, label })
-  );
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Set field mappings in the brewer
+	$effect(() => {
+		if (field) {
+			brewer.setFields({
+				[type]: field
+			})
+
+			// Ensure scales are updated
+			brewer.createScales()
+		}
+	})
+
+	// Compute axis data whenever scales change
+	let axisData = $derived(
+		type === 'x'
+			? brewer.createXAxis({ tickCount: ticks, tickFormat, label })
+			: brewer.createYAxis({ tickCount: ticks, tickFormat, label })
+	)
 </script>
 
-<g 
-  class="axis {type}-axis"
-  transform={axisData.transform}
-  data-plot-axis={type}
->
-  {#if axisData.ticks.length > 0}
-    <!-- Axis line -->
-    <line
-      data-plot-axis-line
-      x1={type === 'x' ? 0 : 0}
-      y1={type === 'x' ? 0 : 0}
-      x2={type === 'x' ? brewer.getDimensions().innerWidth : 0}
-      y2={type === 'x' ? 0 : brewer.getDimensions().innerHeight}
-      stroke="currentColor"
-    />
-    
-    <!-- Ticks -->
-    {#each axisData.ticks as tick}
-      {@const attrs = createTickAttributes(tick, type)}
-      <g {...attrs}>
-        <line 
-          x1="0" 
-          y1="0" 
-          x2={type === 'x' ? 0 : -6} 
-          y2={type === 'x' ? 6 : 0} 
-          stroke="currentColor"
-        />
-        <text 
-          x={type === 'x' ? 0 : -9}
-          y={type === 'x' ? 9 : 0}
-          data-plot-tick-label
-        >
-          {tick.formattedValue}
-        </text>
-      </g>
-    {/each}
-    
-    <!-- Axis label -->
-    {#if label}
-      <text
-        class="axis-label {type}-axis-label"
-        transform={axisData.labelTransform}
-        text-anchor="middle"
-        data-plot-axis-label
-      >
-        {label}
-      </text>
-    {/if}
-  {/if}
+<g class="axis {type}-axis" transform={axisData.transform} data-plot-axis={type}>
+	{#if axisData.ticks.length > 0}
+		<!-- Axis line -->
+		<line
+			data-plot-axis-line
+			x1={type === 'x' ? 0 : 0}
+			y1={type === 'x' ? 0 : 0}
+			x2={type === 'x' ? brewer.getDimensions().innerWidth : 0}
+			y2={type === 'x' ? 0 : brewer.getDimensions().innerHeight}
+			stroke="currentColor"
+		/>
+
+		<!-- Ticks -->
+		{#each axisData.ticks as tick, index (index)}
+			{@const attrs = createTickAttributes(tick, type)}
+			<g {...attrs}>
+				<line
+					x1="0"
+					y1="0"
+					x2={type === 'x' ? 0 : -6}
+					y2={type === 'x' ? 6 : 0}
+					stroke="currentColor"
+				/>
+				<text x={type === 'x' ? 0 : -9} y={type === 'x' ? 9 : 0} data-plot-tick-label>
+					{tick.formattedValue}
+				</text>
+			</g>
+		{/each}
+
+		<!-- Axis label -->
+		{#if label}
+			<text
+				class="axis-label {type}-axis-label"
+				transform={axisData.labelTransform}
+				text-anchor="middle"
+				data-plot-axis-label
+			>
+				{label}
+			</text>
+		{/if}
+	{/if}
 </g>
 
 <style>
-  .axis {
-    font-size: 12px;
-  }
-  
-  .axis-label {
-    font-size: 14px;
-    font-weight: 500;
-    fill: currentColor;
-  }
-  
-  [data-plot-tick-label] {
-    font-size: 11px;
-    fill: currentColor;
-  }
-</style>
+	.axis {
+		font-size: 12px;
+	}
+
+	.axis-label {
+		font-size: 14px;
+		font-weight: 500;
+		fill: currentColor;
+	}
+
+	[data-plot-tick-label] {
+		font-size: 11px;
+		fill: currentColor;
+	}
+</style>

package/src/Plot/Bar.svelte

@@ -1,95 +1,95 @@
 <script>
-  import { getContext } from 'svelte';
-  import { ChartBrewer } from '../lib/brewing/index.svelte.js';
+	import { getContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
 
-  let {
-    x = null,
-    y = null,
-    fill = null,
-    color = "#4682b4",
-    opacity = 1,
-    animationDuration = 300,
-    onClick = null
-  } = $props();
+	let {
+		x = null,
+		y = null,
+		fill = null,
+		color = '#4682b4',
+		opacity = 1,
+		animationDuration = 300,
+		onClick = null
+	} = $props()
 
-  // Get brewer from context
-  const brewer = getContext('chart-brewer');
-  
-  // Set field mappings in the brewer
-  $effect(() => {
-    brewer.setFields({
-      x,
-      y,
-      color: fill
-    });
-    
-    // Ensure scales are updated
-    brewer.createScales();
-  });
-  
-  // Compute bars whenever data or fields change
-  let bars = $derived(brewer.createBars());
-  
-  // Animation transition values
-  let initialY = $state(0);
-  let initialHeight = $state(0);
-  
-  // Handle resetting animation state for new bars
-  $effect(() => {
-    if (bars && bars.length > 0) {
-      initialY = brewer.getDimensions().innerHeight;
-      initialHeight = 0;
-      
-      // Reset to actual positions after a delay
-      setTimeout(() => {
-        initialY = 0;
-        initialHeight = 0;
-      }, 10);
-    }
-  });
-  
-  // Handle bar click
-  function handleClick(event, bar) {
-    if (onClick) onClick(bar.data, event);
-  }
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Set field mappings in the brewer
+	$effect(() => {
+		brewer.setFields({
+			x,
+			y,
+			color: fill
+		})
+
+		// Ensure scales are updated
+		brewer.createScales()
+	})
+
+	// Compute bars whenever data or fields change
+	let bars = $derived(brewer.createBars())
+
+	// Animation transition values
+	let initialY = $state(0)
+	let initialHeight = $state(0)
+
+	// Handle resetting animation state for new bars
+	$effect(() => {
+		if (bars && bars.length > 0) {
+			initialY = brewer.getDimensions().innerHeight
+			initialHeight = 0
+
+			// Reset to actual positions after a delay
+			setTimeout(() => {
+				initialY = 0
+				initialHeight = 0
+			}, 10)
+		}
+	})
+
+	// Handle bar click
+	function handleClick(event, bar) {
+		if (onClick) onClick(bar.data, event)
+	}
 </script>
 
 {#if bars && bars.length > 0}
-  <g class="chart-bars" data-plot-type="bar">
-    {#each bars as bar, i (bar.data[x])}
-      {@const barY = initialY > 0 ? brewer.getDimensions().innerHeight : bar.y}
-      {@const barHeight = initialHeight > 0 ? 0 : bar.height}
-      
-      <rect
-        class="bar"
-        x={bar.x}
-        y={barY}
-        width={bar.width}
-        height={barHeight}
-        fill={bar.color}
-        opacity={opacity}
-        on:click={(event) => handleClick(event, bar)}
-        on:mouseenter={(event) => {
-          event.target.setAttribute('opacity', Math.min(opacity + 0.2, 1));
-        }}
-        on:mouseleave={(event) => {
-          event.target.setAttribute('opacity', opacity);
-        }}
-        style="transition: y {animationDuration}ms ease, height {animationDuration}ms ease;"
-        role="graphics-symbol"
-        aria-label="Bar representing {bar.data[x]} with value {bar.data[y]}"
-        data-plot-element="bar"
-        data-plot-value={bar.data[y]}
-        data-plot-category={bar.data[x]}
-      >
-        <title>{bar.data[x]}: {bar.data[y]}</title>
-      </rect>
-    {/each}
-  </g>
+	<g class="chart-bars" data-plot-type="bar">
+		{#each bars as bar, i (bar.data[x])}
+			{@const barY = initialY > 0 ? brewer.getDimensions().innerHeight : bar.y}
+			{@const barHeight = initialHeight > 0 ? 0 : bar.height}
+
+			<rect
+				class="bar"
+				x={bar.x}
+				y={barY}
+				width={bar.width}
+				height={barHeight}
+				fill={bar.color}
+				{opacity}
+				on:click={(event) => handleClick(event, bar)}
+				on:mouseenter={(event) => {
+					event.target.setAttribute('opacity', Math.min(opacity + 0.2, 1))
+				}}
+				on:mouseleave={(event) => {
+					event.target.setAttribute('opacity', opacity)
+				}}
+				style="transition: y {animationDuration}ms ease, height {animationDuration}ms ease;"
+				role="graphics-symbol"
+				aria-label="Bar representing {bar.data[x]} with value {bar.data[y]}"
+				data-plot-element="bar"
+				data-plot-value={bar.data[y]}
+				data-plot-category={bar.data[x]}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+		{/each}
+	</g>
 {/if}
 
 <style>
-  .chart-bars .bar {
-    cursor: pointer;
-  }
-</style>
+	.chart-bars .bar {
+		cursor: pointer;
+	}
+</style>

package/src/Plot/Grid.svelte

@@ -1,68 +1,68 @@
 <script>
-  import { getContext } from 'svelte';
-  import { createGrid } from '../lib/brewing/axes.svelte.js';
+	import { getContext } from 'svelte'
+	import { createGrid } from '../lib/brewing/axes.svelte.js'
 
-  let {
-    direction = 'both',
-    xTicks = null,
-    yTicks = null,
-    color = 'currentColor',
-    opacity = 0.1,
-    lineStyle = 'solid'
-  } = $props();
+	let {
+		direction = 'both',
+		xTicks = null,
+		yTicks = null,
+		color = 'currentColor',
+		opacity = 0.1,
+		lineStyle = 'solid'
+	} = $props()
 
-  // Get brewer from context
-  const brewer = getContext('chart-brewer');
-  
-  // Get grid data
-  let gridData = $derived(brewer.createGrid({ 
-    direction, 
-    xTickCount: xTicks, 
-    yTickCount: yTicks 
-  }));
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
 
-  // Convert lineStyle to stroke-dasharray
-  let strokeDasharray = $derived(
-    lineStyle === 'dashed' ? '5,5' : 
-    lineStyle === 'dotted' ? '1,3' : 
-    'none'
-  );
+	// Get grid data
+	let gridData = $derived(
+		brewer.createGrid({
+			direction,
+			xTickCount: xTicks,
+			yTickCount: yTicks
+		})
+	)
+
+	// Convert lineStyle to stroke-dasharray
+	let strokeDasharray = $derived(
+		lineStyle === 'dashed' ? '5,5' : lineStyle === 'dotted' ? '1,3' : 'none'
+	)
 </script>
 
 <g class="chart-grid" data-plot-grid={direction}>
-  {#if direction === 'x' || direction === 'both'}
-    {#each gridData.xLines as line}
-      <line
-        data-plot-grid-line="x"
-        x1={line.x1}
-        y1={line.y1}
-        x2={line.x2}
-        y2={line.y2}
-        stroke={color}
-        stroke-opacity={opacity}
-        stroke-dasharray={strokeDasharray}
-      />
-    {/each}
-  {/if}
+	{#if direction === 'x' || direction === 'both'}
+		{#each gridData.xLines as line, index (index)}
+			<line
+				data-plot-grid-line="x"
+				x1={line.x1}
+				y1={line.y1}
+				x2={line.x2}
+				y2={line.y2}
+				stroke={color}
+				stroke-opacity={opacity}
+				stroke-dasharray={strokeDasharray}
+			/>
+		{/each}
+	{/if}
 
-  {#if direction === 'y' || direction === 'both'}
-    {#each gridData.yLines as line}
-      <line
-        data-plot-grid-line="y"
-        x1={line.x1}
-        y1={line.y1}
-        x2={line.x2}
-        y2={line.y2}
-        stroke={color}
-        stroke-opacity={opacity}
-        stroke-dasharray={strokeDasharray}
-      />
-    {/each}
-  {/if}
+	{#if direction === 'y' || direction === 'both'}
+		{#each gridData.yLines as line, index (index)}
+			<line
+				data-plot-grid-line="y"
+				x1={line.x1}
+				y1={line.y1}
+				x2={line.x2}
+				y2={line.y2}
+				stroke={color}
+				stroke-opacity={opacity}
+				stroke-dasharray={strokeDasharray}
+			/>
+		{/each}
+	{/if}
 </g>
 
 <style>
-  .chart-grid {
-    pointer-events: none;
-  }
-</style>
+	.chart-grid {
+		pointer-events: none;
+	}
+</style>