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

package/dist/marks/Geo.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { DataRecord, PlotContext, BaseMarkProps } from '../types.js';
+    import Mark from '../Mark.svelte';
+    import { geoPath } from 'd3-geo';
+    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
+    import { getUsedScales } from '../helpers/scales.js';
+    import callWithProps from '../helpers/callWithProps.js';
+    import { sort } from '../index.js';
+    import { testFilter } from '../helpers/index.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GeoCanvas from './helpers/GeoCanvas.svelte';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    type GeoMarkProps = {
+        data: DataRecord[];
+        geoType?: 'sphere' | 'graticule';
+        dragRotate: boolean;
+        canvas: boolean;
+    } & BaseMarkProps;
+
+    let {
+        data = [{}],
+        canvas = false,
+        geoType,
+        dragRotate,
+        class: className = null,
+        ...options
+    }: GeoMarkProps = $props();
+
+    const path = $derived(
+        callWithProps(geoPath, [plot.scales.projection], {
+            ...(options.r
+                ? { pointRadius: (d) => plot.scales.r.fn(resolveChannel('r', d, options)) }
+                : { pointRadius: 3 })
+        })
+    );
+
+    const args = $derived(
+        sort({
+            data,
+            ...(options.r ? { sort: { channel: '-r' } } : {}),
+            ...options
+        })
+    );
+    const preferStroke = new Set(['MultiLineString', 'LineString']);
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    const testFacet = $derived(getTestFacet());
+</script>
+
+<Mark
+    type="geo"
+    channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
+    {...args}>
+    {#snippet children({ mark, usedScales })}
+        <g
+            aria-label="geo"
+            class={['geo', geoType && `geo-${geoType}`, className]}
+            style="fill:currentColor">
+            {#if canvas}
+                <GeoCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} {path} />
+            {:else}
+                {#each args.data as datum}
+                    {#if testFilter(datum, mark.options) && testFacet(datum, mark.options)}
+                        {#snippet el(datum)}
+                            {@const title = resolveProp(args.title, datum, '')}
+                            {@const geometry = resolveProp(args.geometry, datum, datum)}
+                            <path
+                                d={path(geometry)}
+                                style={resolveScaledStyles(
+                                    datum,
+                                    args,
+                                    usedScales,
+                                    plot,
+                                    preferStroke.has(geometry.type) ? 'stroke' : 'fill'
+                                )}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        {/snippet}
+                        {#if options.href}
+                            <a
+                                href={resolveProp(args.href, datum, '')}
+                                target={resolveProp(args.target, datum, '_self')}>
+                                {@render el(datum)}
+                            </a>
+                        {:else}
+                            {@render el(datum)}
+                        {/if}
+                    {/if}
+                {/each}
+            {/if}
+        </g>
+    {/snippet}
+</Mark>

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

@@ -0,0 +1,10 @@
+import type { DataRecord, BaseMarkProps } from '../types.js';
+type GeoMarkProps = {
+    data: DataRecord[];
+    geoType?: 'sphere' | 'graticule';
+    dragRotate: boolean;
+    canvas: boolean;
+} & BaseMarkProps;
+declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
+type Geo = ReturnType<typeof Geo>;
+export default Geo;

package/dist/marks/Graticule.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import Geo from './Geo.svelte';
+    import { geoGraticule } from 'd3-geo';
+    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+
+    import { getContext } from 'svelte';
+
+    const DEFAULTS = {
+        graticuleStep: 10,
+        ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
+    };
+
+    type GraticuleMarkProps = BaseMarkProps & {
+        step?: number;
+        stepX?: number;
+        stepY?: number;
+    };
+
+    let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
+
+    let graticule = $derived.by(() => {
+        const graticule = geoGraticule();
+        graticule.stepMinor([stepX || step, stepY || step]);
+        return graticule;
+    });
+</script>
+
+<Geo data={[graticule()]} {...options} geoType="graticule" preferStroke />

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

@@ -0,0 +1,9 @@
+import type { BaseMarkProps } from '../types.js';
+type GraticuleMarkProps = BaseMarkProps & {
+    step?: number;
+    stepX?: number;
+    stepY?: number;
+};
+declare const Graticule: import("svelte").Component<GraticuleMarkProps, {}, "">;
+type Graticule = ReturnType<typeof Graticule>;
+export default Graticule;

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;