layerchart 0.51.1 → 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);
@@ -29,7 +33,12 @@ let chartData = series
   {xScale}
   {y}
   yNice
-  padding={axis === false ? undefined : { left: 16, bottom: 16 }}
+  padding={axis === false
+    ? undefined
+    : {
+        left: axis === true || axis === 'y' ? 16 : 0,
+        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
+      }}
   tooltip={{ mode: 'voronoi' }}
   {...$$restProps}
   let:x
@@ -52,22 +61,29 @@ let chartData = series
     <Svg>
       <slot name="axis" {...slotProps}>
         {#if axis}
-          <Axis
-            placement="left"
-            grid
-            rule
-            format={(value) => format(value, undefined, { variant: 'short' })}
-            {...typeof axis === 'object' ? axis : null}
-            {...props.yAxis}
-          />
-          <Axis
-            placement="bottom"
-            grid
-            rule
-            format={(value) => format(value, undefined, { variant: 'short' })}
-            {...typeof axis === 'object' ? axis : null}
-            {...props.xAxis}
-          />
+          {#if axis !== 'x'}
+            <Axis
+              placement="left"
+              grid
+              format={(value) => format(value, undefined, { variant: 'short' })}
+              {...typeof axis === 'object' ? axis : null}
+              {...props.yAxis}
+            />
+          {/if}
+
+          {#if axis !== 'y'}
+            <Axis
+              placement="bottom"
+              grid
+              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>
 
@@ -101,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 | {
+        axis?: boolean | "x" | "y" | {
             [x: string]: any;
-            placement?: ("inside" | "outside" | "center") | undefined;
-            offset?: number | undefined;
-            format?: import("@layerstack/utils").FormatType | undefined;
-        };
-        axis?: boolean | {
             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.1",
+  "version": "0.52.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
     "@mdi/js": "^7.4.47",