@mwater/visualization 5.1.0 → 5.3.0

package/lib/UIComponents.d.ts

@@ -3,6 +3,7 @@ import * as motion from "react-motion";
 export interface SectionComponentProps {
     icon?: string;
     label?: any;
+    required?: boolean;
 }
 export declare class SectionComponent extends React.Component<SectionComponentProps> {
     render(): React.DetailedReactHTMLElement<{
@@ -56,7 +57,7 @@ export interface ToggleEditComponentProps {
     initiallyOpen?: boolean;
     label: any;
     editor: any;
-    onRemove?: any;
+    onRemove?: () => void;
 }
 interface ToggleEditComponentState {
     open: any;
@@ -66,7 +67,6 @@ export declare class ToggleEditComponent extends React.Component<ToggleEditCompo
     close: () => void;
     open: () => void;
     handleToggle: () => void;
-    editorRef: (editorComp: any) => any;
     render(): React.CElement<any, SwitchViewComponent>;
 }
 export interface RadioToggleComponentProps {

package/lib/UIComponents.js

@@ -42,7 +42,7 @@ class SectionComponent extends react_1.default.Component {
             ? [R("i", { className: `fa ${this.props.icon}` }), " "]
             : undefined, this.props.icon && this.props.icon.match(/^glyphicon-/)
             ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
-            : undefined, this.props.label), R("div", { style: { marginLeft: 10 } }, this.props.children));
+            : undefined, this.props.label, this.props.required ? react_1.default.createElement("span", { style: { color: "red" } }, " *") : undefined), R("div", { style: { marginLeft: 10 } }, this.props.children));
     }
 }
 exports.SectionComponent = SectionComponent;
@@ -149,21 +149,13 @@ class ToggleEditComponent extends react_1.default.Component {
         this.state = { open: props.initiallyOpen || false };
     }
     close = () => {
-        // Save height of editor
-        if (this.editorComp) {
-            this.editorHeight = react_dom_1.default.findDOMNode(this.editorComp).clientHeight;
-        }
-        return this.setState({ open: false });
+        this.setState({ open: false });
     };
     open = () => {
-        return this.setState({ open: true });
+        this.setState({ open: true });
     };
     handleToggle = () => {
-        return this.setState({ open: !this.state.open });
-    };
-    // Save editor comp
-    editorRef = (editorComp) => {
-        return (this.editorComp = editorComp);
+        this.setState({ open: !this.state.open });
     };
     render() {
         let { editor } = this.props;

package/lib/axes/Axis.d.ts

@@ -4,35 +4,15 @@ import { Expr } from "@mwater/expressions";
 An axis is an expression with optional aggregation, transform and color mapping
 In ggplot2 parlance, an "aesthetic"
 
-It contains:
- expr: expression
- aggr: DEPRECATED: optional aggregation (e.g. sum)
- xform: optional transformation to be applied. object with `type` field. See below
- colorMap: optional array of color mappings. See below
- excludedValues: Array of post-xform values to exclude when displaying.
- format: optional d3-format format for numeric values. Default if null is ","
-
-## Xforms
-
-types:
-
-
 */
 export interface Axis {
+    /** Expression to be displayed on axis */
     expr: Expr;
-    /**
-     * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
-     * `date`: convert to complete date e.g. `2015-02-08`. type date
-     * `year`: year only e.g. `2015-01-01`. type date
-     * `yearmonth`: year and month only e.g. `2015-02-01`. type date
-     * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
-     * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
-     * `month`: month only e.g. `02`. type enum
-     * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
-     * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
-     * `floor`: convert to floor. type enum
+    /** Optional transformation to be applied. If a date is used, for example, it's generally
+     * better to use a transform to convert to a year or month rather than creating an expression.
      */
     xform?: AxisXform;
+    /** optional array of color mappings */
     colorMap?: ColorMap;
     /** optional array of category values which define the order in which categories should be rendered */
     drawOrder?: any[];
@@ -42,9 +22,11 @@ export interface Axis {
     };
     /** optional string for null category */
     nullLabel?: string;
+    /** Array of post-xform values to exclude when displaying. */
     excludedValues?: any[];
+    /** optional d3-format format for numeric values. Default if null is "," */
     format?: string;
-    /** @deprecated */
+    /** @deprecated optional aggregation (e.g. sum) */
     aggr?: string;
 }
 /**
@@ -63,6 +45,19 @@ export interface AxisCategory {
     value: any;
 }
 export interface AxisXform {
+    /**
+     * Type of transformation
+     * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+     * `date`: convert to complete date e.g. `2015-02-08`. type date
+     * `year`: year only e.g. `2015-01-01`. type date
+     * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+     * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+     * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+     * `month`: month only e.g. `02`. type enum
+     * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+     * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+     * `floor`: convert to floor. type enum
+     */
     type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor";
     numBins?: number;
     min?: number;

package/lib/axes/AxisBuilder.d.ts

@@ -53,10 +53,13 @@ export default class AxisBuilder {
          */
         onlyValuesPresent?: boolean;
     }): AxisCategory[];
-    getAxisType(axis: any): LiteralType | null;
-    isAxisAggr(axis: any): any;
-    doesAxisSupportCumulative(axis: any): boolean;
-    formatCategory(axis: any, category: any): any;
+    /**
+     * Get type of axis output
+     */
+    getAxisType(axis: Axis | null | undefined): LiteralType | null;
+    isAxisAggr(axis: Axis | null | undefined): string | boolean;
+    doesAxisSupportCumulative(axis: Axis): boolean;
+    formatCategory(axis: Axis, category: any): any;
     summarizeAxis(axis: Axis, locale?: string): string;
     formatValue(axis: Axis, value: any, locale?: string, legacyPercentFormat?: any): any;
     createValueFilter(axis: Axis, value: any): JsonQLExpr;

package/lib/axes/AxisBuilder.js

@@ -38,6 +38,7 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const immer_1 = __importDefault(require("immer"));
 const valueFormatter_1 = require("../valueFormatter");
+const dayjs_1 = __importDefault(require("../dayjs"));
 const xforms = [
     { type: "bin", input: "number", output: "enum" },
     { type: "ranges", input: "number", output: "enum" },
@@ -827,7 +828,7 @@ class AxisBuilder {
                 }
                 if (options.onlyValuesPresent) {
                     // Sort and take only present
-                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, moment_1.default)(value, "YYYY-MM-DD").format("ll") }));
+                    categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, valueFormatter_1.formatValue)("date", value, axis.format) }));
                     if (hasNone) {
                         categories.push(noneCategory);
                     }
@@ -837,12 +838,12 @@ class AxisBuilder {
                 min = values.sort()[0];
                 max = values.sort().slice(-1)[0];
                 // Use moment to get range
-                current = (0, moment_1.default)(min, "YYYY-MM-DD");
-                end = (0, moment_1.default)(max, "YYYY-MM-DD");
+                current = (0, dayjs_1.default)(min);
+                end = (0, dayjs_1.default)(max);
                 categories = [];
                 while (!current.isAfter(end)) {
-                    categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("ll") });
-                    current.add(1, "days");
+                    categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(axis.format ?? "ll") });
+                    current = current.add(1, "days");
                     if (categories.length >= 1000) {
                         break;
                     }
@@ -854,7 +855,9 @@ class AxisBuilder {
         }
         return [];
     }
-    // Get type of axis output
+    /**
+     * Get type of axis output
+     */
     getAxisType(axis) {
         if (!axis) {
             return null;
@@ -947,9 +950,10 @@ class AxisBuilder {
                 }
                 return R("div", null, lodash_1.default.map(value, (v, i) => R("div", { key: i }, v)));
             case "date":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("ll");
+                console.log(axis);
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
             case "datetime":
-                return (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                return (0, valueFormatter_1.formatValue)(type, value, axis.format);
         }
         return "" + value;
     }

package/lib/axes/AxisComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
 import { DataSource, LiteralType, Schema } from "@mwater/expressions";
@@ -15,7 +14,7 @@ export interface AxisComponentProps {
     /** Optional types to limit to */
     types?: LiteralType[];
     aggrNeed: "none" | "optional" | "required";
-    value?: Axis;
+    value?: Axis | null;
     onChange: (axis: Axis | null) => void;
     /** Makes this a required value */
     required?: boolean;
@@ -44,16 +43,14 @@ export default class AxisComponent extends AsyncLoadComponent<AxisComponentProps
         allowExcludedValues: boolean;
         autosetColors: boolean;
     };
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     isLoadNeeded(newProps: any, oldProps: any): boolean;
     load(props: any, prevProps: any, callback: any): any;
-    handleExprChange: (expr: any) => any;
-    handleFormatChange: (ev: any) => any;
-    handleXformTypeChange: (type: any) => any;
-    handleXformChange: (xform: any) => any;
+    handleExprChange: (expr: any) => void;
+    handleFormatChange: (ev: any) => void;
+    handleXformTypeChange: (type: any) => void;
+    handleXformChange: (xform: any) => void;
     cleanAxis(axis: any): Axis | null;
     renderXform(axis: any): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<ui.RadioToggleComponentProps, ui.RadioToggleComponent> | null;
     renderColorMap(axis: any): (React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<any, AxisColorEditorComponent>)[] | null;

package/lib/axes/AxisComponent.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
@@ -52,7 +51,7 @@ class AxisComponent extends AsyncLoadComponent_1.default {
         allowExcludedValues: false,
         autosetColors: true
     };
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {

package/lib/axes/ColorPaletteCollectionComponent.d.ts

@@ -1,17 +1,10 @@
 import React from "react";
-import { Axis, AxisCategory } from "./Axis";
+import { Axis, AxisCategory, ColorMap } from "./Axis";
 export interface ColorPaletteCollectionComponentProps {
-    onPaletteSelected: any;
     axis: Axis;
     categories: AxisCategory[];
-    onCancel: any;
-}
-export default class ColorPaletteCollectionComponent extends React.Component<ColorPaletteCollectionComponentProps> {
-    static palettes: {
-        type: string;
-        reversed: boolean;
-    }[];
-    onPaletteSelected: (index: any) => any;
-    renderCancel: () => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    onPaletteSelected: (colorMap: ColorMap) => void;
+    onCancel: () => void;
 }
+declare function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentProps): React.JSX.Element;
+export default ColorPaletteCollectionComponent;

package/lib/axes/ColorPaletteCollectionComponent.js

@@ -1,14 +1,37 @@
 "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 react_1 = __importStar(require("react"));
 const ColorSchemeFactory_1 = __importDefault(require("../ColorSchemeFactory"));
-class ColorPaletteCollectionComponent extends react_1.default.Component {
-    static palettes = [
+const CustomColorsContext_1 = require("../CustomColorsContext");
+function ColorPaletteCollectionComponent(props) {
+    const palettes = [
         { type: "schemeSet1", reversed: false },
         { type: "schemeSet2", reversed: false },
         { type: "schemeSet3", reversed: false },
@@ -72,59 +95,67 @@ class ColorPaletteCollectionComponent extends react_1.default.Component {
         { type: "interpolateRdYlGn", reversed: false },
         { type: "interpolateRdYlGn", reversed: true }
     ];
-    onPaletteSelected = (index) => {
-        // Generate color map
-        const scheme = ColorSchemeFactory_1.default.createColorScheme({
-            type: ColorPaletteCollectionComponent.palettes[index].type,
-            // Null doesn't count to length
-            number: lodash_1.default.any(this.props.categories, (c) => c.value == null)
-                ? this.props.categories.length - 1
-                : this.props.categories.length,
-            reversed: ColorPaletteCollectionComponent.palettes[index].reversed
+    // Get custom colors
+    const customColorsContext = (0, react_1.useContext)(CustomColorsContext_1.CustomColorsContext);
+    // Number of colors needed. Null doesn't count to length
+    const numColors = props.categories.filter((c) => c.value != null).length;
+    if (customColorsContext && customColorsContext.customColors.filter((c) => c != null).length > 0) {
+        const filteredCustomColors = customColorsContext.customColors.filter((c) => c != null);
+        const customPalettes = [];
+        for (let i = 0; i < filteredCustomColors.length; i += 6) {
+            const customPalette = filteredCustomColors.slice(i, i + 6);
+            customPalettes.push({ type: "custom", reversed: false, colors: customPalette });
+        }
+        palettes.unshift(...customPalettes);
+    }
+    function generatePaletteColors(palette, numColors) {
+        if (palette.type === "custom") {
+            return palette.colors;
+        }
+        return ColorSchemeFactory_1.default.createColorScheme({
+            type: palette.type,
+            number: numColors,
+            reversed: palette.reversed
         });
-        const colorMap = lodash_1.default.map(this.props.categories, (category, i) => ({
+    }
+    const onPaletteSelected = (index) => {
+        // Generate color map
+        const scheme = generatePaletteColors(palettes[index], Math.min(numColors, 6));
+        const colorMap = lodash_1.default.map(props.categories, (category, i) => ({
             value: category.value,
             color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
         }));
-        return this.props.onPaletteSelected(colorMap);
+        return props.onPaletteSelected(colorMap);
     };
-    renderCancel = () => {
-        if (this.props.axis.colorMap) {
-            return R("div", null, R("a", { className: "link-plain", onClick: this.props.onCancel, key: "cancel-customize" }, "Cancel"));
+    const renderCancel = () => {
+        if (props.axis.colorMap) {
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("a", { className: "link-plain", onClick: props.onCancel, key: "cancel-customize" }, "Cancel")));
         }
         return null;
     };
-    render() {
-        return R("div", null, R("p", null, "Please select a color scheme"), lodash_1.default.map(ColorPaletteCollectionComponent.palettes, (config, index) => {
-            return R(ColorPaletteComponent, {
-                key: index,
-                index,
-                colorSet: ColorSchemeFactory_1.default.createColorScheme({
-                    type: config.type,
-                    number: Math.min(this.props.categories.length - 1, 6),
-                    reversed: config.reversed
-                }),
-                onPaletteSelected: this.onPaletteSelected,
-                number: this.props.categories.length
-            });
-        }), this.renderCancel());
+    function renderPalette(palette, index) {
+        return (react_1.default.createElement(ColorPaletteComponent, { key: index, index: index, colorSet: generatePaletteColors(palette, 6), onPaletteSelected: onPaletteSelected }));
     }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("p", null, "Please select a color scheme"),
+        palettes.map((palette, index) => renderPalette(palette, index)),
+        renderCancel()));
 }
 exports.default = ColorPaletteCollectionComponent;
 class ColorPaletteComponent extends react_1.default.Component {
-    static defaultProps = { number: 6 };
     handleSelect = () => {
         return this.props.onPaletteSelected(this.props.index);
     };
     render() {
-        return R("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet.slice(0, this.props.number), (color, i) => {
+        return (react_1.default.createElement("div", { onClick: this.handleSelect, className: "axis-palette" }, lodash_1.default.map(this.props.colorSet, (color, i) => {
             const cellStyle = {
                 display: "inline-block",
                 height: 20,
                 width: 20,
                 backgroundColor: color
             };
-            return R("div", { style: cellStyle, key: i }, " ");
-        }));
+            return react_1.default.createElement("div", { style: cellStyle, key: i }, " ");
+        })));
     }
 }

package/lib/dashboards/DashboardComponent.d.ts

@@ -1,8 +1,7 @@
-import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import UndoStack from "../UndoStack";
-import DashboardViewComponent from "./DashboardViewComponent";
+import { DashboardViewComponentHandle } from "./DashboardViewComponent";
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent";
 import SettingsModalComponent from "./SettingsModalComponent";
 import { DashboardDesign } from "./DashboardDesign";
@@ -51,18 +50,12 @@ export interface DashboardComponentState {
  * Manages undo stack and quickfilter value
  */
 export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
-    dashboardView: DashboardViewComponent | null;
+    dashboardView: DashboardViewComponentHandle | null;
     static defaultProps: {
         printScaling: boolean;
     };
-    static childContextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
     settings: SettingsModalComponent | null;
-    getChildContext(): {
-        locale: string | undefined;
-    };
-    constructor(props: any);
+    constructor(props: DashboardComponentProps);
     getQuickfilterValues: () => any[];
     componentWillReceiveProps(nextProps: any): void;
     handlePrint: () => void;
@@ -76,18 +69,12 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     handleStyleChange: (style: any) => void;
     handleDesignChange: (design: any) => void;
     handleShowQuickfilters: () => void;
-    handleUpgrade: () => void;
     getCompiledFilters(): JsonQLFilter[];
     renderEditingSwitch(): React.DetailedReactHTMLElement<{
         key: string;
         className: string;
         onClick: () => void;
     }, HTMLElement>;
-    renderStyleItem(style: any): React.DetailedReactHTMLElement<{
-        key: any;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement>;
     renderStyle(): React.DetailedReactHTMLElement<{
         type: string;
         key: string;
@@ -102,6 +89,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         };
     }, HTMLElement>;
     renderQuickfilter(): React.CElement<import("../quickfilter/QuickfiltersComponent").QuickfiltersComponentProps, QuickfiltersComponent>;
-    refDashboardView: (el: any) => any;
+    refDashboardView: (el: any) => void;
     render(): React.JSX.Element;
 }

package/lib/dashboards/DashboardComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -37,7 +36,6 @@ const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/Quickfil
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const SettingsModalComponent_1 = __importDefault(require("./SettingsModalComponent"));
 const LayoutManager_1 = __importDefault(require("../layouts/LayoutManager"));
-const DashboardUpgrader_1 = __importDefault(require("./DashboardUpgrader"));
 const LayoutOptionsComponent_1 = require("./LayoutOptionsComponent");
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
 const layoutOptions_1 = require("./layoutOptions");
@@ -48,22 +46,13 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 class DashboardComponent extends react_1.default.Component {
     dashboardView;
     static defaultProps = { printScaling: true };
-    static childContextTypes = {
-        locale: prop_types_1.default.string,
-    };
     settings;
-    getChildContext() {
-        return {
-            // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
-            locale: this.props.design.locale,
-        };
-    }
     constructor(props) {
         super(props);
         const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
         this.state = {
             undoStack: new UndoStack_1.default().push(props.design),
-            quickfiltersValues: props.quickfiltersValues,
+            quickfiltersValues: props.quickfiltersValues || null,
             editing: LayoutManager_1.default.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
                 props.onDesignChange != null,
             layoutOptionsOpen: false,
@@ -93,7 +82,7 @@ class DashboardComponent extends react_1.default.Component {
         }
     }
     handlePrint = () => {
-        this.dashboardView.print();
+        this.dashboardView?.print();
     };
     handleUndo = () => {
         const undoStack = this.state.undoStack.undo();
@@ -139,14 +128,6 @@ class DashboardComponent extends react_1.default.Component {
     handleShowQuickfilters = () => {
         return this.setState({ hideQuickfilters: false });
     };
-    handleUpgrade = () => {
-        if (!confirm("This will upgrade your dashboard to the new kind with enhanced features. You can click Undo immediately afterwards if you wish to revert it. Continue?")) {
-            return;
-        }
-        const design = new DashboardUpgrader_1.default().upgrade(this.props.design);
-        this.props.onDesignChange(design);
-        alert("Upgrade completed. Some widgets may need to be resized. Click Undo to revert back to old dashboard style.");
-    };
     // Get filters from props filters combined with dashboard filters
     getCompiledFilters() {
         let compiledFilters = DashboardUtils.getCompiledFilters(this.props.design, this.props.schema, DashboardUtils.getFilterableTables(this.props.design, this.props.schema));
@@ -160,41 +141,11 @@ class DashboardComponent extends react_1.default.Component {
             onClick: this.handleToggleEditing
         }, R("span", { className: "fas fa-pencil-alt" }), this.state.editing ? " Editing" : " Edit");
     }
-    renderStyleItem(style) {
-        const isActive = (this.props.design.style || "default") === style;
-        const content = (() => {
-            switch (style) {
-                case "default":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Classic Dashboard"),
-                        R("p", { key: "description", className: "" }, "Ideal for data display with minimal text")
-                    ];
-                case "greybg":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Framed Dashboard"),
-                        R("p", { key: "description", className: "" }, "Each widget is white on a grey background")
-                    ];
-                case "story":
-                    return [
-                        R("h4", { key: "name", className: "list-group-item-heading" }, "Story"),
-                        R("p", { key: "description", className: "" }, "Ideal for data-driven storytelling with lots of text. Responsive and mobile-friendly")
-                    ];
-            }
-            return null;
-        })();
-        return R("a", {
-            key: style,
-            className: `list-group-item ${isActive ? "active" : ""}`,
-            onClick: this.handleStyleChange.bind(null, style)
-        }, content);
-    }
     renderStyle() {
         return R("button", { type: "button", key: "style", className: "btn btn-link btn-sm", onClick: this.handleOpenLayoutOptions }, R("span", { className: "fa fa-mobile" }), R("span", { className: "hide-600px" }, " Layout "));
     }
     renderActionLinks() {
-        return R("div", null, this.state.editing && (this.props.design.layout || "grid") === "grid"
-            ? R("a", { key: "upgrade", className: "btn btn-info btn-sm", onClick: this.handleUpgrade }, "Upgrade Dashboard...")
-            : undefined, this.state.editing
+        return R("div", null, this.state.editing
             ? [
                 R("a", {
                     key: "undo",
@@ -232,11 +183,12 @@ class DashboardComponent extends react_1.default.Component {
             locks: this.props.quickfilterLocks,
             filters: this.getCompiledFilters(),
             hideTopBorder: this.props.hideTitleBar,
-            onHide: () => this.setState({ hideQuickfilters: true })
+            // Don't hide if title bar is hidden as it can't be shown again
+            onHide: () => !this.props.hideTitleBar ? this.setState({ hideQuickfilters: true }) : undefined
         });
     }
     refDashboardView = (el) => {
-        return (this.dashboardView = el);
+        this.dashboardView = el;
     };
     render() {
         let filters = this.props.filters || [];
@@ -268,19 +220,20 @@ class DashboardComponent extends react_1.default.Component {
         });
         // Pass active tables down to table select components so they can present a shorter list
         return react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: DashboardUtils.getFilterableTables(this.props.design, this.props.schema) },
-            react_1.default.createElement("div", { style: {
-                    display: "grid",
-                    gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-                    height: "100%"
-                } },
-                !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
-                react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
-                dashboardView,
-                this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
-                        this.settings = c;
-                    } })),
-                this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10 },
-                    react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, onClose: () => this.setState({ layoutOptionsOpen: false }), dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() })))));
+            react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale ?? "en" },
+                react_1.default.createElement("div", { style: {
+                        display: "grid",
+                        gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                        height: "100%"
+                    } },
+                    !this.props.hideTitleBar ? this.renderTitleBar() : undefined,
+                    react_1.default.createElement("div", null, !this.state.hideQuickfilters ? this.renderQuickfilter() : undefined),
+                    dashboardView,
+                    this.props.onDesignChange != null && (react_1.default.createElement(SettingsModalComponent_1.default, { onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource, ref: (c) => {
+                            this.settings = c;
+                        } })),
+                    this.state.layoutOptionsOpen && (react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, outerPadding: 10, innerPadding: 10, onRequestClose: () => this.setState({ layoutOptionsOpen: false }) },
+                        react_1.default.createElement(LayoutOptionsComponent_1.LayoutOptionsComponent, { design: this.props.design, onDesignChange: this.props.onDesignChange, dashboardView: readonlyDashboardView, quickfiltersView: this.renderQuickfilter() }))))));
     }
 }
 exports.default = DashboardComponent;