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

package/dist/marks/Cell.svelte

@@ -0,0 +1,110 @@
+<!--
+    @component
+    For arbitrary rectangles, requires band x and y scales 
+-->
+<script lang="ts">
+    import Mark from '../Mark.svelte';
+    import { getContext } from 'svelte';
+    import { recordizeY, sort } from '../index.js';
+    import { roundedRect } from '../helpers/roundedRect.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { coalesce, maybeNumber } from '../helpers/index.js';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        BaseRectMarkProps,
+        ChannelAccessor
+    } from '../types.js';
+    import { isValid } from '../helpers/isValid.js';
+    import { addEventHandlers } from './helpers/events.js';
+
+    type CellProps = BaseMarkProps & {
+        data: DataRecord[];
+        x?: ChannelAccessor;
+        y?: ChannelAccessor;
+        borderRadius?:
+            | number
+            | {
+                  topLeft?: number;
+                  topRight?: number;
+                  bottomRight?: number;
+                  bottomLeft?: number;
+              };
+    } & BaseRectMarkProps;
+
+    let { data = [{}], class: className = null, ...options }: CellProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const args = $derived(
+        options.sort !== undefined
+            ? // user has defined a custom sorting
+              sort(recordizeY({ data, ...options }))
+            : // sort by x and y
+              (sort({
+                  ...sort({
+                      ...recordizeY({ data, ...options }),
+                      sort: { channel: 'x' }
+                  }),
+                  sort: { channel: 'y' }
+              }) as Props)
+    );
+</script>
+
+<Mark
+    type="cell"
+    required={['x', 'y']}
+    requiredScales={{ x: ['band'], y: ['band'] }}
+    channels={['x', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
+    {...args}>
+    {#snippet children({ mark, scaledData, usedScales })}
+        {@const bwx = plot.scales.x.fn.bandwidth()}
+        {@const bwy = plot.scales.y.fn.bandwidth()}
+        <g class="cell {className || ''}" data-fill={usedScales.fillOpacity}>
+            {#each scaledData as d}
+                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetLeft = resolveProp(args.insetLeft, d.datum)}
+                {@const insetRight = resolveProp(args.insetRight, d.datum)}
+                {@const insetTop = resolveProp(args.insetTop, d.datum)}
+                {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
+                {@const dx = resolveProp(args.dx, d.datum, 0)}
+                {@const dy = resolveProp(args.dy, d.datum, 0)}
+                {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0))}
+                {@const insetT = maybeNumber(coalesce(insetTop, inset, 0))}
+                {@const insetR = maybeNumber(coalesce(insetRight, inset, 0))}
+                {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0))}
+                {#if d.valid && (args.fill == null || isValid(resolveChannel('fill', d.datum, args)))}
+                    {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
+                    <path
+                        d={roundedRect(
+                            0,
+                            0,
+                            bwx - insetL - insetR,
+                            bwy - insetT - insetB,
+                            options.borderRadius
+                        )}
+                        class={[styleClass]}
+                        {style}
+                        transform="translate({[
+                            d.x + insetL + dx - bwx * 0.5,
+                            d.y + insetT + dy - bwy * 0.5
+                        ]})"
+                        use:addEventHandlers={{
+                            getPlotState,
+                            options: args,
+                            datum: d.datum
+                        }} />
+                {/if}
+            {/each}
+        </g>
+    {/snippet}
+</Mark>
+
+<style>
+    rect {
+        stroke: none;
+        /* fill: none; */
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
+type CellProps = BaseMarkProps & {
+    data: DataRecord[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
+} & BaseRectMarkProps;
+/** For arbitrary rectangles, requires band x and y scales */
+declare const Cell: import("svelte").Component<CellProps, {}, "">;
+type Cell = ReturnType<typeof Cell>;
+export default Cell;

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;