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

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

@@ -1,7 +1,7 @@
-import { min, max } from 'd3-array';
-import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { } from './types.js';
+import { min, max } from 'd3-array'
+import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').ChartScales} ChartScales
@@ -11,7 +11,7 @@ import { } from './types.js';
 
 /**
  * Creates scales based on data, fields, and dimensions
- * 
+ *
  * @param {Array} data - Chart data
  * @param {ScaleFields} fields - Field mappings
  * @param {Object} dimensions - Chart dimensions
@@ -20,75 +20,66 @@ import { } from './types.js';
  * @returns {ChartScales} Chart scales
  */
 export function createScales(data, fields, dimensions, options = {}) {
-  const scales = {
-    x: null,
-    y: null,
-    color: null
-  };
-  
-  if (!data || data.length === 0 || !fields.x || !fields.y) {
-    return scales;
-  }
-  
-  const padding = options.padding !== undefined ? options.padding : 0.2;
-  
-  // Extract values
-  const xValues = data.map(d => d[fields.x]);
-  const yValues = data.map(d => d[fields.y]);
-  
-  // Determine x scale type
-  const xIsDate = xValues.some(v => v instanceof Date);
-  const xIsNumeric = !xIsDate && xValues.every(v => !isNaN(parseFloat(v)));
-  
-  // Create x scale based on data type
-  if (xIsDate) {
-    scales.x = scaleTime()
-      .domain([min(xValues), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else if (xIsNumeric) {
-    scales.x = scaleLinear()
-      .domain([min([0, ...xValues]), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else {
-    scales.x = scaleBand()
-      .domain(xValues)
-      .range([0, dimensions.innerWidth])
-      .padding(padding);
-  }
-  
-  // Create y scale
-  scales.y = scaleLinear()
-    .domain([0, max(yValues) * 1.1]) // Add 10% padding on top
-    .nice()
-    .range([dimensions.innerHeight, 0]);
-  
-  // Create color scale if color field is set
-  if (fields.color) {
-    const colorValues = [...new Set(data.map(d => d[fields.color]))];
-    scales.color = scaleOrdinal()
-      .domain(colorValues)
-      .range(schemeCategory10);
-  }
-  
-  return scales;
+	const scales = {
+		x: null,
+		y: null,
+		color: null
+	}
+
+	if (!data || data.length === 0 || !fields.x || !fields.y) {
+		return scales
+	}
+
+	const padding = options.padding !== undefined ? options.padding : 0.2
+
+	// Extract values
+	const xValues = data.map((d) => d[fields.x])
+	const yValues = data.map((d) => d[fields.y])
+
+	// Determine x scale type
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	// Create x scale based on data type
+	if (xIsDate) {
+		scales.x = scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else if (xIsNumeric) {
+		scales.x = scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else {
+		scales.x = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+	}
+
+	// Create y scale
+	scales.y = scaleLinear()
+		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.innerHeight, 0])
+
+	// Create color scale if color field is set
+	if (fields.color) {
+		const colorValues = [...new Set(data.map((d) => d[fields.color]))]
+		scales.color = scaleOrdinal().domain(colorValues).range(schemeCategory10)
+	}
+
+	return scales
 }
 
 /**
  * Gets the origin coordinates for the axes
- * 
+ *
  * @param {ChartScales} scales - Chart scales
  * @param {Object} dimensions - Chart dimensions
  * @returns {Object} Origin coordinates
  */
 export function getOrigin(scales, dimensions) {
-  return {
-    x: scales.y ? scales.y(0) : dimensions.innerHeight,
-    y: scales.x ? (
-      scales.x.ticks 
-        ? scales.x(Math.max(0, min(scales.x.domain())))
-        : 0
-    ) : 0
-  };
-}
+	return {
+		x: scales.y ? scales.y(0) : dimensions.innerHeight,
+		y: scales.x ? (scales.x.ticks ? scales.x(Math.max(0, min(scales.x.domain()))) : 0) : 0
+	}
+}

package/src/lib/brewing/types.js

@@ -50,7 +50,7 @@
  * @property {number} x - X position
  * @property {number} y - Y position
  * @property {number} width - Width of the bar
- * @property {number} height - Height of the bar 
+ * @property {number} height - Height of the bar
  * @property {string} color - Color of the bar
  */
 
@@ -70,4 +70,4 @@
  * @property {string} transform - SVG transform attribute value
  */
 
-export {};
+export {}

package/src/lib/context.js

@@ -1,122 +1,132 @@
-import { getContext, setContext } from 'svelte';
-import { writable, derived } from 'svelte/store';
-import * as d3 from 'd3';
+import { getContext, setContext } from 'svelte'
+import { writable, derived } from 'svelte/store'
+import * as d3 from 'd3'
 
-const CHART_CONTEXT = 'chart-context';
+const CHART_CONTEXT = 'chart-context'
 
 /**
  * Creates chart context and provides it to child components
- * 
+ *
  * @param {Object} options Initial chart options
  * @returns {Object} Chart context with all stores and methods
  */
 export function createChartContext(options = {}) {
-  // Default config values
-  const defaultOptions = {
-    width: 600,
-    height: 400,
-    margin: { top: 20, right: 30, bottom: 40, left: 50 },
-    padding: { top: 0, right: 0, bottom: 0, left: 0 },
-    responsive: true,
-    animationDuration: 300,
-    data: []
-  };
-  
-  // Merge options with defaults
-  const config = { ...defaultOptions, ...options };
-  
-  // Create stores for reactive properties
-  const dimensions = writable({
-    width: config.width,
-    height: config.height,
-    margin: { ...config.margin },
-    padding: { ...config.padding }
-  });
-  
-  const data = writable(config.data);
-  const scales = writable({});
-  
-  // Compute inner dimensions (subtracting margins)
-  const innerDimensions = derived(dimensions, $dimensions => {
-    return {
-      width: $dimensions.width - $dimensions.margin.left - $dimensions.margin.right - $dimensions.padding.left - $dimensions.padding.right,
-      height: $dimensions.height - $dimensions.margin.top - $dimensions.margin.bottom - $dimensions.padding.top - $dimensions.padding.bottom
-    };
-  });
-  
-  // Store for plot elements (bars, lines, etc.)
-  const plots = writable([]);
-  
-  // Store for axes
-  const axes = writable({
-    x: null,
-    y: null
-  });
-  
-  const legend = writable({
-    enabled: false,
-    items: []
-  });
-  
-  // Helper to add a new plot
-  function addPlot(plot) {
-    plots.update(currentPlots => [...currentPlots, plot]);
-    return () => {
-      plots.update(currentPlots => currentPlots.filter(p => p !== plot));
-    };
-  }
-  
-  // Helper to update scales based on data and dimensions
-  function updateScales(xKey, yKey, colorKey = null) {
-    return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
-      if (!$data || $data.length === 0) return null;
-      
-      const xScale = d3.scaleBand()
-        .domain($data.map(d => d[xKey]))
-        .range([0, $innerDimensions.width])
-        .padding(0.2);
-      
-      const yScale = d3.scaleLinear()
-        .domain([0, d3.max($data, d => d[yKey])])
-        .nice()
-        .range([$innerDimensions.height, 0]);
-      
-      let colorScale = null;
-      
-      if (colorKey) {
-        const uniqueCategories = [...new Set($data.map(d => d[colorKey]))];
-        colorScale = d3.scaleOrdinal()
-          .domain(uniqueCategories)
-          .range(d3.schemeCategory10);
-      }
-      
-      return { xScale, yScale, colorScale };
-    });
-  }
-  
-  // Create and set context
-  const chartContext = {
-    dimensions,
-    innerDimensions,
-    data,
-    scales,
-    plots,
-    axes,
-    legend,
-    addPlot,
-    updateScales
-  };
-  
-  setContext(CHART_CONTEXT, chartContext);
-  
-  return chartContext;
+	// Default config values
+	const defaultOptions = {
+		width: 600,
+		height: 400,
+		margin: { top: 20, right: 30, bottom: 40, left: 50 },
+		padding: { top: 0, right: 0, bottom: 0, left: 0 },
+		responsive: true,
+		animationDuration: 300,
+		data: []
+	}
+
+	// Merge options with defaults
+	const config = { ...defaultOptions, ...options }
+
+	// Create stores for reactive properties
+	const dimensions = writable({
+		width: config.width,
+		height: config.height,
+		margin: { ...config.margin },
+		padding: { ...config.padding }
+	})
+
+	const data = writable(config.data)
+	const scales = writable({})
+
+	// Compute inner dimensions (subtracting margins)
+	const innerDimensions = derived(dimensions, ($dimensions) => {
+		return {
+			width:
+				$dimensions.width -
+				$dimensions.margin.left -
+				$dimensions.margin.right -
+				$dimensions.padding.left -
+				$dimensions.padding.right,
+			height:
+				$dimensions.height -
+				$dimensions.margin.top -
+				$dimensions.margin.bottom -
+				$dimensions.padding.top -
+				$dimensions.padding.bottom
+		}
+	})
+
+	// Store for plot elements (bars, lines, etc.)
+	const plots = writable([])
+
+	// Store for axes
+	const axes = writable({
+		x: null,
+		y: null
+	})
+
+	const legend = writable({
+		enabled: false,
+		items: []
+	})
+
+	// Helper to add a new plot
+	function addPlot(plot) {
+		plots.update((currentPlots) => [...currentPlots, plot])
+		return () => {
+			plots.update((currentPlots) => currentPlots.filter((p) => p !== plot))
+		}
+	}
+
+	// Helper to update scales based on data and dimensions
+	function updateScales(xKey, yKey, colorKey = null) {
+		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
+			if (!$data || $data.length === 0) return null
+
+			const xScale = d3
+				.scaleBand()
+				.domain($data.map((d) => d[xKey]))
+				.range([0, $innerDimensions.width])
+				.padding(0.2)
+
+			const yScale = d3
+				.scaleLinear()
+				.domain([0, d3.max($data, (d) => d[yKey])])
+				.nice()
+				.range([$innerDimensions.height, 0])
+
+			let colorScale = null
+
+			if (colorKey) {
+				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
+				colorScale = d3.scaleOrdinal().domain(uniqueCategories).range(d3.schemeCategory10)
+			}
+
+			return { xScale, yScale, colorScale }
+		})
+	}
+
+	// Create and set context
+	const chartContext = {
+		dimensions,
+		innerDimensions,
+		data,
+		scales,
+		plots,
+		axes,
+		legend,
+		addPlot,
+		updateScales
+	}
+
+	setContext(CHART_CONTEXT, chartContext)
+
+	return chartContext
 }
 
 /**
  * Gets chart context provided by parent component
- * 
+ *
  * @returns {Object} Chart context
  */
 export function getChartContext() {
-  return getContext(CHART_CONTEXT);
-}
+	return getContext(CHART_CONTEXT)
+}

package/src/lib/scales.svelte.js

@@ -1,10 +1,10 @@
-import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { min, max } from 'd3-array';
+import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { min, max } from 'd3-array'
 
 /**
  * Creates appropriate scales based on data and dimensions
- * 
+ *
  * @param {Array} data The dataset
  * @param {string} xKey Field to use for x-axis
  * @param {string} yKey Field to use for y-axis
@@ -13,84 +13,77 @@ import { min, max } from 'd3-array';
  * @returns {Object} Object containing xScale, yScale, and colorScale
  */
 export function createScales(data, xKey, yKey, dimensions, options = {}) {
-  if (!data || data.length === 0) return {};
-  
-  const { colorKey = null, padding = 0.2 } = options;
-  
-  // Determine if x values are numeric, dates, or categorical
-  const xValues = data.map(d => d[xKey]);
-  const xIsDate = xValues.some(v => v instanceof Date);
-  const xIsNumeric = !xIsDate && xValues.every(v => !isNaN(parseFloat(v)));
-  
-  // Create x-scale based on data type
-  let xScale;
-  if (xIsDate) {
-    xScale = scaleTime()
-      .domain([min(xValues), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else if (xIsNumeric) {
-    xScale = scaleLinear()
-      .domain([min([0, ...xValues]), max(xValues)])
-      .range([0, dimensions.innerWidth])
-      .nice();
-  } else {
-    xScale = scaleBand()
-      .domain(xValues)
-      .range([0, dimensions.innerWidth])
-      .padding(padding);
-  }
-  
-  // Create y-scale
-  const yValues = data.map(d => d[yKey]);
-  const yScale = scaleLinear()
-    .domain([0, max(yValues) * 1.1]) // Add 10% padding on top
-    .nice()
-    .range([dimensions.innerHeight, 0]);
-  
-  // Create color scale if colorKey is provided
-  let colorScale = null;
-  if (colorKey) {
-    const uniqueCategories = [...new Set(data.map(d => d[colorKey]))];
-    colorScale = scaleOrdinal()
-      .domain(uniqueCategories)
-      .range(schemeCategory10);
-  }
-  
-  return { xScale, yScale, colorScale };
+	if (!data || data.length === 0) return {}
+
+	const { colorKey = null, padding = 0.2 } = options
+
+	// Determine if x values are numeric, dates, or categorical
+	const xValues = data.map((d) => d[xKey])
+	const xIsDate = xValues.some((v) => v instanceof Date)
+	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
+
+	// Create x-scale based on data type
+	let xScale
+	if (xIsDate) {
+		xScale = scaleTime()
+			.domain([min(xValues), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else if (xIsNumeric) {
+		xScale = scaleLinear()
+			.domain([min([0, ...xValues]), max(xValues)])
+			.range([0, dimensions.innerWidth])
+			.nice()
+	} else {
+		xScale = scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
+	}
+
+	// Create y-scale
+	const yValues = data.map((d) => d[yKey])
+	const yScale = scaleLinear()
+		.domain([0, max(yValues) * 1.1]) // Add 10% padding on top
+		.nice()
+		.range([dimensions.innerHeight, 0])
+
+	// Create color scale if colorKey is provided
+	let colorScale = null
+	if (colorKey) {
+		const uniqueCategories = [...new Set(data.map((d) => d[colorKey]))]
+		colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
+	}
+
+	return { xScale, yScale, colorScale }
 }
 
 /**
  * Calculates the actual chart dimensions after applying margins
- * 
+ *
  * @param {Object} dimensions Original dimensions
  * @returns {Object} Dimensions with calculated inner width and height
  */
 export function calculateChartDimensions(width, height, margin) {
-  return {
-    width,
-    height,
-    margin,
-    innerWidth: width - margin.left - margin.right,
-    innerHeight: height - margin.top - margin.bottom
-  };
+	return {
+		width,
+		height,
+		margin,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
 }
 
 /**
  * Gets the axis origin value
- * 
+ *
  * @param {Object} scale D3 scale
  * @returns {number} Origin value
  */
 export function getOriginValue(scale) {
-  return scale.ticks
-    ? scale(Math.max(0, min(scale.domain())))
-    : scale.range()[0];
+	return scale.ticks ? scale(Math.max(0, min(scale.domain()))) : scale.range()[0]
 }
 
 /**
  * Creates axis ticks
- * 
+ *
  * @param {Object} scale D3 scale
  * @param {string} axis Axis type ('x' or 'y')
  * @param {number} count Number of ticks
@@ -98,32 +91,32 @@ export function getOriginValue(scale) {
  * @returns {Array} Array of tick objects
  */
 export function createTicks(scale, axis, count = null, fontSize = 12) {
-  const [minRange, maxRange] = scale.range();
-  let ticks = [];
-  let offset = 0;
+	const [minRange, maxRange] = scale.range()
+	let ticks = []
+	let offset = 0
 
-  // Calculate default count based on available space
-  if (!count) {
-    count = Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 3 : 6)));
-  }
+	// Calculate default count based on available space
+	if (!count) {
+		count = Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 3 : 6)))
+	}
 
-  // Get ticks based on scale type
-  if (scale.ticks) {
-    ticks = scale.ticks(Math.round(count));
-  } else {
-    offset = scale.bandwidth() / 2;
-    count = Math.min(Math.round(count), scale.domain().length);
+	// Get ticks based on scale type
+	if (scale.ticks) {
+		ticks = scale.ticks(Math.round(count))
+	} else {
+		offset = scale.bandwidth() / 2
+		count = Math.min(Math.round(count), scale.domain().length)
 
-    ticks = scale.domain();
-    if (count < scale.domain().length) {
-      const step = Math.ceil(scale.domain().length / count);
-      ticks = ticks.filter((_, i) => i % step === 0);
-    }
-  }
+		ticks = scale.domain()
+		if (count < scale.domain().length) {
+			const step = Math.ceil(scale.domain().length / count)
+			ticks = ticks.filter((_, i) => i % step === 0)
+		}
+	}
 
-  // Format ticks with positions
-  return ticks.map(t => ({
-    value: t,
-    position: scale(t) + (axis === 'x' ? offset : 0)
-  }));
-}
+	// Format ticks with positions
+	return ticks.map((t) => ({
+		value: t,
+		position: scale(t) + (axis === 'x' ? offset : 0)
+	}))
+}