-> v0.0.13

CHANGELOG.md

@@ -1,5 +1,9 @@
 # @sveltejs/pancake changelog
 
+## 0.0.13
+
+* Pass index to x/y accessors
+
 ## 0.0.12
 
 * Work around Safari bug ([#9](https://github.com/Rich-Harris/pancake/issues/9))

components/Bars.svelte

@@ -9,7 +9,7 @@
 </script>
 
 {#each data as d, i}
-	<Box y1="{y(d) - height/2}" y2="{y(d) + height/2}" x1={0} x2={x(d)}>
+	<Box y1="{y(d, i) - height/2}" y2="{y(d, i) + height/2}" x1={0} x2="{x(d, i)}">
 		<slot value={d} first="{i === 0}" last="{i === data.length - 1}"/>
 	</Box>
 {/each}

components/Columns.svelte

@@ -9,7 +9,7 @@
 </script>
 
 {#each data as d, i}
-	<Box x1="{x(d) - width/2}" x2="{x(d) + width/2}" y1={0} y2={y(d)}>
+	<Box x1="{x(d, i) - width/2}" x2="{x(d, i) + width/2}" y1={0} y2="{y(d, i)}">
 		<slot value={d} first="{i === 0}" last="{i === data.length - 1}"/>
 	</Box>
 {/each}

components/Grid.svelte

@@ -23,13 +23,13 @@
 		: get_ticks($x1, $x2, count));
 
 	$: style = orientation === HORIZONTAL
-		? y => `width: 100%; height: 0; top: ${$y(y)}%`
-		: x => `width: 0; height: 100%; left: ${$x(x)}%`;
+		? (y, i) => `width: 100%; height: 0; top: ${$y(y, i)}%`
+		: (x, i) => `width: 0; height: 100%; left: ${$x(x, i)}%`;
 </script>
 
 <div class="pancake-grid">
 	{#each _ticks as tick, i}
-		<div class="pancake-grid-item" style={style(tick)}>
+		<div class="pancake-grid-item" style={style(tick, i)}>
 			<slot value={tick} first={i === 0} last={i === _ticks.length - 1}></slot>
 		</div>
 	{/each}

components/Quadtree.svelte

@@ -12,7 +12,7 @@
 
 	const { pointer } = getChartContext();
 
-	$: quadtree = new Quadtree(data, x, y);
+	$: quadtree = new Quadtree(data, x, y); // TODO map data here so we don't need to pass accessors around, and accessors can access index
 	$: closest = $pointer.x !== undefined ? quadtree.find($pointer.x, $pointer.y) : null;
 </script>
 

components/SvgArea.svelte

@@ -8,9 +8,9 @@
 	export let y = default_y;
 
 	$: points = [
-		{ x: x(data[0]), y: floor },
-		...data.map(d => ({ x: x(d), y: y(d) })),
-		{ x: x(data[data.length - 1]), y: floor }
+		{ x: x(data[0], 0), y: floor },
+		...data.map((d, i) => ({ x: x(d, i), y: y(d, i) })),
+		{ x: x(data[data.length - 1], data.length - 1), y: floor }
 	];
 </script>
 

components/SvgLine.svelte

@@ -9,7 +9,7 @@
 	export let y = default_y;
 
 	$: d = 'M' + data
-		.map(d => `${$x_scale(x(d))},${$y_scale(y(d))}`)
+		.map((d, i) => `${$x_scale(x(d, i))},${$y_scale(y(d, i))}`)
 		.join('L');
 </script>
 

components/SvgPolygon.svelte

@@ -8,7 +8,7 @@
 	export let x = default_x;
 	export let y = default_y;
 
-	$: d = `M${data.map(d => `${$x_scale(x(d))},${$y_scale(y(d))}`).join('L')}`;
+	$: d = `M${data.map((d, i) => `${$x_scale(x(d, i))},${$y_scale(y(d, i))}`).join('L')}`;
 </script>
 
 <slot {d}></slot>

components/SvgScatterplot.svelte

@@ -8,9 +8,9 @@
 	export let x = default_x;
 	export let y = default_y;
 
-	$: d = data.map(d => {
-		const _x = $x_scale(x(d));
-		const _y = $y_scale(y(d));
+	$: d = data.map((d, i) => {
+		const _x = $x_scale(x(d, i));
+		const _y = $y_scale(y(d, i));
 
 		return `M${_x} ${_y} A0 0 0 0 1 ${_x + 0.0001} ${_y + 0.0001}`;
 	}).join(' ');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/pancake",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Experimental charting library for Svelte",
   "module": "index.mjs",
   "svelte": "index.mjs",