layerchart 0.53.0 → 0.54.1

package/dist/components/charts/LineChart.svelte

@@ -1,35 +1,93 @@
-<script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
-import { format } from '@layerstack/utils';
-import Axis from '../Axis.svelte';
-import Chart from '../Chart.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-import Legend from '../Legend.svelte';
-import Points from '../Points.svelte';
-import Rule from '../Rule.svelte';
-import Spline from '../Spline.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-export let x = undefined;
-export let y = undefined;
-/** 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;
-export let series = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
-export let axis = true;
-export let rule = true;
-export let labels = false;
-export let legend = false;
-export let points = false;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Grid from '../Grid.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Legend from '../Legend.svelte';
+  import Points from '../Points.svelte';
+  import Rule from '../Rule.svelte';
+  import Spline from '../Spline.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    axis?: typeof axis;
+    grid?: typeof grid;
+    labels?: typeof labels;
+    legend?: typeof legend;
+    points?: typeof points;
+    props?: typeof props;
+    rule?: typeof rule;
+    series?: typeof series;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  /** 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;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Spline>>;
+  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
+
+  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let rule: ComponentProps<Rule> | boolean = true;
+  export let grid: ComponentProps<Grid> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let legend: ComponentProps<Legend> | boolean = false;
+  export let points: ComponentProps<Points> | boolean = false;
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    grid?: Partial<ComponentProps<Grid>>;
+    rule?: Partial<ComponentProps<Rule>>;
+    spline?: Partial<ComponentProps<Spline>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+    points?: Partial<ComponentProps<Points>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-// Default xScale based on first data's `x` value
-$: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+
+  function getSplineProps(s: (typeof series)[number], i: number) {
+    const splineProps: ComponentProps<Spline> = {
+      data: s.data,
+      y: s.value ?? (s.data ? undefined : s.key),
+      class: 'stroke-2',
+      stroke: s.color,
+      ...props.spline,
+      ...s.props,
+    };
+
+    return splineProps;
+  }
 </script>
 
 <Chart
@@ -52,20 +110,40 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
   let:xScale
   let:y
   let:yScale
+  let:c
+  let:cScale
   let:width
   let:height
   let:padding
   let:tooltip
 >
-  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const slotProps = {
+    x,
+    xScale,
+    y,
+    yScale,
+    c,
+    cScale,
+    width,
+    height,
+    padding,
+    tooltip,
+    series,
+    getSplineProps,
+  }}
   <slot {...slotProps}>
     <Svg center={radial}>
+      <slot name="grid" {...slotProps}>
+        {#if grid}
+          <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
+        {/if}
+      </slot>
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
             <Axis
               placement={radial ? 'radius' : 'left'}
-              grid
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -75,7 +153,6 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
           {#if axis !== 'y'}
             <Axis
               placement={radial ? 'angle' : 'bottom'}
-              grid={radial}
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.xAxis}
@@ -91,15 +168,8 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
       <slot name="below-marks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each series as s}
-          <Spline
-            data={s.data}
-            y={s.value ?? (s.data ? undefined : s.key)}
-            class="stroke-2"
-            stroke={s.color}
-            {...props.spline}
-            {...s.props}
-          />
+        {#each series as s, i}
+          <Spline {...getSplineProps(s, i)} />
         {/each}
       </slot>
 
@@ -137,10 +207,12 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend
-          scale={scaleOrdinal(
-            series.map((s) => s.label ?? s.key),
-            series.map((s) => s.color)
-          )}
+          scale={isDefaultSeries
+            ? undefined
+            : scaleOrdinal(
+                series.map((s) => s.label ?? s.key),
+                series.map((s) => s.color)
+              )}
           placement="bottom"
           variant="swatches"
           {...props.legend}

package/dist/components/charts/LineChart.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Axis from '../Axis.svelte';
+import Grid from '../Grid.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Legend from '../Legend.svelte';
@@ -76,7 +77,7 @@ declare class __sveltets_Render<TData> {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        cRange?: string[];
+        cRange?: string[] | readonly string[];
         xReverse?: boolean;
         yReverse?: boolean;
         zReverse?: boolean;
@@ -131,6 +132,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
@@ -179,6 +187,14 @@ declare class __sveltets_Render<TData> {
             setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
         }> | undefined;
         transformContext?: import("..").TransformContext;
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     } & {
         axis?: boolean | "x" | "y" | {
             [x: string]: any;
@@ -186,7 +202,7 @@ declare class __sveltets_Render<TData> {
             label?: string | undefined;
             labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            rule?: (boolean | Partial<ComponentProps<Rule>>) | undefined;
             grid?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
             ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
             tickLength?: number | undefined;
@@ -202,8 +218,26 @@ declare class __sveltets_Render<TData> {
                 label?: string;
             } | undefined;
         };
+        grid?: boolean | {
+            [x: string]: any;
+            x?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            y?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            xTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            yTicks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            bandAlign?: ("center" | "between") | undefined;
+            radialY?: ("circle" | "linear") | undefined;
+            spring?: boolean | Parameters<typeof import("svelte/motion").spring>[1];
+            tweened?: boolean | Parameters<typeof import("svelte/motion").tweened>[1];
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
+            classes?: {
+                root?: string;
+                line?: string;
+            } | undefined;
+        };
         labels?: boolean | {
             [x: string]: any;
+            value?: Accessor;
             placement?: ("inside" | "outside" | "center") | undefined;
             offset?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
@@ -219,7 +253,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
@@ -247,6 +281,7 @@ declare class __sveltets_Render<TData> {
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            grid?: Partial<ComponentProps<Grid>>;
             rule?: Partial<ComponentProps<Rule>>;
             spline?: Partial<ComponentProps<Spline>>;
             legend?: Partial<ComponentProps<Legend>>;
@@ -257,7 +292,9 @@ declare class __sveltets_Render<TData> {
         rule?: boolean | {
             [x: string]: any;
             x?: (number | Date | boolean | "left" | "right") | undefined;
+            xOffset?: number | undefined;
             y?: (number | Date | boolean | "top" | "bottom") | undefined;
+            yOffset?: number | undefined;
         };
         series?: {
             key: string | number;
@@ -274,6 +311,7 @@ declare class __sveltets_Render<TData> {
     };
     slots(): {
         default: any;
+        grid: any;
         axis: any;
         'below-marks': any;
         marks: any;

package/dist/components/charts/PieChart.svelte

@@ -1,52 +1,102 @@
-<script generics="TData">import {} from 'svelte';
-import { sum } from 'd3-array';
-import { format } from '@layerstack/utils';
-import Arc from '../Arc.svelte';
-import Chart from '../Chart.svelte';
-import Group from '../Group.svelte';
-import Legend from '../Legend.svelte';
-import Pie from '../Pie.svelte';
-import Svg from '../layout/Svg.svelte';
-import * as Tooltip from '../tooltip/index.js';
-import { accessor, chartDataArray } from '../../utils/common.js';
-export let data = [];
-/** Key accessor */
-export let key = 'key';
-$: keyAccessor = accessor(key);
-/** Label accessor */
-export let label = 'label';
-$: labelAccessor = accessor(label);
-/** Value accessor */
-export let value = 'value';
-$: valueAccessor = accessor(value);
-/** Maximum possible value, useful when `data` is single item */
-export let maxValue = undefined;
-export let series = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
-export let legend = false;
-/**
- * Range [min,max] in degrees.  See also startAngle/endAngle
- */
-export let range = [0, 360];
-/**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
- */
-export let innerRadius = undefined;
-/**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
- */
-export let outerRadius = undefined;
-export let cornerRadius = 0;
-export let padAngle = 0;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Arc from '../Arc.svelte';
+  import Chart from '../Chart.svelte';
+  import Group from '../Group.svelte';
+  import Legend from '../Legend.svelte';
+  import Pie from '../Pie.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    cornerRadius?: typeof cornerRadius;
+    innerRadius?: typeof innerRadius;
+    key?: typeof key;
+    label?: typeof label;
+    legend?: typeof legend;
+    maxValue?: typeof maxValue;
+    outerRadius?: typeof outerRadius;
+    padAngle?: typeof padAngle;
+    props?: typeof props;
+    range?: typeof range;
+    series?: typeof series;
+    value?: typeof label;
+  }
+
+  export let data: ChartProps['data'] = [];
+
+  /** Key accessor */
+  export let key: Accessor<TData> = 'key';
+  $: keyAccessor = accessor(key);
+
+  /** Label accessor */
+  export let label: Accessor<TData> = 'label';
+  $: labelAccessor = accessor(label);
+
+  /** Value accessor */
+  export let value: Accessor<TData> = 'value';
+  $: valueAccessor = accessor(value);
+
+  /** Maximum possible value, useful when `data` is single item */
+  export let maxValue: number | undefined = undefined;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    /** Maximum possible value, useful when `data` is single item */
+    maxValue?: number;
+    color?: string;
+    props?: Partial<ComponentProps<Arc>>;
+  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+
+  export let legend: ComponentProps<Legend> | boolean = false;
+
+  /**
+   * Range [min,max] in degrees.  See also startAngle/endAngle
+   */
+  export let range = [0, 360];
+
+  /**
+   * Define innerRadius.
+   *   value >= 1: discrete value
+   *   value >  0: percent of `outerRadius`
+   *   value <  0: offset of `outerRadius`
+   *   default: yRange min
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+
+  export let props: {
+    pie?: Partial<ComponentProps<Pie>>;
+    group?: Partial<ComponentProps<Group>>;
+    arc?: Partial<ComponentProps<Arc>>;
+    legend?: Partial<ComponentProps<Legend>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-$: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+    .filter((d) => d) as Array<TData>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<TData>;
+
+  $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
 </script>
 
 <Chart
@@ -77,7 +127,21 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
   let:padding
   let:tooltip
 >
-  {@const slotProps = { key, label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
+  {@const slotProps = {
+    key,
+    label,
+    value,
+    x,
+    xScale,
+    y,
+    yScale,
+    c,
+    cScale,
+    width,
+    height,
+    padding,
+    tooltip,
+  }}
   <slot {...slotProps}>
     <Svg center>
       <slot name="below-marks" {...slotProps} />
@@ -96,8 +160,8 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                 outerRadius={(outerRadius ?? 0) < 0 ? i * (outerRadius ?? 0) : outerRadius}
                 {cornerRadius}
                 {padAngle}
-                fill={s.color ?? cScale(c(d))}
-                track={{ fill: s.color ?? cScale(c(d)), 'fill-opacity': 0.1 }}
+                fill={s.color ?? cScale?.(c(d))}
+                track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
                 {...props.arc}
@@ -122,7 +186,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                     {innerRadius}
                     {cornerRadius}
                     {padAngle}
-                    fill={cScale(c(arc.data))}
+                    fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
                     {...props.arc}
@@ -159,7 +223,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
           <Tooltip.Item
             label={labelAccessor(data) || keyAccessor(data)}
             value={valueAccessor(data)}
-            color={cScale(c(data))}
+            color={cScale?.(c(data))}
             {format}
           />
         </Tooltip.List>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -73,7 +73,7 @@ declare class __sveltets_Render<TData> {
             width: number;
             height: number;
         }) => number[] | string[]) | undefined;
-        cRange?: string[];
+        cRange?: string[] | readonly string[];
         xReverse?: boolean;
         yReverse?: boolean;
         zReverse?: boolean;
@@ -128,6 +128,13 @@ declare class __sveltets_Render<TData> {
             onClick?: ({ data }: {
                 data: any;
             }) => any;
+            tooltip?: import("svelte/store").Writable<{
+                y: number;
+                x: number;
+                data: any;
+                show: (e: PointerEvent, tooltipData?: any) => void;
+                hide: () => void;
+            }>;
         }> | undefined;
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
@@ -176,6 +183,14 @@ declare class __sveltets_Render<TData> {
             setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
         }> | undefined;
         transformContext?: import("..").TransformContext;
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
+        tooltipContext?: import("svelte/store").Writable<{
+            y: number;
+            x: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+        }> | undefined;
     } & {
         cornerRadius?: number;
         innerRadius?: number | undefined;
@@ -192,7 +207,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {