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

package/dist/marks/CellX.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import Cell from './Cell.svelte';
+    import { recordizeX, recordizeY } from '../index.js';
+    import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
+
+    type CellXProps = BaseMarkProps & {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+    } & RectMarkProps;
+
+    let { data = [{}], ...options }: CellXProps = $props();
+
+    const args = $derived(
+        recordizeY<CellXProps>({
+            data,
+            ...options
+        })
+    );
+</script>
+
+<Cell {...args} y="0" fill={options.fill || '__value'} />

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

@@ -0,0 +1,3 @@
+declare const CellX: import("svelte").Component<any, {}, "">;
+type CellX = ReturnType<typeof CellX>;
+export default CellX;

package/dist/marks/CellY.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import Cell from './Cell.svelte';
+    import { recordizeX } from '../index.js';
+    import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
+
+    type CellYProps = BaseMarkProps & {
+        data: DataRow[];
+        y?: ChannelAccessor;
+        fill?: ChannelAccessor;
+        stroke?: ChannelAccessor;
+    } & RectMarkProps;
+
+    let { data = [{}], ...options }: CellYProps = $props();
+
+    const args = $derived(
+        recordizeX<CellYProps>({
+            data,
+            ...options
+        })
+    );
+</script>
+
+<Cell {...args} x="0" fill={options.fill || '__value'} />

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

@@ -0,0 +1,3 @@
+declare const CellY: import("svelte").Component<any, {}, "">;
+type CellY = ReturnType<typeof CellY>;
+export default CellY;

package/dist/marks/ColorLegend.svelte

@@ -1,32 +1,150 @@
-<script>import { getContext } from "svelte";
-import { symbol as d3Symbol } from "d3-shape";
-import { maybeSymbol } from "../helpers/symbols.js";
-const plot = getContext("svelteplot");
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import { Plot, AxisX, Frame } from '../index.js';
+    import { symbol as d3Symbol, symbol } from 'd3-shape';
+    import { range as d3Range } from 'd3-array';
+    import { maybeSymbol } from '../helpers/symbols.js';
+
+    import type { DefaultOptions, PlotContext } from '../types.js';
+
+    let {
+        width = 250,
+        tickSpacing = 30,
+        class: className = null
+    }: { width?: number; tickSpacing?: number; class?: string } = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const DEFAULTS = getContext<Partial<DefaultOptions>>('svelteplot/_defaults');
+
+    const legendTitle = $derived(plot.options.color.label);
+    const scaleType = $derived(plot.scales.color.type);
+    const tickFormat = $derived(
+        typeof plot.options.color?.tickFormat === 'function'
+            ? plot.options.color.tickFormat
+            : Intl.NumberFormat(
+                  plot.options.locale,
+                  plot.options.color.tickFormat || DEFAULTS.numberFormat
+              ).format
+    );
+    const randId = Math.round(Math.random() * 1e6).toFixed(32);
 </script>
 
-{#if plot.color.manualActiveMarks.length > 0}
-    <div class="color-legend">
-        {#each plot.colorScale.domain() as value}
-            {@const symbolV = plot.symbolScale(value)}
-            {@const symbolType = maybeSymbol(symbolV)}
-            <div class="item">
-                <div class="swatch">
-                    <svg width="15" height="15"
-                        >{#if plot.colorSymbolRedundant}
-                            <path
-                                transform="translate(7.5,7.5)"
-                                fill={plot.hasFilledDotMarks ? plot.colorScale(value) : 'none'}
-                                stroke={plot.hasFilledDotMarks ? null : plot.colorScale(value)}
-                                d={d3Symbol(symbolType, 40)()}
-                            />
-                        {:else}
-                            <rect fill={plot.colorScale(value)} width="15" height="15" />
-                        {/if}</svg
-                    >
+<!--
+    @component
+    The ColorLegend is an HTML mark that can be placed in the header, footer and overlay
+    snippets. You can activate an implicit ColorLegend above the chart using the global
+    color.legend scale option.
+-->
+
+{#if plot.scales.color.manualActiveMarks > 0}
+    <div class="color-legend {className || ''}">
+        {#if legendTitle}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            <div class="title">{@html legendTitle}</div>
+        {/if}
+        {#if scaleType === 'ordinal' || scaleType === 'categorical'}
+            {#each plot.scales.color.domain as value}
+                {@const symbolV = plot.scales.symbol.fn(value)}
+                {@const symbolType = maybeSymbol(symbolV)}
+                <div class="item">
+                    <div class="swatch">
+                        <svg width="15" height="15"
+                            >{#if plot.colorSymbolRedundant}
+                                <path
+                                    transform="translate(7.5,7.5)"
+                                    style:fill={plot.hasFilledDotMarks
+                                        ? plot.scales.color.fn(value)
+                                        : 'none'}
+                                    style:stroke={plot.hasFilledDotMarks
+                                        ? null
+                                        : plot.scales.color.fn(value)}
+                                    d={d3Symbol(symbolType, 40)()} />
+                            {:else}
+                                <rect
+                                    style:fill={plot.scales.color.fn(value)}
+                                    width="15"
+                                    height="15" />
+                            {/if}</svg>
+                    </div>
+                    <span class="item-label">{value}</span>
                 </div>
-                <span class="item-label">{value}</span>
-            </div>
-        {/each}
+            {/each}
+        {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
+            {@const domain = plot.scales.color.domain}
+            {@const range = plot.scales.color.range}
+            {@const tickLabels =
+                scaleType === 'quantile'
+                    ? plot.scales.color.fn.quantiles()
+                    : scaleType === 'quantize'
+                      ? plot.scales.color.fn.thresholds()
+                      : plot.scales.color.fn.domain()}
+            {@const ticks = d3Range(
+                domain[0],
+                domain[1],
+                (domain[1] - domain[0]) / range.length
+            ).slice(1)}
+
+            <Plot
+                maxWidth="240px"
+                margins={1}
+                marginLeft={1}
+                marginRight={1}
+                marginTop={6}
+                marginBottom={20}
+                height={38}
+                inset={0}
+                x={{ domain, ticks }}>
+                <defs>
+                    <linearGradient id="gradient-{randId}" x2="1">
+                        <stop offset="0%" stop-color={range[0]} />
+                        {#each ticks as t, i}
+                            {@const offset = (100 * (t - domain[0])) / (domain[1] - domain[0])}
+                            <stop
+                                offset="{offset - 0.001}%"
+                                stop-color={plot.scales.color.fn(tickLabels[i] - 0.1)} />
+                            <stop
+                                offset="{offset}%"
+                                stop-color={plot.scales.color.fn(tickLabels[i])} />
+                        {/each}
+                        <stop offset="100%" stop-color={range.at(-1)} />
+                    </linearGradient>
+                </defs>
+                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
+                <AxisX tickSize={18} dy={-17} />
+            </Plot>
+        {:else}
+            <!--- continuous -->
+            {@const domain = plot.scales.color.domain}
+            {@const ticks = new Set([
+                domain[0],
+                ...(plot.scales.color?.fn?.ticks?.(Math.ceil(width / 5)) ?? []),
+                domain[1]
+            ])}
+            <Plot
+                maxWidth="240px"
+                margins={1}
+                marginLeft={10}
+                marginRight={10}
+                marginTop={6}
+                marginBottom={20}
+                height={38}
+                inset={0}
+                x={{ domain, tickSpacing, tickFormat }}>
+                <defs>
+                    <linearGradient id="gradient-{randId}" x2="1">
+                        {#each ticks as t}
+                            <stop
+                                offset="{(100 * (t - domain[0])) / (domain[1] - domain[0])}%"
+                                stop-color={plot.scales.color.fn(t)} />
+                        {/each}
+                    </linearGradient>
+                </defs>
+                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
+                <AxisX tickSize={18} dy={-17} />
+            </Plot>
+        {/if}
     </div>
 {/if}
 
@@ -37,6 +155,9 @@ const plot = getContext("svelteplot");
         display: inline-block;
         margin-right: 2em;
     }
+    .title {
+        font-weight: 500;
+    }
     .item {
         margin: 0 1em 0.5ex 0;
     }
@@ -49,6 +170,6 @@ const plot = getContext("svelteplot");
         display: inline-block;
     }
     .item-label {
-        vertical-align: text-bottom;
+        vertical-align: super;
     }
 </style>

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

@@ -1,14 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    width?: number;
+    tickSpacing?: number;
+    class?: string;
 };
-export type ColorLegendProps = typeof __propDef.props;
-export type ColorLegendEvents = typeof __propDef.events;
-export type ColorLegendSlots = typeof __propDef.slots;
-export default class ColorLegend extends SvelteComponent<ColorLegendProps, ColorLegendEvents, ColorLegendSlots> {
-}
-export {};
+/**
+ * The ColorLegend is an HTML mark that can be placed in the header, footer and overlay
+ * snippets. You can activate an implicit ColorLegend above the chart using the global
+ * color.legend scale option.
+ */
+declare const ColorLegend: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorLegend = ReturnType<typeof ColorLegend>;
+export default ColorLegend;

package/dist/marks/CustomMark.svelte

@@ -0,0 +1,43 @@
+<!--
+    @component
+    For showing custom SVG marks positioned at x/y coordinates
+-->
+<script module lang="ts">
+    import type { ChannelAccessor, DataRow } from '../types.js';
+    import type { Snippet } from 'svelte';
+
+    export type HTMLMarkProps = {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        children: Snippet<{ datum: DataRow; x: number; y: number }>;
+    };
+</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 { projectXY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/index.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
+
+    let { data = [{}], x, y, children, class: className = null }: HTMLMarkProps = $props();
+</script>
+
+<GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
+    {#each data as datum}
+        {@const x_ = resolveChannel('x', datum, { x, y })}
+        {@const y_ = resolveChannel('y', datum, { x, y })}
+        {#if isValid(x_) && isValid(y_)}
+            {@const [px, py] = projectXY(plot.scales, x_, y_)}
+            <g transform="translate({px}, {py})">
+                {@render children({ datum, x: px, y: py })}
+            </g>
+        {/if}
+    {/each}
+</GroupMultiple>

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

@@ -0,0 +1,16 @@
+import type { ChannelAccessor, DataRow } from '../types.js';
+import type { Snippet } from 'svelte';
+export type HTMLMarkProps = {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    children: Snippet<{
+        datum: DataRow;
+        x: number;
+        y: number;
+    }>;
+};
+/** For showing custom SVG marks positioned at x/y coordinates */
+declare const CustomMark: import("svelte").Component<HTMLMarkProps, {}, "">;
+type CustomMark = ReturnType<typeof CustomMark>;
+export default CustomMark;

package/dist/marks/CustomMarkHTML.svelte

@@ -0,0 +1,103 @@
+<!--
+    @component
+    For showing custom HTML tooltips positioned at x/y coordinates
+-->
+<script module lang="ts">
+    import type { ChannelAccessor, ConstantAccessor, DataRow } from '../types.js';
+    import type { Snippet } from 'svelte';
+
+    export type HTMLMarkProps = {
+        data: DataRow[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        frameAnchor?: ConstantAccessor<
+            | 'bottom'
+            | 'top'
+            | 'left'
+            | 'right'
+            | 'top-left'
+            | 'bottom-left'
+            | 'top-right'
+            | 'bottom-right'
+            | 'center'
+        >;
+        children: Snippet<{ datum: DataRow; x: number; y: number }>;
+    };
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../types.js';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    import { resolveChannel } from '../helpers/resolve.js';
+    import { projectX, projectY, projectXY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/index.js';
+
+    let {
+        data = [{}],
+        x,
+        y,
+        frameAnchor,
+        children,
+        class: className = null
+    }: HTMLMarkProps = $props();
+
+    function getXY(datum) {
+        const fa = frameAnchor || 'center';
+        const isLeft = fa.endsWith('left');
+        const isRight = fa.endsWith('right');
+        const isTop = fa.startsWith('top');
+        const isBottom = fa.startsWith('bottom');
+
+        if (x == null || y == null) {
+            // project x and y individually
+            const px =
+                x != null
+                    ? projectX('x', plot.scales, resolveChannel('x', datum, { x, y }))
+                    : plot.options.marginLeft +
+                      (isLeft ? 0 : isRight ? plot.width : plot.width / 2);
+            const py =
+                y != null
+                    ? projectY('y', plot.scales, resolveChannel('y', datum, { x, y }))
+                    : plot.options.marginTop +
+                      (isTop ? 0 : isBottom ? plot.height : plot.height / 2);
+            return [px, py];
+        } else {
+            // use projectXY
+            const x_ = resolveChannel('x', datum, { x, y });
+            const y_ = resolveChannel('y', datum, { x, y });
+            return projectXY(plot.scales, x_, y_);
+        }
+    }
+</script>
+
+{#snippet customMarks()}
+    {#each data as datum}
+        {@const [px, py] = getXY(datum)}
+        {#if isValid(px) && isValid(py)}
+            <div
+                class="custom-mark-html"
+                style:left="{px.toFixed(0)}px"
+                style:top="{py.toFixed(0)}px">
+                {@render children({ datum, x: px, y: py })}
+            </div>
+        {/if}
+    {/each}
+{/snippet}
+
+{#if data.length > 1 || className}
+    <div class="g-custom-mark-html {className || ''}">
+        {@render customMarks()}
+    </div>
+{:else}
+    {@render customMarks()}
+{/if}
+
+<style>
+    .custom-mark-html {
+        position: absolute;
+    }
+</style>

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

@@ -0,0 +1,17 @@
+import type { ChannelAccessor, ConstantAccessor, DataRow } from '../types.js';
+import type { Snippet } from 'svelte';
+export type HTMLMarkProps = {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    frameAnchor?: ConstantAccessor<'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center'>;
+    children: Snippet<{
+        datum: DataRow;
+        x: number;
+        y: number;
+    }>;
+};
+/** For showing custom HTML tooltips positioned at x/y coordinates */
+declare const CustomMarkHtml: import("svelte").Component<HTMLMarkProps, {}, "">;
+type CustomMarkHtml = ReturnType<typeof CustomMarkHtml>;
+export default CustomMarkHtml;

package/dist/marks/DifferenceY.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        CurveName,
+        DataRecord,
+        PlotContext
+    } from '../types.js';
+    import { Line, Area } from '../index.js';
+    import { randomId, coalesce } from '../helpers/index.js';
+    import { getContext } from 'svelte';
+    import { extent, max, min } from 'd3-array';
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { CurveFactory } from 'd3-shape';
+
+    type DifferenceYMarkProps = {
+        data: DataRecord[];
+        /*
+         * the horizontal position of the comparison; bound to the x scale
+         */
+        x1: ChannelAccessor;
+        /**
+         * the horizontal position of the metric; bound to the x scale
+         */
+        x2: ChannelAccessor;
+        x: ChannelAccessor;
+        /**
+         * the vertical position of the comparison; bound to the y scale
+         */
+        y1: ChannelAccessor;
+        /**
+         * the vertical position of the metric; bound to the y scale
+         */
+        y2: ChannelAccessor;
+        y: ChannelAccessor;
+        positiveFill?: string;
+        positiveFillOpacity?: number;
+        negativeFill?: string;
+        negativeFillOpacity?: number;
+        stroke: boolean | ChannelAccessor;
+        curve?: CurveName | CurveFactory;
+        tension?: number;
+    } & BaseMarkProps;
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
+
+    let { data, stroke, class: className = null, ...options }: DifferenceYMarkProps = $props();
+    let { x, x1, x2, y, y1, y2 } = $derived(options);
+
+    const x1x2Differ = $derived((x1 == null || x2 == null) && x1 !== x2);
+
+    const xExtent = $derived(
+        x1x2Differ && x != null ? extent(data, (d) => resolveChannel('x', d, options)) : null
+    );
+    const x1Extent = $derived(
+        x1x2Differ && x1 != null ? extent(data, (d) => resolveChannel('x1', d, options)) : null
+    );
+    const x2Extent = $derived(
+        x1x2Differ && x2 != null ? extent(data, (d) => resolveChannel('x2', d, options)) : null
+    );
+
+    const maxMin = $derived(
+        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[0]))
+    );
+    const minMax = $derived(
+        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[1]))
+    );
+
+    const croppedX1 = $derived(
+        x1x2Differ
+            ? data.filter((d) => {
+                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options);
+                  return x1val >= maxMin && x1val <= minMax;
+              })
+            : data
+    );
+
+    const croppedX2 = $derived(
+        x1x2Differ
+            ? data.filter((d) => {
+                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options);
+                  return x2val >= maxMin && x2val <= minMax;
+              })
+            : data
+    );
+
+    const id = randomId();
+</script>
+
+<g class="positive difference {className || ''}">
+    <!-- pos clips goes from bottom of plot area to the line 2 -->
+    <clipPath id="pos-clip-{id}">
+        <Area
+            data={croppedX2}
+            {...options}
+            fill={options.positiveFill || 'red'}
+            x1={coalesce(x2, x)}
+            y1={coalesce(y2, y)}
+            y2={{ scale: null, value: plot.options.marginTop + plot.facetHeight }} />
+    </clipPath>
+    <!-- pos area goes from top to line 1 -->
+    <Area
+        clipPath="url(#pos-clip-{id})"
+        data={croppedX1}
+        {...options}
+        fill={options.positiveFill || 'pink'}
+        fillOpacity={coalesce(options.positiveFillOpacity, 1)}
+        x1={coalesce(x1, x2, x)}
+        y1={{ scale: null, value: 0 }}
+        y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
+</g>
+<g class="negative difference {className || ''}">
+    <!-- neg clips goes from bottom of plot area to the line 1 -->
+    <clipPath id="neg-clip-{id}">
+        <Area
+            data={croppedX1}
+            {...options}
+            fill={options.negativeFill || 'blue'}
+            x1={coalesce(x1, x2, x)}
+            y1={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)}
+            y2={{ scale: null, value: plot.options.marginTop + plot.facetHeight }} />
+    </clipPath>
+    <!-- neg area goes from top to line 2 -->
+    <Area
+        clipPath="url(#neg-clip-{id})"
+        data={croppedX2}
+        {...options}
+        fill={options.negativeFill || 'cyan'}
+        fillOpacity={coalesce(options.negativeFillOpacity, 1)}
+        x1={coalesce(x2, x)}
+        y1={{ scale: null, value: 0 }}
+        y2={coalesce(y2, y)} />
+</g>
+{#if stroke != null}
+    <!-- set stroke to false to hide the line -->
+    <Line
+        data={croppedX2}
+        {...options}
+        stroke={stroke === true ? 'currentColor' : stroke}
+        x={coalesce(x2, x)}
+        y={coalesce(y2, y)} />
+{/if}

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

@@ -0,0 +1,30 @@
+import type { BaseMarkProps, ChannelAccessor, CurveName, DataRecord } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+type DifferenceYMarkProps = {
+    data: DataRecord[];
+    x1: ChannelAccessor;
+    /**
+     * the horizontal position of the metric; bound to the x scale
+     */
+    x2: ChannelAccessor;
+    x: ChannelAccessor;
+    /**
+     * the vertical position of the comparison; bound to the y scale
+     */
+    y1: ChannelAccessor;
+    /**
+     * the vertical position of the metric; bound to the y scale
+     */
+    y2: ChannelAccessor;
+    y: ChannelAccessor;
+    positiveFill?: string;
+    positiveFillOpacity?: number;
+    negativeFill?: string;
+    negativeFillOpacity?: number;
+    stroke: boolean | ChannelAccessor;
+    curve?: CurveName | CurveFactory;
+    tension?: number;
+} & BaseMarkProps;
+declare const DifferenceY: import("svelte").Component<DifferenceYMarkProps, {}, "">;
+type DifferenceY = ReturnType<typeof DifferenceY>;
+export default DifferenceY;