@peter.prib/renderengine 0.13.0 → 0.14.0

package/src/index.js

@@ -33,6 +33,10 @@ import { LagPlotChart } from './charting/charts/LagPlotChart.js';
 import { TreemapChart } from './charting/charts/TreemapChart.js';
 import { SunburstChart } from './charting/charts/SunburstChart.js';
 import { OutlineChart } from './charting/charts/OutlineChart.js';
+import { IcicleChart } from './charting/charts/IcicleChart.js';
+import { ParetoChart } from './charting/charts/ParetoChart.js';
+import { LollipopChart } from './charting/charts/LollipopChart.js';
+import { MarimekkoChart } from './charting/charts/MarimekkoChart.js';
 import { TableChart } from './charting/charts/TableChart.js';
 import { ChartChooser } from './charting/ChartChooser.js';
 import { TableView } from './charting/table/TableView.js';
@@ -40,6 +44,8 @@ import { TableViewChart } from './charting/table/TableViewChart.js';
 import { PivotView } from './charting/pivot/PivotView.js';
 import { PivotGridChart } from './charting/pivot/PivotGridChart.js';
 import { PivotChart } from './charting/pivot/PivotChart.js';
+import { AskView } from './charting/ask/AskView.js';
+import { AskBar } from './charting/ask/AskBar.js';
 import { RadarChart } from './charting/charts/RadarChart.js';
 import { FunnelChart } from './charting/charts/FunnelChart.js';
 import { WaterfallChart } from './charting/charts/WaterfallChart.js';
@@ -228,7 +234,8 @@ import {
 // separate browser-only entry: import 'renderengine/src/workspace.js' directly.
 
 export {
-  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart, TableView, TableViewChart, PivotView, PivotGridChart, PivotChart,
+  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart, TableView, TableViewChart, PivotView, PivotGridChart, PivotChart, AskView, AskBar,
+  ParetoChart, LollipopChart, MarimekkoChart, IcicleChart,
   DIAGRAM_CATALOG, getDiagramCatalogEntry, diagramRegistry,
   TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry,
   AXIS_KIND, ENCODING_CHANNEL, COORD_SYSTEM, COLOR_MODE, CAMERA_MODE,
@@ -1500,6 +1507,39 @@ export class RenderEngine {
         const back = this.renderer.text('◂ Table', 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle' });
         back?.addEventListener?.('click', () => this._drawResultTable(view, options));
         if (back?.style) back.style.cursor = 'pointer';
+        const choices = view.chartChoices();
+        if (choices.length > 1) {
+            const pick = this.renderer.text(`${choice.label} ▾`, 68, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
+            const show = options.showMenu ?? ((x, y, items) => PopupMenu.show(x, y, items));
+            pick?.addEventListener?.('click', (e) => show(e.clientX, e.clientY, choices.map(c => ({
+                label: `${c.label}${c.key === choice.key ? ' ✓' : ''}`,
+                action: () => this._drawResultChart(view, c, options),
+            }))));
+            if (pick?.style) pick.style.cursor = 'pointer';
+        }
+    }
+
+    /**
+     * Mounts an interactive `AskBar` (question input, configurable next-word prediction in a
+     * scrollable list, semantic sense/reference/relation badges, and sample query pills) into
+     * `container` (or links `resultEngine: this` when called as `engine.askBar(container, options)`).
+     * @param {HTMLElement|string|object} containerOrOptions host container element/id, or options when mounting into `this.container`
+     * @param {object} [options] `AskBar` / `AskView` options (`suggest`, `measures`, `dimensions`, `members`, `sampleQuestions`, `visibleCount`, `predictChoices`, `onAsk`, etc.)
+     * @returns {AskBar}
+     */
+    askBar(containerOrOptions, options = {}) {
+        const isPlainOptions = containerOrOptions
+            && typeof containerOrOptions === 'object'
+            && !containerOrOptions.nodeType
+            && typeof containerOrOptions.appendChild !== 'function';
+        const container = isPlainOptions ? this.container : containerOrOptions;
+        const opts = isPlainOptions ? containerOrOptions : options;
+        return new AskBar(container, { resultEngine: this, ...opts });
+    }
+
+    /** Static helper: `RenderEngine.askBar(container, options)` constructs and mounts an `AskBar`. */
+    static askBar(container, options = {}) {
+        return new AskBar(container, options);
     }
 
     /**
@@ -1550,7 +1590,8 @@ export class RenderEngine {
     pivotChart(view, options = {}) {
         if (!this.renderer) return null;
         const chart = new PivotChart(view, options);
-        chart.detach = view.listen(() => this._drawPivotChart(chart, options));
+        chart.redraw = () => this._drawPivotChart(chart, options);
+        chart.detach = view.listen(chart.redraw);
         this._drawPivotChart(chart, options);
         return chart;
     }
@@ -1561,15 +1602,19 @@ export class RenderEngine {
         if (choice === null) {
             this.renderer.clear();
             this.renderer.text('No chart fits what the grid shows', 8, 14, { fill: '#666', fontSize: '12px', verticalAlign: 'middle' });
+            options.onDraw?.(null, chart);
             return;
         }
         // No title unless one is given: the grid beside it says what is charted, and the link below
         // names the chart (with the chooser's reason as its tooltip).
         this.renderChartType(choice.key, choice.data, {
+            ...choice.options,
             title: options.title,
             legend: true,   // a series per column member: which colour is which must be said
             onDatumClick: (datum) => chart.click(datum),
+            onNodeClick: (node) => chart.click({ label: node.label }),
         });
+        options.onDraw?.(choice, chart);
         // Which chart, and the menu to change it, drawn over the chart as resultView's "◂ Table" is.
         if (!this.renderer.supportsSceneGraph) return;
         const pick = this.renderer.text(`${choice.label} ▾`, 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
@@ -1587,6 +1632,57 @@ export class RenderEngine {
         this.fitToContainer();
     }
 
+    /**
+     * Renders an icicle chart — rectangular hierarchical partition chart (top-down bands by depth,
+     * width proportional to value within each parent's span).
+     * @param {Array<{label: string, value?: number, children?: Array}>} data
+     * @param {object} [options]
+     */
+    icicleChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'icicle', data, options };
+        this._renderChart(new IcicleChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a Pareto chart — categories sorted descending with a cumulative percentage line (0–100%)
+     * on a right-hand axis and an 80% cutoff reference line.
+     * @param {Array<{label: string, value: number}>} data
+     * @param {object} [options]
+     */
+    paretoChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'pareto', data, options };
+        this._renderChart(new ParetoChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a lollipop chart — stem-and-dot alternative to bars for 1D or multi-series comparisons.
+     * @param {Array<{label: string, value: number}>|Array<{name: string, values: Array<{label: string, value: number}>}>} data
+     * @param {object} [options]
+     */
+    lollipopChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'lollipop', data, options };
+        this._renderChart(new LollipopChart(this.renderer, data, options));
+    }
+
+    /**
+     * Renders a Marimekko (mosaic) chart — variable-width 100%-stacked columns where column width is
+     * proportional to each category's total and segment height is each series' share within that category.
+     * @param {Array<{name: string, values: Array<{label: string, value: number}>}>|Array<{label: string, values: number[]}>} data
+     * @param {object} [options]
+     */
+    marimekkoChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'marimekko', data, options };
+        this._renderChart(new MarimekkoChart(this.renderer, data, options));
+    }
+
     /**
      * Renders a waterfall chart — running-total bars, each floating from the
      * previous cumulative value to the new one (a "delta" bar), except