@mwater/visualization 5.0.0

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

@@ -0,0 +1,76 @@
+import { Expr } from "@mwater/expressions";
+import { Axis } from "../../../axes/Axis";
+import { TextWidgetDesign } from "../../text/TextWidgetDesign";
+/** Design for a layered chart */
+export interface LayeredChartDesign {
+    version: number;
+    /** Type of chart (overall) */
+    type: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut";
+    /** array of layers */
+    layers: LayeredChartDesignLayer[];
+    /** (deprecated by headerItems) title text @deprecated */
+    titleText?: string;
+    /** text of x axis label, display default value if "", display nothing if null */
+    xAxisLabelText: string | null;
+    /** text of y axis label, display default value if "", display nothing if null */
+    yAxisLabelText: string | null;
+    /** true to flip axes */
+    transpose?: boolean;
+    /** true to stack all  */
+    stacked?: boolean;
+    /** true to stack proportionally (100 %). Only applicable if stacked */
+    proportional?: boolean;
+    /** true to show labels on values */
+    labels?: boolean;
+    /** text widget design to display in header (replaces title) */
+    header?: TextWidgetDesign;
+    /** text widget design to display in header */
+    footer?: TextWidgetDesign;
+    /** array of { value:, label:, highlightColor: } thresholds to draw on y-axis. Only for non-polar. Color takes effect if y > threshold */
+    yThresholds?: YThreshold[];
+    /** order of pie/donut charts. Default is "desc" (if undefined). Can be "desc", "asc", "natural" */
+    polarOrder?: "desc" | "asc" | "natural";
+    /** True to hide percentage for pie/donut */
+    hidePercentage?: boolean;
+    /** optional maximum for y axis */
+    yMax?: number;
+    /** optional minimum for y axis */
+    yMin?: number;
+    /** true to show popout lines for small values */
+    popoutSmallValues?: boolean;
+}
+export interface LayeredChartDesignLayer {
+    /** bar/line/spline/scatter/area/pie/donut (overrides main one) */
+    type: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut";
+    /** table of layer */
+    table: string;
+    /** label for layer (optional) */
+    name?: string;
+    /** axes (see below) */
+    axes: {
+        x?: Axis;
+        y?: Axis;
+        /** color axis (to split into series based on a color) */
+        color?: Axis;
+    };
+    /** true to stack. Defaults true if multiple layers and has color index. */
+    stacked?: boolean;
+    /** optional logical expression to filter by */
+    filter?: Expr;
+    /** color of layer (e.g. #FF8800) */
+    color?: string;
+    /** true to use running total of values */
+    cumulative?: boolean;
+    /** true if has a color map for x-axis */
+    xColorMap?: boolean;
+    /** Optional type of trendline */
+    trendline?: "linear";
+    /** True to only display x-axis values that are actually present (for enums) */
+    xAxisOnlyValuesPresent?: boolean;
+}
+/** Threshold to display on y-axis */
+export interface YThreshold {
+    value: number | null;
+    label: string | null;
+    highlightColor: string | null;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,80 @@
+import React from "react";
+import * as uiComponents from "../../../UIComponents";
+import { DataSource, Schema } from "@mwater/expressions";
+import { LayeredChartDesign } from "./LayeredChartDesign";
+import { JsonQLFilter } from "../../..";
+export interface LayeredChartDesignerComponentProps {
+    design: LayeredChartDesign;
+    schema: Schema;
+    dataSource: DataSource;
+    onDesignChange: (design: LayeredChartDesign) => void;
+    filters?: JsonQLFilter[];
+}
+export default class LayeredChartDesignerComponent extends React.Component<LayeredChartDesignerComponentProps> {
+    areAxesLabelsNeeded(): boolean;
+    updateDesign(changes: any): void;
+    handleTypeChange: (type: any) => void;
+    handleTransposeChange: (value: any) => void;
+    handleStackedChange: (value: any) => void;
+    handleProportionalChange: (value: any) => void;
+    handleLabelsChange: (value: any) => void;
+    handleLabelsPopoutChange: (value: any) => void;
+    handlePercentageVisibilityChange: (value: any) => void;
+    handlePolarOrderChange: (value: any) => void;
+    handleYThresholdsChange: (yThresholds: any) => void;
+    handleLayerChange: (index: any, layer: any) => void;
+    handleRemoveLayer: (index: any) => void;
+    handleAddLayer: () => void;
+    handleXAxisLabelTextChange: (ev: any) => void;
+    handleYAxisLabelTextChange: (ev: any) => void;
+    handleToggleXAxisLabelClick: (ev: any) => void;
+    handleToggleYAxisLabelClick: (ev: any) => void;
+    handleYMinChange: (yMin: any) => void;
+    handleYMaxChange: (yMax: any) => void;
+    renderLabels(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderType(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
+    renderLayer: (index: any) => React.DetailedReactHTMLElement<{
+        style: {
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        key: any;
+    }, HTMLElement>;
+    renderLayers(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderOptions(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderThresholds(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | null;
+    renderYRange(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | null;
+    render(): React.CElement<{
+        initialTabId: string;
+        tabs: ({
+            id: string;
+            label: string;
+            elem: React.DetailedReactHTMLElement<{
+                style: {
+                    paddingBottom: number;
+                };
+            }, HTMLElement>;
+        } | {
+            id: string;
+            label: string;
+            elem: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        })[];
+    }, React.Component<{
+        initialTabId: string;
+        tabs: ({
+            id: string;
+            label: string;
+            elem: React.DetailedReactHTMLElement<{
+                style: {
+                    paddingBottom: number;
+                };
+            }, HTMLElement>;
+        } | {
+            id: string;
+            label: string;
+            elem: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        })[];
+    }, any, any>>;
+}

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

@@ -0,0 +1,317 @@
+"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 LayeredChartLayerDesignerComponent_1 = __importDefault(require("./LayeredChartLayerDesignerComponent"));
+const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
+const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
+const uiComponents = __importStar(require("../../../UIComponents"));
+const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+class LayeredChartDesignerComponent extends react_1.default.Component {
+    // Determine if axes labels needed
+    areAxesLabelsNeeded() {
+        return !["pie", "donut"].includes(this.props.design.type);
+    }
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        return this.props.onDesignChange(design);
+    }
+    handleTypeChange = (type) => {
+        return this.updateDesign({ type });
+    };
+    handleTransposeChange = (value) => {
+        return this.updateDesign({ transpose: value });
+    };
+    handleStackedChange = (value) => {
+        return this.updateDesign({ stacked: value });
+    };
+    handleProportionalChange = (value) => {
+        return this.updateDesign({ proportional: value });
+    };
+    handleLabelsChange = (value) => {
+        return this.updateDesign({ labels: value });
+    };
+    handleLabelsPopoutChange = (value) => {
+        return this.updateDesign({ popoutSmallValues: value });
+    };
+    handlePercentageVisibilityChange = (value) => {
+        return this.updateDesign({ hidePercentage: value });
+    };
+    handlePolarOrderChange = (value) => {
+        return this.updateDesign({ polarOrder: value });
+    };
+    handleYThresholdsChange = (yThresholds) => {
+        return this.updateDesign({ yThresholds });
+    };
+    handleLayerChange = (index, layer) => {
+        const layers = this.props.design.layers.slice();
+        layers[index] = layer;
+        return this.updateDesign({ layers });
+    };
+    handleRemoveLayer = (index) => {
+        const layers = this.props.design.layers.slice();
+        layers.splice(index, 1);
+        return this.updateDesign({ layers });
+    };
+    handleAddLayer = () => {
+        const layers = this.props.design.layers.slice();
+        layers.push({});
+        return this.updateDesign({ layers });
+    };
+    handleXAxisLabelTextChange = (ev) => {
+        return this.updateDesign({ xAxisLabelText: ev.target.value });
+    };
+    handleYAxisLabelTextChange = (ev) => {
+        return this.updateDesign({ yAxisLabelText: ev.target.value });
+    };
+    handleToggleXAxisLabelClick = (ev) => {
+        return this.updateDesign({ xAxisLabelText: this.props.design.xAxisLabelText != null ? null : "" });
+    };
+    handleToggleYAxisLabelClick = (ev) => {
+        return this.updateDesign({ yAxisLabelText: this.props.design.yAxisLabelText != null ? null : "" });
+    };
+    handleYMinChange = (yMin) => {
+        return this.updateDesign({ yMin });
+    };
+    handleYMaxChange = (yMax) => {
+        return this.updateDesign({ yMax });
+    };
+    renderLabels() {
+        if (!this.props.design.type) {
+            return;
+        }
+        const compiler = new LayeredChartCompiler_1.default({ schema: this.props.schema });
+        return R("div", null, R("div", { className: "form-text text-muted" }, "To edit title of chart, click on it directly"), this.areAxesLabelsNeeded()
+            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleXAxisLabelClick }, this.props.design.xAxisLabelText != null ? "Hide" : "Show")), this.props.design.xAxisLabelText != null
+                ? R("input", {
+                    type: "text",
+                    className: "form-control form-control-sm",
+                    value: this.props.design.xAxisLabelText,
+                    onChange: this.handleXAxisLabelTextChange,
+                    placeholder: compiler.compileDefaultXAxisLabelText(this.props.design, "en")
+                })
+                : undefined)
+            : undefined, this.areAxesLabelsNeeded()
+            ? R("div", { className: "mb-3" }, R("span", null, R("label", { className: "text-muted" }, !this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"), " ", R("button", { className: "btn btn-secondary btn-sm", onClick: this.handleToggleYAxisLabelClick }, this.props.design.yAxisLabelText != null ? "Hide" : "Show")), this.props.design.yAxisLabelText != null
+                ? R("input", {
+                    type: "text",
+                    className: "form-control form-control-sm",
+                    value: this.props.design.yAxisLabelText,
+                    onChange: this.handleYAxisLabelTextChange,
+                    placeholder: compiler.compileDefaultYAxisLabelText(this.props.design)
+                })
+                : undefined)
+            : undefined);
+    }
+    renderType() {
+        const chartTypes = [
+            { id: "bar", name: "Bar", desc: "Best for most charts" },
+            { id: "pie", name: "Pie", desc: "Compare ratios of one variable" },
+            { id: "donut", name: "Donut", desc: "Pie chart with center removed" },
+            { id: "line", name: "Line", desc: "Show how data changes smoothly over time" },
+            { id: "spline", name: "Smoothed Line", desc: "For noisy data over time" },
+            { id: "scatter", name: "Scatter", desc: "Show correlation between two number variables" },
+            { id: "area", name: "Area", desc: "For cumulative data over time" }
+        ];
+        const current = lodash_1.default.findWhere(chartTypes, { id: this.props.design.type });
+        return R(uiComponents.SectionComponent, { icon: "glyphicon-th", label: "Chart Type" }, R(uiComponents.ToggleEditComponent, {
+            forceOpen: !this.props.design.type,
+            label: current ? current.name : "",
+            editor: (onClose) => {
+                return R(uiComponents.OptionListComponent, {
+                    hint: "Select a Chart Type",
+                    items: lodash_1.default.map(chartTypes, (ct) => ({
+                        name: ct.name,
+                        desc: ct.desc,
+                        onClick: () => {
+                            onClose(); // Close editor first
+                            return this.handleTypeChange(ct.id);
+                        }
+                    }))
+                });
+            }
+        }), this.renderOptions());
+    }
+    renderLayer = (index) => {
+        const style = {
+            paddingTop: 10,
+            paddingBottom: 10
+        };
+        return R("div", { style, key: index }, R(LayeredChartLayerDesignerComponent_1.default, {
+            design: this.props.design,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            index,
+            filters: this.props.filters,
+            onChange: this.handleLayerChange.bind(null, index),
+            onRemove: this.handleRemoveLayer.bind(null, index)
+        }));
+    };
+    renderLayers() {
+        if (!this.props.design.type) {
+            return;
+        }
+        return R("div", null, lodash_1.default.map(this.props.design.layers, (layer, i) => this.renderLayer(i)), 
+        // Only add if last has table
+        this.props.design.layers.length > 0 && lodash_1.default.last(this.props.design.layers).table
+            ? R("button", { className: "btn btn-link", type: "button", onClick: this.handleAddLayer }, R("span", { className: "fas fa-plus" }), " Add Another Series")
+            : undefined);
+    }
+    renderOptions() {
+        const { design } = this.props;
+        if (!design.type) {
+            return;
+        }
+        // Can only stack if multiple series or one with color and not polar
+        let canStack = !["pie", "donut"].includes(design.type) && design.layers.length > 0;
+        if (design.layers.length === 1 && !design.layers[0].axes.color) {
+            canStack = false;
+        }
+        // Don't include if transpose
+        const canTranspose = !["pie", "donut"].includes(design.type);
+        return R("div", { className: "text-muted" }, canTranspose ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "transpose", value: design.transpose, onChange: this.handleTransposeChange }, "Horizontal")) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "stacked", value: design.stacked, onChange: this.handleStackedChange }, "Stacked")) : undefined, canStack ? (react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "proportional", value: design.proportional, onChange: this.handleProportionalChange }, "Proportional")) : undefined, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.labels || false, onChange: this.handleLabelsChange }, "Show Values"), ["pie", "donut"].includes(design.type)
+            ? [
+                react_1.default.createElement(bootstrap_1.Checkbox, { key: "percentVisible", inline: true, value: design.hidePercentage, onChange: this.handlePercentageVisibilityChange }, "Hide Percentage"),
+                react_1.default.createElement(bootstrap_1.Select, { size: "sm", value: design.polarOrder ?? "desc", onChange: this.handlePolarOrderChange, options: [
+                        { value: "desc", label: "Descending Order" },
+                        { value: "asc", label: "Ascending Order" },
+                        { value: "natural", label: "Natural Order" }
+                    ], inline: true })
+            ]
+            : undefined, (design.labels && design.type === "bar" && !design.transpose) ? R('div', null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.popoutSmallValues || false, onChange: this.handleLabelsPopoutChange }, "Show Popout labels for small values")) : undefined);
+    }
+    renderThresholds() {
+        // Doesn't apply to polar
+        if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
+            return R(uiComponents.SectionComponent, { label: "Y Threshold Lines" }, R(ThresholdsComponent, {
+                thresholds: this.props.design.yThresholds,
+                onThresholdsChange: this.handleYThresholdsChange,
+                showHighlightColor: this.props.design.type === "bar"
+            }));
+        }
+        return null;
+    }
+    renderYRange() {
+        // Doesn't apply to polar
+        if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
+            return R(uiComponents.SectionComponent, { label: "Y Axis Range" }, R(LabeledInlineComponent, { key: "min", label: "Min:" }, R(ui.NumberInput, {
+                decimal: true,
+                style: { display: "inline-block" },
+                size: "sm",
+                value: this.props.design.yMin,
+                onChange: this.handleYMinChange,
+                placeholder: "Auto"
+            })), "  ", R(LabeledInlineComponent, { key: "label", label: "Max:" }, R(ui.NumberInput, {
+                decimal: true,
+                style: { display: "inline-block" },
+                size: "sm",
+                value: this.props.design.yMax,
+                onChange: this.handleYMaxChange,
+                placeholder: "Auto"
+            })));
+        }
+        return null;
+    }
+    render() {
+        const tabs = [];
+        tabs.push({
+            id: "design",
+            label: "Design",
+            elem: R("div", { style: { paddingBottom: 200 } }, R("br"), this.renderType(), this.renderLayers(), this.renderThresholds(), this.renderYRange())
+        });
+        if (this.props.design.type) {
+            tabs.push({
+                id: "labels",
+                label: "Labels",
+                elem: R("div", null, R("br"), this.renderLabels())
+            });
+        }
+        return R(TabbedComponent_1.default, {
+            initialTabId: "design",
+            tabs
+        });
+    }
+}
+exports.default = LayeredChartDesignerComponent;
+// Thresholds are lines that are added at certain values
+class ThresholdsComponent extends react_1.default.Component {
+    handleAdd = () => {
+        const thresholds = (this.props.thresholds || []).slice();
+        thresholds.push({ value: null, label: "", highlightColor: null });
+        return this.props.onThresholdsChange(thresholds);
+    };
+    handleChange = (index, value) => {
+        const thresholds = (this.props.thresholds || []).slice();
+        thresholds[index] = value;
+        return this.props.onThresholdsChange(thresholds);
+    };
+    handleRemove = (index) => {
+        const thresholds = (this.props.thresholds || []).slice();
+        thresholds.splice(index, 1);
+        return this.props.onThresholdsChange(thresholds);
+    };
+    render() {
+        return R("div", null, lodash_1.default.map(this.props.thresholds || [], (threshold, index) => {
+            return R(ThresholdComponent, {
+                threshold,
+                onThresholdChange: this.handleChange.bind(null, index),
+                onRemove: this.handleRemove.bind(null, index),
+                showHighlightColor: this.props.showHighlightColor
+            });
+        }), R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("i", { className: "fa fa-plus" }), " Add Y Threshold"));
+    }
+}
+class ThresholdComponent extends react_1.default.Component {
+    render() {
+        return R("div", null, R(LabeledInlineComponent, { key: "value", label: "Value:" }, R(ui.NumberInput, {
+            decimal: true,
+            style: { display: "inline-block" },
+            size: "sm",
+            value: this.props.threshold.value,
+            onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { value: v }))
+        })), "  ", R(LabeledInlineComponent, { key: "label", label: "Label:" }, R(ui.TextInput, {
+            style: { display: "inline-block", width: "8em" },
+            size: "sm",
+            value: this.props.threshold.label,
+            onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { label: v }))
+        })), "  ", this.props.showHighlightColor
+            ? R(LabeledInlineComponent, { key: "color", label: "Highlight color:" }, R("div", { style: { verticalAlign: "middle", display: "inline-block" } }, R(ColorComponent_1.default, {
+                color: this.props.threshold.highlightColor,
+                onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { highlightColor: v }))
+            })))
+            : undefined, "  ", R("button", { className: "btn btn-sm btn-link", onClick: this.props.onRemove }, R("i", { className: "fa fa-remove" })));
+    }
+}
+function LabeledInlineComponent(props) {
+    return R("div", { style: { display: "inline-block" } }, R("label", { className: "text-muted" }, props.label), " ", props.children);
+}

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import * as uiComponents from "../../../UIComponents";
+export interface LayeredChartLayerDesignerComponentProps {
+    design: any;
+    schema: Schema;
+    dataSource: DataSource;
+    index: number;
+    onChange: any;
+    onRemove: any;
+    filters?: any;
+}
+export default class LayeredChartLayerDesignerComponent extends React.Component<LayeredChartLayerDesignerComponentProps> {
+    isLayerPolar(layer: any): boolean;
+    doesLayerNeedGrouping(layer: any): boolean;
+    isXAxisRequired(layer: any): boolean;
+    getAxisTypes(layer: any, axisKey: any): string[] | null;
+    getAxisLabel(icon: any, label: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    getXAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    getYAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    getColorAxisLabel(layer: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    updateLayer(changes: any): any;
+    updateAxes(changes: any): any;
+    handleNameChange: (ev: any) => any;
+    handleTableChange: (table: any) => any;
+    handleXAxisChange: (axis: any) => any;
+    handleXColorMapChange: (xColorMap: any) => any;
+    handleColorAxisChange: (axis: any) => any;
+    handleYAxisChange: (axis: any) => any;
+    handleFilterChange: (filter: any) => any;
+    handleColorChange: (color: any) => any;
+    handleCumulativeChange: (value: any) => any;
+    handleTrendlineChange: (value: any) => any;
+    handleStackedChange: (value: any) => any;
+    renderName(): React.DetailedReactHTMLElement<{
+        type: string;
+        className: string;
+        value: any;
+        onChange: (ev: any) => any;
+        placeholder: string;
+    }, HTMLElement>;
+    renderRemove(): React.DetailedReactHTMLElement<{
+        className: string;
+        type: string;
+        onClick: any;
+    }, HTMLElement> | null;
+    renderTable(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
+    handlexAxisOnlyValuesPresentChange: (xAxisOnlyValuesPresent: boolean) => void;
+    renderXAxis(): (React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | React.CElement<{
+        value: any;
+        onChange: (xAxisOnlyValuesPresent: boolean) => void;
+    }, React.Component<{
+        value: any;
+        onChange: (xAxisOnlyValuesPresent: boolean) => void;
+    }, any, any>> | undefined)[] | undefined;
+    renderColorAxis(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderYAxis(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderCumulative(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderTrendline(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderStacked(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    renderColor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | undefined;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}