layerchart 0.44.0 → 0.51.0

package/dist/components/Arc.svelte

@@ -64,7 +64,7 @@ export let track = false;
 const { yRange } = chartContext();
 $: scale = scaleLinear().domain(domain).range(range);
 function getOuterRadius(outerRadius, chartRadius) {
-    if (outerRadius == null) {
+    if (!outerRadius) {
         return chartRadius;
     }
     else if (outerRadius > 1) {
@@ -149,6 +149,14 @@ export let offset = 0;
 $: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
 $: xOffset = Math.sin(angle) * offset;
 $: yOffset = -Math.cos(angle) * offset;
+/**
+ * Tooltip context to setup pointer events to show tooltip for related data.  Must set `data` prop as well
+ */
+export let tooltip = undefined;
+/**
+ * Data to set when showing tooltip
+ */
+export let data = undefined;
 </script>
 
 {#if track}
@@ -165,6 +173,15 @@ $: yOffset = -Math.cos(angle) * offset;
   d={arc()}
   transform="translate({xOffset}, {yOffset})"
   {...$$restProps}
+  on:pointerenter={(e) => tooltip?.show(e, data)}
+  on:pointermove={(e) => tooltip?.show(e, data)}
+  on:pointerleave={(e) => tooltip?.hide()}
+  on:touchmove={(e) => {
+    if (tooltip) {
+      // Prevent touch to not interfer with pointer when using tooltip
+      e.preventDefault();
+    }
+  }}
   on:click
   on:pointerenter
   on:pointermove

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -18,6 +19,8 @@ declare const __propDef: {
         padAngle?: number | undefined;
         track?: (boolean | SVGAttributes<SVGPathElement>) | undefined;
         offset?: number | undefined;
+        tooltip?: TooltipContextValue | undefined;
+        data?: any;
     };
     events: {
         click: MouseEvent;

package/dist/components/Area.svelte

@@ -1,20 +1,18 @@
 <script>import {} from 'svelte';
 import { area as d3Area, areaRadial } from 'd3-shape';
-import { max } from 'd3-array';
+import { max, min } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { motionStore } from '../stores/motionStore.js';
 import { chartContext } from './ChartContext.svelte';
 import Spline from './Spline.svelte';
 import { accessor } from '../utils/common.js';
 import { isScaleBand } from '../utils/scales.js';
-const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
+const { data: contextData, xScale, yScale, x: contextX, y, yDomain, yRange, config, radial, } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
 export let pathData = undefined;
-/** Use radial instead of cartesian area generator, mapping `x` to `angle` and `y0`/`y1 to `innerRadius`/`outerRadius.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
 /** Override x accessor */
 export let x = undefined;
 /** Override y0 accessor.  Defaults to max($yRange) */
@@ -28,9 +26,9 @@ export let curve = undefined;
 export let defined = undefined;
 /** Enable showing line */
 export let line = false;
-const _x = accessor(x);
-const _y0 = accessor(y0);
-const _y1 = accessor(y1);
+const xAccessor = x ? accessor(x) : $contextX;
+const y0Accessor = y0 ? accessor(y0) : (d) => min($yDomain);
+const y1Accessor = y1 ? accessor(y1) : $y;
 $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
 $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 $: tweenedOptions = tweened
@@ -38,26 +36,59 @@ $: tweenedOptions = tweened
     : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = radial
+    const path = $radial
         ? areaRadial()
-            .angle((d) => (x ? $xScale(_x(d)) : $xGet(d)))
-            .innerRadius((d) => (y0 ? $yScale(_y0(d)) : max($yRange)))
-            .outerRadius((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)))
+            .angle((d) => $xScale(xAccessor(d)))
+            .innerRadius((d) => $yScale(y0Accessor(d)))
+            .outerRadius((d) => $yScale(y1Accessor(d)))
         : d3Area()
-            .x((d) => (x ? $xScale(_x(d)) : $xGet(d)) + xOffset)
-            .y0((d) => (y0 ? $yScale(_y0(d)) : max($yRange)) + yOffset)
-            .y1((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)) + yOffset);
+            .x((d) => $xScale(xAccessor(d)) + xOffset)
+            .y0((d) => {
+            let value = max($yRange);
+            if (y0) {
+                value = $yScale(y0Accessor(d));
+            }
+            else if (Array.isArray($config.y) && $config.y[0] === 0) {
+                // Use first value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+                // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+                value = $yScale($y(d)[0]);
+            }
+            return value + yOffset;
+        })
+            .y1((d) => {
+            let value = max($yRange);
+            if (y1) {
+                value = $yScale(y1Accessor(d));
+            }
+            else if (Array.isArray($config.y) && $config.y[1] === 1) {
+                // Use second value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+                // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+                value = $yScale($y(d)[1]);
+            }
+            else {
+                // Expect single value defined for `y` (ex. `<Chart y="value">`)
+                value = $yScale($y(d));
+            }
+            return value + yOffset;
+        });
+    path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
     if (curve)
         path.curve(curve);
-    if (defined)
-        path.defined(defined);
     const d = pathData ?? path(data ?? $contextData);
     tweened_d.set(d ?? '');
 }
 </script>
 
 {#if line}
-  <Spline {data} y={y1} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
+  <Spline
+    {data}
+    {x}
+    y={y1}
+    {curve}
+    {defined}
+    {tweened}
+    {...typeof line === 'object' ? line : null}
+  />
 {/if}
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
-        radial?: boolean | undefined;
         x?: Accessor;
         y0?: Accessor;
         y1?: Accessor;

package/dist/components/Axis.svelte

@@ -3,7 +3,8 @@ import { fade } from 'svelte/transition';
 import { cubicIn } from 'svelte/easing';
 import { extent } from 'd3-array';
 import { pointRadial } from 'd3-shape';
-import { format as formatValue, cls } from 'svelte-ux';
+import { format as formatValue } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';

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

@@ -3,7 +3,8 @@ import { type ComponentProps } from 'svelte';
 import { fade } from 'svelte/transition';
 import type { SVGAttributes } from 'svelte/elements';
 import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-import { type FormatType, type TransitionParams } from 'svelte-ux';
+import { type FormatType } from '@layerstack/utils';
+import type { TransitionParams } from 'svelte-ux';
 import Text from './Text.svelte';
 import { type AnyScale } from '../utils/scales.js';
 declare const __propDef: {

package/dist/components/Bar.svelte

@@ -13,6 +13,14 @@ export let x = $xContext;
  * Override `y` from context.  Useful for multiple Bar instances
  */
 export let y = $yContext;
+/**
+ * Override `x1` from context.  Useful for multiple Bar instances
+ */
+export let x1 = undefined;
+/**
+ * Override `y1` from context.  Useful for multiple Bar instances
+ */
+export let y1 = undefined;
 export let fill = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
@@ -20,9 +28,6 @@ export let radius = 0;
 /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
 export let rounded = 'all';
 export let inset = 0;
-export let groupBy = undefined;
-export let groupPaddingInner = 0.2;
-export let groupPaddingOuter = 0;
 export let spring = undefined;
 export let tweened = undefined;
 $: if (stroke === null || stroke === undefined)
@@ -30,12 +35,9 @@ $: if (stroke === null || stroke === undefined)
 $: getDimensions = createDimensionGetter(chartContext(), {
     x,
     y,
-    groupBy,
+    x1,
+    y1,
     inset,
-    groupPadding: {
-        inner: groupPaddingInner,
-        outer: groupPaddingOuter,
-    },
 });
 $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
 $: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
@@ -69,6 +71,10 @@ $: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
     {...dimensions}
     {...$$restProps}
     on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {:else}
   <Spline
@@ -80,5 +86,9 @@ $: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
     stroke-width={strokeWidth}
     {...$$restProps}
     on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {/if}

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

@@ -8,20 +8,23 @@ 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"];
     };
     events: {
         click: MouseEvent;
+        pointerenter: PointerEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
+        touchmove: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Bars.svelte

@@ -3,7 +3,11 @@ import { chartContext } from './ChartContext.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { chartDataArray } from '../utils/common.js';
-const { data, rGet, config } = chartContext();
+const { data: contextData, cGet, config } = chartContext();
+/**
+ * Override `data` from context.  Useful for multiple Bar instances
+ */
+export let data = undefined;
 /**
  * Override `x` from context.  Useful for multiple Bar instances
  */
@@ -12,6 +16,14 @@ export let x = undefined;
  * Override `y` from context.  Useful for multiple Bar instances
  */
 export let y = undefined;
+/**
+ * Override `x1` from context.  Useful for multiple Bar instances
+ */
+export let x1 = undefined;
+/**
+ * Override `y1` from context.  Useful for multiple Bar instances
+ */
+export let y1 = undefined;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
@@ -19,29 +31,24 @@ export let radius = 0;
 export let inset = 0;
 export let spring = undefined;
 export let tweened = undefined;
-// See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
-export let groupBy = undefined;
-export let groupPaddingInner = 0.2;
-export let groupPaddingOuter = 0;
 </script>
 
 <g class="Bars">
   <slot>
-    {#each chartDataArray($data) as item}
+    {#each chartDataArray(data ?? $contextData) as item}
       <Bar
         bar={item}
         {x}
         {y}
-        fill={$config.r ? $rGet(item) : null}
+        {x1}
+        {y1}
+        fill={$config.c ? $cGet(item) : null}
         {stroke}
         {strokeWidth}
         {radius}
+        {inset}
         {spring}
         {tweened}
-        {groupBy}
-        {inset}
-        {groupPaddingInner}
-        {groupPaddingOuter}
         {...$$restProps}
       />
     {/each}

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

@@ -5,17 +5,17 @@ import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        data?: any;
         x?: Accessor;
         y?: Accessor;
+        x1?: Accessor;
+        y1?: Accessor;
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
         inset?: number | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];
-        groupBy?: string | undefined;
-        groupPaddingInner?: number | undefined;
-        groupPaddingOuter?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Blur.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux';
+<script>import { uniqueId } from '@layerstack/utils';
 export let id = uniqueId('blur-');
 export let stdDeviation = 5;
 </script>

package/dist/components/Brush.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { extent } from 'd3-array';
-import { clamp, cls } from 'svelte-ux';
+import { clamp } from '@layerstack/utils';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Frame from './Frame.svelte';
 import { localPoint } from '../utils/event.js';

package/dist/components/Calendar.svelte

@@ -19,7 +19,7 @@ export let monthPath = false;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { width, height, x, rGet, data, config } = chartContext();
+const { width, height, x, cGet, data, config } = chartContext();
 $: yearDays = timeDays(start, end);
 $: yearMonths = timeMonths(start, end);
 $: yearWeeks = timeWeek.count(start, end);
@@ -37,7 +37,7 @@ $: cells = yearDays.map((date) => {
     return {
         x: timeWeek.count(timeYear(date), date) * cellWidth,
         y: date.getDay() * cellHeight,
-        color: $config.r ? $rGet(cellData) : 'transparent',
+        color: $config.c ? $cGet(cellData) : 'transparent',
         data: cellData,
     };
 });

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
-import type { TooltipContextValue } from './TooltipContext.svelte';
+import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 import MonthPath from './MonthPath.svelte';
 declare const __propDef: {
     props: {

package/dist/components/Chart.svelte

@@ -1,34 +1,31 @@
-<script context="module">// import { LayerCake, Svg, Html } from 'layercake';
-// export { Svg, Html };
-// TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
-// See: https://github.com/carbon-design-system/sveld/issues/104
-import { LayerCake, 
-// Canvas as _Canvas,
-// Html as _Html,
-// Svg as _Svg,
-WebGL as _WebGL, } from 'layercake';
-import _Canvas from './layout/Canvas.svelte';
-import _Html from './layout/Html.svelte';
-import _Svg from './layout/Svg.svelte';
-export const Canvas = _Canvas;
-export const Html = _Html;
-export const Svg = _Svg;
-export const WebGL = _WebGL;
-</script>
-
-<script generics="TData">import { accessor } from '../utils/common.js';
-import { onMount } from 'svelte';
+<script generics="TData">import { onMount } from 'svelte';
+import { LayerCake } from 'layercake';
 import { max, min } from 'd3-array';
-import { isScaleBand } from '../utils/scales.js';
 import ChartContext from './ChartContext.svelte';
 import GeoContext from './GeoContext.svelte';
-import TooltipContext from './TooltipContext.svelte';
+import TooltipContext from './tooltip/TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
+import { accessor } from '../utils/common.js';
+import { isScaleBand } from '../utils/scales.js';
 import { geoFitObjectTransform } from '../utils/geo.js';
 export let data = [];
 export let x = undefined;
+export let xRange = undefined;
 export let y = undefined;
 export let yScale = undefined;
+export let yRange = undefined;
+export let x1 = undefined;
+export let x1Scale = undefined;
+export let x1Domain = undefined;
+export let x1Range = undefined;
+export let y1 = undefined;
+export let y1Scale = undefined;
+export let y1Domain = undefined;
+export let y1Range = undefined;
+export let c = undefined;
+export let cScale = undefined;
+export let cDomain = undefined;
+export let cRange = undefined;
 /**
  * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
  */
@@ -53,6 +50,8 @@ $: if (yBaseline != null && Array.isArray(data)) {
  * see: https://github.com/mhkeller/layercake/issues/83
  */
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
+/** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
 /** Props passed to GeoContext */
 export let geo = undefined;
 /** Props passed to TooltipContext */
@@ -69,16 +68,31 @@ let isMounted = false;
 onMount(() => {
     isMounted = true;
 });
+// TODO: Hacks until LayerCake has better typings (`Accessor<TData>`)
+$: _x = x;
+$: _y = y;
+$: _yRange =
+    yRange ??
+        (radial
+            ? ({ height }) => [0, height / 2]
+            : undefined);
 </script>
 
+<!-- Remove domain sorting by default: https://github.com/mhkeller/layercake/issues/147  -->
 <LayerCake
   {data}
-  {x}
+  x={_x}
   {xDomain}
-  {y}
+  xRange={xRange ?? (radial ? [0, 2 * Math.PI] : undefined)}
+  y={_y}
   {yScale}
   {yDomain}
+  yRange={_yRange}
   {yReverse}
+  xDomainSort={false}
+  yDomainSort={false}
+  zDomainSort={false}
+  rDomainSort={false}
   {...$$restProps}
   let:aspectRatio
   let:containerHeight
@@ -86,12 +100,16 @@ onMount(() => {
   let:height
   let:width
   let:element
+  let:x
   let:xScale
   let:xGet
+  let:y
   let:yScale
   let:yGet
+  let:z
   let:zScale
   let:zGet
+  let:r
   let:rScale
   let:rGet
   let:padding
@@ -102,7 +120,35 @@ onMount(() => {
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 
-  <ChartContext {data} let:data let:flatData on:resize>
+  <ChartContext
+    {data}
+    {radial}
+    {x1}
+    {x1Scale}
+    {x1Domain}
+    {x1Range}
+    {y1}
+    {y1Scale}
+    {y1Domain}
+    {y1Range}
+    {c}
+    {cScale}
+    {cDomain}
+    {cRange}
+    let:data
+    let:flatData
+    let:config
+    let:x1
+    let:x1Scale
+    let:x1Get
+    let:y1
+    let:y1Scale
+    let:y1Get
+    let:c
+    let:cScale
+    let:cGet
+    on:resize
+  >
     {#key isMounted}
       <TransformContext
         bind:this={transformContext}
@@ -149,17 +195,31 @@ onMount(() => {
               {projection}
               transform={_transform}
               {tooltip}
+              {x}
               {xScale}
               {xGet}
+              {y}
               {yScale}
               {yGet}
+              {z}
               {zScale}
               {zGet}
+              {r}
               {rScale}
               {rGet}
+              {x1}
+              {x1Scale}
+              {x1Get}
+              {y1}
+              {y1Scale}
+              {y1Get}
+              {c}
+              {cScale}
+              {cGet}
               {padding}
               {data}
               {flatData}
+              {config}
             />
           </TooltipContext>
         </GeoContext>