@mwater/visualization 5.1.0 → 5.3.0

package/src/widgets/charts/ChartWidget.ts

@@ -1,17 +1,9 @@
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import Widget, { CreateViewElementOptions } from "./../Widget"
-import DropdownWidgetComponent from "./../DropdownWidgetComponent"
-import CsvBuilder from "./../../CsvBuilder"
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
-import ChartViewComponent from "./ChartViewComponent"
-import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
-import * as ui from "@mwater/react-library/lib/bootstrap"
 import { DataSource, Schema } from "@mwater/expressions"
-import { WidgetDataSource } from "../WidgetDataSource"
 import Chart from "./Chart"
-import { JsonQLFilter } from "../../JsonQLFilter"
+import { ChartWidgetComponent } from "./ChartWidgetComponent"
 
 /** A widget which is a chart */
 export default class ChartWidget extends Widget {
@@ -48,7 +40,8 @@ export default class ChartWidget extends Widget {
       onDesignChange: options.onDesignChange,
       width: options.width,
       height: options.height,
-      onRowClick: options.onRowClick
+      onRowClick: options.onRowClick,
+      refreshKey: options.refreshKey
     })
   }
 
@@ -78,268 +71,3 @@ export default class ChartWidget extends Widget {
     return this.chart.isAutoHeight()
   }
 }
-
-interface ChartWidgetComponentProps {
-  /** schema to use */
-  schema: Schema
-  /** data source to use */
-  dataSource: DataSource
-  widgetDataSource: WidgetDataSource
-  /** Chart object to use */
-  chart: Chart
-  /** Design of chart */
-  design: any
-  /** null/undefined for readonly */
-  onDesignChange?: any
-
-  /** Width in pixels */
-  width: number
-
-  /** Height, if a fixed height widget, or one that uses aspect ratio */
-  height?: number
-
-  /** scope of the widget (when the widget self-selects a particular scope) */
-  scope?: any
-
-  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
-  filters: JsonQLFilter[]
-
-  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
-  onScopeChange?: any
-  /** Called with (tableId, rowId) when item is clicked */
-  onRowClick?: any
-  /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
-  connectMoveHandle?: any
-  /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
-  connectResizeHandle?: any
-}
-
-// Complete chart widget
-class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, { editDesign: any }> {
-  static contextTypes = { locale: PropTypes.string }
-
-  constructor(props: any) {
-    super(props)
-
-    this.state = {
-      // Design that is being edited. Change is propagated on closing window
-      editDesign: null
-    }
-  }
-
-  // Saves a csv file to disk
-  handleSaveCsvFile = () => {
-    // Get the data
-    return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
-      if (err) {
-        return alert("Failed to get data: " + err.message)
-      }
-
-      // Create data table
-      const table = this.props.chart.createDataTable(
-        this.props.design,
-        this.props.schema,
-        this.props.dataSource,
-        data,
-        this.context.locale
-      )
-      if (!table) {
-        return
-      }
-
-      // Convert to csv
-      let csv = new CsvBuilder().build(table)
-
-      // Add BOM
-      csv = "\uFEFF" + csv
-
-      // Make a blob and save
-      const blob = new Blob([csv], { type: "text/csv" })
-
-      // Require at use as causes server problems
-      const FileSaver = require("file-saver")
-      return FileSaver.saveAs(blob, "Exported Data.csv")
-    })
-  }
-
-  handleStartEditing = () => {
-    // Can't edit if already editing
-    if (this.state.editDesign) {
-      return
-    }
-    this.setState({ editDesign: this.props.design })
-  }
-
-  handleEndEditing = () => {
-    this.props.onDesignChange(this.state.editDesign)
-    this.setState({ editDesign: null })
-  }
-
-  handleCancelEditing = () => {
-    this.setState({ editDesign: null })
-  }
-
-  handleEditDesignChange = (design: any) => {
-    this.setState({ editDesign: design })
-  }
-
-  renderChart(design: any, onDesignChange: any, width: any, height: any) {
-    return R(ChartViewComponent, {
-      chart: this.props.chart,
-      design,
-      onDesignChange,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      widgetDataSource: this.props.widgetDataSource,
-      scope: this.props.scope,
-      filters: this.props.filters,
-      width,
-      height,
-      onScopeChange: this.props.onScopeChange,
-      onRowClick: this.props.onRowClick
-    })
-  }
-
-  renderEditor() {
-    if (!this.state.editDesign) {
-      return null
-    }
-
-    // Create editor
-    const editor = this.props.chart.createDesignerElement({
-      schema: this.props.schema,
-      filters: this.props.filters,
-      dataSource: this.props.dataSource,
-      design: this.state.editDesign,
-      onDesignChange: this.handleEditDesignChange
-    })
-
-    if (this.props.chart.hasDesignerPreview()) {
-      // Create chart (maxing out at half of width of screen)
-      const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width)
-      const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined
-      const chart = this.renderChart(
-        this.state.editDesign,
-        (design: any) => this.setState({ editDesign: design }),
-        chartWidth,
-        chartHeight
-      )
-
-      const content = R(
-        "div",
-        { style: { height: "100%", width: "100%" } },
-        R(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              border: "solid 2px #EEE",
-              borderRadius: 8,
-              padding: 10,
-              width: chartWidth + 20,
-              height: chartHeight != null ? chartHeight + 20 : undefined,
-              overflow: "hidden"
-            }
-          },
-          chart
-        ),
-        R(
-          "div",
-          { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } },
-          R(
-            "div",
-            {
-              style: {
-                width: "100%",
-                height: "100%",
-                overflowY: "auto",
-                paddingLeft: 20,
-                paddingRight: 20,
-                borderLeft: "solid 3px #AAA"
-              }
-            },
-            editor
-          )
-        )
-      )
-
-      return R(
-        ModalWindowComponent,
-        {
-          isOpen: true,
-          onRequestClose: this.handleEndEditing
-        },
-        content
-      )
-    } else {
-      return R(
-        ActionCancelModalComponent,
-        {
-          size: "large",
-          onCancel: this.handleCancelEditing,
-          onAction: this.handleEndEditing
-        },
-        editor
-      )
-    }
-  }
-
-  // Render a link to start editing
-  renderEditLink() {
-    return R(
-      "div",
-      { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing },
-      R(ui.Icon, { id: this.props.chart.getPlaceholderIcon() })
-    )
-  }
-
-  render() {
-    const design = this.props.chart.cleanDesign(this.props.design, this.props.schema)
-
-    // Determine if valid design
-    const validDesign = !this.props.chart.validateDesign(design, this.props.schema)
-
-    // Determine if empty
-    const emptyDesign = this.props.chart.isEmpty(design)
-
-    // Create dropdown items
-    const dropdownItems = this.props.chart.createDropdownItems(
-      design,
-      this.props.schema,
-      this.props.widgetDataSource,
-      this.props.filters
-    )
-    if (validDesign) {
-      dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile })
-    }
-    if (this.props.onDesignChange != null) {
-      dropdownItems.unshift({
-        label: this.props.chart.getEditLabel(),
-        icon: "pencil",
-        onClick: this.handleStartEditing
-      })
-    }
-
-    // Wrap in a simple widget
-    return R(
-      "div",
-      {
-        onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined,
-        style: { position: "relative", width: this.props.width }
-      },
-      this.props.onDesignChange != null ? this.renderEditor() : undefined,
-      React.createElement(
-        DropdownWidgetComponent,
-        {
-          width: this.props.width,
-          height: this.props.height,
-          dropdownItems
-        },
-        this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)
-      ),
-      (emptyDesign || !validDesign) && this.props.onDesignChange != null ? this.renderEditLink() : undefined
-    )
-  }
-}

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -0,0 +1,281 @@
+import React from "react"
+import DropdownWidgetComponent from "../DropdownWidgetComponent"
+import CsvBuilder from "../../CsvBuilder"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import ChartViewComponent from "./ChartViewComponent"
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { DataSource, Schema } from "@mwater/expressions"
+import { WidgetDataSource } from "../WidgetDataSource"
+import Chart from "./Chart"
+import { JsonQLFilter } from "../../JsonQLFilter"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { BlocksLayoutOptionsContext, createDashboardStyles, DashboardStyleWrapper, getDefaultLayoutOptions } from "../../dashboards/layoutOptions"
+
+export interface ChartWidgetComponentProps {
+  /** schema to use */
+  schema: Schema
+  /** data source to use */
+  dataSource: DataSource
+  widgetDataSource: WidgetDataSource
+  /** Chart object to use */
+  chart: Chart
+  /** Design of chart */
+  design: any
+  /** null/undefined for readonly */
+  onDesignChange?: any
+
+  /** Width in pixels */
+  width: number
+
+  /** Height, if a fixed height widget, or one that uses aspect ratio */
+  height?: number
+
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: any
+
+  /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+  filters: JsonQLFilter[]
+
+  /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+  onScopeChange?: any
+  /** Called with (tableId, rowId) when item is clicked */
+  onRowClick?: any
+  /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+  connectMoveHandle?: any
+  /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+  connectResizeHandle?: any
+
+  /** A key that changes when the widget should be refreshed */
+  refreshKey?: any
+}
+
+// Complete chart widget
+export class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, { editDesign: any }> {
+  static contextType = LocaleContext
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      // Design that is being edited. Change is propagated on closing window
+      editDesign: null
+    }
+  }
+
+  // Saves a csv file to disk
+  handleSaveCsvFile = () => {
+    // Get the data
+    return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
+      if (err) {
+        return alert("Failed to get data: " + err.message)
+      }
+
+      // Create data table
+      const table = this.props.chart.createDataTable(
+        this.props.design,
+        this.props.schema,
+        this.props.dataSource,
+        data,
+        this.context
+      )
+      if (!table) {
+        return
+      }
+
+      // Convert to csv
+      let csv = new CsvBuilder().build(table)
+
+      // Add BOM
+      csv = "\uFEFF" + csv
+
+      // Make a blob and save
+      const blob = new Blob([csv], { type: "text/csv" })
+
+      // Require at use as causes server problems
+      const FileSaver = require("file-saver")
+      return FileSaver.saveAs(blob, "Exported Data.csv")
+    })
+  }
+
+  handleStartEditing = () => {
+    // Can't edit if already editing
+    if (this.state.editDesign) {
+      return
+    }
+    this.setState({ editDesign: this.props.design })
+  }
+
+  handleEndEditing = () => {
+    this.props.onDesignChange(this.state.editDesign)
+    this.setState({ editDesign: null })
+  }
+
+  handleCancelEditing = () => {
+    this.setState({ editDesign: null })
+  }
+
+  handleEditDesignChange = (design: any) => {
+    this.setState({ editDesign: design })
+  }
+
+  renderChart(design: any, onDesignChange: any, width: any, height: any) {
+    return <ChartViewComponent
+      chart={this.props.chart}
+      design={design}
+      onDesignChange={onDesignChange}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      widgetDataSource={this.props.widgetDataSource}
+      scope={this.props.scope}
+      filters={this.props.filters}
+      width={width}
+      height={height}
+      onScopeChange={this.props.onScopeChange}
+      onRowClick={this.props.onRowClick}
+      refreshKey={this.props.refreshKey}
+    />
+  }
+
+  renderEditor() {
+    if (!this.state.editDesign) {
+      return null
+    }
+
+    // Create editor
+    const editor = this.props.chart.createDesignerElement({
+      schema: this.props.schema,
+      filters: this.props.filters,
+      dataSource: this.props.dataSource,
+      design: this.state.editDesign,
+      onDesignChange: this.handleEditDesignChange
+    })
+
+    if (this.props.chart.hasDesignerPreview()) {
+      // Create chart (maxing out at half of width of screen)
+      const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width)
+      const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined
+      let chart = this.renderChart(
+        this.state.editDesign,
+        (design: any) => this.setState({ editDesign: design }),
+        chartWidth,
+        chartHeight
+      )
+
+      const content = (
+        <div style={{ height: "100%", width: "100%" }}>
+          <BlocksLayoutOptionsContext.Consumer>
+            {blocksLayoutOptions => (
+              <style dangerouslySetInnerHTML={{ __html: createDashboardStyles("#chart-editor", blocksLayoutOptions || getDefaultLayoutOptions()) }} />
+            )}
+          </BlocksLayoutOptionsContext.Consumer>
+
+          <div
+            style={{
+              position: "absolute",
+              left: 0,
+              top: 0,
+              border: "solid 2px #EEE",
+              borderRadius: 8,
+              padding: 10,
+              width: chartWidth + 20,
+              height: chartHeight != null ? chartHeight + 20 : undefined,
+              overflow: "hidden"
+            }}
+            id="chart-editor"
+          >
+            {chart}
+          </div>
+          <div style={{ width: "100%", height: "100%", paddingLeft: chartWidth + 40 }}>
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                overflowY: "auto",
+                paddingLeft: 20,
+                paddingRight: 20,
+                borderLeft: "solid 3px #AAA"
+              }}
+            >
+              {editor}
+            </div>
+          </div>
+        </div>
+      )
+
+      return (
+        <ModalWindowComponent
+          isOpen={true}
+          onRequestClose={this.handleEndEditing}
+        >
+          {content}
+        </ModalWindowComponent>
+      )
+    } else {
+      return (
+        <ActionCancelModalComponent
+          size="large"
+          onCancel={this.handleCancelEditing}
+          onAction={this.handleEndEditing}
+        >
+          {editor}
+        </ActionCancelModalComponent>
+      )
+    }
+  }
+
+  // Render a link to start editing
+  renderEditLink(message: string) {
+    return (
+      <div className="mwater-visualization-widget-placeholder" onClick={this.handleStartEditing}>
+        <ui.Icon id={this.props.chart.getPlaceholderIcon()} />
+        <div className="mwater-visualization-widget-placeholder-message">{message}</div>
+      </div>
+    )
+  }
+
+  render() {
+    const design = this.props.chart.cleanDesign(this.props.design, this.props.schema)
+
+    // Determine if valid design
+    const designError = this.props.chart.validateDesign(design, this.props.schema)
+
+    // Determine if empty
+    const emptyDesign = this.props.chart.isEmpty(design)
+
+    // Create dropdown items
+    const dropdownItems = this.props.chart.createDropdownItems(
+      design,
+      this.props.schema,
+      this.props.widgetDataSource,
+      this.props.filters
+    )
+    if (!designError) {
+      dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile })
+    }
+    if (this.props.onDesignChange != null) {
+      dropdownItems.unshift({
+        label: this.props.chart.getEditLabel(),
+        onClick: this.handleStartEditing
+      })
+    }
+
+    // Wrap in a simple widget
+    return (
+      <div
+        onDoubleClick={this.props.onDesignChange != null ? this.handleStartEditing : undefined}
+        style={{ position: "relative", width: this.props.width }}
+      >
+        {this.props.onDesignChange != null ? this.renderEditor() : undefined}
+        <DropdownWidgetComponent
+          width={this.props.width}
+          height={this.props.height}
+          dropdownItems={dropdownItems}
+        >
+          {this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)}
+        </DropdownWidgetComponent>
+        {(emptyDesign || designError) && this.props.onDesignChange != null ? this.renderEditLink(designError || "") : undefined}
+      </div>
+    )
+  }
+}

package/src/widgets/charts/calendar/CalendarChartViewComponent.tsx

@@ -1,5 +1,4 @@
 import $ from "jquery"
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
@@ -7,6 +6,7 @@ import moment from "moment"
 import AxisBuilder from "../../../axes/AxisBuilder"
 import { Schema } from "@mwater/expressions"
 import * as d3 from "d3"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 // Require d3-tip to use it
 import { default as d3Tip } from "d3-tip"
@@ -46,7 +46,7 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
     highlightCellFillColor: "#000000"
   }
 
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
   axisBuilder: AxisBuilder
   reloading: boolean
   chart_container: any
@@ -112,9 +112,9 @@ export default class CalendarChartViewComponent extends React.Component<Calendar
 
     const scopeData: WidgetScope = {
       name:
-        this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context.locale) +
+        this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context) +
         " is " +
-        this.axisBuilder.formatValue(this.props.design.dateAxis!, data, this.context.locale),
+        this.axisBuilder.formatValue(this.props.design.dateAxis!, data, this.context),
       filter: {
         jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis!, data),
         table: this.props.design.table

package/src/widgets/charts/layered/LayeredChart.ts

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import async from "async"
 import { default as produce } from "immer"
 import { original } from "immer"
@@ -15,6 +14,8 @@ import { LayeredChartDesign } from "./LayeredChartDesign"
 import { WidgetDataSource } from "../../WidgetDataSource"
 import { JsonQLFilter } from "../../.."
 import { JsonQLQuery } from "@mwater/jsonql"
+import LayeredChartViewComponent from "./LayeredChartViewComponent"
+import LayeredChartDesignerComponent from "./LayeredChartDesignerComponent"
 
 // See LayeredChart Design.md for the design
 export default class LayeredChart extends Chart {
@@ -160,7 +161,6 @@ export default class LayeredChart extends Chart {
   //   filters: array of filters
   createDesignerElement(options: any) {
     // Require here to prevent server require problems
-    const LayeredChartDesignerComponent = require("./LayeredChartDesignerComponent").default
     const props = {
       schema: options.schema,
       dataSource: options.dataSource,
@@ -234,8 +234,6 @@ export default class LayeredChart extends Chart {
   //   scope: current scope of the view element
   //   onScopeChange: called when scope changes with new scope
   createViewElement(options: ChartCreateViewElementOptions) {
-    const LayeredChartViewComponent = require("./LayeredChartViewComponent").default
-
     // Create chart
     const props = {
       schema: options.schema,
@@ -273,8 +271,8 @@ export default class LayeredChart extends Chart {
     }
 
     return [
-      { label: "Save as SVG", icon: "picture", onClick: save.bind(null, "svg") },
-      { label: "Save as PNG", icon: "camera", onClick: save.bind(null, "png") }
+      { label: "Save as SVG", onClick: save.bind(null, "svg") },
+      { label: "Save as PNG", onClick: save.bind(null, "png") }
     ]
   }