@mwater/visualization 5.1.0 → 5.3.0

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

@@ -4,23 +4,18 @@ import { DataSource, Schema } from "@mwater/expressions";
 import { LayeredChartDesign } from "./LayeredChartDesign";
 import { WidgetDataSource } from "../../WidgetDataSource";
 import { JsonQLFilter } from "../../..";
+import LayeredChartViewComponent from "./LayeredChartViewComponent";
+import LayeredChartDesignerComponent from "./LayeredChartDesignerComponent";
 export default class LayeredChart extends Chart {
     cleanDesign(design: LayeredChartDesign, schema: Schema): LayeredChartDesign;
     validateDesign(design: LayeredChartDesign, schema: Schema): string | null | undefined;
     isEmpty(design: any): boolean;
-    createDesignerElement(options: any): React.FunctionComponentElement<{
-        schema: any;
-        dataSource: any;
-        design: LayeredChartDesign;
-        filters: any;
-        onDesignChange: (design: any) => any;
-    }>;
+    createDesignerElement(options: any): React.CElement<import("./LayeredChartDesignerComponent").LayeredChartDesignerComponentProps, LayeredChartDesignerComponent>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
-    createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createViewElement(options: ChartCreateViewElementOptions): React.CElement<any, LayeredChartViewComponent>;
     createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): {
         label: string;
-        icon: string;
-        onClick: () => void;
+        onClick: () => void | AbortController | undefined;
     }[];
     createDataTable(design: LayeredChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any[][];
     getFilterableTables(design: LayeredChartDesign, schema: Schema): string[];

package/lib/widgets/charts/layered/LayeredChart.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 async_1 = __importDefault(require("async"));
 const immer_1 = __importDefault(require("immer"));
 const immer_2 = require("immer");
@@ -39,6 +38,8 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const LayeredChartSvgFileSaver_1 = __importDefault(require("./LayeredChartSvgFileSaver"));
 const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
 const TextWidget_1 = __importDefault(require("../../text/TextWidget"));
+const LayeredChartViewComponent_1 = __importDefault(require("./LayeredChartViewComponent"));
+const LayeredChartDesignerComponent_1 = __importDefault(require("./LayeredChartDesignerComponent"));
 // See LayeredChart Design.md for the design
 class LayeredChart extends Chart_1.default {
     cleanDesign(design, schema) {
@@ -151,7 +152,6 @@ class LayeredChart extends Chart_1.default {
     //   filters: array of filters
     createDesignerElement(options) {
         // Require here to prevent server require problems
-        const LayeredChartDesignerComponent = require("./LayeredChartDesignerComponent").default;
         const props = {
             schema: options.schema,
             dataSource: options.dataSource,
@@ -163,7 +163,7 @@ class LayeredChart extends Chart_1.default {
                 return options.onDesignChange(design);
             }
         };
-        return react_1.default.createElement(LayeredChartDesignerComponent, props);
+        return react_1.default.createElement(LayeredChartDesignerComponent_1.default, props);
     }
     // Get data for the chart asynchronously
     // design: design of the chart
@@ -212,7 +212,6 @@ class LayeredChart extends Chart_1.default {
     //   scope: current scope of the view element
     //   onScopeChange: called when scope changes with new scope
     createViewElement(options) {
-        const LayeredChartViewComponent = require("./LayeredChartViewComponent").default;
         // Create chart
         const props = {
             schema: options.schema,
@@ -225,7 +224,7 @@ class LayeredChart extends Chart_1.default {
             scope: options.scope,
             onScopeChange: options.onScopeChange
         };
-        return react_1.default.createElement(LayeredChartViewComponent, props);
+        return react_1.default.createElement(LayeredChartViewComponent_1.default, props);
     }
     createDropdownItems(design, schema, widgetDataSource, filters) {
         // TODO validate design before allowing save
@@ -245,8 +244,8 @@ class LayeredChart extends Chart_1.default {
             return [];
         }
         return [
-            { label: "Save as SVG", icon: "picture", onClick: save.bind(null, "svg") },
-            { label: "Save as PNG", icon: "camera", onClick: save.bind(null, "png") }
+            { label: "Save as SVG", onClick: save.bind(null, "svg") },
+            { label: "Save as PNG", onClick: save.bind(null, "png") }
         ];
     }
     createDataTable(design, schema, dataSource, data, locale) {

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

@@ -17,6 +17,8 @@ interface C3Data {
     columns: PrimitiveArray[];
     xAxisType?: "category" | "indexed" | "log" | "timeseries";
     xAxisTickFit?: boolean;
+    /** Whether to allow multiline x axis tick labels (default true) */
+    xAxisTickMultiline?: boolean;
     xs?: {
         [key: string]: string;
     };
@@ -35,8 +37,8 @@ interface C3Data {
     titleText?: string;
     legendHide?: boolean;
     /**
-       * Set custom data name.
-       */
+     * Set custom data name.
+     */
     names?: {
         [key: string]: string;
     };

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

@@ -41,13 +41,13 @@ const chartTypes = {
     scatter: billboard_js_1.scatter,
     area: billboard_js_1.area,
     pie: billboard_js_1.pie,
-    donut: billboard_js_1.donut,
+    donut: billboard_js_1.donut
 };
 const commaFormatter = d3Format.format(",");
 const compactFormatter = (d) => {
     // Only if large, otherwise use standard formatting
     if (Math.abs(d) > 999) {
-        return d3Format.format("~s")(d).replace('G', 'B');
+        return d3Format.format("~s")(d).replace("G", "B");
     }
     else {
         return commaFormatter(d);
@@ -240,7 +240,11 @@ class LayeredChartCompiler {
             },
             // Hide if one layer with no color axis
             legend: {
-                hide: options.design.layers.length === 1 && !options.design.layers[0].axes.color ? true : c3Data.legendHide
+                hide: options.design.layers.length === 1 && !options.design.layers[0].axes.color
+                    ? true
+                    : options.design.hideLegend === true
+                        ? true
+                        : c3Data.legendHide
             },
             grid: { focus: { show: false } },
             axis: {
@@ -250,7 +254,12 @@ class LayeredChartCompiler {
                         text: cleanString(c3Data.xAxisLabelText),
                         position: options.design.transpose ? "outer-middle" : "outer-center"
                     },
-                    tick: { fit: c3Data.xAxisTickFit }
+                    tick: {
+                        multiline: options.design.xAxisTickMultiline,
+                        culling: false,
+                        fit: c3Data.xAxisTickFit
+                    },
+                    clipPath: false
                 },
                 y: {
                     label: {
@@ -291,14 +300,15 @@ class LayeredChartCompiler {
                 },
                 expand: false // Don't expand/contract
             },
-            transition: { duration: 0 } // Transitions interfere with scoping
+            transition: { duration: 0 }, // Transitions interfere with scoping
+            // padding: !isPolar ? { mode: "fit" } : undefined
         };
         // && (options.design.type === "pie" || options.design.type === "donut")
         if (options.design.labels) {
             // same color values gets hidden!! https://github.com/naver/billboard.js/issues/871
             chartDesign.data.labels = {
                 colors: chartDesign.data.columns.reduce((a, c) => {
-                    a[c[0]] = '#000';
+                    a[c[0]] = "#000";
                     return a;
                 }, {})
             };
@@ -307,7 +317,7 @@ class LayeredChartCompiler {
                     ...chartDesign.data.labels,
                     position: {
                         y: 15
-                    }, // TODO why does this not type correctly?
+                    } // TODO why does this not type correctly?
                 };
             }
         }
@@ -340,7 +350,7 @@ class LayeredChartCompiler {
         }
         if (options.design.yThresholds) {
             chartDesign.grid.y = {
-                lines: lodash_1.default.map(options.design.yThresholds, (t) => ({
+                lines: lodash_1.default.map(options.design.yThresholds, t => ({
                     value: t.value,
                     text: t.label
                 }))
@@ -355,7 +365,7 @@ class LayeredChartCompiler {
     }
     isCategoricalX(design) {
         // Check if categorical x axis (bar charts always are)
-        let categoricalX = design.type === "bar" || lodash_1.default.any(design.layers, (l) => l.type === "bar");
+        let categoricalX = design.type === "bar" || lodash_1.default.any(design.layers, l => l.type === "bar");
         // Check if x axis is categorical type
         const xType = this.axisBuilder.getAxisType(design.layers[0].axes.x);
         if (["enum", "text", "boolean"].includes(xType || "")) {
@@ -371,7 +381,7 @@ class LayeredChartCompiler {
     // Outputs: columns, types, names, colors. Also dataMap which is a map of "layername:index" to { layerIndex, row }
     compileData(design, data, locale) {
         // If polar chart (no x axis)
-        if (["pie", "donut"].includes(design.type) || lodash_1.default.any(design.layers, (l) => ["pie", "donut"].includes(l.type))) {
+        if (["pie", "donut"].includes(design.type) || lodash_1.default.any(design.layers, l => ["pie", "donut"].includes(l.type))) {
             return this.compileDataPolar(design, data, locale);
         }
         if (this.isCategoricalX(design)) {
@@ -400,7 +410,7 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
                 // Sort by category order
-                layerData = lodash_1.default.sortBy(layerData, (row) => categoryOrder[row.color]);
+                layerData = lodash_1.default.sortBy(layerData, row => categoryOrder[row.color]);
                 // Create a series for each row
                 lodash_1.default.each(layerData, (row, rowIndex) => {
                     // Skip if value excluded
@@ -487,7 +497,7 @@ class LayeredChartCompiler {
                 layerData = this.makeRowsCumulative(layerData);
             }
             // Remove excluded values
-            layerData = lodash_1.default.filter(layerData, (row) => !lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x));
+            layerData = lodash_1.default.filter(layerData, row => !lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x));
             // If has color axis
             if (layer.axes.color) {
                 // Create a series for each color value
@@ -498,11 +508,11 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
                 // Sort
-                colorValues = lodash_1.default.sortBy(colorValues, (v) => categoryOrder[v]);
+                colorValues = lodash_1.default.sortBy(colorValues, v => categoryOrder[v]);
                 // Exclude excluded ones
                 colorValues = lodash_1.default.difference(colorValues, layer.axes.color.excludedValues || []);
                 // For each color value
-                lodash_1.default.each(colorValues, (colorValue) => {
+                lodash_1.default.each(colorValues, colorValue => {
                     // One series for x values, one for y
                     const seriesX = `${layerIndex}:${colorValue}:x`;
                     const seriesY = `${layerIndex}:${colorValue}:y`;
@@ -614,7 +624,7 @@ class LayeredChartCompiler {
             }
             for (var x of xs) {
                 // Find existing row
-                const existingRow = lodash_1.default.find(flatRows, (r) => r.x === x && r.color === row.color);
+                const existingRow = lodash_1.default.find(flatRows, r => r.x === x && r.color === row.color);
                 if (existingRow) {
                     existingRow.y += row.y;
                 }
@@ -651,11 +661,14 @@ class LayeredChartCompiler {
             return (xValues = lodash_1.default.union(xValues, lodash_1.default.uniq(lodash_1.default.pluck(layerData, "x"))));
         });
         // Categories will be in form [{ value, label }]
-        let categories = this.axisBuilder.getCategories(xAxis, xValues, { locale, onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent });
+        let categories = this.axisBuilder.getCategories(xAxis, xValues, {
+            locale,
+            onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent
+        });
         // Get indexed ordering of categories (lookup from value to index) without removing excluded values
         const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
         // Exclude excluded values
-        categories = lodash_1.default.filter(categories, (category) => !lodash_1.default.includes(xAxis.excludedValues || [], category.value));
+        categories = lodash_1.default.filter(categories, category => !lodash_1.default.includes(xAxis.excludedValues || [], category.value));
         // Limit categories to prevent crashes in C3 (https://github.com/mWater/mwater-visualization/issues/272)
         if (xType !== "enumset") {
             // Take last ones to make dates prettier (enough to show all weeks)
@@ -665,7 +678,7 @@ class LayeredChartCompiler {
         // Create map of category value to index
         const categoryMap = lodash_1.default.object(lodash_1.default.map(categories, (c, i) => [c.value, i]));
         // Create common x series
-        columns.push(["x"].concat(lodash_1.default.map(categories, (category) => this.axisBuilder.formatCategory(xAxis, category))));
+        columns.push(["x"].concat(lodash_1.default.map(categories, category => this.axisBuilder.formatCategory(xAxis, category))));
         // For each layer
         lodash_1.default.each(design.layers, (layer, layerIndex) => {
             // Get data of layer
@@ -678,14 +691,14 @@ class LayeredChartCompiler {
                 layerData = this.flattenRowData(layerData);
             }
             // Reorder to category order for x-axis
-            layerData = lodash_1.default.sortBy(layerData, (row) => categoryOrder[row.x]);
+            layerData = lodash_1.default.sortBy(layerData, row => categoryOrder[row.x]);
             // Make rows cumulative
             if (layer.cumulative) {
                 layerData = this.makeRowsCumulative(layerData);
             }
             // Filter out categories that were removed
             if (xType !== "enumset") {
-                layerData = lodash_1.default.filter(layerData, (row) => categoryXs[row.x] != null);
+                layerData = lodash_1.default.filter(layerData, row => categoryXs[row.x] != null);
             }
             // If has color axis
             if (layer.axes.color) {
@@ -697,11 +710,11 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const colorCategoryOrder = lodash_1.default.zipObject(lodash_1.default.map(colorCategories, (c, i) => [c.value, i]));
                 // Sort
-                colorValues = lodash_1.default.sortBy(colorValues, (v) => colorCategoryOrder[v]);
+                colorValues = lodash_1.default.sortBy(colorValues, v => colorCategoryOrder[v]);
                 // Exclude excluded ones
                 colorValues = lodash_1.default.difference(colorValues, layer.axes.color.excludedValues || []);
                 if (colorValues.length > 0) {
-                    lodash_1.default.each(colorValues, (colorValue) => {
+                    lodash_1.default.each(colorValues, colorValue => {
                         // One series for y values
                         const series = `${layerIndex}:${colorValue}`;
                         // Get specific color if present
@@ -713,9 +726,9 @@ class LayeredChartCompiler {
                         // Get rows for this series
                         const rows = lodash_1.default.where(layerData, { color: colorValue });
                         // Create empty series
-                        const column = lodash_1.default.map(categories, (c) => null);
+                        const column = lodash_1.default.map(categories, c => null);
                         // Set rows
-                        lodash_1.default.each(rows, (row) => {
+                        lodash_1.default.each(rows, row => {
                             // Get index
                             const index = categoryMap[row.x];
                             if (index != null) {
@@ -742,7 +755,7 @@ class LayeredChartCompiler {
                 else {
                     //c3 acts funny when there is a split axis but no data
                     series = `${layerIndex}:dumm`;
-                    column = lodash_1.default.map(categories, (c) => null);
+                    column = lodash_1.default.map(categories, c => null);
                     columns.push([series].concat(column));
                     types[series] = this.getLayerType(design, layerIndex);
                     names[series] = this.axisBuilder.formatValue(layer.axes.color, null, locale, true);
@@ -754,9 +767,9 @@ class LayeredChartCompiler {
                 // One series for y
                 series = `${layerIndex}`;
                 // Create empty series
-                column = lodash_1.default.map(categories, (c) => null);
+                column = lodash_1.default.map(categories, c => null);
                 // Set rows
-                lodash_1.default.each(layerData, (row) => {
+                lodash_1.default.each(layerData, row => {
                     // Skip if value excluded
                     if (lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x)) {
                         return;
@@ -813,11 +826,11 @@ class LayeredChartCompiler {
                 const defaultStacked = layer.axes.color != null;
                 const stacked = layer.stacked != null ? layer.stacked : defaultStacked;
                 if (stacked) {
-                    groups.push(lodash_1.default.filter(lodash_1.default.keys(names), (series) => series.split(":")[0] === `${layerIndex}`));
+                    groups.push(lodash_1.default.filter(lodash_1.default.keys(names), series => series.split(":")[0] === `${layerIndex}`));
                 }
             }
             // Remove empty groups
-            groups = lodash_1.default.filter(groups, (g) => g.length > 1);
+            groups = lodash_1.default.filter(groups, g => g.length > 1);
         }
         // If proportional
         if (design.proportional) {
@@ -859,6 +872,7 @@ class LayeredChartCompiler {
             classes,
             xAxisType: "category",
             xAxisTickFit: xType !== "date",
+            xAxisTickMultiline: design.xAxisTickMultiline,
             xAxisLabelText: this.compileXAxisLabelText(design, locale),
             yAxisLabelText: this.compileYAxisLabelText(design, locale),
             titleText: this.compileTitleText(design, locale),
@@ -1072,14 +1086,14 @@ function cleanString(str) {
 function calculateLinearRegression(ys, xs) {
     // If xs are dates, convert to numbers
     if (lodash_1.default.isString(xs[0])) {
-        xs = lodash_1.default.map(xs, (x) => Date.parse(x));
+        xs = lodash_1.default.map(xs, x => Date.parse(x));
     }
     // Remove null ys
     const nonNullxs = lodash_1.default.filter(xs, (x, index) => ys[index] !== null);
     const nonNullys = lodash_1.default.filter(ys, (y, index) => ys[index] !== null);
     const n = nonNullys.length;
     const sumXY = lodash_1.default.sum(lodash_1.default.map(nonNullxs, (x, i) => x * nonNullys[i]));
-    const sumXX = lodash_1.default.sum(lodash_1.default.map(nonNullxs, (x) => x * x));
+    const sumXX = lodash_1.default.sum(lodash_1.default.map(nonNullxs, x => x * x));
     const sumX = lodash_1.default.sum(nonNullxs);
     const sumY = lodash_1.default.sum(nonNullys);
     // Calculate denominator
@@ -1088,5 +1102,5 @@ function calculateLinearRegression(ys, xs) {
     const slope = (n * sumXY - sumX * sumY) / den;
     // Calculate intercept
     const intercept = (sumY * sumXX - sumX * sumXY) / den;
-    return lodash_1.default.map(xs, (x) => x * slope + intercept);
+    return lodash_1.default.map(xs, x => x * slope + intercept);
 }

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

@@ -38,6 +38,10 @@ export interface LayeredChartDesign {
     yMin?: number;
     /** true to show popout lines for small values */
     popoutSmallValues?: boolean;
+    /** true to hide the legend */
+    hideLegend?: boolean;
+    /** Whether to allow multiline x axis tick labels (default true) */
+    xAxisTickMultiline?: boolean;
 }
 export interface LayeredChartDesignLayer {
     /** bar/line/spline/scatter/area/pie/donut (overrides main one) */

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

@@ -1,4 +1,5 @@
 import React from "react";
+import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import * as uiComponents from "../../../UIComponents";
 import { DataSource, Schema } from "@mwater/expressions";
 import { LayeredChartDesign } from "./LayeredChartDesign";
@@ -15,6 +16,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     updateDesign(changes: any): void;
     handleTypeChange: (type: any) => void;
     handleTransposeChange: (value: any) => void;
+    handleHideLegendChange: (value: any) => void;
     handleStackedChange: (value: any) => void;
     handleProportionalChange: (value: any) => void;
     handleLabelsChange: (value: any) => void;
@@ -31,7 +33,9 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     handleToggleYAxisLabelClick: (ev: any) => void;
     handleYMinChange: (yMin: any) => void;
     handleYMaxChange: (yMax: any) => void;
+    handleXAxisTickMultilineChange: (value: boolean) => void;
     renderLabels(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderChartOptions(): React.JSX.Element;
     renderType(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
     renderLayer: (index: any) => React.DetailedReactHTMLElement<{
         style: {
@@ -46,35 +50,5 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     }, 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>>;
+    render(): React.CElement<any, TabbedComponent>;
 }

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

@@ -52,6 +52,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     handleTransposeChange = (value) => {
         return this.updateDesign({ transpose: value });
     };
+    handleHideLegendChange = (value) => {
+        return this.updateDesign({ hideLegend: value });
+    };
     handleStackedChange = (value) => {
         return this.updateDesign({ stacked: value });
     };
@@ -106,6 +109,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     handleYMaxChange = (yMax) => {
         return this.updateDesign({ yMax });
     };
+    handleXAxisTickMultilineChange = (value) => {
+        this.updateDesign({ xAxisTickMultiline: value });
+    };
     renderLabels() {
         if (!this.props.design.type) {
             return;
@@ -133,6 +139,11 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                 : undefined)
             : undefined);
     }
+    renderChartOptions() {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "hideLegend", value: this.props.design.hideLegend, onChange: this.handleHideLegendChange }, "Hide legend"),
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "xAxisTickMultiline", value: this.props.design.xAxisTickMultiline ?? true, onChange: this.handleXAxisTickMultilineChange }, "Multiline X-Axis Labels")));
+    }
     renderType() {
         const chartTypes = [
             { id: "bar", name: "Bar", desc: "Best for most charts" },
@@ -150,7 +161,7 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
             editor: (onClose) => {
                 return R(uiComponents.OptionListComponent, {
                     hint: "Select a Chart Type",
-                    items: lodash_1.default.map(chartTypes, (ct) => ({
+                    items: lodash_1.default.map(chartTypes, ct => ({
                         name: ct.name,
                         desc: ct.desc,
                         onClick: () => {
@@ -208,7 +219,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                         { 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);
+            : 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
@@ -256,6 +269,11 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                 elem: R("div", null, R("br"), this.renderLabels())
             });
         }
+        tabs.push({
+            id: "options",
+            label: "Options",
+            elem: R("div", null, R("br"), this.renderChartOptions())
+        });
         return R(TabbedComponent_1.default, {
             initialTabId: "design",
             tabs
@@ -298,7 +316,7 @@ class ThresholdComponent extends react_1.default.Component {
             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 }))
+            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",

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

@@ -46,13 +46,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     }, 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;
+    renderXAxis(): (React.JSX.Element | null)[] | undefined;
     renderColorAxis(): React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement> | undefined;

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

@@ -214,7 +214,8 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
             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
+            }, "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")) : null,
+            react_1.default.createElement("br", null)
         ];
     }
     renderColorAxis() {

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { LayeredChartDesign } from "./LayeredChartDesign";
@@ -21,9 +20,7 @@ interface LayeredChartViewComponentState {
     footerHeight: any;
 }
 export default class LayeredChartViewComponent extends React.Component<LayeredChartViewComponentProps, LayeredChartViewComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     header: HTMLElement | null;
     footer: HTMLElement | null;
     constructor(props: any);