@perspective-dev/viewer-datagrid 4.4.0 → 4.5.0

package/src/ts/color_utils.ts

@@ -10,15 +10,182 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import chroma from "chroma-js";
 import type { ColorRecord } from "./types.js";
 
+/** 8-bit sRGB color as `[r, g, b]` with each channel in `[0, 255]`. */
+export type RGB = [number, number, number];
+
+/** HSL color as `[h, s, l]` with `h` in degrees `[0, 360)` and `s`, `l` in `[0, 1]`. */
+export type HSL = [number, number, number];
+
+const parse_cache = new Map<string, RGB>();
+let parse_ctx: CanvasRenderingContext2D | null = null;
+
+/** Parse a CSS hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`). Returns `null` if `input` is not a hex literal. Alpha is ignored. */
+function parse_hex(input: string): RGB | null {
+    const s = input.startsWith("#") ? input.slice(1) : input;
+    if (s.length === 3 || s.length === 4) {
+        const r = parseInt(s[0] + s[0], 16);
+        const g = parseInt(s[1] + s[1], 16);
+        const b = parseInt(s[2] + s[2], 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+            return [r, g, b];
+        }
+    } else if (s.length === 6 || s.length === 8) {
+        const r = parseInt(s.slice(0, 2), 16);
+        const g = parseInt(s.slice(2, 4), 16);
+        const b = parseInt(s.slice(4, 6), 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+            return [r, g, b];
+        }
+    }
+
+    return null;
+}
+
+/** Parse a CSS `rgb()` or `rgba()` functional color. Returns `null` if `input` does not match. Alpha is ignored. */
+function parse_rgb_fn(input: string): RGB | null {
+    const m = input.match(
+        /^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/i,
+    );
+    if (!m) {
+        return null;
+    }
+
+    return [
+        Math.round(parseFloat(m[1])),
+        Math.round(parseFloat(m[2])),
+        Math.round(parseFloat(m[3])),
+    ];
+}
+
+/** Fallback parser that defers to the browser by assigning `input` to a 2D canvas `fillStyle` and re-reading the normalized value. Handles named colors, `hsl()`, etc. Returns `[0, 0, 0]` if the value is invalid or no canvas context is available. */
+function parse_via_canvas(input: string): RGB {
+    if (!parse_ctx) {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        parse_ctx = canvas.getContext("2d");
+    }
+
+    if (!parse_ctx) {
+        return [0, 0, 0];
+    }
+
+    parse_ctx.fillStyle = "#000";
+    parse_ctx.fillStyle = input;
+    const normalized = parse_ctx.fillStyle as string;
+    return parse_hex(normalized) ?? parse_rgb_fn(normalized) ?? [0, 0, 0];
+}
+
+/** Parse any CSS color string into an `RGB` triple. Tries hex and `rgb()` fast paths, then falls back to a canvas-based parser for named colors, `hsl()`, etc. Results are memoized per input. */
+export function parseColor(input: string): RGB {
+    const key = input.trim();
+    const cached = parse_cache.get(key);
+    if (cached) {
+        return cached;
+    }
+
+    const rgb = parse_hex(key) ?? parse_rgb_fn(key) ?? parse_via_canvas(key);
+    parse_cache.set(key, rgb);
+    return rgb;
+}
+
+/** Format a single channel as a clamped, zero-padded two-digit hex byte. */
+function toHex(c: number): string {
+    const v = Math.max(0, Math.min(255, Math.round(c)));
+    return v.toString(16).padStart(2, "0");
+}
+
+/** Format an `RGB` triple as a `#rrggbb` hex string. Channels are clamped to `[0, 255]`. */
+export function rgbToHex([r, g, b]: RGB): string {
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/** Convert sRGB to HSL. Output `h` is in degrees `[0, 360)`; `s` and `l` are in `[0, 1]`. */
+export function rgbToHsl([r, g, b]: RGB): HSL {
+    const rn = r / 255,
+        gn = g / 255,
+        bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rn) {
+            h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+        } else if (max === gn) {
+            h = ((bn - rn) / d + 2) * 60;
+        } else {
+            h = ((rn - gn) / d + 4) * 60;
+        }
+    }
+
+    return [h, s, l];
+}
+
+/** Convert HSL to sRGB. `h` is wrapped into `[0, 360)`; `s` and `l` are expected in `[0, 1]`. Output channels are rounded to integers in `[0, 255]`. */
+export function hslToRgb([h, s, l]: HSL): RGB {
+    const hn = (((h % 360) + 360) % 360) / 360;
+    if (s === 0) {
+        const v = Math.round(l * 255);
+        return [v, v, v];
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const f = (t: number): number => {
+        if (t < 0) {
+            t += 1;
+        }
+
+        if (t > 1) {
+            t -= 1;
+        }
+
+        if (t < 1 / 6) {
+            return p + (q - p) * 6 * t;
+        }
+
+        if (t < 1 / 2) {
+            return q;
+        }
+
+        if (t < 2 / 3) {
+            return p + (q - p) * (2 / 3 - t) * 6;
+        }
+
+        return p;
+    };
+
+    return [
+        Math.round(f(hn + 1 / 3) * 255),
+        Math.round(f(hn) * 255),
+        Math.round(f(hn - 1 / 3) * 255),
+    ];
+}
+
+/**
+ * Blend two `RGB` colors using LRGB (gamma-naive linear) interpolation,
+ * matching chroma-js's default `mix` mode. `f` is the weight of `b` in `[0, 1]`
+ * (0 returns `a`, 1 returns `b`).
+ */
+export function mixRgb(a: RGB, b: RGB, f = 0.5): RGB {
+    return [
+        Math.round(Math.sqrt(a[0] * a[0] * (1 - f) + b[0] * b[0] * f)),
+        Math.round(Math.sqrt(a[1] * a[1] * (1 - f) + b[1] * b[1] * f)),
+        Math.round(Math.sqrt(a[2] * a[2] * (1 - f) + b[2] * b[2] * f)),
+    ];
+}
+
+/** 50/50 LRGB blend of CSS color `a` with `RGB`-ish triple `b`, returned as `#rrggbb`. */
 export function blend(a: string, b: number[]): string {
-    return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
+    return rgbToHex(mixRgb(parseColor(a), [b[0], b[1], b[2]], 0.5));
 }
 
-// AFAICT `chroma-js` has no alpha-aware blending? So we need a function to get
-// the color of a heatmap cell over the background.
+/** Composite a premultiplied-style `RGBA` cell color over `source` (default white) and return the resulting opaque `RGB`. Used to flatten heatmap cells against the background. */
 export function rgbaToRgb(
     [r, g, b, a]: [number, number, number, number],
     source: [number, number, number] = [255, 255, 255],
@@ -30,7 +197,7 @@ export function rgbaToRgb(
     return [f(0, r), f(1, g), f(2, b)];
 }
 
-// Chroma does this but why bother?
+/** Pick a readable foreground (`#161616` or `#ffffff`) for the given background using a perceptual luminance threshold. */
 export function infer_foreground_from_background([r, g, b]: [
     number,
     number,
@@ -42,21 +209,19 @@ export function infer_foreground_from_background([r, g, b]: [
         : "#ffffff";
 }
 
-function make_gradient(chromahex: chroma.Color): string {
-    const [r, g, b] = chromahex.rgb();
-    const [r1, g1, b1] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") - 15) % 360)
-        .rgb();
-    const [r2, g2, b2] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") + 15) % 360)
-        .rgb();
+/** Build a CSS `linear-gradient` that fans `rgb` ±15° in hue, used as the negative-value swatch in column color pickers. */
+function make_gradient(rgb: RGB): string {
+    const [h, s, l] = rgbToHsl(rgb);
+    const [r, g, b] = rgb;
+    const [r1, g1, b1] = hslToRgb([h - 15, s, l]);
+    const [r2, g2, b2] = hslToRgb([h + 15, s, l]);
     return `linear-gradient(to right top,rgb(${r1},${g1},${b1}),rgb(${r},${g},${b}) 50%,rgb(${r2},${g2},${b2}))`;
 }
 
+/** Precompute the tuple of derived color strings (RGB channels, gradient, opaque/transparent rgba) cached on the model for a configured plugin color. */
 export function make_color_record(color: string): ColorRecord {
-    const chroma_neg = chroma(color);
-    const _neg_grad = make_gradient(chroma_neg);
-    const rgb = chroma_neg.rgb();
+    const rgb = parseColor(color);
+    const _neg_grad = make_gradient(rgb);
     return [
         color,
         rgb[0],

package/src/ts/custom_elements/datagrid.ts

@@ -15,19 +15,22 @@ import { activate } from "../plugin/activate.js";
 import { restore } from "../plugin/restore.js";
 import { save } from "../plugin/save.js";
 import { draw } from "../plugin/draw.js";
-import column_style_controls, {
-    ColumnStyleOpts,
-} from "../plugin/column_style_controls.js";
+import column_config_schema, {
+    ColumnConfigSchema,
+} from "../plugin/column_config_schema.js";
 import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
 import { format_raw } from "../data_listener/format_cell.js";
+import { sourceColumn } from "@perspective-dev/viewer/src/ts/column-format.js";
 
 import type { View, ViewWindow } from "@perspective-dev/client";
-import type { IPerspectiveViewerPlugin } from "@perspective-dev/viewer";
+import type {
+    IPerspectiveViewerPlugin,
+    PluginStaticConfig,
+} from "@perspective-dev/viewer";
 import type {
     DatagridModel,
     DatagridToolbarElement,
     EditMode,
-    PerspectiveViewerElement,
     DatagridPluginConfig,
     ColumnsConfig,
 } from "../types.js";
@@ -113,44 +116,64 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return await activate.call(this, view);
     }
 
-    get name(): string {
-        return "Datagrid";
-    }
-
-    get category(): string {
-        return "Basic";
-    }
-
-    get select_mode(): string {
-        return "toggle";
-    }
-
-    get min_config_columns(): number | undefined {
-        return undefined;
-    }
-
-    get config_column_names(): string[] {
-        return ["Columns"];
-    }
-
-    get group_rollups(): string[] {
-        return ["rollup", "flat", "total"];
-    }
-
-    /**
-     * Give the Datagrid a higher priority so it is loaded
-     * over the default charts by default.
-     */
-    get priority(): number {
-        return 1;
+    get_static_config(): PluginStaticConfig {
+        return {
+            name: "Datagrid",
+            category: "Basic",
+            select_mode: "toggle",
+            config_column_names: ["Columns"],
+            group_rollup_modes: ["rollup", "flat", "total"],
+            // Higher priority than the chart plugins so the Datagrid is
+            // loaded by default.
+            priority: 1,
+            can_render_column_styles: true,
+        };
     }
 
-    can_render_column_styles(type: string, _group: string): boolean {
-        return type !== "boolean";
+    plugin_config_schema(): ColumnConfigSchema {
+        const fields = [];
+        fields.push({
+            kind: "Enum",
+            key: "edit_mode",
+            default: "READ_ONLY",
+            variants: [
+                { value: "EDIT", label: "Edit" },
+                { value: "READ_ONLY", label: "Read-only" },
+                { value: "SELECT_ROW", label: "Row Select" },
+                { value: "SELECT_COLUMN", label: "Column Select" },
+                { value: "SELECT_REGION", label: "Region Select" },
+                { value: "SELECT_ROW_TREE", label: "Tree Select" },
+            ],
+        });
+
+        fields.push({
+            kind: "Bool",
+            key: "scroll_lock",
+            default: false,
+        });
+
+        return {
+            fields,
+        };
     }
 
-    column_style_controls(type: string, group: string): ColumnStyleOpts {
-        return column_style_controls.call(this, type as any, group);
+    column_config_schema(
+        type: string,
+        group: string | undefined,
+        column_name: string,
+        current_value: Record<string, unknown> | null,
+        viewer_config?: { group_by?: string[]; group_rollup_mode?: string },
+        column_stats?: { abs_max: number },
+    ): ColumnConfigSchema {
+        return column_config_schema.call(
+            this,
+            type as any,
+            group,
+            column_name,
+            current_value,
+            viewer_config,
+            column_stats,
+        );
     }
 
     async draw(view: View): Promise<void> {
@@ -170,9 +193,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         }
     }
 
-    async render(viewport?: ViewWindow): Promise<string> {
-        const viewer = this.parentElement as PerspectiveViewerElement;
-        const view = await viewer.getView();
+    async render(view: View, viewport?: ViewWindow): Promise<string> {
         const json = await view.to_columns(viewport as any);
         const cols = await view.column_paths(viewport as any);
 
@@ -192,7 +213,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
                 const pluginConfig = (this.regular_table as any)[
                     PRIVATE_PLUGIN_SYMBOL
                 ] as ColumnsConfig | undefined;
-                const columnName = col_name.split("|").at(-1)!;
+                const columnName = sourceColumn(col_name);
                 const formatter = format_raw(
                     type,
                     pluginConfig?.[columnName] || {},
@@ -204,13 +225,14 @@ export class HTMLPerspectiveViewerDatagridPluginElement
                     out += col[ridx] + "\t";
                 }
             }
+
             out += "\n";
         }
 
         return out.trim();
     }
 
-    async resize(): Promise<void> {
+    async resize(_view: View): Promise<void> {
         if (!this.isConnected || this.offsetParent == null) {
             return;
         }
@@ -225,25 +247,17 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         this.regular_table.clear();
     }
 
-    async save(): Promise<any> {
+    save(): any {
         return save.call(this);
     }
 
-    async restore(
-        token: DatagridPluginConfig,
-        columns_config?: ColumnsConfig,
-    ): Promise<any> {
+    restore(token: DatagridPluginConfig, columns_config?: ColumnsConfig): void {
         return restore.call(this, token, columns_config ?? {});
     }
 
-    async restyle(): Promise<void> {
-        // Get view from model if available, otherwise no-op
-        if (this.model?._view) {
-            await this.draw(this.model._view);
-        }
-    }
+    restyle() {}
 
-    async delete(): Promise<void> {
+    delete(): void {
         this.disconnectedCallback();
         this._toolbar = undefined;
         if ((this.regular_table as any).table_model) {

package/src/ts/custom_elements/toolbar.ts

@@ -10,12 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import TOOLBAR_STYLE from "../../../dist/css/perspective-viewer-datagrid-toolbar.css";
 import { toggle_edit_mode, toggle_scroll_lock } from "../model/toolbar.js";
-import type {
-    DatagridPluginElement,
-    PerspectiveViewerElement,
-} from "../types.js";
+import type { DatagridPluginElement } from "../types.js";
 
 const stylesheet = new CSSStyleSheet();
 stylesheet.replaceSync(TOOLBAR_STYLE);
@@ -53,7 +51,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
             </div>
         `;
 
-        const viewer = this.parentElement as PerspectiveViewerElement;
+        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
         const plugin = this.previousElementSibling as DatagridPluginElement;
 
         plugin._scroll_lock = this.shadowRoot!.querySelector(
@@ -66,6 +64,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
         plugin._edit_button = this.shadowRoot!.querySelector(
             "#edit_mode",
         ) as HTMLElement;
+
         plugin._edit_button.addEventListener("click", () => {
             toggle_edit_mode.call(plugin);
             plugin.regular_table.draw();

package/src/ts/data_listener/format_cell.ts

@@ -12,7 +12,7 @@
 
 import { FormatterCache, Formatter } from "./formatter_cache.js";
 import type { DatagridModel, ColumnsConfig, ColumnConfig } from "../types.js";
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 
 const FORMAT_CACHE = new FormatterCache();
 const MAX_BAR_WIDTH_PCT = 1;
@@ -44,7 +44,11 @@ export function format_cell(
     const plugin: ColumnConfig = plugins[title] || {};
     const is_numeric = type === "integer" || type === "float";
 
-    if (is_numeric && plugin?.number_fg_mode === "bar") {
+    if (
+        is_numeric &&
+        (plugin?.number_fg_mode === "bar" ||
+            plugin?.number_fg_mode === "label-bar")
+    ) {
         const a = Math.max(
             0,
             Math.min(
@@ -54,15 +58,30 @@ export function format_cell(
             ),
         );
 
-        const div = this._div_factory.get();
-        const anchor = (val as number) >= 0 ? "left" : "right";
+        const anchor = (val as number) >= 0 ? "" : "justify-self:flex-end;";
         const pct = (a * 100).toFixed(2);
-        div.setAttribute(
-            "style",
-            `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
-        );
 
-        return div;
+        if (plugin.number_fg_mode === "bar") {
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+
+            return div;
+        } else {
+            const formatter = FORMAT_CACHE.get(type, plugin);
+            const label = formatter ? formatter.format(val) : (val as string);
+
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `--label:"${label}";${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+            return div;
+        }
     } else if (plugin?.format === "link" && type === "string") {
         const anchor = document.createElement("a");
         anchor.setAttribute("href", val as string);

package/src/ts/data_listener/format_tree_header.ts

@@ -27,7 +27,7 @@ export function* format_tree_header_row_path(
 ): Generator<RowHeaderCell[]> {
     const plugins: ColumnsConfig =
         (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
-    for (let path of paths) {
+    for (const path of paths) {
         const fullPath: unknown[] = ["TOTAL", ...path];
         const last = fullPath[fullPath.length - 1];
         let newPath: RowHeaderCell[] = fullPath
@@ -61,7 +61,7 @@ export function* format_flat_header_row_path(
     const plugins: ColumnsConfig =
         (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
 
-    for (let path of paths) {
+    for (const path of paths) {
         yield path.map((part, i) =>
             format_cell.call(this, row_headers[i], part, plugins, true),
         ) as RowHeaderCell[];

package/src/ts/data_listener/formatter_cache.ts

@@ -10,7 +10,12 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
+import {
+    createDateFormatter,
+    createDatetimeFormatter,
+    createNumberFormatter,
+} from "@perspective-dev/viewer/src/ts/column-format.js";
 import type { ColumnConfig } from "../types.js";
 
 export interface Formatter {
@@ -26,30 +31,6 @@ class BooleanFormatter implements Formatter {
 // PluginConfig is a subset of ColumnConfig with the formatting properties
 type PluginConfig = Pick<ColumnConfig, "date_format" | "number_format">;
 
-const LEGACY_CONFIG: Record<
-    string,
-    { format: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions }
-> = {
-    float: {
-        format: {
-            style: "decimal",
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        },
-    },
-    datetime: {
-        format: {
-            dateStyle: "short",
-            timeStyle: "medium",
-        } as Intl.DateTimeFormatOptions,
-    },
-    date: {
-        format: {
-            dateStyle: "short",
-        } as Intl.DateTimeFormatOptions,
-    },
-};
-
 export class FormatterCache {
     private _formatters: Map<string, Formatter | false>;
 
@@ -61,89 +42,21 @@ export class FormatterCache {
         _type: ColumnType,
         plugin: PluginConfig,
     ): Intl.DateTimeFormat {
-        if (plugin.date_format?.format !== "custom") {
-            const options: Intl.DateTimeFormatOptions = {
-                timeZone: plugin.date_format?.timeZone,
-                dateStyle:
-                    plugin.date_format?.dateStyle === "disabled"
-                        ? undefined
-                        : (plugin.date_format?.dateStyle ?? "short"),
-                timeStyle:
-                    plugin.date_format?.timeStyle === "disabled"
-                        ? undefined
-                        : (plugin.date_format?.timeStyle ?? "medium"),
-            };
-
-            return new Intl.DateTimeFormat(
-                navigator.languages as string[],
-                options,
-            );
-        } else {
-            const options: Intl.DateTimeFormatOptions = {
-                timeZone: plugin.date_format?.timeZone,
-                hour12: plugin.date_format?.hour12 ?? true,
-                fractionalSecondDigits:
-                    plugin.date_format?.fractionalSecondDigits,
-            };
-
-            if (plugin.date_format?.year !== "disabled") {
-                options.year = plugin.date_format?.year ?? "2-digit";
-            }
-            if (plugin.date_format?.month !== "disabled") {
-                options.month = plugin.date_format?.month ?? "numeric";
-            }
-            if (plugin.date_format?.day !== "disabled") {
-                options.day = plugin.date_format?.day ?? "numeric";
-            }
-            if (
-                plugin.date_format?.weekday &&
-                plugin.date_format?.weekday !== "disabled"
-            ) {
-                options.weekday = plugin.date_format.weekday;
-            }
-            if (plugin.date_format?.hour !== "disabled") {
-                options.hour = plugin.date_format?.hour ?? "numeric";
-            }
-            if (plugin.date_format?.minute !== "disabled") {
-                options.minute = plugin.date_format?.minute ?? "numeric";
-            }
-            if (plugin.date_format?.second !== "disabled") {
-                options.second = plugin.date_format?.second ?? "numeric";
-            }
-
-            return new Intl.DateTimeFormat(
-                navigator.languages as string[],
-                options,
-            );
-        }
+        return createDatetimeFormatter(plugin.date_format);
     }
 
     private create_date_formatter(
         _type: ColumnType,
         plugin: PluginConfig,
     ): Intl.DateTimeFormat {
-        const options: Intl.DateTimeFormatOptions = {
-            timeZone: "utc",
-            dateStyle:
-                plugin.date_format?.dateStyle === "disabled"
-                    ? undefined
-                    : (plugin.date_format?.dateStyle ?? "short"),
-        };
-
-        return new Intl.DateTimeFormat(
-            navigator.languages as string[],
-            options,
-        );
+        return createDateFormatter(plugin.date_format);
     }
 
     private create_number_formatter(
         type: ColumnType,
         plugin: PluginConfig,
     ): Intl.NumberFormat {
-        const format =
-            plugin.number_format ??
-            (LEGACY_CONFIG[type]?.format as Intl.NumberFormatOptions);
-        return new Intl.NumberFormat(navigator.languages as string[], format);
+        return createNumberFormatter(type, plugin.number_format);
     }
 
     private create_boolean_formatter(