@perspective-dev/viewer-charts 4.5.0 → 4.5.2

package/src/ts/charts/cartesian/cartesian-render.ts

@@ -34,7 +34,6 @@ import { renderCanvasTooltip } from "../../interaction/tooltip-controller";
 import {
     computeTicks,
     renderGridlines,
-    renderAxesChrome,
     renderCellXAxis,
     renderCellYAxis,
     renderOuterXAxis,
@@ -42,6 +41,14 @@ import {
     type AxisDomain,
 } from "../../axis/numeric-axis";
 import { initCanvas, getScaledContext } from "../../axis/canvas";
+import {
+    type CategoricalDomain,
+    type CategoricalLevel,
+    measureCategoricalAxisHeight,
+    measureCategoricalAxisWidth,
+    renderCategoricalXTicks,
+    renderCategoricalYTicks,
+} from "../../axis/categorical-axis";
 import {
     renderLegend,
     renderLegendAt,
@@ -240,6 +247,88 @@ function buildYDomain(
     };
 }
 
+/**
+ * Wrap a value-axis dictionary into the single-level `CategoricalDomain`
+ * the categorical axis painter expects. Caches by reference identity on
+ * the chart so chrome-overlay redraws on hover don't rebuild the domain.
+ */
+function buildCategoricalDomainFromDict(
+    dictionary: string[],
+    label: string,
+): CategoricalDomain {
+    let maxLabelChars = 0;
+    for (const s of dictionary) {
+        if (s.length > maxLabelChars) {
+            maxLabelChars = s.length;
+        }
+    }
+
+    const level: CategoricalLevel = {
+        labels: dictionary.slice(),
+        runs: [],
+        maxLabelChars,
+    };
+    return {
+        levels: [level],
+        numRows: dictionary.length,
+        levelLabels: [label],
+    };
+}
+
+/**
+ * Dispatch each axis side to the categorical painter when its source
+ * column is post-aggregation `string`-typed, or to the numeric painter
+ * otherwise. Used by both single-plot and faceted (per-cell) chrome
+ * overlays.
+ */
+function renderCartesianCellAxes(
+    chart: CartesianChart,
+    canvas: Canvas2D,
+    layout: PlotLayout,
+    xDomain: AxisDomain,
+    yDomain: AxisDomain,
+    xTicks: number[],
+    yTicks: number[],
+    theme: Theme,
+    dpr: number,
+): void {
+    if (chart._xIsString && chart._xCategoryDomain) {
+        const ctx = getScaledContext(canvas, dpr);
+        if (ctx) {
+            renderCategoricalXTicks(ctx, layout, chart._xCategoryDomain, theme);
+        }
+    } else {
+        renderCellXAxis(
+            canvas,
+            xDomain,
+            layout,
+            xTicks,
+            theme,
+            true,
+            dpr,
+            chart.getColumnFormatter(chart._xName, "tick"),
+        );
+    }
+
+    if (chart._yIsString && chart._yCategoryDomain) {
+        const ctx = getScaledContext(canvas, dpr);
+        if (ctx) {
+            renderCategoricalYTicks(ctx, layout, chart._yCategoryDomain, theme);
+        }
+    } else {
+        renderCellYAxis(
+            canvas,
+            yDomain,
+            layout,
+            yTicks,
+            theme,
+            true,
+            dpr,
+            chart.getColumnFormatter(chart._yName, "tick"),
+        );
+    }
+}
+
 /**
  * Original single-plot render path — all series drawn into one
  * `PlotLayout` with one projection matrix. Used when splits are absent
@@ -255,10 +344,42 @@ function renderSinglePlotFrame(
     const gl = glManager.gl;
     const { cssWidth, cssHeight, xIsDate, yIsDate, hasColorCol } = ctx;
 
+    // Materialize per-axis categorical domains from the build-pass
+    // dictionaries before measuring gutters — the leaf-rotation budget
+    // in `measureCategoricalAxisHeight` depends on `maxLabelChars`.
+    chart._xCategoryDomain =
+        chart._xIsString && chart._xCategoryDictionary.length > 0
+            ? buildCategoricalDomainFromDict(
+                  chart._xCategoryDictionary,
+                  chart._xLabel || chart._xName || "",
+              )
+            : null;
+    chart._yCategoryDomain =
+        chart._yIsString && chart._yCategoryDictionary.length > 0
+            ? buildCategoricalDomainFromDict(
+                  chart._yCategoryDictionary,
+                  chart._yLabel || chart._yName || "",
+              )
+            : null;
+
+    // One-pass plot-width / plot-height estimate to size the
+    // categorical gutter overrides; same approach as series-render.
+    const estRight = hasColorCol ? 80 : 16;
+    const estLeftPlain = 55 + (chart._yLabel ? 16 : 0);
+    const estPlotWidth = Math.max(1, cssWidth - estLeftPlain - estRight);
+    const leftExtra = chart._yCategoryDomain
+        ? measureCategoricalAxisWidth(chart._yCategoryDomain)
+        : undefined;
+    const bottomExtra = chart._xCategoryDomain
+        ? measureCategoricalAxisHeight(chart._xCategoryDomain, estPlotWidth)
+        : undefined;
+
     const layout = new PlotLayout(cssWidth, cssHeight, {
         hasXLabel: !!chart._xLabel,
         hasYLabel: !!chart._yLabel,
         hasLegend: hasColorCol,
+        leftExtra,
+        bottomExtra,
     });
     chart._lastLayout = layout;
     if (chart._zoomController) {
@@ -279,7 +400,9 @@ function renderSinglePlotFrame(
 
     const xDomain = buildXDomain(chart, domain.xMin, domain.xMax, xIsDate);
     const yDomain = buildYDomain(chart, domain.yMin, domain.yMax, yIsDate);
-    const { xTicks, yTicks } = computeTicks(xDomain, yDomain, layout);
+    const numericTicks = computeTicks(xDomain, yDomain, layout);
+    const xTicks = chart._xIsString ? [] : numericTicks.xTicks;
+    const yTicks = chart._yIsString ? [] : numericTicks.yTicks;
 
     const isMap = chart._renderMode === "map";
 
@@ -349,6 +472,26 @@ function renderFacetedFrame(
     const gl = glManager.gl;
     const { cssWidth, cssHeight, xIsDate, yIsDate } = ctx;
 
+    // Materialize per-axis categorical domains (shared across facets:
+    // the build dictionary is global, so slot N refers to the same
+    // string in every cell). Faceted layout still uses the default
+    // per-cell gutters from `buildFacetGrid` — rotated leaf labels in
+    // tight cells may overflow but won't crash.
+    chart._xCategoryDomain =
+        chart._xIsString && chart._xCategoryDictionary.length > 0
+            ? buildCategoricalDomainFromDict(
+                  chart._xCategoryDictionary,
+                  chart._xLabel || chart._xName || "",
+              )
+            : null;
+    chart._yCategoryDomain =
+        chart._yIsString && chart._yCategoryDictionary.length > 0
+            ? buildCategoricalDomainFromDict(
+                  chart._yCategoryDictionary,
+                  chart._yLabel || chart._yName || "",
+              )
+            : null;
+
     const labels = chart._splitGroups.map((g) => g.prefix);
 
     // Legend: reserve space only when the user wired a color column.
@@ -415,11 +558,15 @@ function renderFacetedFrame(
 
     // Gridlines + per-facet axes use the first cell's layout for tick
     // sampling (all cells have identical plotRect dimensions). Per-facet
-    // rendering then reuses the same tick arrays.
+    // rendering then reuses the same tick arrays. Categorical sides
+    // skip numeric tick computation; the categorical painter handles
+    // its own label placement off the dictionary.
     const sampleLayout = grid.cells[0]?.layout;
-    const { xTicks, yTicks } = sampleLayout
+    const numericFacetTicks = sampleLayout
         ? computeTicks(xDomain, yDomain, sampleLayout)
         : { xTicks: [], yTicks: [] };
+    const xTicks = chart._xIsString ? [] : numericFacetTicks.xTicks;
+    const yTicks = chart._yIsString ? [] : numericFacetTicks.yTicks;
 
     // One-shot destructive prep for the gridline + WebGL canvases.
     // Both phases below are per-facet; calling their destructive
@@ -566,17 +713,16 @@ function renderSinglePlotChromeOverlay(chart: CartesianChart): void {
     if (isMap) {
         chart.renderMapChrome(chart._chromeCanvas!, layout, theme, dpr);
     } else {
-        renderAxesChrome(
+        renderCartesianCellAxes(
+            chart,
             chart._chromeCanvas!,
+            layout,
             chart._lastXDomain!,
             chart._lastYDomain!,
-            layout,
             chart._lastXTicks!,
             chart._lastYTicks!,
             theme,
             dpr,
-            chart.getColumnFormatter(chart._xName, "tick"),
-            chart.getColumnFormatter(chart._yName, "tick"),
         );
     }
 
@@ -633,8 +779,13 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
     // — these already fold in the independent-zoom override (outer
     // axes are incompatible with per-cell viewports), so `sharedX` /
     // `sharedY` true here implies shared-zoom too.
-    const sharedX = chart._lastEffectiveSharedX;
-    const sharedY = chart._lastEffectiveSharedY;
+    //
+    // Categorical axes additionally force per-cell rendering: the
+    // outer-axis painter is numeric-only and the shared dictionary
+    // already produces the same labels in every cell, so a per-cell
+    // categorical axis is equivalent to a shared one visually.
+    const sharedX = chart._lastEffectiveSharedX && !chart._xIsString;
+    const sharedY = chart._lastEffectiveSharedY && !chart._yIsString;
     const independent = chart._facetConfig.zoom_mode === "independent";
 
     // Shared X axis: one outer band across the bottom of the grid,
@@ -689,29 +840,53 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
             : { xTicks: sharedXTicks, yTicks: sharedYTicks };
 
         if (!isMap && !sharedX) {
-            renderCellXAxis(
-                canvas,
-                localX,
-                cell.layout,
-                ticks.xTicks,
-                theme,
-                !!chart._xLabel,
-                dpr,
-                chart.getColumnFormatter(chart._xName, "tick"),
-            );
+            if (chart._xIsString && chart._xCategoryDomain) {
+                const cellCtx = getScaledContext(canvas, dpr);
+                if (cellCtx) {
+                    renderCategoricalXTicks(
+                        cellCtx,
+                        cell.layout,
+                        chart._xCategoryDomain,
+                        theme,
+                    );
+                }
+            } else {
+                renderCellXAxis(
+                    canvas,
+                    localX,
+                    cell.layout,
+                    ticks.xTicks,
+                    theme,
+                    !!chart._xLabel,
+                    dpr,
+                    chart.getColumnFormatter(chart._xName, "tick"),
+                );
+            }
         }
 
         if (!isMap && !sharedY) {
-            renderCellYAxis(
-                canvas,
-                localY,
-                cell.layout,
-                ticks.yTicks,
-                theme,
-                !!chart._yLabel,
-                dpr,
-                chart.getColumnFormatter(chart._yName, "tick"),
-            );
+            if (chart._yIsString && chart._yCategoryDomain) {
+                const cellCtx = getScaledContext(canvas, dpr);
+                if (cellCtx) {
+                    renderCategoricalYTicks(
+                        cellCtx,
+                        cell.layout,
+                        chart._yCategoryDomain,
+                        theme,
+                    );
+                }
+            } else {
+                renderCellYAxis(
+                    canvas,
+                    localY,
+                    cell.layout,
+                    ticks.yTicks,
+                    theme,
+                    !!chart._yLabel,
+                    dpr,
+                    chart.getColumnFormatter(chart._yName, "tick"),
+                );
+            }
         }
 
         if (cell.titleRect) {

package/src/ts/charts/cartesian/cartesian.ts

@@ -16,6 +16,7 @@ import { AbstractChart } from "../chart-base";
 import { SpatialHitTester } from "../../interaction/hit-test";
 import { PlotLayout } from "../../layout/plot-layout";
 import { type AxisDomain } from "../../axis/numeric-axis";
+import type { CategoricalDomain } from "../../axis/categorical-axis";
 import type { GradientTextureCache } from "../../webgl/gradient-texture";
 import type { Glyph } from "./glyph";
 import {
@@ -146,6 +147,32 @@ export class CartesianChart extends AbstractChart {
     _sizeName = "";
     _labelName = "";
     _colorIsString = false;
+
+    /**
+     * When the X (or Y) axis source column is post-aggregation
+     * `string`-typed, the build pipeline writes per-row dictionary slot
+     * indices into `_xData` (or `_yData`) instead of numeric values,
+     * and the render pass dispatches `renderCategoricalXTicks` /
+     * `renderCategoricalYTicks` instead of the numeric axis painter.
+     *
+     * The companion `_xCategoryDictionary` / `_xCategorySeen` pair is
+     * built lazily during `processCartesianChunk` in first-seen row
+     * order; `(null)` is appended on first encounter of an invalid row
+     * rather than reserved at slot 0, so charts without missing values
+     * don't get a phantom slot.
+     *
+     * `_xCategoryDomain` is materialized once per frame in
+     * `cartesian-render` and held for chrome overlay redraws (same
+     * lifecycle as `_lastXDomain` on the numeric path).
+     */
+    _xIsString = false;
+    _yIsString = false;
+    _xCategoryDictionary: string[] = [];
+    _yCategoryDictionary: string[] = [];
+    _xCategorySeen: Map<string, number> = new Map();
+    _yCategorySeen: Map<string, number> = new Map();
+    _xCategoryDomain: CategoricalDomain | null = null;
+    _yCategoryDomain: CategoricalDomain | null = null;
     _splitGroups: SplitGroup[] = [];
 
     //  Data extents
@@ -375,11 +402,23 @@ export class CartesianChart extends AbstractChart {
         // (the prior accumulator); the union is in `_xMin` etc., so we
         // copy it back. Idempotent across multi-chunk uploads — every
         // chunk leaves the accumulator equal to the running union.
+        //
+        // Categorical axes opt out: slot indices are first-seen-order
+        // and only meaningful within a single frame's dictionary, so
+        // expanding across frames would mix dictionaries and shift
+        // every category's slot. Force-fit those axes per frame
+        // instead.
         if (this._pluginConfig.domain_mode === "expand") {
-            this._expandedXMin = this._xMin;
-            this._expandedXMax = this._xMax;
-            this._expandedYMin = this._yMin;
-            this._expandedYMax = this._yMax;
+            if (!this._xIsString) {
+                this._expandedXMin = this._xMin;
+                this._expandedXMax = this._xMax;
+            }
+
+            if (!this._yIsString) {
+                this._expandedYMin = this._yMin;
+                this._expandedYMax = this._yMax;
+            }
+
             this._expandedColorMin = this._colorMin;
             this._expandedColorMax = this._colorMax;
             this._expandedSizeMin = this._sizeMin;

package/src/ts/charts/cartesian/glyphs/density.ts

@@ -15,6 +15,7 @@ import type { CartesianChart } from "../cartesian";
 import type { Glyph } from "../glyph";
 import { bindGradientTexture } from "../../../webgl/gradient-texture";
 import { getInstancing } from "../../../webgl/instanced-attrs";
+import { compileProgram } from "../../../webgl/program-cache";
 import { buildPointRowTooltipLines } from "../tooltip-lines";
 import splatVert from "../../../shaders/density-splat.vert.glsl";
 import splatFrag from "../../../shaders/density-splat.frag.glsl";
@@ -183,16 +184,6 @@ export class DensityGlyph implements Glyph {
         }
 
         const gl = glManager.gl;
-        const splatProgram = glManager.shaders.getOrCreate(
-            "density-splat",
-            splatVert,
-            splatFrag,
-        );
-        const resolveProgram = glManager.shaders.getOrCreate(
-            "density-resolve",
-            resolveVert,
-            resolveFrag,
-        );
 
         const quadCornerBuffer = gl.createBuffer()!;
         gl.bindBuffer(gl.ARRAY_BUFFER, quadCornerBuffer);
@@ -217,24 +208,28 @@ export class DensityGlyph implements Glyph {
         const heatFramebuffer = gl.createFramebuffer()!;
 
         this._cache = {
-            splat: extractSplatLocations(gl, splatProgram),
+            splat: compileSplatProgram(
+                glManager,
+                "density-splat",
+                splatVert,
+                splatFrag,
+            ),
             extremeSplat: null,
             mrtSplat: null,
-            resolve: {
-                program: resolveProgram,
-                u_heat: gl.getUniformLocation(resolveProgram, "u_heat"),
-                u_extreme: gl.getUniformLocation(resolveProgram, "u_extreme"),
-                u_gradient_lut: gl.getUniformLocation(
-                    resolveProgram,
+            resolve: compileProgram<DensityCache["resolve"]>(
+                glManager,
+                "density-resolve",
+                resolveVert,
+                resolveFrag,
+                [
+                    "u_heat",
+                    "u_extreme",
                     "u_gradient_lut",
-                ),
-                u_heat_max: gl.getUniformLocation(resolveProgram, "u_heat_max"),
-                u_color_mode: gl.getUniformLocation(
-                    resolveProgram,
+                    "u_heat_max",
                     "u_color_mode",
-                ),
-                a_corner: gl.getAttribLocation(resolveProgram, "a_corner"),
-            },
+                ],
+                ["a_corner"],
+            ),
             quadCornerBuffer,
             tripleCornerBuffer,
             heatTexture,
@@ -541,12 +536,12 @@ export class DensityGlyph implements Glyph {
             return cache.extremeSplat;
         }
 
-        const program = glManager.shaders.getOrCreate(
+        cache.extremeSplat = compileSplatProgram(
+            glManager,
             "density-extreme",
             splatVert,
             extremeFrag,
         );
-        cache.extremeSplat = extractSplatLocations(glManager.gl, program);
         return cache.extremeSplat;
     }
 
@@ -568,12 +563,12 @@ export class DensityGlyph implements Glyph {
         // the legacy GLSL 100 splat vert can't link against it because
         // a program's shaders must share a version. Use the paired
         // `density-mrt.vert.glsl` instead — same math, 300 ES dialect.
-        const program = glManager.shaders.getOrCreate(
+        cache.mrtSplat = compileSplatProgram(
+            glManager,
             "density-mrt",
             mrtVert,
             mrtFrag,
         );
-        cache.mrtSplat = extractSplatLocations(glManager.gl, program);
         return cache.mrtSplat;
     }
 
@@ -1088,20 +1083,20 @@ function createAccumTexture(
     return tex;
 }
 
-function extractSplatLocations(
-    gl: WebGL2RenderingContext | WebGLRenderingContext,
-    program: WebGLProgram,
+function compileSplatProgram(
+    glManager: WebGLContextManager,
+    key: string,
+    vert: string,
+    frag: string,
 ): SplatProgramCache {
-    return {
-        program,
-        u_projection: gl.getUniformLocation(program, "u_projection"),
-        u_radius_ndc: gl.getUniformLocation(program, "u_radius_ndc"),
-        u_intensity: gl.getUniformLocation(program, "u_intensity"),
-        u_color_range: gl.getUniformLocation(program, "u_color_range"),
-        a_corner: gl.getAttribLocation(program, "a_corner"),
-        a_position: gl.getAttribLocation(program, "a_position"),
-        a_color_value: gl.getAttribLocation(program, "a_color_value"),
-    };
+    return compileProgram<SplatProgramCache>(
+        glManager,
+        key,
+        vert,
+        frag,
+        ["u_projection", "u_radius_ndc", "u_intensity", "u_color_range"],
+        ["a_corner", "a_position", "a_color_value"],
+    );
 }
 
 /**

package/src/ts/charts/cartesian/glyphs/lines.ts

@@ -18,6 +18,7 @@ import {
     createLineCornerBuffer,
     getInstancing,
 } from "../../../webgl/instanced-attrs";
+import { compileProgram } from "../../../webgl/program-cache";
 import { formatTickValue, formatDateTickValue } from "../../../layout/ticks";
 import lineVert from "../../../shaders/line.vert.glsl";
 import lineFrag from "../../../shaders/line.frag.glsl";
@@ -56,26 +57,23 @@ export class LineGlyph implements Glyph {
             return;
         }
 
-        const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        const partial = compileProgram<Omit<LineCache, "cornerBuffer">>(
+            glManager,
             "line",
             lineVert,
             lineFrag,
+            [
+                "u_projection",
+                "u_resolution",
+                "u_line_width",
+                "u_color_range",
+                "u_gradient_lut",
+            ],
+            ["a_start", "a_end", "a_color_start", "a_color_end", "a_corner"],
         );
-        const cornerBuffer = createLineCornerBuffer(gl);
         this._cache = {
-            program,
-            cornerBuffer,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_resolution: gl.getUniformLocation(program, "u_resolution"),
-            u_line_width: gl.getUniformLocation(program, "u_line_width"),
-            u_color_range: gl.getUniformLocation(program, "u_color_range"),
-            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-            a_start: gl.getAttribLocation(program, "a_start"),
-            a_end: gl.getAttribLocation(program, "a_end"),
-            a_color_start: gl.getAttribLocation(program, "a_color_start"),
-            a_color_end: gl.getAttribLocation(program, "a_color_end"),
-            a_corner: gl.getAttribLocation(program, "a_corner"),
+            ...partial,
+            cornerBuffer: createLineCornerBuffer(glManager.gl),
         };
     }
 

package/src/ts/charts/cartesian/glyphs/points.ts

@@ -14,6 +14,7 @@ import type { WebGLContextManager } from "../../../webgl/context-manager";
 import type { CartesianChart } from "../cartesian";
 import type { Glyph } from "../glyph";
 import { bindGradientTexture } from "../../../webgl/gradient-texture";
+import { compileProgram } from "../../../webgl/program-cache";
 import { buildPointRowTooltipLines } from "../tooltip-lines";
 import scatterVert from "../../../shaders/scatter.vert.glsl";
 import scatterFrag from "../../../shaders/scatter.frag.glsl";
@@ -53,27 +54,21 @@ export class PointGlyph implements Glyph {
             return;
         }
 
-        const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        this._cache = compileProgram<PointCache>(
+            glManager,
             "scatter",
             scatterVert,
             scatterFrag,
-        );
-        this._cache = {
-            program,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_point_size: gl.getUniformLocation(program, "u_point_size"),
-            u_color_range: gl.getUniformLocation(program, "u_color_range"),
-            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-            u_size_range: gl.getUniformLocation(program, "u_size_range"),
-            u_point_size_range: gl.getUniformLocation(
-                program,
+            [
+                "u_projection",
+                "u_point_size",
+                "u_color_range",
+                "u_gradient_lut",
+                "u_size_range",
                 "u_point_size_range",
-            ),
-            a_position: gl.getAttribLocation(program, "a_position"),
-            a_color_value: gl.getAttribLocation(program, "a_color_value"),
-            a_size_value: gl.getAttribLocation(program, "a_size_value"),
-        };
+            ],
+            ["a_position", "a_color_value", "a_size_value"],
+        );
     }
 
     draw(

package/src/ts/charts/chart-base.ts

@@ -46,6 +46,14 @@ import type { ViewConfig } from "@perspective-dev/client";
 import { resolveThemeFromVars, type Theme } from "../theme/theme";
 import { requestRender as scheduleRender } from "../render/scheduler";
 
+// TODO I don't know if this is the behavior we want. On the plus side, this
+// ad-hoc formatter scales well to small and large data ranges, making a good
+// guess at the right format without user input. On the minus side, this
+// behavior is inconsistent with datagrid and the rest of the app, and the ad-hoc
+// surprising behavior when overriding one field in `number_format` and suddenly
+// the entire formatter is replaced.
+const REGRESSION_BEHAVIOR = true;
+
 /**
  * Locale-aware fallback formatter applied to numeric tooltip / legend
  * values when the column has no `number_format` configured. Two
@@ -55,9 +63,12 @@ import { requestRender as scheduleRender } from "../render/scheduler";
 const DEFAULT_VALUE_FORMATTER: (v: number) => string = ((): ((
     v: number,
 ) => string) => {
-    return formatTickValue;
-    // const intl = createNumberFormatter("float");
-    // return (v) => intl.format(v);
+    if (REGRESSION_BEHAVIOR) {
+        return formatTickValue;
+    } else {
+        const intl = createNumberFormatter("float");
+        return (v) => intl.format(v);
+    }
 })();
 
 /**
@@ -69,9 +80,12 @@ const DEFAULT_VALUE_FORMATTER: (v: number) => string = ((): ((
 const DEFAULT_DATETIME_FORMATTER: (v: number) => string = ((): ((
     v: number,
 ) => string) => {
-    return formatDateTickValue;
-    // const intl = createDatetimeFormatter();
-    // return (v) => intl.format(v);
+    if (REGRESSION_BEHAVIOR) {
+        return formatDateTickValue;
+    } else {
+        const intl = createDatetimeFormatter();
+        return (v) => intl.format(v);
+    }
 })();
 
 /**

package/src/ts/charts/chart.ts

@@ -411,7 +411,7 @@ export const DEFAULT_PLUGIN_CONFIG: PluginConfig = {
     facet_zoom_mode: "shared",
     series_zoom_mode: "dynamic",
     include_zero: false,
-    domain_mode: "fit",
+    domain_mode: "expand",
     line_width_px: 2.0,
     point_size_px: 8.0,
     band_inner_frac: 0.5,