@mwater/visualization 5.0.0

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

@@ -0,0 +1,205 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const TextComponent_1 = __importDefault(require("../../text/TextComponent"));
+const PivotChartUtils = __importStar(require("./PivotChartUtils"));
+const PivotChartLayoutComponent_1 = __importDefault(require("./PivotChartLayoutComponent"));
+const PivotChartLayoutBuilder_1 = __importDefault(require("./PivotChartLayoutBuilder"));
+const SegmentDesignerComponent_1 = __importDefault(require("./SegmentDesignerComponent"));
+const IntersectionDesignerComponent_1 = __importDefault(require("./IntersectionDesignerComponent"));
+// Displays a pivot chart
+class PivotChartViewComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    constructor(props) {
+        super(props);
+        this.state = {
+            editSegment: null,
+            editIntersectionId: null,
+            editIntersection: null // value of intersection being edited
+        };
+    }
+    handleHeaderChange = (header) => {
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { header }));
+    };
+    handleFooterChange = (footer) => {
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { footer }));
+    };
+    handleEditSection = (sectionId) => {
+        // If intersection
+        if (sectionId.match(":")) {
+            return this.setState({
+                editIntersectionId: sectionId,
+                editIntersection: this.props.design.intersections[sectionId] || {}
+            });
+        }
+        else {
+            // Find segment
+            const segment = PivotChartUtils.findSegment(this.props.design.rows, sectionId) ||
+                PivotChartUtils.findSegment(this.props.design.columns, sectionId);
+            return this.setState({ editSegment: segment });
+        }
+    };
+    handleSaveEditSegment = () => {
+        // Always has label when saved
+        let segment = this.state.editSegment;
+        if (segment.label == null) {
+            segment = lodash_1.default.extend({}, segment, { label: "" });
+        }
+        const design = { ...this.props.design,
+            rows: PivotChartUtils.replaceSegment(this.props.design.rows, segment),
+            columns: PivotChartUtils.replaceSegment(this.props.design.columns, segment)
+        };
+        this.props.onDesignChange(design);
+        return this.setState({ editSegment: null });
+    };
+    handleCancelEditSegment = () => {
+        return this.setState({ editSegment: null });
+    };
+    handleSaveEditIntersection = () => {
+        const intersections = lodash_1.default.clone(this.props.design.intersections);
+        intersections[this.state.editIntersectionId] = this.state.editIntersection;
+        const design = { ...this.props.design, intersections };
+        this.props.onDesignChange(design);
+        return this.setState({ editIntersectionId: null, editIntersection: null });
+    };
+    handleCancelEditIntersection = () => {
+        return this.setState({ editIntersectionId: null, editIntersection: null });
+    };
+    handleRemoveSegment = (segmentId) => {
+        const design = { ...this.props.design,
+            rows: PivotChartUtils.removeSegment(this.props.design.rows, segmentId),
+            columns: PivotChartUtils.removeSegment(this.props.design.columns, segmentId)
+        };
+        return this.props.onDesignChange(design);
+    };
+    handleInsertBeforeSegment = (segmentId) => {
+        const design = { ...this.props.design,
+            rows: PivotChartUtils.insertBeforeSegment(this.props.design.rows, segmentId),
+            columns: PivotChartUtils.insertBeforeSegment(this.props.design.columns, segmentId)
+        };
+        return this.props.onDesignChange(design);
+    };
+    handleInsertAfterSegment = (segmentId) => {
+        const design = { ...this.props.design,
+            rows: PivotChartUtils.insertAfterSegment(this.props.design.rows, segmentId),
+            columns: PivotChartUtils.insertAfterSegment(this.props.design.columns, segmentId)
+        };
+        return this.props.onDesignChange(design);
+    };
+    handleAddChildSegment = (segmentId) => {
+        const design = { ...this.props.design,
+            rows: PivotChartUtils.addChildSegment(this.props.design.rows, segmentId),
+            columns: PivotChartUtils.addChildSegment(this.props.design.columns, segmentId)
+        };
+        return this.props.onDesignChange(design);
+    };
+    handleSummarizeSegment = (segmentId) => {
+        const design = PivotChartUtils.summarizeSegment(this.props.design, segmentId, "Summary");
+        return this.props.onDesignChange(design);
+    };
+    renderHeader() {
+        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
+            design: this.props.design.header,
+            onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            exprValues: this.props.data.header || {},
+            width: this.props.width
+        }));
+    }
+    renderFooter() {
+        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
+            design: this.props.design.footer,
+            onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            exprValues: this.props.data.footer || {},
+            width: this.props.width
+        }));
+    }
+    renderEditSegmentModal() {
+        if (!this.state.editSegment) {
+            return;
+        }
+        const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
+            ? "row"
+            : "column";
+        return R(ActionCancelModalComponent_1.default, {
+            title: `Edit ${segmentType}`,
+            onAction: this.handleSaveEditSegment,
+            onCancel: this.handleCancelEditSegment,
+            size: "large"
+        }, R(SegmentDesignerComponent_1.default, {
+            segment: this.state.editSegment,
+            table: this.props.design.table,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            segmentType,
+            onChange: (segment) => this.setState({ editSegment: segment }),
+            filters: this.props.filters
+        }));
+    }
+    renderEditIntersectionModal() {
+        if (!this.state.editIntersectionId) {
+            return;
+        }
+        return R(ActionCancelModalComponent_1.default, {
+            title: "Edit Value",
+            onAction: this.handleSaveEditIntersection,
+            onCancel: this.handleCancelEditIntersection,
+            size: "large"
+        }, R(IntersectionDesignerComponent_1.default, {
+            intersection: this.state.editIntersection,
+            table: this.props.design.table,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: (intersection) => this.setState({ editIntersection: intersection }),
+            filters: this.props.filters
+        }));
+    }
+    render() {
+        const layout = new PivotChartLayoutBuilder_1.default({ schema: this.props.schema }).buildLayout(this.props.design, this.props.data, this.context.locale);
+        return R("div", { style: { width: this.props.width, height: this.props.height } }, this.renderHeader(), this.renderEditSegmentModal(), this.renderEditIntersectionModal(), R("div", { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } }, // Allow table to scroll since tables have hard minimum widths, Leave room for gear menu
+        R(PivotChartLayoutComponent_1.default, {
+            layout,
+            editable: this.props.onDesignChange != null,
+            onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined,
+            onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined,
+            onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined,
+            onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined,
+            onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined,
+            onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined
+        })), this.renderFooter());
+    }
+}
+exports.default = PivotChartViewComponent;

package/lib/widgets/charts/pivot/README.md

@@ -0,0 +1,30 @@
+# Pivot Chart
+
+The pivot chart (pivot table) allows building of a complex pivot table with nested rows and columns.
+
+## Terminology
+
+### Segment
+
+Segments are the building block of pivot tables. Each is either on the row or column axis. They represent one expression (enum/text) that
+is analyzed.
+
+Segments can be nested to allow sub-division and are ordered.
+
+### Intersection
+
+These compose the data area of the table. There is an intersection for each possible combination that makes sense of segments that form
+a rectangle. An intersection is id-ed by "rowid:columnid" or "rowid,rowid:columnid,columnid" etc. depending on its component ids.
+
+### Section
+
+Either a segment or intersection or blank area. Always a rectangle. Id is like intersection id if intersection, id of segment if segment
+
+## Rendering
+
+Rendering a pivot chart is first done by getting the data for each intersection (see PivotChartQueryBuilder).
+
+The data results from the queries is a lookup of intersection id to array of rows ([{ value: , r0: , c0: ,... }, ...])
+
+The data and design together are passed to the PivotChartLayoutBuilder which converts it into a layout which is
+the list of rows and cells.

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { PivotChartSegment } from "./PivotChartDesign";
+export interface SegmentDesignerComponentProps {
+    segment: PivotChartSegment;
+    table: string;
+    schema: Schema;
+    dataSource: DataSource;
+    /** "row" or "column" */
+    segmentType: "row" | "column";
+    onChange: any;
+    filters?: any;
+}
+interface SegmentDesignerComponentState {
+    mode: any;
+}
+export default class SegmentDesignerComponent extends React.Component<SegmentDesignerComponentProps, SegmentDesignerComponentState> {
+    labelElem: HTMLInputElement | null;
+    constructor(props: any);
+    componentDidMount(): void | undefined;
+    update(changes: any): any;
+    handleMode: (mode: any) => void;
+    handleValueAxisChange: (valueAxis: any) => any;
+    handleValueAxisOnlyValuesPresentChange: (valueAxisOnlyValuesPresent: boolean) => any;
+    handleLabelChange: (ev: any) => any;
+    handleFilterChange: (filter: any) => any;
+    handleOrderExprChange: (orderExpr: any) => any;
+    handleOrderDirChange: (orderDir: any) => any;
+    renderMode(): React.CElement<{
+        labelMuted: boolean;
+        label: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: string;
+    }, any, any>>;
+    renderLabel(): React.CElement<{
+        labelMuted: boolean;
+        label: string;
+        help: string | undefined;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: string;
+        help: string | undefined;
+    }, any, any>>;
+    renderValueAxis(): React.JSX.Element;
+    renderFilter(): React.CElement<{
+        labelMuted: boolean;
+        label: (string | React.CElement<{
+            id: string;
+        }, React.Component<{
+            id: string;
+        }, any, any>>)[];
+        hint: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: (string | React.CElement<{
+            id: string;
+        }, React.Component<{
+            id: string;
+        }, any, any>>)[];
+        hint: string;
+    }, any, any>>;
+    renderStyling(): React.CElement<{
+        labelMuted: boolean;
+        label: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: string;
+    }, any, any>>;
+    renderBorders(): React.CElement<{
+        labelMuted: boolean;
+        label: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: string;
+    }, any, any>>;
+    renderOrderExpr(): React.CElement<{
+        labelMuted: boolean;
+        label: (string | React.CElement<{
+            id: string;
+        }, React.Component<{
+            id: string;
+        }, any, any>>)[];
+        hint: string;
+    }, React.Component<{
+        labelMuted: boolean;
+        label: (string | React.CElement<{
+            id: string;
+        }, React.Component<{
+            id: string;
+        }, any, any>>)[];
+        hint: string;
+    }, any, any>>;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

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

@@ -0,0 +1,216 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_ui_2 = require("@mwater/expressions-ui");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const __1 = require("../../..");
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+// Design a single segment of a pivot table
+class SegmentDesignerComponent extends react_1.default.Component {
+    labelElem;
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Mode switcher to make UI clearer
+            mode: props.segment.label == null && !props.segment.valueAxis ? null : props.segment.valueAxis ? "multiple" : "single"
+        };
+    }
+    componentDidMount() {
+        return this.labelElem?.focus();
+    }
+    // Updates segment with the specified changes
+    update(changes) {
+        const segment = lodash_1.default.extend({}, this.props.segment, changes);
+        return this.props.onChange(segment);
+    }
+    handleMode = (mode) => {
+        this.update({ valueAxis: null });
+        return this.setState({ mode });
+    };
+    handleValueAxisChange = (valueAxis) => {
+        return this.update({ valueAxis });
+    };
+    handleValueAxisOnlyValuesPresentChange = (valueAxisOnlyValuesPresent) => {
+        return this.update({ valueAxisOnlyValuesPresent });
+    };
+    handleLabelChange = (ev) => {
+        return this.update({ label: ev.target.value });
+    };
+    handleFilterChange = (filter) => {
+        return this.update({ filter });
+    };
+    handleOrderExprChange = (orderExpr) => {
+        return this.update({ orderExpr });
+    };
+    handleOrderDirChange = (orderDir) => {
+        return this.update({ orderDir });
+    };
+    renderMode() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Type"
+        }, react_1.default.createElement(ui.Radio, { key: "single", value: this.state.mode, radioValue: "single", onChange: this.handleMode },
+            `Single ${this.props.segmentType}`,
+            react_1.default.createElement("span", { className: "text-muted" }, ` - used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`)), react_1.default.createElement(ui.Radio, { key: "multiple", value: this.state.mode, radioValue: "multiple", onChange: this.handleMode },
+            `Multiple ${this.props.segmentType}s`,
+            react_1.default.createElement("span", { className: "text-muted" }, ` - disaggregate data by a field`)));
+    }
+    renderLabel() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Label",
+            help: this.state.mode === "multiple" ? `Optional label for the ${this.props.segmentType}s` : undefined
+        }, R("input", {
+            ref: (elem) => {
+                this.labelElem = elem;
+            },
+            type: "text",
+            className: "form-control",
+            value: this.props.segment.label || "",
+            onChange: this.handleLabelChange
+        }));
+    }
+    renderValueAxis() {
+        // Get type of axis
+        const axisBuilder = new __1.AxisBuilder({ schema: this.props.schema });
+        const axisType = axisBuilder.getAxisType(this.props.segment.valueAxis);
+        const allowValueAxisOnlyValuesPresent = axisType == "enum" || axisType == "enumset" || axisType == "date";
+        return react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: "Field", help: "Field to disaggregate data by" },
+            react_1.default.createElement("div", { style: { marginLeft: 8 } },
+                R(AxisComponent_1.default, {
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    table: this.props.table,
+                    types: ["enum", "enumset", "text", "boolean", "date"],
+                    aggrNeed: "none",
+                    value: this.props.segment.valueAxis,
+                    onChange: this.handleValueAxisChange,
+                    allowExcludedValues: true,
+                    filters: this.props.filters,
+                    collapseCategories: true
+                }),
+                allowValueAxisOnlyValuesPresent ?
+                    react_1.default.createElement(ui.Checkbox, { value: this.props.segment.valueAxisOnlyValuesPresent, onChange: this.handleValueAxisOnlyValuesPresentChange },
+                        "Only show values actually present\u00A0",
+                        react_1.default.createElement(PopoverHelpComponent_1.default, { placement: "bottom" }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range"))
+                    : null));
+    }
+    renderFilter() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: [R(ui.Icon, { id: "glyphicon-filter" }), " Filters"],
+            hint: `Filters all data associated with this ${this.props.segmentType}`
+        }, R(expressions_ui_2.FilterExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: this.props.table,
+            value: this.props.segment.filter
+        }));
+    }
+    renderStyling() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Styling"
+        }, react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: this.props.segment.bold === true, onChange: (value) => this.update({ bold: value }) }, "Bold"),
+            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: this.props.segment.italic === true, onChange: (value) => this.update({ italic: value }) }, "Italic"),
+            this.props.segment.valueAxis && this.props.segment.label ?
+                react_1.default.createElement(ui.Checkbox, { key: "valueLabelBold", inline: true, value: this.props.segment.valueLabelBold === true, onChange: (value) => this.update({ valueLabelBold: value }) }, "Header Bold")
+                : undefined,
+            this.props.segment.valueAxis && this.props.segment.label
+                ? R("div", { style: { paddingTop: 5 } }, "Shade filler cells: ", R(ColorComponent_1.default, {
+                    color: this.props.segment.fillerColor,
+                    onChange: (color) => this.update({ fillerColor: color })
+                }))
+                : undefined));
+    }
+    renderBorders() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: "Borders"
+        }, R("div", { key: "before" }, this.props.segmentType === "row" ? "Top: " : "Left: "), R(BorderComponent, {
+            value: this.props.segment.borderBefore,
+            defaultValue: 2,
+            onChange: (value) => this.update({ borderBefore: value })
+        }), R("div", { key: "within" }, "Within: "), R(BorderComponent, {
+            value: this.props.segment.borderWithin,
+            defaultValue: 1,
+            onChange: (value) => this.update({ borderWithin: value })
+        }), R("div", { key: "after" }, this.props.segmentType === "row" ? "Bottom: " : "Right: "), R(BorderComponent, {
+            value: this.props.segment.borderAfter,
+            defaultValue: 2,
+            onChange: (value) => this.update({ borderAfter: value })
+        }));
+    }
+    renderOrderExpr() {
+        return R(ui.FormGroup, {
+            labelMuted: true,
+            label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " Sort"],
+            hint: `Sorts the display of this ${this.props.segmentType}`
+        }, R(expressions_ui_1.ExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleOrderExprChange,
+            table: this.props.table,
+            types: ["enum", "text", "boolean", "date", "datetime", "number"],
+            aggrStatuses: ["aggregate"],
+            value: this.props.segment.orderExpr ?? null
+        }), this.props.segment.orderExpr
+            ? R("div", null, R(ui.Radio, {
+                value: this.props.segment.orderDir || "asc",
+                radioValue: "asc",
+                onChange: this.handleOrderDirChange,
+                inline: true
+            }, "Ascending"), R(ui.Radio, {
+                value: this.props.segment.orderDir || "asc",
+                radioValue: "desc",
+                onChange: this.handleOrderDirChange,
+                inline: true
+            }, "Descending"))
+            : undefined);
+    }
+    render() {
+        return R("div", null, this.renderMode(), this.state.mode ? this.renderLabel() : undefined, this.state.mode === "multiple" ? this.renderValueAxis() : undefined, this.state.mode ? this.renderFilter() : undefined, this.state.mode === "multiple" ? this.renderOrderExpr() : undefined, this.state.mode ? this.renderStyling() : undefined, this.state.mode ? this.renderBorders() : undefined);
+    }
+}
+exports.default = SegmentDesignerComponent;
+// Allows setting border heaviness
+class BorderComponent extends react_1.default.Component {
+    render() {
+        const value = this.props.value != null ? this.props.value : this.props.defaultValue;
+        return R("span", null, react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 0, onChange: () => this.props.onChange(0) }, "None"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 1, onChange: () => this.props.onChange(1) }, "Light"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 2, onChange: () => this.props.onChange(2) }, "Medium"), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 3, onChange: () => this.props.onChange(3) }, "Heavy"));
+    }
+}

package/lib/widgets/charts/table/OrderingsComponent.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface OrderingsComponentProps {
+    orderings: any;
+    onOrderingsChange: any;
+    schema: Schema;
+    dataSource: DataSource;
+    table?: string;
+}
+export default class OrderingsComponent extends React.Component<OrderingsComponentProps> {
+    handleAdd: () => any;
+    handleOrderingRemove: (index: any) => any;
+    handleOrderingChange: (index: any, ordering: any) => any;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/widgets/charts/table/OrderingsComponent.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 expressions_ui_1 = require("@mwater/expressions-ui");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+// Edits the orderings of a chart
+// Orderings are an array of { axis: axis to order by, direction: "asc"/"desc" }
+// NOTE: no longer uses complete axis, just the expr
+class OrderingsComponent extends react_1.default.Component {
+    handleAdd = () => {
+        const orderings = this.props.orderings.slice();
+        orderings.push({ axis: null, direction: "asc" });
+        return this.props.onOrderingsChange(orderings);
+    };
+    handleOrderingRemove = (index) => {
+        const orderings = this.props.orderings.slice();
+        orderings.splice(index, 1);
+        return this.props.onOrderingsChange(orderings);
+    };
+    handleOrderingChange = (index, ordering) => {
+        const orderings = this.props.orderings.slice();
+        orderings[index] = ordering;
+        return this.props.onOrderingsChange(orderings);
+    };
+    render() {
+        return R("div", null, lodash_1.default.map(this.props.orderings, (ordering, i) => {
+            return R(OrderingComponent, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                ordering,
+                table: this.props.table,
+                onOrderingChange: this.handleOrderingChange.bind(null, i),
+                onOrderingRemove: this.handleOrderingRemove.bind(null, i)
+            });
+        }), R("button", { type: "button", className: "btn btn-sm btn-secondary", onClick: this.handleAdd, key: "add" }, R("span", { className: "fas fa-plus" }), " Add Ordering"));
+    }
+}
+exports.default = OrderingsComponent;
+class OrderingComponent extends react_1.default.Component {
+    handleAxisChange = (axis) => {
+        return this.props.onOrderingChange(lodash_1.default.extend({}, this.props.ordering, { axis }));
+    };
+    handleExprChange = (expr) => {
+        const axis = lodash_1.default.extend({}, this.props.ordering.axis || {}, { expr });
+        return this.handleAxisChange(axis);
+    };
+    handleDirectionChange = (value) => {
+        return this.props.onOrderingChange(lodash_1.default.extend({}, this.props.ordering, { direction: value ? "desc" : "asc" }));
+    };
+    render() {
+        return R("div", { style: { marginLeft: 5 } }, R("div", { style: { textAlign: "right" } }, R("button", { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onOrderingRemove }, R("span", { className: "fas fa-times" }))), R(expressions_ui_1.ExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.table,
+            types: ["text", "number", "boolean", "date", "datetime"],
+            aggrStatuses: ["individual", "aggregate"],
+            value: this.props.ordering.axis?.expr,
+            onChange: this.handleExprChange
+        }), R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: this.props.ordering.direction === "desc", onChange: this.handleDirectionChange }, "Reverse")));
+    }
+}