svelteplot 0.2.5 → 0.2.6-next.0

package/dist/core/Plot.svelte

@@ -28,22 +28,6 @@
     import mergeDeep from '../helpers/mergeDeep.js';
     import { computeScales, projectXY } from '../helpers/scales.js';
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
-    import { scale } from 'svelte/transition';
-
-    let {
-        header,
-        footer,
-        overlay,
-        underlay,
-        children,
-        facetAxes,
-        testid,
-        facet,
-        class: className = '',
-        css,
-        width: fixedWidth,
-        ...initialOpts
-    }: Partial<PlotOptions> = $props();
 
     // automatic margins can be applied by the marks, registered
     // with their respective unique identifier as keys
@@ -95,6 +79,21 @@
         ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
     };
 
+    let {
+        header,
+        footer,
+        overlay,
+        underlay,
+        children,
+        facetAxes,
+        testid,
+        facet,
+        class: className = '',
+        css = DEFAULTS.css,
+        width: fixedWidth,
+        ...initialOpts
+    }: Partial<PlotOptions> = $props();
+
     let width = $state(DEFAULTS.initialWidth);
 
     setContext('svelteplot/_defaults', DEFAULTS);
@@ -454,7 +453,8 @@
             symbol: { type: 'ordinal' },
             fx: { type: 'band', axis: 'top' },
             fy: { type: 'band', axis: 'right' },
-            locale: DEFAULTS.locale
+            locale: DEFAULTS.locale,
+            css: DEFAULTS.css
         };
     }
 

package/dist/helpers/getBaseStyles.js

@@ -15,6 +15,7 @@ const styleProps = {
     fontWeight: 'font-weight',
     fontStyle: 'font-style',
     textAnchor: 'text-anchor',
+    fontVariant: 'font-variant',
     cursor: 'cursor',
     pointerEvents: 'pointer-events'
 };

package/dist/marks/helpers/BaseAxisX.svelte

@@ -11,7 +11,7 @@
         RawValue,
         ScaleType
     } from '../../types.js';
-    import { resolveScaledStyles, resolveProp } from '../../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
 
@@ -142,7 +142,7 @@
 </script>
 
 <g class="axis-x">
-    {#each positionedTicks as tick, t}
+    {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
             {@const textLines = tick.text}
             {@const prevTextLines = t && positionedTicks[t - 1].text}
@@ -152,27 +152,41 @@
             {@const moveDown =
                 (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
                 (anchor === 'bottom' ? 1 : -1)}
+            {@const [textStyle, textClass] = resolveStyles(
+                plot,
+                tick,
+                {
+                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                    ...options,
+                    fontSize: tickFontSize,
+                    stroke: null
+                },
+                'fill',
+                { x: true }
+            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
                 text-anchor={tickRotate < 0 ? 'end' : tickRotate > 0 ? 'start' : 'middle'}>
                 {#if tickSize}
+                    {@const [tickLineStyle, tickLineClass] = resolveStyles(
+                        plot,
+                        tick,
+                        options,
+                        'stroke',
+                        { x: true }
+                    )}
                     <line
-                        style={resolveScaledStyles(tick, options, {}, plot, 'stroke')}
+                        style={tickLineStyle}
+                        class={tickLineClass}
                         y2={anchor === 'bottom' ? tickSize : -tickSize} />
                 {/if}
 
                 <text
                     bind:this={tickTextElements[t]}
                     transform="translate(0, {moveDown})  rotate({tickRotate})"
-                    style:font-variant={isQuantitative ? 'tabular-nums' : 'normal'}
-                    style={resolveScaledStyles(
-                        tick,
-                        { ...options, fontSize: tickFontSize, stroke: null },
-                        {},
-                        plot,
-                        'fill'
-                    )}
+                    style={textStyle}
+                    class={textClass}
                     x={0}
                     y={0}
                     dominant-baseline={tickRotate !== 0

package/dist/marks/helpers/BaseAxisY.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { getContext, untrack } from 'svelte';
+    import { getContext, tick, untrack } from 'svelte';
     import { randomId, testFilter } from '../../helpers/index.js';
-    import { resolveProp, resolveScaledStyles } from '../../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import type {
         AutoMarginStores,
@@ -84,6 +84,8 @@
 
     let tickTexts = $state([] as SVGTextElement[]);
 
+    const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
+
     // generate id used for registering margins
     const id = randomId();
 
@@ -141,29 +143,43 @@
 </script>
 
 <g class="axis-y">
-    {#each positionedTicks as tick, t}
+    {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick.value)}
+            {@const [textStyle, textClass] = resolveStyles(
+                plot,
+                tick,
+                {
+                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                    ...options,
+                    fontSize: tickFontSize,
+                    stroke: null
+                },
+                'fill',
+                { y: true }
+            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.dx +
                     marginLeft +
                     (anchor === 'left' ? 0 : width)},{tick.y + tick.dy})">
                 {#if tickSize}
+                    {@const [tickLineStyle, tickLineClass] = resolveStyles(
+                        plot,
+                        tick,
+                        options,
+                        'stroke',
+                        { y: true }
+                    )}
                     <line
-                        style={resolveScaledStyles(tick.value, options, {}, plot, 'stroke')}
+                        style={tickLineStyle}
+                        class={tickLineClass}
                         x2={anchor === 'left' ? -tickSize : tickSize} />
                 {/if}
                 <text
                     bind:this={tickTexts[t]}
-                    class={{ 'is-left': anchor === 'left' }}
-                    style={resolveScaledStyles(
-                        tick.value,
-                        { ...options, fontSize: tickFontSize, stroke: null },
-                        {},
-                        plot,
-                        'fill'
-                    )}
+                    class={[textClass, { 'is-left': anchor === 'left' }]}
+                    style={textStyle}
                     x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
                     dominant-baseline={LINE_ANCHOR[lineAnchor]}
                     >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>

package/dist/types.d.ts

@@ -296,9 +296,9 @@ export type PlotOptions = {
      */
     locale: string;
     /**
-     *
+     * pass a @emotion/css function to style plot using dynamic classes
      */
-    css: (d: string) => string;
+    css: (d: string) => string | undefined;
 };
 export type PlotDefaults = {
     axisXAnchor: AxisXAnchor;
@@ -339,6 +339,7 @@ export type PlotDefaults = {
      */
     numberFormat: Intl.NumberFormatOptions;
     markerDotRadius: number;
+    css: (d: string) => string | undefined;
 };
 export type GenericMarkOptions = Record<string, any>;
 export type DataRecord = Record<string | symbol, RawValue> & {
@@ -583,7 +584,7 @@ export type TransformArgsRecord = Partial<Channels> & {
     data: DataRecord[];
 };
 export type ColorScheme = 'brbg' | 'prgn' | 'piyg' | 'puor' | 'rdbu' | 'rdgy' | 'rdylbu' | 'rdylgn' | 'spectral' | 'burd' | 'buylrd' | 'blues' | 'greens' | 'grays' | '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' | 'observable10';
-export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
+export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
 export type AutoMarginStores = {
     autoMarginTop: Writable<Map<string, number>>;
     autoMarginLeft: Writable<Map<string, number>>;

package/package.json

@@ -1,123 +1,124 @@
 {
-  "name": "svelteplot",
-  "version": "0.2.5",
-  "license": "ISC",
-  "author": {
-    "name": "Gregor Aisch",
-    "email": "gka@users.noreply.github.com"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+    "name": "svelteplot",
+    "version": "0.2.6-next.0",
+    "license": "ISC",
+    "author": {
+        "name": "Gregor Aisch",
+        "email": "gka@users.noreply.github.com"
     },
-    "./*.js": {
-      "import": "./dist/*.js"
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "npm run test:unit",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check src && eslint src",
+        "format": "prettier --write .",
+        "test:unit": "vitest",
+        "prepack": "npx svelte-package",
+        "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
+        "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
     },
-    "./*.svelte": {
-      "import": "./dist/*.svelte"
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        },
+        "./*.js": {
+            "import": "./dist/*.js"
+        },
+        "./*.svelte": {
+            "import": "./dist/*.svelte"
+        },
+        "./core/*.svelte": {
+            "import": "./dist/core/*.svelte"
+        },
+        "./marks/*.svelte": {
+            "import": "./dist/marks/*.svelte"
+        },
+        "./transforms": {
+            "import": "./dist/transforms/index.js"
+        }
     },
-    "./core/*.svelte": {
-      "import": "./dist/core/*.svelte"
+    "main": "./dist/index.js",
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "devDependencies": {
+        "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
+        "@emotion/css": "^11.13.5",
+        "@sveltejs/adapter-auto": "^6.0.1",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/eslint-config": "^8.2.0",
+        "@sveltejs/kit": "^2.21.0",
+        "@sveltejs/package": "^2.3.11",
+        "@sveltejs/vite-plugin-svelte": "5.0.3",
+        "@sveltepress/theme-default": "^6.0.3",
+        "@sveltepress/twoslash": "^1.2.2",
+        "@sveltepress/vite": "^1.2.2",
+        "@testing-library/svelte": "^5.2.7",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/d3-array": "^3.2.1",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-dsv": "^3.0.7",
+        "@types/d3-geo": "^3.1.0",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-path": "^3.1.1",
+        "@types/d3-random": "^3.0.3",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-scale-chromatic": "^3.1.0",
+        "@types/d3-shape": "^3.1.7",
+        "@typescript-eslint/eslint-plugin": "^8.32.1",
+        "@typescript-eslint/parser": "^8.32.1",
+        "csstype": "^3.1.3",
+        "d3-dsv": "^3.0.1",
+        "d3-fetch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "eslint": "^9.26.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-svelte": "3.7.0",
+        "jsdom": "^26.1.0",
+        "prettier": "^3.5.3",
+        "prettier-plugin-svelte": "^3.4.0",
+        "remark-code-extra": "^1.0.1",
+        "remark-code-frontmatter": "^1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "sass": "^1.89.0",
+        "svelte-check": "^4.2.1",
+        "svelte-eslint-parser": "1.2.0",
+        "svelte-highlight": "^7.8.3",
+        "svg-path-parser": "^1.1.0",
+        "topojson-client": "^3.1.0",
+        "tslib": "^2.8.1",
+        "typedoc": "^0.28.4",
+        "typedoc-plugin-markdown": "^4.6.3",
+        "typescript": "^5.8.3",
+        "vite": "^6.3.5",
+        "vitest": "^3.1.3",
+        "vitest-matchmedia-mock": "^2.0.3"
     },
-    "./marks/*.svelte": {
-      "import": "./dist/marks/*.svelte"
-    },
-    "./transforms": {
-      "import": "./dist/transforms/index.js"
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "dependencies": {
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-format": "^3.1.0",
+        "d3-geo": "^3.1.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-path": "^3.1.0",
+        "d3-quadtree": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-regression": "^1.3.10",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "es-toolkit": "^1.37.2",
+        "fast-equals": "^5.2.2",
+        "merge-deep": "^3.0.3",
+        "svelte": "5.30.1"
     }
-  },
-  "main": "./dist/index.js",
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "devDependencies": {
-    "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
-    "@emotion/css": "^11.13.5",
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/eslint-config": "^8.2.0",
-    "@sveltejs/kit": "^2.21.0",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "@sveltepress/theme-default": "^6.0.3",
-    "@sveltepress/twoslash": "^1.2.2",
-    "@sveltepress/vite": "^1.2.2",
-    "@testing-library/svelte": "^5.2.7",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/d3-array": "^3.2.1",
-    "@types/d3-color": "^3.1.3",
-    "@types/d3-dsv": "^3.0.7",
-    "@types/d3-geo": "^3.1.0",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-path": "^3.1.1",
-    "@types/d3-random": "^3.0.3",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "csstype": "^3.1.3",
-    "d3-dsv": "^3.0.1",
-    "d3-fetch": "^3.0.1",
-    "d3-force": "^3.0.0",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "3.7.0",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
-    "remark-code-extra": "^1.0.1",
-    "remark-code-frontmatter": "^1.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.89.0",
-    "svelte-check": "^4.2.1",
-    "svelte-eslint-parser": "1.2.0",
-    "svelte-highlight": "^7.8.3",
-    "svg-path-parser": "^1.1.0",
-    "topojson-client": "^3.1.0",
-    "tslib": "^2.8.1",
-    "typedoc": "^0.28.4",
-    "typedoc-plugin-markdown": "^4.6.3",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.3",
-    "vitest-matchmedia-mock": "^2.0.3"
-  },
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "d3-array": "^3.2.4",
-    "d3-color": "^3.1.0",
-    "d3-format": "^3.1.0",
-    "d3-geo": "^3.1.1",
-    "d3-interpolate": "^3.0.1",
-    "d3-path": "^3.1.0",
-    "d3-quadtree": "^3.0.1",
-    "d3-random": "^3.0.1",
-    "d3-regression": "^1.3.10",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.1.0",
-    "d3-shape": "^3.2.0",
-    "d3-time": "^3.1.0",
-    "es-toolkit": "^1.37.2",
-    "fast-equals": "^5.2.2",
-    "merge-deep": "^3.0.3",
-    "svelte": "5.30.1"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check src && eslint src",
-    "format": "prettier --write .",
-    "test:unit": "vitest",
-    "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
-    "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
-  }
-}
+}