@mwater/visualization 5.4.1 → 5.4.3

package/src/axes/AxisColorEditorComponent.tsx

@@ -86,6 +86,11 @@ export default class AxisColorEditorComponent extends React.Component<
           axisBuilder.isCategorical(this.props.axis)
         )
         colorMap = (this.props.axis.colorMap || []).concat(missingColorMap)
+
+        // If there are categories present, remove any color map values that are not in the categories
+        if (this.props.categories.length > 0) {
+          colorMap = _.filter(colorMap, (cm) => this.props.categories!.find((c) => c.value === cm.value))
+        }
       } else {
         // Keep existing
         const existing = _.indexBy(this.props.axis.colorMap || [], "value")

package/src/axes/{AxisComponent.ts → AxisComponent.tsx}

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import uuid from "uuid"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
 import { ExprComponent, LocaleContext } from "@mwater/expressions-ui"
@@ -16,7 +15,7 @@ import { injectTableAlias } from "@mwater/expressions"
 import { getFormatOptions } from "../valueFormatter"
 import { getDefaultFormat } from "../valueFormatter"
 import { JsonQLFilter } from "../JsonQLFilter"
-import { Axis, AxisXform, AxisXformRange } from "./Axis"
+import { Axis, AxisCategory, AxisXform, AxisXformRange } from "./Axis"
 import produce from "immer"
 import { JsonQLSelectQuery } from "@mwater/jsonql"
 
@@ -54,7 +53,7 @@ export interface AxisComponentProps {
 // Axis component that allows designing of an axis
 export default class AxisComponent extends AsyncLoadComponent<
   AxisComponentProps,
-  { categories: any; loading: boolean }
+  { categories: AxisCategory[] | null; loading: boolean }
 > {
   static defaultProps = {
     reorderable: false,
@@ -146,14 +145,14 @@ export default class AxisComponent extends AsyncLoadComponent<
       valuesQuery.where = whereClauses[0]
     }
 
-    return props.dataSource.performQuery(valuesQuery, (error: any, rows: any) => {
+    props.dataSource.performQuery(valuesQuery, (error: any, rows: any) => {
       if (error) {
         return // Ignore errors
       }
 
       // Get categories (value + label)
       categories = axisBuilder.getCategories(axis, _.pluck(rows, "val"))
-      return callback({ categories })
+      callback({ categories })
     })
   }
 
@@ -254,37 +253,37 @@ export default class AxisComponent extends AsyncLoadComponent<
     if (axis.xform && ["bin", "ranges", "floor"].includes(axis.xform.type)) {
       let comp
       if (axis.xform.type === "ranges") {
-        comp = R(RangesComponent, {
-          schema: this.props.schema,
-          expr: axis.expr,
-          xform: axis.xform,
-          onChange: this.handleXformChange
-        })
+        comp = <RangesComponent
+          schema={this.props.schema}
+          expr={axis.expr}
+          xform={axis.xform}
+          onChange={this.handleXformChange}
+        />
       } else if (axis.xform.type === "bin") {
-        comp = R(BinsComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          expr: axis.expr,
-          xform: axis.xform,
-          onChange: this.handleXformChange
-        })
+        comp = <BinsComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          expr={axis.expr}
+          xform={axis.xform}
+          onChange={this.handleXformChange}
+        />
       } else {
         comp = null
       }
 
-      return R(
-        "div",
-        null,
-        R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
-            { value: "bin", label: T`Equal Bins` },
-            { value: "ranges", label: T`Custom Ranges` },
-            { value: "floor", label: T`Whole Numbers` }
-          ],
-          onChange: this.handleXformTypeChange
-        }),
-        comp
+      return (
+        <div>
+          <ui.RadioToggleComponent
+            value={axis.xform ? axis.xform.type : null}
+            options={[
+              { value: "bin", label: T`Equal Bins` },
+              { value: "ranges", label: T`Custom Ranges` },
+              { value: "floor", label: T`Whole Numbers` }
+            ]}
+            onChange={this.handleXformTypeChange}
+          />
+          {comp}
+        </div>
       )
     }
 
@@ -293,9 +292,9 @@ export default class AxisComponent extends AsyncLoadComponent<
 
     switch (exprType) {
       case "date":
-        return R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
+        return <ui.RadioToggleComponent
+          value={axis.xform ? axis.xform.type : null}
+          options={[
             { value: null, label: T`Exact Date` },
             { value: "year", label: T`Year` },
             { value: "yearmonth", label: T`Year/Month` },
@@ -303,13 +302,13 @@ export default class AxisComponent extends AsyncLoadComponent<
             { value: "week", label: T`Week` },
             { value: "yearweek", label: T`Year/Week` },
             { value: "yearquarter", label: T`Year/Quarter` }
-          ],
-          onChange: this.handleXformTypeChange
-        })
+          ]}
+          onChange={this.handleXformTypeChange}
+        />
       case "datetime":
-        return R(ui.RadioToggleComponent, {
-          value: axis.xform ? axis.xform.type : null,
-          options: [
+        return <ui.RadioToggleComponent
+          value={axis.xform ? axis.xform.type : null}
+          options={[
             { value: "date", label: T`Date` },
             { value: "year", label: T`Year` },
             { value: "yearmonth", label: T`Year/Month` },
@@ -317,9 +316,9 @@ export default class AxisComponent extends AsyncLoadComponent<
             { value: "week", label: T`Week` },
             { value: "yearweek", label: T`Year/Week` },
             { value: "yearquarter", label: T`Year/Quarter` }
-          ],
-          onChange: this.handleXformTypeChange
-        })
+          ]}
+          onChange={this.handleXformTypeChange}
+        />
     }
     return null
   }
@@ -329,20 +328,22 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return [
-      R("br"),
-      R(AxisColorEditorComponent, {
-        schema: this.props.schema,
-        axis,
-        categories: this.state.categories,
-        onChange: this.props.onChange,
-        reorderable: this.props.reorderable,
-        defaultColor: this.props.defaultColor,
-        allowExcludedValues: this.props.allowExcludedValues,
-        autosetColors: this.props.autosetColors,
-        initiallyExpanded: this.props.collapseCategories !== true
-      })
-    ]
+    return (
+      <>
+        <br/>
+        <AxisColorEditorComponent
+          schema={this.props.schema}
+          axis={axis}
+          categories={this.state.categories ?? undefined}
+          onChange={this.props.onChange}
+          reorderable={this.props.reorderable}
+          defaultColor={this.props.defaultColor ?? undefined}
+          allowExcludedValues={this.props.allowExcludedValues}
+          autosetColors={this.props.autosetColors}
+          initiallyExpanded={this.props.collapseCategories !== true}
+        />
+      </>
+    )
   }
 
   renderExcludedValues(axis: any) {
@@ -356,19 +357,21 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return [
-      R("br"),
-      R(CategoryMapComponent, {
-        schema: this.props.schema,
-        axis,
-        onChange: this.props.onChange,
-        categories: this.state.categories,
-        reorderable: false,
-        showColorMap: false,
-        allowExcludedValues: true,
-        initiallyExpanded: this.props.collapseCategories !== true
-      })
-    ]
+    return (
+      <>
+        <br/>
+        <CategoryMapComponent
+          schema={this.props.schema}
+          axis={axis}
+          onChange={this.props.onChange}
+          categories={this.state.categories}
+          reorderable={false}
+          showColorMap={false}
+          allowExcludedValues={true}
+          initiallyExpanded={this.props.collapseCategories !== true}
+        />
+      </>
+    )
   }
 
   renderFormat(axis: any) {
@@ -384,21 +387,21 @@ export default class AxisComponent extends AsyncLoadComponent<
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Format`),
-      ": ",
-      R(
-        "select",
-        {
-          value: axis.format != null ? axis.format : getDefaultFormat(valueType),
-          className: "form-select",
-          style: { width: "auto", display: "inline-block" },
-          onChange: this.handleFormatChange
-        },
-        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">{T`Format`}</label>
+        {": "}
+        <select
+          value={axis.format != null ? axis.format : getDefaultFormat(valueType)}
+          className="form-select"
+          style={{ width: "auto", display: "inline-block" }}
+          onChange={this.handleFormatChange}
+        >
+          {_.map(formats, (format) => (
+            <option key={format.value} value={format.value}>{format.label}</option>
+          ))}
+        </select>
+      </div>
     )
   }
 
@@ -422,27 +425,24 @@ export default class AxisComponent extends AsyncLoadComponent<
         break
     }
 
-    return R(
-      "div",
-      null,
-      R(
-        "div",
-        null,
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.table,
-          types: axisBuilder.getExprTypes(this.props.types),
-          // preventRemove: @props.required
-          onChange: this.handleExprChange,
-          value: this.props.value ? this.props.value.expr : null,
-          aggrStatuses
-        })
-      ),
-      this.renderXform(axis),
-      this.props.showFormat ? this.renderFormat(axis) : undefined,
-      this.renderColorMap(axis),
-      this.renderExcludedValues(axis)
+    return (
+      <div>
+        <div>
+          <ExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.table}
+            types={axisBuilder.getExprTypes(this.props.types)}
+            onChange={this.handleExprChange}
+            value={this.props.value ? this.props.value.expr : null}
+            aggrStatuses={aggrStatuses}
+          />
+        </div>
+        {this.renderXform(axis)}
+        {this.props.showFormat ? this.renderFormat(axis) : undefined}
+        {this.renderColorMap(axis)}
+        {this.renderExcludedValues(axis)}
+      </div>
     )
   }
 }

package/src/axes/CategoryMapComponent.ts

@@ -44,7 +44,7 @@ export default class CategoryMapComponent extends React.Component<
 
   handleReorder = (map: any) => {
     const order = _.pluck(map, "value")
-    return this.props.onChange(update(this.props.axis, { drawOrder: { $set: order } }))
+    this.props.onChange(update(this.props.axis, { drawOrder: { $set: order } }))
   }
 
   handleColorChange = (value: any, color: any) => {
@@ -56,7 +56,7 @@ export default class CategoryMapComponent extends React.Component<
       colorMap.push({ value, color })
     }
 
-    return this.props.onChange(update(this.props.axis, { colorMap: { $set: colorMap } }))
+    this.props.onChange(update(this.props.axis, { colorMap: { $set: colorMap } }))
   }
 
   handleExcludeChange = (value: any, ev: any) => {
@@ -67,7 +67,7 @@ export default class CategoryMapComponent extends React.Component<
       excludedValues = _.union(this.props.axis.excludedValues || [], [value])
     }
 
-    return this.props.onChange(update(this.props.axis, { excludedValues: { $set: excludedValues } }))
+    this.props.onChange(update(this.props.axis, { excludedValues: { $set: excludedValues } }))
   }
 
   // Gets the current color value if known
@@ -82,7 +82,7 @@ export default class CategoryMapComponent extends React.Component<
   handleNullLabelChange = (e: any) => {
     const name = prompt(T`Enter label for none value`, this.props.axis.nullLabel || T`None`)
     if (name) {
-      return this.props.onChange(update(this.props.axis, { nullLabel: { $set: name } }))
+      this.props.onChange(update(this.props.axis, { nullLabel: { $set: name } }))
     }
   }
 

package/src/axes/RangesComponent.ts

@@ -95,7 +95,8 @@ export default class RangesComponent extends React.Component<RangesComponentProp
         "button",
         { className: "btn btn-link btn-sm", type: "button", onClick: this.handleAddRange },
         R("span", { className: "fas fa-plus" }),
-        T` Add Range`
+        " ",
+        T`Add Range`
       )
     )
   }
@@ -145,7 +146,7 @@ class RangeComponent extends React.Component<RangeComponentProps> {
 
     if (this.props.range.maxValue != null) {
       if (placeholder) {
-        placeholder += T` and `
+        placeholder += ` ${T`and`} `
       }
       if (this.props.range.maxOpen) {
         placeholder += `< ${this.props.range.maxValue}`