@mwater/visualization 5.0.0

package/src/widgets/charts/layered/LayeredChartLayerDesignerComponent.tsx

@@ -0,0 +1,448 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import AxisComponent from "../../../axes/AxisComponent"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import ColorComponent from "../../../ColorComponent"
+import * as LayeredChartUtils from "./LayeredChartUtils"
+import LayeredChartCompiler from "./LayeredChartCompiler"
+import * as uiComponents from "../../../UIComponents"
+import TableSelectComponent from "../../../TableSelectComponent"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+import PopoverHelpComponent from "@mwater/react-library/lib/PopoverHelpComponent"
+
+export interface LayeredChartLayerDesignerComponentProps {
+  design: any
+  schema: Schema
+  dataSource: DataSource
+  index: number
+  onChange: any
+  onRemove: any
+  filters?: any
+}
+
+export default class LayeredChartLayerDesignerComponent extends React.Component<LayeredChartLayerDesignerComponentProps> {
+  isLayerPolar(layer: any) {
+    return ["pie", "donut"].includes(layer.type || this.props.design.type)
+  }
+
+  doesLayerNeedGrouping(layer: any) {
+    return !["scatter"].includes(layer.type || this.props.design.type)
+  }
+
+  // Determine if x-axis required
+  isXAxisRequired(layer: any) {
+    return !this.isLayerPolar(layer)
+  }
+
+  getAxisTypes(layer: any, axisKey: any) {
+    return LayeredChartUtils.getAxisTypes(this.props.design, layer, axisKey)
+  }
+
+  getAxisLabel(icon: any, label: any) {
+    return R("span", null, R("span", { className: "glyphicon glyphicon-" + icon }), " " + label)
+  }
+
+  // Determine icon/label for color axis
+  getXAxisLabel(layer: any) {
+    if (this.props.design.transpose) {
+      return this.getAxisLabel("resize-vertical", "Vertical Axis")
+    } else {
+      return this.getAxisLabel("resize-horizontal", "Horizontal Axis")
+    }
+  }
+
+  // Determine icon/label for color axis
+  getYAxisLabel(layer: any) {
+    if (this.isLayerPolar(layer)) {
+      return this.getAxisLabel("repeat", "Angle Axis")
+    } else if (this.props.design.transpose) {
+      return this.getAxisLabel("resize-horizontal", "Horizontal Axis")
+    } else {
+      return this.getAxisLabel("resize-vertical", "Vertical Axis")
+    }
+  }
+
+  // Determine icon/label for color axis
+  getColorAxisLabel(layer: any) {
+    if (this.isLayerPolar(layer)) {
+      return this.getAxisLabel("text-color", "Label Axis")
+    } else {
+      return this.getAxisLabel("equalizer", "Split Axis")
+    }
+  }
+
+  // Updates layer with the specified changes
+  updateLayer(changes: any) {
+    const layer = _.extend({}, this.props.design.layers[this.props.index], changes)
+    return this.props.onChange(layer)
+  }
+
+  // Update axes with specified changes
+  updateAxes(changes: any) {
+    const axes = _.extend({}, this.props.design.layers[this.props.index].axes, changes)
+    return this.updateLayer({ axes })
+  }
+
+  handleNameChange = (ev: any) => {
+    return this.updateLayer({ name: ev.target.value })
+  }
+  handleTableChange = (table: any) => {
+    return this.updateLayer({ table })
+  }
+
+  handleXAxisChange = (axis: any) => {
+    const layer = this.props.design.layers[this.props.index]
+    const axesChanges: any = { x: axis }
+
+    // Default y to count if x or color present and not scatter
+    if (axis && this.doesLayerNeedGrouping(layer) && !layer.axes?.y) {
+      axesChanges.y = { expr: { type: "op", op: "count", table: layer.table, exprs: [] } }
+    }
+
+    return this.updateAxes(axesChanges)
+  }
+
+  handleXColorMapChange = (xColorMap: any) => {
+    const layer = this.props.design.layers[this.props.index]
+    return this.updateLayer({ xColorMap })
+  }
+
+  handleColorAxisChange = (axis: any) => {
+    const layer = this.props.design.layers[this.props.index]
+    const axesChanges: any = { color: axis }
+
+    // Default y to count if x or color present and not scatter
+    if (axis && this.doesLayerNeedGrouping(layer) && !layer.axes?.y) {
+      axesChanges.y = { expr: { type: "op", op: "count", table: layer.table, exprs: [] } }
+    }
+
+    return this.updateAxes(axesChanges)
+  }
+
+  handleYAxisChange = (axis: any) => {
+    return this.updateAxes({ y: axis })
+  }
+  handleFilterChange = (filter: any) => {
+    return this.updateLayer({ filter })
+  }
+  handleColorChange = (color: any) => {
+    return this.updateLayer({ color })
+  }
+  handleCumulativeChange = (value: any) => {
+    return this.updateLayer({ cumulative: value })
+  }
+  handleTrendlineChange = (value: any) => {
+    return this.updateLayer({ trendline: value ? "linear" : undefined })
+  }
+  handleStackedChange = (value: any) => {
+    return this.updateLayer({ stacked: value })
+  }
+
+  renderName() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // R 'div', className: "form-group",
+    //   R 'label', className: "text-muted", "Series Name"
+    const placeholder = this.props.design.layers.length === 1 ? "Value" : `Series ${this.props.index + 1}`
+    return R("input", {
+      type: "text",
+      className: "form-control form-control-sm",
+      value: layer.name,
+      onChange: this.handleNameChange,
+      placeholder
+    })
+  }
+
+  renderRemove() {
+    if (this.props.design.layers.length > 1) {
+      return R(
+        "button",
+        { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
+        R("span", { className: "fas fa-times" })
+      )
+    }
+    return null
+  }
+
+  renderTable() {
+    const layer = this.props.design.layers[this.props.index]
+
+    return R(
+      uiComponents.SectionComponent,
+      { icon: "fa-database", label: "Data Source" },
+      R(TableSelectComponent, {
+        schema: this.props.schema,
+        value: layer.table,
+        onChange: this.handleTableChange,
+        filter: layer.filter,
+        onFilterChange: this.handleFilterChange
+      })
+    )
+  }
+
+  handlexAxisOnlyValuesPresentChange = (xAxisOnlyValuesPresent: boolean) => {
+    this.updateLayer({xAxisOnlyValuesPresent})
+  }
+
+  renderXAxis() {
+    const layer = this.props.design.layers[this.props.index]
+    if (!layer.table) {
+      return
+    }
+
+    if (!this.isXAxisRequired(layer)) {
+      return
+    }
+
+    const title = this.getXAxisLabel(layer)
+
+    const filters = _.clone(this.props.filters) || []
+    if (layer.filter != null) {
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const jsonql = exprCompiler.compileExpr({ expr: layer.filter, tableAlias: "{alias}" })
+
+      if (jsonql) {
+        filters.push({ table: layer.filter.table, jsonql })
+      }
+    }
+
+    const categoricalX = new LayeredChartCompiler({ schema: this.props.schema }).isCategoricalX(this.props.design)
+
+    return [
+      R(
+        uiComponents.SectionComponent,
+        { label: title },
+        R(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: layer.table,
+          types: this.getAxisTypes(layer, "x"),
+          aggrNeed: "none",
+          required: true,
+          value: layer.axes.x,
+          onChange: this.handleXAxisChange,
+          filters,
+          // Only show x color map if no color axis and is categorical and enabled
+          showColorMap: layer.xColorMap && categoricalX && !layer.axes.color,
+          autosetColors: false,
+          // Categorical X can exclude values
+          allowExcludedValues: categoricalX
+        })
+      ),
+      categoricalX ? R(ui.Checkbox, {
+        value: layer.xAxisOnlyValuesPresent,
+        onChange: this.handlexAxisOnlyValuesPresentChange
+      }, 
+        "Only show values actually present", 
+        R(PopoverHelpComponent, {placement: 'bottom'}, "Limits values to those that are present in the data, as opposed to all choices or all dates within range")
+      ):undefined
+
+    ]
+  }
+
+  renderColorAxis() {
+    const layer = this.props.design.layers[this.props.index]
+    if (!layer.table) {
+      return
+    }
+
+    const title = this.getColorAxisLabel(layer)
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, title),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        R(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: layer.table,
+          types: this.getAxisTypes(layer, "color"),
+          aggrNeed: "none",
+          required: this.isLayerPolar(layer),
+          showColorMap: true,
+          value: layer.axes.color,
+          onChange: this.handleColorAxisChange,
+          allowExcludedValues: true,
+          filters: this.props.filters
+        })
+      )
+    )
+  }
+
+  renderYAxis() {
+    const layer = this.props.design.layers[this.props.index]
+    if (!layer.table) {
+      return
+    }
+
+    const title = this.getYAxisLabel(layer)
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, title),
+      R(
+        "div",
+        { style: { marginLeft: 10 } },
+        R(AxisComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: layer.table,
+          types: this.getAxisTypes(layer, "y"),
+          aggrNeed: this.doesLayerNeedGrouping(layer) ? "required" : "none",
+          value: layer.axes.y,
+          required: true,
+          filters: this.props.filters,
+          showFormat: true,
+          onChange: this.handleYAxisChange
+        }),
+        this.renderCumulative(),
+        this.renderStacked(),
+        this.renderTrendline()
+      )
+    )
+  }
+
+  renderCumulative() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // Can only cumulative if non-polar and y axis determined and x axis supports cumulative
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    if (!layer.axes.y || !layer.axes.x || !axisBuilder.doesAxisSupportCumulative(layer.axes.x)) {
+      return
+    }
+
+    return R(
+      "div",
+      { key: "cumulative" },
+      <Checkbox inline value={layer.cumulative} onChange={this.handleCumulativeChange}>
+        Cumulative
+      </Checkbox>
+    )
+  }
+
+  renderTrendline() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // Can only have trendline if non-polar and y + x axis determined and not cumulative and not stacked
+    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
+    if (!layer.axes.y || !layer.axes.x || layer.cumulative || layer.stacked || this.props.design.stacked) {
+      return
+    }
+
+    return R(
+      "div",
+      { key: "trendline" },
+      <Checkbox value={layer.trendline === "linear"} onChange={this.handleTrendlineChange}>
+        Show linear trendline
+      </Checkbox>
+    )
+  }
+
+  renderStacked() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // Only if has color axis and there are more than one layer
+    if (layer.axes.color && this.props.design.layers.length > 1) {
+      const stacked = layer.stacked != null ? layer.stacked : true
+
+      return R(
+        "div",
+        { key: "stacked" },
+        <Checkbox value={stacked} onChange={this.handleStackedChange}>
+          Stacked
+        </Checkbox>
+      )
+    }
+
+    return null
+  }
+
+  renderColor() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // If not table do nothing
+    if (!layer.table) {
+      return
+    }
+
+    const categoricalX = new LayeredChartCompiler({ schema: this.props.schema }).isCategoricalX(this.props.design)
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, layer.axes.color ? "Default Color" : "Color"),
+      R(
+        "div",
+        { style: { marginLeft: 8 } },
+        R(ColorComponent, { color: layer.color, onChange: this.handleColorChange }),
+        // Allow toggling of colors
+        layer.axes.x && categoricalX && !layer.axes.color
+          ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, "Set Individual Colors")
+          : undefined
+      )
+    )
+  }
+
+  renderFilter() {
+    const layer = this.props.design.layers[this.props.index]
+
+    // If no table, hide
+    if (!layer.table) {
+      return null
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R(
+        "div",
+        { style: { marginLeft: 8 } },
+        R(FilterExprComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          onChange: this.handleFilterChange,
+          table: layer.table,
+          value: layer.filter
+        })
+      )
+    )
+  }
+
+  render() {
+    const layer = this.props.design.layers[this.props.index]
+    return R(
+      "div",
+      null,
+      this.props.index > 0 ? R("hr") : undefined,
+      this.renderRemove(),
+      this.renderTable(),
+      // Color axis first for pie
+      this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
+      this.renderXAxis(),
+      layer.axes.x || layer.axes.color ? this.renderYAxis() : undefined,
+      layer.axes.x && layer.axes.y && !this.isLayerPolar(layer) ? this.renderColorAxis() : undefined,
+      // No default color for polar
+      (() => {
+        if (!this.isLayerPolar(layer)) {
+          if (layer.axes.y) {
+            return this.renderColor()
+          }
+        }
+        return null
+      })(),
+      layer.axes.y ? this.renderFilter() : undefined,
+      layer.axes.y ? this.renderName() : undefined
+    )
+  }
+}

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

@@ -0,0 +1,146 @@
+import _ from "lodash"
+import $ from "jquery"
+import saveSvgAsPng from "save-svg-as-png"
+import LayeredChartCompiler from "./LayeredChartCompiler"
+import { Schema } from "@mwater/expressions"
+import c3 from 'billboard.js'
+
+// Get the css rules corresponding to .c3 directly out of the document object
+function getC3Css() {
+  const css = []
+  if (document.styleSheets) {
+    for (let sheetIndex = 0 ; sheetIndex < document.styleSheets.length ; sheetIndex++) {
+      const sheet = document.styleSheets[sheetIndex]
+      const rules = sheet?.cssRules || sheet.rules
+      if (rules) {
+        for (let ruleIndex = 0 ; ruleIndex < rules.length ; ruleIndex++) {
+          const rule = rules[ruleIndex]
+          if (rule.cssText && rule.cssText.startsWith(".bb")) {
+            css.push(rule.cssText)
+          }
+        }
+      }
+    }
+  }
+  return css.join("\n")
+}
+
+// Get the svg XML text straight from the DOM node, adding the css styling to it as a <style> element
+function getC3String(c3Node: any) {
+  // Log SVG with stylesheet info
+  // First get the svg DOM node and make a copy as an XML doc
+  const svgStr = c3Node.outerHTML
+  const xml = $.parseXML(svgStr)
+  const svgNode = xml.documentElement
+  // Denote it as svg
+  svgNode.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  svgNode.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink")
+  // Add a style element with the .c3 css rules for this page
+  const styleNode = xml.createElement("style")
+  styleNode.setAttribute("type", "text/css")
+  let css = getC3Css()
+
+  // few styles are defined as .c3 [selector]
+  // which does not apply when exporting svg as parent element is not available
+  css +=
+    "svg { font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif; -webkit-tap-highlight-color: transparent; }\n"
+  css += "path, line { fill: none; stroke: rgb(0, 0, 0); }\n"
+  css += "text { user-select: none; }\n"
+  const cdata = xml.createCDATASection(css)
+  styleNode.appendChild(cdata)
+  svgNode.insertBefore(styleNode, svgNode.firstChild)
+  // Serialize
+  const svgFinalStr = new XMLSerializer().serializeToString(xml)
+  return svgFinalStr
+}
+
+// Creates the svg string and saves that to file
+function saveSvgToFile(containerDiv: any, title: any) {
+  const svgFinalStr = getC3String(containerDiv.firstChild)
+  const blob = new Blob([svgFinalStr], { type: "image/svg+xml" })
+  // Require at use as causes server problems
+  const FileSaver = require("file-saver")
+  return FileSaver.saveAs(blob, (title || "unnamed-chart") + ".svg")
+}
+
+// Saves svg files from layered charts
+// design: design of the chart
+// data: results from queries
+// schema: the chart's schema
+// format: "svg" or "png"
+export default {
+  save(design: any, data: any, schema: Schema, format: any) {
+    const compiler = new LayeredChartCompiler({ schema })
+    const props = {
+      design,
+      data,
+      width: 600,
+      height: 600
+    }
+    const chartOptions = compiler.createChartOptions(props)
+    const containerDiv = document.createElement("div")
+    containerDiv.className += "bb"
+    // BillboardJS legend calculations dont work properly when element is not visible
+    // https://github.com/naver/billboard.js/issues/1015
+    document.body.appendChild(containerDiv)
+    chartOptions.bindto = containerDiv
+    const title = design.titleText
+    let chart: any = null
+    const onRender = () => {
+      return _.defer(function () {
+        if (format === "svg") {
+          saveSvgToFile(containerDiv, title)
+        } else if (format === "png") {
+          // saveSvgAsPng does not include the styles for the svg element itself
+          // so set the styles inline
+          // see: https://github.com/exupero/saveSvgAsPng/issues/110
+          const el = $(containerDiv).find("svg")[0]
+          el.style.fontFamily = "sans-serif"
+          el.style.fontStyle = "normal"
+          el.style.fontVariant = "normal"
+          el.style.fontWeight = "normal"
+          el.style.fontStretch = "normal"
+          el.style.fontSize = "10px"
+          el.style.lineHeight = "normal"
+
+          const customStyle = document.createElement("style")
+          customStyle.type = "text/css"
+          customStyle.appendChild(
+            document.createTextNode(
+              `<![CDATA[
+line, path {fill: none;stroke: rgb(0, 0, 0);}
+]]>\
+`
+            )
+          )
+
+          el.appendChild(customStyle)
+
+          saveSvgAsPng.saveSvgAsPng(el, `${title || "untitled"}.png`, {
+            selectorRemap(selector: any) {
+              if ([".bb path, .bb line", ".bb line, .bb path"].includes(selector)) {
+                return "path, line"
+              }
+              if (selector.indexOf(".bb ") === 0) {
+                return selector.substr(4)
+              } else {
+                return selector
+              }
+            },
+            backgroundColor: "#fff"
+          })
+        }
+        return chart.destroy()
+      })
+    }
+    chartOptions.onrendered = _.debounce(_.once(onRender), 1000)
+    // const c3 = require("c3")
+    chart = c3.generate(chartOptions)
+
+    // Remove listener for window focus (https://github.com/c3js/c3/issues/2742)
+    window.removeEventListener("focus", chart.internal.windowFocusHandler)
+    chart.internal.windowFocusHandler = () => {}
+    window.addEventListener("focus", chart.internal.windowFocusHandler)
+
+  }
+}

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

@@ -0,0 +1,24 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+// Misc utils for layered charts
+
+// Get possible types for axis of a layer
+export function getAxisTypes(design: any, layer: any, axis: any) {
+  // If categorical
+  const layerType = layer.type || design.type
+
+  switch (axis) {
+    case "x":
+      if (layerType === "bar") {
+        return ["enum", "enumset", "text", "date", "boolean"]
+      }
+
+      // More broad
+      return ["enum", "text", "number", "boolean", "date"]
+    case "color":
+      return ["enum", "text", "date", "boolean"]
+    case "y":
+      return ["number"]
+  }
+  return null
+}