svelteplot 0.0.1-alpha.8 → 0.1.3-next.11

package/dist/marks/GridX.svelte

@@ -1,42 +1,73 @@
-<script>import { getContext } from "svelte";
-import { get } from "underscore";
-import BaseMark from "./BaseMark.svelte";
-import resolveChannel from "../helpers/resolveChannel.js";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-const BaseMark_GridX = BaseMark;
-const plot = getContext("svelteplot");
-let {
-  ticks = [],
-  y1 = null,
-  y2 = null,
-  automatic = false,
-  ...styleProps
-} = $props();
-let autoTickCount = $derived(plot.plotWidth / get(plot, "options.x.tickSpacing", 80));
-let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.x.ticks", plot.xScale.ticks(autoTickCount))
-);
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import Mark from '../Mark.svelte';
+    import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
+    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { autoTicks } from '../helpers/autoTicks.js';
+    import { getUsedScales } from '../helpers/scales.js';
+    import { testFilter } from '../helpers/index.js';
+
+    type GrixXMarkProps = BaseMarkProps & {
+        data?: RawValue[];
+        automatic?: boolean;
+    };
+
+    let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    let autoTickCount = $derived(
+        Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
+    );
+
+    let ticks: RawValue[] = $derived(
+        data.length > 0
+            ? // use custom tick values if user passed any as prop
+              data
+            : // use custom scale tick values if user passed any as plot scale option
+              autoTicks(
+                  plot.scales.x.type,
+                  plot.options.x.ticks,
+                  plot.options.x.interval,
+                  plot.scales.x.domain,
+                  plot.scales.x.fn,
+                  autoTickCount
+              )
+    );
 </script>
 
-<BaseMark_GridX type="grid-x" data={ticks} channels={['x']} {y1} {y2} {automatic}>
-    <g class="grid-x">
-        {#each autoTicks as tick, t}
-            <g class="x-tick" transform="translate({plot.xScale(tick)},{plot.margins.top})">
-                <line
-                    class="grid"
-                    style={getBaseStyles(tick, styleProps)}
-                    y1={y1 ? plot.yScale(resolveChannel('y', tick, y1)) : 0}
-                    y2={y2
-                        ? plot.yScale(resolveChannel('y', tick, y2))
-                        : plot.height - plot.margins.top - plot.margins.bottom}
-                />
-            </g>
-        {/each}
-    </g>
-</BaseMark_GridX>
+<Mark
+    type="gridX"
+    data={data.length ? data.map((tick) => ({ __x: tick })) : []}
+    channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
+    {...{ ...options, x: '__x' }}
+    {automatic}>
+    {#snippet children({ usedScales })}
+        <g class="grid-x">
+            {#each ticks as tick}
+                {#if testFilter(tick, options)}
+                    {@const x =
+                        plot.scales.x.fn(tick) +
+                        (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
+                    {@const y1_ = resolveChannel('y1', tick, options)}
+                    {@const y2_ = resolveChannel('y2', tick, options)}
+                    {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
+                    {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
+                    <line
+                        transform="translate({x},{plot.options.marginTop})"
+                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {y1}
+                        {y2} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
 
 <style>
-    .x-tick line.grid {
-        stroke: #d9d9d9;
+    line {
+        stroke: currentColor;
+        stroke-opacity: 0.2;
     }
 </style>

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-import type { GridOptions } from '../types.js';
-declare const __propDef: {
-    props: Partial<import("../types.js").MarkProps> & GridOptions & {
-        y1?: import("../types.js").ChannelAccessor | undefined;
-        y2?: import("../types.js").ChannelAccessor | undefined;
-        automatic?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { BaseMarkProps, RawValue } from '../types.js';
+type GrixXMarkProps = BaseMarkProps & {
+    data?: RawValue[];
+    automatic?: boolean;
 };
-export type GridXProps = typeof __propDef.props;
-export type GridXEvents = typeof __propDef.events;
-export type GridXSlots = typeof __propDef.slots;
-export default class GridX extends SvelteComponent<GridXProps, GridXEvents, GridXSlots> {
-}
-export {};
+declare const GridX: import("svelte").Component<GrixXMarkProps, {}, "">;
+type GridX = ReturnType<typeof GridX>;
+export default GridX;

package/dist/marks/GridY.svelte

@@ -1,31 +1,70 @@
-<script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-import { get } from "underscore";
-const plot = getContext("svelteplot");
-let { ticks = [], automatic = false, ...styleProps } = $props();
-let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
-let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
-);
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import Mark from '../Mark.svelte';
+    import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
+    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { autoTicks } from '../helpers/autoTicks.js';
+    import { getUsedScales } from '../helpers/scales.js';
+    import { testFilter } from '../helpers/index.js';
+
+    type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
+
+    let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    let autoTickCount = $derived(
+        Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
+    );
+
+    let ticks: RawValue[] = $derived(
+        data.length > 0
+            ? // use custom tick values if user passed any as prop
+              data
+            : // use custom scale tick values if user passed any as plot scale option
+              autoTicks(
+                  plot.scales.y.type,
+                  plot.options.y.ticks,
+                  plot.options.y.interval,
+                  plot.scales.y.domain,
+                  plot.scales.y.fn,
+                  autoTickCount
+              )
+    );
 </script>
 
-<BaseMark type="grid-y" data={ticks} channels={['y']} {automatic}>
-    <g class="grid-y">
-        {#each autoTicks as tick}
-            <g class="y-tick" transform="translate({plot.margins.left},{plot.yScale(tick)})">
-                <line
-                    style={getBaseStyles(tick, styleProps)}
-                    class="grid"
-                    x2={plot.width - plot.margins.right - plot.margins.left}
-                />
-            </g>
-        {/each}
-    </g>
-</BaseMark>
+<Mark
+    type="gridY"
+    data={data.length ? data.map((tick) => ({ ___orig___: tick })) : []}
+    channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
+    {...{ ...options, y: '___orig___' }}
+    {automatic}>
+    {#snippet children({ usedScales })}
+        <g class="grid-y">
+            {#each ticks as tick}
+                {#if testFilter(tick, options)}
+                    {@const y =
+                        plot.scales.y.fn(tick) +
+                        (plot.scales.y.type === 'band' ? plot.scales.y.fn.bandwidth() * 0.5 : 0)}
+                    {@const x1_ = resolveChannel('x1', tick, options)}
+                    {@const x2_ = resolveChannel('x2', tick, options)}
+                    {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
+                    {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    <line
+                        transform="translate({plot.options.marginLeft},{y})"
+                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {x1}
+                        {x2} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
 
 <style>
-    .y-tick line.grid {
-        stroke: #d9d9d9;
+    line {
+        stroke: currentColor;
+        stroke-opacity: 0.2;
     }
 </style>

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

@@ -1,15 +1,8 @@
-import { SvelteComponent } from "svelte";
-import type { GridYMarkProps } from '../types.js';
-declare const __propDef: {
-    props: GridYMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { BaseMarkProps, RawValue } from '../types.js';
+type GridYMarkProps = BaseMarkProps & {
+    data?: RawValue[];
+    automatic?: boolean;
 };
-export type GridYProps = typeof __propDef.props;
-export type GridYEvents = typeof __propDef.events;
-export type GridYSlots = typeof __propDef.slots;
-export default class GridY extends SvelteComponent<GridYProps, GridYEvents, GridYSlots> {
-}
-export {};
+declare const GridY: import("svelte").Component<GridYMarkProps, {}, "">;
+type GridY = ReturnType<typeof GridY>;
+export default GridY;

package/dist/marks/HTMLTooltip.svelte

@@ -0,0 +1,91 @@
+<!--
+    @component
+    For showing custom HTML tooltips positioned at x/y coordinates
+-->
+<script module lang="ts">
+    import type { ChannelAccessor, DataRow } from '../types.js';
+
+    export type HTMLTooltipMarkProps = {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        r?: ChannelAccessor;
+    };
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../types.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    import { resolveChannel } from '../helpers/resolve.js';
+    import { quadtree } from 'd3-quadtree';
+    import { projectX, projectY } from '../helpers/scales.js';
+
+    let { data, x, y, r, children }: HTMLTooltipMarkProps = $props();
+
+    let datum = $state(false);
+    let tooltipX = $state();
+    let tooltipY = $state();
+
+    function onMouseMove(evt: MouseEvent) {
+        const pt = tree.find(evt.layerX, evt.layerY, 25);
+        if (pt) {
+            tooltipX = resolveChannel('x', pt, { x, y, r });
+            tooltipY = resolveChannel('y', pt, { x, y, r });
+            datum = pt;
+        } else {
+            datum = false;
+        }
+    }
+
+    $effect(() => {
+        // plot.body?.addEventListener('mouseenter', onMouseEnter);
+        // plot.body?.addEventListener('mouseleave', onMouseLeave);
+        plot.body?.addEventListener('mousemove', onMouseMove);
+
+        return () => {
+            // plot.body?.removeEventListener('mouseenter', onMouseEnter);
+            // plot.body?.removeEventListener('mouseleave', onMouseLeave);
+            plot.body?.removeEventListener('mousemove', onMouseMove);
+        };
+    });
+
+    let tree = $derived(
+        quadtree()
+            .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
+            .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
+            .addAll(data)
+    );
+</script>
+
+<div
+    class={['tooltip', { hide: !datum }]}
+    style:left="{tooltipX ? projectX('x', plot.scales, tooltipX) : 0}px"
+    style:top="{tooltipY ? projectY('y', plot.scales, tooltipY) : 0}px">
+    <div class="tooltip-body">
+        {@render children({ datum })}
+    </div>
+</div>
+
+<style>
+    div.tooltip {
+        background: white;
+        background: var(--svelteplot-tooltip-bg);
+        border: 1px solid #ccc;
+        border-color: var(--svelteplot-tooltip-border);
+        font-size: 13px;
+        padding: 1ex 1em;
+        border-radius: 3px;
+        box-shadow:
+            rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        position: absolute;
+        pointer-events: none;
+    }
+    .tooltip.hide {
+        display: none;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { ChannelAccessor, DataRow } from '../types.js';
+export type HTMLTooltipMarkProps = {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    r?: ChannelAccessor;
+};
+/** For showing custom HTML tooltips positioned at x/y coordinates */
+declare const HtmlTooltip: import("svelte").Component<HTMLTooltipMarkProps, {}, "">;
+type HtmlTooltip = ReturnType<typeof HtmlTooltip>;
+export default HtmlTooltip;

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>