layerchart 0.44.0 → 0.51.0

package/dist/components/Highlight.svelte

@@ -1,15 +1,17 @@
 <script>import {} from 'svelte';
 import { max, min } from 'd3-array';
-import { cls, notNull } from 'svelte-ux';
+import { pointRadial } from 'd3-shape';
+import { notNull } from '@layerstack/utils/typeGuards';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
-import { tooltipContext } from './TooltipContext.svelte';
+import { tooltipContext } from './tooltip/TooltipContext.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { accessor } from '../utils/common.js';
-const { data: contextData, flatData, x: xContext, xDomain, xScale, xRange, y: yContext, yDomain, yScale, yRange, rGet, config, } = chartContext();
+const { data: contextData, flatData, x: xContext, xDomain, xScale, xRange, y: yContext, yDomain, yScale, yRange, cGet, config, radial, } = chartContext();
 const tooltip = tooltipContext();
 /** Highlight specific data (annotate), espect uses tooltip data */
 export let data = undefined;
@@ -32,7 +34,6 @@ export let area = false;
 export let bar = false;
 /** Set to false to disable spring transitions */
 export let motion = true;
-// TODO: Fix circle points being backwards for stack (see AreaStack)
 const _x = accessor(x);
 const _y = accessor(y);
 let _points = [];
@@ -47,10 +48,10 @@ $: highlightData = data ?? $tooltip.data;
 $: if (highlightData) {
     const xValue = _x(highlightData);
     const xCoord = Array.isArray(xValue) ? xValue.map((v) => $xScale(v)) : $xScale(xValue);
-    const xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+    const xOffset = isScaleBand($xScale) && !$radial ? $xScale.bandwidth() / 2 : 0;
     const yValue = _y(highlightData);
     const yCoord = Array.isArray(yValue) ? yValue.map((v) => $yScale(v)) : $yScale(yValue);
-    const yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+    const yOffset = isScaleBand($yScale) && !$radial ? $yScale.bandwidth() / 2 : 0;
     // Reset lines
     _lines = [];
     const defaultAxis = isScaleBand($yScale) ? 'y' : 'x';
@@ -65,18 +66,18 @@ $: if (highlightData) {
                 ..._lines,
                 ...xCoord.filter(notNull).map((xItem, i) => ({
                     x1: xItem + xOffset,
-                    y1: 0,
+                    y1: min($yRange),
                     x2: xItem + xOffset,
                     y2: max($yRange),
                 })),
             ];
         }
-        else {
+        else if (xCoord) {
             _lines = [
                 ..._lines,
                 {
                     x1: xCoord + xOffset,
-                    y1: 0,
+                    y1: min($yRange),
                     x2: xCoord + xOffset,
                     y2: max($yRange),
                 },
@@ -112,18 +113,18 @@ $: if (highlightData) {
             _lines = [
                 ..._lines,
                 ...yCoord.filter(notNull).map((yItem, i) => ({
-                    x1: 0,
+                    x1: min($xRange),
                     y1: yItem + yOffset,
                     x2: max($xRange),
                     y2: yItem + yOffset,
                 })),
             ];
         }
-        else {
+        else if (yCoord) {
             _lines = [
                 ..._lines,
                 {
-                    x1: 0,
+                    x1: min($xRange),
                     y1: yCoord + yOffset,
                     x2: max($xRange),
                     y2: yCoord + yOffset,
@@ -172,11 +173,10 @@ $: if (highlightData) {
                 })
                     .filter((d) => d.point); // remove if no point found (ex. Histogram);
                 _points = seriesPointsData.map((seriesPoint, i) => {
-                    console.log({ seriesPoint });
                     return {
                         x: $xScale(seriesPoint.point[1]) + xOffset,
                         y: yCoord + yOffset,
-                        fill: $config.r ? $rGet(seriesPoint.series) : null,
+                        fill: $config.c ? $cGet(seriesPoint.series) : null,
                     };
                 });
             }
@@ -189,7 +189,7 @@ $: if (highlightData) {
                     x: xItem + xOffset,
                     y: yCoord + yOffset,
                     // TODO: is there a better way to expose the series key/value?
-                    fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+                    fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
                 };
             });
         }
@@ -214,7 +214,7 @@ $: if (highlightData) {
                 _points = seriesPointsData.map((seriesPoint, i) => ({
                     x: xCoord + xOffset,
                     y: $yScale(seriesPoint.point[1]) + yOffset,
-                    fill: $config.r ? $rGet(seriesPoint.series) : null,
+                    fill: $config.c ? $cGet(seriesPoint.series) : null,
                 }));
             }
         }
@@ -226,20 +226,46 @@ $: if (highlightData) {
                     x: xCoord + xOffset,
                     y: yItem + yOffset,
                     // TODO: is there a better way to expose the series key/value?
-                    fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+                    fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
                 };
             });
         }
     }
-    else {
+    else if (xCoord != null && yCoord != null) {
         _points = [
             {
                 x: xCoord + xOffset,
                 y: yCoord + yOffset,
-                fill: $config.r ? $rGet(highlightData) : null,
+                fill: $config.c ? $cGet(highlightData) : null,
             },
         ];
     }
+    else {
+        _points = [];
+    }
+    if ($radial) {
+        // Translate x/y to angle/radius
+        _points = _points.map((p) => {
+            const [x, y] = pointRadial(p.x, p.y);
+            return {
+                ...p,
+                x,
+                y,
+            };
+        });
+        _lines = _lines.map((l) => {
+            const [x1, y1] = pointRadial(l.x1, l.y1);
+            const [x2, y2] = pointRadial(l.x2, l.y2);
+            return {
+                ...l,
+                x1,
+                y1,
+                x2,
+                y2,
+            };
+        });
+        // TODO: How to handle _areas
+    }
 }
 </script>
 

package/dist/components/Highlight.svelte.d.ts

@@ -41,15 +41,14 @@ declare const __propDef: {
                 bar: Object;
                 x?: Accessor;
                 y?: Accessor;
+                x1?: Accessor;
+                y1?: Accessor;
                 fill?: string | undefined;
                 stroke?: string | undefined;
                 strokeWidth?: number | undefined;
                 radius?: number | undefined;
                 rounded?: ("all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
                 inset?: number | undefined;
-                groupBy?: string | undefined;
-                groupPaddingInner?: number | undefined;
-                groupPaddingOuter?: number | undefined;
                 spring?: ComponentProps<Rect>["spring"];
                 tweened?: ComponentProps<Rect>["tweened"];
             }>;

package/dist/components/HitCanvas.svelte

@@ -1,7 +1,7 @@
 <script>import { createEventDispatcher, onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Canvas from './layout/Canvas.svelte';
 import { transformContext } from './TransformContext.svelte';

package/dist/components/Hull.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { cls } from 'svelte-ux';
 import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
 // @ts-expect-error
 import { geoVoronoi } from 'd3-geo-voronoi';
 import { curveLinearClosed } from 'd3-shape';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import GeoPath from './GeoPath.svelte';
 import { geoContext } from './GeoContext.svelte';

package/dist/components/Labels.svelte

@@ -1,62 +1,25 @@
-<script>/*
- * TODO
- *   - [ ] Support step curves (center like scaleBand())
- *   - [ ] Support multiple values (threshold, stacks, etc)
- */
-import {} from 'svelte';
-import { format as formatValue, cls } from 'svelte-ux';
-import { greatestAbs } from 'svelte-ux/utils/array';
-const { flatData, yScale, x, y, custom } = chartContext();
+<script>import { SvelteComponent } from 'svelte';
+import { format as formatValue } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
-import { createDimensionGetter } from '../utils/rect.js';
 import { chartContext } from './ChartContext.svelte';
-// TODO: Support 'auto' to switch `inside` to `outside` if not enough room
+import Points from './Points.svelte';
 export let placement = 'outside';
-export let offset = 4;
+export let offset = placement === 'center' ? 0 : 4;
 export let format = undefined;
-// export let overlap = false;
-// @ts-expect-error
-$: yBaseline = $custom?.yBaseline ?? 0;
-export let groupBy = undefined;
-export let groupPaddingInner = 0.2;
-export let groupPaddingOuter = 0;
-$: getDimensions = createDimensionGetter(chartContext(), {
-    // x,
-    // y,
-    groupBy,
-    // padding,
-    groupPadding: {
-        inner: groupPaddingInner,
-        outer: groupPaddingOuter,
-    },
-});
-$: getValue = (item) => (isScaleBand($yScale) ? $x(item) : $y(item));
-$: getLabelValue = (item) => {
-    const value = getValue(item);
-    return (Array.isArray(value) ? greatestAbs(value) : value) + yBaseline;
-};
-$: getFormattedValue = (item) => {
-    const labelValue = getLabelValue(item);
-    let formattedValue = labelValue;
-    if (labelValue != null) {
-        if (format) {
-            // Apply more versatile formatting first
-            formattedValue = formatValue(labelValue, format ?? $yScale.tickFormat?.());
-        }
-    }
-    return formattedValue ?? '';
-};
-$: getTextProps = (item) => {
-    const labelValue = getLabelValue(item);
-    const dimensions = $getDimensions(item);
+const { yScale } = chartContext();
+$: getTextProps = (point) => {
+    const value = isScaleBand($yScale) ? point.xValue : point.yValue;
+    const formattedValue = formatValue(value, format ?? $yScale.tickFormat?.());
     if (isScaleBand($yScale)) {
         // Position label left/right on horizontal bars
-        if (labelValue < 0) {
+        if (value < 0) {
             // left
             return {
-                x: dimensions?.x + (placement === 'outside' ? -offset : offset),
-                y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+                value: formattedValue,
+                x: point.x + (placement === 'outside' ? -offset : offset),
+                y: point.y,
                 textAnchor: placement === 'outside' ? 'end' : 'start',
                 verticalAnchor: 'middle',
                 capHeight: '.6rem',
@@ -65,8 +28,9 @@ $: getTextProps = (item) => {
         else {
             // right
             return {
-                x: dimensions?.x + dimensions?.width + (placement === 'outside' ? offset : -offset),
-                y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+                value: formattedValue,
+                x: point.x + (placement === 'outside' ? offset : -offset),
+                y: point.y,
                 textAnchor: placement === 'outside' ? 'start' : 'end',
                 verticalAnchor: 'middle',
                 capHeight: '.6rem',
@@ -75,24 +39,26 @@ $: getTextProps = (item) => {
     }
     else {
         // Position label top/bottom on vertical bars
-        if (labelValue < 0) {
+        if (value < 0) {
             // bottom
             return {
-                x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-                y: dimensions?.y + dimensions?.height + (placement === 'outside' ? offset : -offset),
+                value: formattedValue,
+                x: point.x,
+                y: point.y + (placement === 'outside' ? offset : -offset),
                 capHeight: '.6rem',
                 textAnchor: 'middle',
-                verticalAnchor: placement === 'outside' ? 'start' : 'end',
+                verticalAnchor: placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
             };
         }
         else {
             // top
             return {
-                x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-                y: dimensions?.y + (placement === 'outside' ? -offset : offset),
+                value: formattedValue,
+                x: point.x,
+                y: point.y + (placement === 'outside' ? -offset : offset),
                 capHeight: '.6rem',
                 textAnchor: 'middle',
-                verticalAnchor: placement === 'outside' ? 'end' : 'start',
+                verticalAnchor: placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
             };
         }
     }
@@ -100,18 +66,18 @@ $: getTextProps = (item) => {
 </script>
 
 <g class="Labels">
-  {#each $flatData as item, index}
-    <!-- TODO: Add labels for each item when array/stack?  Use `getValue(item)` instead and iterate -->
-    <Text
-      value={getFormattedValue(item)}
-      class={cls(
-        'text-xs',
-        placement === 'inside'
-          ? 'fill-surface-300 stroke-surface-content'
-          : 'fill-surface-content stroke-surface-100'
-      )}
-      {...getTextProps(item)}
-      {...$$restProps}
-    />
-  {/each}
+  <Points let:points>
+    {#each points as point}
+      <Text
+        class={cls(
+          'text-xs',
+          placement === 'inside'
+            ? 'fill-surface-300 stroke-surface-content'
+            : 'fill-surface-content stroke-surface-100'
+        )}
+        {...getTextProps(point)}
+        {...$$restProps}
+      />
+    {/each}
+  </Points>
 </g>

package/dist/components/Labels.svelte.d.ts

@@ -1,14 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
+import { type FormatType } from '@layerstack/utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: ("inside" | "outside") | undefined;
+        placement?: ("inside" | "outside" | "center") | undefined;
         offset?: number | undefined;
         format?: FormatType | undefined;
-        groupBy?: string | undefined;
-        groupPaddingInner?: number | undefined;
-        groupPaddingOuter?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Legend.svelte

@@ -1,11 +1,11 @@
 <script>import { scaleBand, scaleLinear } from 'd3-scale';
 import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
 import { quantile, range } from 'd3-array';
-import { format } from 'svelte-ux';
+import { format } from '@layerstack/utils';
 import { chartContext } from './ChartContext.svelte';
 import ColorRamp from './ColorRamp.svelte';
-import { cls } from 'svelte-ux';
-const { rScale } = chartContext() ?? {};
+import { cls } from '@layerstack/tailwind';
+const { cScale } = chartContext() ?? {};
 export let scale = undefined;
 export let title = '';
 export let width = 320;
@@ -17,9 +17,9 @@ export let tickFontSize = 10;
 export let tickLength = 4;
 export let placement = undefined;
 export let classes = {};
-$: if (scale == null && rScale) {
+$: if (scale == null && cScale) {
     // Read scale from chart context
-    scale = $rScale;
+    scale = $cScale;
 }
 let xScale;
 let interpolator;

package/dist/components/Legend.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from 'svelte-ux';
+import { type FormatType } from '@layerstack/utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickLength?: number | undefined;
-        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string;
             title?: string;

package/dist/components/Line.svelte

@@ -1,5 +1,5 @@
 <script>import { tick } from 'svelte';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { motionStore } from '../stores/motionStore.js';
 export let x1;
 export let initialX1 = x1;

package/dist/components/LinearGradient.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux';
+<script>import { uniqueId } from '@layerstack/utils';
 /** Unique id for linearGradient */
 export let id = uniqueId('linearGradient-');
 /** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */

package/dist/components/MotionPath.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from 'svelte';
-import { uniqueId } from 'svelte-ux';
+import { uniqueId } from '@layerstack/utils';
 /** Id of path to move object along */
 export let pathId = uniqueId('motionPathId-');
 /** Id of object to move along path */

package/dist/components/Pie.svelte

@@ -2,7 +2,6 @@
 import { min, max } from 'd3-array';
 import Arc from './Arc.svelte';
 import { chartContext } from './ChartContext.svelte';
-import Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math.js';
 import { motionStore } from '../stores/motionStore.js';
 /*
@@ -39,8 +38,6 @@ export let innerRadius = undefined;
 export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
-// export let padRadius = 0;
-export let placement = 'center';
 export let spring = undefined;
 export let tweened = undefined;
 /**
@@ -48,10 +45,10 @@ export let tweened = undefined;
  */
 export let offset = 0;
 /**
- * Tooltip context to setup mouse events to show tooltip for related data
+ * Tooltip context to setup pointer events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { data: contextData, x, y, xRange, rGet, config, width, height } = chartContext();
+const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
 // @ts-expect-error
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
@@ -63,41 +60,21 @@ $: pie = d3pie()
     .padAngle(padAngle)
     .value($x);
 $: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
-$: radius = Math.min($width / 2, $height / 2);
-$: coords = {
-    x: placement === 'left'
-        ? radius
-        : placement === 'center'
-            ? $width / 2
-            : placement === 'right'
-                ? $width - radius
-                : 0,
-    y: placement === 'none' ? 0 : $height / 2,
-};
 </script>
 
-<Group x={coords.x} y={coords.y}>
-  <slot {arcs}>
-    {#each arcs as arc}
-      <Arc
-        startAngle={arc.startAngle}
-        endAngle={arc.endAngle}
-        padAngle={arc.padAngle}
-        {innerRadius}
-        {outerRadius}
-        {cornerRadius}
-        {offset}
-        fill={$config.r ? $rGet(arc.data) : null}
-        on:pointerenter={(e) => tooltip?.show(e, arc.data)}
-        on:pointermove={(e) => tooltip?.show(e, arc.data)}
-        on:pointerleave={(e) => tooltip?.hide()}
-        on:touchmove={(e) => {
-          if (tooltip) {
-            // Prevent touch to not interfer with pointer when using tooltip
-            e.preventDefault();
-          }
-        }}
-      />
-    {/each}
-  </slot>
-</Group>
+<slot {arcs}>
+  {#each arcs as arc}
+    <Arc
+      startAngle={arc.startAngle}
+      endAngle={arc.endAngle}
+      padAngle={arc.padAngle}
+      {innerRadius}
+      {outerRadius}
+      {cornerRadius}
+      {offset}
+      fill={$config.c ? $cScale?.($c(arc.data)) : null}
+      data={arc.data}
+      {tooltip}
+    />
+  {/each}
+</slot>

package/dist/components/Pie.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-import type { TooltipContextValue } from './TooltipContext.svelte';
+import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 declare const __propDef: {
     props: {
         data?: any[] | undefined;
@@ -25,14 +25,13 @@ declare const __propDef: {
            */ outerRadius?: number | undefined;
         cornerRadius?: number;
         padAngle?: number;
-        placement?: "left" | "center" | "right" | "none";
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**
            * Offset all arcs from center
            */ offset?: number;
         /**
-           * Tooltip context to setup mouse events to show tooltip for related data
+           * Tooltip context to setup pointer events to show tooltip for related data
            */ tooltip?: TooltipContextValue | undefined;
     };
     events: {