layerchart 0.44.0 → 0.51.0

package/dist/components/Voronoi.svelte

@@ -3,11 +3,12 @@ import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
 // @ts-expect-error
 import { geoVoronoi } from 'd3-geo-voronoi';
-import { cls } from 'svelte-ux';
+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 } = chartContext();
+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;
@@ -19,7 +20,15 @@ $: points = (data ?? $flatData).map((d) => {
     const yValue = $geo ? $yContext(d) : $yGet(d);
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
-    const point = [x, y];
+    let point;
+    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];
+    }
     // @ts-expect-error
     point.data = d;
     return point;
@@ -36,7 +45,8 @@ $: boundHeight = Math.max($height, 0);
       <GeoPath
         geojson={feature}
         class={cls('fill-transparent', classes.path)}
-        on:pointerenter
+        on:pointerenter={(e) =>
+          dispatch('pointerenter', { event: e, data: feature.properties.site.data, feature })}
         on:pointermove={(e) =>
           dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
         on:pointerleave
@@ -56,7 +66,7 @@ $: boundHeight = Math.max($height, 0);
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}
-        on:pointerenter
+        on:pointerenter={(e) => dispatch('pointerenter', { event: e, data: point.data, point })}
         on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
         on:pointerleave
         on:touchmove={(e) => {

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

@@ -10,7 +10,6 @@ declare const __propDef: {
         } | undefined;
     };
     events: {
-        pointerenter: PointerEvent;
         pointerleave: PointerEvent;
         pointerdown: PointerEvent;
         click: CustomEvent<{
@@ -18,6 +17,12 @@ declare const __propDef: {
             point?: [number, number];
             feature?: GeoPermissibleObjects;
         }>;
+        pointerenter: CustomEvent<{
+            event: PointerEvent;
+            data: any;
+            point?: [number, number];
+            feature?: GeoPermissibleObjects;
+        }>;
         pointermove: CustomEvent<{
             event: PointerEvent;
             data: any;

package/dist/components/charts/AreaChart.svelte

@@ -0,0 +1,182 @@
+<script generics="TData">import {} from 'svelte';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { stack } 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 Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Points from '../Points.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))' }];
+/** Determine how to layout series.  Overlap (default) or stack */
+export let seriesLayout = 'overlap';
+$: stackSeries = seriesLayout === 'stack';
+export let axis = true;
+export let labels = false;
+export let points = false;
+export let props = {};
+$: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d);
+$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
+$: if (stackSeries) {
+    const seriesKeys = series.map((s) => s.key);
+    const stackData = stack().keys(seriesKeys)(chartDataArray(data));
+    chartData = chartData.map((d, 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();
+</script>
+
+<Chart
+  data={chartData}
+  {x}
+  {xScale}
+  y={y ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  yBaseline={0}
+  yNice
+  {radial}
+  padding={radial || axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'bisect-x' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  <slot {...slotProps}>
+    <Svg center={radial}>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement={radial ? 'radius' : 'left'}
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement={radial ? 'angle' : 'bottom'}
+            grid={radial}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <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)}
+            line={{ class: 'stroke-2', stroke: s.color }}
+            fill={s.color}
+            fill-opacity={0.3}
+            {...props.area}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      {#if points}
+        {#each series as s}
+          <Points
+            data={s.data}
+            fill={s.color}
+            class="stroke-surface-200"
+            {...props.points}
+            {...typeof points === 'object' ? points : null}
+          />
+        {/each}
+      {/if}
+
+      <slot name="highlight" {...slotProps}>
+        {#each series as s, i}
+          <Highlight
+            y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? s.key)}
+            points={{ fill: s.color }}
+            lines={i == 0}
+            {...props.highlight}
+          />
+        {/each}
+      </slot>
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          <!-- 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)}
+            <Tooltip.Item
+              label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
+              value={valueAccessor(data)}
+              color={s.color}
+              {format}
+              valueAlign="right"
+            />
+          {/each}
+
+          {#if stackSeries}
+            <Tooltip.Separator />
+
+            <Tooltip.Item
+              label="total"
+              value={sum(series, (s) => {
+                const valueAccessor = accessor(s.value ?? s.key);
+                return valueAccessor(data);
+              })}
+              format="integer"
+              valueAlign="right"
+            />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>

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

@@ -0,0 +1,261 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import Area from '../Area.svelte';
+import Axis from '../Axis.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Points from '../Points.svelte';
+import { type Accessor } from '../../utils/common.js';
+declare class __sveltets_Render<TData> {
+    props(): {
+        ssr?: boolean;
+        pointerEvents?: boolean;
+        position?: string;
+        percentRange?: boolean;
+        width?: number;
+        height?: number;
+        containerWidth?: number;
+        containerHeight?: number;
+        element?: HTMLDivElement;
+        data?: import("d3-sankey").SankeyGraph<any, any> | import("d3-hierarchy").HierarchyNode<TData> | TData[] | undefined;
+        flatData?: any[];
+        x?: Accessor<TData>;
+        y?: Accessor<TData>;
+        z?: Accessor<TData>;
+        r?: Accessor<TData>;
+        x1?: Accessor<TData>;
+        y1?: Accessor<TData>;
+        c?: Accessor<TData>;
+        xDomain?: import("../../utils/scales").DomainType;
+        yDomain?: import("../../utils/scales").DomainType;
+        zDomain?: import("../../utils/scales").DomainType;
+        rDomain?: import("../../utils/scales").DomainType;
+        x1Domain?: import("../../utils/scales").DomainType;
+        y1Domain?: import("../../utils/scales").DomainType;
+        cDomain?: import("../../utils/scales").DomainType;
+        xNice?: boolean | number;
+        yNice?: boolean | number;
+        zNice?: boolean | number;
+        rNice?: boolean | number;
+        xPadding?: [number, number];
+        yPadding?: [number, number];
+        zPadding?: [number, number];
+        rPadding?: [number, number];
+        xScale?: import("../../utils/scales").AnyScale;
+        yScale?: import("../../utils/scales").AnyScale;
+        zScale?: import("../../utils/scales").AnyScale;
+        rScale?: import("../../utils/scales").AnyScale;
+        x1Scale?: import("../../utils/scales").AnyScale;
+        y1Scale?: import("../../utils/scales").AnyScale;
+        cScale?: import("../../utils/scales").AnyScale;
+        xRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        yRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        zRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        rRange?: string[] | number[] | ((args: {
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        x1Range?: string[] | number[] | ((args: {
+            xScale: import("../../utils/scales").AnyScale;
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        y1Range?: string[] | number[] | ((args: {
+            yScale: import("../../utils/scales").AnyScale;
+            width: number;
+            height: number;
+        }) => number[] | string[]) | undefined;
+        cRange?: string[];
+        xReverse?: boolean;
+        yReverse?: boolean;
+        zReverse?: boolean;
+        rReverse?: boolean;
+        xDomainSort?: boolean;
+        yDomainSort?: boolean;
+        zDomainSort?: boolean;
+        rDomainSort?: boolean;
+        padding?: {
+            top?: Number;
+            right?: Number;
+            bottom?: Number;
+            left?: Number;
+        } | undefined;
+        extents?: {
+            x?: [min: Number, max: Number];
+            y?: [min: Number, max: Number];
+            r?: [min: Number, max: Number];
+            z?: [min: Number, max: Number];
+        } | undefined;
+        custom?: Record<string, any>;
+        debug?: boolean;
+        verbose?: boolean;
+        xBaseline?: number | null;
+        yBaseline?: number | null;
+        radial?: boolean;
+        geo?: Partial<{
+            projection?: (() => import("d3-geo").GeoProjection) | undefined;
+            fitGeojson?: import("d3-geo").GeoPermissibleObjects | undefined;
+            fixedAspectRatio?: number | undefined;
+            clipAngle?: number | undefined;
+            clipExtent?: [[number, number], [number, number]] | undefined;
+            rotate?: {
+                yaw: number;
+                pitch: number;
+                roll: number;
+            } | undefined;
+            scale?: number | undefined;
+            translate?: [number, number] | undefined;
+            center?: [number, number] | undefined;
+            applyTransform?: ("scale" | "translate" | "rotate")[];
+            reflectX?: boolean | undefined;
+            reflectY?: boolean | undefined;
+            geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
+        }> | undefined;
+        tooltip?: boolean | Partial<{
+            mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+            findTooltipData?: "closest" | "left" | "right";
+            raiseTarget?: boolean;
+            radius?: number;
+            debug?: boolean;
+            onClick?: ({ data }: {
+                data: any;
+            }) => any;
+        }> | undefined;
+        transform?: Partial<{
+            mode?: "canvas" | "manual" | "none";
+            translateOnScale?: boolean;
+            spring?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["spring"];
+            tweened?: boolean | Parameters<typeof import("../../stores/motionStore").motionStore>[1]["tweened"];
+            processTranslate?: (x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+                x: number;
+                y: number;
+            };
+            disablePointer?: boolean;
+            initialScrollMode?: "none" | "scale" | "translate";
+            clickDistance?: number;
+            initialTranslate?: {
+                x: number;
+                y: number;
+            } | undefined;
+            translate?: import("svelte/motion").Spring<{
+                x: number;
+                y: number;
+            }> | import("svelte/motion").Tweened<{
+                x: number;
+                y: number;
+            }> | import("svelte/store").Writable<{
+                x: number;
+                y: number;
+            }>;
+            initialScale?: number | undefined;
+            scale?: import("svelte/store").Writable<number> | import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number>;
+            setScrollMode?: (mode: "none" | "scale" | "translate") => void;
+            reset?: () => void;
+            zoomIn?: () => void;
+            zoomOut?: () => void;
+            translateCenter?: () => void;
+            zoomTo?: (center: {
+                x: number;
+                y: number;
+            }, rect?: {
+                width: number;
+                height: number;
+            }) => void;
+            setTranslate?: (point: {
+                x: number;
+                y: number;
+            }, options?: import("../../stores/motionStore").MotionOptions) => void;
+            setScale?: (value: number, options?: import("../../stores/motionStore").MotionOptions) => void;
+        }> | undefined;
+        transformContext?: import("..").TransformContext;
+    } & {
+        series?: {
+            key: string;
+            label?: string;
+            value?: Accessor<TData>;
+            /** Provider series data, else uses chart data (with value/key accessor) */
+            data?: TData[] | undefined;
+            color?: string;
+            props?: Partial<ComponentProps<Area>>;
+        }[] | undefined;
+        labels?: boolean | {
+            [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";
+            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">;
+            ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
+            tickLength?: number;
+            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;
+            scale?: any;
+        };
+        points?: boolean | {
+            [x: string]: any;
+            data?: any;
+            r?: number | undefined;
+            offsetX?: number | ((value: number, context: any) => number) | undefined;
+            offsetY?: number | ((value: number, context: any) => number) | undefined;
+            links?: (boolean | Partial<ComponentProps<import("..").Link>>) | undefined;
+            fill?: string | undefined;
+            stroke?: string | undefined;
+            strokeWidth?: number | string | undefined;
+            render?: ((ctx: CanvasRenderingContext2D, points: {
+                x: number;
+                y: number;
+                r: number;
+                xValue: any;
+                yValue: any;
+                data: any;
+            }[]) => any) | undefined;
+            class?: string | undefined;
+        };
+        props?: {
+            xAxis?: Partial<ComponentProps<Axis>>;
+            yAxis?: Partial<ComponentProps<Axis>>;
+            area?: Partial<ComponentProps<Area>>;
+            points?: Partial<ComponentProps<Points>>;
+            highlight?: Partial<ComponentProps<Highlight>>;
+            labels?: Partial<ComponentProps<Labels>>;
+        } | undefined;
+        seriesLayout?: "overlap" | "stack";
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: any;
+        axis: any;
+        'below-marks': any;
+        marks: any;
+        'above-marks': any;
+        highlight: any;
+        tooltip: any;
+    };
+}
+export type AreaChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type AreaChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type AreaChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class AreaChart<TData> extends SvelteComponentTyped<AreaChartProps<TData>, AreaChartEvents<TData>, AreaChartSlots<TData>> {
+}
+export {};