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

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

@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').ChartMargin} ChartMargin
@@ -9,29 +9,29 @@ import { } from './types.js';
  * Default chart margin
  * @type {ChartMargin}
  */
-export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 };
+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
-  };
+	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
@@ -40,15 +40,17 @@ export function createDimensions(width = 600, height = 400, margin = DEFAULT_MAR
  * @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;
-}
+	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

@@ -1,214 +1,202 @@
-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';
+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
-};
+	// 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 };
-  }
-}
+	#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

@@ -1,4 +1,4 @@
-import { } from './types.js';
+import {} from './types.js'
 
 /**
  * @typedef {import('./types').LegendItem} LegendItem
@@ -10,7 +10,7 @@ import { } from './types.js';
 
 /**
  * Creates legend data for rendering
- * 
+ *
  * @param {Array} data - Chart data
  * @param {Object} fields - Field mappings
  * @param {string} fields.color - Color field
@@ -25,71 +25,70 @@ import { } from './types.js';
  * @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)`
-  };
+	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]));
+	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}`
-  };
-}
+	return {
+		'data-plot-legend-item': '',
+		transform: `translate(0, ${item.y})`,
+		role: 'img',
+		'aria-label': `Legend item for ${item.value}`
+	}
+}