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

package/src/Plot/Legend.svelte

@@ -1,129 +1,127 @@
 <script>
-  import { getContext } from 'svelte';
-  import { createLegend, createLegendItemAttributes } from '../lib/brewing/legends.svelte.js';
-
-  let {
-    title = '',
-    align = 'right',
-    verticalAlign = 'top',
-    shape = 'rect',
-    markerSize = 10,
-    onClick = null
-  } = $props();
-
-  // Get brewer from context
-  const brewer = getContext('chart-brewer');
-  
-  // Get legend data
-  let legendData = $derived(brewer.createLegend({
-    title,
-    align,
-    shape,
-    markerSize
-  }));
-  
-  // Track selected items (for filtering)
-  let selectedItems = $state([]);
-  
-  function toggleItem(item) {
-    if (!onClick) return;
-    
-    const isSelected = selectedItems.includes(item.value);
-    
-    if (isSelected) {
-      selectedItems = selectedItems.filter(v => v !== item.value);
-    } else {
-      selectedItems = [...selectedItems, item.value];
-    }
-    
-    onClick(selectedItems);
-  }
+	import { getContext } from 'svelte'
+	import { createLegend, createLegendItemAttributes } from '../lib/brewing/legends.svelte.js'
+
+	let {
+		title = '',
+		align = 'right',
+		verticalAlign = 'top',
+		shape = 'rect',
+		markerSize = 10,
+		onClick = null
+	} = $props()
+
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Get legend data
+	let legendData = $derived(
+		brewer.createLegend({
+			title,
+			align,
+			shape,
+			markerSize
+		})
+	)
+
+	// Track selected items (for filtering)
+	let selectedItems = $state([])
+
+	function toggleItem(item) {
+		if (!onClick) return
+
+		const isSelected = selectedItems.includes(item.value)
+
+		if (isSelected) {
+			selectedItems = selectedItems.filter((v) => v !== item.value)
+		} else {
+			selectedItems = [...selectedItems, item.value]
+		}
+
+		onClick(selectedItems)
+	}
 </script>
 
 {#if legendData.items.length > 0}
-  <g 
-    class="chart-legend"
-    transform={legendData.transform}
-    data-plot-legend
-  >
-    <!-- Legend title -->
-    {#if legendData.title}
-      <text
-        class="legend-title"
-        x="0"
-        y="-6"
-        text-anchor={align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle'}
-        data-plot-legend-title
-      >
-        {legendData.title}
-      </text>
-    {/if}
-    
-    <!-- Legend items -->
-    {#each legendData.items as item}
-      {@const attrs = createLegendItemAttributes(item)}
-      {@const isSelected = selectedItems.includes(item.value)}
-      <g 
-        {...attrs}
-        class="legend-item"
-        class:selected={isSelected}
-        on:click={() => toggleItem(item)}
-      >
-        <!-- Shape: circle or rect -->
-        {#if item.shape === 'circle'}
-          <circle
-            cx={item.markerSize / 2}
-            cy={item.markerSize / 2}
-            r={item.markerSize / 2}
-            fill={item.color}
-            stroke={isSelected ? 'currentColor' : 'none'}
-            stroke-width={isSelected ? 1 : 0}
-            data-plot-legend-marker="circle"
-          />
-        {:else}
-          <rect
-            width={item.markerSize}
-            height={item.markerSize}
-            fill={item.color}
-            stroke={isSelected ? 'currentColor' : 'none'}
-            stroke-width={isSelected ? 1 : 0}
-            data-plot-legend-marker="rect"
-          />
-        {/if}
-        
-        <!-- Text label -->
-        <text
-          x={item.markerSize + 5}
-          y={item.markerSize - 2}
-          text-anchor="start"
-          data-plot-legend-label
-        >
-          {item.value}
-        </text>
-      </g>
-    {/each}
-  </g>
+	<g class="chart-legend" transform={legendData.transform} data-plot-legend>
+		<!-- Legend title -->
+		{#if legendData.title}
+			<text
+				class="legend-title"
+				x="0"
+				y="-6"
+				text-anchor={align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle'}
+				data-plot-legend-title
+			>
+				{legendData.title}
+			</text>
+		{/if}
+
+		<!-- Legend items -->
+		{#each legendData.items as item, index (index)}
+			{@const attrs = createLegendItemAttributes(item)}
+			{@const isSelected = selectedItems.includes(item.value)}
+			<g
+				{...attrs}
+				class="legend-item"
+				class:selected={isSelected}
+				onclick={() => toggleItem(item)}
+			>
+				<!-- Shape: circle or rect -->
+				{#if item.shape === 'circle'}
+					<circle
+						cx={item.markerSize / 2}
+						cy={item.markerSize / 2}
+						r={item.markerSize / 2}
+						fill={item.color}
+						stroke={isSelected ? 'currentColor' : 'none'}
+						stroke-width={isSelected ? 1 : 0}
+						data-plot-legend-marker="circle"
+					/>
+				{:else}
+					<rect
+						width={item.markerSize}
+						height={item.markerSize}
+						fill={item.color}
+						stroke={isSelected ? 'currentColor' : 'none'}
+						stroke-width={isSelected ? 1 : 0}
+						data-plot-legend-marker="rect"
+					/>
+				{/if}
+
+				<!-- Text label -->
+				<text
+					x={item.markerSize + 5}
+					y={item.markerSize - 2}
+					text-anchor="start"
+					data-plot-legend-label
+				>
+					{item.value}
+				</text>
+			</g>
+		{/each}
+	</g>
 {/if}
 
 <style>
-  .chart-legend {
-    font-size: 12px;
-  }
-  
-  .legend-title {
-    font-weight: bold;
-    font-size: 14px;
-  }
-  
-  .legend-item {
-    cursor: pointer;
-  }
-  
-  .legend-item:hover [data-plot-legend-label] {
-    font-weight: 500;
-  }
-  
-  .legend-item.selected [data-plot-legend-label] {
-    font-weight: 700;
-  }
-</style>
+	.chart-legend {
+		font-size: 12px;
+	}
+
+	.legend-title {
+		font-weight: bold;
+		font-size: 14px;
+	}
+
+	.legend-item {
+		cursor: pointer;
+	}
+
+	.legend-item:hover [data-plot-legend-label] {
+		font-weight: 500;
+	}
+
+	.legend-item.selected [data-plot-legend-label] {
+		font-weight: 700;
+	}
+</style>

package/src/Plot/Root.svelte

@@ -1,112 +1,114 @@
 <script>
-  import { setContext } from 'svelte';
-  import { ChartBrewer } from '../lib/brewing/index.svelte.js';
-  
-  let {
-    data = [],
-    width = 600,
-    height = 400,
-    margin = { top: 20, right: 30, bottom: 40, left: 50 },
-    fill = null,
-    responsive = true,
-    animationDuration = 300
-  } = $props();
-  
-  // Create chart brewer instance
-  let brewer = $state(new ChartBrewer({
-    width,
-    height,
-    margin,
-    animationDuration
-  }));
-  
-  // Chart dimensions derived from brewer
-  let dimensions = $derived(brewer.getDimensions());
-  
-  // Process data
-  $effect(() => {
-    // If data has a select method (dataset object), call it to get actual data
-    const chartData = data.select && typeof data.select === 'function' ? data.select() : data;
-    
-    // Update brewer with data and fields
-    brewer.setData(chartData);
-    brewer.setFields({ color: fill });
-    
-    // Create scales after setting data
-    brewer.createScales();
-  });
-  
-  // Update chart dimensions when props change
-  $effect(() => {
-    brewer.setDimensions({ width, height, margin });
-  });
-  
-  // Provide chart context to child components
-  setContext('chart-brewer', brewer);
-  
-  // Handle responsive behavior
-  let container;
-  
-  $effect(() => {
-    if (!responsive || !container || !document) return;
-    
-    const resizeObserver = new ResizeObserver(entries => {
-      const entry = entries[0];
-      if (!entry) return;
-      
-      const containerWidth = entry.contentRect.width;
-      const aspectRatio = height / width;
-      
-      // Update chart dimensions while maintaining aspect ratio
-      brewer.setDimensions({
-        width: containerWidth,
-        height: containerWidth * aspectRatio
-      });
-      
-      // Update scales after dimensions change
-      brewer.createScales();
-    });
-    
-    // Start observing container size
-    resizeObserver.observe(container);
-    
-    return () => {
-      resizeObserver.disconnect();
-    };
-  });
+	import { setContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+
+	let {
+		data = [],
+		width = 600,
+		height = 400,
+		margin = { top: 20, right: 30, bottom: 40, left: 50 },
+		fill = null,
+		responsive = true,
+		animationDuration = 300
+	} = $props()
+
+	// Create chart brewer instance
+	let brewer = $state(
+		new ChartBrewer({
+			width,
+			height,
+			margin,
+			animationDuration
+		})
+	)
+
+	// Chart dimensions derived from brewer
+	let dimensions = $derived(brewer.getDimensions())
+
+	// Process data
+	$effect(() => {
+		// If data has a select method (dataset object), call it to get actual data
+		const chartData = data.select && typeof data.select === 'function' ? data.select() : data
+
+		// Update brewer with data and fields
+		brewer.setData(chartData)
+		brewer.setFields({ color: fill })
+
+		// Create scales after setting data
+		brewer.createScales()
+	})
+
+	// Update chart dimensions when props change
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
+
+	// Provide chart context to child components
+	setContext('chart-brewer', brewer)
+
+	// Handle responsive behavior
+	let container
+
+	$effect(() => {
+		if (!responsive || !container || !document) return
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0]
+			if (!entry) return
+
+			const containerWidth = entry.contentRect.width
+			const aspectRatio = height / width
+
+			// Update chart dimensions while maintaining aspect ratio
+			brewer.setDimensions({
+				width: containerWidth,
+				height: containerWidth * aspectRatio
+			})
+
+			// Update scales after dimensions change
+			brewer.createScales()
+		})
+
+		// Start observing container size
+		resizeObserver.observe(container)
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	})
 </script>
 
 <div class="chart-container" bind:this={container} data-plot-root>
-  <svg
-    width={dimensions.width}
-    height={dimensions.height}
-    viewBox="0 0 {dimensions.width} {dimensions.height}"
-    role="img"
-    aria-label="Chart visualization"
-  >
-    <g 
-      class="chart-area"
-      transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
-      data-plot-canvas
-    >
-      <slot />
-    </g>
-  </svg>
+	<svg
+		width={dimensions.width}
+		height={dimensions.height}
+		viewBox="0 0 {dimensions.width} {dimensions.height}"
+		role="img"
+		aria-label="Chart visualization"
+	>
+		<g
+			class="chart-area"
+			transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
+			data-plot-canvas
+		>
+			<slot />
+		</g>
+	</svg>
 </div>
 
 <style>
-  .chart-container {
-    position: relative;
-    width: 100%;
-    height: auto;
-  }
-  
-  svg {
-    display: block;
-    overflow: visible;
-  }
-  
-  .chart-area {
-    pointer-events: all;
-  }
-</style>
+	.chart-container {
+		position: relative;
+		width: 100%;
+		height: auto;
+	}
+
+	svg {
+		display: block;
+		overflow: visible;
+	}
+
+	.chart-area {
+		pointer-events: all;
+	}
+</style>

package/src/elements/ColorRamp.svelte

@@ -2,36 +2,36 @@
 	import { scaleLinear } from 'd3-scale'
 	import { id as uniqueId } from '@rokkit/core'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
+	let { x = 0, y = 0, textSize = 5, height = 10, width = 100, tickCount = 5, scale } = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + width])
-		.domain(scale.domain())
-	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
-	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + width])
+			.domain(scale.domain())
+	)
+	let scalePercent = $derived(scaleLinear().range([0, 100]).domain(scale.domain()))
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	)
 
-	$: colors = ticks.map(({ value }) => ({
-		color: scale(value),
-		offset: `${scalePercent(value)}%`
-	}))
-	$: id = uniqueId('legend-')
+	let colors = $derived(
+		ticks.map(({ value }) => ({
+			color: scale(value),
+			offset: `${scalePercent(value)}%`
+		}))
+	)
+	let id = $state(uniqueId('legend-'))
 </script>
 
 <defs>
 	<linearGradient {id}>
-		{#each colors as { color, offset }}
+		{#each colors as { color, offset }, index (index)}
 			<stop stop-color={color} {offset} />
 		{/each}
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, value }}
+{#each ticks as { x, value }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{value}</text>
 {/each}

package/src/elements/ContinuousLegend.svelte

@@ -27,7 +27,7 @@
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, label }}
+{#each ticks as { x, label }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
 {/each}

package/src/elements/DefinePatterns.svelte

@@ -13,7 +13,7 @@
 	<error> Patterns should be an array and should have unique names for each pattern </error>
 {:else if patterns.length > 0}
 	<defs>
-		{#each patterns as { id, component, fill, stroke }}
+		{#each patterns as { id, component, fill, stroke }, index (index)}
 			<pattern {id} {patternUnits} width={size} height={size}>
 				<svelte:component this={component} {size} {fill} {stroke} />
 			</pattern>

package/src/elements/DiscreteLegend.svelte

@@ -12,7 +12,7 @@
 	$: ticks = scale.ticks.apply(scale, [tickCount])
 </script>
 
-{#each ticks as tick, i}
+{#each ticks as tick, i (i)}
 	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
 		>{tick}</text
 	>

package/src/elements/SymbolGrid.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <svg viewBox="0 0 {grid.width} {grid.height}">
-	{#each grid.data as { x, y, r }, index}
+	{#each grid.data as { x, y, r }, index (index)}
 		<Symbol
 			{x}
 			{y}