svelteplot 0.0.1-alpha.9 → 0.1.3-next.12

package/dist/marks/Line.svelte

@@ -1,61 +1,222 @@
-<script>import resolveChannel from "../helpers/resolveChannel.js";
-import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import { line } from "d3-shape";
-import { groupBy } from "underscore";
-import isDataRecord from "../helpers/isDataRecord.js";
-const BaseMark_Line = BaseMark;
-const plot = getContext("svelteplot");
-let {
-  data,
-  x = null,
-  y = null,
-  z = null,
-  fill,
-  stroke,
-  r = 5,
-  sort,
-  ...styleProps
-} = $props();
-let groups = $derived(
-  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, z || fill || stroke))) : [data]
-);
-let sortedGroups = $derived(
-  sort ? groups.sort(
-    (a, b) => resolveChannel("sort", a[0], sort) > resolveChannel("sort", b[0], sort) ? 1 : -1
-  ) : groups
-);
-let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) => plot.yScale(resolveChannel("y", d, y)));
+<!--
+    @component
+    Line mark, useful for line charts
+-->
+<script module lang="ts">
+    import type {
+        CurveName,
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        MarkerOptions,
+        ScaledDataRecord
+    } from '../types.js';
+
+    export type BaseLineMarkProps = {
+        data: DataRecord[];
+        z?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        outlineStroke?: ConstantAccessor<string>;
+        outlineStrokeWidth?: ConstantAccessor<number>;
+        dx?: ConstantAccessor<number>;
+        dy?: ConstantAccessor<number>;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        text?: ConstantAccessor<string>;
+        textFill?: ConstantAccessor<string>;
+        textStroke?: ConstantAccessor<string>;
+        textStartOffset?: ConstantAccessor<string>;
+        textStrokeWidth?: ConstantAccessor<number>;
+        lineClass?: ConstantAccessor<string>;
+    } & MarkerOptions;
 </script>
 
-<BaseMark_Line
-    type="dot"
-    {data}
-    channels={['x', 'y', 'radius', 'color']}
-    {x}
-    {y}
-    {r}
-    {fill}
-    {stroke}
-    {...styleProps}
->
-    <g class="lines">
-        {#each sortedGroups as lineData}
-            <path
-                d={linePath(lineData)}
-                stroke={stroke
-                    ? plot.colorScale(resolveChannel('color', lineData[0], stroke))
-                    : 'currentColor'}
-                fill={fill ? plot.colorScale(resolveChannel('color', lineData[0], fill)) : 'none'}
-                style={getBaseStyles(lineData[0], styleProps)}
-            />
-        {/each}
-    </g>
-</BaseMark_Line>
-
-<style>
-    .lines path {
-        stroke-width: 1.4px;
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import MarkerPath from './helpers/MarkerPath.svelte';
+    import { getContext } from 'svelte';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { line, type CurveFactory } from 'd3-shape';
+    import { geoPath } from 'd3-geo';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { maybeCurve } from '../helpers/curves.js';
+    import { pick } from 'es-toolkit';
+
+    type LineMarkProps = BaseMarkProps & {
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+    } & BaseLineMarkProps;
+
+    import type { RawValue } from '../types.js';
+    import { isValid } from '../helpers/index.js';
+    import { sort } from '../transforms/sort.js';
+    import { recordizeXY } from '../transforms/recordize.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    let {
+        data = [{}],
+        curve = 'auto',
+        tension = 0,
+        text,
+        class: className = null,
+        lineClass = null,
+        ...options
+    }: LineMarkProps = $props();
+
+    const args = $derived(sort(recordizeXY({ data, ...options })));
+
+    function groupIndex(data: ScaledDataRecord[], groupByKey) {
+        if (!groupByKey) return [data];
+        let group = [];
+        const groups = [group];
+        let lastGroupValue;
+        for (const d of data) {
+            const groupValue = resolveProp(groupByKey, d.datum);
+            if (groupValue === lastGroupValue) {
+                group.push(d);
+            } else {
+                if (group.length === 1) {
+                    // just one point makes a bad line, add this one, too
+                    group.push(d);
+                }
+                // new group
+                group = [d];
+                groups.push(group);
+                lastGroupValue = groupValue;
+            }
+        }
+        return groups;
+    }
+
+    const groupByKey = $derived(args.z || args.stroke);
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    type LinePath = (dr: DataRecord[]) => string;
+
+    const linePath: LinePath = $derived(
+        plot.scales.projection && curve === 'auto'
+            ? sphereLine(plot.scales.projection)
+            : callWithProps(line, [], {
+                  curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
+                  x: (d) => d.x,
+                  y: (d) => d.y,
+                  defined: (d) => isValid(d.x) && isValid(d.y)
+              })
+    );
+
+    function sphereLine(projection) {
+        const path = geoPath(projection);
+        return (lineData: ScaledDataRecord[]) => {
+            let line = [];
+            const lines = [line];
+            for (const { x, y } of lineData) {
+                // if x or y is undefined, start a new line segment
+                if (!isValid(x) || !isValid(y)) {
+                    line = [];
+                    lines.push(line);
+                } else {
+                    line.push([x, y]);
+                }
+            }
+            return path({ type: 'MultiLineString', coordinates: lines });
+        };
     }
-</style>
+</script>
+
+<Mark
+    type="line"
+    channels={['x', 'y', 'opacity', 'stroke', 'strokeOpacity']}
+    required={['x', 'y']}
+    {...args}>
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if scaledData.length > 0}
+            <g class={['lines', className]}>
+                {#each groupIndex(scaledData, groupByKey) as lineData, i}
+                    {@const pathString = linePath(lineData)}
+                    {#if pathString}
+                        <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
+                            {#if options.outlineStroke}
+                                {@const [outlineStyle, outlineStyleClass] = resolveStyles(
+                                    plot,
+                                    { ...lineData[0], stroke: options.outlineStroke },
+                                    {
+                                        strokeLinejoin: 'round',
+                                        ...args,
+                                        stroke: options.outlineStroke,
+                                        strokeWidth:
+                                            options.outlineStrokeWidth ||
+                                            (+options.strokeWidth || 1.4) + 2
+                                    },
+                                    'stroke',
+                                    usedScales
+                                )}
+                                <path
+                                    d={pathString}
+                                    style={outlineStyle}
+                                    class={['is-outline', outlineStyleClass]} />
+                            {/if}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                lineData[0],
+                                {
+                                    strokeWidth: 1.4,
+                                    strokeLinejoin: 'round',
+                                    ...args,
+                                    stroke: lineData[0].stroke
+                                },
+                                'stroke',
+                                usedScales
+                            )}
+                            {@const [textStyle, textStyleClass] = resolveStyles(
+                                plot,
+                                lineData[0],
+                                {
+                                    textAnchor: 'middle',
+                                    ...pick(args, [
+                                        'fontSize',
+                                        'fontWeight',
+                                        'fontStyle',
+                                        'textAnchor'
+                                    ]),
+                                    strokeWidth: args.textStrokeWidth
+                                        ? args.textStrokeWidth
+                                        : args.textStroke
+                                          ? 2
+                                          : 0,
+                                    fill: args.textFill || args.stroke,
+                                    stroke: args.textStroke
+                                },
+                                'fill',
+                                usedScales,
+                                true
+                            )}
+                            <MarkerPath
+                                {mark}
+                                scales={plot.scales}
+                                markerStart={args.markerStart}
+                                markerMid={args.markerMid}
+                                markerEnd={args.markerEnd}
+                                marker={args.marker}
+                                strokeWidth={args.strokeWidth}
+                                datum={lineData[0]}
+                                d={pathString}
+                                dInv={text ? linePath(lineData.toReversed()) : null}
+                                color={lineData[0].stroke || 'currentColor'}
+                                {style}
+                                class={styleClass}
+                                text={text ? resolveProp(text, lineData[0]) : null}
+                                startOffset={resolveProp(args.textStartOffset, lineData[0], '50%')}
+                                {textStyle}
+                                {textStyleClass} />
+                        </GroupMultiple>
+                    {/if}
+                {/each}
+            </g>
+        {/if}
+    {/snippet}
+</Mark>

package/dist/marks/Line.svelte.d.ts

@@ -1,15 +1,31 @@
-import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types.js';
-declare const __propDef: {
-    props: LineMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, MarkerOptions } from '../types.js';
+export type BaseLineMarkProps = {
+    data: DataRecord[];
+    z?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    outlineStroke?: ConstantAccessor<string>;
+    outlineStrokeWidth?: ConstantAccessor<number>;
+    dx?: ConstantAccessor<number>;
+    dy?: ConstantAccessor<number>;
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
     };
-    slots: {};
-};
-export type LineProps = typeof __propDef.props;
-export type LineEvents = typeof __propDef.events;
-export type LineSlots = typeof __propDef.slots;
-export default class Line extends SvelteComponent<LineProps, LineEvents, LineSlots> {
-}
-export {};
+    text?: ConstantAccessor<string>;
+    textFill?: ConstantAccessor<string>;
+    textStroke?: ConstantAccessor<string>;
+    textStartOffset?: ConstantAccessor<string>;
+    textStrokeWidth?: ConstantAccessor<number>;
+    lineClass?: ConstantAccessor<string>;
+} & MarkerOptions;
+import { type CurveFactory } from 'd3-shape';
+import type { RawValue } from '../types.js';
+type LineMarkProps = BaseMarkProps & {
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+} & BaseLineMarkProps;
+/** Line mark, useful for line charts */
+declare const Line: import("svelte").Component<LineMarkProps, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/marks/LineX.svelte

@@ -1,10 +1,10 @@
-<script>import Line from "./Line.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import { recordizeX } from '../index.js';
+
+    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+
+    let args = $derived(recordizeX({ data, ...rest }));
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="value"
-    y="index"
-    {...rest}
-/>
+<Line {...args} />

package/dist/marks/LineX.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LineXProps = typeof __propDef.props;
-export type LineXEvents = typeof __propDef.events;
-export type LineXSlots = typeof __propDef.slots;
-export default class LineX extends SvelteComponent<LineXProps, LineXEvents, LineXSlots> {
-}
-export {};
+import { type BaseLineMarkProps } from './Line.svelte';
+declare const LineX: import("svelte").Component<BaseLineMarkProps, {}, "">;
+type LineX = ReturnType<typeof LineX>;
+export default LineX;

package/dist/marks/LineY.svelte

@@ -1,10 +1,9 @@
-<script>import Line from "./Line.svelte";
-let { data, ...rest } = $props();
+<script lang="ts">
+    import Line, { type BaseLineMarkProps } from './Line.svelte';
+    import { recordizeY } from '../index.js';
+
+    let { data = [{}], ...rest }: BaseLineMarkProps = $props();
+    let args = $derived(recordizeY({ data, ...rest }));
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="index"
-    y="value"
-    {...rest}
-/>
+<Line {...args} />

package/dist/marks/LineY.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LineYProps = typeof __propDef.props;
-export type LineYEvents = typeof __propDef.events;
-export type LineYSlots = typeof __propDef.slots;
-export default class LineY extends SvelteComponent<LineYProps, LineYEvents, LineYSlots> {
-}
-export {};
+import { type BaseLineMarkProps } from './Line.svelte';
+declare const LineY: import("svelte").Component<BaseLineMarkProps, {}, "">;
+type LineY = ReturnType<typeof LineY>;
+export default LineY;

package/dist/marks/Link.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        CurveName,
+        MarkerOptions,
+        RawValue,
+        ScaledDataRecord
+    } from '../types.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { maybeData } from '../helpers/index.js';
+    import Mark from '../Mark.svelte';
+    import MarkerPath from './helpers/MarkerPath.svelte';
+    import { replaceChannels } from '../transforms/rename.js';
+    import { line, type CurveFactory } from 'd3-shape';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { maybeCurve } from '../helpers/curves.js';
+    import { geoPath } from 'd3-geo';
+    import { pick } from 'es-toolkit';
+
+    type LinkMarkProps = BaseMarkProps & {
+        data: DataRecord[];
+        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        x1: ChannelAccessor;
+        y1: ChannelAccessor;
+        x2: ChannelAccessor;
+        y2: ChannelAccessor;
+        stroke?: ChannelAccessor;
+        curve?: 'auto' | CurveName | CurveFactory;
+        tension?: number;
+        text: ConstantAccessor<string>;
+        children?: Snippet;
+    } & MarkerOptions;
+
+    let {
+        data = [{}],
+        curve = 'auto',
+        tension = 0,
+        text,
+        class: className = null,
+        ...options
+    }: LinkMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    function isValid(value: RawValue): value is number | Date | string {
+        return value !== null && (typeof value === 'string' || !Number.isNaN(value));
+    }
+
+    const sorted = $derived(
+        options.sort
+            ? maybeData(data).toSorted((a, b) =>
+                  resolveChannel('sort', a, options) > resolveChannel('sort', b, options) ? 1 : -1
+              )
+            : maybeData(data)
+    );
+
+    const args = $derived(
+        replaceChannels(
+            { data: sorted, stroke: 'currentColor', ...options },
+            { y: ['y1', 'y2'], x: ['x1', 'x2'] }
+        )
+    );
+
+    const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
+
+    const linePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(() => {
+        const fn = callWithProps(line, [], {
+            curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
+            x: (d) => d[0],
+            y: (d) => d[1]
+        });
+
+        return (d: ScaledDataRecord, reversed = false) =>
+            fn(
+                reversed
+                    ? [
+                          [d.x2, d.y2],
+                          [d.x1, d.y1]
+                      ]
+                    : [
+                          [d.x1, d.y1],
+                          [d.x2, d.y2]
+                      ]
+            );
+    });
+
+    const sphericalLinePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(
+        () => {
+            const fn = sphereLine(plot.scales.projection);
+            return (d: ScaledDataRecord, reversed = false) => {
+                const x1 = resolveChannel('x1', d.datum, args);
+                const y1 = resolveChannel('y1', d.datum, args);
+                const x2 = resolveChannel('x2', d.datum, args);
+                const y2 = resolveChannel('y2', d.datum, args);
+                return reversed ? fn(x2, y2, x1, y1) : fn(x1, y1, x2, y2);
+            };
+        }
+    );
+    //     sphericalLine
+    //         ?
+
+    //         sphereLine(plot.scales.projection)
+    //         :
+    // );
+
+    function sphereLine(projection) {
+        const path = geoPath(projection);
+        return (x1: number, y1: number, x2: number, y2: number) => {
+            return path({
+                type: 'LineString',
+                coordinates: [
+                    [x1, y1],
+                    [x2, y2]
+                ]
+            });
+        };
+    }
+</script>
+
+<Mark
+    type="link"
+    required={['x1', 'x2', 'y1', 'y2']}
+    channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        <g class={['link', className]} data-use-x={usedScales.x ? 1 : 0}>
+            {#each scaledData as d}
+                {#if d.valid || true}
+                    {@const dx = resolveProp(args.dx, d.datum, 0)}
+                    {@const dy = resolveProp(args.dx, d.datum, 0)}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        d,
+                        { strokeWidth: 1.6, ...args },
+                        'stroke',
+                        usedScales
+                    )}
+                    {@const [textStyle, textStyleClass] = resolveStyles(
+                        plot,
+                        d,
+                        {
+                            textAnchor: 'middle',
+                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle', 'textAnchor']),
+                            fill: args.textFill || args.stroke,
+                            stroke: args.textStroke,
+                            strokeWidth: args.textStrokeWidth
+                        },
+                        'fill',
+                        usedScales
+                    )}
+
+                    <MarkerPath
+                        mark={{ ...mark, options: args }}
+                        scales={plot.scales}
+                        markerStart={args.markerStart}
+                        markerEnd={args.markerEnd}
+                        marker={args.marker}
+                        class={styleClass}
+                        strokeWidth={args.strokeWidth}
+                        datum={d.datum}
+                        color={d.stroke}
+                        d={sphericalLine ? sphericalLinePath(d) : linePath(d)}
+                        dInv={sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)}
+                        {style}
+                        text={text ? resolveProp(text, d.datum) : null}
+                        startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}
+                        {textStyle}
+                        {textStyleClass}
+                        transform={dx || dy ? `translate(${dx}, ${dy})` : null} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>

package/dist/marks/Link.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, CurveName, MarkerOptions, RawValue } from '../types.js';
+import { type CurveFactory } from 'd3-shape';
+type LinkMarkProps = BaseMarkProps & {
+    data: DataRecord[];
+    sort?: ConstantAccessor<RawValue> | {
+        channel: 'stroke' | 'fill';
+    };
+    x1: ChannelAccessor;
+    y1: ChannelAccessor;
+    x2: ChannelAccessor;
+    y2: ChannelAccessor;
+    stroke?: ChannelAccessor;
+    curve?: 'auto' | CurveName | CurveFactory;
+    tension?: number;
+    text: ConstantAccessor<string>;
+    children?: Snippet;
+} & MarkerOptions;
+declare const Link: import("svelte").Component<LinkMarkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;