@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/modelTree/NavigatorPanel.js

@@ -0,0 +1,453 @@
+import { NavigatorModel } from './NavigatorModel.js';
+import { typeTitle } from '../archimate/archimateNames.js';
+import { treeLayerOf } from './ModelTreePanel.js';
+import { ArchimateNotation } from '../../archimate.js';
+
+/**
+ * NavigatorPanel — interactive, multi-step relationship visual explorer panel.
+ *
+ * Provides step-by-step traversal along incoming and outgoing relationships,
+ * breadcrumbs / history navigation (back/forward), pinning, direction filters,
+ * and view navigation.
+ */
+export class NavigatorPanel {
+    /**
+     * @param {Document} doc
+     * @param {Object} options
+     * @param {ArchimateModel} options.model
+     * @param {NavigatorModel} [options.navigatorModel]
+     * @param {string} [options.elementId]
+     * @param {(item: { kind: string, id: string }) => void} [options.onSelectItem]
+     * @param {(viewId: string) => void} [options.onSelectView]
+     */
+    constructor(doc, { model, navigatorModel = null, elementId = null, onSelectItem = () => {}, onSelectView = () => {} } = {}) {
+        this.doc = doc;
+        this.model = model;
+        this.nav = navigatorModel || new NavigatorModel(model, { rootId: elementId });
+        if (elementId && !this.nav.currentId) {
+            this.nav.focus(elementId);
+        }
+        this.onSelectItem = onSelectItem;
+        this.onSelectView = onSelectView;
+
+        this.element = this._createDOM();
+        this._unsubscribe = this.nav.onChange(() => this.render());
+    }
+
+    destroy() {
+        this._unsubscribe?.();
+    }
+
+    /** Set or update the focused element (respects navigator pinning). */
+    setElementId(elementId) {
+        if (!elementId) return;
+        this.nav.focus(elementId);
+    }
+
+    /** The container DOM element. */
+    get dom() {
+        return this.element;
+    }
+
+    _createDOM() {
+        const root = this.doc.createElement('div');
+        root.className = 're-navigator-panel';
+        root.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            font-size: 12px;
+            color: #333;
+            background: #fff;
+            overflow: hidden;
+            user-select: none;
+        `;
+
+        this.toolbar = this._buildToolbar();
+        root.appendChild(this.toolbar);
+
+        this.content = this.doc.createElement('div');
+        this.content.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+        root.appendChild(this.content);
+
+        this.render();
+        return root;
+    }
+
+    _buildToolbar() {
+        const bar = this.doc.createElement('div');
+        bar.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 6px 8px;
+            background: #f7f7f8;
+            border-bottom: 1px solid #e1e4e8;
+            flex-shrink: 0;
+        `;
+
+        const btn = (icon, title, onClick) => {
+            const b = this.doc.createElement('button');
+            b.type = 'button';
+            b.title = title;
+            b.textContent = icon;
+            b.style.cssText = `
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 24px;
+                height: 24px;
+                padding: 0;
+                border: 1px solid #d1d5da;
+                border-radius: 3px;
+                background: #fff;
+                cursor: pointer;
+                font-size: 12px;
+                color: #444;
+            `;
+            b.addEventListener('click', onClick);
+            b.addEventListener('mouseenter', () => { if (!b.disabled) b.style.background = '#eef1f5'; });
+            b.addEventListener('mouseleave', () => { if (!b.disabled) b.style.background = b.dataset.active ? '#e1e4e8' : '#fff'; });
+            return b;
+        };
+
+        this.btnBack = btn('◀', 'Navigate back', () => this.nav.back());
+        this.btnForward = btn('▶', 'Navigate forward', () => this.nav.forward());
+        this.btnPin = btn('📌', 'Pin element (prevents auto-changing root)', () => {
+            this.nav.togglePin();
+            this._updateToolbarState();
+        });
+
+        // Direction selector
+        const dirSelect = this.doc.createElement('select');
+        dirSelect.style.cssText = `
+            font-size: 11px;
+            padding: 2px 4px;
+            border: 1px solid #d1d5da;
+            border-radius: 3px;
+            background: #fff;
+            color: #333;
+            margin-left: auto;
+        `;
+        const dirs = [
+            ['both', '⇄ Both'],
+            ['outgoing', '→ Outgoing'],
+            ['incoming', '← Incoming'],
+        ];
+        for (const [val, label] of dirs) {
+            const opt = this.doc.createElement('option');
+            opt.value = val;
+            opt.textContent = label;
+            dirSelect.appendChild(opt);
+        }
+        dirSelect.value = this.nav.direction;
+        dirSelect.addEventListener('change', () => this.nav.setDirection(dirSelect.value));
+        this.dirSelect = dirSelect;
+
+        bar.appendChild(this.btnBack);
+        bar.appendChild(this.btnForward);
+        bar.appendChild(this.btnPin);
+        bar.appendChild(this.dirSelect);
+
+        this._updateToolbarState();
+        return bar;
+    }
+
+    _updateToolbarState() {
+        if (!this.btnBack) return;
+        this.btnBack.disabled = !this.nav.canBack;
+        this.btnBack.style.opacity = this.nav.canBack ? '1' : '0.4';
+        this.btnBack.style.cursor = this.nav.canBack ? 'pointer' : 'default';
+
+        this.btnForward.disabled = !this.nav.canForward;
+        this.btnForward.style.opacity = this.nav.canForward ? '1' : '0.4';
+        this.btnForward.style.cursor = this.nav.canForward ? 'pointer' : 'default';
+
+        this.btnPin.dataset.active = this.nav.pinned ? 'true' : '';
+        this.btnPin.style.background = this.nav.pinned ? '#e1e4e8' : '#fff';
+        this.btnPin.style.borderColor = this.nav.pinned ? '#888' : '#d1d5da';
+    }
+
+    render() {
+        this._updateToolbarState();
+        if (!this.content) return;
+        this.content.replaceChildren();
+
+        const tree = this.nav.buildTree();
+        if (!tree) {
+            const empty = this.doc.createElement('div');
+            empty.style.cssText = 'color: #888; font-style: italic; padding: 12px; text-align: center;';
+            empty.textContent = '(Select an element to explore connections)';
+            this.content.appendChild(empty);
+            return;
+        }
+
+        // Focused element card
+        this.content.appendChild(this._renderRootCard(tree));
+
+        // Navigation tree container
+        const treeSection = this.doc.createElement('div');
+        treeSection.style.cssText = 'display: flex; flex-direction: column; gap: 4px;';
+
+        const hasConnections = tree.outgoing.length > 0 || tree.incoming.length > 0;
+        if (!hasConnections) {
+            const noRel = this.doc.createElement('div');
+            noRel.style.cssText = 'color: #888; font-size: 11px; padding: 4px 6px;';
+            noRel.textContent = '(No relationships found in selected direction)';
+            treeSection.appendChild(noRel);
+        } else {
+            if (tree.outgoing.length > 0) {
+                treeSection.appendChild(this._renderSectionHeader(`Outgoing (${tree.outgoing.length})`, '→'));
+                for (const branch of tree.outgoing) {
+                    treeSection.appendChild(this._renderBranch(branch));
+                }
+            }
+
+            if (tree.incoming.length > 0) {
+                treeSection.appendChild(this._renderSectionHeader(`Incoming (${tree.incoming.length})`, '←'));
+                for (const branch of tree.incoming) {
+                    treeSection.appendChild(this._renderBranch(branch));
+                }
+            }
+        }
+
+        this.content.appendChild(treeSection);
+    }
+
+    _renderSectionHeader(title, arrow) {
+        const h = this.doc.createElement('div');
+        h.style.cssText = `
+            font-weight: 600;
+            font-size: 11px;
+            color: #586069;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            padding: 4px 0 2px 2px;
+            margin-top: 6px;
+        `;
+        h.textContent = `${arrow} ${title}`;
+        return h;
+    }
+
+    _renderRootCard(tree) {
+        const card = this.doc.createElement('div');
+        card.style.cssText = `
+            background: #f6f8fa;
+            border: 1px solid #e1e4e8;
+            border-radius: 4px;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        `;
+
+        const titleRow = this.doc.createElement('div');
+        titleRow.style.cssText = 'display: flex; align-items: center; justify-content: space-between;';
+
+        const nameSpan = this.doc.createElement('span');
+        nameSpan.style.cssText = 'font-weight: 600; font-size: 13px; color: #24292e;';
+        nameSpan.textContent = tree.element.name || '(unnamed)';
+        titleRow.appendChild(nameSpan);
+
+        card.appendChild(titleRow);
+
+        const metaRow = this.doc.createElement('div');
+        metaRow.style.cssText = 'font-size: 11px; color: #586069; display: flex; gap: 8px;';
+        const typeSpan = this.doc.createElement('span');
+        typeSpan.textContent = typeTitle(tree.element.type);
+        const layerSpan = this.doc.createElement('span');
+        layerSpan.textContent = `• ${typeTitle(tree.layer)}`;
+        metaRow.appendChild(typeSpan);
+        metaRow.appendChild(layerSpan);
+        card.appendChild(metaRow);
+
+        // Views list
+        if (tree.views && tree.views.length > 0) {
+            const viewsDiv = this.doc.createElement('div');
+            viewsDiv.style.cssText = 'margin-top: 4px; padding-top: 4px; border-top: 1px dashed #e1e4e8; font-size: 11px;';
+            const vHeader = this.doc.createElement('div');
+            vHeader.style.cssText = 'color: #586069; margin-bottom: 2px;';
+            vHeader.textContent = `In views (${tree.views.length}):`;
+            viewsDiv.appendChild(vHeader);
+
+            for (const view of tree.views) {
+                const vLink = this.doc.createElement('span');
+                vLink.style.cssText = `
+                    display: inline-block;
+                    margin: 2px 4px 2px 0;
+                    padding: 1px 6px;
+                    background: #eef1f5;
+                    border-radius: 3px;
+                    color: #0366d6;
+                    cursor: pointer;
+                `;
+                vLink.textContent = view.name || 'View';
+                vLink.addEventListener('click', () => {
+                    this.onSelectView(view.id);
+                    this.onSelectItem({ kind: 'element', id: tree.element.id });
+                });
+                viewsDiv.appendChild(vLink);
+            }
+            card.appendChild(viewsDiv);
+        }
+
+        return card;
+    }
+
+    _renderBranch(branch, level = 0) {
+        const wrap = this.doc.createElement('div');
+        wrap.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            margin-left: ${level * 14}px;
+            border-left: ${level > 0 ? '1px dashed #d1d5da' : 'none'};
+            padding-left: ${level > 0 ? '6px' : '0'};
+            margin-bottom: 2px;
+        `;
+
+        const row = this.doc.createElement('div');
+        row.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 3px 6px;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: background 0.1s;
+        `;
+
+        // Expand / collapse chevron (if branch has potential further connections and not cycle)
+        const toggle = this.doc.createElement('span');
+        toggle.style.cssText = `
+            width: 14px;
+            height: 14px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 9px;
+            color: #6a737d;
+            cursor: pointer;
+            flex-shrink: 0;
+        `;
+
+        if (branch.cycle) {
+            toggle.textContent = '↻';
+            toggle.title = 'Cycle detected (element already in path)';
+            toggle.style.color = '#e36209';
+        } else {
+            toggle.textContent = branch.expanded ? '▼' : '▶';
+            toggle.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.nav.toggleExpand(branch.pathKey);
+            });
+        }
+        row.appendChild(toggle);
+
+        // Relationship badge
+        const relBadge = this.doc.createElement('span');
+        relBadge.style.cssText = `
+            padding: 1px 4px;
+            background: #f1f3f5;
+            border: 1px solid #e1e4e8;
+            border-radius: 3px;
+            font-size: 10px;
+            color: #495057;
+            flex-shrink: 0;
+        `;
+        const dirSymbol = branch.direction === 'outgoing' ? '→' : '←';
+        relBadge.textContent = `${dirSymbol} ${typeTitle(branch.relationship.kind)}`;
+        relBadge.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.onSelectItem({ kind: 'relationship', id: branch.relationship.id });
+        });
+        row.appendChild(relBadge);
+
+        // Element name and layer
+        const elSpan = this.doc.createElement('span');
+        elSpan.style.cssText = `
+            font-size: 11px;
+            color: #24292e;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+        `;
+        elSpan.textContent = branch.element.name || '(unnamed)';
+        elSpan.title = `${branch.element.name} (${typeTitle(branch.element.type)} - ${typeTitle(branch.layer)})`;
+        row.appendChild(elSpan);
+
+        // Focus jump button (⊙)
+        const focusBtn = this.doc.createElement('span');
+        focusBtn.textContent = '⊙';
+        focusBtn.title = 'Re-center navigator on this element';
+        focusBtn.style.cssText = `
+            color: #0366d6;
+            font-size: 12px;
+            opacity: 0.6;
+            padding: 0 4px;
+            cursor: pointer;
+            flex-shrink: 0;
+        `;
+        focusBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.nav.focus(branch.element.id, { force: true });
+        });
+        row.appendChild(focusBtn);
+
+        row.addEventListener('click', () => {
+            this.onSelectItem({ kind: 'element', id: branch.element.id });
+        });
+
+        row.addEventListener('mouseenter', () => {
+            row.style.background = '#f1f3f5';
+            focusBtn.style.opacity = '1';
+        });
+        row.addEventListener('mouseleave', () => {
+            row.style.background = '';
+            focusBtn.style.opacity = '0.6';
+        });
+
+        wrap.appendChild(row);
+
+        // Render recursive children if expanded
+        if (branch.expanded && branch.children) {
+            const childWrap = this.doc.createElement('div');
+            childWrap.style.cssText = 'display: flex; flex-direction: column; gap: 2px;';
+
+            const sub = branch.children;
+            const hasKids = sub.outgoing.length > 0 || sub.incoming.length > 0;
+            if (!hasKids) {
+                const noMore = this.doc.createElement('div');
+                noMore.style.cssText = `margin-left: ${(level + 1) * 14}px; font-size: 10px; color: #888; font-style: italic;`;
+                noMore.textContent = '(end of path)';
+                childWrap.appendChild(noMore);
+            } else {
+                for (const outK of sub.outgoing) {
+                    childWrap.appendChild(this._renderBranch(outK, level + 1));
+                }
+                for (const inK of sub.incoming) {
+                    childWrap.appendChild(this._renderBranch(inK, level + 1));
+                }
+            }
+            wrap.appendChild(childWrap);
+        }
+
+        return wrap;
+    }
+}
+
+/**
+ * Functional helper to build a NavigatorPanel DOM element.
+ */
+export function buildNavigatorPanel(doc, options) {
+    return new NavigatorPanel(doc, options).dom;
+}

package/src/charting/pivot/PivotChart.js

@@ -15,9 +15,10 @@ export class PivotChart {
      * @param {string} [options.type] a catalog key to prefer while it fits (else ChartChooser's best)
      * @param {ChartChooser} [options.chooser]
      */
-    constructor(view, { type = null, chooser = null } = {}) {
+    constructor(view, { type = null, chooser = null, facetBy = null } = {}) {
         this.view = view;
         this.type = type;
+        this.facetBy = facetBy;
         this.chooser = chooser ?? new ChartChooser();
     }
 
@@ -115,6 +116,12 @@ export class PivotChart {
                 out.push(add('populationPyramid', `${numbers[0].name} vs ${numbers[1].name} for each ${category.name}`,
                     rows.map(r => ({ label: String(r[category.name]), left: r[numbers[0].name], right: r[numbers[1].name] })),
                     { leftLabel: numbers[0].name, rightLabel: numbers[1].name, showValues: true }));
+                out.push(add('dumbbell', `${numbers[0].name} to ${numbers[1].name} gap for each ${category.name}`,
+                    rows.map(r => ({ label: String(r[category.name]), start: r[numbers[0].name], end: r[numbers[1].name] })),
+                    { startLabel: numbers[0].name, endLabel: numbers[1].name, showDelta: true }));
+                out.push(add('slopegraph', `${names} trajectory across ${category.name}`,
+                    rows.map(r => ({ label: String(r[category.name]), values: numbers.map(n => r[n.name]) })),
+                    { stageLabels: numbers.map(n => n.name) }));
                 const flowLinks = rows.flatMap(r => numbers
                     .filter(n => r[n.name] > 0)
                     .map(n => ({ source: String(r[category.name]), target: n.name, value: r[n.name] })));
@@ -128,6 +135,8 @@ export class PivotChart {
                 out.push(add('boxPlot', `distribution of ${category.name} values for each of ${names}`, distData));
                 out.push(add('density', `density curve of ${category.name} values for each of ${names}`, distData));
                 out.push(add('violin', `violin distribution of ${category.name} values for each of ${names}`, distData));
+                out.push(add('ridgeline', `ridgeline joy plot of ${category.name} values for each of ${names}`, distData));
+                out.push(add('beeswarm', `beeswarm raincloud plot of ${category.name} values for each of ${names}`, distData));
             }
             out.push(add('scatter', `${numbers[0].name} against ${numbers[1].name} for each ${category.name}`,
                 rows.map(r => ({ x: r[numbers[0].name], y: r[numbers[1].name], label: String(r[category.name]) }))));
@@ -144,6 +153,10 @@ export class PivotChart {
         if (allNonNeg) {
             out.push(add('bar3DOrbit', `${names} for each ${category.name}, in 3D`,
                 rows.flatMap(r => numbers.map(n => ({ x: String(r[category.name]), z: n.name, value: r[n.name] })))));
+            if (rows.length >= 2 && numbers.length >= 2) {
+                out.push(add('surface3D', `3D surface mesh of ${names} across ${category.name}`,
+                    rows.flatMap(r => numbers.map(n => ({ x: String(r[category.name]), z: n.name, value: r[n.name] })))));
+            }
         }
         if (additiveNonNeg) {
             out.push(add('stackedBar3DOrbit', `${names} stacked for each ${category.name}, in 3D`,
@@ -161,13 +174,19 @@ export class PivotChart {
         if (includeBase) {
             out.push(add('bar', `total ${number.name} for each ${category.name}`, points));
             if (nonNeg && complete && number.measure === 'additive' && points.length <= 8) {
-                out.push(add('pie', `share of total ${number.name} across ${category.name}`, points));
-                out.push(add('donut', `share of total ${number.name} across ${category.name}, as a ring`, points));
+                out.push(add('pie', `share of total ${number.name} across ${category.name}`, points, { exploded: 'max', hoverExplode: true }));
+                out.push(add('donut', `share of total ${number.name} across ${category.name}, as a ring`, points, { exploded: 'max', hoverExplode: true, showTotal: true }));
+                out.push(add('pie3D', `share of total ${number.name} across ${category.name}, in 3D`, points, { exploded: 'max', hoverExplode: true }));
+                out.push(add('donut3D', `share of total ${number.name} across ${category.name}, as a 3D ring`, points, { exploded: 'max', hoverExplode: true }));
             }
+        } else if (nonNeg && complete && number.measure === 'additive' && points.length <= 8) {
+            out.push(add('pie3D', `share of total ${number.name} across ${category.name}, in 3D`, points, { exploded: 'max', hoverExplode: true }));
+            out.push(add('donut3D', `share of total ${number.name} across ${category.name}, as a 3D ring`, points, { exploded: 'max', hoverExplode: true }));
         }
         if (hierarchy) {
             out.push(add('treemap', `${number.name} across the ${category.name} hierarchy`, hierarchy.tree));
             out.push(add('sunburst', `${number.name} across the ${category.name} hierarchy, in rings`, hierarchy.tree));
+            out.push(add('circlePack', `${number.name} across the ${category.name} hierarchy, as packed circles`, hierarchy.tree));
             out.push(add('icicle', `${number.name} across the ${category.name} hierarchy, as an icicle partition`, hierarchy.tree));
             out.push(add('outline', `${number.name} across the ${category.name} hierarchy, as an outline`, hierarchy.tree));
         }
@@ -187,6 +206,7 @@ export class PivotChart {
         if (nonNeg && points.length <= 12) {
             out.push(add('funnel', `${number.name} across ${category.name} stages`, points));
             out.push(add('radialBar', `${number.name} for each ${category.name}, around a circle`, points));
+            out.push(add('polarArea', `${number.name} for each ${category.name}, as a 3D Nightingale Rose`, points, { extrude3D: true, exploded: 'max', hoverExplode: true }));
             if (!includeBase && points.length >= 3) {
                 out.push(add('radar', `${number.name} across ${category.name} axes`, points.map(d => ({ axis: d.label, value: d.value }))));
             }
@@ -214,6 +234,77 @@ export class PivotChart {
         return this.chosen();
     }
 
+    /** Sets or clears the facet dimension for small-multiples grids. */
+    setFacetBy(dimension) {
+        this.facetBy = dimension;
+        this.redraw?.();
+        return this.facetBy;
+    }
+
+    /** Dimensions available to facet small-multiples charts by. */
+    facetChoices() {
+        const pool = [...(this.view.pageAxis?.map(p => p.dimension) ?? []), ...this.view.rowAxis, ...this.view.columnAxis];
+        return Array.from(new Set(pool));
+    }
+
+    /**
+     * Splits chart data into small-multiple facets by `facetDimension`, calculating unified global scale bounds.
+     * @param {string} [facetDimension]
+     * @returns {{ facetDimension: string, facets: Array<object>, globalMax: number, globalMin: number }|null}
+     */
+    facetData(facetDimension = this.facetBy) {
+        if (!facetDimension) return null;
+        const chartData = this.view.chartData();
+        const { rows, columns, complete } = chartData;
+        if (!rows || rows.length === 0) return null;
+
+        // Group rows by facetDimension
+        const groups = new Map();
+        rows.forEach(r => {
+            const key = r[facetDimension] ?? 'All';
+            if (!groups.has(key)) groups.set(key, []);
+            groups.get(key).push(r);
+        });
+
+        if (groups.size <= 1) return null;
+
+        const numCols = columns.filter(c => c.kind === 'numeric').map(c => c.name);
+        let globalMax = -Infinity;
+        let globalMin = Infinity;
+        rows.forEach(r => {
+            numCols.forEach(col => {
+                const val = r[col];
+                if (typeof val === 'number' && Number.isFinite(val)) {
+                    if (val > globalMax) globalMax = val;
+                    if (val < globalMin) globalMin = val;
+                }
+            });
+        });
+
+        const chosenChart = this.chosen();
+        const baseKey = chosenChart?.key ?? 'bar';
+
+        const facets = [];
+        groups.forEach((groupRows, facetValue) => {
+            const subChart = this.chooser.choose(groupRows, columns, { complete }).find(c => c.key === baseKey)
+                ?? this.chooser.choose(groupRows, columns, { complete })[0];
+            facets.push({
+                key: facetValue,
+                label: String(facetValue),
+                chartKey: subChart?.key ?? baseKey,
+                data: subChart?.data ?? groupRows,
+                options: { ...(subChart?.options || {}), maxValue: globalMax, minValue: globalMin },
+            });
+        });
+
+        return {
+            facetDimension,
+            facets,
+            globalMax: Number.isFinite(globalMax) ? globalMax : 1,
+            globalMin: Number.isFinite(globalMin) ? globalMin : 0,
+        };
+    }
+
     /** The chart's menu: "Chart as" each chart that fits (plus quick top-level items), the one showing ticked. */
     menu(redraw = () => this.redraw?.()) {
         const current = this.chosen()?.key;
@@ -225,14 +316,28 @@ export class PivotChart {
         const quickKeys = new Set([
             'groupedBar', 'stackedBar', 'bar', 'line', 'area', 'stackedArea',
             'pareto', 'waterfall', 'marimekko', 'lollipop', 'heatmap', 'radar',
-            'treemap', 'sunburst', 'icicle', 'sankey', 'pie', 'donut',
+            'treemap', 'sunburst', 'icicle', 'sankey', 'pie', 'donut', 'pie3D', 'donut3D', 'polarArea', 'surface3D',
         ]);
         const quickItems = all.filter(c => quickKeys.has(c.key)).map(toItem);
+
+        const facetDims = this.facetChoices();
+        const facetItems = [
+            { label: `(None)${!this.facetBy ? ' ✓' : ''}`, action: () => { this.setFacetBy(null); redraw(); } },
+            ...facetDims.map(d => ({
+                label: `${d}${this.facetBy === d ? ' ✓' : ''}`,
+                action: () => { this.setFacetBy(d); redraw(); },
+            })),
+        ];
+
         return [
             {
                 label: 'Chart as',
                 items: all.map(toItem),
             },
+            ...(facetDims.length > 0 ? [{
+                label: 'Facet by (Small Multiples)',
+                items: facetItems,
+            }] : []),
             ...(quickItems.length > 0 ? [{ separator: true }, ...quickItems] : []),
         ];
     }