@mwater/visualization 5.2.0 → 5.3.1

package/src/MWaterContextComponent.tsx

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { createContext } from "react"
 const R = React.createElement
@@ -11,6 +10,7 @@ import { DataSource, Schema, Section } from "@mwater/expressions"
 import { CustomTableSelectComponentFactoryContext, CustomTableSelectComponentFactoryOptions, DecorateScalarExprTreeSectionChildrenContext, DecorateScalarExprTreeSectionChildrenOptions } from "@mwater/expressions-ui"
 import { IsScalarExprTreeSectionInitiallyOpenContext, IsScalarExprTreeSectionMatchContext } from "@mwater/expressions-ui"
 import { GlobalFilter } from "./GlobalFilter"
+import { AddLayerComponentProps } from "./maps/AddLayerComponent"
 
 
 export interface GlobalFiltersElementFactoryProps {
@@ -28,6 +28,9 @@ export type GlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryPro
 
 export const GlobalFiltersElementFactoryContext = createContext<GlobalFiltersElementFactory | null>(null)
 
+export type AddLayerElementFactory = (props: AddLayerComponentProps) => React.ReactElement | null
+
+export const AddLayerElementFactoryContext = createContext<AddLayerElementFactory | undefined>(undefined)
 
 /** 
  * Creates several contexts to allow selecting of a table in an mWater-friendly way
@@ -44,12 +47,8 @@ export default class MWaterContextComponent extends React.Component<{
   /**  Called when extra tables are changed and schema will be reloaded */
   onExtraTablesChange?: (extraTables: string[]) => void
   /**  Override default add layer component. See AddLayerComponent for details */
-  addLayerElementFactory?: any
+  addLayerElementFactory?: AddLayerElementFactory
 }> {
-  static childContextTypes = {
-    addLayerElementFactory: PropTypes.func, // Call with props of AddLayerComponent
-  }
-
   createTableSelectElementFactory = (options: CustomTableSelectComponentFactoryOptions) => {
     return (
       <MWaterTableSelectComponent
@@ -67,16 +66,6 @@ export default class MWaterContextComponent extends React.Component<{
     )
   }
 
-  getChildContext() {
-    const context: any = {}
-
-    if (this.props.addLayerElementFactory) {
-      context.addLayerElementFactory = this.props.addLayerElementFactory
-    }
-
-    return context
-  }
-
   createGlobalFiltersElementFactory = (props: GlobalFiltersElementFactoryProps) => {
     if (props.nullIfIrrelevant && !_.any(props.filterableTables, (t: string) => t.match(/^entities./))) {
       return null
@@ -148,7 +137,9 @@ export default class MWaterContextComponent extends React.Component<{
         <IsScalarExprTreeSectionMatchContext.Provider value={this.isScalarExprTreeSectionMatch}>
           <IsScalarExprTreeSectionInitiallyOpenContext.Provider value={this.isScalarExprTreeSectionInitiallyOpen}>
             <DecorateScalarExprTreeSectionChildrenContext.Provider value={this.decorateScalarExprTreeSectionChildren}>
-              {this.props.children}
+              <AddLayerElementFactoryContext.Provider value={this.props.addLayerElementFactory}>
+                {this.props.children}
+              </AddLayerElementFactoryContext.Provider>
             </DecorateScalarExprTreeSectionChildrenContext.Provider>
           </IsScalarExprTreeSectionInitiallyOpenContext.Provider>
 

package/src/MWaterLoaderComponent.ts

@@ -6,7 +6,7 @@ import { DataSource, Schema } from "@mwater/expressions"
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent"
 import LoadingComponent from "@mwater/react-library/lib/LoadingComponent"
 import mWaterLoader from "./mWaterLoader"
-import MWaterContextComponent from "./MWaterContextComponent"
+import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent"
 
 /**
  * Loads an mWater schema from the server and creates child with schema and dataSource
@@ -29,10 +29,12 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
     /** Locales of the schema to load. Default is all. */
     locales?: string[]
     /**  Override default add layer component. See AddLayerComponent for details */
-    addLayerElementFactory?: any
+    addLayerElementFactory?: AddLayerElementFactory
     children: (error: any, config?: { schema: Schema; dataSource: DataSource }) => ReactElement<any>
     /** Custom error formatter that returns React node or string, gets passed the error response from server */
     errorFormatter?: (data: any, defaultError: string) => string
+    /** Origin of usage. e.g. "dashboards:43445364..." */
+    origin?: string
   },
   {
     error: any
@@ -73,7 +75,8 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<
         share: props.share,
         asUser: props.asUser,
         extraTables: props.extraTables,
-        locales: props.locales
+        locales: props.locales,
+        origin: props.origin
       },
       (error: any, config: any) => {
         if (error) {

package/src/MWaterTableSelectComponent.tsx

@@ -7,7 +7,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
-import { ActiveTablesContext } from "@mwater/expressions-ui"
+import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface MWaterTableSelectComponentProps {
   /** Url to hit api */
@@ -36,9 +36,7 @@ export default class MWaterTableSelectComponent extends React.Component<
   MWaterTableSelectComponentProps,
   MWaterTableSelectComponentState
 > {
-  static contextTypes = {
-    locale: PropTypes.string, // e.g. "en"
-  }
+  static contextType = LocaleContext
   
   toggleEdit: any
 
@@ -139,9 +137,12 @@ export default class MWaterTableSelectComponent extends React.Component<
         },
         forceOpen: !this.props.table, // Must have table
         label: this.props.table
-          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context.locale)
+          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
           : "",
-        editor
+        editor,
+        onRemove: () => {
+          this.props.onChange(null)
+        }
       }),
 
       // Make sure table still exists
@@ -184,9 +185,7 @@ class EditModeTableSelectComponent extends React.Component<
   EditModeTableSelectComponentProps,
   EditModeTableSelectComponentState
 > {
-  static contextTypes = {
-    locale: PropTypes.string, // e.g. "en"
-  }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -237,7 +236,7 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Sort by name
     tables = _.sortBy(tables, (tableId) =>
-      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context.locale)
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, this.context)
     )
 
     return tables
@@ -279,8 +278,8 @@ class EditModeTableSelectComponent extends React.Component<
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
                   const table = this.props.schema.getTable(tableId)!
                   return {
-                    name: ExprUtils.localizeString(table.name, this.context.locale),
-                    desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                    name: ExprUtils.localizeString(table.name, this.context),
+                    desc: ExprUtils.localizeString(table.desc, this.context),
                     onClick: () => this.props.onChange(table.id)
                   }
                 })} />

package/src/{UIComponents.ts → UIComponents.tsx}

@@ -9,6 +9,7 @@ import { Radio } from "@mwater/react-library/lib/bootstrap"
 export interface SectionComponentProps {
   icon?: string
   label?: any
+  required?: boolean
 }
 
 // Miscellaneous ui components
@@ -28,7 +29,8 @@ export class SectionComponent extends React.Component<SectionComponentProps> {
         this.props.icon && this.props.icon.match(/^glyphicon-/)
           ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
           : undefined,
-        this.props.label
+        this.props.label,
+        this.props.required ? <span style={{ color: "red" }}> *</span> : undefined
       ),
       R("div", { style: { marginLeft: 10 } }, this.props.children)
     )
@@ -205,7 +207,7 @@ export interface ToggleEditComponentProps {
   initiallyOpen?: boolean
   label: any
   editor: any
-  onRemove?: any
+  onRemove?: () => void
 }
 
 interface ToggleEditComponentState {
@@ -221,25 +223,15 @@ export class ToggleEditComponent extends React.Component<ToggleEditComponentProp
   }
 
   close = () => {
-    // Save height of editor
-    if (this.editorComp) {
-      this.editorHeight = ReactDOM.findDOMNode(this.editorComp).clientHeight
-    }
-
-    return this.setState({ open: false })
+    this.setState({ open: false })
   }
 
   open = () => {
-    return this.setState({ open: true })
+    this.setState({ open: true })
   }
 
   handleToggle = () => {
-    return this.setState({ open: !this.state.open })
-  }
-
-  // Save editor comp
-  editorRef = (editorComp: any) => {
-    return (this.editorComp = editorComp)
+    this.setState({ open: !this.state.open })
   }
 
   render() {

package/src/axes/AxisBuilder.ts

@@ -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

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 customPalettes: Palette[] = []
+    for (let i = 0; i < customColorsContext.customColors.length; i += 6) {
+      const customPalette = customColorsContext.customColors.slice(i, i + 6)
+      customPalettes.push({ type: "custom", reversed: false, colors: customPalette.filter((c) => c != null) as string[] })
+    }
+    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">
+        {_.range(Math.max(6, this.props.colorSet.length)).map((i) => {
+          const color = this.props.colorSet[i]
+          const cellStyle: React.CSSProperties = {
+            display: "inline-block",
+            height: 20,
+            width: 20,
+            backgroundColor: color ?? "transparent"
+          }
+          return <div style={cellStyle} key={i}> </div>
+        })}
+      </div>
     )
   }
 }