svelteplot 0.2.6-next.0 → 0.2.6-next.2

package/dist/Plot.svelte

@@ -4,7 +4,7 @@
     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.
+    provides convenient defaults and automatically adds axes etc to the graphics.
     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.
@@ -74,7 +74,7 @@
     {#if restOptions.title}<h2>{restOptions.title}</h2>{/if}
     {#if restOptions.subtitle}<h3>{restOptions.subtitle}</h3>{/if}
     <!-- also pass on user header -->
-    {#if userHeader}{@render userHeader()}{/if}
+    {#if userHeader}{@render userHeader?.()}{/if}
     {#if restOptions.color?.legend}
         <ColorLegend />
     {/if}
@@ -85,7 +85,7 @@
 
 {#snippet footer()}
     {#if restOptions.caption}<div>{restOptions.caption}</div>{/if}
-    {#if userFooter}{@render userFooter()}{/if}
+    {#if userFooter}{@render userFooter?.()}{/if}
 {/snippet}
 
 <!-- There's a bug triggering RangeError: Maximum call stack size exceeded 

package/dist/Plot.svelte.d.ts

@@ -5,7 +5,7 @@ import type { PlotOptions } from './types.js';
  * 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.
+ * provides convenient defaults and automatically adds axes etc to the graphics.
  * 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.

package/dist/core/Facet.svelte

@@ -1,8 +1,7 @@
 <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';
+    import type { BaseMarkProps, DataRecord, RawValue } from '../types.js';
 
     let {
         fx,

package/dist/core/FacetGrid.svelte

@@ -4,7 +4,7 @@
     marks for each facet domain value 
 -->
 <script lang="ts">
-    import { getContext, setContext, type Snippet } from 'svelte';
+    import { getContext, type Snippet } from 'svelte';
     import type { PlotContext, GenericMarkOptions, Mark } from '../types.js';
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';

package/dist/core/Plot.svelte

@@ -62,6 +62,7 @@
         initialWidth: 500,
         inset: 0,
         colorScheme: 'turbo',
+        unknown: '#cccccc',
         dotRadius: 3,
         frame: false,
         axes: true,
@@ -160,7 +161,7 @@
     );
 
     // if the plot is showing filled dot marks we're using different defaults
-    // for the symbol axis range, so we're passing on this info to the createScales
+    // for the symbol axis range, so we're passing on this info to the computeScales
     // function below
     const hasFilledDotMarks = $derived(
         !!explicitMarks.find((d) => d.type === 'dot' && d.options.fill)
@@ -471,7 +472,7 @@
     data-testid={testid}>
     {#if header}
         <div class="plot-header">
-            {#if header}{@render header()}{/if}
+            {@render header?.()}
         </div>
     {/if}
     <div class="plot-body" bind:this={plotBody}>
@@ -500,11 +501,11 @@
                 {/if}
             </FacetGrid>
         </svg>
-        {#if overlay}<div class="plot-overlay">{@render overlay()}</div>{/if}
+        {#if overlay}<div class="plot-overlay">{@render overlay?.()}</div>{/if}
     </div>
     {#if footer}
         <figcaption class="plot-footer">
-            {#if footer}{@render footer()}{/if}
+            {@render footer?.()}
         </figcaption>
     {/if}
 </figure>

package/dist/helpers/autoScales.js

@@ -5,6 +5,7 @@ import callWithProps from './callWithProps.js';
 import { interpolateLab, interpolateRound } from 'd3-interpolate';
 import { coalesce, maybeNumber } from './index.js';
 import { getLogTicks } from './getLogTicks.js';
+import { isPlainObject } from 'es-toolkit';
 const Scales = {
     point: scalePoint,
     band: scaleBand,
@@ -102,10 +103,23 @@ export function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWi
     let fn;
     let range;
     // special treatment for color scales
-    const { scheme, interpolate, pivot, n = type === 'threshold' ? domain.length + 1 : 9 } = scaleOptions;
+    const { scheme, interpolate, pivot, n = type === 'threshold' ? domain.length + 1 : 9, unknown = plotDefaults.unknown } = scaleOptions;
     if (type === 'categorical' || type === 'ordinal') {
         // categorical
-        const scheme_ = scheme || plotDefaults.categoricalColorScheme;
+        let scheme_ = scheme || plotDefaults.categoricalColorScheme;
+        if (isPlainObject(scheme_)) {
+            const newScheme = Object.values(scheme_);
+            const newDomain = Object.keys(scheme_);
+            // for every value in domain that's not part of the scheme, map to unknown
+            for (const v of domain) {
+                if (scheme_[v] == null) {
+                    newDomain.push(v);
+                    newScheme.push(unknown);
+                }
+            }
+            domain = newDomain;
+            scheme_ = newScheme;
+        }
         // categorical scale
         range = Array.isArray(scheme_)
             ? scheme_
@@ -193,7 +207,7 @@ function getScaleRange(name, scaleOptions, plotOptions, plotWidth, plotHeight, p
                     : name === 'r'
                         ? [0, 10]
                         : name === 'symbol'
-                            ? // Plot is smart enough to pick different default shapes depending on wether
+                            ? // Plot is smart enough to pick different default shapes depending on whether
                                 // or not there are filled dot marks in the plot, so we have to pass this
                                 // information all the way here
                                 plotHasFilledDotMarks

package/dist/helpers/callWithProps.d.ts

@@ -2,7 +2,7 @@ import type { RawValue } from '../types.js';
 type Setter = (v: any) => void;
 /**
  * Helper function to call a D3 "function class" while also calling
- * porperty setter functions on the result.
+ * property setter functions on the result.
  */
 export default function (d3func: () => Record<string, Setter>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
 export {};

package/dist/helpers/callWithProps.js

@@ -1,6 +1,6 @@
 /**
  * Helper function to call a D3 "function class" while also calling
- * porperty setter functions on the result.
+ * property setter functions on the result.
  */
 export default function (d3func, args, props = {}) {
     const res = d3func(...args);

package/dist/helpers/projection.js

@@ -1,5 +1,5 @@
 import { geoClipRectangle, geoPath, geoTransform } from 'd3-geo';
-import { constant, isObject, isValid } from './index.js';
+import { constant, isObject } from './index.js';
 const identity = constant({ stream: (stream) => stream });
 const defaultAspectRatio = 0.618;
 export function createProjection({ projOptions, inset: globalInset = 2, insetTop = globalInset, insetRight = globalInset, insetBottom = globalInset, insetLeft = globalInset } = {}, dimensions) {

package/dist/helpers/reduce.js

@@ -1,4 +1,4 @@
-import { min, max, mode, sum, mean, median, variance, deviation, quantile, range } from 'd3-array';
+import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
 const niceReduceNames = {

package/dist/helpers/resolve.js

@@ -2,7 +2,6 @@ import { CHANNEL_SCALE } from '../constants.js';
 import isDataRecord from './isDataRecord.js';
 import isRawValue from './isRawValue.js';
 import { isValid } from './isValid.js';
-import { pick } from 'es-toolkit';
 import { getBaseStylesObject } from './getBaseStyles.js';
 import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {

package/dist/helpers/scales.d.ts

@@ -30,9 +30,9 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
  */
 export declare function inferScaleType(name: ScaleName, dataValues: RawValue[], markTypes: Set<MarkType>): ScaleType;
 /**
- * Mark channels can explicitely or implicitely be exempt from being
+ * Mark channels can explicitly or implicitly be exempt from being
  * mapped to a scale, so everywhere where values are being mapped to
- * scales, we need to check if the the scale is supposed to be used
+ * scales, we need to check if the scale is supposed to be used
  * not. That's what this function is used for.
  */
 export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;

package/dist/helpers/scales.js

@@ -1,4 +1,4 @@
-import { extent, range as d3Range, ascending } from 'd3-array';
+import { extent, ascending } from 'd3-array';
 import { isColorOrNull, isDateOrNull, isNumberOrNull, isNumberOrNullOrNaN, isStringOrNull } from './typeChecks.js';
 import { CHANNEL_SCALE, VALID_SCALE_TYPES } from '../constants.js';
 import { isSymbolOrNull } from './typeChecks.js';
@@ -247,9 +247,9 @@ const scaledChannelNames = [
     'length'
 ];
 /**
- * Mark channels can explicitely or implicitely be exempt from being
+ * Mark channels can explicitly or implicitly be exempt from being
  * mapped to a scale, so everywhere where values are being mapped to
- * scales, we need to check if the the scale is supposed to be used
+ * scales, we need to check if the scale is supposed to be used
  * not. That's what this function is used for.
  */
 export function getUsedScales(plot, options, mark) {
@@ -277,7 +277,7 @@ function looksLikeOpacity(input) {
 export function projectXY(scales, x, y, useXScale = true, useYScale = true) {
     if (scales.projection) {
         // TODO: pretty sure this is not how projection streams are supposed to be used
-        // efficiantly, in observable plot, all data points of a mark are projected using
+        // efficiently, in observable plot, all data points of a mark are projected using
         // the same stream
         let x_, y_;
         const stream = scales.projection.stream({

package/dist/marks/Arrow.svelte

@@ -9,7 +9,6 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         RawValue
     } from '../types.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';

package/dist/marks/AxisY.svelte

@@ -6,11 +6,9 @@
         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';

package/dist/marks/CellX.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Cell from './Cell.svelte';
-    import { recordizeX, recordizeY } from '../index.js';
+    import { recordizeY } from '../index.js';
     import type { BaseMarkProps, DataRow, RectMarkProps } from '../types.js';
     import type { ChannelAccessor } from '../types.js';
 

package/dist/marks/ColorLegend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import { Plot, AxisX, Frame } from '../index.js';
-    import { symbol as d3Symbol, symbol } from 'd3-shape';
+    import { symbol as d3Symbol } from 'd3-shape';
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 

package/dist/marks/DifferenceY.svelte

@@ -2,7 +2,6 @@
     import type {
         BaseMarkProps,
         ChannelAccessor,
-        ConstantAccessor,
         CurveName,
         DataRecord,
         PlotContext

package/dist/marks/Dot.svelte

@@ -15,7 +15,7 @@
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
-    import { maybeData, testFilter, isValid } from '../helpers/index.js';
+    import { maybeData, isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
 

package/dist/marks/Geo.svelte

@@ -4,9 +4,7 @@
         DataRecord,
         PlotContext,
         BaseMarkProps,
-        FacetContext,
-        ConstantAccessor,
-        UsedScales
+        ConstantAccessor
     } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';

package/dist/marks/GridX.svelte

@@ -7,12 +7,12 @@
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    type GrixXMarkProps = BaseMarkProps & {
+    type GridXMarkProps = BaseMarkProps & {
         data?: RawValue[];
         automatic?: boolean;
     };
 
-    let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
+    let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,8 +1,8 @@
 import type { BaseMarkProps, RawValue } from '../types.js';
-type GrixXMarkProps = BaseMarkProps & {
+type GridXMarkProps = BaseMarkProps & {
     data?: RawValue[];
     automatic?: boolean;
 };
-declare const GridX: import("svelte").Component<GrixXMarkProps, {}, "">;
+declare const GridX: import("svelte").Component<GridXMarkProps, {}, "">;
 type GridX = ReturnType<typeof GridX>;
 export default GridX;

package/dist/marks/GridY.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
+    import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
     import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';

package/dist/marks/Line.svelte

@@ -41,7 +41,7 @@
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { getContext } from 'svelte';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { line, type CurveFactory, type Line } from 'd3-shape';
+    import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
     import { geoPath } from 'd3-geo';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
@@ -100,7 +100,7 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const linePath: Line<ScaledDataRecord> = $derived(
+    const linePath: D3Line<ScaledDataRecord> = $derived(
         plot.scales.projection && curve === 'auto'
             ? sphereLine(plot.scales.projection)
             : callWithProps(line, [], {

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

@@ -21,7 +21,7 @@ export type BaseLineMarkProps = {
     lineClass?: ConstantAccessor<string>;
     canvas?: boolean;
 } & MarkerOptions;
-import { type CurveFactory, type Line } from 'd3-shape';
+import { type CurveFactory } from 'd3-shape';
 import type { RawValue } from '../types.js';
 type LineMarkProps = BaseMarkProps & {
     x?: ChannelAccessor;

package/dist/marks/Rect.svelte

@@ -6,8 +6,6 @@
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
     import { intervalX, intervalY } from '../index.js';
-    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeNumber } from '../helpers/index.js';
     import type {
         PlotContext,
         DataRecord,
@@ -15,7 +13,6 @@
         BaseRectMarkProps,
         ChannelAccessor
     } from '../types.js';
-    import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 

package/dist/marks/helpers/BaseAxisX.svelte

@@ -88,7 +88,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);

package/dist/marks/helpers/BaseAxisY.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext, tick, untrack } from 'svelte';
+    import { getContext, untrack } from 'svelte';
     import { randomId, testFilter } from '../../helpers/index.js';
     import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
@@ -70,7 +70,7 @@
         const T = tickObjects.length;
         for (let i = 0; i < T; i++) {
             let j = i;
-            // find the preceeding tick that was not hidden
+            // find the preceding tick that was not hidden
             do {
                 j--;
             } while (j >= 0 && tickObjects[j].hidden);

package/dist/marks/helpers/DotCanvas.svelte

@@ -6,7 +6,6 @@
         ScaledDataRecord,
         PlotContext
     } from '../../types.js';
-    import { CSS_VAR } from '../../constants.js';
     import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';

package/dist/marks/helpers/GeoCanvas.svelte

@@ -8,7 +8,7 @@
     } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { getContext, untrack } from 'svelte';
+    import { getContext } from 'svelte';
     import { type GeoPath } from 'd3-geo';
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';

package/dist/marks/helpers/MarkerPath.svelte

@@ -25,7 +25,7 @@
         datum: DataRecord;
         /**
          * the marker shape to use at the start of the path, defaults to
-         * cirlce
+         * circle
          */
         markerStart?: boolean | MarkerShape;
         /**

package/dist/marks/helpers/MarkerPath.svelte.d.ts

@@ -8,7 +8,7 @@ type MarkerPathProps = BaseMarkProps & {
     datum: DataRecord;
     /**
      * the marker shape to use at the start of the path, defaults to
-     * cirlce
+     * circle
      */
     markerStart?: boolean | MarkerShape;
     /**

package/dist/marks/helpers/events.js

@@ -1,4 +1,4 @@
-import { invert, pick } from 'es-toolkit';
+import { pick } from 'es-toolkit';
 import { RAW_VALUE } from '../../transforms/recordize.js';
 import { INDEX } from '../../constants.js';
 /**

package/dist/transforms/bin.d.ts

@@ -45,7 +45,7 @@ export declare function binX<T>({ data, ...channels }: TransformArg<T, DataRecor
  */
 export declare function binY<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinYOptions): TransformArg<T, DataRecord>;
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export declare function bin<T>({ data, ...channels }: TransformArg<T, DataRecord>, options?: BinOptions): TransformArg<T, DataRecord>;
 export {};

package/dist/transforms/bin.js

@@ -1,7 +1,7 @@
 import { resolveChannel } from '../helpers/resolve.js';
 import { maybeInterval } from '../helpers/autoTicks.js';
-import { bin as d3Bin, extent, groups as d3Groups, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from 'd3-array';
-import { Reducer, reduceOutputs } from '../helpers/reduce.js';
+import { bin as d3Bin, extent, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from 'd3-array';
+import { reduceOutputs } from '../helpers/reduce.js';
 import { groupFacetsAndZ } from '../helpers/group.js';
 import { isDate } from '../helpers/typeChecks.js';
 const ThresholdGenerators = {
@@ -87,7 +87,7 @@ export function binY({ data, ...channels }, options = { thresholds: 'auto', cumu
     return binBy('y', { data, ...channels }, options);
 }
 /**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
  */
 export function bin({ data, ...channels }, options = { thresholds: 'auto', cumulative: false }) {
     const { domain, thresholds = 'auto', interval, cumulative = false } = options;

package/dist/transforms/window.js

@@ -1,6 +1,6 @@
 import { maybeInterval } from '../helpers/autoTicks.js';
 import { isValid } from '../helpers/index.js';
-import { Reducer, mayberReducer } from '../helpers/reduce.js';
+import { mayberReducer } from '../helpers/reduce.js';
 import { resolveChannel } from '../helpers/resolve.js';
 import { groups as d3Groups } from 'd3-array';
 export function windowX(args, options) {

package/dist/types.d.ts

@@ -339,6 +339,10 @@ export type PlotDefaults = {
      */
     numberFormat: Intl.NumberFormatOptions;
     markerDotRadius: number;
+    /**
+     * fallback color to be used for null/NA
+     */
+    unknown: string;
     css: (d: string) => string | undefined;
 };
 export type GenericMarkOptions = Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.6-next.0",
+    "version": "0.2.6-next.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",