layerchart 0.54.0 → 0.55.0

package/dist/components/Treemap.svelte

@@ -1,60 +1,88 @@
-<script>import { treemap as d3treemap, treemapBinary, treemapDice, treemapResquarify, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-import { aspectTile } from '../utils/treemap.js';
-const { data, width, height } = chartContext();
-export let tile = treemapSquarify;
-export let padding = 0;
-export let paddingInner = 0;
-export let paddingOuter = 0;
-export let paddingTop = 0;
-export let paddingBottom = 0;
-export let paddingLeft = undefined;
-export let paddingRight = undefined;
-export let selected = null;
-$: tileFunc =
+<script lang="ts">
+  import {
+    treemap as d3treemap,
+    treemapBinary,
+    treemapDice,
+    treemapResquarify,
+    treemapSlice,
+    treemapSliceDice,
+    treemapSquarify,
+    type HierarchyNode,
+    type HierarchyRectangularNode,
+    type TreemapLayout,
+  } from 'd3-hierarchy';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { aspectTile } from '../utils/treemap.js';
+
+  const { data, width, height } = chartContext();
+
+  export let tile:
+    | typeof treemapSquarify
+    | 'binary'
+    | 'squarify'
+    | 'resquarify'
+    | 'dice'
+    | 'slice'
+    | 'sliceDice' = treemapSquarify;
+  export let padding = 0;
+  export let paddingInner = 0;
+  export let paddingOuter = 0;
+  export let paddingTop = 0;
+  export let paddingBottom = 0;
+  export let paddingLeft: number | undefined = undefined;
+  export let paddingRight: number | undefined = undefined;
+
+  export let selected: HierarchyRectangularNode<any> | null | undefined = null;
+
+  $: tileFunc =
     tile === 'squarify'
-        ? treemapSquarify
-        : tile === 'resquarify'
-            ? treemapResquarify
-            : tile === 'binary'
-                ? treemapBinary
-                : tile === 'dice'
-                    ? treemapDice
-                    : tile === 'slice'
-                        ? treemapSlice
-                        : tile === 'sliceDice'
-                            ? treemapSliceDice
-                            : tile;
-let treemap;
-$: {
+      ? treemapSquarify
+      : tile === 'resquarify'
+        ? treemapResquarify
+        : tile === 'binary'
+          ? treemapBinary
+          : tile === 'dice'
+            ? treemapDice
+            : tile === 'slice'
+              ? treemapSlice
+              : tile === 'sliceDice'
+                ? treemapSliceDice
+                : tile;
+
+  let treemap: TreemapLayout<any>;
+  $: {
     treemap = d3treemap()
-        .size([$width, $height])
-        .tile(aspectTile(tileFunc, $width, $height));
+      .size([$width, $height])
+      .tile(aspectTile(tileFunc, $width, $height));
+
     if (padding) {
-        treemap.padding(padding);
+      treemap.padding(padding);
     }
     if (paddingInner) {
-        treemap.paddingInner(paddingInner);
+      treemap.paddingInner(paddingInner);
     }
     if (paddingOuter) {
-        treemap.paddingOuter(paddingOuter);
+      treemap.paddingOuter(paddingOuter);
     }
     if (paddingTop) {
-        treemap.paddingTop(paddingTop);
+      treemap.paddingTop(paddingTop);
     }
     if (paddingBottom) {
-        treemap.paddingBottom(paddingBottom);
+      treemap.paddingBottom(paddingBottom);
     }
     if (paddingLeft) {
-        treemap.paddingLeft(paddingLeft);
+      treemap.paddingLeft(paddingLeft);
     }
     if (paddingRight) {
-        treemap.paddingRight(paddingRight);
+      treemap.paddingRight(paddingRight);
     }
-}
-$: treemapData = treemap($data);
-// TODO: Remove selected
-$: selected = treemapData; // set initial selection
+  }
+
+  $: treemapData = treemap($data as HierarchyNode<any>);
+
+  // TODO: Remove selected
+  $: selected = treemapData; // set initial selection
 </script>
 
 <slot nodes={treemapData.descendants()} />

package/dist/components/Voronoi.svelte

@@ -1,41 +1,68 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { min } from 'd3-array';
-import { Delaunay } from 'd3-delaunay';
-// @ts-expect-error
-import { geoVoronoi } from 'd3-geo-voronoi';
-import { pointRadial } from 'd3-shape';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import GeoPath from './GeoPath.svelte';
-import { geoContext } from './GeoContext.svelte';
-const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
-const geo = geoContext();
-/** Override data instead of using context */
-export let data = undefined;
-export let classes = {};
-const dispatch = createEventDispatcher();
-$: points = (data ?? $flatData).map((d) => {
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { min } from 'd3-array';
+  import { Delaunay } from 'd3-delaunay';
+  import type { GeoPermissibleObjects } from 'd3-geo';
+  // @ts-expect-error
+  import { geoVoronoi } from 'd3-geo-voronoi';
+  import { pointRadial } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import GeoPath from './GeoPath.svelte';
+  import { geoContext, type GeoContext } from './GeoContext.svelte';
+
+  const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
+  const geo = geoContext() as GeoContext | undefined;
+
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
+  export let classes: {
+    root?: string;
+    path?: string;
+  } = {};
+
+  const dispatch = createEventDispatcher<{
+    click: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects };
+    pointerenter: {
+      event: PointerEvent;
+      data: any;
+      point?: [number, number];
+      feature?: GeoPermissibleObjects;
+    };
+    pointermove: {
+      event: PointerEvent;
+      data: any;
+      point?: [number, number];
+      feature?: GeoPermissibleObjects;
+    };
+  }>();
+
+  $: points = (data ?? $flatData).map((d: any) => {
     // geo voronoi needs raw latitude/longtude, not mapped to range (chart dimensions)
     const xValue = $geo ? $xContext(d) : $xGet(d);
     const yValue = $geo ? $yContext(d) : $yGet(d);
+
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
-    let point;
+
+    let point: [number, number];
     if ($radial) {
-        const radialPoint = pointRadial(x, y);
-        // Assume radial is also centered
-        point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
-    }
-    else {
-        point = [x, y];
+      const radialPoint = pointRadial(x, y);
+      // Assume radial is also centered
+      point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
+    } else {
+      point = [x, y];
     }
     // @ts-expect-error
     point.data = d;
     return point;
-});
-// Width and/or height can sometimes be negative (when loading data remotely and updately)
-$: boundWidth = Math.max($width, 0);
-$: boundHeight = Math.max($height, 0);
+  });
+
+  // Width and/or height can sometimes be negative (when loading data remotely and updately)
+  $: boundWidth = Math.max($width, 0);
+  $: boundHeight = Math.max($height, 0);
 </script>
 
 <g {...$$restProps} class={cls(classes.root, $$props.class)}>

package/dist/components/charts/AreaChart.svelte

@@ -1,91 +1,142 @@
-<script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
-import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
-import { sum } from 'd3-array';
-import { format } from '@layerstack/utils';
-import Area from '../Area.svelte';
-import Axis from '../Axis.svelte';
-import Chart from '../Chart.svelte';
-import Grid from '../Grid.svelte';
-import Highlight from '../Highlight.svelte';
-import Labels from '../Labels.svelte';
-import Legend from '../Legend.svelte';
-import Line from '../Line.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';
-export let data = [];
-export let x = undefined;
-export let y = undefined;
-/** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
-export let series = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
-$: isDefaultSeries = series.length === 1 && series[0].key === 'default';
-/** Determine how to layout series.  Overlap (default) or stack */
-export let seriesLayout = 'overlap';
-$: stackSeries = seriesLayout.startsWith('stack');
-export let axis = true;
-export let grid = true;
-export let rule = true;
-export let labels = false;
-export let legend = false;
-export let points = false;
-export let props = {};
-$: allSeriesData = series
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
+  import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Area from '../Area.svelte';
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Grid from '../Grid.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Legend from '../Legend.svelte';
+  import Line from '../Line.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, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    axis?: typeof axis;
+    grid?: typeof grid;
+    labels?: typeof labels;
+    legend?: typeof legend;
+    points?: typeof points;
+    props?: typeof props;
+    rule?: typeof rule;
+    series?: typeof series;
+    seriesLayout?: typeof seriesLayout;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
+  export let series: {
+    key: string;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Area>>;
+  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
+
+  /** Determine how to layout series.  Overlap (default) or stack */
+  export let seriesLayout: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging' = 'overlap';
+  $: stackSeries = seriesLayout.startsWith('stack');
+
+  export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let grid: ComponentProps<Grid> | boolean = true;
+  export let rule: ComponentProps<Rule> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let legend: ComponentProps<Legend> | boolean = false;
+  export let points: ComponentProps<Points> | boolean = false;
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    grid?: Partial<ComponentProps<Grid>>;
+    rule?: Partial<ComponentProps<Rule>>;
+    area?: Partial<ComponentProps<Area>>;
+    line?: Partial<ComponentProps<Line>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    points?: Partial<ComponentProps<Points>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+  } = {};
+
+  $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-    .filter((d) => d);
-$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
-$: if (stackSeries) {
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  $: if (stackSeries) {
     const seriesKeys = series.map((s) => s.key);
-    const offset = seriesLayout === 'stackExpand'
+    const offset =
+      seriesLayout === 'stackExpand'
         ? stackOffsetExpand
         : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
+          ? stackOffsetDiverging
+          : stackOffsetNone;
     const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-        const s = series.find((d) => d.key === key);
-        return accessor(s.value ?? s.key)(d);
-    })
-        .offset(offset)(chartDataArray(data));
+      .keys(seriesKeys)
+      .value((d, key) => {
+        const s = series.find((d) => d.key === key)!;
+        return accessor(s.value ?? s.key)(d as any);
+      })
+      .offset(offset)(chartDataArray(data)) as any[];
+
     chartData = chartData.map((d, i) => {
-        return {
-            ...d,
-            stackData: stackData.map((sd) => sd[i]),
-        };
+      return {
+        ...d,
+        stackData: stackData.map((sd) => sd[i]),
+      };
     });
-}
-// Default xScale based on first data's `x` value
-$: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
-function getAreaProps(s, i) {
+  }
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+
+  function getAreaProps(s: (typeof series)[number], i: number) {
     const lineProps = {
-        ...props.line,
-        ...(typeof props.area?.line === 'object' ? props.area.line : null),
-        ...(typeof s.props?.line === 'object' ? s.props.line : null),
+      ...props.line,
+      ...(typeof props.area?.line === 'object' ? props.area.line : null),
+      ...(typeof s.props?.line === 'object' ? s.props.line : null),
     };
-    const areaProps = {
-        data: s.data,
-        y0: stackSeries ? (d) => d.stackData[i][0] : Array.isArray(s.value) ? s.value[0] : undefined,
-        y1: stackSeries
-            ? (d) => d.stackData[i][1]
-            : Array.isArray(s.value)
-                ? s.value[1]
-                : (s.value ?? s.key),
-        fill: s.color,
-        'fill-opacity': 0.3,
-        ...props.area,
-        ...s.props,
-        line: {
-            class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
-            stroke: s.color,
-            ...lineProps,
-        },
+
+    const areaProps: ComponentProps<Area> = {
+      data: s.data,
+      y0: stackSeries ? (d) => d.stackData[i][0] : Array.isArray(s.value) ? s.value[0] : undefined,
+      y1: stackSeries
+        ? (d) => d.stackData[i][1]
+        : Array.isArray(s.value)
+          ? s.value[1]
+          : (s.value ?? s.key),
+      fill: s.color,
+      'fill-opacity': 0.3,
+      ...props.area,
+      ...s.props,
+      line: {
+        class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
+        stroke: s.color,
+        ...lineProps,
+      },
     };
+
     return areaProps;
-}
+  }
 </script>
 
 <Chart
@@ -141,6 +192,16 @@ function getAreaProps(s, i) {
         {/if}
       </slot>
 
+      <slot name="belowMarks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Area {...getAreaProps(s, i)} />
+        {/each}
+      </slot>
+
+      <slot name="aboveMarks" {...slotProps} />
+
       <slot name="axis" {...slotProps}>
         {#if axis}
           {#if axis !== 'x'}
@@ -173,16 +234,6 @@ function getAreaProps(s, i) {
         {/if}
       </slot>
 
-      <slot name="below-marks" {...slotProps} />
-
-      <slot name="marks" {...slotProps}>
-        {#each series as s, i}
-          <Area {...getAreaProps(s, i)} />
-        {/each}
-      </slot>
-
-      <slot name="above-marks" {...slotProps} />
-
       {#if points}
         {#each series as s}
           <Points

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

@@ -254,7 +254,7 @@ declare class __sveltets_Render<TData> {
             tickValues?: any[] | undefined;
             tickFontSize?: number | undefined;
             tickLength?: number | undefined;
-            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: ("horizontal" | "vertical") | undefined;
             variant?: ("ramp" | "swatches") | undefined;
             classes?: {
@@ -315,10 +315,10 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: any;
         grid: any;
-        axis: any;
-        'below-marks': any;
+        belowMarks: any;
         marks: any;
-        'above-marks': any;
+        aboveMarks: any;
+        axis: any;
         highlight: any;
         legend: any;
         tooltip: any;