@mwater/visualization 5.0.0

package/lib/widgets/charts/layered/LayeredChartLayerDesignerComponent.js

@@ -0,0 +1,329 @@
+"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 AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_1 = require("@mwater/expressions");
+const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
+const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
+const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
+const uiComponents = __importStar(require("../../../UIComponents"));
+const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
+class LayeredChartLayerDesignerComponent extends react_1.default.Component {
+    isLayerPolar(layer) {
+        return ["pie", "donut"].includes(layer.type || this.props.design.type);
+    }
+    doesLayerNeedGrouping(layer) {
+        return !["scatter"].includes(layer.type || this.props.design.type);
+    }
+    // Determine if x-axis required
+    isXAxisRequired(layer) {
+        return !this.isLayerPolar(layer);
+    }
+    getAxisTypes(layer, axisKey) {
+        return LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey);
+    }
+    getAxisLabel(icon, label) {
+        return R("span", null, R("span", { className: "glyphicon glyphicon-" + icon }), " " + label);
+    }
+    // Determine icon/label for color axis
+    getXAxisLabel(layer) {
+        if (this.props.design.transpose) {
+            return this.getAxisLabel("resize-vertical", "Vertical Axis");
+        }
+        else {
+            return this.getAxisLabel("resize-horizontal", "Horizontal Axis");
+        }
+    }
+    // Determine icon/label for color axis
+    getYAxisLabel(layer) {
+        if (this.isLayerPolar(layer)) {
+            return this.getAxisLabel("repeat", "Angle Axis");
+        }
+        else if (this.props.design.transpose) {
+            return this.getAxisLabel("resize-horizontal", "Horizontal Axis");
+        }
+        else {
+            return this.getAxisLabel("resize-vertical", "Vertical Axis");
+        }
+    }
+    // Determine icon/label for color axis
+    getColorAxisLabel(layer) {
+        if (this.isLayerPolar(layer)) {
+            return this.getAxisLabel("text-color", "Label Axis");
+        }
+        else {
+            return this.getAxisLabel("equalizer", "Split Axis");
+        }
+    }
+    // Updates layer with the specified changes
+    updateLayer(changes) {
+        const layer = lodash_1.default.extend({}, this.props.design.layers[this.props.index], changes);
+        return this.props.onChange(layer);
+    }
+    // Update axes with specified changes
+    updateAxes(changes) {
+        const axes = lodash_1.default.extend({}, this.props.design.layers[this.props.index].axes, changes);
+        return this.updateLayer({ axes });
+    }
+    handleNameChange = (ev) => {
+        return this.updateLayer({ name: ev.target.value });
+    };
+    handleTableChange = (table) => {
+        return this.updateLayer({ table });
+    };
+    handleXAxisChange = (axis) => {
+        const layer = this.props.design.layers[this.props.index];
+        const axesChanges = { x: axis };
+        // Default y to count if x or color present and not scatter
+        if (axis && this.doesLayerNeedGrouping(layer) && !layer.axes?.y) {
+            axesChanges.y = { expr: { type: "op", op: "count", table: layer.table, exprs: [] } };
+        }
+        return this.updateAxes(axesChanges);
+    };
+    handleXColorMapChange = (xColorMap) => {
+        const layer = this.props.design.layers[this.props.index];
+        return this.updateLayer({ xColorMap });
+    };
+    handleColorAxisChange = (axis) => {
+        const layer = this.props.design.layers[this.props.index];
+        const axesChanges = { color: axis };
+        // Default y to count if x or color present and not scatter
+        if (axis && this.doesLayerNeedGrouping(layer) && !layer.axes?.y) {
+            axesChanges.y = { expr: { type: "op", op: "count", table: layer.table, exprs: [] } };
+        }
+        return this.updateAxes(axesChanges);
+    };
+    handleYAxisChange = (axis) => {
+        return this.updateAxes({ y: axis });
+    };
+    handleFilterChange = (filter) => {
+        return this.updateLayer({ filter });
+    };
+    handleColorChange = (color) => {
+        return this.updateLayer({ color });
+    };
+    handleCumulativeChange = (value) => {
+        return this.updateLayer({ cumulative: value });
+    };
+    handleTrendlineChange = (value) => {
+        return this.updateLayer({ trendline: value ? "linear" : undefined });
+    };
+    handleStackedChange = (value) => {
+        return this.updateLayer({ stacked: value });
+    };
+    renderName() {
+        const layer = this.props.design.layers[this.props.index];
+        // R 'div', className: "form-group",
+        //   R 'label', className: "text-muted", "Series Name"
+        const placeholder = this.props.design.layers.length === 1 ? "Value" : `Series ${this.props.index + 1}`;
+        return R("input", {
+            type: "text",
+            className: "form-control form-control-sm",
+            value: layer.name,
+            onChange: this.handleNameChange,
+            placeholder
+        });
+    }
+    renderRemove() {
+        if (this.props.design.layers.length > 1) {
+            return R("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }));
+        }
+        return null;
+    }
+    renderTable() {
+        const layer = this.props.design.layers[this.props.index];
+        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: layer.table,
+            onChange: this.handleTableChange,
+            filter: layer.filter,
+            onFilterChange: this.handleFilterChange
+        }));
+    }
+    handlexAxisOnlyValuesPresentChange = (xAxisOnlyValuesPresent) => {
+        this.updateLayer({ xAxisOnlyValuesPresent });
+    };
+    renderXAxis() {
+        const layer = this.props.design.layers[this.props.index];
+        if (!layer.table) {
+            return;
+        }
+        if (!this.isXAxisRequired(layer)) {
+            return;
+        }
+        const title = this.getXAxisLabel(layer);
+        const filters = lodash_1.default.clone(this.props.filters) || [];
+        if (layer.filter != null) {
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const jsonql = exprCompiler.compileExpr({ expr: layer.filter, tableAlias: "{alias}" });
+            if (jsonql) {
+                filters.push({ table: layer.filter.table, jsonql });
+            }
+        }
+        const categoricalX = new LayeredChartCompiler_1.default({ schema: this.props.schema }).isCategoricalX(this.props.design);
+        return [
+            R(uiComponents.SectionComponent, { label: title }, R(AxisComponent_1.default, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: layer.table,
+                types: this.getAxisTypes(layer, "x"),
+                aggrNeed: "none",
+                required: true,
+                value: layer.axes.x,
+                onChange: this.handleXAxisChange,
+                filters,
+                // Only show x color map if no color axis and is categorical and enabled
+                showColorMap: layer.xColorMap && categoricalX && !layer.axes.color,
+                autosetColors: false,
+                // Categorical X can exclude values
+                allowExcludedValues: categoricalX
+            })),
+            categoricalX ? R(ui.Checkbox, {
+                value: layer.xAxisOnlyValuesPresent,
+                onChange: this.handlexAxisOnlyValuesPresentChange
+            }, "Only show values actually present", R(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")) : undefined
+        ];
+    }
+    renderColorAxis() {
+        const layer = this.props.design.layers[this.props.index];
+        if (!layer.table) {
+            return;
+        }
+        const title = this.getColorAxisLabel(layer);
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: layer.table,
+            types: this.getAxisTypes(layer, "color"),
+            aggrNeed: "none",
+            required: this.isLayerPolar(layer),
+            showColorMap: true,
+            value: layer.axes.color,
+            onChange: this.handleColorAxisChange,
+            allowExcludedValues: true,
+            filters: this.props.filters
+        })));
+    }
+    renderYAxis() {
+        const layer = this.props.design.layers[this.props.index];
+        if (!layer.table) {
+            return;
+        }
+        const title = this.getYAxisLabel(layer);
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, title), R("div", { style: { marginLeft: 10 } }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: layer.table,
+            types: this.getAxisTypes(layer, "y"),
+            aggrNeed: this.doesLayerNeedGrouping(layer) ? "required" : "none",
+            value: layer.axes.y,
+            required: true,
+            filters: this.props.filters,
+            showFormat: true,
+            onChange: this.handleYAxisChange
+        }), this.renderCumulative(), this.renderStacked(), this.renderTrendline()));
+    }
+    renderCumulative() {
+        const layer = this.props.design.layers[this.props.index];
+        // Can only cumulative if non-polar and y axis determined and x axis supports cumulative
+        const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
+        if (!layer.axes.y || !layer.axes.x || !axisBuilder.doesAxisSupportCumulative(layer.axes.x)) {
+            return;
+        }
+        return R("div", { key: "cumulative" }, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, value: layer.cumulative, onChange: this.handleCumulativeChange }, "Cumulative"));
+    }
+    renderTrendline() {
+        const layer = this.props.design.layers[this.props.index];
+        // Can only have trendline if non-polar and y + x axis determined and not cumulative and not stacked
+        const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
+        if (!layer.axes.y || !layer.axes.x || layer.cumulative || layer.stacked || this.props.design.stacked) {
+            return;
+        }
+        return R("div", { key: "trendline" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: layer.trendline === "linear", onChange: this.handleTrendlineChange }, "Show linear trendline"));
+    }
+    renderStacked() {
+        const layer = this.props.design.layers[this.props.index];
+        // Only if has color axis and there are more than one layer
+        if (layer.axes.color && this.props.design.layers.length > 1) {
+            const stacked = layer.stacked != null ? layer.stacked : true;
+            return R("div", { key: "stacked" }, react_1.default.createElement(bootstrap_1.Checkbox, { value: stacked, onChange: this.handleStackedChange }, "Stacked"));
+        }
+        return null;
+    }
+    renderColor() {
+        const layer = this.props.design.layers[this.props.index];
+        // If not table do nothing
+        if (!layer.table) {
+            return;
+        }
+        const categoricalX = new LayeredChartCompiler_1.default({ schema: this.props.schema }).isCategoricalX(this.props.design);
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, layer.axes.color ? "Default Color" : "Color"), R("div", { style: { marginLeft: 8 } }, R(ColorComponent_1.default, { color: layer.color, onChange: this.handleColorChange }), 
+        // Allow toggling of colors
+        layer.axes.x && categoricalX && !layer.axes.color
+            ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, "Set Individual Colors")
+            : undefined));
+    }
+    renderFilter() {
+        const layer = this.props.design.layers[this.props.index];
+        // If no table, hide
+        if (!layer.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, R(expressions_ui_1.FilterExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: layer.table,
+            value: layer.filter
+        })));
+    }
+    render() {
+        const layer = this.props.design.layers[this.props.index];
+        return R("div", null, this.props.index > 0 ? R("hr") : undefined, this.renderRemove(), this.renderTable(), 
+        // Color axis first for pie
+        this.isLayerPolar(layer) ? this.renderColorAxis() : undefined, this.renderXAxis(), layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined, layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined, 
+        // No default color for polar
+        (() => {
+            if (!this.isLayerPolar(layer)) {
+                if (layer.axes.y) {
+                    return this.renderColor();
+                }
+            }
+            return null;
+        })(), layer.axes.y ? this.renderFilter() : undefined, layer.axes.y ? this.renderName() : undefined);
+    }
+}
+exports.default = LayeredChartLayerDesignerComponent;

package/lib/widgets/charts/layered/LayeredChartSvgFileSaver.d.ts

@@ -0,0 +1,5 @@
+import { Schema } from "@mwater/expressions";
+declare const _default: {
+    save(design: any, data: any, schema: Schema, format: any): void;
+};
+export default _default;

package/lib/widgets/charts/layered/LayeredChartSvgFileSaver.js

@@ -0,0 +1,138 @@
+"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 jquery_1 = __importDefault(require("jquery"));
+const save_svg_as_png_1 = __importDefault(require("save-svg-as-png"));
+const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
+const billboard_js_1 = __importDefault(require("billboard.js"));
+// Get the css rules corresponding to .c3 directly out of the document object
+function getC3Css() {
+    const css = [];
+    if (document.styleSheets) {
+        for (let sheetIndex = 0; sheetIndex < document.styleSheets.length; sheetIndex++) {
+            const sheet = document.styleSheets[sheetIndex];
+            const rules = sheet?.cssRules || sheet.rules;
+            if (rules) {
+                for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+                    const rule = rules[ruleIndex];
+                    if (rule.cssText && rule.cssText.startsWith(".bb")) {
+                        css.push(rule.cssText);
+                    }
+                }
+            }
+        }
+    }
+    return css.join("\n");
+}
+// Get the svg XML text straight from the DOM node, adding the css styling to it as a <style> element
+function getC3String(c3Node) {
+    // Log SVG with stylesheet info
+    // First get the svg DOM node and make a copy as an XML doc
+    const svgStr = c3Node.outerHTML;
+    const xml = jquery_1.default.parseXML(svgStr);
+    const svgNode = xml.documentElement;
+    // Denote it as svg
+    svgNode.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgNode.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    // Add a style element with the .c3 css rules for this page
+    const styleNode = xml.createElement("style");
+    styleNode.setAttribute("type", "text/css");
+    let css = getC3Css();
+    // few styles are defined as .c3 [selector]
+    // which does not apply when exporting svg as parent element is not available
+    css +=
+        "svg { font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif; -webkit-tap-highlight-color: transparent; }\n";
+    css += "path, line { fill: none; stroke: rgb(0, 0, 0); }\n";
+    css += "text { user-select: none; }\n";
+    const cdata = xml.createCDATASection(css);
+    styleNode.appendChild(cdata);
+    svgNode.insertBefore(styleNode, svgNode.firstChild);
+    // Serialize
+    const svgFinalStr = new XMLSerializer().serializeToString(xml);
+    return svgFinalStr;
+}
+// Creates the svg string and saves that to file
+function saveSvgToFile(containerDiv, title) {
+    const svgFinalStr = getC3String(containerDiv.firstChild);
+    const blob = new Blob([svgFinalStr], { type: "image/svg+xml" });
+    // Require at use as causes server problems
+    const FileSaver = require("file-saver");
+    return FileSaver.saveAs(blob, (title || "unnamed-chart") + ".svg");
+}
+// Saves svg files from layered charts
+// design: design of the chart
+// data: results from queries
+// schema: the chart's schema
+// format: "svg" or "png"
+exports.default = {
+    save(design, data, schema, format) {
+        const compiler = new LayeredChartCompiler_1.default({ schema });
+        const props = {
+            design,
+            data,
+            width: 600,
+            height: 600
+        };
+        const chartOptions = compiler.createChartOptions(props);
+        const containerDiv = document.createElement("div");
+        containerDiv.className += "bb";
+        // BillboardJS legend calculations dont work properly when element is not visible
+        // https://github.com/naver/billboard.js/issues/1015
+        document.body.appendChild(containerDiv);
+        chartOptions.bindto = containerDiv;
+        const title = design.titleText;
+        let chart = null;
+        const onRender = () => {
+            return lodash_1.default.defer(function () {
+                if (format === "svg") {
+                    saveSvgToFile(containerDiv, title);
+                }
+                else if (format === "png") {
+                    // saveSvgAsPng does not include the styles for the svg element itself
+                    // so set the styles inline
+                    // see: https://github.com/exupero/saveSvgAsPng/issues/110
+                    const el = (0, jquery_1.default)(containerDiv).find("svg")[0];
+                    el.style.fontFamily = "sans-serif";
+                    el.style.fontStyle = "normal";
+                    el.style.fontVariant = "normal";
+                    el.style.fontWeight = "normal";
+                    el.style.fontStretch = "normal";
+                    el.style.fontSize = "10px";
+                    el.style.lineHeight = "normal";
+                    const customStyle = document.createElement("style");
+                    customStyle.type = "text/css";
+                    customStyle.appendChild(document.createTextNode(`<![CDATA[
+line, path {fill: none;stroke: rgb(0, 0, 0);}
+]]>\
+`));
+                    el.appendChild(customStyle);
+                    save_svg_as_png_1.default.saveSvgAsPng(el, `${title || "untitled"}.png`, {
+                        selectorRemap(selector) {
+                            if ([".bb path, .bb line", ".bb line, .bb path"].includes(selector)) {
+                                return "path, line";
+                            }
+                            if (selector.indexOf(".bb ") === 0) {
+                                return selector.substr(4);
+                            }
+                            else {
+                                return selector;
+                            }
+                        },
+                        backgroundColor: "#fff"
+                    });
+                }
+                return chart.destroy();
+            });
+        };
+        chartOptions.onrendered = lodash_1.default.debounce(lodash_1.default.once(onRender), 1000);
+        // const c3 = require("c3")
+        chart = billboard_js_1.default.generate(chartOptions);
+        // Remove listener for window focus (https://github.com/c3js/c3/issues/2742)
+        window.removeEventListener("focus", chart.internal.windowFocusHandler);
+        chart.internal.windowFocusHandler = () => { };
+        window.addEventListener("focus", chart.internal.windowFocusHandler);
+    }
+};

package/lib/widgets/charts/layered/LayeredChartUtils.d.ts

@@ -0,0 +1 @@
+export declare function getAxisTypes(design: any, layer: any, axis: any): string[] | null;

package/lib/widgets/charts/layered/LayeredChartUtils.js

@@ -0,0 +1,25 @@
+"use strict";
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+// Misc utils for layered charts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAxisTypes = void 0;
+// Get possible types for axis of a layer
+function getAxisTypes(design, layer, axis) {
+    // If categorical
+    const layerType = layer.type || design.type;
+    switch (axis) {
+        case "x":
+            if (layerType === "bar") {
+                return ["enum", "enumset", "text", "date", "boolean"];
+            }
+            // More broad
+            return ["enum", "text", "number", "boolean", "date"];
+        case "color":
+            return ["enum", "text", "date", "boolean"];
+        case "y":
+            return ["number"];
+    }
+    return null;
+}
+exports.getAxisTypes = getAxisTypes;

package/lib/widgets/charts/layered/LayeredChartViewComponent.d.ts

@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { LayeredChartDesign } from "./LayeredChartDesign";
+import { WidgetScope } from "../../../WidgetScope";
+export interface LayeredChartViewComponentProps {
+    schema: Schema;
+    dataSource: DataSource;
+    design: LayeredChartDesign;
+    data: any;
+    onDesignChange?: any;
+    width: number;
+    height: number;
+    /** scope of the widget (when the widget self-selects a particular scope) */
+    scope?: WidgetScope;
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: (scope?: WidgetScope) => void;
+}
+interface LayeredChartViewComponentState {
+    headerHeight: any;
+    footerHeight: any;
+}
+export default class LayeredChartViewComponent extends React.Component<LayeredChartViewComponentProps, LayeredChartViewComponentState> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    header: HTMLElement | null;
+    footer: HTMLElement | null;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: LayeredChartViewComponentProps): void;
+    updateHeights(): void;
+    handleHeaderChange: (header: any) => void;
+    handleFooterChange: (footer: any) => void;
+    renderHeader(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderFooter(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: number;
+            height: number;
+        };
+    }, HTMLElement>;
+}
+export {};