@rokkit/chart 1.0.0-next.15 → 1.0.0-next.150

package/src/patterns/patterns.js

@@ -0,0 +1,208 @@
+/**
+ * Unified pattern library.
+ *
+ * Each entry is an array of mark descriptors.  All geometry is in normalized
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
+ *
+ * Mark types
+ * ----------
+ * circle   { cx, cy, r }
+ * line     { x1, y1, x2, y2 }           coordinates may exceed 0–1 for seamless tiling
+ * polygon  { points: [x,y][] }
+ * rect     { x, y, w, h }
+ * path     { d: [cmd, ...args][] }       SVG path commands as nested arrays (H/V take one arg)
+ *
+ * Appearance
+ * ----------
+ * fill: true      → element uses fill color (stroke: none)
+ * fill: false     → element uses stroke color (fill: none)   ← default
+ * fillOpacity: n  → applied as fill-opacity on filled marks
+ * opacity: n      → applied as opacity on any mark
+ */
+
+/** @typedef {{ type: 'circle',  cx: number, cy: number, r: number,              fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
+/** @typedef {{ type: 'line',    x1: number, y1: number, x2: number, y2: number, fill?: false,   strokeWidth?: number }} LineMark */
+/** @typedef {{ type: 'polygon', points: [number,number][],                       fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
+/** @typedef {{ type: 'rect',    x: number,  y: number,  w: number,  h: number,  fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
+/** @typedef {{ type: 'path',    d: (string|number)[][],                          fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
+/** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
+
+/** @type {Record<string, PatternMark[]>} */
+export const PATTERNS = {
+  // ── Line-based ──────────────────────────────────────────────────────────────
+
+  brick: [
+    { type: 'line', x1: 0,   y1: 0.25, x2: 0.5, y2: 0.25 },
+    { type: 'line', x1: 0.5, y1: 0.75, x2: 1,   y2: 0.75 },
+    { type: 'line', x1: 0,   y1: 0,    x2: 0,   y2: 1    },
+    { type: 'line', x1: 1,   y1: 0,    x2: 1,   y2: 1    },
+    { type: 'line', x1: 0.5, y1: 0,    x2: 0.5, y2: 1    }
+  ],
+
+  hatch: [
+    { type: 'line', x1: 0,    y1: 0.25, x2: 1,    y2: 0.25 },
+    { type: 'line', x1: 0,    y1: 0.5,  x2: 1,    y2: 0.5  },
+    { type: 'line', x1: 0,    y1: 0.75, x2: 1,    y2: 0.75 },
+    { type: 'line', x1: 0.25, y1: 0,    x2: 0.25, y2: 1    },
+    { type: 'line', x1: 0.5,  y1: 0,    x2: 0.5,  y2: 1    },
+    { type: 'line', x1: 0.75, y1: 0,    x2: 0.75, y2: 1    }
+  ],
+
+  // Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
+  diagonal: [
+    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2: -0.5 },
+    { type: 'line', x1:  0,   y1: 1,    x2: 1,    y2:  0   },
+    { type: 'line', x1:  0.5, y1: 1.5,  x2: 1.5,  y2:  0.5 }
+  ],
+
+  // Two sets of diagonals crossing to form a diamond lattice
+  diamonds: [
+    { type: 'line', x1:  0,   y1: 1,    x2: 1,    y2:  0   },
+    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2: -0.5 },
+    { type: 'line', x1:  0.5, y1: 1.5,  x2: 1.5,  y2:  0.5 },
+    { type: 'line', x1:  0,   y1: 0,    x2: 1,    y2:  1   },
+    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2:  1.5 },
+    { type: 'line', x1:  0.5, y1: -0.5, x2: 1.5,  y2:  0.5 }
+  ],
+
+  tile: [
+    { type: 'line', x1: 0,   y1: 0.5, x2: 1,   y2: 0.5 },
+    { type: 'line', x1: 0.5, y1: 0,   x2: 0.5, y2: 1   }
+  ],
+
+  // ── Path-based ──────────────────────────────────────────────────────────────
+
+  swell: [
+    { type: 'path', d: [['M', 0, 0.3], ['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]] }
+  ],
+
+  waves: [
+    { type: 'path', d: [['M', 0, 0.5], ['L', 0.25, 0], ['L', 0.75, 1], ['L', 1, 0.5]] }
+  ],
+
+  // ── Circle-based ────────────────────────────────────────────────────────────
+
+  // Small filled dots in an X pattern across the tile
+  dots: [
+    { type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
+    { type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
+  ],
+
+  // Outlined diamond (rotated square)
+  lattice: [
+    { type: 'polygon', points: [[0.5, 0.22], [0.78, 0.5], [0.5, 0.78], [0.22, 0.5]] }
+  ],
+
+  // Fish-scale geometry as stroke only — same circles as petals, no fill
+  scales: [
+    {
+      type: 'path',
+      d: [
+        ['M', -0.7071, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        ['M',  0.2929, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        ['M', -0.2071, 0.5],  ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        ['M', -0.7071, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        ['M',  0.2929, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+      ]
+    }
+  ],
+
+  // Filled circles at tile corners + center (5-point dice pattern)
+  circles: [
+    { type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
+    { type: 'circle', cx: 0,   cy: 0,   r: 0.2, fill: true },
+    { type: 'circle', cx: 1,   cy: 0,   r: 0.2, fill: true },
+    { type: 'circle', cx: 0,   cy: 1,   r: 0.2, fill: true },
+    { type: 'circle', cx: 1,   cy: 1,   r: 0.2, fill: true }
+  ],
+
+  // Diagonal cross strokes with a filled circle at the center
+  pip: [
+    { type: 'line',   x1: 0, y1: 0, x2: 1, y2: 1 },
+    { type: 'line',   x1: 0, y1: 1, x2: 1, y2: 0 },
+    { type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
+  ],
+
+  // Two outlined circles + two filled circles in a 2×2 grid
+  rings: [
+    { type: 'circle', cx: 0.25, cy: 0.25, r: 0.2              },
+    { type: 'circle', cx: 0.75, cy: 0.75, r: 0.2              },
+    { type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
+    { type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
+  ],
+
+  // Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
+  // circle passes through its adjacent neighbors' centers. Even-odd fill produces
+  // the scallop/petal pattern where overlapping regions alternate filled/clear.
+  petals: [
+    {
+      type: 'path', fill: true, fillRule: 'evenodd',
+      d: [
+        // center (0, 0)   r=0.7071  leftmost = (-0.7071, 0)
+        ['M', -0.7071, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        // center (1, 0)   leftmost = (0.2929, 0)
+        ['M',  0.2929, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        // center (0.5, 0.5)  leftmost = (-0.2071, 0.5)
+        ['M', -0.2071, 0.5],  ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        // center (0, 1)   leftmost = (-0.7071, 1)
+        ['M', -0.7071, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+        // center (1, 1)   leftmost = (0.2929, 1)
+        ['M',  0.2929, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+      ]
+    }
+  ],
+
+  // ── Polygon-based ───────────────────────────────────────────────────────────
+
+  // Three filled triangles tiling the corners + center of the tile
+  triangles: [
+    { type: 'polygon', points: [[0, 0.5], [0.5, 1], [0, 1]],     fill: true },
+    { type: 'polygon', points: [[0.5, 0], [0, 0],   [0, 0.5]],   fill: true },
+    { type: 'polygon', points: [[1, 0],   [0.5, 0.5], [1, 1]],   fill: true }
+  ],
+
+  // Two filled triangles scattered at opposite corners
+  shards: [
+    { type: 'polygon', points: [[0.25, 0.017], [0, 0.417], [0.5, 0.417]], fill: true },
+    { type: 'polygon', points: [[0.5, 0.583], [1, 0.583], [0.75, 0.983]], fill: true }
+  ],
+
+  // Diagonal corner split — two-tone polygon division
+  wedge: [
+    { type: 'polygon', points: [[1, 1], [0.45, 1], [0, 0.55], [0, 0]],                 fill: true },
+    { type: 'polygon', points: [[1, 0], [0, 0], [1, 1]],               fill: true, fillOpacity: 0.55 }
+  ],
+
+  // Two triangles pointing inward from top and bottom edges
+  argyle: [
+    { type: 'polygon', points: [[1, 0], [0.5, 0.5], [0, 0]],   fill: true },
+    { type: 'polygon', points: [[1, 1], [0.5, 0.5], [0, 1]],   fill: true }
+  ],
+
+  // triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
+  chevrons: [
+    { type: 'polygon', points: [[0, 0], [0.5, 0], [0, 0.5]],   fill: true },
+    { type: 'polygon', points: [[0.5, 0], [1, 0], [1, 0.5]],   fill: true },
+    { type: 'polygon', points: [[0, 1], [1, 1], [0.5, 0.5]],   fill: true }
+  ],
+
+  // ── Rect-based ──────────────────────────────────────────────────────────────
+
+  checkerboard: [
+    { type: 'rect', x: 0,   y: 0,   w: 0.5, h: 0.5, fill: true },
+    { type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
+  ],
+
+  // Quarter-circle filled shape (bottom-left corner) with two accent dots
+  shell: [
+    { type: 'path', d: [['M', 0, 1], ['V', 0], ['H', 0.6], ['V', 0.4], ['A', 0.6, 0.6, 0, 0, 1, 0, 1]], fill: true },
+    { type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
+    { type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
+  ],
+}

package/src/patterns/scale.js

@@ -0,0 +1,87 @@
+/**
+ * Mark geometry scaling and attribute resolution utilities.
+ *
+ * All pattern coordinates are stored normalized 0–1.  `scaleMark` multiplies
+ * every geometric value by `size`.  `resolveMarkAttrs` then folds in the
+ * runtime fill/stroke colors and produces a plain object whose keys are
+ * valid SVG attribute names, ready for spread (`{...attrs}`).
+ *
+ * Path `A` (arc) commands: indices 2, 3, 4 are xRotation, largeArcFlag, and
+ * sweepFlag — NOT coordinates — and are never scaled.
+ *
+ * Source → SVG name mappings applied by scaleMark:
+ *   rect  w → width,  h → height
+ *   polygon  points [[x,y]…] → SVG points string
+ *   path  d [[cmd,…]…] → SVG d string
+ */
+
+/** @import { PatternMark } from './patterns.js' */
+
+/**
+ * Scale a single SVG path command by `size`.
+ * @param {(string|number)[]} cmd
+ * @param {number} size
+ * @returns {(string|number)[]}
+ */
+function scalePathCmd(cmd, size) {
+  const [op, ...args] = cmd
+  if (op === 'A' || op === 'a') {
+    return [op, args[0] * size, args[1] * size, args[2], args[3], args[4], args[5] * size, args[6] * size]
+  }
+  return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
+}
+
+/**
+ * Scale all geometric coordinates in a mark by `size`.
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
+ * @param {PatternMark} mark
+ * @param {number} size
+ * @returns {object}
+ */
+export function scaleMark(mark, size) {
+  switch (mark.type) {
+    case 'line':
+      return { ...mark, x1: mark.x1 * size, y1: mark.y1 * size, x2: mark.x2 * size, y2: mark.y2 * size }
+    case 'circle':
+      return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
+    case 'rect': {
+      const { w, h, ...rest } = mark
+      return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
+    }
+    case 'polygon':
+      return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
+    case 'path':
+      return { ...mark, d: mark.d.map((cmd) => scalePathCmd(cmd, size)).map((cmd) => cmd.join(' ')).join(' ') }
+    default:
+      return mark
+  }
+}
+
+/**
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
+ * `attrs` can be spread directly onto the SVG element.
+ *
+ * Per-mark overrides respected:
+ *   mark.strokeWidth  → `stroke-width` (takes precedence over `thickness`)
+ *   mark.fillOpacity  → `fill-opacity`
+ *   mark.opacity      → `opacity`
+ *
+ * @param {object} scaledMark  Output of scaleMark
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
+ * @returns {{ type: string, attrs: object }}
+ */
+export function resolveMarkAttrs(scaledMark, { fill, stroke, thickness }) {
+  const { type, fill: isFill, strokeWidth, fillOpacity, opacity, fillRule, ...geometry } = scaledMark
+
+  const attrs = {
+    ...geometry,
+    fill: isFill ? fill : 'none',
+    stroke: isFill ? 'none' : stroke,
+    'stroke-width': isFill ? 0 : (strokeWidth ?? thickness),
+  }
+  if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
+  if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
+  if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
+
+  return { type, attrs }
+}

package/src/spec/chart-spec.js

@@ -0,0 +1,29 @@
+export class ChartSpec {
+  constructor(data) {
+    this.data = data ?? []
+    this.channels = {}
+    this.layers = []
+    this.options = {}
+  }
+
+  x(f)      { this.channels.x = f; return this }
+  y(f)      { this.channels.y = f; return this }
+  color(f)  { this.channels.color = f; return this }
+  pattern(f){ this.channels.pattern = f; return this }
+  aes(ch)   { Object.assign(this.channels, ch); return this }
+
+  bar(opts = {})   { this.layers.push({ type: 'bar',   ...opts }); return this }
+  line(opts = {})  { this.layers.push({ type: 'line',  ...opts }); return this }
+  area(opts = {})  { this.layers.push({ type: 'area',  ...opts }); return this }
+  arc(opts = {})   { this.layers.push({ type: 'arc',   ...opts }); return this }
+  point(opts = {}) { this.layers.push({ type: 'point', ...opts }); return this }
+
+  grid(opts = {})       { this.options.grid = opts; return this }
+  legend(opts = {})     { this.options.legend = opts; return this }
+  axis(type, opts = {}) { this.options[`axis_${type}`] = opts; return this }
+  size(w, h)            { this.options.width = w; this.options.height = h; return this }
+}
+
+export function chart(data, channels = {}) {
+  return new ChartSpec(data).aes(channels)
+}

package/src/symbols/RoundedSquare.svelte

@@ -0,0 +1,33 @@
+<script>
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		...restProps
+	} = $props()
+
+	let r = $derived(size * 3.534)
+	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
+</script>
+
+<rect
+	x={x - r}
+	y={y - r}
+	width={r * 2}
+	height={r * 2}
+	{fill}
+	{stroke}
+	{...props}
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	tabindex="0"
+/>

package/src/symbols/Shape.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { namedShapes } from './constants'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'none',
+		stroke = 'currentColor',
+		thickness = 1,
+		name = 'circle',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		onblur
+	} = $props()
+
+	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<path
+	{d}
+	{fill}
+	{stroke}
+	transform="translate({x},{y})"
+	stroke-width={thickness}
+	fill-rule="nonzero"
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	{onblur}
+	tabindex="0"
+/>

package/src/symbols/constants/index.js

@@ -0,0 +1,4 @@
+import { scaledPathCollection } from '../../lib/utils'
+import paths from './shapes.json' with { type: 'json' }
+
+export const namedShapes = scaledPathCollection(paths)

package/src/symbols/index.js

@@ -0,0 +1,9 @@
+import { namedShapes } from './constants'
+import { default as Shape } from './Shape.svelte'
+import { default as RoundedSquare } from './RoundedSquare.svelte'
+
+export const shapes = [...Object.keys(namedShapes), 'rounded-square']
+export const components = {
+	default: Shape,
+	'rounded-square': RoundedSquare
+}

package/src/symbols/outline.svelte

@@ -0,0 +1,60 @@
+<svg
+	class="plot"
+	fill="currentColor"
+	font-family="system-ui, sans-serif"
+	font-size="10"
+	text-anchor="middle"
+	width="688"
+	height="60"
+	viewBox="0 0 688 60"
+>
+	<style>
+		:where(.plot) {
+			--plot-background: white;
+			display: block;
+			height: auto;
+			height: intrinsic;
+			max-width: 100%;
+		}
+		:where(.plot text),
+		:where(.plot tspan) {
+			white-space: pre;
+		}
+	</style>
+	<g aria-label="x-axis tick" fill="none" stroke="currentColor"
+		><path transform="translate(68,30)" d="M0,0L0,6"></path><path
+			transform="translate(160,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
+			transform="translate(344,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
+			transform="translate(528,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
+	><g aria-label="x-axis tick label" transform="translate(0,9)"
+		><text y="0.71em" transform="translate(68,30)">asterisk</text><text
+			y="0.71em"
+			transform="translate(160,30)">circle</text
+		><text y="0.71em" transform="translate(252,30)">diamond2</text><text
+			y="0.71em"
+			transform="translate(344,30)">plus</text
+		><text y="0.71em" transform="translate(436,30)">square2</text><text
+			y="0.71em"
+			transform="translate(528,30)">times</text
+		><text y="0.71em" transform="translate(620,30)">triangle2</text></g
+	><g aria-label="dot" fill="none" stroke="currentColor" stroke-width="1.5"
+		><path transform="translate(160,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
+		></path><path transform="translate(344,15.25)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873"
+		></path><path transform="translate(528,15.25)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"
+		></path><path transform="translate(620,15.25)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z"
+		></path><path
+			transform="translate(68,15.25)"
+			d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"
+		></path><path
+			transform="translate(436,15.25)"
+			d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"
+		></path><path transform="translate(252,15.25)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"
+		></path></g
+	></svg
+>

package/src/symbols/solid.svelte

@@ -0,0 +1,60 @@
+<svg
+	class="plot"
+	fill="currentColor"
+	font-family="system-ui, sans-serif"
+	font-size="10"
+	text-anchor="middle"
+	width="688"
+	height="60"
+	viewBox="0 0 688 60"
+	><style>
+		:where(.plot) {
+			--plot-background: white;
+			display: block;
+			height: auto;
+			height: intrinsic;
+			max-width: 100%;
+		}
+		:where(.plot text),
+		:where(.plot tspan) {
+			white-space: pre;
+		}
+	</style><g aria-label="x-axis tick" fill="none" stroke="currentColor"
+		><path transform="translate(68,30)" d="M0,0L0,6"></path><path
+			transform="translate(160,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
+			transform="translate(344,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
+			transform="translate(528,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
+	><g aria-label="x-axis tick label" transform="translate(0,9)"
+		><text y="0.71em" transform="translate(68,30)">circle</text><text
+			y="0.71em"
+			transform="translate(160,30)">cross</text
+		><text y="0.71em" transform="translate(252,30)">diamond</text><text
+			y="0.71em"
+			transform="translate(344,30)">square</text
+		><text y="0.71em" transform="translate(436,30)">star</text><text
+			y="0.71em"
+			transform="translate(528,30)">triangle</text
+		><text y="0.71em" transform="translate(620,30)">wye</text></g
+	><g aria-label="dot"
+		><path transform="translate(68,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
+		></path><path
+			transform="translate(160,15.25)"
+			d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z"
+		></path><path transform="translate(252,15.25)" d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"
+		></path><path transform="translate(344,15.25)" d="M-3.988,-3.988h7.976v7.976h-7.976Z"
+		></path><path
+			transform="translate(436,15.25)"
+			d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"
+		></path><path transform="translate(528,15.25)" d="M0,-6.998L6.06,3.499L-6.06,3.499Z"
+		></path><path
+			transform="translate(620,15.25)"
+			d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"
+		></path></g
+	></svg
+>

package/src/chart/FacetGrid.svelte

@@ -1,51 +0,0 @@
-<script>
-	import Chart from './Chart.svelte'
-	import AxisGrid from './AxisGrid.svelte'
-	import Axis from './Axis.svelte'
-	import AxisTicks from './AxisTicks.svelte'
-	import AxisLabels from './AxisLabels.svelte'
-
-	export let data
-	export let row
-	export let col
-	export let plot
-	export let x
-	export let y
-	export let labels = { x: true, y: true }
-
-	$: rowValues = [...new Set(data.map((d) => d[row]))]
-	$: colValues = [...new Set(data.map((d) => d[col]))]
-</script>
-
-<div class="flex flex-col">
-	{#each rowValues as rowItem}
-		{@const dataFilteredByRow = data.filter((d) => d[row] === rowItem)}
-
-		<div class="flex flex-row">
-			{#each colValues as colItem}
-				{@const dataFilteredByCol = dataFilteredByRow.filter(
-					(d) => d[col] === colItem
-				)}
-
-				<Chart data={dataFilteredByCol} {x} {y}>
-					<Axis name="x" count={7} gap={10}>
-						<AxisTicks side="bottom">
-							{#if labels.x}
-								<AxisLabels angle={-60} />
-							{/if}
-						</AxisTicks>
-					</Axis>
-					<Axis name="y" gap={10}>
-						<AxisTicks side="left">
-							{#if labels.y}
-								<AxisLabels />
-							{/if}
-						</AxisTicks>
-						<AxisGrid />
-					</Axis>
-					<svelte:component this={plot} />
-				</Chart>
-			{/each}
-		</div>
-	{/each}
-</div>

package/src/chart/Grid.svelte

@@ -1,34 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-
-	export let opacity = 1
-	export let hideVertical = false
-	export let hideHorizontal = false
-	let chart = getContext('chart')
-
-	$: opacityV = hideVertical ? 0 : opacity
-	$: opacityH = hideHorizontal ? 0 : opacity
-	$: xRange = $chart.axis.x.scale.range()
-	$: yRange = $chart.axis.y.scale.range()
-</script>
-
-<g class="grid">
-	{#each $chart.axis.x.ticks as tick}
-		<line
-			x1={tick.position}
-			x2={tick.position}
-			y1={yRange[0]}
-			y2={yRange[1]}
-			opacity={opacityV}
-		/>
-	{/each}
-	{#each $chart.axis.y.ticks as tick}
-		<line
-			y1={tick.position}
-			y2={tick.position}
-			x1={xRange[0]}
-			x2={xRange[1]}
-			opacity={opacityH}
-		/>
-	{/each}
-</g>

package/src/chart/Legend.svelte

@@ -1,16 +0,0 @@
-<script>
-	export let title
-	export let items = []
-</script>
-
-<ul class="flex flex-col">
-	<p>{title}</p>
-	{#each items as item}
-		<li class="flex flex-row gap-5">
-			<svg width="42" height="42" viewBox="0 0 42 42">
-				<rect width="42" height="42" fill={item.fillUrl || item.fill} />
-			</svg>
-			<p class="flex flex-grow">{item.label}</p>
-		</li>
-	{/each}
-</ul>

package/src/chart/PatternDefs.svelte

@@ -1,13 +0,0 @@
-<script>
-	import Texture from './Texture.svelte'
-	const size = 10
-
-	export let thickness = 0.5
-	export let patterns
-</script>
-
-<defs>
-	{#each patterns as pattern}
-		<Texture {...pattern} {thickness} {size} />
-	{/each}
-</defs>