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

package/dist/marks/AxisX.svelte

@@ -1,101 +1,206 @@
-<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);
-$inspect(ticks.length);
-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} \u2192`)
-);
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import Mark from '../Mark.svelte';
+    import BaseAxisX from './helpers/BaseAxisX.svelte';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        RawValue,
+        ConstantAccessor,
+        FacetContext,
+        DefaultOptions
+    } from '../types.js';
+    import autoTimeFormat from '../helpers/autoTimeFormat.js';
+    import { derived } from 'svelte/store';
+    import { autoTicks } from '../helpers/autoTicks.js';
+    import { resolveScaledStyles } from '../helpers/resolve.js';
+
+    const DEFAULTS = {
+        tickSize: 6,
+        tickPadding: 3,
+        tickFontSize: 11,
+        axisXAnchor: 'bottom',
+        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+    };
+
+    type AxisXProps = BaseMarkProps & {
+        data?: RawValue[];
+        automatic?: boolean;
+        title?: string;
+        anchor?: 'top' | 'bottom';
+        interval?: string | number;
+        facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
+        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        tickSize?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickPadding?: number;
+        tickFormat?:
+            | 'auto'
+            | Intl.DateTimeFormatOptions
+            | Intl.NumberFormatOptions
+            | ((d: RawValue) => string);
+        tickClass?: ConstantAccessor<string>;
+    };
+
+    let {
+        data = [],
+        automatic = false,
+        title,
+        anchor = DEFAULTS.axisXAnchor,
+        facetAnchor = 'auto',
+        interval,
+        tickSize = DEFAULTS.tickSize,
+        tickFontSize = DEFAULTS.tickFontSize,
+        tickPadding = DEFAULTS.tickPadding,
+        labelAnchor,
+        tickFormat,
+        tickClass,
+        ...options
+    }: AxisXProps = $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,
+                  interval || plot.options.x.interval,
+                  plot.scales.x.domain,
+                  plot.scales.x.fn,
+                  autoTickCount
+              )
+    );
+
+    let tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
+
+    let useTickFormat = $derived(
+        typeof tickFmt === 'function'
+            ? tickFmt
+            : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
+              ? (d) => d
+              : plot.scales.x.type === 'time'
+                ? // time scale
+                  typeof tickFmt === 'object'
+                    ? (d: Date) => Intl.DateTimeFormat(plot.options.locale, tickFmt).format(d)
+                    : autoTimeFormat(plot.scales.x, plot.plotWidth, plot.options.locale)
+                : // numeric scale
+                  typeof tickFmt === 'object'
+                  ? (d: number) => Intl.NumberFormat(plot.options.locale, tickFmt).format(d)
+                  : // auto
+                    (d: RawValue) =>
+                        Intl.NumberFormat(plot.options.locale, {
+                            ...DEFAULTS.numberFormat,
+                            style: plot.options.x.percent ? 'percent' : 'decimal'
+                        }).format(d)
+    );
+
+    let optionsLabel = $derived(plot.options?.x?.label);
+
+    let scaleType = $derived(plot.scales.x.type);
+    let isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
+
+    let useTitle = $derived(
+        title ||
+            (optionsLabel === null
+                ? null
+                : optionsLabel !== undefined
+                  ? optionsLabel
+                  : plot.scales.x.autoTitle
+                    ? isQuantitative
+                        ? plot.options.x?.reverse
+                            ? `← ${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''}`
+                            : `${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''} →`
+                        : plot.scales.x.autoTitle
+                    : '')
+    );
+
+    let useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
+    let titleAlign = $derived(
+        useLabelAnchor === 'auto' ? (isQuantitative ? 'right' : 'center') : useLabelAnchor
+    );
+
+    const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
+    let { left, top, bottom, bottomEmpty, topEmpty } = $derived(getFacetState());
+
+    let useFacetAnchor = $derived(
+        facetAnchor !== 'auto' ? facetAnchor : anchor === 'bottom' ? 'bottom-empty' : 'top-empty'
+    );
+    let showAxis = $state(false);
+    $effect.pre(() => {
+        showAxis =
+            useFacetAnchor === 'top'
+                ? top
+                : useFacetAnchor === 'bottom'
+                  ? bottom
+                  : useFacetAnchor === 'top-empty'
+                    ? topEmpty
+                    : bottomEmpty;
+    });
 </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>
+<Mark
+    type="axisX"
+    data={data.length ? data.map((tick) => ({ __x: tick })) : []}
+    channels={['x']}
+    {...options}
+    x="__x"
+    {automatic}>
+    {#if left && top && useTitle}
+        <text
+            style={resolveScaledStyles(
+                null,
+                {
+                    ...options,
+                    stroke: null,
+                    textAnchor:
+                        titleAlign === 'right'
+                            ? 'end'
+                            : titleAlign === 'center'
+                              ? 'middle'
+                              : 'start'
+                },
+                {},
+                plot,
+                'fill'
+            )}
+            x={plot.options.marginLeft +
+                plot.plotWidth * (titleAlign === 'right' ? 1 : titleAlign === 'center' ? 0.5 : 0)}
+            y={anchor === 'top' ? 13 : plot.height - 13}
+            class="axis-x-title"
+            dominant-baseline={anchor === 'top' ? 'auto' : 'hanging'}>{useTitle}</text>
+    {/if}
+    {#if showAxis}
+        <BaseAxisX
+            scaleFn={plot.scales.x.fn}
+            scaleType={plot.scales.x.type}
+            tickFormat={useTickFormat}
+            {ticks}
+            marginTop={plot.options.marginTop}
+            height={plot.facetHeight}
+            {anchor}
+            {tickSize}
+            {tickPadding}
+            {tickFontSize}
+            {tickClass}
+            {options}
+            title={useTitle}
+            {plot} />
+    {/if}
+</Mark>
 
 <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;
+        opacity: 0.8;
+        fill: currentColor;
     }
 </style>

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

@@ -1,17 +1,18 @@
-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: {};
+import type { BaseMarkProps, RawValue, ConstantAccessor } from '../types.js';
+type AxisXProps = BaseMarkProps & {
+    data?: RawValue[];
+    automatic?: boolean;
+    title?: string;
+    anchor?: 'top' | 'bottom';
+    interval?: string | number;
+    facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
+    labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+    tickSize?: number;
+    tickFontSize?: ConstantAccessor<number>;
+    tickPadding?: number;
+    tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
+    tickClass?: ConstantAccessor<string>;
 };
-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 {};
+declare const AxisX: import("svelte").Component<AxisXProps, {}, "">;
+type AxisX = ReturnType<typeof AxisX>;
+export default AxisX;

package/dist/marks/AxisY.svelte

@@ -1,70 +1,184 @@
-<script>import { getContext } from "svelte";
-import { get } from "underscore";
-import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles.js";
-const BaseMark_AxisX = BaseMark;
-const plot = getContext("svelteplot");
-let {
-  ticks = [],
-  anchor = "left",
-  automatic = false,
-  tickSize = 6,
-  tickPadding = 3,
-  title = null,
-  tickFormat = (d) => String(d),
-  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 optionsLabel = $derived(plot.options.y?.label);
-let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : `\u2191 ${plot.y.autoTitle}`)
-);
-$inspect(optionsLabel);
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import BaseAxisY from './helpers/BaseAxisY.svelte';
+    import Mark from '../Mark.svelte';
+    import type {
+        PlotContext,
+        BaseMarkProps,
+        RawValue,
+        DataRecord,
+        FacetContext,
+        DefaultOptions
+    } from '../types.js';
+    import getBaseStyles from '../helpers/getBaseStyles.js';
+    import autoTimeFormat from '../helpers/autoTimeFormat.js';
+    import type { ConstantAccessor } from '../types.js';
+    import { autoTicks } from '../helpers/autoTicks.js';
+    import { resolveScaledStyles } from '../helpers/resolve.js';
+
+    const DEFAULTS = {
+        tickSize: 6,
+        tickPadding: 3,
+        tickFontSize: 11,
+        axisYAnchor: 'left',
+        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+    };
+
+    type AxisYProps = BaseMarkProps & {
+        data?: RawValue[];
+        automatic?: boolean;
+        title?: string;
+        anchor?: 'left' | 'right';
+        facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
+        lineAnchor?: 'top' | 'center' | 'bottom';
+        tickSize?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickPadding?: number;
+        tickFormat?:
+            | 'auto'
+            | Intl.DateTimeFormatOptions
+            | Intl.NumberFormatOptions
+            | ((d: RawValue) => string);
+        tickClass?: ConstantAccessor<string>;
+    };
+
+    let {
+        data = [],
+        automatic = false,
+        title,
+        anchor = DEFAULTS.axisYAnchor,
+        facetAnchor = 'auto',
+        lineAnchor = 'center',
+        tickSize = DEFAULTS.tickSize,
+        tickFontSize = DEFAULTS.tickFontSize,
+        tickPadding = DEFAULTS.tickPadding,
+        tickFormat,
+        tickClass,
+        ...options
+    }: AxisYProps = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
+
+    const autoTickCount = $derived(
+        Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
+    );
+
+    const 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
+              )
+    );
+
+    const tickFmt = $derived(tickFormat || plot.options.y.tickFormat);
+
+    const useTickFormat = $derived(
+        typeof tickFmt === 'function'
+            ? tickFmt
+            : plot.scales.y.type === 'band' || plot.scales.y.type === 'point'
+              ? (d) => d
+              : plot.scales.y.type === 'time'
+                ? // time scale
+                  typeof tickFmt === 'object'
+                    ? (d: Date) => Intl.DateTimeFormat(plot.options.locale, tickFmt).format(d)
+                    : autoTimeFormat(plot.scales.y, plot.plotWidth, plot.options.locale)
+                : // numeric scale
+                  typeof tickFmt === 'object'
+                  ? (d: number) => Intl.NumberFormat(plot.options.locale, tickFmt).format(d)
+                  : // auto
+                    (d: RawValue) =>
+                        Intl.NumberFormat(plot.options.locale, {
+                            ...DEFAULTS.numberFormat,
+                            style: plot.options.y.percent ? 'percent' : 'decimal'
+                        }).format(d)
+    );
+
+    const optionsLabel = $derived(plot.options.y.label);
+
+    const useTitle = $derived(
+        title ||
+            (optionsLabel === null
+                ? null
+                : optionsLabel !== undefined
+                  ? optionsLabel
+                  : plot.scales.y.autoTitle
+                    ? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
+                    : '')
+    );
+
+    const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
+    const { left, leftEmpty, right, rightEmpty, top } = $derived(getFacetState());
+
+    const useFacetAnchor = $derived(
+        facetAnchor !== 'auto' ? facetAnchor : anchor === 'left' ? 'left-empty' : 'right-empty'
+    );
+
+    let showAxis = $state(false);
+    $effect.pre(() => {
+        showAxis =
+            useFacetAnchor === 'left'
+                ? left
+                : useFacetAnchor === 'right'
+                  ? right
+                  : useFacetAnchor === 'left-empty'
+                    ? leftEmpty
+                    : rightEmpty;
+    });
 </script>
 
-<BaseMark_AxisX type="axis-y" data={ticks} channels={['y']} {automatic}>
-    <g class="axis-y">
-        {#if useTitle}
-            <text x={0} y={5} class="axis-title" dominant-baseline="hanging">{useTitle}</text>
-        {/if}
-        {#each autoTicks as 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">{tickFormat(tick)}</text
-                >
-                <line
-                    style={getBaseStyles(tick, styleProps)}
-                    x2={anchor === 'left' ? -tickSize : tickSize}
-                />
-            </g>
-        {/each}
-    </g>
-</BaseMark_AxisX>
+<Mark
+    type="axisY"
+    data={data.length ? data.map((tick) => ({ __y: tick })) : []}
+    channels={['y']}
+    {...{ ...options, y: '__y' }}
+    {automatic}>
+    {#if left && top && useTitle}
+        <text
+            style={resolveScaledStyles(
+                null,
+                { ...options, stroke: null, textAnchor: anchor === 'left' ? 'start' : 'end' },
+                {},
+                plot,
+                'fill'
+            )}
+            x={anchor === 'left' ? 0 : plot.width}
+            y={5}
+            class="axis-x-title"
+            dominant-baseline="hanging">{useTitle}</text>
+    {/if}
+    {#if showAxis}
+        <BaseAxisY
+            scaleFn={plot.scales.y.fn}
+            scaleType={plot.scales.y.type}
+            tickFormat={useTickFormat}
+            {ticks}
+            marginLeft={plot.options.marginLeft}
+            width={plot.facetWidth}
+            {anchor}
+            {lineAnchor}
+            {tickSize}
+            {tickPadding}
+            {tickFontSize}
+            {tickClass}
+            {options}
+            title={useTitle}
+            {plot} />
+    {/if}
+</Mark>
 
 <style>
     text {
         font-size: 11px;
-        fill: #4a4a4a;
-    }
-    text.is-left {
-        text-anchor: end;
-    }
-    text.axis-title {
-        text-anchor: start;
-    }
-    .y-tick line {
-        stroke: currentColor;
+        opacity: 0.8;
+        fill: currentColor;
     }
 </style>

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

@@ -1,15 +1,18 @@
-import { SvelteComponent } from "svelte";
-import type { AxisYMarkProps } from '../types.js';
-declare const __propDef: {
-    props: AxisYMarkProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { BaseMarkProps, RawValue } from '../types.js';
+import type { ConstantAccessor } from '../types.js';
+type AxisYProps = BaseMarkProps & {
+    data?: RawValue[];
+    automatic?: boolean;
+    title?: string;
+    anchor?: 'left' | 'right';
+    facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
+    lineAnchor?: 'top' | 'center' | 'bottom';
+    tickSize?: number;
+    tickFontSize?: ConstantAccessor<number>;
+    tickPadding?: number;
+    tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
+    tickClass?: ConstantAccessor<string>;
 };
-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 {};
+declare const AxisY: import("svelte").Component<AxisYProps, {}, "">;
+type AxisY = ReturnType<typeof AxisY>;
+export default AxisY;