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

package/src/examples/BarChartExample.svelte

@@ -1,53 +1,53 @@
 <script>
-  import { Plot } from '../index.js';
-  import { dataset } from '@rokkit/data';
+	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 },
-  ];
+	// 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();
+	// 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 };
+	// 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}`);
-  }
+	// 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>
+	<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="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;
+	<div class="code-example">
+		<h3>Example Code:</h3>
+		<pre>
+<!-- &lt;script&gt;
   import { Plot } from '@rokkit/chart';
   import { dataset } from '@rokkit/data';
 
@@ -75,7 +75,7 @@
   &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;
+&lt;/Plot.Root&gt; -->
     </pre>
-  </div>
+	</div>
 </div>

package/src/index.js

@@ -1,18 +1,18 @@
-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';
+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
-};
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend
+}
 
 // Export utilities
-export { ChartBrewer } from './lib/brewing/index.svelte.js';
-export * from './lib/brewing/index.svelte.js';
+export { ChartBrewer } from './lib/brewing/index.svelte.js'
+export * from './lib/brewing/index.svelte.js'

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

@@ -1,6 +1,6 @@
-import { scaleBand } from 'd3-scale';
+// import { scaleBand } from 'd3-scale'
 
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').TickData} TickData
@@ -11,7 +11,7 @@ import { } from './types.js';
 
 /**
  * Creates x-axis tick data for rendering
- * 
+ *
  * @param {Object} scales - Chart scales
  * @param {Function} scales.x - X-axis scale
  * @param {Object} dimensions - Chart dimensions
@@ -22,52 +22,50 @@ import { } from './types.js';
  * @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)`
-  };
+	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
@@ -78,45 +76,45 @@ export function createXAxis(scales, dimensions, options = {}) {
  * @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)`
-  };
+	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
@@ -126,54 +124,54 @@ export function createYAxis(scales, dimensions, options = {}) {
  * @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;
+	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'
-    };
-  }
-}
+	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'
+		}
+	}
+}

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

@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').BarData} BarData
@@ -9,7 +9,7 @@ import { } from './types.js';
 
 /**
  * Creates bar data for rendering
- * 
+ *
  * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {string} fields.x - X-axis field
@@ -24,47 +24,47 @@ import { } from './types.js';
  * @returns {BarData[]} Bar data for rendering
  */
 export function createBars(data, fields, scales, dimensions, defaultColor = '#4682b4') {
-  if (!data || data.length === 0 || !scales.x || !scales.y) return [];
-  
-  const { x: xField, y: yField, color: colorField } = fields;
-  
-  return data.map(d => {
-    const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10;
-    const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2;
-    
-    return {
-      data: d,
-      x: barX,
-      y: scales.y(d[yField]),
-      width: barWidth,
-      height: dimensions.innerHeight - scales.y(d[yField]),
-      color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
-    };
-  });
+	if (!data || data.length === 0 || !scales.x || !scales.y) return []
+
+	const { x: xField, y: yField, color: colorField } = fields
+
+	return data.map((d) => {
+		const barWidth = scales.x.bandwidth ? scales.x.bandwidth() : 10
+		const barX = scales.x.bandwidth ? scales.x(d[xField]) : scales.x(d[xField]) - barWidth / 2
+
+		return {
+			data: d,
+			x: barX,
+			y: scales.y(d[yField]),
+			width: barWidth,
+			height: dimensions.innerHeight - scales.y(d[yField]),
+			color: colorField && scales.color ? scales.color(d[colorField]) : defaultColor
+		}
+	})
 }
 
 /**
  * Filter bars based on a selection criteria
- * 
+ *
  * @param {BarData[]} bars - Bar data array
  * @param {Object} selection - Selection criteria
  * @returns {BarData[]} Filtered bars
  */
 export function filterBars(bars, selection) {
-  if (!selection) return bars;
-  
-  return bars.filter(bar => {
-    for (const [key, value] of Object.entries(selection)) {
-      if (bar.data[key] !== value) return false;
-    }
-    return true;
-  });
+	if (!selection) return bars
+
+	return bars.filter((bar) => {
+		for (const [key, value] of Object.entries(selection)) {
+			if (bar.data[key] !== value) return false
+		}
+		return true
+	})
 }
 
 /**
  * Creates a grouped bars layout
- * 
- * @param {Array} data - Chart data 
+ *
+ * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {Object} scales - Chart scales
  * @param {Object} dimensions - Chart dimensions
@@ -72,43 +72,43 @@ export function filterBars(bars, selection) {
  * @returns {Object} Grouped bar data
  */
 export function createGroupedBars(data, fields, scales, dimensions, options = {}) {
-  if (!data || data.length === 0 || !fields.group) return { groups: [], bars: [] };
-  
-  const { x: xField, y: yField, group: groupField, color: colorField = groupField } = fields;
-  const { padding = 0.1 } = options;
-  
-  // Get unique groups and x values
-  const groups = [...new Set(data.map(d => d[groupField]))];
-  const xValues = [...new Set(data.map(d => d[xField]))];
-  
-  // Calculate group width and individual bar width
-  const xScale = scales.x;
-  const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20;
-  const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length;
-  
-  // Create bars for each group
-  const bars = [];
-  
-  xValues.forEach(xValue => {
-    const groupItems = data.filter(d => d[xField] === xValue);
-    const xPos = xScale(xValue);
-    
-    groups.forEach((group, i) => {
-      const item = groupItems.find(d => d[groupField] === group);
-      if (!item) return;
-      
-      const barX = xPos + i * (barWidth + padding);
-      bars.push({
-        data: item,
-        group,
-        x: barX,
-        y: scales.y(item[yField]),
-        width: barWidth,
-        height: dimensions.innerHeight - scales.y(item[yField]),
-        color: scales.color ? scales.color(item[colorField]) : '#4682b4'
-      });
-    });
-  });
-  
-  return { groups, bars };
-}
+	if (!data || data.length === 0 || !fields.group) return { groups: [], bars: [] }
+
+	const { x: xField, y: yField, group: groupField, color: colorField = groupField } = fields
+	const { padding = 0.1 } = options
+
+	// Get unique groups and x values
+	const groups = [...new Set(data.map((d) => d[groupField]))]
+	const xValues = [...new Set(data.map((d) => d[xField]))]
+
+	// Calculate group width and individual bar width
+	const xScale = scales.x
+	const groupWidth = xScale.bandwidth ? xScale.bandwidth() : 20
+	const barWidth = (groupWidth - padding * (groups.length - 1)) / groups.length
+
+	// Create bars for each group
+	const bars = []
+
+	xValues.forEach((xValue) => {
+		const groupItems = data.filter((d) => d[xField] === xValue)
+		const xPos = xScale(xValue)
+
+		groups.forEach((group, i) => {
+			const item = groupItems.find((d) => d[groupField] === group)
+			if (!item) return
+
+			const barX = xPos + i * (barWidth + padding)
+			bars.push({
+				data: item,
+				group,
+				x: barX,
+				y: scales.y(item[yField]),
+				width: barWidth,
+				height: dimensions.innerHeight - scales.y(item[yField]),
+				color: scales.color ? scales.color(item[colorField]) : '#4682b4'
+			})
+		})
+	})
+
+	return { groups, bars }
+}