@mwater/visualization 5.3.1 → 5.4.0

package/src/axes/AxisBuilder.ts

@@ -187,27 +187,27 @@ export default class AxisBuilder {
     // xform validation
     if (options.axis.xform && options.axis.xform.type === "bin") {
       if (!options.axis.xform.numBins) {
-        return "Missing numBins"
+        return T`Missing numBins`
       }
       if (options.axis.xform.min == null) {
-        return "Missing min"
+        return T`Missing min`
       }
       if (options.axis.xform.max == null) {
-        return "Missing max"
+        return T`Missing max`
       }
       if (options.axis.xform.max < options.axis.xform.min) {
-        return "Max < min"
+        return T`Max < min`
       }
     }
 
     // xform validation
     if (options.axis.xform && options.axis.xform.type === "ranges") {
       if (!options.axis.xform.ranges || !_.isArray(options.axis.xform.ranges)) {
-        return "Missing ranges"
+        return T`Missing ranges`
       }
       for (let range of options.axis.xform.ranges) {
         if (range.minValue != null && range.maxValue != null && range.minValue > range.maxValue) {
-          return "Max < min"
+          return T`Max < min`
         }
       }
     }
@@ -397,8 +397,7 @@ export default class AxisBuilder {
   // from (select expression as val, ntile(numBins + 2) over (order by expression asc) as ntilenum
   // from the_table where exprssion is not null)
   // where inner.ntilenum > 1 and inner.ntilenum < numBins + 2
-  // Inspired by: http://dba.stackexchange.com/questions/17086/fast-general-method-to-calculate-percentiles
-  // expr is mwater expression on table
+  // Inspired by: http://dba.stackexchange.com/questions/17086/fast-general-method-to-calculate-percentiles  // expr is mwater expression on table
   // filterExpr is optional filter on values to include
   // Result can be null if no query could be computed
   compileBinMinMax(expr: any, table: any, filterExpr: any, numBins: any) {
@@ -514,7 +513,7 @@ export default class AxisBuilder {
     onlyValuesPresent?: boolean
   } = {}): AxisCategory[] {
     let categories: AxisCategory[], current, end, format, label, max, min, value, year
-    const noneCategory = { value: null, label: axis.nullLabel || "None" }
+    const noneCategory = { value: null, label: axis.nullLabel || T`None` }
     const hasNone = _.any(values || [], (v) => v == null)
 
     // Handle ranges
@@ -533,7 +532,7 @@ export default class AxisBuilder {
 
             if (range.maxValue != null) {
               if (label) {
-                label += " and "
+                label += T` and `
               }
               if (range.maxOpen) {
                 label += `< ${range.maxValue}`
@@ -565,9 +564,9 @@ export default class AxisBuilder {
       // Special case of single value (min and max within epsilon or 0.01% of each other since epsilon might be too small to add to a big number)
       if (max - min <= epsilon || Math.abs((max - min) / (max + min)) < 0.0001) {
         return [
-          { value: 0, label: `< ${min}` },
-          { value: 1, label: `= ${min}` },
-          { value: axis.xform.numBins! + 1, label: `> ${min}` },
+          { value: 0, label: T`< ${min}` },
+          { value: 1, label: T`= ${min}` },
+          { value: axis.xform.numBins! + 1, label: T`> ${min}` },
           noneCategory
         ]
       }
@@ -583,7 +582,7 @@ export default class AxisBuilder {
       categories = []
 
       if (!axis.xform.excludeLower) {
-        categories.push({ value: 0, label: `< ${format(min)}` })
+        categories.push({ value: 0, label: T`< ${format(min)}` })
       }
 
       for (let i = 1, end1 = numBins, asc = 1 <= end1; asc ? i <= end1 : i >= end1; asc ? i++ : i--) {
@@ -593,7 +592,7 @@ export default class AxisBuilder {
       }
 
       if (!axis.xform.excludeUpper) {
-        categories.push({ value: axis.xform.numBins! + 1, label: `> ${format(max)}` })
+        categories.push({ value: axis.xform.numBins! + 1, label: T`> ${format(max)}` })
       }
 
       categories.push(noneCategory)
@@ -627,18 +626,18 @@ export default class AxisBuilder {
 
     if (axis.xform && axis.xform.type === "month") {
       categories = [
-        { value: "01", label: "January" },
-        { value: "02", label: "February" },
-        { value: "03", label: "March" },
-        { value: "04", label: "April" },
-        { value: "05", label: "May" },
-        { value: "06", label: "June" },
-        { value: "07", label: "July" },
-        { value: "08", label: "August" },
-        { value: "09", label: "September" },
-        { value: "10", label: "October" },
-        { value: "11", label: "November" },
-        { value: "12", label: "December" }
+        { value: "01", label: T`January` },
+        { value: "02", label: T`February` },
+        { value: "03", label: T`March` },
+        { value: "04", label: T`April` },
+        { value: "05", label: T`May` },
+        { value: "06", label: T`June` },
+        { value: "07", label: T`July` },
+        { value: "08", label: T`August` },
+        { value: "09", label: T`September` },
+        { value: "10", label: T`October` },
+        { value: "11", label: T`November` },
+        { value: "12", label: T`December` }
       ]
 
       // Add none if needed
@@ -722,7 +721,7 @@ export default class AxisBuilder {
 
       if (options.onlyValuesPresent) {
         // Sort and take only present
-        categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: moment(value, "YYYY-MM-DD").format("MMM YYYY") }))
+        categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: moment(value, "YYYY-MM-DD").format(T`MMM YYYY`) }))
 
         if (hasNone) {
           categories.push(noneCategory)
@@ -740,7 +739,7 @@ export default class AxisBuilder {
       end = moment(max, "YYYY-MM-DD")
       categories = []
       while (!current.isAfter(end)) {
-        categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("MMM YYYY") })
+        categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(T`MMM YYYY`) })
         current.add(1, "months")
         if (categories.length >= 1000) {
           break
@@ -808,13 +807,13 @@ export default class AxisBuilder {
           const year = value.substr(0, 4)
           const quarter = value.substr(value.length - 1, 1)
           if (quarter === "1") {
-            label = `${year} Jan-Mar`
+            label = `${year} ${T`Jan-Mar`}`
           } else if (quarter === "2") {
-            label = `${year} Apr-Jun`
+            label = `${year} ${T`Apr-Jun`}`
           } else if (quarter === "3") {
-            label = `${year} Jul-Sep`
+            label = `${year} ${T`Jul-Sep`}`
           } else if (quarter === "4") {
-            label = `${year} Oct-Dec`
+            label = `${year} ${T`Oct-Dec`}`
           } else {
             label = ""
           }
@@ -841,13 +840,13 @@ export default class AxisBuilder {
         const quarter = current.format("Q")
         year = current.format("YYYY")
         if (quarter === "1") {
-          label = `${year} Jan-Mar`
+          label = `${year} ${T`Jan-Mar`}`
         } else if (quarter === "2") {
-          label = `${year} Apr-Jun`
+          label = `${year} ${T`Apr-Jun`}`
         } else if (quarter === "3") {
-          label = `${year} Jul-Sep`
+          label = `${year} ${T`Jul-Sep`}`
         } else if (quarter === "4") {
-          label = `${year} Oct-Dec`
+          label = `${year} ${T`Oct-Dec`}`
         } else {
           label = ""
         }
@@ -899,7 +898,7 @@ export default class AxisBuilder {
         // Return unique values
         categories = _.map(_.compact(_.uniq(values || [])).sort(), (v) => ({
           value: v,
-          label: v || "None"
+          label: v || T`None`
         }))
         if (hasNone) {
           categories.push(noneCategory)
@@ -908,7 +907,7 @@ export default class AxisBuilder {
         return categories
       case "boolean":
         // Return unique values
-        return [{ value: true, label: "True" }, { value: false, label: "False" }, noneCategory]
+        return [{ value: true, label: T`True` }, { value: false, label: T`False` }, noneCategory]
       case "date":
         values = _.compact(values || [])
         if (values.length === 0) {
@@ -997,7 +996,7 @@ export default class AxisBuilder {
   // Summarize axis as a string
   summarizeAxis(axis: Axis, locale?: string) {
     if (!axis) {
-      return "None"
+      return T`None`
     }
 
     return this.exprUtils.summarizeExpr(axis.expr, locale)
@@ -1007,7 +1006,7 @@ export default class AxisBuilder {
   // Get a string (or React DOM actually) representation of an axis value
   formatValue(axis: Axis, value: any, locale?: string, legacyPercentFormat?: any) {
     if (value == null) {
-      return axis?.nullLabel || "None"
+      return axis?.nullLabel || T`None`
     }
 
     const type = this.getAxisType(axis)
@@ -1025,7 +1024,7 @@ export default class AxisBuilder {
           if (category) {
             return this.formatCategory(axis, category)
           } else {
-            return "???"
+            return T`???`
           }
         }).join(", ")
       } else {
@@ -1033,7 +1032,7 @@ export default class AxisBuilder {
         if (category) {
           return this.formatCategory(axis, category)
         } else {
-          return "???"
+          return T`???`
         }
       }
     }
@@ -1197,7 +1196,6 @@ export default class AxisBuilder {
           exprs: [expr]
         }
       }
-
       if (xform.type === "yearmonth") {
         expr = {
           table,

package/src/axes/AxisColorEditorComponent.tsx

@@ -0,0 +1,178 @@
+import _ from "lodash"
+import React from "react"
+import CategoryMapComponent from "./CategoryMapComponent"
+import ColorSchemeFactory from "../ColorSchemeFactory"
+import ColorPaletteCollectionComponent from "./ColorPaletteCollectionComponent"
+import AxisBuilder from "./AxisBuilder"
+import produce from "immer"
+import { Axis, AxisCategory, ColorMap } from "./Axis"
+import { Schema } from "@mwater/expressions"
+
+export interface AxisColorEditorComponentProps {
+  schema: Schema
+  axis: Axis
+  /** Called with new axis */
+  onChange: (axis: Axis) => void
+
+  /** Categories of the axis */
+  categories?: AxisCategory[]
+
+  /** is the color map reorderable */
+  reorderable?: boolean
+
+  defaultColor?: string
+  /** True to allow excluding of values via checkboxes */
+  allowExcludedValues?: boolean
+  /** True to start values expanded */
+  initiallyExpanded?: boolean
+  /** True to automatically set the colors if blank */
+  autosetColors?: boolean
+}
+
+interface AxisColorEditorComponentState {
+  mode: "normal" | "palette"
+}
+
+// Color editor for axis. Allows switching between editing individial colors (using CategoryMapComponent)
+// and setting the colors from a palette (using ColorPaletteCollectionComponent)
+export default class AxisColorEditorComponent extends React.Component<
+  AxisColorEditorComponentProps,
+  AxisColorEditorComponentState
+> {
+  static defaultProps = {
+    reorderable: false,
+    autosetColors: true
+  }
+
+  constructor(props: AxisColorEditorComponentProps) {
+    super(props)
+
+    this.state = {
+      mode: "normal"
+    }
+  }
+
+  componentDidMount() {
+    this.updateColorMap()
+  }
+
+  componentDidUpdate() {
+    this.updateColorMap()
+  }
+
+  // Update color map if categories no longer match
+  updateColorMap() {
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+
+    // If no categories, can't do anything
+    if (!this.props.categories) {
+      return
+    }
+
+    // If no color map or color map values have changed
+    if (
+      !this.props.axis.colorMap ||
+      !_.isEqual(_.pluck(this.props.axis.colorMap, "value").sort(), _.pluck(this.props.categories, "value").sort())
+    ) {
+      let colorMap
+      if (this.props.autosetColors) {
+        // Find categories that are not in the color map
+        const missingCategories = _.filter(this.props.categories, (category) => !(this.props.axis.colorMap || []).find(cm => cm.value === category.value))
+        if (missingCategories.length == 0) {
+          return
+        }
+        const missingColorMap = ColorSchemeFactory.createColorMapForCategories(
+          missingCategories,
+          axisBuilder.isCategorical(this.props.axis)
+        )
+        colorMap = (this.props.axis.colorMap || []).concat(missingColorMap)
+      } else {
+        // Keep existing
+        const existing = _.indexBy(this.props.axis.colorMap || [], "value")
+        colorMap = _.map(this.props.categories, (category) => ({
+          value: category.value,
+          color: existing[category.value] ? existing[category.value].color : null
+        }))
+      }
+
+      this.handlePaletteChange(colorMap)
+      this.setState({ mode: "normal" })
+    }
+  }
+
+  handleSelectPalette = () => {
+    this.setState({ mode: "palette" })
+  }
+
+  handleResetPalette = () => {
+    // Completely reset
+    const colorMap = _.map(this.props.categories || [], (category) => ({
+      value: category.value,
+      color: null
+    }))
+
+    this.handlePaletteChange(colorMap)
+    this.setState({ mode: "normal" })
+  }
+
+  handlePaletteChange = (palette: ColorMap) => {
+    this.props.onChange(
+      produce(this.props.axis, (draft) => {
+        draft.colorMap = palette
+        draft.drawOrder = _.pluck(palette, "value")
+      })
+    )
+    this.setState({ mode: "normal" })
+  }
+
+  handleCancelCustomize = () => {
+    this.setState({ mode: "normal" })
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.mode === "palette" && this.props.categories && (
+          <ColorPaletteCollectionComponent
+            onPaletteSelected={this.handlePaletteChange}
+            axis={this.props.axis}
+            categories={this.props.categories}
+            onCancel={this.handleCancelCustomize}
+          />
+        )}
+
+        {this.state.mode === "normal" && (
+          <div>
+            <p>
+              <a className="link-plain" onClick={this.handleSelectPalette}>
+                {T`Change color scheme`}
+              </a>
+              {!this.props.autosetColors && (
+                <a className="btn btn-sm btn-link" onClick={this.handleResetPalette}>
+                  {T`Reset colors`}
+                </a>
+              )}
+            </p>
+
+            {this.props.axis.colorMap && (
+              <div>
+                <div>
+                  <CategoryMapComponent
+                    schema={this.props.schema}
+                    axis={this.props.axis}
+                    onChange={this.props.onChange}
+                    categories={this.props.categories}
+                    reorderable={this.props.reorderable}
+                    allowExcludedValues={this.props.allowExcludedValues}
+                    showColorMap={true}
+                    initiallyExpanded={this.props.initiallyExpanded}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+}

package/src/axes/AxisComponent.ts

@@ -106,7 +106,7 @@ export default class AxisComponent extends AsyncLoadComponent<
     }
 
     // Get categories (value + label)
-    let categories = axisBuilder.getCategories(axis, values)
+    let categories = axisBuilder.getCategories(axis, values, { locale: this.context })
 
     // Just "None" and so doesn't count
     if (_.any(categories, (category) => category.value != null)) {
@@ -165,7 +165,7 @@ export default class AxisComponent extends AsyncLoadComponent<
     }
 
     // Set expression and clear xform
-    return this.props.onChange(this.cleanAxis(_.extend({}, _.omit(this.props.value || {}, ["drawOrder"]), { expr })))
+    this.props.onChange(this.cleanAxis(_.extend({}, _.omit(this.props.value || {}, ["drawOrder"]), { expr })))
   }
 
   handleFormatChange = (ev: any) => {
@@ -278,9 +278,9 @@ export default class AxisComponent extends AsyncLoadComponent<
         R(ui.RadioToggleComponent, {
           value: axis.xform ? axis.xform.type : null,
           options: [
-            { value: "bin", label: "Equal Bins" },
-            { value: "ranges", label: "Custom Ranges" },
-            { value: "floor", label: "Whole Numbers" }
+            { value: "bin", label: T`Equal Bins` },
+            { value: "ranges", label: T`Custom Ranges` },
+            { value: "floor", label: T`Whole Numbers` }
           ],
           onChange: this.handleXformTypeChange
         }),
@@ -296,13 +296,13 @@ export default class AxisComponent extends AsyncLoadComponent<
         return R(ui.RadioToggleComponent, {
           value: axis.xform ? axis.xform.type : null,
           options: [
-            { value: null, label: "Exact Date" },
-            { value: "year", label: "Year" },
-            { value: "yearmonth", label: "Year/Month" },
-            { value: "month", label: "Month" },
-            { value: "week", label: "Week" },
-            { value: "yearweek", label: "Year/Week" },
-            { value: "yearquarter", label: "Year/Quarter" }
+            { value: null, label: T`Exact Date` },
+            { value: "year", label: T`Year` },
+            { value: "yearmonth", label: T`Year/Month` },
+            { value: "month", label: T`Month` },
+            { value: "week", label: T`Week` },
+            { value: "yearweek", label: T`Year/Week` },
+            { value: "yearquarter", label: T`Year/Quarter` }
           ],
           onChange: this.handleXformTypeChange
         })
@@ -310,13 +310,13 @@ export default class AxisComponent extends AsyncLoadComponent<
         return R(ui.RadioToggleComponent, {
           value: axis.xform ? axis.xform.type : null,
           options: [
-            { value: "date", label: "Date" },
-            { value: "year", label: "Year" },
-            { value: "yearmonth", label: "Year/Month" },
-            { value: "month", label: "Month" },
-            { value: "week", label: "Week" },
-            { value: "yearweek", label: "Year/Week" },
-            { value: "yearquarter", label: "Year/Quarter" }
+            { value: "date", label: T`Date` },
+            { value: "year", label: T`Year` },
+            { value: "yearmonth", label: T`Year/Month` },
+            { value: "month", label: T`Month` },
+            { value: "week", label: T`Week` },
+            { value: "yearweek", label: T`Year/Week` },
+            { value: "yearquarter", label: T`Year/Quarter` }
           ],
           onChange: this.handleXformTypeChange
         })
@@ -387,7 +387,7 @@ export default class AxisComponent extends AsyncLoadComponent<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Format"),
+      R("label", { className: "text-muted" }, T`Format`),
       ": ",
       R(
         "select",

package/src/axes/BinsComponent.tsx

@@ -102,7 +102,7 @@ export default class BinsComponent extends React.Component<BinsComponentProps, B
         { key: "vals" },
         R(
           LabeledInlineComponent,
-          { key: "min", label: "Min:" },
+          { key: "min", label: T`Min:` },
           R(NumberInputComponent, {
             small: true,
             value: this.props.xform.min,
@@ -112,7 +112,7 @@ export default class BinsComponent extends React.Component<BinsComponentProps, B
         " ",
         R(
           LabeledInlineComponent,
-          { key: "max", label: "Max:" },
+          { key: "max", label: T`Max:` },
           R(NumberInputComponent, {
             small: true,
             value: this.props.xform.max,
@@ -122,7 +122,7 @@ export default class BinsComponent extends React.Component<BinsComponentProps, B
         " ",
         R(
           LabeledInlineComponent,
-          { key: "numBins", label: "# of Bins:" },
+          { key: "numBins", label: T`# of Bins:` },
           R(NumberInputComponent, {
             small: true,
             value: this.props.xform.numBins,
@@ -134,7 +134,7 @@ export default class BinsComponent extends React.Component<BinsComponentProps, B
           if (this.state.guessing) {
             return R("i", { className: "fa fa-spinner fa-spin" })
           } else if (this.props.xform.min == null || this.props.xform.max == null || !this.props.xform.numBins) {
-            return R("span", { className: "text-danger", style: { paddingLeft: 10 } }, "Min and max are required")
+            return R("span", { className: "text-danger", style: { paddingLeft: 10 } }, T`Min and max are required`)
           }
           return null
         })()
@@ -146,13 +146,13 @@ export default class BinsComponent extends React.Component<BinsComponentProps, B
             inline
             value={!this.props.xform.excludeLower}
             onChange={(value) => this.props.onChange(update(this.props.xform, { excludeLower: { $set: !value } }))}
-          >{`Include < ${this.props.xform.min}`}</Checkbox>
+          >{T`Include < ${this.props.xform.min}`}</Checkbox>
           <Checkbox
             key="upper"
             inline
             value={!this.props.xform.excludeUpper}
             onChange={(value) => this.props.onChange(update(this.props.xform, { excludeUpper: { $set: !value } }))}
-          >{`Include > ${this.props.xform.max}`}</Checkbox>
+          >{T`Include > ${this.props.xform.max}`}</Checkbox>
         </div>
       ) : undefined
     )

package/src/axes/CategoryMapComponent.ts

@@ -1,15 +1,13 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
-import { ExprCompiler, Schema } from "@mwater/expressions"
-import AxisBuilder from "./AxisBuilder"
+import { Schema } from "@mwater/expressions"
 import update from "update-object"
 import ColorComponent from "../ColorComponent"
-import { ExprUtils } from "@mwater/expressions"
 import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
 import { default as produce } from "immer"
 import { Axis, AxisCategory } from "./Axis"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface CategoryMapComponentProps {
   schema: Schema
@@ -34,7 +32,9 @@ export default class CategoryMapComponent extends React.Component<
   CategoryMapComponentProps,
   CategoryMapComponentState
 > {
-  constructor(props: any) {
+  static contextType = LocaleContext
+
+  constructor(props: CategoryMapComponentProps) {
     super(props)
 
     this.state = {
@@ -80,7 +80,7 @@ export default class CategoryMapComponent extends React.Component<
   }
 
   handleNullLabelChange = (e: any) => {
-    const name = prompt("Enter label for none value", this.props.axis.nullLabel || "None")
+    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 } }))
     }
@@ -92,7 +92,7 @@ export default class CategoryMapComponent extends React.Component<
       label = this.props.axis.categoryLabels[JSON.stringify(category.value)] || label
     }
 
-    const name = prompt("Enter label or blank to reset", label)
+    const name = prompt(T`Enter label or blank to reset`, label)
     if (name != null) {
       if (name) {
         return this.props.onChange(
@@ -137,7 +137,7 @@ export default class CategoryMapComponent extends React.Component<
         "a",
         { className: "link-plain", onClick: this.handleNullLabelChange, style: { cursor: "pointer" } },
         label,
-        R("span", { style: { fontSize: 12, marginLeft: 4 } }, "(click to change label for none value)")
+        R("span", { style: { fontSize: 12, marginLeft: 4 } }, T`(click to change label for none value)`)
       )
     }
   }
@@ -246,7 +246,7 @@ export default class CategoryMapComponent extends React.Component<
         R(
           "a",
           { className: "link-plain", onClick: this.handleToggle },
-          "Show Values ",
+          T`Show Values `,
           R("i", { className: "fa fa-caret-down" })
         )
       )
@@ -257,7 +257,7 @@ export default class CategoryMapComponent extends React.Component<
         R(
           "a",
           { className: "link-plain", onClick: this.handleToggle },
-          "Hide Values ",
+          T`Hide Values `,
           R("i", { className: "fa fa-caret-up" })
         )
       )

package/src/axes/ColorPaletteCollectionComponent.tsx

@@ -114,7 +114,7 @@ function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentP
 
   const onPaletteSelected = (index: number) => {
     // Generate color map
-    const scheme = generatePaletteColors(palettes[index], Math.min(numColors, 6))
+    const scheme = generatePaletteColors(palettes[index], numColors)
 
     const colorMap = _.map(props.categories, (category, i) => ({
       value: category.value,
@@ -128,7 +128,7 @@ function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentP
       return (
         <div>
           <a className="link-plain" onClick={props.onCancel} key="cancel-customize">
-            Cancel
+            {T`Cancel`}
           </a>
         </div>
       )
@@ -150,7 +150,7 @@ function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentP
 
   return (
     <div>
-      <p>Please select a color scheme</p>
+      <p>{T`Please select a color scheme`}</p>
       {palettes.map((palette, index) => renderPalette(palette, index))}
       {renderCancel()}
     </div>