@mwater/visualization 5.3.2 → 5.4.0

package/lib/dashboards/LayoutOptionsComponent.js

@@ -1,11 +1,34 @@
 "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.LayoutOptionsComponent = void 0;
+exports.LayoutOptionsComponent = LayoutOptionsComponent;
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_2 = require("react");
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const layoutOptions_1 = require("./layoutOptions");
@@ -13,12 +36,6 @@ const ColorComponent_1 = __importDefault(require("../ColorComponent"));
 const FontStyleEditor_1 = require("./FontStyleEditor");
 const immer_1 = __importDefault(require("immer"));
 const file_saver_1 = __importDefault(require("file-saver"));
-const sizeOptions = [
-    { value: { width: 360, height: 640 }, label: "Phone (360x640)" },
-    { value: { width: 768, height: 1024 }, label: "Tablet (768x1024)" },
-    { value: { width: 1000, height: 800 }, label: "Laptop (1000x800)" },
-    { value: { width: 1280, height: 1024 }, label: "Desktop (1280x1024)" }
-];
 function LayoutOptionsComponent(props) {
     const [previewSize, setPreviewSize] = (0, react_2.useState)(2);
     const layoutOptions = (0, layoutOptions_1.getLayoutOptions)(props.design);
@@ -26,21 +43,29 @@ function LayoutOptionsComponent(props) {
         props.onDesignChange({ ...props.design, layoutOptions });
     }
     const isCustomized = !lodash_1.default.isEqual(layoutOptions, (0, layoutOptions_1.getDefaultLayoutOptions)(props.design.style));
+    const sizeOptions = (0, react_1.useMemo)(() => [
+        { value: { width: 360, height: 640 }, label: T `Phone (360x640)` },
+        { value: { width: 768, height: 1024 }, label: T `Tablet (768x1024)` },
+        { value: { width: 1000, height: 800 }, label: T `Laptop (1000x800)` },
+        { value: { width: 1280, height: 1024 }, label: T `Desktop (1280x1024)` }
+    ], []);
     return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "360px 1fr", height: "100%" } },
         react_1.default.createElement("div", { style: { padding: "5px 10px 5px 0px", gridRow: "1 / 3", overflowY: "auto" } },
-            react_1.default.createElement("h5", null, "Theme"),
+            react_1.default.createElement("h5", null, T `Theme`),
             react_1.default.createElement(ThemeToggle, { theme: props.design.style, onChange: (theme) => {
                     if (isCustomized) {
-                        if (!confirm("Are you sure you want to change the theme? Your customizations will be lost."))
+                        if (!confirm(T `Are you sure you want to change the theme? Your customizations will be lost.`))
                             return;
                     }
                     props.onDesignChange({ ...props.design, style: theme, layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)(theme) });
                 }, isCustomized: isCustomized }),
             react_1.default.createElement("br", null),
-            react_1.default.createElement(bootstrap_1.CollapsibleSection, { label: react_1.default.createElement("h5", { style: { display: "inline-block" } }, "Customize Layout"), initiallyOpen: isCustomized },
+            react_1.default.createElement(bootstrap_1.CollapsibleSection, { label: react_1.default.createElement("h5", { style: { display: "inline-block" } }, T `Customize Layout`), initiallyOpen: isCustomized },
                 react_1.default.createElement(CustomizeLayout, { layoutOptions: layoutOptions, onLayoutOptionsChange: setLayoutOptions }))),
         react_1.default.createElement("div", { style: { textAlign: "center", padding: 3 } },
-            react_1.default.createElement("span", { className: "text-muted" }, "Preview As:\u00A0"),
+            react_1.default.createElement("span", { className: "text-muted" },
+                T `Preview As:`,
+                "\u00A0"),
             react_1.default.createElement(bootstrap_1.Toggle, { value: previewSize, onChange: setPreviewSize, size: "xs", options: sizeOptions.map((so, index) => ({ value: index, label: so.label })) })),
         react_1.default.createElement("div", { style: { overflow: "auto" } },
             react_1.default.createElement("div", { style: {
@@ -61,29 +86,28 @@ function LayoutOptionsComponent(props) {
                 react_1.default.createElement("div", { style: { backgroundColor: "#888" } }),
                 react_1.default.createElement("div", { style: { backgroundColor: "#888", gridColumn: "1 / 4" } })))));
 }
-exports.LayoutOptionsComponent = LayoutOptionsComponent;
 function ThemeToggle(props) {
     function renderStyleItem(theme) {
         const isActive = props.isCustomized ? theme == "custom" : (props.theme || "default") == theme;
         if (theme == "default") {
             return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "default") },
-                react_1.default.createElement("div", null, "Classic Dashboard"),
-                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Ideal for data display with minimal text")));
+                react_1.default.createElement("div", null, T `Classic Dashboard`),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, T `Ideal for data display with minimal text`)));
         }
         if (theme == "greybg") {
             return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "greybg") },
-                react_1.default.createElement("div", null, "Framed Dashboard"),
-                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Each widget is white on a grey background")));
+                react_1.default.createElement("div", null, T `Framed Dashboard`),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, T `Each widget is white on a grey background`)));
         }
         if (theme == "story") {
             return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item", onClick: props.onChange.bind(null, "story") },
-                react_1.default.createElement("div", null, "Story"),
-                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Ideal for data-driven storytelling with lots of text")));
+                react_1.default.createElement("div", null, T `Story`),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, T `Ideal for data-driven storytelling with lots of text`)));
         }
         if (theme == "custom") {
             return (react_1.default.createElement("a", { key: theme, className: isActive ? "list-group-item active" : "list-group-item" },
-                react_1.default.createElement("div", null, "Custom"),
-                react_1.default.createElement("div", { style: { opacity: 0.6 } }, "Customized theme")));
+                react_1.default.createElement("div", null, T `Custom`),
+                react_1.default.createElement("div", { style: { opacity: 0.6 } }, T `Customized theme`)));
         }
         return null;
     }
@@ -109,149 +133,152 @@ function CustomizeLayout(props) {
                     onLayoutOptionsChange(uploadedTheme);
                 }
                 catch (error) {
-                    alert("Invalid theme file");
+                    alert(T `Invalid theme file`);
                 }
             };
             reader.readAsText(file);
         }
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Text" },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Title" },
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: T `Text` },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Title` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.titleWidgetFont, onChange: (titleWidgetFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, titleWidgetFont });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Heading H1" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Heading H1` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetH1Font, onChange: (textWidgetH1Font) => {
                         onLayoutOptionsChange({ ...layoutOptions, textWidgetH1Font });
                     } }),
                 react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Top Margin:", horizontal: true, labelMuted: true },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Top Margin:`, horizontal: true, labelMuted: true },
                         react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetH1MarginTop, onChange: (textWidgetH1MarginTop) => {
                                 onLayoutOptionsChange({ ...layoutOptions, textWidgetH1MarginTop: textWidgetH1MarginTop });
                             } })))),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Heading H2" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Heading H2` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetH2Font, onChange: (textWidgetH2Font) => {
                         onLayoutOptionsChange({ ...layoutOptions, textWidgetH2Font });
                     } }),
                 react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Top Margin:", horizontal: true, labelMuted: true },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Top Margin:`, horizontal: true, labelMuted: true },
                         react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetH2MarginTop, onChange: (textWidgetH2MarginTop) => {
                                 onLayoutOptionsChange({ ...layoutOptions, textWidgetH2MarginTop: textWidgetH2MarginTop });
                             } })))),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Text" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Text` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.textWidgetFont, onChange: (textWidgetFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, textWidgetFont });
                     } }),
                 react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Line Height:", horizontal: true, labelMuted: true },
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Line Height:`, horizontal: true, labelMuted: true },
                         react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetLineHeight, onChange: (textWidgetLineHeight) => {
                                 onLayoutOptionsChange({ ...layoutOptions, textWidgetLineHeight: textWidgetLineHeight });
-                            }, allowDefault: true, defaultLabel: "Default" })),
-                    react_1.default.createElement(bootstrap_1.FormGroup, { label: "Paragraph Spacing:", horizontal: true, labelMuted: true },
+                            }, allowDefault: true, defaultLabel: T `Default` })),
+                    react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Paragraph Spacing:`, horizontal: true, labelMuted: true },
                         react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetParagraphSpacing, onChange: (textWidgetParagraphSpacing) => {
                                 onLayoutOptionsChange({ ...layoutOptions, textWidgetParagraphSpacing: textWidgetParagraphSpacing });
                             } })))),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "List Line Height:", horizontal: true },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `List Line Height:`, horizontal: true },
                 react_1.default.createElement(PixelsInput, { value: layoutOptions.textWidgetListLineHeight, onChange: (textWidgetListLineHeight) => {
                         onLayoutOptionsChange({ ...layoutOptions, textWidgetListLineHeight: textWidgetListLineHeight });
-                    }, allowDefault: true, defaultLabel: "Default" })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Header Font" },
+                    }, allowDefault: true, defaultLabel: T `Default` })),
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Chart Header Font` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.widgetHeaderFont, onChange: (widgetHeaderFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, widgetHeaderFont });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Footer Font" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Chart Footer Font` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.widgetFooterFont, onChange: (widgetFooterFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, widgetFooterFont });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Chart Font" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Chart Font` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.chartFont, onChange: (chartFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, chartFont });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Table Font" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Table Font` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.tableFont, onChange: (tableFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, tableFont });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Pivot Table Font" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Pivot Table Font` },
                 react_1.default.createElement(FontStyleEditor_1.FontStyleEditor, { value: layoutOptions.pivotTableFont, onChange: (pivotTableFont) => {
                         onLayoutOptionsChange({ ...layoutOptions, pivotTableFont });
                     } }))),
-        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Spacing" },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Outer Padding:", horizontal: true },
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: T `Spacing` },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Outer Padding:`, horizontal: true },
                 react_1.default.createElement(PixelsInput, { value: layoutOptions.outerPadding, onChange: (outerPadding) => {
                         onLayoutOptionsChange({ ...layoutOptions, outerPadding: outerPadding });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Margins" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Block Margins` },
                 react_1.default.createElement(SpacingInput, { value: layoutOptions.blockMargin, onChange: (blockMargin) => {
                         onLayoutOptionsChange({ ...layoutOptions, blockMargin });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Padding" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Block Padding` },
                 react_1.default.createElement(SpacingInput, { value: layoutOptions.blockPadding, onChange: (blockPadding) => {
                         onLayoutOptionsChange({ ...layoutOptions, blockPadding });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Border Radius:", horizontal: true },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Block Border Radius:`, horizontal: true },
                 react_1.default.createElement(PixelsInput, { value: layoutOptions.blockBorderRadius, onChange: (blockBorderRadius) => {
                         onLayoutOptionsChange({ ...layoutOptions, blockBorderRadius: blockBorderRadius });
                     } }))),
-        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Colors" },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Background Color:", horizontal: true },
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: T `Colors` },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Background Color:`, horizontal: true },
                 react_1.default.createElement(ColorComponent_1.default, { color: layoutOptions.backgroundColor, onChange: (backgroundColor) => {
                         onLayoutOptionsChange({ ...layoutOptions, backgroundColor: backgroundColor ?? "white" });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Block Background Color:", horizontal: true },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Block Background Color:`, horizontal: true },
                 react_1.default.createElement(ColorComponent_1.default, { color: layoutOptions.blockBackgroundColor, onChange: (blockBackgroundColor) => {
                         onLayoutOptionsChange({ ...layoutOptions, blockBackgroundColor: blockBackgroundColor ?? "white" });
                     } })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Custom Colors" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Custom Colors` },
                 react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' } }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((colorIndex) => (react_1.default.createElement(ColorComponent_1.default, { key: colorIndex, color: layoutOptions.customColors[colorIndex], onChange: (color) => {
                         onLayoutOptionsChange((0, immer_1.default)(layoutOptions, (draft) => {
                             draft.customColors[colorIndex] = color;
                         }));
                     } })))))),
-        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Responsive Layout" },
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Collapse to Single Column" },
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: T `Responsive Layout` },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Collapse to Single Column` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.collapseColumnsWidth, onChange: (collapseColumnsWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, collapseColumnsWidth });
                     }, sign: "< " })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Hide Quickfilters" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Hide Quickfilters` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.hideQuickfiltersWidth, onChange: (hideQuickfiltersWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth });
                     }, sign: "< " })),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Minimum Width (before scrolling or scaling)" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Minimum Width (before scrolling or scaling)` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.minimumWidth, onChange: (minimumWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, minimumWidth });
                     }, sign: "< " }),
-                react_1.default.createElement(bootstrap_1.FormGroup, { label: "When Below Minimum Width" },
+                react_1.default.createElement(bootstrap_1.FormGroup, { label: T `When Below Minimum Width` },
                     react_1.default.createElement(bootstrap_1.Toggle, { value: layoutOptions.belowMinimumWidth, onChange: (belowMinimumWidth) => {
                             onLayoutOptionsChange({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth });
                         }, size: "sm", options: [
-                            { value: "scroll", label: "Scroll" },
-                            { value: "scale", label: "Scale" }
+                            { value: "scroll", label: T `Scroll` },
+                            { value: "scale", label: T `Scale` }
                         ] }))),
-            react_1.default.createElement(bootstrap_1.FormGroup, { label: "Maximum Width (before padding)" },
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Maximum Width (before padding)` },
                 react_1.default.createElement(WidthSelector, { value: layoutOptions.maximumWidth, onChange: (maximumWidth) => {
                         onLayoutOptionsChange({ ...layoutOptions, maximumWidth });
                     }, sign: "> " })),
             react_1.default.createElement(bootstrap_1.Checkbox, { value: layoutOptions.collapseSpacers, onChange: (collapseSpacers) => {
                     onLayoutOptionsChange({ ...layoutOptions, collapseSpacers });
-                } }, "Collapse Spacers on Mobile")),
-        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: "Download/Upload Theme", initiallyClosed: true },
-            react_1.default.createElement("div", { className: "mb-2 text-muted" }, "Download or upload a custom theme to use for this dashboard. This saves the current theme as a theme file that you can then use on other dashboards by uploading it there."),
+                } }, T `Collapse Spacers on Mobile`)),
+        react_1.default.createElement(bootstrap_1.CollapsiblePanel, { title: T `Download/Upload Theme`, initiallyClosed: true },
+            react_1.default.createElement("div", { className: "mb-2 text-muted" }, T `Download or upload a custom theme to use for this dashboard.
+          This saves the current theme as a theme file that you can then use on other dashboards by uploading it there.`),
             react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", marginTop: "10px", gap: "10px" } },
                 react_1.default.createElement("button", { className: "btn btn-sm btn-secondary", onClick: handleDownloadTheme },
                     react_1.default.createElement("i", { className: "fas fa-download" }),
-                    " Download Custom Theme"),
+                    " ",
+                    T `Download Custom Theme`),
                 react_1.default.createElement("label", { className: "btn btn-sm btn-secondary" },
                     react_1.default.createElement("i", { className: "fas fa-upload" }),
-                    " Upload Custom Theme",
+                    " ",
+                    T `Upload Custom Theme`,
                     react_1.default.createElement("input", { type: "file", accept: ".theme", style: { display: "none" }, onChange: handleUploadTheme }))))));
 }
 function SpacingInput(props) {
     return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', width: '100%' } },
-        react_1.default.createElement("div", null, "Top"),
-        react_1.default.createElement("div", null, "Bottom"),
-        react_1.default.createElement("div", null, "Left"),
-        react_1.default.createElement("div", null, "Right"),
+        react_1.default.createElement("div", null, T `Top`),
+        react_1.default.createElement("div", null, T `Bottom`),
+        react_1.default.createElement("div", null, T `Left`),
+        react_1.default.createElement("div", null, T `Right`),
         react_1.default.createElement(PixelsInput, { value: props.value.top, onChange: (top) => props.onChange({ ...props.value, top: top }) }),
         react_1.default.createElement(PixelsInput, { value: props.value.bottom, onChange: (bottom) => props.onChange({ ...props.value, bottom: bottom }) }),
         react_1.default.createElement(PixelsInput, { value: props.value.left, onChange: (left) => props.onChange({ ...props.value, left: left }) }),
@@ -262,13 +289,13 @@ function PixelsInput(props) {
         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40
     ];
     return (react_1.default.createElement("div", { className: "dropdown" },
-        react_1.default.createElement("a", { className: "dropdown-toggle", type: "button", id: "pixelsInputDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" }, props.value === null ? (props.defaultLabel || "Default") : `${props.value}px`),
+        react_1.default.createElement("a", { className: "dropdown-toggle", type: "button", id: "pixelsInputDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" }, props.value === null ? (props.defaultLabel || T `Default`) : `${props.value}px`),
         react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": "pixelsInputDropdown" },
             props.allowDefault && (react_1.default.createElement("li", { key: "default" },
                 react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
                         e.preventDefault();
                         props.onChange(null);
-                    } }, props.defaultLabel || "Default"))),
+                    } }, props.defaultLabel || T `Default`))),
             options.map(option => (react_1.default.createElement("li", { key: option },
                 react_1.default.createElement("a", { className: "dropdown-item", href: "#", onClick: (e) => {
                         e.preventDefault();
@@ -278,12 +305,12 @@ function PixelsInput(props) {
                     "px")))))));
 }
 function WidthSelector(props) {
-    return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: "N/A", options: [
-            { value: 400, label: `${props.sign}400px (Phone)` },
-            { value: 600, label: `${props.sign}600px (Small tablet)` },
-            { value: 800, label: `${props.sign}800px (Tablet)` },
-            { value: 1000, label: `${props.sign}1000px (Laptop)` },
-            { value: 1200, label: `${props.sign}1200px (Desktop)` },
-            { value: 1600, label: `${props.sign}1600px (Wide Desktop)` }
+    return (react_1.default.createElement(bootstrap_1.Select, { value: props.value, onChange: props.onChange, nullLabel: T `N/A`, options: [
+            { value: 400, label: `${props.sign}400px (${T `Phone`})` },
+            { value: 600, label: `${props.sign}600px (${T `Small tablet`})` },
+            { value: 800, label: `${props.sign}800px (${T `Tablet`})` },
+            { value: 1000, label: `${props.sign}1000px (${T `Laptop`})` },
+            { value: 1200, label: `${props.sign}1200px (${T `Desktop`})` },
+            { value: 1600, label: `${props.sign}1600px (${T `Wide Desktop`})` }
         ] }));
 }

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -9,14 +9,13 @@ export interface SettingsModalComponentProps {
 interface SettingsModalComponentState {
     design: DashboardDesign | null;
 }
+/** Popup with settings for dashboard */
 export default class SettingsModalComponent extends React.Component<SettingsModalComponentProps, SettingsModalComponentState> {
     constructor(props: SettingsModalComponentProps);
-    show(design: any): void;
+    show(design: DashboardDesign): void;
     handleSave: () => void;
     handleCancel: () => void;
-    handleDesignChange: (design: any) => void;
-    handleFiltersChange: (filters: any) => void;
-    handleGlobalFiltersChange: (globalFilters: any) => void;
+    handleDesignChange: (design: DashboardDesign) => void;
     render(): React.JSX.Element | null;
 }
 export {};

package/lib/dashboards/SettingsModalComponent.js

@@ -27,9 +27,7 @@ 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 update_object_1 = __importDefault(require("update-object"));
+const react_1 = __importStar(require("react"));
 const languages_1 = require("../languages");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const react_select_1 = __importDefault(require("react-select"));
@@ -38,7 +36,8 @@ const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-libr
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
 const MWaterContextComponent_1 = require("../MWaterContextComponent");
-// Popup with settings for dashboard
+const immer_1 = __importDefault(require("immer"));
+/** Popup with settings for dashboard */
 class SettingsModalComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -59,50 +58,65 @@ class SettingsModalComponent extends react_1.default.Component {
     handleDesignChange = (design) => {
         return this.setState({ design });
     };
-    handleFiltersChange = (filters) => {
-        const design = lodash_1.default.extend({}, this.state.design, { filters });
-        return this.handleDesignChange(design);
-    };
-    handleGlobalFiltersChange = (globalFilters) => {
-        const design = lodash_1.default.extend({}, this.state.design, { globalFilters });
-        return this.handleDesignChange(design);
-    };
     render() {
         // Don't show if not editing
         if (!this.state.design) {
             return null;
         }
-        // Get filterable tables
-        const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema);
-        const localeOptions = lodash_1.default.map(languages_1.languages, (language) => {
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancel, onAction: this.handleSave },
+            react_1.default.createElement(SettingsComponent, { design: this.state.design, onDesignChange: this.handleDesignChange, schema: this.props.schema, dataSource: this.props.dataSource })));
+    }
+}
+exports.default = SettingsModalComponent;
+/** Settings component for dashboard that is used in the settings modal */
+function SettingsComponent(props) {
+    const { design, onDesignChange, schema, dataSource } = props;
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(design, schema);
+    const localeOptions = (0, react_1.useMemo)(() => {
+        return lodash_1.default.map(languages_1.languages, (language) => {
             return {
                 value: language.code,
                 label: language.en + " (" + language.name + ")"
             };
         });
-        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { size: "large", onCancel: this.handleCancel, onAction: this.handleSave },
-            react_1.default.createElement("div", { style: { paddingBottom: 200 } },
-                react_1.default.createElement("h4", null, "Quick Filters"),
-                react_1.default.createElement("div", { className: "text-muted" }, "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."),
-                filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: this.state.design.quickfilters || [], onDesignChange: (design) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { quickfilters: { $set: design } })), schema: this.props.schema, dataSource: this.props.dataSource, tables: filterableTables })) : ("Nothing to quickfilter. Add widgets to the dashboard"),
-                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Filters"),
-                react_1.default.createElement("div", { className: "text-muted" }, "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."),
-                filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, filters: this.state.design.filters, onFiltersChange: this.handleFiltersChange, filterableTables: filterableTables })) : ("Nothing to filter. Add widgets to the dashboard"),
-                react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
-                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Global Filters"),
-                    globalFiltersElementFactory({
-                        schema: this.props.schema,
-                        dataSource: this.props.dataSource,
-                        filterableTables,
-                        globalFilters: this.state.design.globalFilters || [],
-                        onChange: this.handleGlobalFiltersChange
-                    }))) : undefined),
-                react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Language"),
-                react_1.default.createElement("div", { className: "text-muted" }, "Controls the preferred language of widgets and uses specified language when available"),
-                react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { locale: { $set: locale.value } })) }),
-                this.state.design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("h4", { style: { paddingTop: 10 } }, "Advanced"),
-                    react_1.default.createElement(ui.Checkbox, { value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true, onChange: (value) => this.handleDesignChange((0, update_object_1.default)(this.state.design, { implicitFiltersEnabled: { $set: value } })) }, "Enable Implicit Filtering (leave unchecked for new dashboards)"))))));
-    }
+    }, [languages_1.languages]);
+    return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+        react_1.default.createElement("h4", null, T `Quick Filters`),
+        react_1.default.createElement("div", { className: "text-muted" }, T `Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.`),
+        filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: design.quickfilters || [], onDesignChange: (quickfilters) => {
+                onDesignChange((0, immer_1.default)(design, draft => {
+                    draft.quickfilters = quickfilters;
+                }));
+            }, schema: schema, dataSource: dataSource, tables: filterableTables })) : (T `Nothing to quickfilter. Add widgets to the dashboard`),
+        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Filters`),
+        react_1.default.createElement("div", { className: "text-muted" }, T `Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`),
+        filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: schema, dataSource: dataSource, filters: design.filters, onFiltersChange: (filters) => {
+                onDesignChange((0, immer_1.default)(design, draft => {
+                    draft.filters = filters;
+                }));
+            }, filterableTables: filterableTables })) : (T `Nothing to filter. Add widgets to the dashboard`),
+        react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
+            react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Global Filters`),
+            globalFiltersElementFactory({
+                schema,
+                dataSource,
+                filterableTables,
+                globalFilters: design.globalFilters || [],
+                onChange: (globalFilters) => {
+                    onDesignChange((0, immer_1.default)(design, draft => {
+                        draft.globalFilters = globalFilters;
+                    }));
+                }
+            }))) : undefined),
+        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Language`),
+        react_1.default.createElement("div", { className: "text-muted" }, T `Controls the preferred language of widgets and uses specified language when available`),
+        react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
+                draft.locale = locale.value;
+            })) }),
+        design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Advanced`),
+            react_1.default.createElement(ui.Checkbox, { value: design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true, onChange: (value) => onDesignChange((0, immer_1.default)(design, draft => {
+                    draft.implicitFiltersEnabled = value;
+                })) }, T `Enable Implicit Filtering (leave unchecked for new dashboards)`)))));
 }
-exports.default = SettingsModalComponent;

package/lib/dashboards/WidgetComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Schema, DataSource } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { WidgetScope } from "../WidgetScope";

package/lib/dashboards/WidgetComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WidgetComponent = void 0;
+exports.WidgetComponent = WidgetComponent;
 const react_1 = require("react");
 const WidgetFactory_1 = __importDefault(require("../widgets/WidgetFactory"));
 /**
@@ -40,7 +40,6 @@ function WidgetComponent(props) {
         refreshKey: props.refreshKey
     });
 }
-exports.WidgetComponent = WidgetComponent;
 /** Always returns the same function to prevent unnecessary re-rendering. Forwards to the real function */
 function useStabilizeFunction(func) {
     // Create ref for changing func

package/lib/dashboards/layoutOptions.js

@@ -3,7 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDashboardStyles = exports.expandFontFamily = exports.DashboardStyleWrapper = exports.getLayoutOptions = exports.getDefaultLayoutOptions = exports.BlocksLayoutOptionsContext = void 0;
+exports.BlocksLayoutOptionsContext = void 0;
+exports.getDefaultLayoutOptions = getDefaultLayoutOptions;
+exports.getLayoutOptions = getLayoutOptions;
+exports.DashboardStyleWrapper = DashboardStyleWrapper;
+exports.expandFontFamily = expandFontFamily;
+exports.createDashboardStyles = createDashboardStyles;
 const react_1 = require("react");
 const react_2 = __importDefault(require("react"));
 const CustomColorsContext_1 = require("../CustomColorsContext");
@@ -22,7 +27,6 @@ function getDefaultLayoutOptions(theme) {
     }
     throw new Error(`Unknown theme: ${theme}`);
 }
-exports.getDefaultLayoutOptions = getDefaultLayoutOptions;
 /** Gets the current layout options for a design */
 function getLayoutOptions(design) {
     if (!design.layoutOptions) {
@@ -33,7 +37,6 @@ function getLayoutOptions(design) {
         ...design.layoutOptions
     };
 }
-exports.getLayoutOptions = getLayoutOptions;
 /**
  * Injects the dashboard style into the child component. Also provides a context for layout options.
  * This is to allow modals to reinject the layout options when they are opened.
@@ -50,7 +53,6 @@ function DashboardStyleWrapper(props) {
         react_2.default.createElement(CustomColorsContext_1.CustomColorsContext.Provider, { value: { customColors: mergedCustomColors } },
             react_2.default.createElement(exports.BlocksLayoutOptionsContext.Provider, { value: props.layoutOptions }, props.children)));
 }
-exports.DashboardStyleWrapper = DashboardStyleWrapper;
 /** Bootstrap default font color */
 const defaultFontColor = "#212529";
 const defaultTheme = {
@@ -210,7 +212,6 @@ function expandFontFamily(fontFamily) {
     }
     return `"${fontFamily}", sans-serif`;
 }
-exports.expandFontFamily = expandFontFamily;
 /**
  * Create a CSS style string from a LayoutOptions object
  *
@@ -371,9 +372,13 @@ ${scope} .mwater-visualization-text-widget-style-footer {
 }
 
 /** --- Chart styles --- */
+${scope} {
+  --chart-text-color: ${layoutOptions.chartFont.color};
+}
+
 ${scope} .bb text {
   font-size: ${layoutOptions.chartFont.size}px;
-  fill: ${layoutOptions.chartFont.color};
+  fill: var(--chart-text-color);
   font-family: ${expandFontFamily(layoutOptions.chartFont.family)};
   font-weight: ${layoutOptions.chartFont.weight};
 }
@@ -442,4 +447,3 @@ ${scope} .mwater-visualization-widget-placeholder-message {
 
 `;
 }
-exports.createDashboardStyles = createDashboardStyles;

package/lib/datagrids/DatagridComponent.d.ts

@@ -95,14 +95,7 @@ export default class DatagridComponent extends React.Component<DatagridComponent
     }, HTMLElement>;
     renderEditor(): React.CElement<DatagridEditorComponentProps, DatagridEditorComponent> | undefined;
     renderFindReplaceModal(filters: any): React.CElement<any, FindReplaceModalComponent>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-            height: string;
-            position: "relative";
-            paddingTop: number;
-        };
-    }, HTMLElement>;
+    render(): React.FunctionComponentElement<React.ProviderProps<string>>;
 }
 interface DatagridEditorComponentProps {
     schema: Schema;