layerchart 0.44.0 → 0.51.0

package/dist/components/charts/BarChart.svelte

@@ -0,0 +1,207 @@
+<script generics="TData">import {} from 'svelte';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { stack } from 'd3-shape';
+import { sum } from 'd3-array';
+import { format } from '@layerstack/utils';
+import Axis from '../Axis.svelte';
+import Bars from '../Bars.svelte';
+import Chart from '../Chart.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.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;
+export let orientation = 'vertical';
+$: isVertical = orientation === 'vertical';
+export let series = [
+    {
+        key: 'default',
+        value: orientation === 'vertical' ? y : x,
+        color: 'hsl(var(--color-primary))',
+    },
+];
+/** Determine how to layout series.  Overlap (default), stack, or group side by side */
+export let seriesLayout = 'overlap';
+$: stackSeries = seriesLayout === 'stack';
+$: groupSeries = seriesLayout === 'group';
+export let axis = true;
+export let labels = false;
+/** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
+export let bandPadding = 0.4;
+/** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
+export let groupPadding = 0;
+$: xScale = isVertical ? scaleBand().padding(bandPadding) : scaleLinear();
+$: xBaseline = isVertical ? undefined : 0;
+$: yScale = isVertical ? scaleLinear() : scaleBand().padding(bandPadding);
+$: yBaseline = isVertical ? 0 : undefined;
+let x1Scale;
+let x1Domain;
+let x1Range;
+let y1Scale;
+let y1Domain;
+let y1Range;
+$: if (seriesLayout === 'group') {
+    if (isVertical) {
+        x1Scale = scaleBand().padding(groupPadding);
+        x1Domain = series.map((s) => s.key);
+        x1Range = ({ xScale }) => [0, xScale.bandwidth?.()];
+    }
+    else {
+        y1Scale = scaleBand().padding(groupPadding);
+        y1Domain = series.map((s) => s.key);
+        y1Range = ({ yScale }) => [0, yScale.bandwidth?.()];
+    }
+}
+export let props = {};
+$: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => {
+    return { 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]),
+        };
+    });
+}
+</script>
+
+<Chart
+  data={chartData}
+  x={x ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  {xScale}
+  {xBaseline}
+  xNice={orientation === 'horizontal'}
+  {x1Scale}
+  {x1Domain}
+  {x1Range}
+  y={y ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  {yScale}
+  {yBaseline}
+  yNice={orientation === 'vertical'}
+  {y1Scale}
+  {y1Domain}
+  {y1Range}
+  padding={axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'band' }}
+  {...$$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>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement="left"
+            grid={isVertical}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement="bottom"
+            grid={!isVertical}
+            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}
+          <Bars
+            data={s.data}
+            x={!isVertical
+              ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+              : undefined}
+            y={isVertical
+              ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+              : undefined}
+            x1={isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
+            y1={!isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
+            radius={4}
+            strokeWidth={1}
+            fill={s.color}
+            {...props.bars}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      <slot name="highlight" {...slotProps}>
+        <Highlight area {...props.highlight} />
+      </slot>
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(isVertical ? x(data) : y(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 || groupSeries}
+            <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/BarChart.svelte.d.ts

@@ -0,0 +1,241 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import Axis from '../Axis.svelte';
+import Bars from '../Bars.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.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<Bars>>;
+        }[] | undefined;
+        seriesLayout?: "overlap" | "stack" | "group";
+        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;
+        };
+        orientation?: "horizontal" | "vertical";
+        bandPadding?: number;
+        props?: {
+            xAxis?: Partial<ComponentProps<Axis>>;
+            yAxis?: Partial<ComponentProps<Axis>>;
+            bars?: Partial<ComponentProps<Bars>>;
+            highlight?: Partial<ComponentProps<Highlight>>;
+            labels?: Partial<ComponentProps<Labels>>;
+        } | 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 BarChartProps<TData> = ReturnType<__sveltets_Render<TData>['props']>;
+export type BarChartEvents<TData> = ReturnType<__sveltets_Render<TData>['events']>;
+export type BarChartSlots<TData> = ReturnType<__sveltets_Render<TData>['slots']>;
+export default class BarChart<TData> extends SvelteComponentTyped<BarChartProps<TData>, BarChartEvents<TData>, BarChartSlots<TData>> {
+}
+export {};

package/dist/components/charts/LineChart.svelte

@@ -0,0 +1,138 @@
+<script generics="TData">import Points from '../Points.svelte';
+import {} from 'svelte';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { format } from '@layerstack/utils';
+import Axis from '../Axis.svelte';
+import Chart from '../Chart.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Spline from '../Spline.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))' }];
+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));
+// 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 ?? 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}
+          <Spline
+            data={s.data}
+            y={s.value ?? (s.data ? undefined : s.key)}
+            class="stroke-2"
+            stroke={s.color}
+            {...props.spline}
+            {...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}
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+
+      <slot name="highlight" {...slotProps}>
+        {#each series as s, i}
+          <Highlight
+            data={s.data}
+            y={s.value ?? s.key}
+            points={{ fill: s.color }}
+            lines={i === 0}
+            {...props.highlight}
+          />
+        {/each}
+      </slot>
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          {#each series 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}
+            />
+          {/each}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>