svelteplot 0.5.1-pr-249.1 → 0.5.1-pr-238.6

package/dist/constants.d.ts

@@ -1,5 +1,6 @@
-import type { ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
+import type { ChannelName, ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
 export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const ORIGINAL_NAME_KEYS: Record<ChannelName, symbol>;
 export declare const SCALES: ScaleName[];
 export declare const VALID_SCALE_TYPES: Record<ScaleName, Set<ScaleType>>;
 /**

package/dist/constants.js

@@ -10,6 +10,28 @@ export const SCALE_TYPES = {
     fy: Symbol('fy'),
     projection: Symbol('projection')
 };
+export const ORIGINAL_NAME_KEYS = {
+    x: Symbol('origName_x'),
+    x1: Symbol('origName_x1'),
+    x2: Symbol('origName_x2'),
+    y: Symbol('origName_y'),
+    y1: Symbol('origName_y1'),
+    y2: Symbol('origName_y2'),
+    fill: Symbol('origName_color'),
+    stroke: Symbol('origName_color'),
+    opacity: Symbol('origName_opacity'),
+    symbol: Symbol('origName_symbol'),
+    r: Symbol('origName_r'),
+    z: Symbol('origName_z'),
+    sort: Symbol('origName_sort'),
+    filter: Symbol('origName_filter'),
+    interval: Symbol('origName_interval'),
+    length: Symbol('origName_length'),
+    fx: Symbol('origName_fx'),
+    fy: Symbol('origName_fy'),
+    fillOpacity: Symbol('origName_opacity'),
+    strokeOpacity: Symbol('origName_opacity')
+};
 export const SCALES = [
     'x',
     'y',

package/dist/helpers/reduce.js

@@ -1,6 +1,7 @@
 import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
+import { ORIGINAL_NAME_KEYS } from '../constants.js';
 const niceReduceNames = {
     count: 'Frequency',
     deviation: 'Standard Deviation',
@@ -72,10 +73,10 @@ export function reduceOutputs(newDatum, data, options, outputs, channels, newCha
                     if (typeof channels[k] === 'string') {
                         // the named reducer is applied to a column name, so we can use a combination
                         // of both as axis labels, e.g. MEAN(weight)
-                        newChannels[`__${k}_origField`] = `${reducerName} ( ${channels[k]} )`;
+                        newChannels[ORIGINAL_NAME_KEYS[k]] = `${reducerName} ( ${channels[k]} )`;
                     }
                     else {
-                        newChannels[`__${k}_origField`] = reducerName;
+                        newChannels[ORIGINAL_NAME_KEYS[k]] = reducerName;
                     }
                 }
             }

package/dist/helpers/scales.js

@@ -1,6 +1,6 @@
 import { extent, ascending } from 'd3-array';
 import { isColorOrNull, isDate, isDateOrNull, isNumberOrNull, isNumberOrNullOrNaN, isStringOrNull } from './typeChecks.js';
-import { CHANNEL_SCALE, VALID_SCALE_TYPES } from '../constants.js';
+import { CHANNEL_SCALE, ORIGINAL_NAME_KEYS, VALID_SCALE_TYPES } from '../constants.js';
 import { isSymbolOrNull } from './typeChecks.js';
 import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
@@ -126,9 +126,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                 }
                 // special handling of marks using the stackX/stackY transform
                 if ((name === 'x' || name === 'y') &&
-                    mark.options[`__${name}_origField`] &&
-                    !mark.options[`__${name}_origField`].startsWith('__')) {
-                    propNames.add(mark.options[`__${name}_origField`]);
+                    mark.options[ORIGINAL_NAME_KEYS[name]] &&
+                    !mark.options[ORIGINAL_NAME_KEYS[name]].startsWith('__')) {
+                    propNames.add(mark.options[ORIGINAL_NAME_KEYS[name]]);
                 }
             }
             else {

package/dist/marks/Area.svelte

@@ -115,6 +115,7 @@
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     required={['x1', 'y1']}
+    {...markProps}
     {...options}>
     {#snippet children({ mark, usedScales, scaledData })}
         {@const grouped = groupAndSort(scaledData)}

package/dist/transforms/bin.js

@@ -4,6 +4,15 @@ import { bin as d3Bin, extent, thresholdFreedmanDiaconis, thresholdScott, thresh
 import { reduceOutputs } from '../helpers/reduce.js';
 import { groupFacetsAndZ } from '../helpers/group.js';
 import { isDate } from '../helpers/typeChecks.js';
+import { ORIGINAL_NAME_KEYS } from '../constants';
+const CHANNELS = {
+    x: Symbol('x'),
+    x1: Symbol('x1'),
+    x2: Symbol('x2'),
+    y: Symbol('y'),
+    y1: Symbol('y1'),
+    y2: Symbol('y2')
+};
 const ThresholdGenerators = {
     auto: thresholdScott,
     scott: thresholdScott,
@@ -41,19 +50,19 @@ function binBy(byDim, { data, ...channels }, options) {
         [byDim === 'x' ? 'insetLeft' : 'insetTop']: 0.5,
         [byDim === 'x' ? 'insetRight' : 'insetBottom']: 0.5,
         ...channels,
-        [`${byDim}`]: `__${byDim}`,
-        [`${byDim}1`]: `__${byDim}1`,
-        [`${byDim}2`]: `__${byDim}2`,
-        [`__${byDim}_origField`]: typeof channels[byDim] === 'string' ? channels[byDim] : null
+        [`${byDim}`]: CHANNELS[byDim], // `__${byDim}`,
+        [`${byDim}1`]: CHANNELS[`${byDim}1`],
+        [`${byDim}2`]: CHANNELS[`${byDim}2`],
+        [ORIGINAL_NAME_KEYS[byDim]]: typeof channels[byDim] === 'string' ? channels[byDim] : null
     };
     const newData = [];
     let passedGroups = [];
     const bins = bin(data);
     (options.cumulative < 0 ? bins.toReversed() : bins).forEach((group) => {
         const itemBinProps = {
-            [`__${byDim}1`]: group.x0,
-            [`__${byDim}2`]: group.x1,
-            [`__${byDim}`]: isDate(group.x0)
+            [CHANNELS[`${byDim}1`]]: group.x0,
+            [CHANNELS[`${byDim}2`]]: group.x1,
+            [CHANNELS[`${byDim}`]]: isDate(group.x0)
                 ? new Date(Math.round((group.x0.getTime() + group.x1.getTime()) * 0.5))
                 : (group.x0 + group.x1) * 0.5
         };
@@ -101,11 +110,12 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     // channels.x is the input
     binX.value((d) => resolveChannel('x', d, channels));
     binY.value((d) => resolveChannel('y', d, channels));
+    let yThresholds = [];
     if (interval) {
         const [xlo, xhi] = extent(data.map((d) => resolveChannel('x', d, channels)));
         const [ylo, yhi] = extent(data.map((d) => resolveChannel('y', d, channels)));
         binX.thresholds(maybeInterval(interval).range(xlo, xhi));
-        binY.thresholds(maybeInterval(interval).range(ylo, yhi));
+        binY.thresholds((yThresholds = maybeInterval(interval).range(ylo, yhi)));
     }
     else if (thresholds) {
         // when binning in x and y, we need to ensure we are using consistent thresholds
@@ -114,7 +124,7 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
             : thresholds;
         binX.thresholds(t);
         binY.thresholds(t);
-        const yThresholds = binY(data)
+        yThresholds = binY(data)
             .slice(1)
             .map((g) => g.x0);
         binY.thresholds(yThresholds);
@@ -124,14 +134,14 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     let newChannels = {
         inset: 0.5,
         ...channels,
-        x: '__x',
-        x1: '__x1',
-        x2: '__x2',
-        y: '__y',
-        y1: '__y1',
-        y2: '__y2',
-        __x_origField: typeof channels.x === 'string' ? channels.x : null,
-        __y_origField: typeof channels.y === 'string' ? channels.y : null
+        x: CHANNELS.x,
+        x1: CHANNELS.x1,
+        x2: CHANNELS.x2,
+        y: CHANNELS.y,
+        y1: CHANNELS.y1,
+        y2: CHANNELS.y2,
+        [ORIGINAL_NAME_KEYS.x]: typeof channels.x === 'string' ? channels.x : null,
+        [ORIGINAL_NAME_KEYS.y]: typeof channels.y === 'string' ? channels.y : null
     };
     const groupBy = channels.z ? 'z' : channels.fill ? 'fill' : channels.stroke ? 'stroke' : true;
     const groupByPropName = groupBy !== true && typeof channels[groupBy] === 'string' ? channels[groupBy] : '__group';
@@ -141,20 +151,30 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     const newData = [];
     binX(data).forEach((groupX) => {
         const newRecordBaseX = {
-            __x1: groupX.x0,
-            __x2: groupX.x1,
-            __x: isDate(groupX.x0)
+            [CHANNELS.x1]: groupX.x0,
+            [CHANNELS.x2]: groupX.x1,
+            [CHANNELS.x]: isDate(groupX.x0)
                 ? new Date(Math.round((groupX.x0.getTime() + groupX.x1.getTime()) * 0.5))
                 : (groupX.x0 + groupX.x1) * 0.5
         };
-        binY(groupX).forEach((groupY) => {
+        const [ylo, yhi] = extent(groupX.map((d) => resolveChannel('y', d, channels)));
+        const tExtentLo = yThresholds.filter((d) => d < ylo).at(-1);
+        const tExtentHi = yThresholds.filter((d) => d > yhi).at(0);
+        binY(groupX).forEach((groupY, i) => {
+            if (groupY.length === 0)
+                return;
+            // The first bin.x0 is always equal to the minimum domain value,
+            // and the last bin.x1 is always equal to the maximum domain value,
+            // therefore we need to align with the thresholds
+            const y1 = groupY.x0 === ylo ? tExtentLo : groupY.x0;
+            const y2 = groupY.x1 === yhi ? tExtentHi : groupY.x1;
             const newRecordBaseY = {
                 ...newRecordBaseX,
-                __y1: groupY.x0,
-                __y2: groupY.x1,
-                __y: isDate(groupY.x0)
-                    ? new Date(Math.round((groupY.x0.getTime() + groupY.x1.getTime()) * 0.5))
-                    : (groupY.x0 + groupY.x1) * 0.5
+                [CHANNELS.y1]: y1,
+                [CHANNELS.y2]: y2,
+                [CHANNELS.y]: isDate(y1)
+                    ? new Date(Math.round((y1.getTime() + y2.getTime()) * 0.5))
+                    : (y1 + y2) * 0.5
             };
             const newGroupChannels = groupFacetsAndZ(groupY, channels, (items, itemGroupProps) => {
                 const newRecord = {

package/dist/transforms/stack.js

@@ -5,7 +5,7 @@ import { sum, groups as d3Groups, min, range } from 'd3-array';
 import { groupFacetsAndZ } from '../helpers/group';
 import { filter } from './filter.js';
 import { sort } from './sort.js';
-import { INDEX } from '../constants.js';
+import { INDEX, ORIGINAL_NAME_KEYS } from '../constants.js';
 import { indexData, RAW_VALUE } from './recordize.js';
 const S = {
     x: Symbol('x'),
@@ -147,8 +147,8 @@ function stackXY(byDim, data, channels, options) {
             data: out,
             ...channels,
             [byDim]: undefined,
-            ...(typeof channels[byDim] === 'string' && !channels[`__${byDim}_origField`]
-                ? { [`__${byDim}_origField`]: channels[byDim] }
+            ...(typeof channels[byDim] === 'string' && !channels[ORIGINAL_NAME_KEYS[byDim]]
+                ? { [ORIGINAL_NAME_KEYS[byDim]]: channels[byDim] }
                 : {}),
             ...{ [byLow]: S[byLow], [byHigh]: S[byHigh] }
         };

package/dist/types/channel.d.ts

@@ -1,5 +1,5 @@
 import type { ConstantAccessor, RawValue } from './index.js';
-export type Channels<T> = Record<string, ChannelAccessor<T> | ConstantAccessor<T, string | number | boolean | symbol>>;
+export type Channels<T> = Record<string | symbol, ChannelAccessor<T> | ConstantAccessor<T, string | number | boolean | symbol>>;
 export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValue<T> | {
     /** the channel value */
     value: ChannelValue<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.5.1-pr-249.1",
+    "version": "0.5.1-pr-238.6",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -130,6 +130,6 @@
         "fast-equals": "^5.3.2",
         "interval-tree-1d": "^1.0.4",
         "merge-deep": "^3.0.3",
-        "svelte": "5.41.3"
+        "svelte": "5.43.0"
     }
 }