PieChart-fruit-colors

docs/src/examples/components/PieChart/arc-props.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	props={{ arc: { class: 'stroke-surface-100' } }}
 />

docs/src/examples/components/PieChart/arc.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={180}
 	range={[-90, 90]}
 	outerRadius={160}

docs/src/examples/components/PieChart/basic.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} />

docs/src/examples/components/PieChart/colors-data-prop.svelte

@@ -8,10 +8,10 @@
 			return {
 				...d,
 				color: [
-					'var(--color-danger)',
-					'var(--color-warning)',
-					'var(--color-success)',
-					'var(--color-info)'
+					'var(--color-apples)',
+					'var(--color-bananas)',
+					'var(--color-cherries)',
+					'var(--color-grapes)'
 				][i]
 			};
 		});

docs/src/examples/components/PieChart/colors-variables.svelte

@@ -1,20 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart
-	{data}
-	key="fruit"
-	value="value"
-	height={300}
-	cRange={[
-		'var(--color-success)',
-		'var(--color-warning)',
-		'var(--color-danger)',
-		'var(--color-info)'
-	]}
-/>
+<PieChart {data} key="fruit" value="value" height={300} cRange={fruitColors} />

docs/src/examples/components/PieChart/donut-with-text.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart, Text } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { format } from '@layerstack/utils';
 	import { sum } from 'd3-array';
@@ -12,6 +13,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	innerRadius={-20}
 	cornerRadius={5}
 	padAngle={0.02}

docs/src/examples/components/PieChart/donut.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	innerRadius={-20}
 	cornerRadius={5}
 	padAngle={0.02}

docs/src/examples/components/PieChart/legend-custom-label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	label={(d) => {
 		switch (d.fruit) {
 			case 'apples':

docs/src/examples/components/PieChart/legend-placement.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} legend />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} legend />

docs/src/examples/components/PieChart/legend-responsive.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	padding={{ bottom: 32 }}
 	legend={{

docs/src/examples/components/PieChart/legend-with-padding.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	padding={{ right: 80 }}
 	legend={{ placement: 'right', orientation: 'vertical' }}

docs/src/examples/components/PieChart/legend.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
 	import { longData } from '$lib/utils/data';
+	import { fruitColors } from '$lib/utils/fruits';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} legend />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} legend />

docs/src/examples/components/PieChart/motion-spring.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
-	export { data };
-
 	let show = $state(true);
+	export { data };
 </script>
 
 <ShowControl bind:show label="Show Pie" />
 
 <div style:height="300px">
 	{#if show}
-		<PieChart {data} key="fruit" value="value" props={{ pie: { motion: 'spring' } }} />
+		<PieChart
+			{data}
+			key="fruit"
+			value="value"
+			cRange={fruitColors}
+			props={{ pie: { motion: 'spring' } }}
+		/>
 	{/if}
 </div>

docs/src/examples/components/PieChart/motion-tween.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
-	export { data };
-
 	let show = $state(true);
+	export { data };
 </script>
 
 <ShowControl bind:show label="Show Pie" />
 
 <div style:height="300px">
 	{#if show}
-		<PieChart {data} key="fruit" value="value" props={{ pie: { motion: 'tween' } }} />
+		<PieChart
+			{data}
+			key="fruit"
+			value="value"
+			cRange={fruitColors}
+			props={{ pie: { motion: 'tween' } }}
+		/>
 	{/if}
 </div>

docs/src/examples/components/PieChart/offset-slice.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { Arc, PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300}>
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300}>
 	{#snippet arc({ index, props })}
 		<Arc {...props} offset={index === 1 ? 16 : undefined} />
 	{/snippet}

docs/src/examples/components/PieChart/placement-custom.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	center={false}
 	props={{ group: { x: 200, center: 'y' } }}

docs/src/examples/components/PieChart/placement-left.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	placement="left"
 	legend={{ placement: 'right', orientation: 'vertical' }}

docs/src/examples/components/PieChart/placement-right.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	placement="right"
 	legend={{ placement: 'left', orientation: 'vertical' }}

docs/src/examples/components/PieChart/radius-fixed.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={100} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={100} />

docs/src/examples/components/PieChart/radius-offset.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={-20} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={-20} />

docs/src/examples/components/PieChart/radius-percent.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
 	export { data };
 </script>
 
-<PieChart {data} key="fruit" value="value" height={300} outerRadius={0.8} />
+<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} outerRadius={0.8} />

docs/src/examples/components/PieChart/series-click.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -10,6 +11,7 @@
 <PieChart
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	series={Array.from(data, ([key, data]) => ({
 		key: key.toString(),
 		data

docs/src/examples/components/PieChart/series-props.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -10,6 +11,7 @@
 <PieChart
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	series={[
 		{ key: '2019', data: data.get(2019), props: { innerRadius: -20 } },
 		{ key: '2018', data: data.get(2018), props: { outerRadius: -30 } }

docs/src/examples/components/PieChart/series.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 	import { group } from 'd3-array';
 
@@ -9,6 +10,7 @@
 
 <PieChart
 	key="fruit"
+	cRange={fruitColors}
 	value="value"
 	series={Array.from(data, ([key, data]) => ({
 		key: key.toString(),

docs/src/examples/components/PieChart/tooltip-click.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PieChart } from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruits';
 	import { longData } from '$lib/utils/data';
 
 	const data = longData.filter((d) => d.year === 2019);
@@ -10,6 +11,7 @@
 	{data}
 	key="fruit"
 	value="value"
+	cRange={fruitColors}
 	height={300}
 	onTooltipClick={(e, detail) => {
 		console.log(e, detail);

docs/src/lib/utils/fruits.ts

@@ -0,0 +1,6 @@
+export const fruitColors = [
+	'var(--color-apples)',
+	'var(--color-bananas)',
+	'var(--color-cherries)',
+	'var(--color-grapes)'
+];