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

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

@@ -0,0 +1,114 @@
+import { } from './types.js';
+
+/**
+ * @typedef {import('./types').BarData} BarData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Creates bar data for rendering
+ * 
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.x - X-axis field
+ * @param {string} fields.y - Y-axis field
+ * @param {string} fields.color - Color field (optional)
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Function} scales.color - Color scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {string} defaultColor - Default color if no color scale is provided
+ * @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
+    };
+  });
+}
+
+/**
+ * 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;
+  });
+}
+
+/**
+ * Creates a grouped bars layout
+ * 
+ * @param {Array} data - Chart data 
+ * @param {Object} fields - Field mappings
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Options
+ * @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 };
+}

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

@@ -0,0 +1,54 @@
+import { } from './types.js';
+
+/**
+ * @typedef {import('./types').ChartMargin} ChartMargin
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Default chart margin
+ * @type {ChartMargin}
+ */
+export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 };
+
+/**
+ * Creates chart dimensions based on width, height and margins
+ * 
+ * @param {number} width - Total chart width
+ * @param {number} height - Total chart height
+ * @param {ChartMargin} margin - Chart margins
+ * @returns {ChartDimensions} Chart dimensions
+ */
+export function createDimensions(width = 600, height = 400, margin = DEFAULT_MARGIN) {
+  return {
+    width,
+    height,
+    margin: { ...margin },
+    innerWidth: width - margin.left - margin.right,
+    innerHeight: height - margin.top - margin.bottom
+  };
+}
+
+/**
+ * Updates existing dimensions with new values
+ * 
+ * @param {ChartDimensions} dimensions - Current dimensions
+ * @param {Object} updates - Values to update
+ * @param {number} [updates.width] - New width
+ * @param {number} [updates.height] - New height
+ * @param {ChartMargin} [updates.margin] - New margin
+ * @returns {ChartDimensions} Updated dimensions
+ */
+export function updateDimensions(dimensions, updates = {}) {
+  const newDimensions = { ...dimensions };
+  
+  if (updates.width !== undefined) newDimensions.width = updates.width;
+  if (updates.height !== undefined) newDimensions.height = updates.height;
+  if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin };
+  
+  // Recalculate inner dimensions
+  newDimensions.innerWidth = newDimensions.width - newDimensions.margin.left - newDimensions.margin.right;
+  newDimensions.innerHeight = newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom;
+  
+  return newDimensions;
+}

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

@@ -0,0 +1,214 @@
+import { createDimensions, updateDimensions } from './dimensions.svelte.js';
+import { createScales, getOrigin } from './scales.svelte.js';
+import { createBars, filterBars, createGroupedBars } from './bars.svelte.js';
+import { 
+  createXAxis, 
+  createYAxis, 
+  createGrid, 
+  createTickAttributes 
+} from './axes.svelte.js';
+import { 
+  createLegend, 
+  filterByLegend, 
+  createLegendItemAttributes 
+} from './legends.svelte.js';
+
+/**
+ * Chart Brewing - A collection of pure functions for chart data preparation
+ */
+export {
+  // Dimensions
+  createDimensions,
+  updateDimensions,
+  
+  // Scales
+  createScales,
+  getOrigin,
+  
+  // Bars
+  createBars,
+  filterBars,
+  createGroupedBars,
+  
+  // Axes
+  createXAxis,
+  createYAxis,
+  createGrid,
+  createTickAttributes,
+  
+  // Legends
+  createLegend,
+  filterByLegend,
+  createLegendItemAttributes
+};
+
+/**
+ * Main class that manages chart state and provides access to all brewing functions
+ */
+export class ChartBrewer {
+  #data = [];
+  #dimensions = createDimensions();
+  #scales = { x: null, y: null, color: null };
+  #fields = { x: null, y: null, color: null };
+  #options = {
+    padding: 0.2,
+    animationDuration: 300
+  };
+
+  /**
+   * Creates a new ChartBrewer instance
+   * 
+   * @param {Object} options Configuration options
+   */
+  constructor(options = {}) {
+    this.#dimensions = createDimensions(
+      options.width,
+      options.height,
+      options.margin
+    );
+    
+    if (options.padding !== undefined) this.#options.padding = options.padding;
+    if (options.animationDuration !== undefined) this.#options.animationDuration = options.animationDuration;
+  }
+
+  /**
+   * Sets the data for the chart
+   * 
+   * @param {Array} data Data array
+   * @returns {ChartBrewer} this for method chaining
+   */
+  setData(data) {
+    this.#data = Array.isArray(data) ? data : [];
+    return this;
+  }
+
+  /**
+   * Sets the field mappings for axes and color
+   * 
+   * @param {Object} fields Field mappings
+   * @returns {ChartBrewer} this for method chaining
+   */
+  setFields({ x, y, color }) {
+    if (x !== undefined) this.#fields.x = x;
+    if (y !== undefined) this.#fields.y = y;
+    if (color !== undefined) this.#fields.color = color;
+    return this;
+  }
+
+  /**
+   * Sets the dimensions of the chart
+   * 
+   * @param {Object} dimensions Chart dimensions
+   * @returns {ChartBrewer} this for method chaining
+   */
+  setDimensions({ width, height, margin }) {
+    this.#dimensions = updateDimensions(this.#dimensions, { width, height, margin });
+    return this;
+  }
+
+  /**
+   * Creates scales based on data and dimensions
+   * 
+   * @returns {ChartBrewer} this for method chaining
+   */
+  createScales() {
+    this.#scales = createScales(this.#data, this.#fields, this.#dimensions, {
+      padding: this.#options.padding
+    });
+    return this;
+  }
+
+  /**
+   * Creates bar data for rendering
+   * 
+   * @returns {Array} Data for rendering bars
+   */
+  createBars() {
+    return createBars(this.#data, this.#fields, this.#scales, this.#dimensions);
+  }
+
+  /**
+   * Creates x-axis tick data for rendering
+   * 
+   * @param {Object} options Axis options
+   * @returns {Object} Axis rendering data
+   */
+  createXAxis(options = {}) {
+    return createXAxis(this.#scales, this.#dimensions, options);
+  }
+
+  /**
+   * Creates y-axis tick data for rendering
+   * 
+   * @param {Object} options Axis options
+   * @returns {Object} Axis rendering data
+   */
+  createYAxis(options = {}) {
+    return createYAxis(this.#scales, this.#dimensions, options);
+  }
+
+  /**
+   * Creates grid line data for rendering
+   * 
+   * @param {Object} options Grid options
+   * @returns {Object} Grid rendering data
+   */
+  createGrid(options = {}) {
+    return createGrid(this.#scales, this.#dimensions, options);
+  }
+
+  /**
+   * Creates legend data for rendering
+   * 
+   * @param {Object} options Legend options
+   * @returns {Object} Legend rendering data
+   */
+  createLegend(options = {}) {
+    return createLegend(this.#data, this.#fields, this.#scales, this.#dimensions, options);
+  }
+
+  /**
+   * Gets all chart dimensions
+   * 
+   * @returns {Object} Chart dimensions
+   */
+  getDimensions() {
+    return { ...this.#dimensions };
+  }
+
+  /**
+   * Gets all chart scales
+   * 
+   * @returns {Object} Chart scales
+   */
+  getScales() {
+    return { ...this.#scales };
+  }
+
+  /**
+   * Gets the animation duration
+   * 
+   * @returns {number} Animation duration in ms
+   */
+  getAnimationDuration() {
+    return this.#options.animationDuration;
+  }
+
+  /**
+   * Gets the data being used
+   * 
+   * @returns {Array} Chart data
+   */
+  getData() {
+    return [...this.#data];
+  }
+  
+  /**
+   * Gets the fields configuration
+   * 
+   * @returns {Object} Fields configuration
+   */
+  getFields() {
+    return { ...this.#fields };
+  }
+}

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

@@ -0,0 +1,95 @@
+import { } from './types.js';
+
+/**
+ * @typedef {import('./types').LegendItem} LegendItem
+ * @typedef {import('./types').LegendData} LegendData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Creates legend data for rendering
+ * 
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.color - Color field
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.color - Color scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Legend options
+ * @param {string} [options.title=''] - Legend title
+ * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
+ * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
+ * @param {number} [options.markerSize=10] - Size of legend markers
+ * @returns {LegendData} Legend rendering data
+ */
+export function createLegend(data, fields, scales, dimensions, options = {}) {
+  if (!data || !fields.color || !scales.color) {
+    return { items: [], title: '', transform: 'translate(0, 0)' };
+  }
+  
+  const { title = '', align = 'right', shape = 'rect', markerSize = 10 } = options;
+  
+  // Get unique color values
+  const colorValues = [...new Set(data.map(d => d[fields.color]))];
+  
+  // Create legend items
+  const items = colorValues.map((value, index) => ({
+    value,
+    color: scales.color(value),
+    y: index * (markerSize + 5) + (title ? 15 : 0),
+    shape,
+    markerSize
+  }));
+  
+  // Calculate approximate width for alignment
+  const approximateWidth = Math.max(
+    ...colorValues.map(v => v.toString().length)
+  ) * 8 + markerSize + 10;
+  
+  // Calculate position based on alignment
+  let x = 0;
+  if (align === 'right') {
+    x = dimensions.innerWidth - approximateWidth;
+  } else if (align === 'center') {
+    x = (dimensions.innerWidth - approximateWidth) / 2;
+  }
+  
+  return {
+    items,
+    title,
+    transform: `translate(${x}, 0)`
+  };
+}
+
+/**
+ * Filter data based on legend selection
+ * 
+ * @param {Array} data - Chart data
+ * @param {string} colorField - Field used for color mapping
+ * @param {Array} selectedValues - Selected legend values
+ * @returns {Array} Filtered data
+ */
+export function filterByLegend(data, colorField, selectedValues) {
+  if (!selectedValues || selectedValues.length === 0) {
+    return data;
+  }
+  
+  return data.filter(d => selectedValues.includes(d[colorField]));
+}
+
+/**
+ * Create attributes for legend items
+ * 
+ * @param {LegendItem} item - Legend item
+ * @returns {Object} Attributes for the legend item
+ */
+export function createLegendItemAttributes(item) {
+  return {
+    'data-plot-legend-item': '',
+    'transform': `translate(0, ${item.y})`,
+    'role': 'img',
+    'aria-label': `Legend item for ${item.value}`
+  };
+}

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

@@ -0,0 +1,94 @@
+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
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Creates scales based on data, fields, and dimensions
+ * 
+ * @param {Array} data - Chart data
+ * @param {ScaleFields} fields - Field mappings
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Scale options
+ * @param {number} [options.padding=0.2] - Padding for band scales
+ * @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;
+}
+
+/**
+ * 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
+  };
+}

package/src/lib/brewing/types.js

@@ -0,0 +1,73 @@
+/**
+ * @typedef {Object} ChartMargin
+ * @property {number} top - Top margin
+ * @property {number} right - Right margin
+ * @property {number} bottom - Bottom margin
+ * @property {number} left - Left margin
+ */
+
+/**
+ * @typedef {Object} ChartDimensions
+ * @property {number} width - Total chart width
+ * @property {number} height - Total chart height
+ * @property {ChartMargin} margin - Chart margins
+ * @property {number} innerWidth - Chart width without margins
+ * @property {number} innerHeight - Chart height without margins
+ */
+
+/**
+ * @typedef {Object} ChartScales
+ * @property {Function} x - X-axis scale function
+ * @property {Function} y - Y-axis scale function
+ * @property {Function} color - Color scale function
+ */
+
+/**
+ * @typedef {Object} ScaleFields
+ * @property {string} x - X-axis field
+ * @property {string} y - Y-axis field
+ * @property {string} color - Color field
+ */
+
+/**
+ * @typedef {Object} TickData
+ * @property {*} value - Tick value
+ * @property {number} position - Tick position in pixels
+ * @property {string} formattedValue - Formatted tick label
+ */
+
+/**
+ * @typedef {Object} AxisData
+ * @property {TickData[]} ticks - Tick data
+ * @property {string} label - Axis label
+ * @property {string} transform - SVG transform attribute value
+ * @property {string} labelTransform - SVG transform for the label
+ */
+
+/**
+ * @typedef {Object} BarData
+ * @property {Object} data - Original data point
+ * @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 {string} color - Color of the bar
+ */
+
+/**
+ * @typedef {Object} LegendItem
+ * @property {*} value - Legend item value
+ * @property {string} color - Item color
+ * @property {number} y - Y position
+ * @property {string} shape - Shape type ('rect' or 'circle')
+ * @property {number} markerSize - Size of the marker
+ */
+
+/**
+ * @typedef {Object} LegendData
+ * @property {LegendItem[]} items - Legend items
+ * @property {string} title - Legend title
+ * @property {string} transform - SVG transform attribute value
+ */
+
+export {};