svelteplot 0.5.1-pr-238.5 → 0.5.1-pr-249.1

package/dist/constants.d.ts

@@ -1,6 +1,5 @@
-import type { ChannelName, ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
+import type { 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,28 +10,6 @@ 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,7 +1,6 @@
 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',
@@ -73,10 +72,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[ORIGINAL_NAME_KEYS[k]] = `${reducerName} ( ${channels[k]} )`;
+                        newChannels[`__${k}_origField`] = `${reducerName} ( ${channels[k]} )`;
                     }
                     else {
-                        newChannels[ORIGINAL_NAME_KEYS[k]] = reducerName;
+                        newChannels[`__${k}_origField`] = 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, ORIGINAL_NAME_KEYS, VALID_SCALE_TYPES } from '../constants.js';
+import { CHANNEL_SCALE, 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[ORIGINAL_NAME_KEYS[name]] &&
-                    !mark.options[ORIGINAL_NAME_KEYS[name]].startsWith('__')) {
-                    propNames.add(mark.options[ORIGINAL_NAME_KEYS[name]]);
+                    mark.options[`__${name}_origField`] &&
+                    !mark.options[`__${name}_origField`].startsWith('__')) {
+                    propNames.add(mark.options[`__${name}_origField`]);
                 }
             }
             else {

package/dist/marks/Area.svelte

@@ -14,6 +14,7 @@
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
+        areaClass?: ConstantAccessor<string, Datum>;
     }
 
     import Mark from '../Mark.svelte';
@@ -37,7 +38,6 @@
         ChannelAccessor,
         ScaledDataRecord,
         LinkableMarkProps,
-        PlotDefaults,
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
@@ -59,6 +59,7 @@
         curve = 'linear' as CurveName,
         tension = 0,
         class: className = '',
+        areaClass,
         canvas = false,
         ...options
     }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
@@ -114,14 +115,13 @@
     {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)}
         {#if canvas}
             <AreaCanvas groupedAreaData={grouped} {mark} {usedScales} {areaPath} />
         {:else}
-            <GroupMultiple length={grouped.length}>
+            <GroupMultiple class={className} length={grouped.length}>
                 {#each grouped as areaData, i (i)}
                     {@const datum = areaData[0]}
                     {#if areaData.length > 0}
@@ -135,7 +135,11 @@
                                 usedScales
                             )}
                             <path
-                                class={['area', className, styleClass]}
+                                class={[
+                                    'area',
+                                    resolveProp(areaClass, areaData[0].datum),
+                                    styleClass
+                                ]}
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
                                 {@attach addEventHandlers({

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

@@ -79,6 +79,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
+        areaClass?: ConstantAccessor<string, Datum>;
     };
     events(): {};
     slots(): {};

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

@@ -77,6 +77,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         };
         stack?: Partial<renameChannels>;
         canvas?: boolean;
+        areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y1" | "y2"> & {
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;

package/dist/transforms/bin.js

@@ -4,15 +4,6 @@ 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,
@@ -50,19 +41,19 @@ function binBy(byDim, { data, ...channels }, options) {
         [byDim === 'x' ? 'insetLeft' : 'insetTop']: 0.5,
         [byDim === 'x' ? 'insetRight' : 'insetBottom']: 0.5,
         ...channels,
-        [`${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
+        [`${byDim}`]: `__${byDim}`,
+        [`${byDim}1`]: `__${byDim}1`,
+        [`${byDim}2`]: `__${byDim}2`,
+        [`__${byDim}_origField`]: 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 = {
-            [CHANNELS[`${byDim}1`]]: group.x0,
-            [CHANNELS[`${byDim}2`]]: group.x1,
-            [CHANNELS[`${byDim}`]]: isDate(group.x0)
+            [`__${byDim}1`]: group.x0,
+            [`__${byDim}2`]: group.x1,
+            [`__${byDim}`]: isDate(group.x0)
                 ? new Date(Math.round((group.x0.getTime() + group.x1.getTime()) * 0.5))
                 : (group.x0 + group.x1) * 0.5
         };
@@ -110,12 +101,11 @@ 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((yThresholds = maybeInterval(interval).range(ylo, yhi)));
+        binY.thresholds(maybeInterval(interval).range(ylo, yhi));
     }
     else if (thresholds) {
         // when binning in x and y, we need to ensure we are using consistent thresholds
@@ -124,7 +114,7 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
             : thresholds;
         binX.thresholds(t);
         binY.thresholds(t);
-        yThresholds = binY(data)
+        const yThresholds = binY(data)
             .slice(1)
             .map((g) => g.x0);
         binY.thresholds(yThresholds);
@@ -134,14 +124,14 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     let newChannels = {
         inset: 0.5,
         ...channels,
-        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
+        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
     };
     const groupBy = channels.z ? 'z' : channels.fill ? 'fill' : channels.stroke ? 'stroke' : true;
     const groupByPropName = groupBy !== true && typeof channels[groupBy] === 'string' ? channels[groupBy] : '__group';
@@ -151,30 +141,20 @@ export function bin({ data, ...channels }, options = { thresholds: 'auto', cumul
     const newData = [];
     binX(data).forEach((groupX) => {
         const newRecordBaseX = {
-            [CHANNELS.x1]: groupX.x0,
-            [CHANNELS.x2]: groupX.x1,
-            [CHANNELS.x]: isDate(groupX.x0)
+            __x1: groupX.x0,
+            __x2: groupX.x1,
+            __x: isDate(groupX.x0)
                 ? new Date(Math.round((groupX.x0.getTime() + groupX.x1.getTime()) * 0.5))
                 : (groupX.x0 + groupX.x1) * 0.5
         };
-        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;
+        binY(groupX).forEach((groupY) => {
             const newRecordBaseY = {
                 ...newRecordBaseX,
-                [CHANNELS.y1]: y1,
-                [CHANNELS.y2]: y2,
-                [CHANNELS.y]: isDate(y1)
-                    ? new Date(Math.round((y1.getTime() + y2.getTime()) * 0.5))
-                    : (y1 + y2) * 0.5
+                __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
             };
             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, ORIGINAL_NAME_KEYS } from '../constants.js';
+import { INDEX } 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[ORIGINAL_NAME_KEYS[byDim]]
-                ? { [ORIGINAL_NAME_KEYS[byDim]]: channels[byDim] }
+            ...(typeof channels[byDim] === 'string' && !channels[`__${byDim}_origField`]
+                ? { [`__${byDim}_origField`]: 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 | symbol, ChannelAccessor<T> | ConstantAccessor<T, string | number | boolean | symbol>>;
+export type Channels<T> = Record<string, 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-238.5",
+    "version": "0.5.1-pr-249.1",
     "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.43.0"
+        "svelte": "5.41.3"
     }
 }