svelteplot 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/transforms/stack.js

@@ -0,0 +1,80 @@
+import isDataRecord from '../helpers/isDataRecord.js';
+import resolveChannel from '../helpers/resolveChannel.js';
+import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone } from 'd3-shape';
+import { index, union } from 'd3-array';
+const DEFAULT_STACK_OPTIONS = {
+    order: null,
+    offset: null,
+    reverse: false
+};
+const STACK_ORDER = {
+    // null
+    // TODO: value: ,
+    none: stackOrderNone,
+    sum: stackOrderAscending,
+    appearance: stackOrderAppearance,
+    'inside-out': stackOrderInsideOut
+};
+const STACK_OFFSET = {
+    none: null,
+    wiggle: stackOffsetWiggle,
+    center: stackOffsetSilhouette,
+    normalize: stackOffsetExpand
+};
+function stackXY(byDim, data, channels, options) {
+    const groupBy = channels.z ? 'z' : channels.fill ? 'fill' : channels.stroke ? 'stroke' : true;
+    const secondDim = byDim === 'x' ? 'y' : 'x';
+    const byLow = `${byDim}1`;
+    const byHigh = `${byDim}2`;
+    if (channels[byDim] !== undefined &&
+        channels[`${byLow}`] === undefined &&
+        channels[`${byHigh}`] === undefined) {
+        const resolvedData = data.map((d) => ({
+            ...(isDataRecord(d) ? d : { __orig: d }),
+            [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
+            __group: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
+            [`__${byDim}`]: resolveChannel(byDim, d, channels)
+        }));
+        const indexed = index(resolvedData, (d) => d[`__${secondDim}`], (d) => d.__group);
+        const stackOrder = (series) => {
+            const f = STACK_ORDER[options.order || 'none'];
+            return options.reverse ? f(series).reverse() : f(series);
+        };
+        const series = stack()
+            .order(stackOrder)
+            .offset(STACK_OFFSET[options.offset])
+            .keys(union(resolvedData.map((d) => d.__group)))
+            .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
+        const newData = series
+            .map((values) => {
+            const groupKey = values.key;
+            return values
+                .filter((d) => d.data[1].get(groupKey))
+                .map((d) => {
+                const { [`__${byDim}`]: unused1, [`__${secondDim}`]: unused2, ...datum } = d.data[1].get(groupKey);
+                return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
+            });
+        })
+            .flat(1);
+        console.log({ newData });
+        return {
+            data: newData,
+            ...channels,
+            [byDim]: undefined,
+            ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` }
+        };
+    }
+    return { data, ...channels };
+}
+export function stackY({ data, ...channels }, opts = {}) {
+    return stackXY('y', data, channels, applyDefaults(opts));
+}
+export function stackX({ data, ...channels }, opts = {}) {
+    return stackXY('x', data, channels, applyDefaults(opts));
+}
+function applyDefaults(opts) {
+    if (opts.offset === 'wiggle' && opts.order === undefined) {
+        return { ...DEFAULT_STACK_OPTIONS, order: 'inside-out', ...opts };
+    }
+    return { ...DEFAULT_STACK_OPTIONS, ...opts };
+}

package/dist/types.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-import type { CHANNEL_TYPES } from './contants';
-import type { Plot } from './classes/Plot.svelte';
+import type { SCALE_TYPES } from './contants.js';
+import type { Plot } from './classes/Plot.svelte.js';
 import type { MouseEventHandler } from 'svelte/elements';
+export type ScaleName = 'opacity' | 'color' | 'x' | 'y' | 'angle' | 'radius' | 'symbol' | 'width' | 'fontSize';
 export type Datasets = {
     aapl: {
         Date: Date;
@@ -11,6 +12,10 @@ export type Datasets = {
         Close: number;
         'Adj Close': number;
     }[];
+    alphabet: {
+        letter: string;
+        frequency: number;
+    }[];
     cars: {
         name: string;
         'economy (mpg)': number;
@@ -30,10 +35,37 @@ export type Datasets = {
         body_mass_g: number;
         sex: string;
     }[];
+    bls: {
+        division: string;
+        date: Date;
+        unemployment: number;
+    }[];
+    stageage: {
+        state: string;
+        age: string;
+        population: number;
+        pop_share: number;
+    }[];
+    stocks: {
+        Symbol: string;
+        Date: Date;
+        Open: number;
+        High: number;
+        Low: number;
+        Close: number;
+        'Adj Close': number;
+        Volume: number;
+    }[];
+    riaa: {
+        format: string;
+        group: string;
+        year: Date;
+        revenue: number;
+    }[];
 };
 export type AxisXAnchor = 'bottom' | 'top' | 'both';
 export type AxisYAnchor = 'left' | 'right' | 'both';
-export type PositionChannelOptions = Partial<{
+export type PositionScaleOptions = Partial<{
     label?: string | null;
     domain?: [number, number] | null;
     grid?: boolean;
@@ -42,7 +74,11 @@ export type PositionChannelOptions = Partial<{
     log?: boolean;
     reverse?: boolean;
 }>;
+export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'point' | 'band';
+export type PositionScaleType = ScaleType | ('point' | 'band');
+export type ColorScaleType = ScaleType | ('categorical' | 'sequential' | 'sequentialSymlog' | 'sequentialLog' | 'sequentialPow' | 'sequentialSqrt' | 'sequentialQuantile' | 'cyclical' | 'threshold' | 'quantile' | 'quantize' | 'diverging' | 'divergingLog' | 'divergingPow' | 'divergingSqrt' | 'divergingSymlog');
 export type PlotProps = {
+    testid?: string;
     height?: number | 'auto';
     marginTop?: number;
     marginBottom?: number;
@@ -63,13 +99,15 @@ export type PlotProps = {
     radius?: {
         range?: [number, number];
     };
-    x?: PositionChannelOptions & {
+    x?: PositionScaleOptions & {
+        type?: PositionScaleType;
         axis?: AxisXAnchor | {
             anchor: AxisXAnchor;
             tickSpacing: number;
         };
     };
-    y?: PositionChannelOptions & {
+    y?: PositionScaleOptions & {
+        type?: PositionScaleType;
         axis?: AxisYAnchor | {
             anchor: AxisYAnchor;
             tickSpacing: number;
@@ -80,7 +118,10 @@ export type PlotProps = {
         legend?: boolean;
     } | null;
     color?: {
-        scheme?: ColorScheme | string[];
+        type?: ColorScaleType;
+        range?: string[];
+        domain: RawValue[];
+        scheme?: ColorScheme;
         legend?: boolean;
     } | null;
 };
@@ -95,13 +136,13 @@ export type GridProps = {
 };
 export type DataRecord = Record<string, RawValue>;
 export type DataRow = DataRecord | RawValue | [number, number];
-export type ChannelAccessor = RawValue | ((d: DataRow) => RawValue) | null;
+export type ChannelAccessor = RawValue | ((d: DataRow) => RawValue) | null | undefined;
 export type RawValue = number | Date | boolean | string | null;
-export type ChannelName = 'opacity' | 'color' | 'x' | 'y' | 'angle' | 'radius' | 'symbol' | 'width';
+export type ChannelName = 'angle' | 'fill' | 'fillOpacity' | 'fontSize' | 'opacity' | 'r' | 'sort' | 'stroke' | 'strokeDasharray' | 'strokeOpacity' | 'symbol' | 'width' | 'x' | 'x1' | 'x2' | 'y' | 'y1' | 'y2' | 'z';
 export type MarkStyleProps = 'strokeDasharray' | 'opacity' | 'fill' | 'fillOpacity' | 'fontSize' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'angle' | 'radius' | 'symbol' | 'width';
 export type MarkProps2 = 'x' | 'y' | 'r' | 'rotate' | 'symbol';
 export type ValueOf<T> = T[keyof T];
-export type ChannelType = ValueOf<typeof CHANNEL_TYPES>;
+export type ChannelType = ValueOf<typeof SCALE_TYPES>;
 export interface MarkProps {
     data: DataRow[];
 }
@@ -120,20 +161,6 @@ export type BaseMarkStyleProps = {
     strokeDasharray?: ChannelAccessor;
 };
 export type FrameProps = BaseMarkStyleProps;
-export type DotMarkProps = MarkProps & BaseMarkStyleProps & {
-    data: DataRow[];
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-    r?: ChannelAccessor;
-    rotate?: ChannelAccessor;
-    symbol?: ChannelAccessor;
-};
-export type LineMarkProps = MarkProps & BaseMarkStyleProps & {
-    data: DataRow[];
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-    z?: ChannelAccessor;
-};
 export type GridOptions = {
     ticks?: RawValue[];
     strokeDasharray?: ChannelAccessor;
@@ -184,5 +211,15 @@ export type RuleYMarkProps = MarkProps & RuleMarkProps & {
     x1?: ChannelAccessor;
     x2?: ChannelAccessor;
 };
+export type TickMarkProps = MarkProps & {
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    stroke?: ChannelAccessor;
+};
 export type ColorScheme = 'brbg' | 'prgn' | 'piyg' | 'puor' | 'rdbu' | 'rdgy' | 'rdylbu' | 'rdylgn' | 'spectral' | 'burd' | 'buylrd' | 'blues' | 'greens' | 'greys' | 'oranges' | 'purples' | 'reds' | 'turbo' | 'viridis' | 'magma' | 'inferno' | 'plasma' | 'cividis' | 'cubehelix' | 'warm' | 'cool' | 'bugn' | 'bupu' | 'gnbu' | 'orrd' | 'pubu' | 'pubugn' | 'purd' | 'rdpu' | 'ylgn' | 'ylgnbu' | 'ylorbr' | 'ylorrd' | 'rainbow' | 'sinebow' | 'accent' | 'category10' | 'dark2' | 'paired' | 'pastel1' | 'pastel2' | 'set1' | 'set2' | 'set3' | 'tableau10';
+export type Curve = 'basis' | 'basis-closed' | 'basis-open' | 'bundle' | 'bump-x' | 'bump-y' | 'cardinal' | 'cardinal-closed' | 'cardinal-open' | 'catmull-rom' | 'catmull-rom-closed' | 'catmull-rom-open' | 'linear' | 'linear-closed' | 'monotone-x' | 'monotone-y' | 'natural' | 'step' | 'step-after' | 'step-before';
+type Channels = Partial<Record<ChannelName, ChannelAccessor>>;
+export type TransformArg = Channels & {
+    data: DataRow[];
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.2",
+    "version": "0.0.1-alpha.21",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
@@ -12,7 +12,8 @@
         "format": "prettier --write .",
         "test:integration": "playwright test",
         "test:unit": "vitest",
-        "prepack": "npx svelte-package"
+        "prepack": "npx svelte-package",
+        "release-alpha": "npm run build && npm version prerelease --preid alpha && npm publish"
     },
     "exports": {
         ".": {
@@ -25,53 +26,57 @@
         "!dist/**/*.test.*",
         "!dist/**/*.spec.*"
     ],
-    "peerDependencies": {
-        "svelte": "^4.0.0"
-    },
     "devDependencies": {
+        "@sveltejs/package": "^2.2.5",
         "@playwright/test": "^1.40.1",
-        "@sveltejs/adapter-auto": "^2.1.1",
-        "@sveltejs/kit": "^1.27.6",
+        "@sveltejs/adapter-auto": "^3.1.0",
+        "@sveltejs/kit": "^2.3.2",
         "@types/chroma-js": "^2.4.3",
+        "@types/d3-dsv": "^3.0.7",
         "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-random": "^3.0.3",
         "@types/d3-scale-chromatic": "^3.0.3",
         "@types/d3-shape": "^3.1.6",
-        "@typescript-eslint/eslint-plugin": "^6.13.2",
-        "@typescript-eslint/parser": "^6.13.2",
+        "@types/d3-array": "^3.2.1",
+        "@types/d3-scale": "^4.0.8",
+        "@types/underscore": "^1.11.15",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/parser": "^6.19.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.1",
+        "@sveltepress/theme-default": "^1.22.3",
+        "@sveltepress/vite": "^0.31.3",
         "bulma": "^0.9.4",
         "d3-dsv": "^3.0.1",
-        "dayjs": "^1.11.10",
-        "eslint": "^8.55.0",
+        "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
         "highlight.js": "^11.9.0",
         "highlightjs-svelte": "^1.0.6",
-        "prettier": "^3.1.0",
+        "prettier": "^3.2.2",
         "prettier-plugin-svelte": "^3.1.2",
-        "sass": "^1.69.5",
-        "svelte": "5.0.0-next.20",
-        "svelte-check": "^3.6.2",
-        "svelte-highlight": "^7.4.2",
+        "sass": "^1.69.7",
+        "svelte": "5.0.0-next.35",
+        "svelte-check": "^3.6.3",
+        "svelte-highlight": "^7.4.8",
         "tslib": "^2.6.2",
-        "typescript": "^5.3.2",
-        "vite": "^5.0.5",
-        "vitest": "^1.0.1"
+        "typescript": "^5.3.3",
+        "vite": "^5.0.11",
+        "vitest": "^1.2.0"
     },
     "svelte": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "type": "module",
     "dependencies": {
-        "@sveltejs/package": "^2.2.3",
-        "@types/d3-array": "^3.2.1",
-        "@types/d3-scale": "^4.0.8",
-        "@types/underscore": "^1.11.15",
+        "@observablehq/plot": "^0.6.13",
         "chroma-js": "^2.4.2",
         "d3-array": "^3.2.4",
         "d3-interpolate": "^3.0.1",
+        "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-scale-chromatic": "^3.0.0",
         "d3-shape": "^3.2.0",
         "d3-time-format": "^4.1.0",
+        "dayjs": "^1.11.10",
         "merge-deep": "^3.0.3",
         "underscore": "^1.13.6"
     }

package/dist/classes/Channel.svelte.js

@@ -1,72 +0,0 @@
-import resolveChannel from '../helpers/resolveChannel';
-import { extent } from 'd3-array';
-import { MARK_PROP_CHANNEL, CHANNEL_TYPES } from '../contants';
-import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks';
-import { uniq } from 'underscore';
-export class Channel {
-    name = undefined;
-    plot = undefined;
-    constructor(name, plot) {
-        this.name = name;
-        this.plot = plot;
-    }
-    // readonly type: ChannelType = CHANNEL_TYPES.position;
-    // all marks that have this channel
-    marks = $derived(this.plot?.marks ?? []);
-    forceDomain = $derived(this.plot && (this.name === 'x' || this.name === 'y')
-        ? this.plot.options[this.name]?.domain || null
-        : null);
-    possibleProps = $derived(Object.entries(MARK_PROP_CHANNEL)
-        .filter(([, channel]) => channel === this.name)
-        .map(([prop]) => prop));
-    activeMarks = $derived(this.marks.filter((mark) => mark.channels.has(this.name) && this.possibleProps.find((prop) => mark.props[prop])));
-    manualActiveMarks = $derived(this.activeMarks.filter((mark) => !mark.automatic));
-    autoTitle = $derived(this.manualActiveMarks.length === 1 &&
-        typeof this.manualActiveMarks[0].props?.[this.name] === 'string'
-        ? this.manualActiveMarks[0].props?.[this.name]
-        : null);
-    uniqueMarkProps = $derived(uniq(this.manualActiveMarks
-        .map((mark) => this.possibleProps
-        .filter((prop) => mark.props[prop])
-        .map((prop) => mark.props[prop]))
-        .flat(2)));
-    dataValues = $derived([
-        ...this.activeMarks
-            // only check marks with data
-            .filter((mark) => mark.props.data.length)
-            .map((mark) => this.possibleProps.map((prop) => mark.props.data.map((row) => resolveChannel(this.name, row, mark.props[prop]))))
-            .flat(3)
-            .filter((d) => d != null),
-        ...(this.forceDomain || [])
-    ]);
-    valueType = $derived(this.dataValues.every((v) => v == null)
-        ? 'null'
-        : this.dataValues.every(isColorOrNull)
-            ? 'color'
-            : this.dataValues.every(isBooleanOrNull)
-                ? 'boolean'
-                : this.dataValues.every(isStringOrNull)
-                    ? 'text'
-                    : this.dataValues.every(isNumberOrNull)
-                        ? 'number'
-                        : this.dataValues.every(isDateOrNull)
-                            ? 'date'
-                            : 'mixed');
-    domain = $derived(!this.dataValues.length
-        ? [0, 1]
-        : this.valueType === 'boolean' ||
-            this.valueType === 'text' ||
-            this.valueType === 'color'
-            ? uniq(this.dataValues)
-            : extent(this.dataValues));
-    scaleType = $derived(this.name === 'radius'
-        ? 'sqrt'
-        : this.valueType === 'date'
-            ? 'time'
-            : this.valueType === 'number'
-                ? 'linear'
-                : this.valueType === 'text'
-                    ? 'band'
-                    : 'linear');
-}
-// opacity: typeof === 'number' && between [0,1]