layerchart 0.92.1 → 0.93.1

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

@@ -120,6 +120,7 @@ declare class __sveltets_Render<TData> {
             reflectY?: boolean | undefined;
             geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
         }> | undefined;
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
         tooltip?: boolean | Partial<{
             mode?: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             findTooltipData?: "closest" | "left" | "right";
@@ -131,14 +132,22 @@ declare class __sveltets_Render<TData> {
                 data: any;
             }) => any;
             tooltip?: import("svelte/store").Writable<{
-                y: number;
                 x: number;
+                y: number;
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
                 mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
         }> | undefined;
+        tooltipContext?: import("svelte/store").Writable<{
+            x: number;
+            y: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
+        }> | undefined;
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
             translateOnScale?: boolean;
@@ -195,15 +204,42 @@ declare class __sveltets_Render<TData> {
             setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
         }> | undefined;
         transformContext?: import("..").TransformContext;
-        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
-        tooltipContext?: import("svelte/store").Writable<{
-            y: number;
-            x: number;
-            data: any;
-            show: (e: PointerEvent, tooltipData?: any) => void;
-            hide: () => void;
-            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
+        brush?: boolean | Partial<{
+            axis?: "x" | "y" | "both";
+            handleSize?: number;
+            resetOnEnd?: boolean;
+            xDomain?: import("../../utils/scales").DomainType;
+            yDomain?: import("../../utils/scales").DomainType;
+            mode?: "integrated" | "separated";
+            disabled?: boolean;
+            range?: Partial<import("svelte/elements").HTMLAttributes<HTMLDivElement>> | undefined;
+            handle?: Partial<import("svelte/elements").HTMLAttributes<HTMLDivElement>> | undefined;
+            classes?: {
+                root?: string;
+                frame?: string;
+                range?: string;
+                handle?: string;
+                labels?: string;
+            };
+            onchange?: (detail: {
+                xDomain?: import("../../utils/scales").DomainType;
+                yDomain?: import("../../utils/scales").DomainType;
+            }) => void;
+            onbrushstart?: (detail: {
+                xDomain?: import("../../utils/scales").DomainType;
+                yDomain?: import("../../utils/scales").DomainType;
+            }) => void;
+            onbrushend?: (detail: {
+                xDomain?: import("../../utils/scales").DomainType;
+                yDomain?: import("../../utils/scales").DomainType;
+            }) => void;
+            onreset?: (detail: {
+                xDomain?: import("../../utils/scales").DomainType;
+                yDomain?: import("../../utils/scales").DomainType;
+            }) => void;
+            brush?: import("svelte/store").Writable<import("../BrushContext.svelte").BrushContextValue>;
         }> | undefined;
+        brushContext?: import("svelte/store").Writable<import("../BrushContext.svelte").BrushContextValue> | undefined;
         onresize?: ((e: import("../ChartContext.svelte").ChartResizeDetail) => void) | undefined;
         ondragstart?: (() => void) | undefined;
         ondragend?: (() => void) | undefined;

package/dist/components/charts/ScatterChart.svelte

@@ -6,7 +6,7 @@
   import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
-  import Brush from '../Brush.svelte';
+  import BrushContext from '../BrushContext.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import ChartClipPath from '../ChartClipPath.svelte';
@@ -44,9 +44,9 @@
   export let y: Accessor<TData> = undefined;
 
   /** Set xDomain.  Useful for external brush control */
-  export let xDomain: ComponentProps<typeof Brush>['xDomain'] = undefined;
+  export let xDomain: ComponentProps<typeof BrushContext>['xDomain'] = undefined;
   /** Set yDomain.  Useful for external brush control */
-  export let yDomain: ComponentProps<typeof Brush>['yDomain'] = undefined;
+  export let yDomain: ComponentProps<typeof BrushContext>['yDomain'] = undefined;
 
   export let series: {
     key: string;
@@ -58,7 +58,7 @@
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let brush: ComponentProps<Brush> | boolean = false;
+  export let brush: ComponentProps<BrushContext> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -68,7 +68,7 @@
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
   export let props: {
-    brush?: Partial<ComponentProps<Brush>>;
+    brush?: Partial<ComponentProps<BrushContext>>;
     debug?: typeof debug;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
@@ -157,6 +157,8 @@
     );
   });
 
+  $: brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush };
+
   if (profile) {
     console.time('ScatterChart render');
     onMount(() => {
@@ -185,6 +187,20 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
+    ? {
+        axis: 'both',
+        resetOnEnd: true,
+        xDomain,
+        yDomain,
+        ...brushProps,
+        onbrushend: (e) => {
+          xDomain = e.xDomain;
+          yDomain = e.yDomain;
+          brushProps.onbrushend?.(e);
+        },
+      }
+    : false}
   let:x
   let:xScale
   let:y
@@ -275,25 +291,6 @@
       {/if}
     </svelte:component>
 
-    <!-- TODO: Determine how to coordinate with `tooltip={{ mode: 'voronoi' }} -->
-    {#if brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')}
-      <Svg>
-        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
-        <Brush
-          axis="both"
-          resetOnEnd
-          {xDomain}
-          {yDomain}
-          {...brushProps}
-          onbrushend={(e) => {
-            xDomain = e.xDomain;
-            yDomain = e.yDomain;
-            brushProps.onbrushend?.(e);
-          }}
-        />
-      </Svg>
-    {/if}
-
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/index.d.ts

@@ -6,8 +6,8 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
-export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
+export { default as BrushContext } from './BrushContext.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
 export { default as Chart } from './Chart.svelte';

package/dist/components/index.js

@@ -7,8 +7,8 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
-export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
+export { default as BrushContext } from './BrushContext.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
 export { default as Chart } from './Chart.svelte';

package/dist/components/tooltip/TooltipContext.svelte

@@ -115,8 +115,8 @@
 
   /** Exposed to allow binding in Chart */
   export let tooltip = writable({
-    y: 0,
     x: 0,
+    y: 0,
     data: null as any,
     show: showTooltip,
     hide: hideTooltip,
@@ -393,12 +393,12 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  style:width="{$width}px"
-  style:height="{$height}px"
   style:top="{$padding.top}px"
   style:left="{$padding.left}px"
+  style:width="{$width}px"
+  style:height="{$height}px"
   class={cls(
-    'tooltip-trigger absolute touch-none',
+    'TooltipContext absolute touch-none',
     debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
   )}
   on:pointerenter={triggerPointerEvents ? showTooltip : undefined}
@@ -410,13 +410,13 @@
     }
   }}
 >
-  <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
+  <!-- Rendering slot within TooltipContext to allow pointer events to bubble up (ex. Brush) -->
   <div
     class="absolute"
-    style:width="{$containerWidth}px"
-    style:height="{$containerHeight}px"
     style:top="-{$padding.top ?? 0}px"
     style:left="-{$padding.left ?? 0}px"
+    style:width="{$containerWidth}px"
+    style:height="{$containerHeight}px"
   >
     <slot tooltip={$tooltip} />
 

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

@@ -30,8 +30,8 @@ declare const __propDef: {
             data: any;
         }) => any;
         /** Exposed to allow binding in Chart */ tooltip?: import("svelte/store").Writable<{
-            y: number;
             x: number;
+            y: number;
             data: any;
             show: (e: PointerEvent, tooltipData?: any) => void;
             hide: () => void;
@@ -44,8 +44,8 @@ declare const __propDef: {
     slots: {
         default: {
             tooltip: {
-                y: number;
                 x: number;
+                y: number;
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;

package/dist/utils/math.d.ts

@@ -29,3 +29,5 @@ export declare function celsiusToFahrenheit(temperature: number): number;
 export declare function fahrenheitToCelsius(temperature: number): number;
 /** Parse percent string (`50%`) to decimal (`0.5`) */
 export declare function parsePercent(percent: string | number): number;
+/** Add second value while maintaining `Date` or `number` type */
+export declare function add(value1: Date | number, value2: number): number | Date;

package/dist/utils/math.js

@@ -55,3 +55,12 @@ export function parsePercent(percent) {
         return Number(percent.replace('%', '')) / 100;
     }
 }
+/** Add second value while maintaining `Date` or `number` type */
+export function add(value1, value2) {
+    if (value1 instanceof Date) {
+        return new Date(value1.getTime() + value2);
+    }
+    else {
+        return value1 + value2;
+    }
+}

package/package.json

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