@rokkit/chart 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {

package/src/Plot/Legend.svelte

@@ -169,7 +169,7 @@
 				{#each patternItems as item (item.key)}
 					<div class="legend-item" data-plot-legend-item>
 						<svg width="14" height="14" data-plot-legend-swatch>
-							<rect width="14" height="14" fill="var(--color-surface-z2, #ccc)" />
+							<rect width="14" height="14" fill="var(--paper-mute, #ccc)" />
 							<rect width="14" height="14" fill="url(#{item.patternId})" />
 						</svg>
 						<span class="label" data-plot-legend-label>{item.label}</span>
@@ -242,7 +242,7 @@
 		font-size: 12px;
 	}
 	.legend-section {
-		border-top: 1px solid var(--color-surface-z3, #e0e0e0);
+		border-top: 1px solid var(--paper-mute, #e0e0e0);
 		padding-top: 6px;
 	}
 	.legend-item {

package/src/crossfilter/FilterHistogram.svelte

@@ -32,7 +32,7 @@
 		width = 280,
 		height = 120,
 		color = 'rgb(var(--color-primary, 249 115 22))',
-		dimColor = 'rgb(var(--color-surface-z3, 203 213 225))'
+		dimColor = 'rgb(var(--paper-mute, 203 213 225))'
 	}: Props = $props()
 
 	const cf = getContext<CrossFilter | undefined>('crossfilter')
@@ -285,7 +285,7 @@
 		flex-direction: column;
 		gap: 4px;
 		font-size: 12px;
-		color: rgb(var(--color-surface-z6, 100 116 139));
+		color: rgb(var(--ink-soft, 100 116 139));
 	}
 	[data-filter-histogram-label] {
 		font-weight: 600;

package/src/lib/chart.js

@@ -97,11 +97,13 @@ class Chart {
 		this.refresh()
 	}
 
+	/* v8 ignore next 4 -- this.padding (number) set in #initFields shadows this prototype method */
 	padding(value) {
 		this.padding = value
 		return this.refresh()
 	}
 
+	/* v8 ignore next 4 -- this.margin (object) set in #initFields shadows this prototype method */
 	margin(value) {
 		this.margin = value
 		return this.refresh()

package/src/lib/context.js

@@ -1,6 +1,8 @@
 import { getContext, setContext } from 'svelte'
 import { writable, derived } from 'svelte/store'
-import * as d3 from 'd3'
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale'
+import { schemeCategory10 } from 'd3-scale-chromatic'
+import { max } from 'd3-array'
 
 const CHART_CONTEXT = 'chart-context'
 
@@ -61,22 +63,20 @@ function makeUpdateScales(data, innerDimensions) {
 		return derived([data, innerDimensions], ([$data, $innerDimensions]) => {
 			if (!$data || $data.length === 0) return null
 
-			const xScale = d3
-				.scaleBand()
+			const xScale = scaleBand()
 				.domain($data.map((d) => d[xKey]))
 				.range([0, $innerDimensions.width])
 				.padding(0.2)
 
-			const yScale = d3
-				.scaleLinear()
-				.domain([0, d3.max($data, (d) => d[yKey])])
+			const yScale = scaleLinear()
+				.domain([0, max($data, (d) => d[yKey])])
 				.nice()
 				.range([$innerDimensions.height, 0])
 
 			let colorScale = null
 			if (colorKey) {
 				const uniqueCategories = [...new Set($data.map((d) => d[colorKey]))]
-				colorScale = d3.scaleOrdinal().domain(uniqueCategories).range(d3.schemeCategory10)
+				colorScale = scaleOrdinal().domain(uniqueCategories).range(schemeCategory10)
 			}
 
 			return { xScale, yScale, colorScale }

package/src/lib/keyboard-nav.js

@@ -17,7 +17,7 @@ export function keyboardNav(node, enabled) {
 		const container = node.closest('[data-plot-geom]')
 		if (!container) return
 		const elements = [...container.querySelectorAll('[data-plot-element]')].filter(
-			(el) => /** @type {HTMLElement|SVGElement} */ (el).tabIndex >= 0
+			(el) => el.tabIndex >= 0
 		)
 		const idx = elements.indexOf(node)
 		if (idx === -1) return
@@ -25,7 +25,7 @@ export function keyboardNav(node, enabled) {
 			e.key === 'ArrowRight' ? Math.min(idx + 1, elements.length - 1) : Math.max(idx - 1, 0)
 		if (nextIdx !== idx) {
 			e.preventDefault()
-			/** @type {HTMLElement|SVGElement} */ (elements[nextIdx]).focus()
+			elements[nextIdx].focus()
 		}
 	}
 	node.addEventListener('keydown', handleKeydown)