layerchart 0.51.2 → 0.52.0

package/dist/components/charts/BarChart.svelte

@@ -1,6 +1,6 @@
 <script generics="TData">import {} from 'svelte';
-import { scaleBand, scaleLinear } from 'd3-scale';
-import { stack } from 'd3-shape';
+import { scaleBand, scaleOrdinal, scaleLinear } from 'd3-scale';
+import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
 import { sum } from 'd3-array';
 import { format } from '@layerstack/utils';
 import Axis from '../Axis.svelte';
@@ -8,6 +8,8 @@ import Bars from '../Bars.svelte';
 import Chart from '../Chart.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
+import Legend from '../Legend.svelte';
+import Rule from '../Rule.svelte';
 import Svg from '../layout/Svg.svelte';
 import * as Tooltip from '../tooltip/index.js';
 import { accessor, chartDataArray } from '../../utils/common.js';
@@ -25,10 +27,12 @@ export let series = [
 ];
 /** Determine how to layout series.  Overlap (default), stack, or group side by side */
 export let seriesLayout = 'overlap';
-$: stackSeries = seriesLayout === 'stack';
+$: stackSeries = seriesLayout.startsWith('stack');
 $: groupSeries = seriesLayout === 'group';
 export let axis = true;
+export let rule = true;
 export let labels = false;
+export let legend = false;
 /** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
 export let bandPadding = 0.4;
 /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
@@ -64,7 +68,19 @@ $: allSeriesData = series
 $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
 $: if (stackSeries) {
     const seriesKeys = series.map((s) => s.key);
-    const stackData = stack().keys(seriesKeys)(chartDataArray(data));
+    // const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
+    const offset = seriesLayout === 'stackExpand'
+        ? stackOffsetExpand
+        : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+    const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+        const s = series.find((d) => d.key === key);
+        return accessor(s.value ?? s.key)(d);
+    })
+        .offset(offset)(chartDataArray(data));
     chartData = chartData.map((d, i) => {
         return {
             ...d,
@@ -78,7 +94,7 @@ $: if (stackSeries) {
   data={chartData}
   x={x ??
     (stackSeries
-      ? (d) => series.map((s, i) => d.stackData[i][1])
+      ? (d) => series.flatMap((s, i) => d.stackData[i])
       : series.map((s) => s.value ?? s.key))}
   {xScale}
   {xBaseline}
@@ -88,7 +104,7 @@ $: if (stackSeries) {
   {x1Range}
   y={y ??
     (stackSeries
-      ? (d) => series.map((s, i) => d.stackData[i][1])
+      ? (d) => series.flatMap((s, i) => d.stackData[i])
       : series.map((s) => s.value ?? s.key))}
   {yScale}
   {yBaseline}
@@ -100,7 +116,7 @@ $: if (stackSeries) {
     ? undefined
     : {
         left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: axis === true || axis === 'x' ? 16 : 0,
+        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
       }}
   tooltip={{ mode: 'band' }}
   {...$$restProps}
@@ -122,7 +138,6 @@ $: if (stackSeries) {
             <Axis
               placement="left"
               grid={isVertical}
-              rule
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -133,12 +148,15 @@ $: if (stackSeries) {
             <Axis
               placement="bottom"
               grid={!isVertical}
-              rule
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.xAxis}
             />
           {/if}
+
+          {#if rule}
+            <Rule x={0} y={0} {...typeof rule === 'object' ? rule : null} {...props.rule} />
+          {/if}
         {/if}
       </slot>
 
@@ -180,6 +198,21 @@ $: if (stackSeries) {
       {/if}
     </Svg>
 
+    <slot name="legend" {...slotProps}>
+      {#if legend}
+        <Legend
+          scale={scaleOrdinal(
+            series.map((s) => s.key),
+            series.map((s) => s.color)
+          )}
+          placement="bottom"
+          variant="swatches"
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
+        />
+      {/if}
+    </slot>
+
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(isVertical ? x(data) : y(data))}</Tooltip.Header>

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

@@ -4,6 +4,8 @@ import Axis from '../Axis.svelte';
 import Bars from '../Bars.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
+import Legend from '../Legend.svelte';
+import Rule from '../Rule.svelte';
 import { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
     props(): {
@@ -177,48 +179,84 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transformContext?: import("..").TransformContext;
     } & {
-        series?: {
-            key: string;
-            label?: string;
-            value?: Accessor<TData>;
-            /** Provider series data, else uses chart data (with value/key accessor) */
-            data?: TData[] | undefined;
-            color?: string;
-            props?: Partial<ComponentProps<Bars>>;
-        }[] | undefined;
-        seriesLayout?: "overlap" | "stack" | "group";
-        labels?: boolean | {
-            [x: string]: any;
-            placement?: ("inside" | "outside" | "center") | undefined;
-            offset?: number | undefined;
-            format?: import("@layerstack/utils").FormatType | undefined;
-        };
         axis?: boolean | "x" | "y" | {
+            [x: string]: any;
             placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
-            label?: string;
-            labelPlacement?: "start" | "middle" | "end";
+            label?: string | undefined;
+            labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
-            grid?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
+            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | 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;
+            tickLength?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
             tickLabelProps?: Partial<ComponentProps<import("..").Text>> | 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 | (() => {});
-            transitionInParams?: import("svelte-ux").TransitionParams;
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
             scale?: any;
+            classes?: {
+                root?: string;
+                label?: string;
+            } | undefined;
         };
-        orientation?: "horizontal" | "vertical";
         bandPadding?: number;
+        groupPadding?: number;
+        labels?: boolean | {
+            [x: string]: any;
+            placement?: ("inside" | "outside" | "center") | undefined;
+            offset?: number | undefined;
+            format?: import("@layerstack/utils").FormatType | undefined;
+        };
+        legend?: boolean | {
+            [x: string]: any;
+            scale?: any;
+            title?: string | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            ticks?: number | undefined;
+            tickFormat?: import("@layerstack/utils").FormatType | undefined;
+            tickValues?: any[] | undefined;
+            tickFontSize?: number | undefined;
+            tickLength?: number | undefined;
+            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            orientation?: ("horizontal" | "vertical") | undefined;
+            variant?: ("ramp" | "swatches") | undefined;
+            classes?: {
+                root?: string;
+                title?: string;
+                label?: string;
+                tick?: string;
+                swatches?: string;
+                swatch?: string;
+            } | undefined;
+        };
+        orientation?: "horizontal" | "vertical";
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            rule?: Partial<ComponentProps<Rule>>;
             bars?: Partial<ComponentProps<Bars>>;
+            legend?: Partial<ComponentProps<Legend>>;
             highlight?: Partial<ComponentProps<Highlight>>;
             labels?: Partial<ComponentProps<Labels>>;
         } | undefined;
+        rule?: boolean | {
+            [x: string]: any;
+            x?: (number | Date | boolean | "left" | "right") | undefined;
+            y?: (number | Date | boolean | "top" | "bottom") | undefined;
+        };
+        series?: {
+            key: string;
+            label?: string;
+            value?: Accessor<TData>;
+            /** Provider series data, else uses chart data (with value/key accessor) */
+            data?: TData[] | undefined;
+            color?: string;
+            props?: Partial<ComponentProps<Bars>>;
+        }[] | undefined;
+        seriesLayout?: "overlap" | "stack" | "stackExpand" | "stackDiverging" | "group";
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -230,6 +268,7 @@ declare class __sveltets_Render<TData> {
         marks: any;
         'above-marks': any;
         highlight: any;
+        legend: any;
         tooltip: any;
     };
 }

package/dist/components/charts/LineChart.svelte

@@ -1,11 +1,13 @@
-<script generics="TData">import Points from '../Points.svelte';
-import {} from 'svelte';
-import { scaleLinear, scaleTime } from 'd3-scale';
+<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';
@@ -17,7 +19,9 @@ export let y = undefined;
 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
@@ -40,7 +44,7 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
     ? undefined
     : {
         left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: axis === true || axis === 'x' ? 16 : 0,
+        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
       }}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
@@ -62,7 +66,6 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
             <Axis
               placement={radial ? 'radius' : 'left'}
               grid
-              rule
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -73,12 +76,15 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
             <Axis
               placement={radial ? 'angle' : 'bottom'}
               grid={radial}
-              rule
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.xAxis}
             />
           {/if}
+
+          {#if rule}
+            <Rule x={0} y={0} {...typeof rule === 'object' ? rule : null} {...props.rule} />
+          {/if}
         {/if}
       </slot>
 
@@ -128,6 +134,21 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
       </slot>
     </Svg>
 
+    <slot name="legend" {...slotProps}>
+      {#if legend}
+        <Legend
+          scale={scaleOrdinal(
+            series.map((s) => s.key),
+            series.map((s) => s.color)
+          )}
+          placement="bottom"
+          variant="swatches"
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
+        />
+      {/if}
+    </slot>
+
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(x(data))}</Tooltip.Header>

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

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import Points from '../Points.svelte';
 import { type ComponentProps } from 'svelte';
 import Axis from '../Axis.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 { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
@@ -178,37 +180,56 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transformContext?: import("..").TransformContext;
     } & {
-        series?: {
-            key: string | number;
-            label?: string;
-            value?: Accessor<TData>;
-            /** Provider series data, else uses chart data (with value/key accessor) */
-            data?: TData[] | undefined;
-            color?: string;
-            props?: Partial<ComponentProps<Spline>>;
-        }[] | undefined;
-        labels?: boolean | {
-            [x: string]: any;
-            placement?: ("inside" | "outside" | "center") | undefined;
-            offset?: number | undefined;
-            format?: import("@layerstack/utils").FormatType | undefined;
-        };
         axis?: boolean | "x" | "y" | {
+            [x: string]: any;
             placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
-            label?: string;
-            labelPlacement?: "start" | "middle" | "end";
+            label?: string | undefined;
+            labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
-            grid?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
+            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | 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;
+            tickLength?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
             tickLabelProps?: Partial<ComponentProps<import("..").Text>> | 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 | (() => {});
-            transitionInParams?: import("svelte-ux").TransitionParams;
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
+            scale?: any;
+            classes?: {
+                root?: string;
+                label?: string;
+            } | undefined;
+        };
+        labels?: boolean | {
+            [x: string]: any;
+            placement?: ("inside" | "outside" | "center") | undefined;
+            offset?: number | undefined;
+            format?: import("@layerstack/utils").FormatType | undefined;
+        };
+        legend?: boolean | {
+            [x: string]: any;
             scale?: any;
+            title?: string | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            ticks?: number | undefined;
+            tickFormat?: import("@layerstack/utils").FormatType | undefined;
+            tickValues?: any[] | undefined;
+            tickFontSize?: number | undefined;
+            tickLength?: number | undefined;
+            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            orientation?: ("horizontal" | "vertical") | undefined;
+            variant?: ("ramp" | "swatches") | undefined;
+            classes?: {
+                root?: string;
+                title?: string;
+                label?: string;
+                tick?: string;
+                swatches?: string;
+                swatch?: string;
+            } | undefined;
         };
         points?: boolean | {
             [x: string]: any;
@@ -220,24 +241,33 @@ declare class __sveltets_Render<TData> {
             fill?: string | undefined;
             stroke?: string | undefined;
             strokeWidth?: number | string | undefined;
-            render?: ((ctx: CanvasRenderingContext2D, points: {
-                x: number;
-                y: number;
-                r: number;
-                xValue: any;
-                yValue: any;
-                data: any;
-            }[]) => any) | undefined;
+            render?: ((ctx: CanvasRenderingContext2D, points: import("../Points.svelte").Point[]) => any) | undefined;
             class?: string | undefined;
         };
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            rule?: Partial<ComponentProps<Rule>>;
             spline?: Partial<ComponentProps<Spline>>;
+            legend?: Partial<ComponentProps<Legend>>;
             highlight?: Partial<ComponentProps<Highlight>>;
             labels?: Partial<ComponentProps<Labels>>;
             points?: Partial<ComponentProps<Points>>;
         } | undefined;
+        rule?: boolean | {
+            [x: string]: any;
+            x?: (number | Date | boolean | "left" | "right") | undefined;
+            y?: (number | Date | boolean | "top" | "bottom") | undefined;
+        };
+        series?: {
+            key: string | number;
+            label?: string;
+            value?: Accessor<TData>;
+            /** Provider series data, else uses chart data (with value/key accessor) */
+            data?: TData[] | undefined;
+            color?: string;
+            props?: Partial<ComponentProps<Spline>>;
+        }[] | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -249,6 +279,7 @@ declare class __sveltets_Render<TData> {
         marks: any;
         'above-marks': any;
         highlight: any;
+        legend: any;
         tooltip: any;
     };
 }

package/dist/components/charts/PieChart.svelte

@@ -4,6 +4,7 @@ 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';
@@ -18,6 +19,7 @@ $: 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
  */
@@ -59,6 +61,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
         'hsl(var(--color-warning))',
         'hsl(var(--color-danger))',
       ]}
+  padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
   let:x
   let:xScale
@@ -95,6 +98,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                 {tooltip}
                 data={d}
                 {...props.arc}
+                {...s.props}
               />
             {:else}
               <Pie
@@ -119,6 +123,7 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
                     data={arc.data}
                     {tooltip}
                     {...props.arc}
+                    {...s.props}
                   />
                 {/each}
               </Pie>
@@ -130,6 +135,17 @@ $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
       <slot name="above-marks" {...slotProps} />
     </Svg>
 
+    <slot name="legend" {...slotProps}>
+      {#if legend}
+        <Legend
+          placement="bottom"
+          variant="swatches"
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
+        />
+      {/if}
+    </slot>
+
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root let:data>
         <Tooltip.List>

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Arc from '../Arc.svelte';
 import Group from '../Group.svelte';
+import Legend from '../Legend.svelte';
 import Pie from '../Pie.svelte';
 import { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
@@ -176,19 +177,42 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transformContext?: import("..").TransformContext;
     } & {
+        cornerRadius?: number;
+        innerRadius?: number | undefined;
         label?: Accessor<TData>;
-        value?: Accessor<TData>;
+        legend?: boolean | {
+            [x: string]: any;
+            scale?: any;
+            title?: string | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            ticks?: number | undefined;
+            tickFormat?: import("@layerstack/utils").FormatType | undefined;
+            tickValues?: any[] | undefined;
+            tickFontSize?: number | undefined;
+            tickLength?: number | undefined;
+            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            orientation?: ("horizontal" | "vertical") | undefined;
+            variant?: ("ramp" | "swatches") | undefined;
+            classes?: {
+                root?: string;
+                title?: string;
+                label?: string;
+                tick?: string;
+                swatches?: string;
+                swatch?: string;
+            } | undefined;
+        };
         maxValue?: number | undefined;
-        range?: number[];
-        innerRadius?: number | undefined;
         outerRadius?: number | undefined;
-        cornerRadius?: number;
         padAngle?: number;
         props?: {
             pie?: Partial<ComponentProps<Pie>>;
             group?: Partial<ComponentProps<Group>>;
             arc?: Partial<ComponentProps<Arc>>;
+            legend?: Partial<ComponentProps<Legend>>;
         } | undefined;
+        range?: number[];
         series?: {
             key: string | number;
             label?: string;
@@ -200,6 +224,7 @@ declare class __sveltets_Render<TData> {
             color?: string;
             props?: Partial<ComponentProps<Arc>>;
         }[] | undefined;
+        value?: Accessor<TData>;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -209,6 +234,7 @@ declare class __sveltets_Render<TData> {
         'below-marks': any;
         marks: any;
         'above-marks': any;
+        legend: any;
         tooltip: any;
     };
 }