svelteplot 0.0.1-alpha.1 → 0.0.1-alpha.10

package/dist/marks/Area.svelte

@@ -0,0 +1,81 @@
+<script>import resolveChannel from "../helpers/resolveChannel.js";
+import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import { area } from "d3-shape";
+import { groupBy } from "underscore";
+import callWithProps from "../helpers/callWithProps.js";
+const BaseMark_Area = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  data,
+  x1 = null,
+  x2 = null,
+  y1 = null,
+  y2 = null,
+  z = null,
+  fill,
+  stroke,
+  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 areaPath = $derived(
+  callWithProps(
+    area,
+    [],
+    x1 != null && x2 != null ? {
+      // vertical area
+      x0: (d) => plot.xScale(resolveChannel("x", d, x1)),
+      x1: (d) => plot.xScale(resolveChannel("x", d, x2)),
+      y: (d) => plot.yScale(resolveChannel("y", d, y1))
+    } : {
+      // horizontal area
+      x: (d) => plot.xScale(resolveChannel("x", d, x1)),
+      y0: (d) => plot.yScale(resolveChannel("y", d, y1)),
+      y1: (d) => plot.yScale(resolveChannel("y", d, y2))
+    }
+  )
+);
+</script>
+
+<BaseMark_Area
+    type="area"
+    {data}
+    channels={['x', 'y', 'color']}
+    {x1}
+    {x2}
+    {y1}
+    {y2}
+    {fill}
+    {stroke}
+    {...styleProps}
+>
+    <g class="areas">
+        {#each sortedGroups as areaData}
+            <path
+                d={areaPath(areaData)}
+                style:stroke={stroke
+                    ? plot.colorScale(resolveChannel('color', areaData[0], stroke))
+                    : 'none'}
+                style:fill={fill
+                    ? plot.colorScale(resolveChannel('color', areaData[0], fill))
+                    : 'currentColor'}
+                style={getBaseStyles(areaData[0], styleProps)}
+            />
+        {/each}
+    </g>
+</BaseMark_Area>
+
+<style>
+    .lines path {
+        stroke-width: 1.4px;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { AreaMarkProps } from '../types.js';
+declare const __propDef: {
+    props: AreaMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaProps = typeof __propDef.props;
+export type AreaEvents = typeof __propDef.events;
+export type AreaSlots = typeof __propDef.slots;
+export default class Area extends SvelteComponent<AreaProps, AreaEvents, AreaSlots> {
+}
+export {};

package/dist/marks/AreaX.svelte

@@ -0,0 +1,19 @@
+<script>import isDataRecord from "../helpers/isDataRecord.js";
+import Area from "./Area.svelte";
+let { data, x, x1, x2, y, ...rest } = $props();
+let dataIsRawValueArray = $derived(!isDataRecord(data[0]));
+let transformedData = $derived(dataIsRawValueArray ? data.map((value, index) => ({ value, index, ___orig___: value })) : data);
+$inspect({
+  y1: dataIsRawValueArray ? "index" : y,
+  x1: dataIsRawValueArray ? 0 : x ? 0 : x1,
+  x2: dataIsRawValueArray ? "value" : x ? x : x2
+});
+</script>
+
+<Area
+    data={transformedData}
+    y1={dataIsRawValueArray ? 'index' : y}
+    x1={dataIsRawValueArray ? 0 : x ? 0 : x1}
+    x2={dataIsRawValueArray ? 'value' : x ? x : x2}
+    {...rest}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { RawValue } from '../types.js';
+declare const __propDef: {
+    props: {
+        data: RawValue[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaXProps = typeof __propDef.props;
+export type AreaXEvents = typeof __propDef.events;
+export type AreaXSlots = typeof __propDef.slots;
+export default class AreaX extends SvelteComponent<AreaXProps, AreaXEvents, AreaXSlots> {
+}
+export {};

package/dist/marks/AreaY.svelte

@@ -0,0 +1,14 @@
+<script>import isDataRecord from "../helpers/isDataRecord.js";
+import Area from "./Area.svelte";
+let { data, x, y, y1, y2, ...rest } = $props();
+let dataIsRawValueArray = $derived(!isDataRecord(data[0]));
+let transformedData = $derived(dataIsRawValueArray ? data.map((value, index) => ({ value, index, ___orig___: value })) : data);
+</script>
+
+<Area
+    data={transformedData}
+    x1={dataIsRawValueArray ? 'index' : x}
+    y1={dataIsRawValueArray ? 0 : y ? 0 : y1}
+    y2={dataIsRawValueArray ? 'value' : y ? y : y2}
+    {...rest}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { RawValue } from '../types.js';
+declare const __propDef: {
+    props: {
+        data: RawValue[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaYProps = typeof __propDef.props;
+export type AreaYEvents = typeof __propDef.events;
+export type AreaYSlots = typeof __propDef.slots;
+export default class AreaY extends SvelteComponent<AreaYProps, AreaYEvents, AreaYSlots> {
+}
+export {};

package/dist/marks/AxisX.svelte

@@ -0,0 +1,102 @@
+<script>import { getContext } from "svelte";
+import dayjs from "dayjs";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import removeIdenticalLines from "../helpers/removeIdenticalLines.js";
+import autoTimeFormat from "../helpers/autoTimeFormat.js";
+const BaseMark_AxisX = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  ticks = [],
+  anchor = "bottom",
+  tickSize = 6,
+  tickPadding = 3,
+  tickFormat = null,
+  automatic = false,
+  title = null,
+  tickFontSize = null,
+  fill = null,
+  ...styleProps
+} = $props();
+let autoTickCount = $derived(
+  Math.max(2, Math.round(plot.plotWidth / (plot.options?.x?.tickSpacing || 80)))
+);
+$inspect(autoTickCount);
+let autoTicks = $derived(
+  ticks.length > 0 ? ticks : plot.options?.x?.ticks ?? plot.xScale.ticks(autoTickCount)
+);
+let useTickFormat = $derived(
+  typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(d)
+);
+let tickTexts = $derived(
+  removeIdenticalLines(
+    autoTicks.map(useTickFormat).map((tick) => Array.isArray(tick) ? tick : [tick])
+  )
+);
+let optionsLabel = $derived(plot.options?.x?.label);
+let useTitle = $derived(
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.x.autoTitle ? plot.options.x?.reverse ? `\u2190 ${plot.x.autoTitle}` : `${plot.x.autoTitle} \u2192` : "")
+);
+</script>
+
+<BaseMark_AxisX type="axis-x" data={ticks} channels={['x']} {automatic}>
+    <g class="axis-x">
+        {#if useTitle}
+            <text
+                x={plot.plotWidth + plot.margins.left}
+                y={plot.height - 10}
+                class="axis-title"
+                dominant-baseline="hanging">{useTitle}</text
+            >
+        {/if}
+        {#each autoTicks as tick, t}
+            {@const textLines = tickTexts[t]}
+            {@const prevTextLines = t && tickTexts[t - 1]}
+            <g
+                class="x-tick"
+                transform="translate({plot.xScale(tick)},{anchor === 'bottom'
+                    ? plot.margins.top + plot.plotHeight
+                    : plot.margins.top})"
+            >
+                <text
+                    style={getBaseStyles(tick, { fill, fontSize: tickFontSize })}
+                    y={(tickSize + tickPadding) * (anchor === 'bottom' ? 1 : -1)}
+                    dominant-baseline={anchor === 'bottom' ? 'hanging' : 'auto'}
+                >
+                    {#if typeof textLines === 'string' || textLines.length === 1}
+                        {textLines}
+                    {:else}
+                        {#each textLines as line, i}
+                            <tspan x="0" dy={i ? 12 : 0}
+                                >{!prevTextLines || prevTextLines[i] !== line ? line : ''}</tspan
+                            >
+                        {/each}
+                    {/if}
+                </text>
+                <line
+                    style={getBaseStyles(tick, styleProps)}
+                    y2={anchor === 'bottom' ? tickSize : -tickSize}
+                />
+            </g>
+        {/each}
+    </g>
+</BaseMark_AxisX>
+
+<style>
+    text {
+        text-anchor: middle;
+        font-size: 11px;
+
+        fill: #4a4a4a;
+    }
+
+    text.axis-title {
+        text-anchor: end;
+    }
+    .x-tick line {
+        stroke: currentColor;
+    }
+    .x-tick line.grid {
+        stroke: #d9d9d9;
+    }
+</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { AxisMarkOptions } from '../types.js';
+declare const __propDef: {
+    props: AxisMarkOptions & {
+        anchor?: "bottom" | "top" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AxisXProps = typeof __propDef.props;
+export type AxisXEvents = typeof __propDef.events;
+export type AxisXSlots = typeof __propDef.slots;
+export default class AxisX extends SvelteComponent<AxisXProps, AxisXEvents, AxisXSlots> {
+}
+export {};

package/dist/marks/AxisY.svelte

@@ -0,0 +1,80 @@
+<script>import { getContext } from "svelte";
+import { get } from "underscore";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import autoTimeFormat from "../helpers/autoTimeFormat.js";
+const BaseMark_AxisX = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  ticks = [],
+  anchor = "left",
+  automatic = false,
+  tickSize = 6,
+  tickPadding = 3,
+  title = null,
+  tickFormat,
+  tickFontSize = null,
+  fill = null,
+  ...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))
+);
+let useTickFormat = $derived(
+  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(d) + "x"
+);
+let optionsLabel = $derived(plot.options.y?.label);
+let useTitle = $derived(
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : `\u2191 ${plot.y.autoTitle}`)
+);
+</script>
+
+<BaseMark_AxisX type="axis-y" data={ticks} channels={['y']} {automatic}>
+    <g class="axis-y">
+        {#if useTitle}
+            <text
+                style:text-anchor={anchor === 'left' ? 'start' : 'end'}
+                x={anchor === 'left' ? 0 : plot.width}
+                y={5}
+                class="axis-title"
+                dominant-baseline="hanging">{useTitle}</text
+            >
+        {/if}
+        {#each autoTicks as tick}
+            {@const tickText = useTickFormat(tick)}
+            <g
+                class="y-tick"
+                transform="translate({plot.margins.left +
+                    (anchor === 'left' ? 0 : plot.plotWidth)},{plot.yScale(tick)})"
+            >
+                <text
+                    class:is-left={anchor === 'left'}
+                    style={getBaseStyles(tick, { fill, fontSize: tickFontSize })}
+                    x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
+                    dominant-baseline="middle">{Array.isArray(tickText) ? tickText.join(' ') : tickText}</text
+                >
+                <line
+                    style={getBaseStyles(tick, styleProps)}
+                    x2={anchor === 'left' ? -tickSize : tickSize}
+                />
+            </g>
+        {/each}
+    </g>
+</BaseMark_AxisX>
+
+<style>
+    text {
+        font-size: 11px;
+        fill: #4a4a4a;
+    }
+    text.is-left {
+        text-anchor: end;
+    }
+    text.axis-title {
+        text-anchor: start;
+    }
+    .y-tick line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { AxisYMarkProps } from '../types.js';
+declare const __propDef: {
+    props: AxisYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AxisYProps = typeof __propDef.props;
+export type AxisYEvents = typeof __propDef.events;
+export type AxisYSlots = typeof __propDef.slots;
+export default class AxisY extends SvelteComponent<AxisYProps, AxisYEvents, AxisYSlots> {
+}
+export {};

package/dist/marks/BaseMark.svelte

@@ -0,0 +1,22 @@
+<script context="module"></script>
+
+<script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte";
+import { getContext } from "svelte";
+const plot = getContext("svelteplot");
+let { type, data = [], channels = [], children, automatic, ...rest } = $props();
+const mark = new Mark(type, channels, automatic, { data, ...rest });
+plot.addMark(mark);
+$effect(() => {
+  mark.channels = new Set(channels);
+});
+$effect(() => {
+  mark.props = { data, ...rest };
+});
+$effect(() => {
+  return () => {
+    plot.removeMark(mark);
+  };
+});
+</script>
+
+<slot />

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { BaseMarkProps } from '../types.js';
+declare class __sveltets_Render<T extends BaseMarkProps> {
+    props(): T & {
+        children?: Function | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {};
+    };
+}
+export type BaseMarkProps<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['props']>;
+export type BaseMarkEvents<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['events']>;
+export type BaseMarkSlots<T extends BaseMarkProps> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class BaseMark<T extends BaseMarkProps> extends SvelteComponent<BaseMarkProps<T>, BaseMarkEvents<T>, BaseMarkSlots<T>> {
+}
+export {};

package/dist/marks/ColorLegend.svelte

@@ -0,0 +1,54 @@
+<script>import { getContext } from "svelte";
+import { symbol as d3Symbol } from "d3-shape";
+import { maybeSymbol } from "../helpers/symbols.js";
+const plot = getContext("svelteplot");
+</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
+                    >
+                </div>
+                <span class="item-label">{value}</span>
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    .color-legend {
+        text-align: left;
+        font-size: 12px;
+        display: inline-block;
+        margin-right: 2em;
+    }
+    .item {
+        margin: 0 1em 0.5ex 0;
+    }
+    path {
+        stroke-width: 1.5;
+    }
+    .item,
+    .item-label,
+    .swatch {
+        display: inline-block;
+    }
+    .item-label {
+        vertical-align: text-bottom;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/marks/Dot.svelte

@@ -0,0 +1,82 @@
+<script>import { getContext } from "svelte";
+import { symbol as d3Symbol } from "d3-shape";
+import BaseMark from "./BaseMark.svelte";
+import resolveChannel from "../helpers/resolveChannel.js";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import { isSymbol, maybeSymbol } from "../helpers/symbols.js";
+const BaseMark_Dot = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  data,
+  x = null,
+  y = null,
+  r = 3,
+  symbol = "circle",
+  stroke = null,
+  fill = null,
+  ...styleProps
+} = $props();
+let styleProps2 = $derived({
+  ...styleProps,
+  ...!styleProps.fill && !styleProps.stroke ? { stroke: "currentColor" } : {}
+});
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_Dot
+    type="dot"
+    {data}
+    channels={[
+        ...(x ? ['x'] : []),
+        ...(y ? ['y'] : []),
+        ...(r ? ['radius'] : []),
+        ...(symbol ? ['symbol'] : []),
+        ...(fill || stroke ? ['color'] : [])
+    ]}
+    {x}
+    {y}
+    {r}
+    {fill}
+    {stroke}
+    {symbol}
+    {...styleProps}
+>
+    <g class="dots">
+        {#each data as datum, i}
+            {@const cx = resolveChannel('x', datum, x)}
+            {@const cy = resolveChannel('y', datum, y)}
+            {@const symbolT = resolveChannel('symbol', datum, symbol)}
+            {@const symbolType = isSymbol(symbolT)
+                ? maybeSymbol(symbolT)
+                : maybeSymbol(plot.symbolScale(symbolT))}
+            {@const radius =
+                typeof r === 'number' ? r : plot.radiusScale(resolveChannel('radius', datum, r))}
+            {@const size = radius * radius * Math.PI}
+            {@const maybeFillColor = resolveChannel('color', datum, fill)}
+            {@const maybeStrokeColor = resolveChannel('color', datum, stroke)}
+            {#if isValid(cx) && isValid(cy)}
+                <path
+                    d={d3Symbol(symbolType, size)()}
+                    style={getBaseStyles(datum, styleProps)}
+                    style:fill={maybeFillColor ? plot.colorScale(maybeFillColor) : null}
+                    style:stroke={maybeStrokeColor
+                        ? plot.colorScale(maybeStrokeColor)
+                        : maybeFillColor
+                          ? null
+                          : 'currentColor'}
+                    transform="translate({[plot.xScale(cx), plot.yScale(cy)]})"
+                />
+            {/if}
+        {/each}
+    </g>
+</BaseMark_Dot>
+
+<style>
+    path {
+        fill: none;
+        stroke: none;
+        stroke-width: 1.6px;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { DotMarkProps } from '../types.js';
+declare const __propDef: {
+    props: DotMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotProps = typeof __propDef.props;
+export type DotEvents = typeof __propDef.events;
+export type DotSlots = typeof __propDef.slots;
+export default class Dot extends SvelteComponent<DotProps, DotEvents, DotSlots> {
+}
+export {};

package/dist/marks/DotX.svelte

@@ -0,0 +1,5 @@
+<script>import Dot from "./Dot.svelte";
+let { data, ...rest } = $props();
+</script>
+
+<Dot {data} x={(d) => d} y={0} {...rest} />

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { RawValue } from '../types.js';
+declare const __propDef: {
+    props: {
+        data: RawValue[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotXProps = typeof __propDef.props;
+export type DotXEvents = typeof __propDef.events;
+export type DotXSlots = typeof __propDef.slots;
+export default class DotX extends SvelteComponent<DotXProps, DotXEvents, DotXSlots> {
+}
+export {};

package/dist/marks/DotY.svelte

@@ -0,0 +1,5 @@
+<script>import Dot from "./Dot.svelte";
+let { data, ...rest } = $props();
+</script>
+
+<Dot {data} y={(d) => d} x={0} {...rest} />

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { RawValue } from '../types.js';
+declare const __propDef: {
+    props: {
+        data: RawValue[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DotYProps = typeof __propDef.props;
+export type DotYEvents = typeof __propDef.events;
+export type DotYSlots = typeof __propDef.slots;
+export default class DotY extends SvelteComponent<DotYProps, DotYEvents, DotYSlots> {
+}
+export {};