@mwater/visualization 5.3.1 → 5.4.0

package/src/dashboards/SettingsModalComponent.tsx

@@ -1,7 +1,5 @@
 import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import update from "update-object"
+import React, { useMemo } from "react"
 import { languages } from "../languages"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { default as ReactSelect } from "react-select"
@@ -12,6 +10,7 @@ import FiltersDesignerComponent from "../FiltersDesignerComponent"
 import { DataSource, Schema } from "@mwater/expressions"
 import { DashboardDesign } from "./DashboardDesign"
 import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
+import produce from "immer"
 
 export interface SettingsModalComponentProps {
   onDesignChange: any
@@ -23,7 +22,7 @@ interface SettingsModalComponentState {
   design: DashboardDesign | null
 }
 
-// Popup with settings for dashboard
+/** Popup with settings for dashboard */
 export default class SettingsModalComponent extends React.Component<
   SettingsModalComponentProps,
   SettingsModalComponentState
@@ -35,7 +34,7 @@ export default class SettingsModalComponent extends React.Component<
     }
   }
 
-  show(design: any) {
+  show(design: DashboardDesign) {
     return this.setState({ design })
   }
 
@@ -47,18 +46,9 @@ export default class SettingsModalComponent extends React.Component<
   handleCancel = () => {
     return this.setState({ design: null })
   }
-  handleDesignChange = (design: any) => {
-    return this.setState({ design })
-  }
-
-  handleFiltersChange = (filters: any) => {
-    const design = _.extend({}, this.state.design, { filters })
-    return this.handleDesignChange(design)
-  }
 
-  handleGlobalFiltersChange = (globalFilters: any) => {
-    const design = _.extend({}, this.state.design, { globalFilters })
-    return this.handleDesignChange(design)
+  handleDesignChange = (design: DashboardDesign) => {
+    return this.setState({ design })
   }
 
   render() {
@@ -67,104 +57,141 @@ export default class SettingsModalComponent extends React.Component<
       return null
     }
 
-    // Get filterable tables
-    const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema)
-
-    const localeOptions = _.map(languages, (language) => {
-      return {
-        value: language.code,
-        label: language.en + " (" + language.name + ")"
-      }
-    })
-
     return (
       <ActionCancelModalComponent
         size="large"
         onCancel={this.handleCancel}
         onAction={this.handleSave}
       >
-        <div style={{ paddingBottom: 200 }}>
-          <h4>Quick Filters</h4>
-          <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.
-          </div>
-
-          {filterableTables.length > 0 ? (
-            <QuickfiltersDesignComponent
-              design={this.state.design.quickfilters || []}
-              onDesignChange={(design: any) =>
-                this.handleDesignChange(update(this.state.design, { quickfilters: { $set: design } }))
-              }
-              schema={this.props.schema}
-              dataSource={this.props.dataSource}
-              tables={filterableTables}
-            />
-          ) : (
-            "Nothing to quickfilter. Add widgets to the dashboard"
-          )}
-
-          <h4 style={{ paddingTop: 10 }}>Filters</h4>
-          <div className="text-muted">
-            Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.
-          </div>
-
-          {filterableTables.length > 0 ? (
-            <FiltersDesignerComponent
-              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"
-          )}
-
-          <GlobalFiltersElementFactoryContext.Consumer>
-            {globalFiltersElementFactory =>
-              globalFiltersElementFactory ? (
-                <div>
-                  <h4 style={{ paddingTop: 10 }}>Global Filters</h4>
-                  {globalFiltersElementFactory({
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    filterableTables,
-                    globalFilters: this.state.design!.globalFilters || [],
-                    onChange: this.handleGlobalFiltersChange
-                  })}
-                </div>
-              ) : undefined
-            }
-          </GlobalFiltersElementFactoryContext.Consumer>
-
-          <h4 style={{ paddingTop: 10 }}>Language</h4>
-          <div className="text-muted">
-            Controls the preferred language of widgets and uses specified language when available
-          </div>
-
-          <ReactSelect
-            value={_.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null}
-            options={localeOptions}
-            onChange={(locale: any) =>
-              this.handleDesignChange(update(this.state.design, { locale: { $set: locale.value } }))
-            }
-          />
-
-          {this.state.design.implicitFiltersEnabled && (
-            <>
-              <h4 style={{ paddingTop: 10 }}>Advanced</h4>
-              <ui.Checkbox
-                value={this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true}
-                onChange={(value: boolean) =>
-                  this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-                }
-              >
-                Enable Implicit Filtering (leave unchecked for new dashboards)
-              </ui.Checkbox>
-            </>
-          )}
-        </div>
+        <SettingsComponent
+          design={this.state.design}
+          onDesignChange={this.handleDesignChange}
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+        />
       </ActionCancelModalComponent>
     )
   }
 }
+
+interface SettingsComponentProps {
+  schema: Schema
+  dataSource: DataSource
+  design: DashboardDesign
+  onDesignChange: (design: DashboardDesign) => void
+}
+
+/** Settings component for dashboard that is used in the settings modal */
+function SettingsComponent(props: SettingsComponentProps) {
+  const { design, onDesignChange, schema, dataSource } = props
+
+  // Get filterable tables
+  const filterableTables = DashboardUtils.getFilterableTables(design, schema)
+
+  const localeOptions = useMemo(() => {
+    return _.map(languages, (language) => {
+      return {
+        value: language.code,
+        label: language.en + " (" + language.name + ")"
+      }
+    })
+  }, [languages])
+
+  return (
+    <div style={{ paddingBottom: 200 }}>
+      <h4>{T`Quick Filters`}</h4>
+      <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.`}
+      </div>
+
+      {filterableTables.length > 0 ? (
+        <QuickfiltersDesignComponent
+          design={design.quickfilters || []}
+          onDesignChange={(quickfilters) => {
+            onDesignChange(produce(design, draft => {
+              draft.quickfilters = quickfilters
+            }))
+          }}
+          schema={schema}
+          dataSource={dataSource}
+          tables={filterableTables}
+        />
+      ) : (
+        T`Nothing to quickfilter. Add widgets to the dashboard`
+      )}
+
+      <h4 style={{ paddingTop: 10 }}>{T`Filters`}</h4>
+      <div className="text-muted">
+        {T`Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`}
+      </div>
+
+      {filterableTables.length > 0 ? (
+        <FiltersDesignerComponent
+          schema={schema}
+          dataSource={dataSource}
+          filters={design.filters}
+          onFiltersChange={(filters) => {
+            onDesignChange(produce(design, draft => {
+              draft.filters = filters
+            }))
+          }}
+          filterableTables={filterableTables}
+        />
+      ) : (
+        T`Nothing to filter. Add widgets to the dashboard`
+      )}
+
+      <GlobalFiltersElementFactoryContext.Consumer>
+        {globalFiltersElementFactory =>
+          globalFiltersElementFactory ? (
+            <div>
+              <h4 style={{ paddingTop: 10 }}>{T`Global Filters`}</h4>
+              {globalFiltersElementFactory({
+                schema,
+                dataSource,
+                filterableTables,
+                globalFilters: design.globalFilters || [],
+                onChange: (globalFilters) => {
+                  onDesignChange(produce(design, draft => {
+                    draft.globalFilters = globalFilters
+                  }))
+                }
+              })}
+            </div>
+          ) : undefined
+        }
+      </GlobalFiltersElementFactoryContext.Consumer>
+
+      <h4 style={{ paddingTop: 10 }}>{T`Language`}</h4>
+      <div className="text-muted">
+        {T`Controls the preferred language of widgets and uses specified language when available`}
+      </div>
+
+      <ReactSelect
+        value={_.findWhere(localeOptions, { value: design.locale || "en" }) || null}
+        options={localeOptions}
+        onChange={(locale: any) =>
+          onDesignChange(produce(design, draft => {
+            draft.locale = locale.value
+          }))
+        }
+      />
+
+      {design.implicitFiltersEnabled && (
+        <>
+          <h4 style={{ paddingTop: 10 }}>{T`Advanced`}</h4>
+          <ui.Checkbox
+            value={design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true}
+            onChange={(value: boolean) =>
+              onDesignChange(produce(design, draft => {
+                draft.implicitFiltersEnabled = value
+              }))
+            }
+          >
+            {T`Enable Implicit Filtering (leave unchecked for new dashboards)`}
+          </ui.Checkbox>
+        </>
+      )}
+    </div>
+  )
+}

package/src/dashboards/layoutOptions.tsx

@@ -508,9 +508,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};
 }

package/src/datagrids/DatagridComponent.ts

@@ -17,6 +17,7 @@ import FindReplaceModalComponent from "./FindReplaceModalComponent"
 import DatagridDataSource from "./DatagridDataSource"
 import { DatagridDesign, JsonQLFilter } from ".."
 import { format as d3Format } from "d3-format"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface DatagridComponentProps {
   /** schema to use */
@@ -39,10 +40,10 @@ export interface DatagridComponentProps {
 
   /** Check if a value is editable by testing if underlying expression is editable */
   canEditExpr?: (tableId: string, rowId: any, expr: Expr) => Promise<boolean>
- 
+
   /** Update cell values by updating set of expressions and values */
   updateExprValues?: (tableId: string, rowUpdates: RowUpdate[]) => Promise<void>
- 
+
   /** Called when row is clicked with (tableId, rowId) */
   onRowClick?: (tableId: string, rowId: any) => void
 
@@ -109,7 +110,7 @@ export default class DatagridComponent extends React.Component<
   }
 
   loadRowCount() {
-    if(!this.props.design.showNumRows) {
+    if (!this.props.design.showNumRows) {
       return
     }
     let filters = this.props.filters || []
@@ -117,15 +118,15 @@ export default class DatagridComponent extends React.Component<
     // Compile quickfilters
     filters = filters.concat(this.getQuickfilterFilters())
     this.props.datagridDataSource.countRows(this.props.design,
-      filters, 
+      filters,
       (error: any, numRows: any) => {
         if (error) {
           console.error(error)
-          alert(T("Error loading data"))
+          alert(T`Error loading data`)
           return
         }
         console.log(numRows)
-        this.setState({numRows})
+        this.setState({ numRows })
       })
   }
 
@@ -163,7 +164,7 @@ export default class DatagridComponent extends React.Component<
     if (this.state.cellEditingEnabled) {
       return this.setState({ cellEditingEnabled: false })
     } else {
-      if (confirm(T("Turn on cell editing? This will allow you to edit the live data and is an advanced feature."))) {
+      if (confirm(T`Turn on cell editing? This will allow you to edit the live data and is an advanced feature.`)) {
         return this.setState({ cellEditingEnabled: true })
       }
     }
@@ -240,7 +241,7 @@ export default class DatagridComponent extends React.Component<
     const label = [
       R("i", { className: this.state.cellEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
       " ",
-      T("Cell Editing")
+      T`Cell Editing`
     ]
 
     return R(
@@ -268,7 +269,7 @@ export default class DatagridComponent extends React.Component<
       },
       R("span", { className: "fas fa-cog" }),
       " ",
-      T("Settings")
+      T`Settings`
     )
   }
 
@@ -284,7 +285,7 @@ export default class DatagridComponent extends React.Component<
         className: "btn btn-link btn-sm",
         onClick: () => this.findReplaceModal!.show()
       },
-      T("Find/Replace")
+      T`Find/Replace`
     )
   }
 
@@ -295,7 +296,7 @@ export default class DatagridComponent extends React.Component<
       R(
         "div",
         { style: { float: "right" } },
-        this.props.design.showNumRows && this.state.numRows ? R("small", {className: 'text-muted text-sm'}, `${d3Format(',')(this.state.numRows)} rows`): undefined,
+        this.props.design.showNumRows && this.state.numRows ? R("small", { className: 'text-muted text-sm' }, `${d3Format(',')(this.state.numRows)} rows`) : undefined,
         this.renderFindReplace(),
         this.renderCellEdit(),
         this.renderEditButton(),
@@ -303,7 +304,7 @@ export default class DatagridComponent extends React.Component<
           "a",
           { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
           R("span", { className: "fas fa-sync" }),
-          R("span", { className: "hide-600px" }, " Refresh")
+          R("span", { className: "hide-600px" }, T`Refresh`)
         ),
         this.props.extraTitleButtonsElem
       ),
@@ -381,56 +382,58 @@ export default class DatagridComponent extends React.Component<
     // Compile quickfilters
     filters = filters.concat(this.getQuickfilterFilters())
 
-    return R(
-      "div",
-      {
-        style: {
-          width: "100%",
-          height: "100%",
-          position: "relative",
-          paddingTop: 40 + (this.state.quickfiltersHeight || 0)
-        }
-      },
-      this.renderTitleBar(),
-      this.renderQuickfilter(),
-
-      this.renderEditor(),
-      this.renderFindReplaceModal(filters),
-
-      R(AutoSizeComponent, { injectWidth: true, injectHeight: true } as any, (size: any) => {
-        // Clean before displaying
-        const design = new DatagridUtils(this.props.schema).cleanDesign(this.props.design)
-
-        if (!new DatagridUtils(this.props.schema).validateDesign(design)) {
-          return R(DatagridViewComponent, {
-            ref: (view: DatagridViewComponent | null) => {
-              this.datagridView = view
-            },
-            width: size.width - 1, // minus 1 px to test if it solves the jitter with scroll
-            height: size.height - 1,
-            pageSize: 100,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            datagridDataSource: this.props.datagridDataSource,
-            design,
-            filters,
-            onDesignChange: this.props.onDesignChange,
-            onRowClick: this.props.onRowClick,
-            onRowDoubleClick: this.props.onRowDoubleClick,
-            canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
-            updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
-            refreshKey: this.state.refreshKey
-          })
-        } else if (this.props.onDesignChange) {
-          return R(
-            "div",
-            { style: { textAlign: "center", marginTop: size.height / 2 } },
-            R("a", { className: "btn btn-link", onClick: this.handleEdit }, T("Click Here to Configure"))
-          )
-        } else {
-          return null
-        }
-      })
+    return R(LocaleContext.Provider, { value: this.props.design.locale || "en" },
+      R(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            paddingTop: 40 + (this.state.quickfiltersHeight || 0)
+          }
+        },
+        this.renderTitleBar(),
+        this.renderQuickfilter(),
+
+        this.renderEditor(),
+        this.renderFindReplaceModal(filters),
+
+        R(AutoSizeComponent, { injectWidth: true, injectHeight: true } as any, (size: any) => {
+          // Clean before displaying
+          const design = new DatagridUtils(this.props.schema).cleanDesign(this.props.design)
+
+          if (!new DatagridUtils(this.props.schema).validateDesign(design)) {
+            return R(DatagridViewComponent, {
+              ref: (view: DatagridViewComponent | null) => {
+                this.datagridView = view
+              },
+              width: size.width - 1, // minus 1 px to test if it solves the jitter with scroll
+              height: size.height - 1,
+              pageSize: 100,
+              schema: this.props.schema,
+              dataSource: this.props.dataSource,
+              datagridDataSource: this.props.datagridDataSource,
+              design,
+              filters,
+              onDesignChange: this.props.onDesignChange,
+              onRowClick: this.props.onRowClick,
+              onRowDoubleClick: this.props.onRowDoubleClick,
+              canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
+              updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+              refreshKey: this.state.refreshKey
+            })
+          } else if (this.props.onDesignChange) {
+            return R(
+              "div",
+              { style: { textAlign: "center", marginTop: size.height / 2 } },
+              R("a", { className: "btn btn-link", onClick: this.handleEdit }, T`Click Here to Configure`)
+            )
+          } else {
+            return null
+          }
+        })
+      )
     )
   }
 }

package/src/datagrids/DatagridDesignerComponent.tsx

@@ -68,7 +68,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
       tabs: [
         {
           id: "columns",
-          label: T("Columns"),
+          label: T`Columns`,
           elem: R(ColumnsDesignerComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
@@ -79,7 +79,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
         },
         {
           id: "filter",
-          label: T("Filter"),
+          label: T`Filter`,
           // Here because of modal scroll issue
           elem: R(
             "div",
@@ -113,7 +113,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
         },
         {
           id: "order",
-          label: T("Sorting"),
+          label: T`Sorting`,
           elem: R(
             "div",
             { style: { marginBottom: 200 } },
@@ -128,7 +128,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
         },
         {
           id: "quickfilters",
-          label: T("Quickfilters"),
+          label: T`Quickfilters`,
           elem: R(
             "div",
             { style: { marginBottom: 200 } },
@@ -144,7 +144,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
         },
         {
           id: "options",
-          label: T("Options"),
+          label: T`Options`,
           elem: R(
             "div",
             { style: { marginBottom: 200 } },
@@ -162,7 +162,7 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
     return R(
       "div",
       null,
-      R("label", null, T("Data Source:")),
+      R("label", null, T`Data Source:`),
       R(TableSelectComponent, {
         schema: this.props.schema,
         value: this.props.design.table,
@@ -196,7 +196,7 @@ function DatagridOptionsComponent(props: DatagridOptionsComponentProps) {
           props.onDesignChange({ ...props.design, showRowNumbers })
       }
     >
-      {T("Show row numbers")}
+      {T`Show row numbers`}
     </ui.Checkbox>
     <ui.Checkbox 
       value={props.design.showNumRows}
@@ -204,9 +204,9 @@ function DatagridOptionsComponent(props: DatagridOptionsComponentProps) {
           props.onDesignChange({ ...props.design, showNumRows })
       }
     >
-      {T("Show number of rows")}
+      {T`Show number of rows`}
     </ui.Checkbox>
-    <ui.FormGroup label={T("Language")} hint={T("Preferred language of the datagrid")}>
+    <ui.FormGroup label={T`Language`} hint={T`Preferred language of the datagrid`}>
       <ReactSelect
         value={localeOptions.find(opt => opt.value == (props.design.locale || "en")) || null}
         options={localeOptions}
@@ -261,7 +261,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
       type: "expr",
       width: 150,
       expr: { type: "id", table: this.props.table },
-      label: T("Unique Id")
+      label: T`Unique Id`
     })
     return this.props.onColumnsChange(columns)
   }
@@ -327,7 +327,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
             onClick: this.handleAddDefaultColumns
           },
           R("span", { className: "fas fa-plus" }),
-          " " + T("Add Default Columns")
+          " " + T`Add Default Columns`
         ),
         R(
           "button",
@@ -338,7 +338,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
             onClick: this.handleRemoveAllColumns
           },
           R("span", { className: "fas fa-times" }),
-          " " + T("Remove All Columns")
+          " " + T`Remove All Columns`
         )
       ),
 
@@ -359,7 +359,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
             onClick: this.handleAddColumn
           },
           R("span", { className: "fas fa-plus" }),
-          " " + T("Add Column")
+          " " + T`Add Column`
         ),
 
         R(
@@ -371,7 +371,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
             onClick: this.handleAddIdColumn
           },
           R("span", { className: "fas fa-plus" }),
-          " " + T("Add Unique Id (advanced)")
+          " " + T`Add Unique Id (advanced)`
         )
       )
     )
@@ -468,7 +468,7 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
           "a",
           { className: "btn btn-sm btn-link", onClick: this.handleSplitEnumset },
           R("i", { className: "fa fa-chain-broken" }),
-          " " + T("Split by options")
+          " " + T`Split by options`
         )
         break
       case "geometry":
@@ -476,7 +476,7 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
           "a",
           { className: "btn btn-sm btn-link", onClick: this.handleSplitGeometry },
           R("i", { className: "fa fa-chain-broken" }),
-          " " + T("Split by lat/lng")
+          " " + T`Split by lat/lng`
         )
         break
     }
@@ -499,7 +499,7 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, T("Format")),
+      R("label", { className: "text-muted" }, T`Format`),
       ": ",
       R(
         "select",

package/src/datagrids/DatagridUtils.ts

@@ -50,11 +50,11 @@ export default class DatagridUtils {
 
   validateDesign(design: DatagridDesign) {
     if (!design.table) {
-      return "Missing table"
+      return T`Missing table`
     }
 
     if (!design.columns || !design.columns[0]) {
-      return "No columns"
+      return T`No columns`
     }
 
     // Validate column exprs