@mwater/visualization 5.2.0 → 5.3.1

package/lib/widgets/charts/ChartWidget.js

@@ -1,41 +1,12 @@
 "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 react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const Widget_1 = __importDefault(require("./../Widget"));
-const DropdownWidgetComponent_1 = __importDefault(require("./../DropdownWidgetComponent"));
-const CsvBuilder_1 = __importDefault(require("./../../CsvBuilder"));
-const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
-const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
-const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
-const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const ChartWidgetComponent_1 = require("./ChartWidgetComponent");
 /** A widget which is a chart */
 class ChartWidget extends Widget_1.default {
     chart;
@@ -57,7 +28,7 @@ class ChartWidget extends Widget_1.default {
     //  height: height in pixels on screen
     //  onRowClick: Called with (tableId, rowId) when item is clicked
     createViewElement(options) {
-        return R(ChartWidgetComponent, {
+        return R(ChartWidgetComponent_1.ChartWidgetComponent, {
             chart: this.chart,
             design: options.design,
             schema: options.schema,
@@ -69,7 +40,8 @@ class ChartWidget extends Widget_1.default {
             onDesignChange: options.onDesignChange,
             width: options.width,
             height: options.height,
-            onRowClick: options.onRowClick
+            onRowClick: options.onRowClick,
+            refreshKey: options.refreshKey
         });
     }
     // Get the data that the widget needs. This will be called on the server, typically.
@@ -95,154 +67,3 @@ class ChartWidget extends Widget_1.default {
     }
 }
 exports.default = ChartWidget;
-// Complete chart widget
-class ChartWidgetComponent extends react_1.default.PureComponent {
-    static contextTypes = { locale: prop_types_1.default.string };
-    constructor(props) {
-        super(props);
-        this.state = {
-            // Design that is being edited. Change is propagated on closing window
-            editDesign: null
-        };
-    }
-    // Saves a csv file to disk
-    handleSaveCsvFile = () => {
-        // Get the data
-        return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
-            if (err) {
-                return alert("Failed to get data: " + err.message);
-            }
-            // Create data table
-            const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context.locale);
-            if (!table) {
-                return;
-            }
-            // Convert to csv
-            let csv = new CsvBuilder_1.default().build(table);
-            // Add BOM
-            csv = "\uFEFF" + csv;
-            // Make a blob and save
-            const blob = new Blob([csv], { type: "text/csv" });
-            // Require at use as causes server problems
-            const FileSaver = require("file-saver");
-            return FileSaver.saveAs(blob, "Exported Data.csv");
-        });
-    };
-    handleStartEditing = () => {
-        // Can't edit if already editing
-        if (this.state.editDesign) {
-            return;
-        }
-        this.setState({ editDesign: this.props.design });
-    };
-    handleEndEditing = () => {
-        this.props.onDesignChange(this.state.editDesign);
-        this.setState({ editDesign: null });
-    };
-    handleCancelEditing = () => {
-        this.setState({ editDesign: null });
-    };
-    handleEditDesignChange = (design) => {
-        this.setState({ editDesign: design });
-    };
-    renderChart(design, onDesignChange, width, height) {
-        return R(ChartViewComponent_1.default, {
-            chart: this.props.chart,
-            design,
-            onDesignChange,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            widgetDataSource: this.props.widgetDataSource,
-            scope: this.props.scope,
-            filters: this.props.filters,
-            width,
-            height,
-            onScopeChange: this.props.onScopeChange,
-            onRowClick: this.props.onRowClick
-        });
-    }
-    renderEditor() {
-        if (!this.state.editDesign) {
-            return null;
-        }
-        // Create editor
-        const editor = this.props.chart.createDesignerElement({
-            schema: this.props.schema,
-            filters: this.props.filters,
-            dataSource: this.props.dataSource,
-            design: this.state.editDesign,
-            onDesignChange: this.handleEditDesignChange
-        });
-        if (this.props.chart.hasDesignerPreview()) {
-            // Create chart (maxing out at half of width of screen)
-            const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width);
-            const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined;
-            const chart = this.renderChart(this.state.editDesign, (design) => this.setState({ editDesign: design }), chartWidth, chartHeight);
-            const content = R("div", { style: { height: "100%", width: "100%" } }, R("div", {
-                style: {
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    border: "solid 2px #EEE",
-                    borderRadius: 8,
-                    padding: 10,
-                    width: chartWidth + 20,
-                    height: chartHeight != null ? chartHeight + 20 : undefined,
-                    overflow: "hidden"
-                }
-            }, chart), R("div", { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } }, R("div", {
-                style: {
-                    width: "100%",
-                    height: "100%",
-                    overflowY: "auto",
-                    paddingLeft: 20,
-                    paddingRight: 20,
-                    borderLeft: "solid 3px #AAA"
-                }
-            }, editor)));
-            return R(ModalWindowComponent_1.default, {
-                isOpen: true,
-                onRequestClose: this.handleEndEditing
-            }, content);
-        }
-        else {
-            return R(ActionCancelModalComponent_1.default, {
-                size: "large",
-                onCancel: this.handleCancelEditing,
-                onAction: this.handleEndEditing
-            }, editor);
-        }
-    }
-    // Render a link to start editing
-    renderEditLink() {
-        return R("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing }, R(ui.Icon, { id: this.props.chart.getPlaceholderIcon() }));
-    }
-    render() {
-        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
-        // Determine if valid design
-        const validDesign = !this.props.chart.validateDesign(design, this.props.schema);
-        // Determine if empty
-        const emptyDesign = this.props.chart.isEmpty(design);
-        // Create dropdown items
-        const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
-        if (validDesign) {
-            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
-        }
-        if (this.props.onDesignChange != null) {
-            dropdownItems.unshift({
-                label: this.props.chart.getEditLabel(),
-                icon: "pencil",
-                onClick: this.handleStartEditing
-            });
-        }
-        // Wrap in a simple widget
-        return R("div", {
-            onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined,
-            style: { position: "relative", width: this.props.width }
-        }, this.props.onDesignChange != null ? this.renderEditor() : undefined, react_1.default.createElement(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)), (emptyDesign || !validDesign) && this.props.onDesignChange != null ? this.renderEditLink() : undefined);
-    }
-}

package/lib/widgets/charts/ChartWidgetComponent.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { WidgetDataSource } from "../WidgetDataSource";
+import Chart from "./Chart";
+import { JsonQLFilter } from "../../JsonQLFilter";
+export interface ChartWidgetComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    widgetDataSource: WidgetDataSource;
+    /** Chart object to use */
+    chart: Chart;
+    /** Design of chart */
+    design: any;
+    /** null/undefined for readonly */
+    onDesignChange?: any;
+    /** Width in pixels */
+    width: number;
+    /** Height, if a fixed height widget, or one that uses aspect ratio */
+    height?: number;
+    /** scope of the widget (when the widget self-selects a particular scope) */
+    scope?: any;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters: JsonQLFilter[];
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: any;
+    /** Called with (tableId, rowId) when item is clicked */
+    onRowClick?: any;
+    /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectMoveHandle?: any;
+    /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectResizeHandle?: any;
+    /** A key that changes when the widget should be refreshed */
+    refreshKey?: any;
+}
+export declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, {
+    editDesign: any;
+}> {
+    static contextType: React.Context<string>;
+    constructor(props: any);
+    handleSaveCsvFile: () => void | AbortController | undefined;
+    handleStartEditing: () => void;
+    handleEndEditing: () => void;
+    handleCancelEditing: () => void;
+    handleEditDesignChange: (design: any) => void;
+    renderChart(design: any, onDesignChange: any, width: any, height: any): React.JSX.Element;
+    renderEditor(): React.JSX.Element | null;
+    renderEditLink(message: string): React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/lib/widgets/charts/ChartWidgetComponent.js

@@ -0,0 +1,167 @@
+"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 });
+exports.ChartWidgetComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const DropdownWidgetComponent_1 = __importDefault(require("../DropdownWidgetComponent"));
+const CsvBuilder_1 = __importDefault(require("../../CsvBuilder"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const layoutOptions_1 = require("../../dashboards/layoutOptions");
+// Complete chart widget
+class ChartWidgetComponent extends react_1.default.PureComponent {
+    static contextType = contexts_1.LocaleContext;
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Design that is being edited. Change is propagated on closing window
+            editDesign: null
+        };
+    }
+    // Saves a csv file to disk
+    handleSaveCsvFile = () => {
+        // Get the data
+        return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
+            if (err) {
+                return alert("Failed to get data: " + err.message);
+            }
+            // Create data table
+            const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context);
+            if (!table) {
+                return;
+            }
+            // Convert to csv
+            let csv = new CsvBuilder_1.default().build(table);
+            // Add BOM
+            csv = "\uFEFF" + csv;
+            // Make a blob and save
+            const blob = new Blob([csv], { type: "text/csv" });
+            // Require at use as causes server problems
+            const FileSaver = require("file-saver");
+            return FileSaver.saveAs(blob, "Exported Data.csv");
+        });
+    };
+    handleStartEditing = () => {
+        // Can't edit if already editing
+        if (this.state.editDesign) {
+            return;
+        }
+        this.setState({ editDesign: this.props.design });
+    };
+    handleEndEditing = () => {
+        this.props.onDesignChange(this.state.editDesign);
+        this.setState({ editDesign: null });
+    };
+    handleCancelEditing = () => {
+        this.setState({ editDesign: null });
+    };
+    handleEditDesignChange = (design) => {
+        this.setState({ editDesign: design });
+    };
+    renderChart(design, onDesignChange, width, height) {
+        return react_1.default.createElement(ChartViewComponent_1.default, { chart: this.props.chart, design: design, onDesignChange: onDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, widgetDataSource: this.props.widgetDataSource, scope: this.props.scope, filters: this.props.filters, width: width, height: height, onScopeChange: this.props.onScopeChange, onRowClick: this.props.onRowClick, refreshKey: this.props.refreshKey });
+    }
+    renderEditor() {
+        if (!this.state.editDesign) {
+            return null;
+        }
+        // Create editor
+        const editor = this.props.chart.createDesignerElement({
+            schema: this.props.schema,
+            filters: this.props.filters,
+            dataSource: this.props.dataSource,
+            design: this.state.editDesign,
+            onDesignChange: this.handleEditDesignChange
+        });
+        if (this.props.chart.hasDesignerPreview()) {
+            // Create chart (maxing out at half of width of screen)
+            const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width);
+            const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined;
+            let chart = this.renderChart(this.state.editDesign, (design) => this.setState({ editDesign: design }), chartWidth, chartHeight);
+            const content = (react_1.default.createElement("div", { style: { height: "100%", width: "100%" } },
+                react_1.default.createElement(layoutOptions_1.BlocksLayoutOptionsContext.Consumer, null, blocksLayoutOptions => (react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: (0, layoutOptions_1.createDashboardStyles)("#chart-editor", blocksLayoutOptions || (0, layoutOptions_1.getDefaultLayoutOptions)()) } }))),
+                react_1.default.createElement("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        border: "solid 2px #EEE",
+                        borderRadius: 8,
+                        padding: 10,
+                        width: chartWidth + 20,
+                        height: chartHeight != null ? chartHeight + 20 : undefined,
+                        overflow: "hidden"
+                    }, id: "chart-editor" }, chart),
+                react_1.default.createElement("div", { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } },
+                    react_1.default.createElement("div", { style: {
+                            width: "100%",
+                            height: "100%",
+                            overflowY: "auto",
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            borderLeft: "solid 3px #AAA"
+                        } }, editor))));
+            return (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: this.handleEndEditing }, content));
+        }
+        else {
+            return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancelEditing, onAction: this.handleEndEditing }, editor));
+        }
+    }
+    // Render a link to start editing
+    renderEditLink(message) {
+        return (react_1.default.createElement("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing },
+            react_1.default.createElement(ui.Icon, { id: this.props.chart.getPlaceholderIcon() }),
+            react_1.default.createElement("div", { className: "mwater-visualization-widget-placeholder-message" }, message)));
+    }
+    render() {
+        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
+        // Determine if valid design
+        const designError = this.props.chart.validateDesign(design, this.props.schema);
+        // Determine if empty
+        const emptyDesign = this.props.chart.isEmpty(design);
+        // Create dropdown items
+        const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
+        if (!designError) {
+            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
+        }
+        if (this.props.onDesignChange != null) {
+            dropdownItems.unshift({
+                label: this.props.chart.getEditLabel(),
+                onClick: this.handleStartEditing
+            });
+        }
+        // Wrap in a simple widget
+        return (react_1.default.createElement("div", { onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined, style: { position: "relative", width: this.props.width } },
+            this.props.onDesignChange != null ? this.renderEditor() : undefined,
+            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)),
+            (emptyDesign || designError) && this.props.onDesignChange != null ? this.renderEditLink(designError || "") : undefined));
+    }
+}
+exports.ChartWidgetComponent = ChartWidgetComponent;

package/lib/widgets/charts/calendar/CalendarChartViewComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import AxisBuilder from "../../../axes/AxisBuilder";
 import { Schema } from "@mwater/expressions";
@@ -30,9 +29,7 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
         monthsStrokeWidth: number;
         highlightCellFillColor: string;
     };
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     axisBuilder: AxisBuilder;
     reloading: boolean;
     chart_container: any;

package/lib/widgets/charts/calendar/CalendarChartViewComponent.js

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jquery_1 = __importDefault(require("jquery"));
-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 moment_1 = __importDefault(require("moment"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const d3 = __importStar(require("d3"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Require d3-tip to use it
 const d3_tip_1 = __importDefault(require("d3-tip"));
 // creates a d3 calendar visualization
@@ -43,7 +43,7 @@ class CalendarChartViewComponent extends react_1.default.Component {
         monthsStrokeWidth: 1,
         highlightCellFillColor: "#000000"
     };
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     axisBuilder;
     reloading;
     chart_container;
@@ -91,9 +91,9 @@ class CalendarChartViewComponent extends react_1.default.Component {
             return;
         }
         const scopeData = {
-            name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context.locale) +
+            name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context) +
                 " is " +
-                this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context.locale),
+                this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context),
             filter: {
                 jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis, data),
                 table: this.props.design.table

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;
     };