@mwater/visualization 5.1.0 → 5.3.0

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

@@ -18,17 +18,16 @@ const chartTypes = {
   scatter,
   area,
   pie,
-  donut,
+  donut
 }
 
 const commaFormatter = d3Format.format(",")
 
-const compactFormatter = (d: number) => { 
+const compactFormatter = (d: number) => {
   // Only if large, otherwise use standard formatting
   if (Math.abs(d) > 999) {
-    return d3Format.format("~s")(d).replace('G', 'B')
-  }
-  else {
+    return d3Format.format("~s")(d).replace("G", "B")
+  } else {
     return commaFormatter(d)
   }
 }
@@ -39,17 +38,20 @@ type C3ChartData = { [key: string]: any[] }
 /** Intermediate data structure that contains most of chart formatting */
 interface C3Data {
   types?: { [key: string]: ChartTypes }
-  
+
   columns: PrimitiveArray[]
 
   xAxisType?: "category" | "indexed" | "log" | "timeseries"
 
   xAxisTickFit?: boolean
 
+  /** Whether to allow multiline x axis tick labels (default true) */
+  xAxisTickMultiline?: boolean
+
   xs?: { [key: string]: string }
-  
+
   /** map of "layername:index" to { layerIndex, row } */
-  dataMap: { [key: string]: { layerIndex: number, row: any[] }}
+  dataMap: { [key: string]: { layerIndex: number; row: any[] } }
 
   format: { [layerId: string]: (value: any) => string }
 
@@ -62,14 +64,14 @@ interface C3Data {
   legendHide?: boolean
 
   /**
-	 * Set custom data name.
-	 */
-	names?: { [key: string]: string };
+   * Set custom data name.
+   */
+  names?: { [key: string]: string }
 
-	/**
-	 * Set groups for the data for stacking.
-	 */
-  groups?: string[][];
+  /**
+   * Set groups for the data for stacking.
+   */
+  groups?: string[][]
 
   /**
    * Set label text colors.
@@ -80,11 +82,11 @@ interface C3Data {
 
   color?: any
 
-	/**
-	 * Set custom data class.
-	 * If this option is specified, the element g for the data has an additional class that has the prefix billboard-target- (e.g. billboard-target-additional-data1-class).
-	 */
-  classes?: { [key: string]: string };
+  /**
+   * Set custom data class.
+   * If this option is specified, the element g for the data has an additional class that has the prefix billboard-target- (e.g. billboard-target-additional-data1-class).
+   */
+  classes?: { [key: string]: string }
 }
 
 function pieLabelValueFormatter(format: any, hidePercent = false) {
@@ -144,7 +146,7 @@ export default class LayeredChartCompiler {
   schema: Schema
   exprUtils: ExprUtils
   axisBuilder: AxisBuilder
-  
+
   // Pass in schema
   constructor(options: { schema: Schema }) {
     this.schema = options.schema
@@ -159,7 +161,7 @@ export default class LayeredChartCompiler {
   createQueries(design: LayeredChartDesign, extraFilters?: JsonQLFilter[] | null): { [key: string]: JsonQLQuery } {
     const exprCompiler = new ExprCompiler(this.schema)
 
-    const queries = {}
+    const queries: { [key: string]: JsonQLQuery } = {}
 
     // For each layer
     for (
@@ -305,7 +307,12 @@ export default class LayeredChartCompiler {
       },
       // Hide if one layer with no color axis
       legend: {
-        hide: options.design.layers.length === 1 && !options.design.layers[0].axes.color ? true : c3Data.legendHide
+        hide:
+          options.design.layers.length === 1 && !options.design.layers[0].axes.color
+            ? true
+            : options.design.hideLegend === true
+              ? true
+              : c3Data.legendHide
       },
       grid: { focus: { show: false } }, // Don't display hover grid
       axis: {
@@ -315,7 +322,12 @@ export default class LayeredChartCompiler {
             text: cleanString(c3Data.xAxisLabelText),
             position: options.design.transpose ? "outer-middle" : "outer-center"
           },
-          tick: { fit: c3Data.xAxisTickFit }
+          tick: {
+            multiline: options.design.xAxisTickMultiline,
+            culling: false,
+            fit: c3Data.xAxisTickFit
+          },
+          clipPath: false          
         },
         y: {
           label: {
@@ -358,29 +370,30 @@ export default class LayeredChartCompiler {
         expand: false // Don't expand/contract
       },
 
-      transition: { duration: 0 } // Transitions interfere with scoping
+      transition: { duration: 0 }, // Transitions interfere with scoping
+      // padding: !isPolar ? { mode: "fit" } : undefined
     }
 
     // && (options.design.type === "pie" || options.design.type === "donut")
-    if(options.design.labels) {
+    if (options.design.labels) {
       // same color values gets hidden!! https://github.com/naver/billboard.js/issues/871
       chartDesign.data!.labels = {
         colors: chartDesign.data!.columns!.reduce((a, c) => {
-          a[c[0] as string] = '#000'
+          a[c[0] as string] = "#000"
           return a
         }, {})
       }
-      if(!options.design.transpose) {
+      if (!options.design.transpose) {
         chartDesign.data!.labels = {
           ...chartDesign.data!.labels,
           position: {
             y: 15
-          } as any, // TODO why does this not type correctly?
+          } as any // TODO why does this not type correctly?
         }
       }
     }
 
-    if(_.isEmpty(chartDesign.data!.types)) {
+    if (_.isEmpty(chartDesign.data!.types)) {
       chartDesign.data!.type = this.getLayerType(options.design, 0)
     }
 
@@ -403,15 +416,15 @@ export default class LayeredChartCompiler {
     if (options.design.labels && !_.isEmpty(c3Data.format)) {
       // format = _.map options.design.layers, (layer, layerIndex) =>
       //   return if c3Data.format[layerIndex] then c3Data.format[layerIndex] else true
-      chartDesign.data!.labels = { 
-        ...chartDesign.data!.labels as any, 
+      chartDesign.data!.labels = {
+        ...(chartDesign.data!.labels as any),
         format: c3Data.format
       }
     }
 
     if (options.design.yThresholds) {
       chartDesign.grid!.y = {
-        lines: _.map(options.design.yThresholds, (t) => ({
+        lines: _.map(options.design.yThresholds, t => ({
           value: t.value!,
           text: t.label!
         }))
@@ -428,7 +441,7 @@ export default class LayeredChartCompiler {
 
   isCategoricalX(design: LayeredChartDesign) {
     // Check if categorical x axis (bar charts always are)
-    let categoricalX = design.type === "bar" || _.any(design.layers, (l) => l.type === "bar")
+    let categoricalX = design.type === "bar" || _.any(design.layers, l => l.type === "bar")
 
     // Check if x axis is categorical type
     const xType = this.axisBuilder.getAxisType(design.layers[0].axes.x)
@@ -448,7 +461,7 @@ export default class LayeredChartCompiler {
   // Outputs: columns, types, names, colors. Also dataMap which is a map of "layername:index" to { layerIndex, row }
   compileData(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data {
     // If polar chart (no x axis)
-    if (["pie", "donut"].includes(design.type) || _.any(design.layers, (l) => ["pie", "donut"].includes(l.type))) {
+    if (["pie", "donut"].includes(design.type) || _.any(design.layers, l => ["pie", "donut"].includes(l.type))) {
       return this.compileDataPolar(design, data, locale)
     }
 
@@ -482,7 +495,7 @@ export default class LayeredChartCompiler {
         const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
         // Sort by category order
-        layerData = _.sortBy(layerData, (row) => categoryOrder[row.color])
+        layerData = _.sortBy(layerData, row => categoryOrder[row.color])
 
         // Create a series for each row
         _.each(layerData, (row, rowIndex) => {
@@ -578,7 +591,7 @@ export default class LayeredChartCompiler {
       }
 
       // Remove excluded values
-      layerData = _.filter(layerData, (row) => !_.includes(layer.axes.x!.excludedValues || [], row.x))
+      layerData = _.filter(layerData, row => !_.includes(layer.axes.x!.excludedValues || [], row.x))
 
       // If has color axis
       if (layer.axes.color) {
@@ -593,13 +606,13 @@ export default class LayeredChartCompiler {
         const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
         // Sort
-        colorValues = _.sortBy(colorValues, (v) => categoryOrder[v])
+        colorValues = _.sortBy(colorValues, v => categoryOrder[v])
 
         // Exclude excluded ones
         colorValues = _.difference(colorValues, layer.axes.color.excludedValues || [])
 
         // For each color value
-        _.each(colorValues, (colorValue) => {
+        _.each(colorValues, colorValue => {
           // One series for x values, one for y
           const seriesX = `${layerIndex}:${colorValue}:x`
           const seriesY = `${layerIndex}:${colorValue}:y`
@@ -728,7 +741,7 @@ export default class LayeredChartCompiler {
 
       for (var x of xs) {
         // Find existing row
-        const existingRow = _.find(flatRows, (r) => r.x === x && r.color === row.color)
+        const existingRow = _.find(flatRows, r => r.x === x && r.color === row.color)
         if (existingRow) {
           existingRow.y += row.y
         } else {
@@ -770,13 +783,16 @@ export default class LayeredChartCompiler {
     })
 
     // Categories will be in form [{ value, label }]
-    let categories = this.axisBuilder.getCategories(xAxis, xValues, { locale, onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent })
+    let categories = this.axisBuilder.getCategories(xAxis, xValues, {
+      locale,
+      onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent
+    })
 
     // Get indexed ordering of categories (lookup from value to index) without removing excluded values
     const categoryOrder = _.zipObject(_.map(categories, (c, i) => [c.value, i]))
 
     // Exclude excluded values
-    categories = _.filter(categories, (category) => !_.includes(xAxis.excludedValues || [], category.value))
+    categories = _.filter(categories, category => !_.includes(xAxis.excludedValues || [], category.value))
 
     // Limit categories to prevent crashes in C3 (https://github.com/mWater/mwater-visualization/issues/272)
     if (xType !== "enumset") {
@@ -789,7 +805,7 @@ export default class LayeredChartCompiler {
     const categoryMap = _.object(_.map(categories, (c, i) => [c.value, i]))
 
     // Create common x series
-    columns.push(["x"].concat(_.map(categories, (category) => this.axisBuilder.formatCategory(xAxis, category))))
+    columns.push(["x"].concat(_.map(categories, category => this.axisBuilder.formatCategory(xAxis, category))))
 
     // For each layer
     _.each(design.layers, (layer, layerIndex) => {
@@ -806,7 +822,7 @@ export default class LayeredChartCompiler {
       }
 
       // Reorder to category order for x-axis
-      layerData = _.sortBy(layerData, (row) => categoryOrder[row.x])
+      layerData = _.sortBy(layerData, row => categoryOrder[row.x])
 
       // Make rows cumulative
       if (layer.cumulative) {
@@ -815,7 +831,7 @@ export default class LayeredChartCompiler {
 
       // Filter out categories that were removed
       if (xType !== "enumset") {
-        layerData = _.filter(layerData, (row) => categoryXs[row.x] != null)
+        layerData = _.filter(layerData, row => categoryXs[row.x] != null)
       }
 
       // If has color axis
@@ -831,13 +847,13 @@ export default class LayeredChartCompiler {
         const colorCategoryOrder = _.zipObject(_.map(colorCategories, (c, i) => [c.value, i]))
 
         // Sort
-        colorValues = _.sortBy(colorValues, (v) => colorCategoryOrder[v])
+        colorValues = _.sortBy(colorValues, v => colorCategoryOrder[v])
 
         // Exclude excluded ones
         colorValues = _.difference(colorValues, layer.axes.color.excludedValues || [])
 
         if (colorValues.length > 0) {
-          _.each(colorValues, (colorValue) => {
+          _.each(colorValues, colorValue => {
             // One series for y values
             const series = `${layerIndex}:${colorValue}`
 
@@ -852,10 +868,10 @@ export default class LayeredChartCompiler {
             const rows = _.where(layerData, { color: colorValue })
 
             // Create empty series
-            const column: any[] = _.map(categories, (c) => null)
+            const column: any[] = _.map(categories, c => null)
 
             // Set rows
-            _.each(rows, (row) => {
+            _.each(rows, row => {
               // Get index
               const index = categoryMap[row.x]
               if (index != null) {
@@ -885,7 +901,7 @@ export default class LayeredChartCompiler {
         } else {
           //c3 acts funny when there is a split axis but no data
           series = `${layerIndex}:dumm`
-          column = _.map(categories, (c) => null)
+          column = _.map(categories, c => null)
           columns.push([series].concat(column))
 
           types[series] = this.getLayerType(design, layerIndex)
@@ -899,10 +915,10 @@ export default class LayeredChartCompiler {
         series = `${layerIndex}`
 
         // Create empty series
-        column = _.map(categories, (c) => null)
+        column = _.map(categories, c => null)
 
         // Set rows
-        _.each(layerData, (row) => {
+        _.each(layerData, row => {
           // Skip if value excluded
           if (_.includes(layer.axes.x!.excludedValues || [], row.x)) {
             return
@@ -947,9 +963,9 @@ export default class LayeredChartCompiler {
           xs[trendlineSeries] = "x"
           colors[trendlineSeries] = layer.color || defaultColors[layerIndex]
           legendHide.push(trendlineSeries) // Hide in legend
-          format[trendlineSeries] = (value: any) => 
+          format[trendlineSeries] = (value: any) =>
             value != null ? this.axisBuilder.formatValue(layer.axes.y!, d3Round(value), locale, true) : ""
-            
+
           // Set dots as invisible in CSS and line as dashed
           classes[trendlineSeries] = "trendline"
         }
@@ -968,12 +984,12 @@ export default class LayeredChartCompiler {
         const stacked = layer.stacked != null ? layer.stacked : defaultStacked
 
         if (stacked) {
-          groups.push(_.filter(_.keys(names), (series) => series.split(":")[0] === `${layerIndex}`))
+          groups.push(_.filter(_.keys(names), series => series.split(":")[0] === `${layerIndex}`))
         }
       }
 
       // Remove empty groups
-      groups = _.filter(groups, (g) => g.length > 1)
+      groups = _.filter(groups, g => g.length > 1)
     }
 
     // If proportional
@@ -987,7 +1003,7 @@ export default class LayeredChartCompiler {
           continue
         }
 
-        for (let i = 1 ; i < column.length ; i++) {
+        for (let i = 1; i < column.length; i++) {
           xtotals[i] = (xtotals[i] || 0) + (column[i] || 0)
         }
       }
@@ -1000,7 +1016,7 @@ export default class LayeredChartCompiler {
           continue
         }
 
-        for (let i = 1 ; i < column.length ; i++) {
+        for (let i = 1; i < column.length; i++) {
           if (column[i] > 0) {
             column[i] = Math.round(((100 * column[i]) / xtotals[i]) * 10) / 10
           }
@@ -1020,6 +1036,7 @@ export default class LayeredChartCompiler {
       classes,
       xAxisType: "category",
       xAxisTickFit: xType !== "date", // Put a tick for each point since categorical unless date
+      xAxisTickMultiline: design.xAxisTickMultiline,
       xAxisLabelText: this.compileXAxisLabelText(design, locale),
       yAxisLabelText: this.compileYAxisLabelText(design, locale),
       titleText: this.compileTitleText(design, locale),
@@ -1057,13 +1074,13 @@ export default class LayeredChartCompiler {
   }
 
   // Get layer type, defaulting to overall type
-  getLayerType(design: any, layerIndex: any) { 
+  getLayerType(design: any, layerIndex: any) {
     // Special handling for mocha tests where chartTypes has all undefined values
     // See https://github.com/mWater/mwater-visualization/issues/453#issuecomment-1103671467
     const chartTypeString = design.layers[layerIndex].type || design.type
     if (chartTypes[chartTypeString]) {
       return chartTypes[chartTypeString]()
-    } 
+    }
     return chartTypeString
   }
 
@@ -1269,7 +1286,7 @@ function cleanString(str: any) {
 function calculateLinearRegression(ys: any[], xs: any[]): any[] {
   // If xs are dates, convert to numbers
   if (_.isString(xs[0])) {
-    xs = _.map(xs, (x) => Date.parse(x))
+    xs = _.map(xs, x => Date.parse(x))
   }
 
   // Remove null ys
@@ -1280,7 +1297,7 @@ function calculateLinearRegression(ys: any[], xs: any[]): any[] {
 
   const sumXY = _.sum(_.map(nonNullxs, (x, i) => x * nonNullys[i]))
 
-  const sumXX = _.sum(_.map(nonNullxs, (x) => x * x))
+  const sumXX = _.sum(_.map(nonNullxs, x => x * x))
 
   const sumX = _.sum(nonNullxs)
 
@@ -1295,5 +1312,5 @@ function calculateLinearRegression(ys: any[], xs: any[]): any[] {
   // Calculate intercept
   const intercept = (sumY * sumXX - sumX * sumXY) / den
 
-  return _.map(xs, (x) => x * slope + intercept)
+  return _.map(xs, x => x * slope + intercept)
 }

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

@@ -56,6 +56,12 @@ export interface LayeredChartDesign {
 
   /** true to show popout lines for small values */
   popoutSmallValues?: boolean
+
+  /** true to hide the legend */
+  hideLegend?: boolean
+
+  /** Whether to allow multiline x axis tick labels (default true) */
+  xAxisTickMultiline?: boolean
 }
 
 export interface LayeredChartDesignLayer {
@@ -103,4 +109,4 @@ export interface YThreshold {
   value: number | null
   label: string | null
   highlightColor: string | null
-}
+}

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

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import LayeredChartLayerDesignerComponent from "./LayeredChartLayerDesignerComponent"
@@ -41,6 +40,10 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     return this.updateDesign({ transpose: value })
   }
 
+  handleHideLegendChange = (value: any) => {
+    return this.updateDesign({ hideLegend: value })
+  }
+
   handleStackedChange = (value: any) => {
     return this.updateDesign({ stacked: value })
   }
@@ -104,6 +107,10 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     return this.updateDesign({ yMax })
   }
 
+  handleXAxisTickMultilineChange = (value: boolean) => {
+    this.updateDesign({ xAxisTickMultiline: value })
+  }
+
   renderLabels() {
     if (!this.props.design.type) {
       return
@@ -178,6 +185,19 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     )
   }
 
+  renderChartOptions() {
+    return (
+      <div>
+        <Checkbox key="hideLegend" value={this.props.design.hideLegend} onChange={this.handleHideLegendChange}>
+          Hide legend
+        </Checkbox>
+        <Checkbox key="xAxisTickMultiline" value={this.props.design.xAxisTickMultiline ?? true} onChange={this.handleXAxisTickMultilineChange}>
+          Multiline X-Axis Labels
+        </Checkbox>
+      </div>
+    )
+  }
+
   renderType() {
     const chartTypes = [
       { id: "bar", name: "Bar", desc: "Best for most charts" },
@@ -200,7 +220,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
         editor: (onClose: any) => {
           return R(uiComponents.OptionListComponent, {
             hint: "Select a Chart Type",
-            items: _.map(chartTypes, (ct) => ({
+            items: _.map(chartTypes, ct => ({
               name: ct.name,
               desc: ct.desc,
               onClick: () => {
@@ -298,8 +318,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
               key="percentVisible"
               inline
               value={design.hidePercentage}
-              onChange={this.handlePercentageVisibilityChange}
-            >
+              onChange={this.handlePercentageVisibilityChange}>
               Hide Percentage
             </Checkbox>,
             <Select
@@ -315,11 +334,19 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
             />
           ]
         : undefined,
-      (design.labels && design.type === "bar" && !design.transpose) ? R('div', null, 
-        <Checkbox inline key="labels" value={design.popoutSmallValues || false} onChange={this.handleLabelsPopoutChange}>
-          Show Popout labels for small values
-        </Checkbox>
-      ):undefined
+      design.labels && design.type === "bar" && !design.transpose
+        ? R(
+            "div",
+            null,
+            <Checkbox
+              inline
+              key="labels"
+              value={design.popoutSmallValues || false}
+              onChange={this.handleLabelsPopoutChange}>
+              Show Popout labels for small values
+            </Checkbox>
+          )
+        : undefined
     )
   }
 
@@ -400,6 +427,12 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       })
     }
 
+    tabs.push({
+      id: "options",
+      label: "Options",
+      elem: R("div", null, R("br"), this.renderChartOptions())
+    })
+
     return R(TabbedComponent, {
       initialTabId: "design",
       tabs
@@ -472,7 +505,7 @@ class ThresholdComponent extends React.Component<{
           style: { display: "inline-block" },
           size: "sm",
           value: this.props.threshold.value,
-          onChange: (v) => this.props.onThresholdChange(_.extend({}, this.props.threshold, { value: v }))
+          onChange: v => this.props.onThresholdChange(_.extend({}, this.props.threshold, { value: v }))
         })
       ),
       "  ",

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

@@ -187,7 +187,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
   }
 
   handlexAxisOnlyValuesPresentChange = (xAxisOnlyValuesPresent: boolean) => {
-    this.updateLayer({xAxisOnlyValuesPresent})
+    this.updateLayer({ xAxisOnlyValuesPresent })
   }
 
   renderXAxis() {
@@ -238,11 +238,11 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
       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
-
+      },
+        "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")
+      ) : null,
+      <br/>
     ]
   }