svelteplot 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/marks/ColorLegend.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from "svelte";
+import { symbol as d3Symbol } from "d3-shape";
+import { maybeSymbol } from "../helpers/symbols";
+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,83 @@
+<script>import resolveChannel from "../helpers/resolveChannel";
+import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+import { symbol as d3Symbol } from "d3-shape";
+import { isSymbol, maybeSymbol } from "../helpers/symbols";
+import chroma from "chroma-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' as 'x'] : []),
+        ...(y ? ['y' as '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) as string|SymbolType}
+            {@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';
+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';
+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';
+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 {};

package/dist/marks/Frame.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+const plot = getContext("svelteplot");
+let { ...styleProps } = $props();
+let styleProps2 = $derived({
+  ...styleProps,
+  ...!styleProps.fill && !styleProps.stroke ? { stroke: "currentColor" } : {}
+});
+</script>
+
+<BaseMark type="frame" data={[]} channels={[]}>
+    <rect
+        class="frame"
+        style={getBaseStyles(null, styleProps2)}
+        x={plot.margins.left}
+        y={plot.margins.top}
+        width={plot.plotWidth}
+        height={plot.plotHeight}
+    />
+</BaseMark>
+
+<!-- 
+<text
+    style="font-size: 40px;text-anchor:middle"
+    dominant-baseline="central"
+    opacity={0.1}
+    transform="translate({plot.margins.left + plot.plotWidth * 0.5}, {plot.margins.top +
+        plot.plotHeight * 0.5})">{plot.plotWidth} x {plot.plotHeight}</text
+> -->
+
+<style>
+    .frame {
+        stroke: none;
+        fill: none;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { FrameProps } from '../types';
+declare const __propDef: {
+    props: import("../types").BaseMarkStyleProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type FrameProps_ = typeof __propDef.props;
+export { FrameProps_ as FrameProps };
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponent<FrameProps, FrameEvents, FrameSlots> {
+}

package/dist/marks/GridX.svelte

@@ -0,0 +1,42 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import resolveChannel from "../helpers/resolveChannel";
+import getBaseStyles from "../helpers/getBaseStyles";
+import { get } from "underscore";
+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>
+
+<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>
+
+<style>
+    .x-tick line.grid {
+        stroke: #d9d9d9;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { GridOptions } from '../types';
+declare const __propDef: {
+    props: Partial<import("../types").MarkProps> & GridOptions & {
+        y1?: import("../types").ChannelAccessor | undefined;
+        y2?: import("../types").ChannelAccessor | undefined;
+        automatic?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/marks/GridY.svelte

@@ -0,0 +1,31 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+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>
+
+<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>
+
+<style>
+    .y-tick line.grid {
+        stroke: #d9d9d9;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { GridYMarkProps } from '../types';
+declare const __propDef: {
+    props: GridYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/marks/Line.svelte

@@ -0,0 +1,49 @@
+<script>import resolveChannel from "../helpers/resolveChannel";
+import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+import { line } from "d3-shape";
+import { groupBy } from "underscore";
+const BaseMark_Line = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  data,
+  x = null,
+  y = null,
+  z = null,
+  fill,
+  stroke,
+  r = 5,
+  ...styleProps
+} = $props();
+let groups = $derived(
+  z ? Object.values(groupBy(data, (d) => resolveChannel("z", d, z))) : [data]
+);
+let linePath = line().x((d) => plot.xScale(resolveChannel("x", d, x))).y((d) => plot.yScale(resolveChannel("y", d, y)));
+</script>
+
+<BaseMark_Line
+    type="dot"
+    {data}
+    channels={['x', 'y', 'radius', 'color']}
+    {x}
+    {y}
+    {r}
+    {fill}
+    {stroke}
+    {...styleProps}
+>
+    <g class="lines">
+        {#each groups as lineData}
+            <path d={linePath(lineData)} style={getBaseStyles(lineData[0], styleProps)} />
+        {/each}
+    </g>
+</BaseMark_Line>
+
+<style>
+    .lines path {
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 1.4px;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { LineMarkProps } from '../types';
+declare const __propDef: {
+    props: LineMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LineProps = typeof __propDef.props;
+export type LineEvents = typeof __propDef.events;
+export type LineSlots = typeof __propDef.slots;
+export default class Line extends SvelteComponent<LineProps, LineEvents, LineSlots> {
+}
+export {};

package/dist/marks/LineX.svelte

@@ -0,0 +1,10 @@
+<script>import Line from "./Line.svelte";
+let { data, ...rest } = $props();
+</script>
+
+<Line
+    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
+    x="value"
+    y="index"
+    {...rest}
+/>

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

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

package/dist/marks/LineY.svelte

@@ -0,0 +1,10 @@
+<script>import Line from "./Line.svelte";
+let { data, ...rest } = $props();
+</script>
+
+<Line
+    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
+    x="index"
+    y="value"
+    {...rest}
+/>

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

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

package/dist/marks/RuleX.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+import resolveChannel from "../helpers/resolveChannel";
+const BaseMark_RuleX = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], x, y1, y2, ...styleProps } = $props();
+let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
+</script>
+
+<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
+    <g class="rule-x">
+        {#each data as datum}
+            <line
+                transform="translate({plot.xScale(resolveChannel('x', datum, x))}, {0})"
+                style={getBaseStyles(datum, styleProps)}
+                y1={y1 != null ? plot.yScale(resolveChannel('y', datum, y1)) : plot.margins.top}
+                y2={y2 != null
+                    ? plot.yScale(resolveChannel('y', datum, y2))
+                    : plot.plotHeight + plot.margins.top}
+            />
+        {/each}
+    </g>
+</BaseMark_RuleX>
+
+<style>
+    .rule-x line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { RuleXMarkProps } from '../types';
+declare const __propDef: {
+    props: RuleXMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RuleXProps = typeof __propDef.props;
+export type RuleXEvents = typeof __propDef.events;
+export type RuleXSlots = typeof __propDef.slots;
+export default class RuleX extends SvelteComponent<RuleXProps, RuleXEvents, RuleXSlots> {
+}
+export {};

package/dist/marks/RuleY.svelte

@@ -0,0 +1,31 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles";
+import resolveChannel from "../helpers/resolveChannel";
+import wrapArray from "../helpers/wrapArray";
+const BaseMark_RuleY = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], y, x1, x2, ...styleProps } = $props();
+let dataWrapped = $derived(y ? data : data.map((d) => ({ y: d, ___orig___: d })));
+</script>
+
+<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
+    <g class="rule-y">
+        {#each data as datum}
+            <line
+                transform="translate(0,{plot.yScale(resolveChannel('y', datum, y))})"
+                style={getBaseStyles(datum, styleProps)}
+                x1={x1 != null ? plot.xScale(resolveChannel('x', datum, x1)) : plot.margins.left}
+                x2={x2 != null
+                    ? plot.xScale(resolveChannel('x', datum, x2))
+                    : plot.plotWidth + plot.margins.left}
+            />
+        {/each}
+    </g>
+</BaseMark_RuleY>
+
+<style>
+    .rule-y line {
+        stroke: currentColor;
+    }
+</style>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { RuleYMarkProps } from '../types';
+declare const __propDef: {
+    props: RuleYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RuleYProps = typeof __propDef.props;
+export type RuleYEvents = typeof __propDef.events;
+export type RuleYSlots = typeof __propDef.slots;
+export default class RuleY extends SvelteComponent<RuleYProps, RuleYEvents, RuleYSlots> {
+}
+export {};

package/dist/marks/SymbolLegend.svelte

@@ -0,0 +1,50 @@
+<script>import { getContext } from "svelte";
+import { symbol as d3Symbol } from "d3-shape";
+import { maybeSymbol } from "../helpers/symbols";
+const plot = getContext("svelteplot");
+</script>
+
+{#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
+<div class="symbol-legend">
+    {#each plot.symbolScale.domain() as value}
+        {@const symbolV = plot.symbolScale(value)}
+        {@const symbolType = maybeSymbol(symbolV)}
+        {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
+        <div class="item">
+            <div class="swatch">
+                <svg width="15" height="15"
+                    >
+                        <path
+                            transform="translate(7.5,7.5)"
+                            fill={plot.hasFilledDotMarks ? color : 'none'}
+                            stroke={plot.hasFilledDotMarks ? null : color}
+                            d={d3Symbol(symbolType, 40)()}
+                        />
+                   </svg
+                >
+            </div>
+            <span class="item-label">{value}</span>
+        </div>
+    {/each}
+</div>
+{/if}
+
+<style>
+    .symbol-legend {
+        text-align: left;
+        font-size: 12px;
+        display: inline-block;
+    }
+    .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/SymbolLegend.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 SymbolLegendProps = typeof __propDef.props;
+export type SymbolLegendEvents = typeof __propDef.events;
+export type SymbolLegendSlots = typeof __propDef.slots;
+export default class SymbolLegend extends SvelteComponent<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
+}
+export {};