layerchart 0.71.2 → 0.72.0

package/dist/components/Bars.svelte

@@ -47,6 +47,9 @@
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 
+  /** Event dispatched when individual Bar is clicked */
+  export let onBarClick: (e: { data: any }) => void = () => {};
+
   $: _data = chartDataArray(data ?? $contextData);
 </script>
 
@@ -66,6 +69,7 @@
         {inset}
         {spring}
         {tweened}
+        on:click={() => onBarClick({ data: d })}
         {...$$restProps}
       />
     {/each}

package/dist/components/Highlight.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export type HighlightPointData = { x: any; y: any };
+</script>
+
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { max, min } from 'd3-array';
@@ -62,10 +66,14 @@
   /** Set to false to disable spring transitions */
   export let motion = true;
 
+  export let onAreaClick: (e: { data: any }) => void = () => {};
+  export let onBarClick: (e: { data: any }) => void = () => {};
+  export let onPointClick: (e: { point: (typeof _points)[number]; data: any }) => void = () => {};
+
   const _x = accessor(x);
   const _y = accessor(y);
 
-  let _points: { x: number; y: number; fill: string }[] = [];
+  let _points: { x: number; y: number; fill: string; data: HighlightPointData }[] = [];
   let _lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
   let _area = {
     x: 0,
@@ -217,6 +225,10 @@
               x: $xScale(seriesPoint.point[1]) + xOffset,
               y: yCoord + yOffset,
               fill: $config.c ? $cGet(seriesPoint.series) : null,
+              data: {
+                x: seriesPoint.point[1],
+                y: yValue,
+              },
             };
           });
         }
@@ -229,6 +241,10 @@
             y: yCoord + yOffset,
             // TODO: is there a better way to expose the series key/value?
             fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+            data: {
+              x: xValue, // TODO: use highlightData[$key]?
+              y: yValue,
+            },
           };
         });
       }
@@ -256,6 +272,10 @@
             x: xCoord + xOffset,
             y: $yScale(seriesPoint.point[1]) + yOffset,
             fill: $config.c ? $cGet(seriesPoint.series) : null,
+            data: {
+              x: xValue,
+              y: seriesPoint.point[1],
+            },
           }));
         }
       } else {
@@ -267,6 +287,10 @@
             y: yItem + yOffset,
             // TODO: is there a better way to expose the series key/value?
             fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+            data: {
+              x: xValue,
+              y: yValue, // TODO: use highlightData[$key] ?
+            },
           };
         });
       }
@@ -276,6 +300,10 @@
           x: xCoord + xOffset,
           y: yCoord + yOffset,
           fill: $config.c ? $cGet(highlightData) : null,
+          data: {
+            x: xValue,
+            y: yValue,
+          },
         },
       ];
     } else {
@@ -322,7 +350,7 @@
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
-        on:click
+        on:click={() => onAreaClick({ data: highlightData })}
       />
     </slot>
   {/if}
@@ -343,7 +371,7 @@
           !bar.fill && 'fill-primary',
           typeof bar === 'object' ? bar.class : null
         )}
-        on:click
+        on:click={() => onBarClick({ data: highlightData })}
       />
     </slot>
   {/if}
@@ -382,6 +410,7 @@
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
+          on:click={() => onPointClick({ point, data: highlightData })}
         />
       {/each}
     </slot>

package/dist/components/charts/AreaChart.svelte

@@ -10,7 +10,7 @@
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
-  import Highlight from '../Highlight.svelte';
+  import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
   import Legend from '../Legend.svelte';
   import Line from '../Line.svelte';
@@ -38,6 +38,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
+    onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -69,6 +71,15 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
+  /** Event dispatched when Highlight point is clicked (useful with multiple series) */
+  export let onPointClick: (e: {
+    data: HighlightPointData;
+    series: (typeof series)[number];
+  }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -162,7 +173,7 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x' }}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale
@@ -262,6 +273,7 @@
             y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
             points={{ fill: s.color }}
             lines={i == 0}
+            onPointClick={(e) => onPointClick({ ...e, series: s })}
             {...props.highlight}
           />
         {/each}

package/dist/components/charts/BarChart.svelte

@@ -21,6 +21,7 @@
     accessor,
     chartDataArray,
     defaultChartPadding,
+    findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
 
@@ -39,6 +40,8 @@
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
     renderContext?: typeof renderContext;
+    onBarClick?: typeof onBarClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -81,6 +84,13 @@
   /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
   export let groupPadding = 0;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
+  // TODO: Need to find a way to have this play nice with `tooltip={{ mode: 'band' }}`
+  /** Event dispatched when individual Bar is clicked (useful with multiple series) */
+  export let onBarClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
+
   $: xScale = $$props.xScale ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear());
   $: xBaseline = isVertical ? undefined : 0;
 
@@ -172,6 +182,7 @@
       radius: 4,
       strokeWidth: 1,
       fill: s.color,
+      onBarClick: (e) => onBarClick({ data: e.data, series: s }),
       ...props.bars,
       ...s.props,
     };
@@ -205,7 +216,7 @@
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'band' }}
+  tooltip={{ mode: 'band', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale
@@ -331,10 +342,11 @@
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
-            {@const valueAccessor = accessor(s.value ?? s.key)}
+            {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
+            {@const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key))}
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
-              value={valueAccessor(data)}
+              value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color ?? cScale?.(c(data))}
               {format}
               valueAlign="right"
@@ -347,8 +359,9 @@
             <Tooltip.Item
               label="total"
               value={sum(series, (s) => {
-                const valueAccessor = accessor(s.value ?? s.key);
-                return valueAccessor(data);
+                const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data;
+                const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key));
+                return valueAccessor(seriesTooltipData);
               })}
               format="integer"
               valueAlign="right"

package/dist/components/charts/LineChart.svelte

@@ -7,7 +7,7 @@
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
-  import Highlight from '../Highlight.svelte';
+  import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
@@ -34,6 +34,8 @@
     rule?: typeof rule;
     series?: typeof series;
     renderContext?: typeof renderContext;
+    onPointClick?: typeof onPointClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -61,6 +63,15 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
+  /** Event dispatched when Highlight point is clicked (useful with multiple series) */
+  export let onPointClick: (e: {
+    data: HighlightPointData;
+    series: (typeof series)[number];
+  }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -110,7 +121,7 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x' }}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale
@@ -206,6 +217,7 @@
             y={s.value ?? (s.data ? undefined : s.key)}
             points={{ fill: s.color }}
             lines={i === 0}
+            onPointClick={(e) => onPointClick({ ...e, series: s })}
             {...props.highlight}
           />
         {/each}

package/dist/components/charts/PieChart.svelte

@@ -30,8 +30,10 @@
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
-    value?: typeof label;
+    value?: typeof value;
     renderContext?: typeof renderContext;
+    onArcClick?: typeof onArcClick;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: ChartProps['data'] = [];
@@ -93,6 +95,13 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
+  // TODO: Not usable with manual tooltip / arc path.  Use `onArcClick`?
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
+  /** Event dispatched when individual Arc is clicked  (useful with multiple series) */
+  export let onArcClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
+
   export let props: {
     pie?: Partial<ComponentProps<Pie>>;
     group?: Partial<ComponentProps<Group>>;
@@ -184,6 +193,11 @@
                 track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
+                on:click={() => {
+                  onArcClick({ data: d, series: s });
+                  // Workaround for `tooltip={{ mode: 'manual' }}
+                  onTooltipClick({ data: d });
+                }}
                 {...props.arc}
                 {...s.props}
               />
@@ -209,6 +223,11 @@
                     fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
+                    on:click={() => {
+                      onArcClick({ data: arc.data, series: s });
+                      // Workaround for `tooltip={{ mode: 'manual' }}
+                      onTooltipClick({ data: arc.data });
+                    }}
                     {...props.arc}
                     {...s.props}
                   />

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

@@ -245,6 +245,23 @@ declare class __sveltets_Render<TData> {
         }[] | undefined;
         value?: Accessor<TData>;
         renderContext?: "canvas" | "svg";
+        onArcClick?: ((e: {
+            data: any;
+            series: {
+                key: string | number;
+                label?: string;
+                value?: Accessor<TData>;
+                /** Provider series data, else uses chart data (with value/key accessor) */
+                data?: TData[] | undefined;
+                /** Maximum possible value, useful when `data` is single item */
+                maxValue?: number;
+                color?: string;
+                props?: Partial<ComponentProps<Arc>>;
+            };
+        }) => void) | undefined;
+        onTooltipClick?: ((e: {
+            data: any;
+        }) => void) | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/charts/ScatterChart.svelte

@@ -30,6 +30,7 @@
     props?: typeof props;
     series?: typeof series;
     renderContext?: typeof renderContext;
+    onTooltipClick?: typeof onTooltipClick;
   }
 
   export let data: $$Props['data'] = [];
@@ -51,6 +52,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Event dispatched with current tooltip data */
+  export let onTooltipClick: (e: { data: any }) => void = () => {};
+
   export let props: {
     xAxis?: Partial<ComponentProps<Axis>>;
     yAxis?: Partial<ComponentProps<Axis>>;
@@ -100,7 +104,7 @@
   {yScale}
   yNice
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'voronoi' }}
+  tooltip={{ mode: 'voronoi', onClick: onTooltipClick }}
   {...$$restProps}
   let:x
   let:xScale

package/dist/components/tooltip/Tooltip.svelte

@@ -8,9 +8,9 @@
   import { isScaleBand } from '../../utils/scales.js';
 
   /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-  export let x: 'pointer' | 'data' | number | undefined = 'pointer';
+  export let x: 'pointer' | 'data' | number = 'pointer';
   /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-  export let y: 'pointer' | 'data' | number | undefined = 'pointer';
+  export let y: 'pointer' | 'data' | number = 'pointer';
 
   /** Offset added to `x` position */
   export let xOffset = x === 'pointer' ? 10 : 0;
@@ -135,20 +135,25 @@
     rect.right = rect.left + tooltipWidth;
 
     if (contained === 'container') {
-      // Check if outside of container and swap align side accordingly
-      if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
-        rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
-      }
-      if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
-        rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+      // Only attempt repositiong if not fixed (ie. `pointer`/`data`)
+      if (typeof x !== 'number') {
+        // Check if outside of container and swap align side accordingly
+        if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
+          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+        }
+        if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
+          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+        }
       }
       rect.right = rect.left + tooltipWidth;
 
-      if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
-        rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
-      }
-      if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
-        rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+      if (typeof y !== 'number') {
+        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
+          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        }
+        if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
+          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        }
       }
       rect.bottom = rect.top + tooltipHeight;
     } else if (contained === 'window') {
@@ -156,25 +161,34 @@
       // Root <div> won't be available on initial mount
       if (rootEl?.parentElement) {
         const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
-        if (
-          (xAlign === 'start' || xAlign === 'center') &&
-          parentViewportRect.left + rect.right > window.innerWidth
-        ) {
-          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
-        }
-        if ((xAlign === 'end' || xAlign === 'center') && parentViewportRect.left + rect.left < 0) {
-          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+
+        // Only attempt repositiong if not fixed (ie. `pointer`/`data`)
+        if (typeof x !== 'number') {
+          if (
+            (xAlign === 'start' || xAlign === 'center') &&
+            parentViewportRect.left + rect.right > window.innerWidth
+          ) {
+            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+          }
+          if (
+            (xAlign === 'end' || xAlign === 'center') &&
+            parentViewportRect.left + rect.left < 0
+          ) {
+            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+          }
         }
         rect.right = rect.left + tooltipWidth;
 
-        if (
-          (yAlign === 'start' || yAlign === 'center') &&
-          parentViewportRect.top + rect.bottom > window.innerHeight
-        ) {
-          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
-        }
-        if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
-          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        if (typeof y !== 'number') {
+          if (
+            (yAlign === 'start' || yAlign === 'center') &&
+            parentViewportRect.top + rect.bottom > window.innerHeight
+          ) {
+            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+          }
+          if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+          }
         }
         rect.bottom = rect.top + tooltipHeight;
       }

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        x?: "pointer" | "data" | number | undefined | undefined;
-        y?: "pointer" | "data" | number | undefined | undefined;
+        x?: "pointer" | "data" | number | undefined;
+        y?: "pointer" | "data" | number | undefined;
         xOffset?: number | undefined;
         yOffset?: number | undefined;
         anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;

package/package.json

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