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

package/src/lib/utils.js

@@ -1,10 +1,10 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
-import { schemeCategory10 } from 'd3-scale-chromatic';
-import { max } from 'd3-array';
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { 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
@@ -14,44 +14,42 @@ import { 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 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 };
+	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 }
 }
 
 /**
  * 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(dimensions) {
-  const { width, height, margin } = dimensions;
-  
-  return {
-    ...dimensions,
-    innerWidth: width - margin.left - margin.right,
-    innerHeight: height - margin.top - margin.bottom
-  };
+	const { width, height, margin } = dimensions
+
+	return {
+		...dimensions,
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
 }
 
 /**
@@ -61,75 +59,75 @@ export function calculateChartDimensions(dimensions) {
  * @returns {Array} Normalized data array
  */
 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 [];
+	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 []
 }
 
 /**
  * Generates a unique ID for SVG elements
- * 
+ *
  * @param {string} prefix Prefix for the ID
  * @returns {string} A unique ID
  */
 export function uniqueId(prefix = 'chart') {
-  return `${prefix}-${Math.random().toString(36).substring(2, 10)}`;
+	return `${prefix}-${Math.random().toString(36).substring(2, 10)}`
 }
 
 /**
  * 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 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>');
+	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>')
 }
 
 /**
  * Generates a tooltip formatter function
- * 
+ *
  * @param {Object} options Tooltip format options
  * @returns {Function} A function that formats tooltip content
  */
 export function createTooltipFormatter(options = {}) {
-  return (d) => formatTooltipContent(d, options);
+	return (d) => formatTooltipContent(d, options)
 }
 
 /**
  * Calculates the transform attribute for SVG elements
- * 
+ *
  * @param {number} x X position
  * @param {number} y Y position
  * @returns {string} Transform attribute value
  */
 export function transform(x, y) {
-  return `translate(${x}, ${y})`;
-}
+	return `translate(${x}, ${y})`
+}

package/src/old_lib/chart.js

@@ -1,6 +1,10 @@
 import { min, max } from 'd3-array'
 import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'
 
+function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
+}
+
 function getScale(domain, range, padding = 0) {
 	if (domain.some(isNaN)) {
 		return scaleBand().domain(domain).range(range).padding(padding)
@@ -204,10 +208,6 @@ class Chart {
 	}
 }
 
-function getOriginValue(scale) {
-	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
-}
-
 export function chart(data, aes) {
 	return new Chart(data, aes)
 }

package/src/patterns/Brick.svelte

@@ -12,6 +12,6 @@
 	]
 </script>
 
-{#each lines as line}
+{#each lines as line, index (index)}
 	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
 {/each}

package/src/patterns/Circles.svelte

@@ -13,6 +13,6 @@
 	}))
 </script>
 
-{#each data as { cx, cy, r }}
+{#each data as { cx, cy, r }, index (index)}
 	<circle {cx} {cy} {r} {fill} {stroke} />
 {/each}

package/src/patterns/CrossHatch.svelte

@@ -9,6 +9,6 @@
 	]
 </script>
 
-{#each lines as line}
+{#each lines as line, index (index)}
 	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
 {/each}

package/src/patterns/Dots.svelte

@@ -14,6 +14,6 @@
 	].map((x) => ({ ...x, r: 0.08 * size }))
 </script>
 
-{#each data as { cx, cy, r }}
+{#each data as { cx, cy, r }, index (index)}
 	<circle {cx} {cy} {r} {fill} />
 {/each}

package/src/patterns/OutlineCircles.svelte

@@ -10,6 +10,6 @@
 	$: r = 0.5 * size
 </script>
 
-{#each centres as { cx, cy }}
+{#each centres as { cx, cy }, index (index)}
 	<circle {cx} {cy} {r} {fill} {stroke} />
 {/each}

package/src/patterns/Tile.svelte

@@ -12,6 +12,6 @@
 	]
 </script>
 
-{#each lines as line}
+{#each lines as line, index (index)}
 	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
 {/each}

package/src/patterns/Triangles.svelte

@@ -10,6 +10,6 @@
 	]
 </script>
 
-{#each polygons as points}
+{#each polygons as points, index (index)}
 	<polygon points={points.join(', ')} {fill} {stroke} stroke-width="0" />
 {/each}

package/src/symbols/RoundedSquare.svelte

@@ -9,7 +9,6 @@
 	$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <rect
 	x={x - r}
 	y={y - r}

package/src/template/shapes/Circles.svelte

@@ -11,6 +11,6 @@
 	}))
 </script>
 
-{#each circles as { cx, cy, r }}
+{#each circles as { cx, cy, r }, index (index)}
 	<circle {cx} {cy} {r} {fill} {stroke} />
 {/each}

package/src/template/shapes/Lines.svelte

@@ -12,6 +12,6 @@
 	}))
 </script>
 
-{#each lines as line}
+{#each lines as line, index (index)}
 	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
 {/each}

package/src/template/shapes/Polygons.svelte

@@ -13,6 +13,6 @@
 	// ]
 </script>
 
-{#each polygons as points}
+{#each polygons as points, index (index)}
 	<polygon {points} {fill} {stroke} stroke-width={thickness} />
 {/each}