layerchart 0.44.0 → 0.51.0

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

@@ -0,0 +1,260 @@
+import { SvelteComponentTyped } from "svelte";
+import Points from '../Points.svelte';
+import { type ComponentProps } from 'svelte';
+import Axis from '../Axis.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Spline from '../Spline.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 | number;
+            label?: string;
+            value?: Accessor<TData>;
+            /** Provider series data, else uses chart data (with value/key accessor) */
+            data?: TData[] | undefined;
+            color?: string;
+            props?: Partial<ComponentProps<Spline>>;
+        }[] | 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>>;
+            spline?: Partial<ComponentProps<Spline>>;
+            highlight?: Partial<ComponentProps<Highlight>>;
+            labels?: Partial<ComponentProps<Labels>>;
+            points?: Partial<ComponentProps<Points>>;
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: any;
+        axis: any;
+        'below-marks': any;
+        marks: any;
+        'above-marks': any;
+        highlight: any;
+        tooltip: any;
+    };
+}
+export type LineChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type LineChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type LineChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class LineChart<TData> extends SvelteComponentTyped<LineChartProps<TData>, LineChartEvents<TData>, LineChartSlots<TData>> {
+}
+export {};

package/dist/components/charts/PieChart.svelte

@@ -0,0 +1,146 @@
+<script generics="TData">import {} from 'svelte';
+import { sum } from 'd3-array';
+import { format } from '@layerstack/utils';
+import Arc from '../Arc.svelte';
+import Chart from '../Chart.svelte';
+import Group from '../Group.svelte';
+import Pie from '../Pie.svelte';
+import Svg from '../layout/Svg.svelte';
+import * as Tooltip from '../tooltip/index.js';
+import { accessor, chartDataArray } from '../../utils/common.js';
+export let data = [];
+/** Label accessor */
+export let label = 'label';
+$: labelAccessor = accessor(label);
+/** Value accessor */
+export let value = 'value';
+$: valueAccessor = accessor(value);
+/** Maximum possible value, useful when `data` is single item */
+export let maxValue = undefined;
+export let series = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+/**
+ * Range [min,max] in degrees.  See also startAngle/endAngle
+ */
+export let range = [0, 360];
+/**
+ * Define innerRadius.
+ *   value >= 1: discrete value
+ *   value >  0: percent of `outerRadius`
+ *   value <  0: offset of `outerRadius`
+ *   default: yRange min
+ */
+export let innerRadius = undefined;
+/**
+ * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+ */
+export let outerRadius = undefined;
+export let cornerRadius = 0;
+export let padAngle = 0;
+export let props = {};
+$: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d);
+$: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
+$: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+</script>
+
+<Chart
+  data={chartData}
+  x={value}
+  y={label}
+  c={label}
+  cRange={seriesColors.length
+    ? seriesColors
+    : [
+        'hsl(var(--color-primary))',
+        'hsl(var(--color-secondary))',
+        'hsl(var(--color-info))',
+        'hsl(var(--color-success))',
+        'hsl(var(--color-warning))',
+        'hsl(var(--color-danger))',
+      ]}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:c
+  let:cScale
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
+  <slot {...slotProps}>
+    <Svg center>
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        <Group {...props.group}>
+          {#each series as s, i}
+            {@const singleArc = s.data?.length === 1 || chartData.length === 1}
+            {#if singleArc}
+              {@const d = s.data?.[0] || chartData[0]}
+              <Arc
+                value={valueAccessor(d)}
+                domain={[0, s.maxValue ?? maxValue ?? sum(chartData, valueAccessor)]}
+                {range}
+                {innerRadius}
+                outerRadius={(outerRadius ?? 0) < 0 ? i * (outerRadius ?? 0) : outerRadius}
+                {cornerRadius}
+                {padAngle}
+                fill={s.color ?? cScale(c(d))}
+                track={{ fill: s.color ?? cScale(c(d)), 'fill-opacity': 0.1 }}
+                {tooltip}
+                data={d}
+                {...props.arc}
+              />
+            {:else}
+              <Pie
+                data={s.data}
+                {range}
+                {innerRadius}
+                {outerRadius}
+                {cornerRadius}
+                {padAngle}
+                {...props.pie}
+                let:arcs
+              >
+                {#each arcs as arc}
+                  <Arc
+                    startAngle={arc.startAngle}
+                    endAngle={arc.endAngle}
+                    outerRadius={i * (outerRadius ?? 0)}
+                    {innerRadius}
+                    {cornerRadius}
+                    {padAngle}
+                    fill={cScale(c(arc.data))}
+                    data={arc.data}
+                    {tooltip}
+                    {...props.arc}
+                  />
+                {/each}
+              </Pie>
+            {/if}
+          {/each}
+        </Group>
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.List>
+          <Tooltip.Item
+            label={labelAccessor(data)}
+            value={valueAccessor(data)}
+            color={cScale(c(data))}
+            {format}
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>

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

@@ -0,0 +1,220 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import Arc from '../Arc.svelte';
+import Group from '../Group.svelte';
+import Pie from '../Pie.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;
+    } & {
+        label?: Accessor<TData>;
+        value?: Accessor<TData>;
+        maxValue?: number | undefined;
+        range?: number[];
+        innerRadius?: number | undefined;
+        outerRadius?: number | undefined;
+        cornerRadius?: number;
+        padAngle?: number;
+        props?: {
+            pie?: Partial<ComponentProps<Pie>>;
+            group?: Partial<ComponentProps<Group>>;
+            arc?: Partial<ComponentProps<Arc>>;
+        } | undefined;
+        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>>;
+        }[] | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: any;
+        'below-marks': any;
+        marks: any;
+        'above-marks': any;
+        tooltip: any;
+    };
+}
+export type PieChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type PieChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type PieChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class PieChart<TData> extends SvelteComponentTyped<PieChartProps<TData>, PieChartEvents<TData>, PieChartSlots<TData>> {
+}
+export {};