Rule marks (#622)

* feat(Rule): Support using as data-driven mark (ex. candlestick) by passing `x`/`y` as accessor (ex. `<Rule y={["high", "low"]} />`)

* breaking(Axis): Rename x="left|right" and `y="top|bottom"` props with `$` prefix (ex. `<Axis x="$left">`)

* Add TODO to replace `<Points links>` with `<Rule>`

* Fix band scale use cases (string value from domain)

* Remove lines out of the bounds of display (range)

* Add brushing and remove redudant cScale (default)

* Set xDomain on chart to have smoother scrubing

* fix(Rule): Properly band scales

* breaking(Points): Remove `<Points links>` prop. Use `<Rule>` with x/y accessor instead

* Tweak candlestick example

* Update related

* feat(Rule): Support single value/accessor for both dimensions (lollipop use case)

* Add lollipop example

* fix(Rule): Improve single property accessors for both dimensions (ex. lollipop chart)

* Add isScaleNumber() util

* Simplify data and time series data generators

* Simplify some Rule examples (if no accessor promised, will be data driven based on Chart accessors)

* docs(Rule): Add data driven examples

* Update changesets

Author: techniq

.changeset/evil-hoops-return.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Axis): Rename `x="left|right"` and `y="top|bottom"` props with `$` prefix (ex. `<Axis x="$left">`)

.changeset/large-spiders-stay.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Rule): Support using as data-driven mark (ex. candlestick, lollipop) by default (`<Rule>` using Chart accessors) or passing explicit `x`/`y` accessors (ex. `<Rule y={["high", "low"]} />`). Resolves #64

.changeset/proud-melons-warn.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Points): Remove `<Points links>` prop. Use `<Rule>` with x/y accessor instead

packages/layerchart/src/lib/components/Axis.svelte

@@ -439,8 +439,8 @@
   {#if rule !== false}
     {@const ruleProps = extractLayerProps(rule, 'axis-rule')}
     <Rule
-      x={placement === 'left' || placement === 'right' ? placement : placement === 'angle'}
-      y={placement === 'top' || placement === 'bottom' ? placement : placement === 'radius'}
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
       {motion}
       {...ruleProps}
       class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}

packages/layerchart/src/lib/components/Bars.svelte

@@ -32,8 +32,8 @@
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
   import Group from './Group.svelte';
 
-  import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
+  import { chartDataArray } from '../utils/common.js';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
 
   let {

packages/layerchart/src/lib/components/Points.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { CommonStyleProps, Without } from '$lib/utils/types.js';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
   type Offset = number | ((value: number, context: any) => number) | undefined;
@@ -37,13 +37,6 @@
      */
     offsetY?: Offset;
 
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
-
     children?: Snippet<[{ points: Point[] }]>;
   } & CommonStyleProps;
 
@@ -71,7 +64,6 @@
     r = 5,
     offsetX,
     offsetY,
-    links = false,
     fill,
     fillOpacity,
     stroke,
@@ -136,66 +128,11 @@
       return [];
     }) as Point[]
   );
-
-  const _links = $derived(
-    pointsData.flatMap((d: any) => {
-      const xValue = xAccessor(d);
-      const yValue = yAccessor(d);
-
-      if (Array.isArray(xValue)) {
-        /*
-				x={["prop1" ,"prop2"]}
-				y="prop3"
-			*/
-        const [xMin, xMax] = extent(ctx.xGet(d)) as unknown as [number, number];
-        const y = ctx.yGet(d) + getOffset(ctx.yGet(d), offsetY, ctx.yScale);
-        return {
-          source: {
-            x: xMin + getOffset(xMin, offsetX, ctx.xScale) + (ctx.config.r ? ctx.rGet(d) : r),
-            y,
-          },
-          target: {
-            x: xMax + getOffset(xMax, offsetX, ctx.xScale) - (ctx.config.r ? ctx.rGet(d) : r),
-            y: y,
-          },
-          data: d,
-        };
-      } else if (Array.isArray(yValue)) {
-        /*
-				x="prop1"
-				y={["prop2" ,"prop3"]}
-			*/
-        const x = ctx.xGet(d) + getOffset(ctx.xGet(d), offsetX, ctx.xScale);
-        const [yMin, yMax] = extent(ctx.yGet(d)) as unknown as [number, number];
-        return {
-          source: {
-            x: x,
-            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
-          },
-          target: {
-            x: x,
-            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
-          },
-          data: d,
-        };
-      }
-    })
-  );
 </script>
 
 {#if children}
   {@render children({ points })}
 {:else}
-  {#if links}
-    {#each _links as link}
-      <Link
-        data={link}
-        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
-        {...extractLayerProps(links, 'points-link')}
-      />
-    {/each}
-  {/if}
-
   {#each points as point}
     <Circle
       cx={point.x}