layerchart 0.56.0 → 0.58.0

package/dist/components/Legend.svelte

@@ -35,6 +35,8 @@
   export let placement: Placement | undefined = undefined;
   export let orientation: 'horizontal' | 'vertical' = 'horizontal';
 
+  export let onClick: ((tick: any) => any) | undefined = undefined;
+
   /** Determine display ramp (individual color swatches or continuous ramp)*/
   export let variant: 'ramp' | 'swatches' = 'ramp';
 
@@ -208,15 +210,19 @@
         )}
       >
         {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick}
-          <div class="flex gap-1">
+          {@const color = scale(tick)}
+          <button
+            class={cls('flex gap-1', !onClick && 'cursor-auto')}
+            on:click={() => onClick?.({ tick, color })}
+          >
             <div
               class={cls('h-4 w-4 rounded-full', classes.swatch)}
-              style:background-color={scale(tick)}
+              style:background-color={color}
             ></div>
             <div class={cls('text-xs text-surface-content whitespace-nowrap', classes.label)}>
               {tickFormat ? format(tick, tickFormat) : tick}
             </div>
-          </div>
+          </button>
         {/each}
       </div>
     {/if}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         tickLength?: number | undefined;
         placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
+        onClick?: ((tick: any) => any) | undefined;
         variant?: ("ramp" | "swatches") | undefined;
         classes?: {
             root?: string;

package/dist/components/Pie.svelte

@@ -64,6 +64,8 @@
    */
   export let tooltip: TooltipContextValue | undefined = undefined;
 
+  export let sort: ((a: any, b: any) => number) | null | undefined = undefined;
+
   const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
 
   // @ts-expect-error
@@ -71,12 +73,21 @@
   let tweened_endAngle = motionStore(0, { spring, tweened });
   $: tweened_endAngle.set(resolved_endAngle);
 
-  $: pie = d3pie<any>()
-    // @ts-expect-error
-    .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
-    .endAngle($tweened_endAngle)
-    .padAngle(padAngle)
-    .value($x);
+  let pie: ReturnType<typeof d3pie<any>>;
+  $: {
+    pie = d3pie<any>()
+      // @ts-expect-error
+      .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
+      .endAngle($tweened_endAngle)
+      .padAngle(padAngle)
+      .value($x);
+
+    if (sort === null) {
+      pie = pie.sort(null);
+    } else if (sort) {
+      pie = pie.sort(sort);
+    }
+  }
 
   $: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
 </script>

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

@@ -33,6 +33,7 @@ declare const __propDef: {
         /**
            * Tooltip context to setup pointer events to show tooltip for related data
            */ tooltip?: TooltipContextValue | undefined;
+        sort?: ((a: any, b: any) => number) | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -256,6 +256,7 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
+            onClick?: ((tick: any) => any) | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
                 root?: string;

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

@@ -256,6 +256,7 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
+            onClick?: ((tick: any) => any) | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
                 root?: string;

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

@@ -255,6 +255,7 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
+            onClick?: ((tick: any) => any) | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
                 root?: string;

package/dist/components/charts/PieChart.svelte

@@ -25,6 +25,7 @@
     outerRadius?: typeof outerRadius;
     padAngle?: typeof padAngle;
     center?: typeof center;
+    placement?: typeof placement;
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
@@ -84,8 +85,11 @@
   export let cornerRadius = 0;
   export let padAngle = 0;
 
+  /** Placement of PieChart (default: 'center') */
+  export let placement: 'left' | 'center' | 'right' = 'center';
+
   /** Center chart.  Override and use `props.group` for more control */
-  export let center = true;
+  export let center = placement === 'center';
 
   export let props: {
     pie?: Partial<ComponentProps<Pie>>;
@@ -151,7 +155,15 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        <Group {...props.group}>
+        <Group
+          x={placement === 'left'
+            ? height / 2
+            : placement === 'right'
+              ? width - height / 2
+              : undefined}
+          center={['left', 'right'].includes(placement) ? 'y' : undefined}
+          {...props.group}
+        >
           {#each series as s, i}
             {@const singleArc = s.data?.length === 1 || chartData.length === 1}
             {#if singleArc}

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

@@ -209,6 +209,7 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
+            onClick?: ((tick: any) => any) | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
                 root?: string;
@@ -223,6 +224,7 @@ declare class __sveltets_Render<TData> {
         outerRadius?: number | undefined;
         padAngle?: number;
         center?: boolean;
+        placement?: "center" | "left" | "right";
         props?: {
             pie?: Partial<ComponentProps<Pie>>;
             group?: Partial<ComponentProps<Group>>;

package/dist/components/charts/ScatterChart.svelte

@@ -58,7 +58,7 @@
   // Default xScale based on first data's `x` value
   $: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
 
-  let chartData = series
+  $: chartData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
 

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

@@ -254,6 +254,7 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
+            onClick?: ((tick: any) => any) | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
                 root?: string;

package/package.json

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