@mwater/visualization 5.1.0 → 5.3.0

package/src/axes/Axis.ts

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

package/src/axes/AxisBuilder.ts

@@ -12,6 +12,7 @@ import { default as produce } from "immer"
 import { formatValue } from "../valueFormatter"
 import { Axis, AxisCategory } from "./Axis"
 import { JsonQLExpr, JsonQLSelectQuery } from "@mwater/jsonql"
+import dayjs from '../dayjs'
 
 const xforms: { type: string; input: LiteralType; output: LiteralType }[] = [
   { type: "bin", input: "number", output: "enum" },
@@ -913,10 +914,9 @@ export default class AxisBuilder {
         if (values.length === 0) {
           return [noneCategory]
         }
-
         if (options.onlyValuesPresent) {
           // Sort and take only present
-          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: moment(value, "YYYY-MM-DD").format("ll") }))
+          categories = _.sortBy(_.uniq(values), item => item).map(value => ({ value, label: formatValue("date", value, axis.format)}))
   
           if (hasNone) {
             categories.push(noneCategory)
@@ -930,12 +930,12 @@ export default class AxisBuilder {
         max = values.sort().slice(-1)[0]
 
         // Use moment to get range
-        current = moment(min, "YYYY-MM-DD")
-        end = moment(max, "YYYY-MM-DD")
+        current = dayjs(min)
+        end = dayjs(max)
         categories = []
         while (!current.isAfter(end)) {
-          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("ll") })
-          current.add(1, "days")
+          categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(axis.format ?? "ll") })
+          current = current.add(1, "days")
           if (categories.length >= 1000) {
             break
           }
@@ -949,8 +949,10 @@ export default class AxisBuilder {
     return []
   }
 
-  // Get type of axis output
-  getAxisType(axis: any): LiteralType | null {
+  /**
+   * Get type of axis output
+   */
+  getAxisType(axis: Axis | null | undefined): LiteralType | null {
     if (!axis) {
       return null
     }
@@ -971,19 +973,19 @@ export default class AxisBuilder {
   }
 
   // Determines if axis is aggregate
-  isAxisAggr(axis: any) {
+  isAxisAggr(axis: Axis | null | undefined) {
     // Legacy support of axis.aggr
     return axis != null && (axis.aggr || this.exprUtils.getExprAggrStatus(axis.expr) === "aggregate")
   }
 
   // Determines if axis supports cumulative values (number, date or year-quarter)
-  doesAxisSupportCumulative(axis: any) {
+  doesAxisSupportCumulative(axis: Axis) {
     const axisType = this.getAxisType(axis)
     return axisType == "date" || axisType == "number" || axis.xform?.type === "yearquarter"
   }
 
   // Converts a category to a string (uses label or override)
-  formatCategory(axis: any, category: any) {
+  formatCategory(axis: Axis, category: any) {
     const categoryLabel = axis.categoryLabels ? axis.categoryLabels[JSON.stringify(category.value)] : undefined
     if (categoryLabel) {
       return categoryLabel
@@ -1055,9 +1057,10 @@ export default class AxisBuilder {
           _.map(value as string[], (v, i) => R("div", { key: i }, v))
         )
       case "date":
-        return moment(value, moment.ISO_8601).format("ll")
+        console.log(axis)
+        return formatValue(type, value, axis.format)
       case "datetime":
-        return moment(value, moment.ISO_8601).format("lll")
+        return formatValue(type, value, axis.format)
     }
 
     return "" + value

package/src/axes/AxisComponent.ts

@@ -1,10 +1,9 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import uuid from "uuid"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
-import { ExprComponent } from "@mwater/expressions-ui"
+import { ExprComponent, LocaleContext } from "@mwater/expressions-ui"
 import { AggrStatus, DataSource, ExprUtils, LiteralType, OpExpr, Schema } from "@mwater/expressions"
 import AxisBuilder from "./AxisBuilder"
 import update from "update-object"
@@ -29,7 +28,7 @@ export interface AxisComponentProps {
   /** Optional types to limit to */
   types?: LiteralType[]
   aggrNeed: "none" | "optional" | "required"
-  value?: Axis
+  value?: Axis | null
   onChange: (axis: Axis | null) => void
   /** Makes this a required value */
   required?: boolean
@@ -63,7 +62,7 @@ export default class AxisComponent extends AsyncLoadComponent<
     autosetColors: true
   }
 
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)

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

@@ -1,20 +1,26 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
-import React from "react"
-const R = React.createElement
+import React, { useContext } from "react"
 
 import ColorSchemeFactory from "../ColorSchemeFactory"
-import { Axis, AxisCategory } from "./Axis"
+import { Axis, AxisCategory, ColorMap } from "./Axis"
+import { CustomColorsContext } from "../CustomColorsContext"
 
 export interface ColorPaletteCollectionComponentProps {
-  onPaletteSelected: any
   axis: Axis
   categories: AxisCategory[]
-  onCancel: any
+  onPaletteSelected: (colorMap: ColorMap) => void
+  onCancel: () => void
 }
 
-export default class ColorPaletteCollectionComponent extends React.Component<ColorPaletteCollectionComponentProps> {
-  static palettes = [
+interface Palette {
+  type: string
+  reversed: boolean
+  /** Override colors if type is "custom" */
+  colors?: string[]
+}
+
+function ColorPaletteCollectionComponent(props: ColorPaletteCollectionComponentProps) {
+  const palettes: Palette[] = [
     { type: "schemeSet1", reversed: false },
     { type: "schemeSet2", reversed: false },
     { type: "schemeSet3", reversed: false },
@@ -79,85 +85,105 @@ export default class ColorPaletteCollectionComponent extends React.Component<Col
     { type: "interpolateRdYlGn", reversed: true }
   ]
 
-  onPaletteSelected = (index: any) => {
-    // Generate color map
-    const scheme = ColorSchemeFactory.createColorScheme({
-      type: ColorPaletteCollectionComponent.palettes[index].type,
-      // Null doesn't count to length
-      number: _.any(this.props.categories, (c) => c.value == null)
-        ? this.props.categories.length - 1
-        : this.props.categories.length,
-      reversed: ColorPaletteCollectionComponent.palettes[index].reversed
+  // Get custom colors
+  const customColorsContext = useContext(CustomColorsContext)
+
+  // Number of colors needed. Null doesn't count to length
+  const numColors = props.categories.filter((c) => c.value != null).length
+
+  if (customColorsContext && customColorsContext.customColors.filter((c) => c != null).length > 0) {
+    const filteredCustomColors = customColorsContext.customColors.filter((c) => c != null)
+    const customPalettes: Palette[] = []
+    for (let i = 0; i < filteredCustomColors.length; i += 6) {
+      const customPalette = filteredCustomColors.slice(i, i + 6)
+      customPalettes.push({ type: "custom", reversed: false, colors: customPalette })
+    }
+    palettes.unshift(...customPalettes)
+  }
+
+  function generatePaletteColors(palette: Palette, numColors: number) {
+    if (palette.type === "custom") {
+      return palette.colors!
+    }
+
+    return ColorSchemeFactory.createColorScheme({
+      type: palette.type,
+      number: numColors,
+      reversed: palette.reversed
     })
+  }
 
-    const colorMap = _.map(this.props.categories, (category, i) => ({
+  const onPaletteSelected = (index: number) => {
+    // Generate color map
+    const scheme = generatePaletteColors(palettes[index], Math.min(numColors, 6))
+
+    const colorMap = _.map(props.categories, (category, i) => ({
       value: category.value,
       color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
     }))
-    return this.props.onPaletteSelected(colorMap)
+    return props.onPaletteSelected(colorMap)
   }
 
-  renderCancel = () => {
-    if (this.props.axis.colorMap) {
-      return R(
-        "div",
-        null,
-        R("a", { className: "link-plain", onClick: this.props.onCancel, key: "cancel-customize" }, "Cancel")
+  const renderCancel = () => {
+    if (props.axis.colorMap) {
+      return (
+        <div>
+          <a className="link-plain" onClick={props.onCancel} key="cancel-customize">
+            Cancel
+          </a>
+        </div>
       )
     }
     return null
   }
 
-  render() {
-    return R(
-      "div",
-      null,
-      R("p", null, "Please select a color scheme"),
-      _.map(ColorPaletteCollectionComponent.palettes, (config, index) => {
-        return R(ColorPaletteComponent, {
-          key: index,
-          index,
-          colorSet: ColorSchemeFactory.createColorScheme({
-            type: config.type,
-            number: Math.min(this.props.categories.length - 1, 6),
-            reversed: config.reversed
-          }),
-          onPaletteSelected: this.onPaletteSelected,
-          number: this.props.categories.length
-        })
-      }),
-      this.renderCancel()
+  function renderPalette(palette: Palette, index: number) {
+    return (
+      <ColorPaletteComponent
+        key={index}
+        index={index}
+        colorSet={generatePaletteColors(palette, 6)}
+        onPaletteSelected={onPaletteSelected}
+      />
     )
   }
+
+
+  return (
+    <div>
+      <p>Please select a color scheme</p>
+      {palettes.map((palette, index) => renderPalette(palette, index))}
+      {renderCancel()}
+    </div>
+  )
 }
 
+export default ColorPaletteCollectionComponent
+
 interface ColorPaletteComponentProps {
   index: number
-  colorSet: any
-  onPaletteSelected: any
-  number?: number
+  colorSet: string[]
+  onPaletteSelected: (index: number) => void
 }
 
 class ColorPaletteComponent extends React.Component<ColorPaletteComponentProps> {
-  static defaultProps = { number: 6 }
-
   handleSelect = () => {
     return this.props.onPaletteSelected(this.props.index)
   }
 
   render() {
-    return R(
-      "div",
-      { onClick: this.handleSelect, className: "axis-palette" },
-      _.map(this.props.colorSet.slice(0, this.props.number), (color, i) => {
-        const cellStyle = {
-          display: "inline-block",
-          height: 20,
-          width: 20,
-          backgroundColor: color
-        }
-        return R("div", { style: cellStyle, key: i }, " ")
-      })
+    return (
+      <div onClick={this.handleSelect} className="axis-palette">
+        {_.map(this.props.colorSet, (color, i) => {
+          const cellStyle: React.CSSProperties = {
+            display: "inline-block",
+            height: 20,
+            width: 20,
+            backgroundColor: color
+          }
+          return <div style={cellStyle} key={i}> </div>
+        })}
+      </div>
     )
   }
 }