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

package/src/lib/context.js

@@ -0,0 +1,122 @@
+import { getContext, setContext } from 'svelte';
+import { writable, derived } from 'svelte/store';
+import * as d3 from 'd3';
+
+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;
+}
+
+/**
+ * Gets chart context provided by parent component
+ * 
+ * @returns {Object} Chart context
+ */
+export function getChartContext() {
+  return getContext(CHART_CONTEXT);
+}

package/src/lib/scales.svelte.js

@@ -0,0 +1,129 @@
+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
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} options Additional options
+ * @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 };
+}
+
+/**
+ * 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
+  };
+}
+
+/**
+ * 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];
+}
+
+/**
+ * Creates axis ticks
+ * 
+ * @param {Object} scale D3 scale
+ * @param {string} axis Axis type ('x' or 'y')
+ * @param {number} count Number of ticks
+ * @param {number} fontSize Font size for determining tick density
+ * @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;
+
+  // 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);
+
+    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)
+  }));
+}

package/src/lib/utils.js

@@ -1,157 +1,135 @@
-import { scaleBand, scaleLinear } from 'd3-scale'
-import { min, max } from 'd3-array'
-import { ascending, quantile } from 'd3-array'
-import { nest } from 'd3-collection'
-import { omit } from 'ramda'
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
+import { max } from 'd3-array';
 
 /**
- * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.
- *
- * - Attempts to find a best fit square if both columns and rows are not specified
- * - Value in columns is prioritized over rows for recalculating the grid
- * - Supports padding between the items
- *
- * @param {number} count
- * @param {number} size
- * @param {number} pad
- * @param {number} columns
- * @param {number} rows
- * @returns
+ * 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
+ * @param {Object} dimensions Chart dimensions
+ * @param {Object} [options] Additional options
+ * @param {string} [options.colorKey] Field to use for color mapping
+ * @returns {Object} Object containing xScale, yScale, and colorScale
  */
-export function swatch(count, size, pad = 0, columns, rows) {
-	if (columns > 0) {
-		rows = Math.ceil(count / columns)
-	} else if (rows > 0) {
-		columns = Math.ceil(count / rows)
-	} else {
-		columns = Math.ceil(Math.sqrt(count))
-		rows = Math.ceil(count / columns)
-	}
-
-	const width = (size + pad) * columns + pad
-	const height = (size + pad) * rows + pad
-	const data = [...Array(count).keys()].map((index) => ({
-		cx: (size + pad) / 2 + (index % columns) * (size + pad),
-		cy: (size + pad) / 2 + Math.floor(index / columns) * (size + pad),
-		r: size / 2
-	}))
-
-	return { width, height, data }
+export function createScales(data, xKey, yKey, dimensions, options = {}) {
+  if (!data || data.length === 0) return {};
+  
+  const xScale = scaleBand()
+    .domain(data.map(d => d[xKey]))
+    .range([0, dimensions.width])
+    .padding(0.2);
+  
+  const yScale = scaleLinear()
+    .domain([0, max(data, d => d[yKey]) * 1.1]) // Add 10% padding on top
+    .nice()
+    .range([dimensions.height, 0]);
+  
+  let colorScale = null;
+  
+  if (options.colorKey) {
+    const uniqueCategories = [...new Set(data.map(d => d[options.colorKey]))];
+    colorScale = scaleOrdinal()
+      .domain(uniqueCategories)
+      .range(schemeCategory10);
+  }
+  
+  return { xScale, yScale, colorScale };
 }
+
 /**
- * Get a scale function mapping the values between a range of lower and upper values
- *
- * @param {Array} values
- * @param {Array[2]} bounds
- * @param {number} buffer
- * @returns
+ * Calculates the actual chart dimensions after applying margins
+ * 
+ * @param {Object} dimensions Original dimensions
+ * @returns {Object} Dimensions with calculated inner width and height
  */
-export function getScale(values, bounds, buffer = 0, ordinal = false) {
-	if (ordinal || values.some(isNaN)) {
-		return scaleBand().range(bounds).domain(values).padding(0.5)
-	} else {
-		values = values.map((x) => +x)
-
-		let minValue = min([...values, 0])
-		let maxValue = max(values)
-
-		if (minValue < 0 && maxValue > 0) {
-			maxValue = max([-1 * minValue, maxValue])
-			minValue = -1 * maxValue
-		}
-		const margin = (maxValue - minValue) * buffer
-		return scaleLinear()
-			.domain([minValue - margin, maxValue + margin])
-			.range(bounds)
-	}
+export function calculateChartDimensions(dimensions) {
+  const { width, height, margin } = dimensions;
+  
+  return {
+    ...dimensions,
+    innerWidth: width - margin.left - margin.right,
+    innerHeight: height - margin.top - margin.bottom
+  };
 }
+
 /**
- * Obtain the scale function for the `x` and `y` fields in the data set.
+ * Normalizes data for use with D3 charts
  *
- * @param {array<dict>} data
- * @param {string} x
- * @param {string} y
- * @param {number} width
- * @param {number} height
- * @returns
+ * @param {Array|Object} inputData Raw data or dataset object
+ * @returns {Array} Normalized data array
  */
-export function getScales(data, x, y, width, height, margin, ordinal) {
-	const xValues = [...new Set(data.map((item) => item[x]))]
-	const yValues = [...new Set(data.map((item) => item[y]))]
-
-	return {
-		x: getScale(xValues, [0 + margin.left, width - margin.right], 0, ordinal.x),
-		y: getScale(yValues, [height - margin.top, margin.bottom], 0.1, ordinal.y)
-	}
+export function normalizeData(inputData) {
+  if (!inputData) return [];
+  
+  // If it's a dataset class instance, call select() to get the data
+  if (inputData.select && typeof inputData.select === 'function') {
+    return inputData.select();
+  }
+  
+  // If it's already an array, return as is
+  if (Array.isArray(inputData)) {
+    return inputData;
+  }
+  
+  return [];
 }
 
 /**
- * Summarize `data` by fields `x` and `y` and return a nested array with
- * key as unique `x` values and value as statistical summaries of `y` values
- *
- * @param {*} data
- * @param {*} x
- * @param {*} y
- * @returns
+ * Generates a unique ID for SVG elements
+ * 
+ * @param {string} prefix Prefix for the ID
+ * @returns {string} A unique ID
  */
-export function aggregate(data, x, y) {
-	const summary = nest()
-		.key((d) => d[x])
-		.rollup((d) => {
-			let values = d.map((g) => g[y]).sort(ascending)
-			let q1 = quantile(values, 0.25)
-			let q3 = quantile(values, 0.75)
-			let median = quantile(values, 0.5)
-			let interQuantileRange = q3 - q1
-			let min = q1 - 1.5 * interQuantileRange
-			let max = q3 + 1.5 * interQuantileRange
-			return { q1, q3, median, interQuantileRange, min, max }
-		})
-		.entries(data)
-	return summary
+export function uniqueId(prefix = 'chart') {
+  return `${prefix}-${Math.random().toString(36).substring(2, 10)}`;
 }
 
 /**
- * Generate a palette with same size as input data containing values from palette array.
- * After the palette array is exhausted the fallback value is used
- *
- * @param {Array} values
- * @param {Array} palette
- * @param {*}     fallback
- * @returns
+ * Formats tooltip content for a data point
+ * 
+ * @param {Object} d Data point
+ * @param {Object} options Tooltip format options
+ * @returns {string} Formatted tooltip HTML content
  */
-export function getPaletteForValues(values, palette, fallback) {
-	return values.map((_, index) =>
-		index < palette.length ? palette[index] : fallback
-	)
+export function formatTooltipContent(d, options = {}) {
+  if (!d) return '';
+  
+  const { xKey, yKey, xFormat, yFormat } = options;
+  
+  if (xKey && yKey) {
+    const xValue = d[xKey];
+    const yValue = d[yKey];
+    
+    const xFormatted = xFormat ? xFormat(xValue) : xValue;
+    const yFormatted = yFormat ? yFormat(yValue) : yValue;
+    
+    return `${xKey}: ${xFormatted}<br>${yKey}: ${yFormatted}`;
+  }
+  
+  return Object.entries(d)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('<br>');
 }
 
 /**
- * Converts input object array into a nested key,value array.
- * 'key' contains unique values for the attribute specified by the key parameter
- * and value contains array of all remaining attributes in an array.
- *
- * @param {Array<Object>} data
- * @param {string} key
- * @param {string} label
- * @returns
+ * Generates a tooltip formatter function
+ * 
+ * @param {Object} options Tooltip format options
+ * @returns {Function} A function that formats tooltip content
  */
-export function toNested(data, key, label) {
-	return nest()
-		.key((d) => d[key])
-		.rollup((values) => values.map((value) => omit([key], value)))
-		.entries(data.sort((a, b) => ascending(a[label], b[label])))
+export function createTooltipFormatter(options = {}) {
+  return (d) => formatTooltipContent(d, options);
 }
+
 /**
- * Repeats array items of b using array items of a ask keys
- *
- * @param {Array} b
- * @param {Array} a
- * @returns {Object} with keys as items in a and values as items in b
+ * Calculates the transform attribute for SVG elements
+ * 
+ * @param {number} x X position
+ * @param {number} y Y position
+ * @returns {string} Transform attribute value
  */
-export function repeatAcross(b, a) {
-	return a.reduce(
-		(acc, item, index) => ({ ...acc, [item]: b[index % b.length] }),
-		{}
-	)
-}
+export function transform(x, y) {
+  return `translate(${x}, ${y})`;
+}

package/src/old_lib/brewer.js

@@ -0,0 +1,25 @@
+/**
+ * Get fill patterns for a set of values
+ *
+ * @param {Array} values - Array of values
+ * @param {Object} swatch - Object with keys for color, gray, and pattern
+ * @param {Boolean} gray - Boolean to determine if gray or color
+ * @returns {Object} - Object with keys for pattern and color
+ */
+export function getFillPatterns(values, swatch, gray = false) {
+	const colors = gray ? swatch.keys.gray : swatch.keys.color
+	const max_colors = colors.length
+	const max_patterns = swatch.keys.pattern.length
+
+	const mix = values
+		.map((value, index) => ({
+			[value]: {
+				pattern: swatch.keys.pattern[index % max_patterns],
+				color: colors[index % max_colors]
+			}
+		}))
+		.reduce((acc, current) => ({ ...acc, ...current }), {})
+	return mix
+}
+
+// export function getStrokePatterns() {}