svelteplot 0.2.8-pr-68.2 → 0.2.8-pr-78.0

package/dist/core/Plot.svelte

@@ -73,7 +73,7 @@
         locale: 'en-US',
         numberFormat: {
             style: 'decimal',
-            notation: 'compact',
+            // notation: 'compact',
             compactDisplay: 'short'
         },
         markerDotRadius: 3,

package/dist/marks/AxisX.svelte

@@ -2,6 +2,7 @@
     Renders a horizontal axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisXMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -22,7 +23,16 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -64,6 +74,8 @@
         tickFormat,
         tickClass,
         class: className,
+        tickCount,
+        tickSpacing,
         ...options
     }: AxisXMarkProps = $props();
 
@@ -71,7 +83,11 @@
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
+              : Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(
@@ -89,9 +105,9 @@
               )
     );
 
-    let tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
+    const tickFmt = $derived(tickFormat || plot.options.x.tickFormat);
 
-    let useTickFormat = $derived(
+    const useTickFormat = $derived(
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
@@ -107,6 +123,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
                         }).format(d)

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

@@ -1,3 +1,4 @@
+import type { XOR } from 'ts-essentials';
 export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -11,7 +12,13 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
-};
+} & XOR<{
+    /** approximate number of ticks to be generated */
+    tickCount?: number;
+}, {
+    /** approximate number of pixels between generated ticks */
+    tickSpacing?: number;
+}>;
 import type { BaseMarkProps, RawValue, ConstantAccessor } from '../types.js';
 /** Renders a horizontal axis with labels and tick marks */
 declare const AxisX: import("svelte").Component<AxisXMarkProps, {}, "">;

package/dist/marks/AxisY.svelte

@@ -2,6 +2,7 @@
     Renders a vertical axis with labels and tick marks
 -->
 <script module lang="ts">
+    import type { XOR } from 'ts-essentials';
     export type AxisYMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
@@ -23,7 +24,16 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
-    };
+    } & XOR<
+            {
+                /** approximate number of ticks to be generated */
+                tickCount?: number;
+            },
+            {
+                /** approximate number of pixels between generated ticks */
+                tickSpacing?: number;
+            }
+        >;
 </script>
 
 <script lang="ts">
@@ -56,12 +66,15 @@
         title,
         anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
         facetAnchor = 'auto',
+        interval,
         lineAnchor = 'center',
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
         tickFormat,
         tickClass,
+        tickCount,
+        tickSpacing,
         ...options
     }: AxisYMarkProps = $props();
 
@@ -69,7 +82,11 @@
     const plot = $derived(getPlotState());
 
     const autoTickCount = $derived(
-        Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
+        tickCount != null
+            ? tickCount
+            : tickSpacing != null
+              ? Math.max(3, Math.round(plot.facetWidth / tickSpacing))
+              : Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
     const ticks: RawValue[] = $derived(
@@ -80,7 +97,7 @@
               autoTicks(
                   plot.scales.y.type,
                   plot.options.y.ticks,
-                  plot.options.y.interval,
+                  interval || plot.options.y.interval,
                   plot.scales.y.domain,
                   plot.scales.y.fn,
                   autoTickCount
@@ -105,6 +122,10 @@
                   : // auto
                     (d: RawValue) =>
                         Intl.NumberFormat(plot.options.locale, {
+                            // use compact notation if range covers multipe magnitudes
+                            ...(new Set(ticks.map(Math.log10).map(Math.round)).size > 1
+                                ? { notation: 'compact' }
+                                : {}),
                             ...DEFAULTS.numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
                         }).format(d)

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

@@ -1,3 +1,4 @@
+import type { XOR } from 'ts-essentials';
 export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -12,7 +13,13 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
-};
+} & XOR<{
+    /** approximate number of ticks to be generated */
+    tickCount?: number;
+}, {
+    /** approximate number of pixels between generated ticks */
+    tickSpacing?: number;
+}>;
 import type { BaseMarkProps, RawValue } from '../types.js';
 import type { ConstantAccessor } from '../types.js';
 /** Renders a vertical axis with labels and tick marks */

package/dist/ui/ExamplesGrid.svelte

@@ -0,0 +1,64 @@
+<script>
+    let { examples } = $props();
+</script>
+
+<div class="list">
+    {#each examples as page, i (i)}
+        <a href={page.url}>
+            <div>
+                {#if page.screenshot}
+                    <img src={page.screenshot} alt={page.title} />{/if}
+            </div>
+            <h4>
+                {page.title}
+            </h4>
+        </a>
+    {/each}
+</div>
+
+<style>
+    .list {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        width: 100%;
+        margin: 2rem 0;
+    }
+
+    .list > a {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        row-gap: 0.3rem;
+        text-decoration: none;
+
+        > div {
+            border: 1px solid #88888822;
+            border-radius: 2px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+            padding: 1.5ex;
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: var(--svp-text);
+            > div {
+                border: 1px solid var(--svp-text);
+            }
+        }
+    }
+
+    .list img {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 3px;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    .list h4 {
+        margin: 0rem;
+        font-weight: normal;
+        font-size: 13px;
+        line-height: 1;
+    }
+</style>

package/dist/ui/ExamplesGrid.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ExamplesGrid;
+type ExamplesGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ExamplesGrid: import("svelte").Component<{
+    examples: any;
+}, {}, "">;
+type $$ComponentProps = {
+    examples: any;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.8-pr-68.2",
+    "version": "0.2.8-pr-78.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -18,7 +18,8 @@
         "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/"
+        "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
+        "screenshots": "node screenshot-examples.js"
     },
     "exports": {
         ".": {
@@ -83,6 +84,7 @@
         "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
+        "puppeteer": "^24.9.0",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "resize-observer-polyfill": "^1.5.1",
@@ -92,6 +94,7 @@
         "svelte-highlight": "^7.8.3",
         "svg-path-parser": "^1.1.0",
         "topojson-client": "^3.1.0",
+        "ts-essentials": "^10.0.4",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.5",
         "typedoc-plugin-markdown": "^4.6.3",