@mwater/visualization 5.2.0 → 5.3.0

package/lib/widgets/charts/pivot/IntersectionDesignerComponent.d.ts

@@ -1,122 +1,15 @@
 import React from "react";
-import * as ui from "@mwater/react-library/lib/bootstrap";
-import { DataSource, Expr, Schema } from "@mwater/expressions";
-import { PivotChartIntersection } from "./PivotChartDesign";
+import { DataSource, Schema } from "@mwater/expressions";
+import { PivotChartDesign, PivotChartIntersection } from "./PivotChartDesign";
 import { JsonQLFilter } from "../../../JsonQLFilter";
 export interface IntersectionDesignerComponentProps {
+    design: PivotChartDesign;
     intersection: PivotChartIntersection;
+    intersectionId: string;
     table: string;
     schema: Schema;
     dataSource: DataSource;
     onChange: (intersection: PivotChartIntersection) => void;
     filters?: JsonQLFilter[];
 }
-export default class IntersectionDesignerComponent extends React.Component<IntersectionDesignerComponentProps> {
-    constructor(props: IntersectionDesignerComponentProps);
-    update(...args: any[]): any;
-    handleBackgroundColorAxisChange: (backgroundColorAxis: any) => any;
-    handleBackgroundColorChange: (backgroundColor: any) => any;
-    handleBackgroundColorConditionsChange: (backgroundColorConditions: any) => any;
-    handleBackgroundColorOpacityChange: (newValue: any) => any;
-    handleFilterChange: (filter: any) => any;
-    renderValueAxis(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup>;
-    renderNullValue(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup> | null;
-    renderFilter(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup>;
-    renderStyling(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup>;
-    renderBackgroundColorConditions(): React.CElement<BackgroundColorConditionsComponentProps, BackgroundColorConditionsComponent>;
-    renderBackgroundColorAxis(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup>;
-    renderBackgroundColor(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup> | undefined;
-    renderBackgroundColorOpacityControl(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup> | undefined;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-}
-interface BackgroundColorConditionsComponentProps {
-    colorConditions?: {
-        condition?: Expr;
-        color?: string;
-    }[];
-    table: string;
-    schema: Schema;
-    dataSource: DataSource;
-    onChange: (colorConditions?: {
-        condition?: Expr;
-        color?: string;
-    }[]) => void;
-}
-/** Displays background color conditions */
-declare class BackgroundColorConditionsComponent extends React.Component<BackgroundColorConditionsComponentProps> {
-    handleAdd: () => void;
-    render(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean | undefined;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean | undefined;
-        hasSuccess?: boolean | undefined;
-        hasWarnings?: boolean | undefined;
-        hasErrors?: boolean | undefined;
-    }, ui.FormGroup>;
-}
-export {};
+export default function IntersectionDesignerComponent(props: IntersectionDesignerComponentProps): React.JSX.Element;

package/lib/widgets/charts/pivot/IntersectionDesignerComponent.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const update_1 = __importDefault(require("@mwater/react-library/lib/update"));
 const rc_slider_1 = __importDefault(require("rc-slider"));
@@ -36,144 +35,120 @@ const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_ui_2 = require("@mwater/expressions-ui");
 const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorComponent");
+const PivotChartUtils_1 = require("./PivotChartUtils");
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+const immer_1 = __importDefault(require("immer"));
 // Design an intersection of a pivot table
-class IntersectionDesignerComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.update = this.update.bind(this);
-    }
-    // Updates intersection with the specified changes
-    update(...args) {
-        return (0, update_1.default)(this.props.intersection, this.props.onChange, arguments);
-    }
-    handleBackgroundColorAxisChange = (backgroundColorAxis) => {
-        const opacity = this.props.intersection.backgroundColorOpacity || 1;
-        return this.update({ backgroundColorAxis, backgroundColorOpacity: opacity });
-    };
-    handleBackgroundColorChange = (backgroundColor) => {
-        const opacity = this.props.intersection.backgroundColorOpacity || 1;
-        return this.update({ backgroundColor, backgroundColorOpacity: opacity });
-    };
-    handleBackgroundColorConditionsChange = (backgroundColorConditions) => {
-        const opacity = this.props.intersection.backgroundColorOpacity || 1;
-        return this.update({ backgroundColorConditions, backgroundColorOpacity: opacity });
-    };
-    handleBackgroundColorOpacityChange = (newValue) => {
-        return this.update({ backgroundColorOpacity: newValue / 100 });
-    };
-    handleFilterChange = (filter) => {
-        return this.update({ filter });
-    };
-    renderValueAxis() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: "Calculation",
-            help: "This is the calculated value that is displayed. Leave as blank to make an empty section"
-        }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            types: ["enum", "text", "boolean", "date", "number"],
-            aggrNeed: "required",
-            value: this.props.intersection.valueAxis,
-            onChange: this.update("valueAxis"),
-            showFormat: true,
-            filters: this.props.filters
-        }));
-    }
-    renderNullValue() {
-        if (this.props.intersection.valueAxis) {
-            return R(ui.FormGroup, {
-                labelMuted: true,
-                label: "Show Empty Cells as"
-            }, R(ui.TextInput, {
-                value: this.props.intersection.valueAxis.nullLabel ?? null,
-                emptyNull: true,
-                onChange: this.update("valueAxis.nullLabel"),
-                placeholder: "Blank"
-            }));
+function IntersectionDesignerComponent(props) {
+    // Determine table to use (use overrideTable if set, otherwise use table from props)
+    const table = props.intersection.tableOverride || props.table;
+    const handleBackgroundColorAxisChange = (backgroundColorAxis) => {
+        const opacity = props.intersection.backgroundColorOpacity || 1;
+        props.onChange({ ...props.intersection, backgroundColorAxis, backgroundColorOpacity: opacity });
+    };
+    const handleBackgroundColorChange = (backgroundColor) => {
+        const opacity = props.intersection.backgroundColorOpacity || 1;
+        props.onChange({ ...props.intersection, backgroundColor, backgroundColorOpacity: opacity });
+    };
+    const handleBackgroundColorConditionsChange = (backgroundColorConditions) => {
+        const opacity = props.intersection.backgroundColorOpacity || 1;
+        props.onChange({ ...props.intersection, backgroundColorConditions, backgroundColorOpacity: opacity });
+    };
+    const handleBackgroundColorOpacityChange = (newValue) => {
+        props.onChange({ ...props.intersection, backgroundColorOpacity: newValue / 100 });
+    };
+    const handleFilterChange = (filter) => {
+        props.onChange({ ...props.intersection, filter });
+    };
+    const handleTableOverrideChange = (tableOverride) => {
+        props.onChange({ ...props.intersection, tableOverride });
+    };
+    const renderValueAxis = () => {
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Calculation", help: "This is the calculated value that is displayed. Leave as blank to make an empty section" },
+            react_1.default.createElement(AxisComponent_1.default, { schema: props.schema, dataSource: props.dataSource, table: table, types: ["enum", "text", "boolean", "date", "number"], aggrNeed: "required", value: props.intersection.valueAxis, onChange: valueAxis => props.onChange({ ...props.intersection, valueAxis }), showFormat: true, filters: props.filters })));
+    };
+    const renderNullValue = () => {
+        if (props.intersection.valueAxis) {
+            return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Show Empty Cells as" },
+                react_1.default.createElement(ui.TextInput, { value: props.intersection.valueAxis.nullLabel ?? null, emptyNull: true, onChange: nullLabel => props.onChange({ ...props.intersection, valueAxis: { ...props.intersection.valueAxis, nullLabel: nullLabel ?? undefined } }), placeholder: "Blank" })));
         }
         return null;
-    }
-    renderFilter() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"]
-        }, R(expressions_ui_1.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.table,
-            value: this.props.intersection.filter
-        }));
-    }
-    renderStyling() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            key: "styling",
-            label: "Styling"
-        }, R(ui.Checkbox, { key: "bold", inline: true, value: this.props.intersection.bold, onChange: this.update("bold") }, "Bold"), R(ui.Checkbox, { key: "italic", inline: true, value: this.props.intersection.italic, onChange: this.update("italic") }, "Italic"));
-    }
-    renderBackgroundColorConditions() {
-        return R(BackgroundColorConditionsComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            colorConditions: this.props.intersection.backgroundColorConditions,
-            onChange: this.handleBackgroundColorConditionsChange
-        });
-    }
-    renderBackgroundColorAxis() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: "Background Color From Values",
-            help: "This is an optional background color to set on cells that is controlled by the data"
-        }, R(AxisComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            types: ["enum", "text", "boolean", "date"],
-            aggrNeed: "required",
-            value: this.props.intersection.backgroundColorAxis,
-            onChange: this.handleBackgroundColorAxisChange,
-            showColorMap: true,
-            filters: this.props.filters
-        }));
-    }
-    renderBackgroundColor() {
-        if (this.props.intersection.backgroundColorAxis) {
+    };
+    const renderFilter = () => {
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui.Icon, { id: "glyphicon-filter" }),
+                " Filters") },
+            react_1.default.createElement(expressions_ui_1.FilterExprComponent, { schema: props.schema, dataSource: props.dataSource, onChange: handleFilterChange, table: table, value: props.intersection.filter })));
+    };
+    const renderStyling = () => {
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, key: "styling", label: "Styling" },
+            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: props.intersection.bold, onChange: bold => props.onChange({ ...props.intersection, bold }) }, "Bold"),
+            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: props.intersection.italic, onChange: italic => props.onChange({ ...props.intersection, italic }) }, "Italic")));
+    };
+    const renderBackgroundColorConditions = () => {
+        return (react_1.default.createElement(BackgroundColorConditionsComponent, { schema: props.schema, dataSource: props.dataSource, table: table, colorConditions: props.intersection.backgroundColorConditions, onChange: handleBackgroundColorConditionsChange }));
+    };
+    const renderBackgroundColorAxis = () => {
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Background Color From Values", help: "This is an optional background color to set on cells that is controlled by the data" },
+            react_1.default.createElement(AxisComponent_1.default, { schema: props.schema, dataSource: props.dataSource, table: table, types: ["enum", "text", "boolean", "date"], aggrNeed: "required", value: props.intersection.backgroundColorAxis, onChange: handleBackgroundColorAxisChange, showColorMap: true, filters: props.filters })));
+    };
+    const renderBackgroundColor = () => {
+        if (props.intersection.backgroundColorAxis) {
             return;
         }
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: "Background Color",
-            help: "This is an optional background color to set on all cells"
-        }, R(ColorComponent_1.default, {
-            color: this.props.intersection.backgroundColor,
-            onChange: this.handleBackgroundColorChange
-        }));
-    }
-    renderBackgroundColorOpacityControl() {
-        if (!this.props.intersection.backgroundColorAxis &&
-            !this.props.intersection.backgroundColor &&
-            !this.props.intersection.backgroundColorConditions?.[0]) {
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Background Color", help: "This is an optional background color to set on all cells" },
+            react_1.default.createElement(ColorComponent_1.default, { color: props.intersection.backgroundColor, onChange: handleBackgroundColorChange })));
+    };
+    const renderBackgroundColorOpacityControl = () => {
+        if (!props.intersection.backgroundColorAxis &&
+            !props.intersection.backgroundColor &&
+            !props.intersection.backgroundColorConditions?.[0]) {
             return;
         }
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: `Background Opacity: ${Math.round((this.props.intersection.backgroundColorOpacity ?? 1) * 100)}%`
-        }, R(rc_slider_1.default, {
-            min: 0,
-            max: 100,
-            step: 1,
-            tipTransitionName: "rc-slider-tooltip-zoom-down",
-            value: (this.props.intersection.backgroundColorOpacity ?? 1) * 100,
-            onChange: this.handleBackgroundColorOpacityChange
-        }));
-    }
-    render() {
-        return R("div", null, this.renderValueAxis(), this.renderNullValue(), this.renderFilter(), this.renderStyling(), this.renderBackgroundColorAxis(), this.renderBackgroundColorConditions(), this.renderBackgroundColor(), this.renderBackgroundColorOpacityControl());
-    }
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: `Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%` },
+            react_1.default.createElement(rc_slider_1.default, { min: 0, max: 100, step: 1, tipTransitionName: "rc-slider-tooltip-zoom-down", value: (props.intersection.backgroundColorOpacity ?? 1) * 100, onChange: handleBackgroundColorOpacityChange })));
+    };
+    const renderSegmentValueAxisOverride = (segment) => {
+        // Get type of segment axis
+        const axisBuilder = new AxisBuilder_1.default({ schema: props.schema });
+        const segmentValueAxisType = axisBuilder.getAxisType(segment.valueAxis);
+        if (!segmentValueAxisType) {
+            return null;
+        }
+        const overrideValueAxis = (props.intersection.segmentValueAxisOverrides || {})[segment.id];
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: (segment.label || axisBuilder.summarizeAxis(segment.valueAxis)) + ":" },
+            react_1.default.createElement(AxisComponent_1.default, { schema: props.schema, dataSource: props.dataSource, table: table, types: [segmentValueAxisType], aggrNeed: "none", value: overrideValueAxis, onChange: valueAxis => props.onChange((0, immer_1.default)(props.intersection, (draft) => {
+                    draft.segmentValueAxisOverrides = draft.segmentValueAxisOverrides || {};
+                    draft.segmentValueAxisOverrides[segment.id] = valueAxis;
+                })), allowExcludedValues: false, collapseCategories: true })));
+    };
+    const renderSegmentValueAxisOverrides = () => {
+        if (!props.intersection.tableOverride) {
+            return null;
+        }
+        // Get all segments
+        const segments = (0, PivotChartUtils_1.getAllSegments)(props.design.rows).concat((0, PivotChartUtils_1.getAllSegments)(props.design.columns));
+        // Filter out segments that are not intersecting
+        const intersectingSegmentIds = props.intersectionId.split(/[,:]/).filter(id => id !== "");
+        const intersectingSegments = segments.filter(segment => intersectingSegmentIds.includes(segment.id) && segment.valueAxis);
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Fields to disaggregate data by (required)" }, intersectingSegments.map(segment => renderSegmentValueAxisOverride(segment))));
+    };
+    const renderOverrideTable = () => {
+        return (react_1.default.createElement(ui.CollapsibleSection, { label: "Advanced: Override Data Source", hint: "Use a different data source for this cell", labelMuted: true, initiallyOpen: props.intersection.tableOverride != null },
+            react_1.default.createElement(expressions_ui_1.TableSelectComponent, { schema: props.schema, value: props.intersection.tableOverride, onChange: handleTableOverrideChange }),
+            react_1.default.createElement("br", null),
+            renderSegmentValueAxisOverrides()));
+    };
+    return (react_1.default.createElement("div", null,
+        renderValueAxis(),
+        renderNullValue(),
+        renderFilter(),
+        renderStyling(),
+        renderBackgroundColorAxis(),
+        renderBackgroundColorConditions(),
+        renderBackgroundColor(),
+        renderBackgroundColorOpacityControl(),
+        renderOverrideTable()));
 }
 exports.default = IntersectionDesignerComponent;
 /** Displays background color conditions */
@@ -185,23 +160,18 @@ class BackgroundColorConditionsComponent extends react_1.default.Component {
     };
     render() {
         // List conditions
-        return R(ui.FormGroup, {
-            label: "Color Conditions",
-            labelMuted: true,
-            help: "Add conditions that, if met, set the color of the cell. Useful for flagging certain values"
-        }, react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.colorConditions || [], renderItem: (item, index, onItemChange) => {
-                return R(BackgroundColorConditionComponent, {
-                    key: index,
-                    colorCondition: item,
-                    table: this.props.table,
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    onChange: onItemChange
-                });
-            }, onItemsChange: this.props.onChange }), R(ui.Button, { type: "link", size: "sm", onClick: this.handleAdd }, R(ui.Icon, { id: "fa-plus" }), " Add Condition"));
+        return (react_1.default.createElement(ui.FormGroup, { label: "Color Conditions", labelMuted: true, help: "Add conditions that, if met, set the color of the cell. Useful for flagging certain values" },
+            react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.colorConditions || [], renderItem: (item, index, onItemChange) => {
+                    return (react_1.default.createElement(BackgroundColorConditionComponent, { key: index, colorCondition: item, table: this.props.table, schema: this.props.schema, dataSource: this.props.dataSource, onChange: onItemChange }));
+                }, onItemsChange: this.props.onChange }),
+            react_1.default.createElement(ui.Button, { type: "link", size: "sm", onClick: this.handleAdd },
+                react_1.default.createElement(ui.Icon, { id: "fa-plus" }),
+                "Add Condition")));
     }
 }
-// Displays single background color condition
+/**
+ * Displays single background color condition
+ */
 class BackgroundColorConditionComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -212,24 +182,10 @@ class BackgroundColorConditionComponent extends react_1.default.Component {
         return (0, update_1.default)(this.props.colorCondition, this.props.onChange, arguments);
     }
     render() {
-        return R("div", {}, R(ui.FormGroup, {
-            labelMuted: true,
-            label: "Condition"
-        }, R(expressions_ui_2.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.update("condition"),
-            types: ["boolean"],
-            aggrStatuses: ["aggregate", "literal"],
-            table: this.props.table,
-            value: this.props.colorCondition.condition
-        })), R(ui.FormGroup, {
-            labelMuted: true,
-            label: "Color",
-            hint: "Color to display when condition is met"
-        }, R(ColorComponent_1.default, {
-            color: this.props.colorCondition.color,
-            onChange: this.update("color")
-        })));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Condition" },
+                react_1.default.createElement(expressions_ui_2.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.update("condition"), types: ["boolean"], aggrStatuses: ["aggregate", "literal"], table: this.props.table, value: this.props.colorCondition.condition })),
+            react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Color", hint: "Color to display when condition is met" },
+                react_1.default.createElement(ColorComponent_1.default, { color: this.props.colorCondition.color, onChange: this.update("color") }))));
     }
 }

package/lib/widgets/charts/pivot/PivotChart.d.ts

@@ -28,6 +28,12 @@ export default class PivotChart extends Chart {
      * @param callback - Callback function to handle the result or error.
      */
     getData(design: PivotChartDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): Promise<void>;
+    /**
+     * Create a view element for the chart
+     *
+     * @param options - Options for the view element
+     * @returns - React element
+     */
     createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): never[];
     createDataTable(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): (string | undefined)[][];

package/lib/widgets/charts/pivot/PivotChart.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const immer_1 = __importDefault(require("immer"));
 const immer_2 = require("immer");
@@ -56,8 +55,10 @@ class PivotChart extends Chart_1.default {
             draft.rows = design.rows || [];
             draft.columns = design.columns || [];
             draft.intersections = design.intersections || {};
-            draft.header = design.header || { style: "footer", items: [] };
+            draft.header = design.header || { style: "header", items: [] };
             draft.footer = design.footer || { style: "footer", items: [] };
+            // Fix style of header
+            draft.header.style = "header";
             if (design.table) {
                 // Add default row and column
                 let intersectionId, segment;
@@ -105,10 +106,11 @@ class PivotChart extends Chart_1.default {
                 // Clean all intersections
                 for (intersectionId in draft.intersections) {
                     const intersection = draft.intersections[intersectionId];
+                    const intersectionTable = intersection.tableOverride || design.table;
                     if (intersection.valueAxis) {
                         intersection.valueAxis = axisBuilder.cleanAxis({
                             axis: intersection.valueAxis ? (0, immer_2.original)(intersection.valueAxis) : null,
-                            table: design.table,
+                            table: intersectionTable,
                             aggrNeed: "required",
                             types: ["enum", "text", "boolean", "date", "number"]
                         });
@@ -116,7 +118,7 @@ class PivotChart extends Chart_1.default {
                     if (intersection.backgroundColorAxis) {
                         intersection.backgroundColorAxis = axisBuilder.cleanAxis({
                             axis: intersection.backgroundColorAxis ? (0, immer_2.original)(intersection.backgroundColorAxis) : null,
-                            table: design.table,
+                            table: intersectionTable,
                             aggrNeed: "required",
                             types: ["enum", "text", "boolean", "date"]
                         });
@@ -126,17 +128,45 @@ class PivotChart extends Chart_1.default {
                     }
                     for (const colorCondition of intersection.backgroundColorConditions || []) {
                         colorCondition.condition = exprCleaner.cleanExpr(colorCondition.condition ? (0, immer_2.original)(colorCondition.condition) : null, {
-                            table: design.table,
+                            table: intersectionTable,
                             types: ["boolean"],
                             aggrStatuses: ["aggregate", "literal"]
                         });
                     }
                     if (intersection.filter) {
                         intersection.filter = exprCleaner.cleanExpr(intersection.filter ? (0, immer_2.original)(intersection.filter) : null, {
-                            table: design.table,
+                            table: intersectionTable,
                             types: ["boolean"]
                         });
                     }
+                    if (intersection.tableOverride) {
+                        const allSegments = PivotChartUtils.getAllSegments(design.rows).concat(PivotChartUtils.getAllSegments(design.columns));
+                        // Clean segment value axis overrides
+                        intersection.segmentValueAxisOverrides = intersection.segmentValueAxisOverrides || {};
+                        for (const segmentId of Object.keys(intersection.segmentValueAxisOverrides)) {
+                            // Find segment
+                            const segment = allSegments.find((s) => s.id === segmentId);
+                            if (!segment || !segment.valueAxis) {
+                                delete intersection.segmentValueAxisOverrides[segmentId];
+                                continue;
+                            }
+                            // Get type of the segment
+                            const segmentValueAxisType = axisBuilder.getAxisType(segment.valueAxis);
+                            intersection.segmentValueAxisOverrides[segmentId] = axisBuilder.cleanAxis({
+                                axis: intersection.segmentValueAxisOverrides[segmentId] ? (0, immer_2.original)(intersection.segmentValueAxisOverrides[segmentId]) : null,
+                                table: intersectionTable,
+                                aggrNeed: "none",
+                                types: [segmentValueAxisType]
+                            });
+                        }
+                        // Determine all required segment overrides
+                        const intersectingSegmentIds = intersectionId.split(/[,:]/).filter(id => id !== "");
+                        const intersectingSegments = allSegments.filter(segment => intersectingSegmentIds.includes(segment.id) && segment.valueAxis);
+                        intersection.segmentValueAxisOverridesComplete = intersectingSegments.every(segment => intersection.segmentValueAxisOverrides[segment.id]);
+                    }
+                    else {
+                        delete intersection.segmentValueAxisOverridesComplete;
+                    }
                 }
                 // Get all intersection ids
                 const allIntersectionIds = [];
@@ -195,6 +225,11 @@ class PivotChart extends Chart_1.default {
             if (intersection.valueAxis) {
                 error = error || axisBuilder.validateAxis({ axis: intersection.valueAxis });
             }
+            if (intersection.segmentValueAxisOverrides) {
+                for (const segmentId of Object.keys(intersection.segmentValueAxisOverrides)) {
+                    error = error || axisBuilder.validateAxis({ axis: intersection.segmentValueAxisOverrides[segmentId] });
+                }
+            }
         }
         return error;
     }
@@ -290,17 +325,12 @@ class PivotChart extends Chart_1.default {
             callback(error);
         }
     }
-    // Create a view element for the chart
-    // Options include:
-    //   schema: schema to use
-    //   dataSource: dataSource to use
-    //   design: design of the chart
-    //   onDesignChange: when design changes
-    //   data: results from queries
-    //   width, height: size of the chart view
-    //   scope: current scope of the view element
-    //   onScopeChange: called when scope changes with new scope
-    //   filters: array of filters
+    /**
+     * Create a view element for the chart
+     *
+     * @param options - Options for the view element
+     * @returns - React element
+     */
     createViewElement(options) {
         const PivotChartViewComponent = require("./PivotChartViewComponent").default;
         // Create chart

package/lib/widgets/charts/pivot/PivotChartDesign.d.ts

@@ -85,4 +85,15 @@ export interface PivotChartIntersection {
     bold?: boolean;
     /** true if italic */
     italic?: boolean;
+    /** Overrides table */
+    tableOverride?: string;
+    /** If table is overridden, each related segment needs to have its valueAxis overridden */
+    segmentValueAxisOverrides?: {
+        [id: string]: Axis | null;
+    };
+    /** Set true when overrides are all present. If false and tableOverride is not null, then intersection cannot be rendered.
+     * This is set by cleanDesign. If some are missing, the design is still valid, but the intersection will not be queried
+     * and the intersection will be shaded red in design mode.
+     */
+    segmentValueAxisOverridesComplete?: boolean;
 }

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.d.ts

@@ -14,7 +14,7 @@ interface PivotChartDesignerComponentState {
 export default class PivotChartDesignerComponent extends React.Component<PivotChartDesignerComponentProps, PivotChartDesignerComponentState> {
     constructor(props: any);
     updateDesign(changes: any): any;
-    handleTableChange: (table: any) => any;
+    handleTableChange: (table: any) => void;
     handleColumnChange: (axis: any) => any;
     handleRowChange: (axis: any) => any;
     handleFilterChange: (filter: any) => any;

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.js

@@ -53,7 +53,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         const column = { id: (0, uuid_1.default)(), label: "" };
         const intersections = {};
         intersections[`${row.id}:${column.id}`] = { valueAxis: { expr: { type: "op", op: "count", table, exprs: [] } } };
-        return this.updateDesign({
+        this.updateDesign({
             table,
             rows: [row],
             columns: [column],

package/lib/widgets/charts/pivot/PivotChartLayoutBuilder.d.ts

@@ -25,8 +25,8 @@ export default class PivotChartLayoutBuilder {
         type: string;
         text: null;
     };
-    setupSummarize(design: any, layout: any): (boolean | undefined)[][];
-    setupBorders(layout: any): any[][];
+    setupSummarize(design: any, layout: any): void;
+    setupBorders(layout: any): void;
     getRowsOrColumns(isRow: boolean, segment: PivotChartSegment, data: {
         [intersectionId: string]: any[];
     }, locale: string, parentSegments?: PivotChartSegment[], parentValues?: any[]): {