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

package/dist/Plot.svelte.d.ts

@@ -1,15 +1,15 @@
-import { SvelteComponent } from "svelte";
-import type { PlotProps } from './types.js';
-declare const __propDef: {
-    props: PlotProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type PlotProps_ = typeof __propDef.props;
-export { PlotProps_ as PlotProps };
-export type PlotEvents = typeof __propDef.events;
-export type PlotSlots = typeof __propDef.slots;
-export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
-}
+import Plot from './core/Plot.svelte';
+import type { PlotOptions } from './types.js';
+/**
+ * The Plot component is the container for plots. It collects the marks with
+ * their data and channels and computes the shared scales.
+ *
+ * The Plot component is split into two parts. This is the outer Plot which
+ * provides convenient defaults and automatically adds axes etc to the grapihcs.
+ * The downside is that it adds a bunch of imports that you may not be using.
+ * To help with this you can use the core/Plot component directly for a more
+ * low-level Plot wrapper.
+ */
+declare const Plot: import("svelte").Component<Partial<PlotOptions>, {}, "">;
+type Plot = ReturnType<typeof Plot>;
+export default Plot;

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+import type { ScaleName, ScaleType, ScaledChannelName } from './types.js';
+export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const SCALES: ScaleName[];
+export declare const VALID_SCALE_TYPES: Record<ScaleName, Set<ScaleType>>;
+/**
+ * Map of all scaled channels
+ */
+export declare const CHANNEL_SCALE: Record<ScaledChannelName, ScaleName>;
+export declare const CSS_VAR: RegExp;
+export declare const CSS_COLOR: RegExp;
+export declare const CSS_COLOR_MIX: RegExp;
+export declare const CSS_COLOR_CONTRAST: RegExp;
+export declare const CSS_RGBA: RegExp;
+export declare const CSS_URL: RegExp;

package/dist/constants.js

@@ -0,0 +1,109 @@
+export const SCALE_TYPES = {
+    opacity: Symbol('opacity'),
+    color: Symbol('color'),
+    x: Symbol('position'),
+    y: Symbol('position'),
+    symbol: Symbol('symbol'),
+    r: Symbol('radius'),
+    length: Symbol('length'),
+    fx: Symbol('fx'),
+    fy: Symbol('fy'),
+    projection: Symbol('projection')
+};
+export const SCALES = [
+    'x',
+    'y',
+    'color',
+    'opacity',
+    'symbol',
+    'r',
+    'length',
+    'fx',
+    'fy',
+    'projection'
+];
+export const VALID_SCALE_TYPES = {
+    color: new Set([
+        'linear',
+        'categorical',
+        'ordinal',
+        'diverging',
+        'quantile',
+        'quantize',
+        'quantile-cont',
+        'threshold',
+        'log',
+        'symlog',
+        'pow',
+        'sqrt',
+        'diverging-log',
+        'diverging-pow',
+        'diverging-sqrt',
+        'diverging-symlog'
+    ]),
+    x: new Set([
+        'linear',
+        'log',
+        'symlog',
+        'time',
+        'ordinal',
+        'band',
+        'point',
+        'quantile',
+        'quantize',
+        'threshold'
+    ]),
+    y: new Set([
+        'linear',
+        'log',
+        'symlog',
+        'time',
+        'ordinal',
+        'band',
+        'point',
+        'quantile',
+        'quantize',
+        'threshold'
+    ])
+    // ...
+};
+/**
+ * Map of all scaled channels
+ */
+export const CHANNEL_SCALE = {
+    x: 'x',
+    x1: 'x',
+    x2: 'x',
+    y: 'y',
+    y1: 'y',
+    y2: 'y',
+    r: 'r',
+    length: 'length',
+    fx: 'fx',
+    fy: 'fy',
+    symbol: 'symbol',
+    fill: 'color',
+    stroke: 'color',
+    opacity: 'opacity',
+    fillOpacity: 'opacity',
+    strokeOpacity: 'opacity'
+};
+export const CSS_VAR = /^var\(--([a-z-0-9,\s]+)\)$/;
+export const CSS_COLOR = /^color\(/;
+export const CSS_COLOR_MIX = /^color-mix\(/; // just check for prefix
+export const CSS_COLOR_CONTRAST = /^color-contrast\(/; // just check for prefix
+export const CSS_RGBA = /^rgba\(/; // just check for prefix
+export const CSS_URL = /^url\(#/; // just check for prefix
+// export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
+// 	x: SCALE_TYPES.x,
+// 	y: SCALE_TYPES.y,
+// 	opacity: SCALE_TYPES.opacity,
+// 	strokeOpacity: SCALE_TYPES.opacity,
+// 	strokeWidth: SCALE_TYPES.width,
+// 	fillOpacity: SCALE_TYPES.opacity,
+// 	stroke: SCALE_TYPES.color,
+// 	fill: SCALE_TYPES.color,
+// 	r: SCALE_TYPES.radius,
+// 	rotate: SCALE_TYPES.angle,
+// 	symbol: SCALE_TYPES.symbol
+// };

package/dist/core/Facet.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { setContext, type Snippet } from 'svelte';
+    import { resolveChannel } from '../helpers/resolve.js';
+    import type { BaseMarkProps, DataRecord, PlotScale, RawValue } from '../types.js';
+    import { identity } from '../helpers';
+
+    let {
+        fx,
+        fy,
+        left,
+        top,
+        right,
+        bottom,
+        topEmpty,
+        bottomEmpty,
+        leftEmpty,
+        rightEmpty,
+        children
+    }: {
+        fx: RawValue;
+        fy: RawValue;
+        left: boolean;
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        topEmpty: boolean;
+        bottomEmpty: boolean;
+        leftEmpty: boolean;
+        rightEmpty: boolean;
+        children?: Snippet;
+    } = $props();
+
+    setContext('svelteplot/facet', {
+        getTestFacet() {
+            return (datum: DataRecord, options: Partial<BaseMarkProps>) => {
+                return (
+                    (options.fx == null || resolveChannel('fx', datum, options) === fx) &&
+                    (options.fy == null || resolveChannel('fy', datum, options) === fy)
+                );
+            };
+        },
+        getFacetState() {
+            return {
+                fx,
+                fy,
+                left,
+                top,
+                right,
+                bottom,
+                topEmpty,
+                bottomEmpty,
+                leftEmpty,
+                rightEmpty
+            };
+        }
+    });
+</script>
+
+{@render children?.()}

package/dist/core/Facet.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+import type { RawValue } from '../types.js';
+type $$ComponentProps = {
+    fx: RawValue;
+    fy: RawValue;
+    left: boolean;
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    topEmpty: boolean;
+    bottomEmpty: boolean;
+    leftEmpty: boolean;
+    rightEmpty: boolean;
+    children?: Snippet;
+};
+declare const Facet: import("svelte").Component<$$ComponentProps, {}, "">;
+type Facet = ReturnType<typeof Facet>;
+export default Facet;

package/dist/core/FacetAxes.svelte

@@ -0,0 +1,66 @@
+<!-- 
+    @component
+    The FacetAxes component renders the facet axes
+-->
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../types.js';
+    import { scaleBand } from 'd3-scale';
+    import BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
+    import BaseAxisY from '../marks/helpers/BaseAxisY.svelte';
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    // we need the plot context for the overall width & height
+    const plot = $derived(getPlotState());
+
+    const useFacetX = $derived(plot.scales.fx.domain.length > 0);
+    const useFacetY = $derived(plot.scales.fy.domain.length > 0);
+
+    const fxValues = $derived(useFacetX ? plot.scales.fx.domain : [true]);
+    const fyValues = $derived(useFacetY ? plot.scales.fy.domain : [true]);
+
+    // create band scales for fx and fy
+    const facetXScale = $derived(
+        scaleBand().paddingInner(0.1).domain(fxValues).rangeRound([0, plot.plotWidth])
+    );
+    const facetYScale = $derived(
+        scaleBand().paddingInner(0.1).domain(fyValues).rangeRound([0, plot.plotHeight])
+    );
+</script>
+
+<!-- facet grid -->
+{#if fxValues.length > 1 && plot.options.fx.axis}
+    <g transform="translate({plot.options.marginLeft}, 0)">
+        <BaseAxisX
+            scaleFn={facetXScale}
+            scaleType="band"
+            ticks={fxValues}
+            tickFormat={(d) => d}
+            tickSize={0}
+            tickPadding={5}
+            anchor={plot.options.fx.axis}
+            options={plot.options.fx.axisOptions || {}}
+            {...plot.options.fx.axisProps || {}}
+            height={plot.plotHeight}
+            marginTop={plot.options.marginTop}
+            {plot} />
+    </g>
+{/if}
+{#if fyValues.length > 1 && plot.options.fy.axis}
+    <g transform="translate(0, {plot.options.marginTop})">
+        <BaseAxisY
+            scaleFn={facetYScale}
+            scaleType="band"
+            ticks={fyValues}
+            tickFormat={(d) => d}
+            tickSize={0}
+            tickPadding={5}
+            anchor={plot.options.fy.axis}
+            lineAnchor="center"
+            options={plot.options.fy.axisOptions || {}}
+            {...plot.options.fy.axisProps || {}}
+            width={plot.plotWidth}
+            marginLeft={plot.options.marginLeft}
+            {plot} />
+    </g>
+{/if}

package/dist/core/FacetAxes.svelte.d.ts

@@ -0,0 +1,4 @@
+/** The FacetAxes component renders the facet axes */
+declare const FacetAxes: import("svelte").Component<Record<string, never>, {}, "">;
+type FacetAxes = ReturnType<typeof FacetAxes>;
+export default FacetAxes;

package/dist/core/FacetGrid.svelte

@@ -0,0 +1,86 @@
+<!-- 
+    @component
+    The FacetGrid component repeats the
+    marks for each facet domain value 
+-->
+<script lang="ts">
+    import { getContext, setContext, type Snippet } from 'svelte';
+    import type { PlotContext, GenericMarkOptions, Mark } from '../types.js';
+    import { scaleBand } from 'd3-scale';
+    import Facet from './Facet.svelte';
+    import { getEmptyFacets } from '../helpers/facets.js';
+
+    const { getPlotState, updateDimensions } = getContext<PlotContext>('svelteplot');
+    // we need the plot context for the overall width & height
+    const plot = $derived(getPlotState());
+
+    let {
+        children,
+        marks
+    }: {
+        children: Snippet;
+        marks: Mark<GenericMarkOptions>[];
+    } = $props();
+
+    const useFacetX = $derived(plot.scales.fx.domain.length > 0);
+    const useFacetY = $derived(plot.scales.fy.domain.length > 0);
+
+    const fxValues = $derived(useFacetX ? plot.scales.fx.domain : [true]);
+    const fyValues = $derived(useFacetY ? plot.scales.fy.domain : [true]);
+
+    // we need to track which facets are "empty", meaning that they don't contain
+    // any "faceted" data points. this can happen when fx and fy are combined and
+    // certain combinations don't yield results
+    const emptyFacets = $derived(getEmptyFacets(marks, fxValues, fyValues));
+
+    // create band scales for fx and fy
+    const facetXScale = $derived(
+        scaleBand()
+            .paddingInner(fxValues.length > 1 ? 0.1 : 0)
+            .domain(fxValues)
+            .rangeRound([0, plot.plotWidth])
+    );
+    const facetYScale = $derived(
+        scaleBand()
+            .paddingInner(fyValues.length > 1 ? 0.1 : 0)
+            .domain(fyValues)
+            .rangeRound([0, plot.plotHeight])
+    );
+
+    const facetWidth = $derived(useFacetX ? facetXScale.bandwidth() : plot.plotWidth);
+    const facetHeight = $derived(useFacetY ? facetYScale.bandwidth() : plot.plotHeight);
+
+    $effect.pre(() => {
+        updateDimensions(facetWidth, facetHeight);
+    });
+</script>
+
+{#each fxValues as facetX, i}
+    {#each fyValues as facetY, j}
+        <g
+            class="facet"
+            fill="currentColor"
+            style:display={emptyFacets.get(facetX)?.get(facetY) ? 'none' : 'block'}
+            transform="translate({useFacetX ? facetXScale(facetX) : 0}, {useFacetY
+                ? facetYScale(facetY)
+                : 0})">
+            <Facet
+                fx={facetX}
+                fy={facetY}
+                left={i === 0}
+                right={i === fxValues.length - 1}
+                top={j === 0}
+                bottom={j === fyValues.length - 1}
+                leftEmpty={!!(i === 0 || emptyFacets.get(fxValues[i - 1])?.get(facetY))}
+                topEmpty={!!(j === 0 || emptyFacets.get(facetX)?.get(fyValues[j - 1]))}
+                rightEmpty={!!(
+                    i === fxValues.length - 1 || emptyFacets.get(fxValues[i + 1])?.get(facetY)
+                )}
+                bottomEmpty={!!(
+                    j === fyValues.length - 1 || emptyFacets.get(facetX)?.get(fyValues[j + 1])
+                )}>
+                {@render children()}
+            </Facet>
+        </g>
+    {/each}
+{/each}

package/dist/core/FacetGrid.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import type { GenericMarkOptions, Mark } from '../types.js';
+type $$ComponentProps = {
+    children: Snippet;
+    marks: Mark<GenericMarkOptions>[];
+};
+/**
+ * The FacetGrid component repeats the
+ * marks for each facet domain value
+ */
+declare const FacetGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type FacetGrid = ReturnType<typeof FacetGrid>;
+export default FacetGrid;