@perspective-dev/viewer 4.4.0 → 4.5.0

package/src/themes/solarized.css

@@ -40,31 +40,21 @@ perspective-viewer[theme="Solarized"] {
     --psp-datagrid--hover--border-color: #ccc;
     --psp-datagrid--border-color: #93a1a1;
 
-    /* perspective-viewer-solarized--d3fc */
-    --psp-d3fc--treemap--labels: black;
-    --psp-d3fc--treemap--hover-highlight: black;
+    /* perspective-viewer-solarized--webgl */
+    --psp-charts--treemap--labels: black;
+    --psp-charts--treemap--hover-highlight: black;
 
-    --psp-d3fc--axis-ticks--color: #586e75;
-    --psp-d3fc--gridline--color: #eee8d5;
-    --psp-d3fc--series--color: #268bd2;
-    --psp-d3fc--series-1--color: #268bd2;
-    --psp-d3fc--series-2--color: #cb4b16;
-    --psp-d3fc--series-3--color: #b58900;
-    --psp-d3fc--series-4--color: #859900;
-    --psp-d3fc--series-5--color: #2aa198;
+    --psp-charts--axis-ticks--color: #586e75;
+    --psp-charts--gridline--color: #eee8d5;
+    --psp-charts--series--color: #268bd2;
+    --psp-charts--series-1--color: #268bd2;
+    --psp-charts--series-2--color: #cb4b16;
+    --psp-charts--series-3--color: #b58900;
+    --psp-charts--series-4--color: #859900;
+    --psp-charts--series-5--color: #2aa198;
 
-    --psp-d3fc--series-6--color: #6c71c4;
-    --psp-d3fc--series-7--color: #d33682;
-
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #268bd2 0%,
-        #2aa198,
-        #859900,
-        #b58900,
-        #cb4b16,
-        #dc322f,
-        #d33682 100%
-    );
+    --psp-charts--series-6--color: #6c71c4;
+    --psp-charts--series-7--color: #d33682;
 }
 
 x {

package/src/themes/themes.css

@@ -20,3 +20,4 @@
 @import "./gruvbox-dark.css";
 @import "./dracula.css";
 @import "./botanical.css";
+@import "./phosphor.css";

package/src/themes/vaporwave.css

@@ -53,41 +53,33 @@ perspective-viewer[theme="Vaporwave"] {
     --psp-datagrid--pos-cell--color: #7dc3f0;
     --psp-datagrid--neg-cell--color: #ff9485;
 
-    /* perspective-viewer-pro-dark--d3fc (overrides) */
-    --psp-d3fc--legend--color: #c5c9d0;
-    --psp-d3fc--treemap--labels: white;
-    --psp-d3fc--treemap--hover-highlight: white;
-    --psp-d3fc--tooltip--color: white;
-    --psp-d3fc--axis-ticks--color: #c5c9d0;
-    --psp-d3fc--axis-lines--color: #61656e;
-    --psp-d3fc--gridline--color: #3b3f46;
-    --psp-d3fc--tooltip--background: rgba(42, 44, 47, 1);
-    --psp-d3fc--tooltip--border-color: #242526;
-    --psp-d3fc--legend--background: var(--psp--background-color);
-    --psp-d3fc--series--color: rgb(71, 120, 194);
-    --psp-d3fc--series-1--color: rgb(71, 120, 194);
-    --psp-d3fc--series-2--color: rgb(204, 120, 48);
-    --psp-d3fc--series-3--color: rgb(158, 84, 192);
-    --psp-d3fc--series-4--color: rgb(51, 150, 153);
-    --psp-d3fc--series-5--color: rgb(102, 114, 143);
-    --psp-d3fc--series-6--color: rgb(211, 103, 189);
-    --psp-d3fc--series-7--color: rgb(109, 124, 77);
-    --psp-d3fc--series-8--color: rgb(221, 99, 103);
-    --psp-d3fc--series-9--color: rgb(120, 104, 206);
-    --psp-d3fc--series-10--color: rgb(23, 166, 123);
-    --psp-d3fc--full-gradient--background: linear-gradient(
+    /* perspective-viewer-pro-dark--webgl (overrides) */
+    --psp-charts--legend--color: #c5c9d0;
+    --psp-charts--treemap--labels: white;
+    --psp-charts--treemap--hover-highlight: white;
+    --psp-charts--tooltip--color: white;
+    --psp-charts--axis-ticks--color: #c5c9d0;
+    --psp-charts--axis-lines--color: #61656e;
+    --psp-charts--gridline--color: #3b3f46;
+    --psp-charts--tooltip--background: rgba(42, 44, 47, 1);
+    --psp-charts--tooltip--border-color: #242526;
+    --psp-charts--legend--background: var(--psp--background-color);
+    --psp-charts--series--color: rgb(71, 120, 194);
+    --psp-charts--series-1--color: rgb(71, 120, 194);
+    --psp-charts--series-2--color: rgb(204, 120, 48);
+    --psp-charts--series-3--color: rgb(158, 84, 192);
+    --psp-charts--series-4--color: rgb(51, 150, 153);
+    --psp-charts--series-5--color: rgb(102, 114, 143);
+    --psp-charts--series-6--color: rgb(211, 103, 189);
+    --psp-charts--series-7--color: rgb(109, 124, 77);
+    --psp-charts--series-8--color: rgb(221, 99, 103);
+    --psp-charts--series-9--color: rgb(120, 104, 206);
+    --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
         #3289c8 100%
     );
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #242526 0%,
-        #3289c8 100%
-    );
-    --psp-d3fc--neg-gradient--background: linear-gradient(
-        #dd6367 0%,
-        #242526 100%
-    );
 
     /* perspective-viewer-pro-dark--openlayers (overrides) */
     --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
@@ -143,49 +135,23 @@ perspective-viewer[theme="Vaporwave"] {
         background-position: 0px -10px;
     }
 
-    /* perspective-viewer-vaporwave--d3fc */
-    --psp-d3fc--axis-ticks--color: #49acff;
-    --psp-d3fc--gridline--color: rgb(19, 33, 50);
-    --psp-d3fc--series--color: #01cdfe;
-    --psp-d3fc--series-1--color: #01cdfe;
-    --psp-d3fc--series-2--color: #ff71ce;
-    --psp-d3fc--series-3--color: #05ffa1;
-    --psp-d3fc--series-4--color: #b967ff;
-    --psp-d3fc--series-5--color: #fffb96;
-
-    --psp-d3fc--series-6--color: hsl(192, 99%, 25%);
-    --psp-d3fc--series-7--color: hsl(321, 100%, 36%);
-    --psp-d3fc--series-8--color: hsl(192, 99%, 25%);
-    --psp-d3fc--series-9--color: hsl(157, 100%, 25%);
-    --psp-d3fc--series-10--color: hsl(272, 100%, 35%);
-
-    --psp-d3fc--neg-gradient--background: linear-gradient(
-        #f3d431,
-        #efb92d,
-        #ed9c25,
-        #eb7e20,
-        #e75d1e,
-        #d14632,
-        #b03e38,
-        #8c3a36,
-        #643633,
-        #07081d
-    ) !important;
-
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #07081d,
-        #2e4463,
-        #1e588a,
-        #086da7,
-        #0082b9,
-        #039ac7,
-        #12b1d4,
-        #2bc8e2,
-        #3ddff0,
-        #61f4fb
-    ) !important;
-
-    --psp-d3fc--full-gradient--background: linear-gradient(
+    /* perspective-viewer-vaporwave--webgl */
+    --psp-charts--axis-ticks--color: #49acff;
+    --psp-charts--gridline--color: rgb(19, 33, 50);
+    --psp-charts--series--color: #01cdfe;
+    --psp-charts--series-1--color: #01cdfe;
+    --psp-charts--series-2--color: #ff71ce;
+    --psp-charts--series-3--color: #05ffa1;
+    --psp-charts--series-4--color: #b967ff;
+    --psp-charts--series-5--color: #fffb96;
+
+    --psp-charts--series-6--color: hsl(192, 99%, 25%);
+    --psp-charts--series-7--color: hsl(321, 100%, 36%);
+    --psp-charts--series-8--color: hsl(192, 99%, 25%);
+    --psp-charts--series-9--color: hsl(157, 100%, 25%);
+    --psp-charts--series-10--color: hsl(272, 100%, 35%);
+
+    --psp-charts--gradient--background: linear-gradient(
         #f3d431,
         #efb92d,
         #ed9c25,

package/src/ts/bootstrap.ts

@@ -10,17 +10,28 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import * as wasm_module from "../../dist/wasm/perspective-viewer.js";
+import type * as wasm_module_type from "../../dist/wasm/perspective-viewer.js";
 import { load_wasm_stage_0 } from "@perspective-dev/client/src/ts/wasm/decompress.ts";
 
+// @ts-ignore
+import * as worker_url from "./perspective-viewer.worker";
+
 export async function init_client(
     wasm_binary:
         | Promise<Response | ArrayBuffer | Uint8Array>
         | Response
         | ArrayBuffer
         | Uint8Array,
+    wasm_module?: typeof wasm_module_type,
 ) {
-    const module_or_path = await load_wasm_stage_0(wasm_binary);
+    // @ts-ignore
+    const url = await worker_url.getWorkerURL();
+    if (wasm_module === undefined) {
+        wasm_module = (await import(url)) as typeof wasm_module_type;
+    }
+
+    const unzipped = await load_wasm_stage_0(wasm_binary);
+    const module_or_path = await WebAssembly.compile(unzipped as BufferSource);
     await wasm_module.default({ module_or_path });
-    await wasm_module.init();
+    await wasm_module.init(module_or_path, url);
 }

package/src/ts/column-format.ts

@@ -0,0 +1,162 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Cross-package helpers for per-column value formatting. Used by both
+ * `viewer-datagrid` (cell formatting) and `viewer-charts` (axis ticks,
+ * tooltips, legends) so a column's `number_format` / `date_format`
+ * configuration produces identical output across plugins.
+ *
+ * The format configs mirror the `Intl.NumberFormatOptions` /
+ * `Intl.DateTimeFormatOptions` shapes one-for-one — they're written
+ * straight into the respective constructors. The `date_format.format`
+ * discriminator ("simple" | "custom") selects between two derivation
+ * paths: simple uses `dateStyle` / `timeStyle`, custom uses the
+ * per-field overrides (year / month / day / ...).
+ */
+
+export interface NumberFormatConfig {
+    style?: "decimal" | "currency" | "percent" | "unit";
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumIntegerDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+    currency?: string;
+    currencyDisplay?: "code" | "symbol" | "narrowSymbol" | "name";
+    notation?: "standard" | "scientific" | "engineering" | "compact";
+    compactDisplay?: "short" | "long";
+    useGrouping?: boolean;
+}
+
+export interface DateFormatConfig {
+    format?: "custom" | string;
+    timeZone?: string;
+    dateStyle?: "short" | "medium" | "long" | "full" | "disabled";
+    timeStyle?: "short" | "medium" | "long" | "full" | "disabled";
+    second?: "numeric" | "2-digit" | "disabled";
+    minute?: "numeric" | "2-digit" | "disabled";
+    hour?: "numeric" | "2-digit" | "disabled";
+    day?: "numeric" | "2-digit" | "disabled";
+    weekday?: "narrow" | "short" | "long" | "disabled";
+    month?: "numeric" | "2-digit" | "narrow" | "short" | "long" | "disabled";
+    year?: "numeric" | "2-digit" | "disabled";
+    hour12?: boolean;
+    fractionalSecondDigits?: 1 | 2 | 3;
+}
+
+/**
+ * Default `Intl.NumberFormatOptions` applied when a numeric column has no
+ * `number_format` configured. Float columns get two fractional digits to
+ * match the legacy datagrid behavior; integer columns get an empty
+ * options bag (locale-default integer rendering).
+ */
+const NUMERIC_LEGACY_DEFAULTS: Record<string, Intl.NumberFormatOptions> = {
+    float: {
+        style: "decimal",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    },
+};
+
+/**
+ * Default `Intl.DateTimeFormatOptions` applied when a datetime column has
+ * no `date_format` configured.
+ */
+const DATETIME_LEGACY_DEFAULTS: Intl.DateTimeFormatOptions = {
+    dateStyle: "short",
+    timeStyle: "medium",
+};
+
+const DATE_LEGACY_DEFAULTS: Intl.DateTimeFormatOptions = {
+    dateStyle: "short",
+};
+
+export function createNumberFormatter(
+    type: string,
+    cfg?: NumberFormatConfig,
+): Intl.NumberFormat {
+    const opts: Intl.NumberFormatOptions =
+        cfg ?? NUMERIC_LEGACY_DEFAULTS[type] ?? {};
+    return new Intl.NumberFormat(navigator.languages as string[], opts);
+}
+
+export function createDatetimeFormatter(
+    cfg?: DateFormatConfig,
+): Intl.DateTimeFormat {
+    if (!cfg || cfg.format !== "custom") {
+        const opts: Intl.DateTimeFormatOptions = {
+            timeZone: cfg?.timeZone,
+            dateStyle:
+                cfg?.dateStyle === "disabled"
+                    ? undefined
+                    : (cfg?.dateStyle ?? DATETIME_LEGACY_DEFAULTS.dateStyle),
+            timeStyle:
+                cfg?.timeStyle === "disabled"
+                    ? undefined
+                    : (cfg?.timeStyle ?? DATETIME_LEGACY_DEFAULTS.timeStyle),
+        };
+
+        return new Intl.DateTimeFormat(navigator.languages as string[], opts);
+    }
+
+    const opts: Intl.DateTimeFormatOptions = {
+        timeZone: cfg.timeZone,
+        hour12: cfg.hour12 ?? true,
+        fractionalSecondDigits: cfg.fractionalSecondDigits,
+    };
+    if (cfg.year !== "disabled") {
+        opts.year = cfg.year ?? "2-digit";
+    }
+    if (cfg.month !== "disabled") {
+        opts.month = cfg.month ?? "numeric";
+    }
+    if (cfg.day !== "disabled") {
+        opts.day = cfg.day ?? "numeric";
+    }
+    if (cfg.weekday && cfg.weekday !== "disabled") {
+        opts.weekday = cfg.weekday;
+    }
+    if (cfg.hour !== "disabled") {
+        opts.hour = cfg.hour ?? "numeric";
+    }
+    if (cfg.minute !== "disabled") {
+        opts.minute = cfg.minute ?? "numeric";
+    }
+    if (cfg.second !== "disabled") {
+        opts.second = cfg.second ?? "numeric";
+    }
+    return new Intl.DateTimeFormat(navigator.languages as string[], opts);
+}
+
+export function createDateFormatter(
+    cfg?: DateFormatConfig,
+): Intl.DateTimeFormat {
+    const opts: Intl.DateTimeFormatOptions = {
+        timeZone: "utc",
+        dateStyle:
+            cfg?.dateStyle === "disabled"
+                ? undefined
+                : (cfg?.dateStyle ?? DATE_LEGACY_DEFAULTS.dateStyle),
+    };
+    return new Intl.DateTimeFormat(navigator.languages as string[], opts);
+}
+
+/**
+ * Recover the source column name from a synthetic split-by path. Split
+ * pivoting produces paths of the form `<split_val_1>|...|<source_col>`;
+ * per-column config (formatters, aggregate styling, …) is always keyed
+ * on the trailing source column.
+ */
+export function sourceColumn(path: string): string {
+    return path.split("|").at(-1) ?? path;
+}

package/src/ts/extensions.ts

@@ -26,7 +26,6 @@ export class PerspectiveSelectDetail {
     column_names?: string[];
     removeConfigs: ViewConfigUpdate[];
     insertConfigs: ViewConfigUpdate[];
-
     constructor(
         selected: boolean,
         row: Record<string, unknown>,
@@ -49,6 +48,7 @@ export class PerspectiveSelectDetail {
         return this.insertConfigs.flatMap((x) => x.filter ?? []);
     }
 }
+
 import type {
     ExportDropDownMenuElement,
     CopyDropDownMenuElement,
@@ -178,6 +178,10 @@ export interface PerspectiveViewerElementExt {
      */
     registerPlugin(name: string): Promise<void>;
 
+    get_wasm_module(): WebAssembly.Module;
+
+    get_worker_url(): URL;
+
     addEventListener(
         name: "perspective-click",
         cb: (e: CustomEvent) => void,
@@ -190,6 +194,12 @@ export interface PerspectiveViewerElementExt {
         options?: { signal: AbortSignal },
     ): void;
 
+    addEventListener(
+        name: "perspective-global-filter",
+        cb: (e: CustomEvent<PerspectiveSelectEventDetail>) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
     addEventListener(
         name: "perspective-toggle-settings",
         cb: (e: CustomEvent) => void,
@@ -228,6 +238,7 @@ export interface PerspectiveViewerElementExt {
 
     removeEventListener(name: "perspective-click", cb: any): void;
     removeEventListener(name: "perspective-select", cb: any): void;
+    removeEventListener(name: "perspective-global-filter", cb: any): void;
     removeEventListener(name: "perspective-toggle-settings", cb: any): void;
     removeEventListener(
         name: "perspective-toggle-settings-before",

package/src/ts/perspective-viewer.ts

@@ -34,13 +34,22 @@
 export { IPerspectiveViewerPlugin } from "./plugin";
 export { HTMLPerspectiveViewerPluginElement } from "./plugin";
 
+export {
+    createNumberFormatter,
+    createDatetimeFormatter,
+    createDateFormatter,
+    sourceColumn,
+} from "./column-format";
+export type { NumberFormatConfig, DateFormatConfig } from "./column-format";
+
 export type * from "./extensions.ts";
 export { PerspectiveSelectDetail } from "./extensions.ts";
 export type * from "./ts-rs/ViewerConfigUpdate.d.ts";
-export type * from "./ts-rs/ColumnConfigValues.d.ts";
+export type * from "./ts-rs/ViewerConfig.d.ts";
 export type * from "./ts-rs/Filter.d.ts";
 export type * from "./ts-rs/FilterTerm.d.ts";
 export type * from "./ts-rs/FilterReducer.d.ts";
+export type * from "./ts-rs/PluginStaticConfig.ts";
 
 export { init_client } from "./bootstrap";
 import { init_client } from "./bootstrap";

package/src/{rust/components/column_settings_sidebar/style_tab/stub.rs → ts/perspective-viewer.worker.ts}

@@ -10,25 +10,5 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use yew::{Html, Properties, function_component, html};
-
-#[derive(Properties, PartialEq)]
-pub struct StubProps {
-    pub error: Option<String>,
-    pub message: String,
-}
-
-#[function_component(Stub)]
-pub fn stub(p: &StubProps) -> Html {
-    if let Some(error) = p.error.clone() {
-        tracing::error!("Rendered stub: {error}");
-    }
-
-    html! {
-        <div class="style_contents">
-            <div id="column-style-container" class="no-style">
-                <div class="style-contents">{ p.message.clone() }</div>
-            </div>
-        </div>
-    }
-}
+export * from "../../dist/wasm/perspective-viewer.js";
+export { default } from "../../dist/wasm/perspective-viewer.js";