layerchart 0.51.2 → 0.52.0

package/dist/components/charts/ScatterChart.svelte

@@ -1,11 +1,13 @@
 <script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleTime } from 'd3-scale';
+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 Svg from '../layout/Svg.svelte';
 import * as Tooltip from '../tooltip/index.js';
 import { accessor, chartDataArray } from '../../utils/common.js';
@@ -15,9 +17,11 @@ export let y = undefined;
 export let series = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
 export let axis = true;
 export let labels = false;
+export let legend = false;
+export let rule = true;
+export let props = {};
 // Default xScale based on first data's `x` value
 $: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
-export let props = {};
 let chartData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d);
@@ -33,7 +37,7 @@ let chartData = series
     ? 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: 'voronoi' }}
   {...$$restProps}
@@ -61,7 +65,6 @@ let chartData = series
             <Axis
               placement="left"
               grid
-              rule
               format={(value) => format(value, undefined, { variant: 'short' })}
               {...typeof axis === 'object' ? axis : null}
               {...props.yAxis}
@@ -72,12 +75,15 @@ let chartData = series
             <Axis
               placement="bottom"
               grid
-              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>
 
@@ -111,6 +117,21 @@ let chartData = series
       {/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>
         {#if activeSeries?.key !== 'default'}

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

@@ -3,7 +3,9 @@ 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 { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
     props(): {
@@ -177,35 +179,56 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transformContext?: import("..").TransformContext;
     } & {
-        series?: {
-            key: string;
-            label?: string;
-            data: TData[];
-            color?: string;
-            props?: Partial<ComponentProps<Points>>;
-        }[] | 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;
         };
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
@@ -213,7 +236,16 @@ declare class __sveltets_Render<TData> {
             points?: Partial<ComponentProps<Points>>;
             highlight?: Partial<ComponentProps<Highlight>>;
             labels?: Partial<ComponentProps<Labels>>;
+            legend?: Partial<ComponentProps<Legend>>;
+            rule?: Partial<ComponentProps<Rule>>;
         } | undefined;
+        series?: {
+            key: string;
+            label?: string;
+            data: TData[];
+            color?: string;
+            props?: Partial<ComponentProps<Points>>;
+        }[] | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -225,6 +257,7 @@ declare class __sveltets_Render<TData> {
         marks: any;
         'above-marks': any;
         highlight: any;
+        legend: any;
         tooltip: any;
     };
 }

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.51.2",
+  "version": "0.52.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
     "@mdi/js": "^7.4.47",