@rokkit/chart 1.0.0-next.13 → 1.0.0-next.130

package/dist/old_lib/ticks.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @typedef {Object} TickSteps
+ * @property {number} major - count of major ticks
+ * @property {number} minor - count of minor ticks
+ */
+/**
+ * Generate an array of ticks for a given axis and the tick type
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ * @param {string}    type  - The type of tick to generate
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function ticksByType(lower: number, upper: number, steps: TickSteps, type: string): any[];
+/**
+ * Generate an array of ticks for a given axis
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function getTicks(lower: number, upper: number, steps?: TickSteps): any[];
+export type TickSteps = {
+    /**
+     * - count of major ticks
+     */
+    major: number;
+    /**
+     * - count of minor ticks
+     */
+    minor: number;
+};

package/dist/old_lib/utils.d.ts

@@ -0,0 +1 @@
+export function scaledPathCollection(paths: any): {};

package/dist/patterns/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Brick } from "./Brick.svelte";
+export { default as Circles } from "./Circles.svelte";
+export { default as Dots } from "./Dots.svelte";
+export { default as CrossHatch } from "./CrossHatch.svelte";
+export { default as Waves } from "./Waves.svelte";
+export { default as Tile } from "./Tile.svelte";
+export { default as Triangles } from "./Triangles.svelte";
+export { default as CurvedWave } from "./CurvedWave.svelte";
+export { default as OutlineCircles } from "./OutlineCircles.svelte";

package/dist/patterns/paths/constants.d.ts

@@ -0,0 +1 @@
+export const patterns: {};

package/dist/symbols/constants/index.d.ts

@@ -0,0 +1 @@
+export const namedShapes: {};

package/dist/symbols/index.d.ts

@@ -0,0 +1,5 @@
+export const shapes: string[];
+export const components: {
+    default: import("svelte/legacy").LegacyComponentType;
+    'rounded-square': import("svelte/legacy").LegacyComponentType;
+};

package/dist/template/constants.d.ts

@@ -0,0 +1,43 @@
+export namespace library {
+    namespace Brick {
+        let component: string;
+        let allowed: string[];
+        let data: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        }[];
+    }
+    namespace Circles {
+        let component_1: string;
+        export { component_1 as component };
+        let allowed_1: string[];
+        export { allowed_1 as allowed };
+        let data_1: {
+            cx: number;
+            cy: number;
+            r: number;
+        }[];
+        export { data_1 as data };
+    }
+    namespace Dominoes {
+        let component_2: string;
+        export { component_2 as component };
+        let allowed_2: string[];
+        export { allowed_2 as allowed };
+        let data_2: {
+            cx: number;
+            cy: number;
+            r: number;
+        }[];
+        export { data_2 as data };
+    }
+    namespace Waves {
+        let component_3: string;
+        export { component_3 as component };
+        export let stroke: boolean;
+        let data_3: (string | number)[][];
+        export { data_3 as data };
+    }
+}

package/dist/template/shapes/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Circles } from "./Circles.svelte";
+export { default as Lines } from "./Lines.svelte";
+export { default as Path } from "./Path.svelte";
+export { default as Polygons } from "./Polygons.svelte";

package/package.json

@@ -1,63 +1,47 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.13",
-  "description": "Components for making interactive charts.",
+  "version": "1.0.0-next.130",
+  "type": "module",
+  "description": "Data-driven chart components",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
-  "main": "index.js",
-  "svelte": "src/index.js",
-  "module": "src/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
+  "npm": {
+    "publish": false
+  },
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/ui": "~0.12.10",
-    "eslint": "^8.33.0",
-    "js-yaml": "^4.1.0",
-    "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "~0.19.1",
-    "eslint-config-shared": "1.0.0",
-    "shared-config": "1.0.0"
-  },
-  "dependencies": {
-    "d3-array": "^3.2.2",
-    "d3-collection": "^1.0.7",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "date-fns": "^2.29.3",
-    "ramda": "^0.28.0",
-    "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.13"
+  "scripts": {
+    "prepublishOnly": "bun clean && bun tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun prepublishOnly"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "dist/**/*.d.ts",
+    "README.md",
+    "package.json"
   ],
   "exports": {
-    "./src": "./src",
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./src/index.js"
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
     }
   },
-  "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
-    "test:ci": "vitest run",
-    "test:ui": "vitest --ui",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+  "dependencies": {
+    "@rokkit/core": "latest",
+    "@rokkit/data": "latest",
+    "@rokkit/states": "latest",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.2",
+    "d3-axis": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-selection": "^3.0.0",
+    "d3-transition": "^3.0.1",
+    "ramda": "^0.32.0"
   }
-}
+}

package/src/Plot/Axis.svelte

@@ -0,0 +1,95 @@
+<script>
+	import { getContext } from 'svelte'
+	import { createXAxis, createYAxis, createTickAttributes } from '../lib/brewing/axes.svelte.js'
+
+	let {
+		type = 'x',
+		field = null,
+		label = '',
+		ticks = null,
+		tickFormat = null,
+		grid = false
+	} = $props()
+
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Set field mappings in the brewer
+	$effect(() => {
+		if (field) {
+			brewer.setFields({
+				[type]: field
+			})
+
+			// Ensure scales are updated
+			brewer.createScales()
+		}
+	})
+
+	// Compute axis data whenever scales change
+	let axisData = $derived(
+		type === 'x'
+			? brewer.createXAxis({ tickCount: ticks, tickFormat, label })
+			: brewer.createYAxis({ tickCount: ticks, tickFormat, label })
+	)
+</script>
+
+<g class="axis {type}-axis" transform={axisData.transform} data-plot-axis={type}>
+	{#if axisData.ticks.length > 0}
+		<!-- Axis line -->
+		<line
+			data-plot-axis-line
+			x1={type === 'x' ? 0 : 0}
+			y1={type === 'x' ? 0 : 0}
+			x2={type === 'x' ? brewer.getDimensions().innerWidth : 0}
+			y2={type === 'x' ? 0 : brewer.getDimensions().innerHeight}
+			stroke="currentColor"
+		/>
+
+		<!-- Ticks -->
+		{#each axisData.ticks as tick, index (index)}
+			{@const attrs = createTickAttributes(tick, type)}
+			<g {...attrs}>
+				<line
+					x1="0"
+					y1="0"
+					x2={type === 'x' ? 0 : -6}
+					y2={type === 'x' ? 6 : 0}
+					stroke="currentColor"
+				/>
+				<text x={type === 'x' ? 0 : -9} y={type === 'x' ? 9 : 0} data-plot-tick-label>
+					{tick.formattedValue}
+				</text>
+			</g>
+		{/each}
+
+		<!-- Axis label -->
+		{#if label}
+			<text
+				class="axis-label {type}-axis-label"
+				transform={axisData.labelTransform}
+				text-anchor="middle"
+				data-plot-axis-label
+			>
+				{label}
+			</text>
+		{/if}
+	{/if}
+</g>
+
+<style>
+	.axis {
+		font-size: 12px;
+	}
+
+	.axis-label {
+		font-size: 14px;
+		font-weight: 500;
+		fill: currentColor;
+	}
+
+	[data-plot-tick-label] {
+		font-size: 11px;
+		fill: currentColor;
+	}
+</style>

package/src/Plot/Bar.svelte

@@ -0,0 +1,96 @@
+<script>
+	import { getContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+
+	let {
+		x = null,
+		y = null,
+		fill = null,
+		color = '#4682b4',
+		opacity = 1,
+		animationDuration = 300,
+		onClick = null
+	} = $props()
+
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Set field mappings in the brewer
+	$effect(() => {
+		brewer.setFields({
+			x,
+			y,
+			color: fill
+		})
+
+		// Ensure scales are updated
+		brewer.createScales()
+	})
+
+	// Compute bars whenever data or fields change
+	let bars = $derived(brewer.createBars())
+
+	// Animation transition values
+	let initialY = $state(0)
+	let initialHeight = $state(0)
+
+	// Handle resetting animation state for new bars
+	$effect(() => {
+		if (bars && bars.length > 0) {
+			initialY = brewer.getDimensions().innerHeight
+			initialHeight = 0
+
+			// Reset to actual positions after a delay
+			setTimeout(() => {
+				initialY = 0
+				initialHeight = 0
+			}, 10)
+		}
+	})
+
+	// Handle bar click
+	function handleClick(event, bar) {
+		if (onClick) onClick(bar.data, event)
+	}
+</script>
+
+{#if bars && bars.length > 0}
+	<g class="chart-bars" data-plot-type="bar">
+		{#each bars as bar, i (bar.data[x])}
+			{@const barY = initialY > 0 ? brewer.getDimensions().innerHeight : bar.y}
+			{@const barHeight = initialHeight > 0 ? 0 : bar.height}
+
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_click_events_have_key_events -->
+			<rect
+				class="bar"
+				x={bar.x}
+				y={barY}
+				width={bar.width}
+				height={barHeight}
+				fill={bar.color}
+				{opacity}
+				onclick={(event) => handleClick(event, bar)}
+				onmouseenter={(event) => {
+					event.target.setAttribute('opacity', Math.min(opacity + 0.2, 1))
+				}}
+				onmouseleave={(event) => {
+					event.target.setAttribute('opacity', opacity)
+				}}
+				style="transition: y {animationDuration}ms ease, height {animationDuration}ms ease;"
+				role="graphics-symbol"
+				aria-label="Bar representing {bar.data[x]} with value {bar.data[y]}"
+				data-plot-element="bar"
+				data-plot-value={bar.data[y]}
+				data-plot-category={bar.data[x]}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-bars .bar {
+		cursor: pointer;
+	}
+</style>

package/src/Plot/Grid.svelte

@@ -0,0 +1,68 @@
+<script>
+	import { getContext } from 'svelte'
+	import { createGrid } from '../lib/brewing/axes.svelte.js'
+
+	let {
+		direction = 'both',
+		xTicks = null,
+		yTicks = null,
+		color = 'currentColor',
+		opacity = 0.1,
+		lineStyle = 'solid'
+	} = $props()
+
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Get grid data
+	let gridData = $derived(
+		brewer.createGrid({
+			direction,
+			xTickCount: xTicks,
+			yTickCount: yTicks
+		})
+	)
+
+	// Convert lineStyle to stroke-dasharray
+	let strokeDasharray = $derived(
+		lineStyle === 'dashed' ? '5,5' : lineStyle === 'dotted' ? '1,3' : 'none'
+	)
+</script>
+
+<g class="chart-grid" data-plot-grid={direction}>
+	{#if direction === 'x' || direction === 'both'}
+		{#each gridData.xLines as line, index (index)}
+			<line
+				data-plot-grid-line="x"
+				x1={line.x1}
+				y1={line.y1}
+				x2={line.x2}
+				y2={line.y2}
+				stroke={color}
+				stroke-opacity={opacity}
+				stroke-dasharray={strokeDasharray}
+			/>
+		{/each}
+	{/if}
+
+	{#if direction === 'y' || direction === 'both'}
+		{#each gridData.yLines as line, index (index)}
+			<line
+				data-plot-grid-line="y"
+				x1={line.x1}
+				y1={line.y1}
+				x2={line.x2}
+				y2={line.y2}
+				stroke={color}
+				stroke-opacity={opacity}
+				stroke-dasharray={strokeDasharray}
+			/>
+		{/each}
+	{/if}
+</g>
+
+<style>
+	.chart-grid {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Legend.svelte

@@ -0,0 +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)
+	}
+</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, 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>

package/src/Plot/Root.svelte

@@ -0,0 +1,107 @@
+<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,
+		children
+	} = $props()
+
+	// Create chart brewer instance
+	let brewer = $state(new ChartBrewer())
+
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
+
+	// 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()
+	})
+
+	// 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
+		>
+			{@render children?.()}
+		</g>
+	</svg>
+</div>
+
+<style>
+	.chart-container {
+		position: relative;
+		width: 100%;
+		height: auto;
+	}
+
+	svg {
+		display: block;
+		overflow: visible;
+	}
+
+	.chart-area {
+		pointer-events: all;
+	}
+</style>