@mwater/visualization 5.1.0 → 5.3.0

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

@@ -1,7 +1,5 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-import ReactDOM from "react-dom"
 const R = React.createElement
 
 import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
@@ -9,8 +7,10 @@ import LayeredChartCompiler from "./LayeredChartCompiler"
 import TextComponent from "../../text/TextComponent"
 import * as d3 from "d3"
 import { LayeredChartDesign } from "./LayeredChartDesign"
-import c3 from 'billboard.js'
+import c3 from "billboard.js"
 import { WidgetScope } from "../../../WidgetScope"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { isEmptyTextWidgetDesign } from "../../text/TextWidgetDesign"
 
 export interface LayeredChartViewComponentProps {
   schema: Schema
@@ -36,7 +36,7 @@ export default class LayeredChartViewComponent extends React.Component<
   LayeredChartViewComponentProps,
   LayeredChartViewComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
   header: HTMLElement | null
   footer: HTMLElement | null
 
@@ -60,9 +60,9 @@ export default class LayeredChartViewComponent extends React.Component<
       this.props.height != prevProps.height ||
       this.props.width != prevProps.width
     ) {
-      console.log(
-        `componentDidUpdate: ${this.props.height} vs ${prevProps.height} and ${this.props.width} vs ${prevProps.width}`
-      )
+      // console.log(
+      //   `componentDidUpdate: ${this.props.height} vs ${prevProps.height} and ${this.props.width} vs ${prevProps.width}`
+      // )
       this.updateHeights()
     }
   }
@@ -70,15 +70,15 @@ export default class LayeredChartViewComponent extends React.Component<
   updateHeights() {
     // Calculate header and footer heights
     if (this.header && this.state.headerHeight !== this.header.offsetHeight) {
-      console.log(
-        `headerHeight: ${this.state.headerHeight} vs ${this.header.offsetHeight} => ${this.header.offsetHeight}`
-      )
+      // console.log(
+      //   `headerHeight: ${this.state.headerHeight} vs ${this.header.offsetHeight} => ${this.header.offsetHeight}`
+      // )
       this.setState({ headerHeight: this.header.offsetHeight })
     }
     if (this.footer && this.state.footerHeight !== this.footer.offsetHeight) {
-      console.log(
-        `footerHeight: ${this.state.footerHeight} vs ${this.footer.offsetHeight} => ${this.footer.offsetHeight}`
-      )
+      // console.log(
+      //   `footerHeight: ${this.state.footerHeight} vs ${this.footer.offsetHeight} => ${this.footer.offsetHeight}`
+      // )
       this.setState({ footerHeight: this.footer.offsetHeight })
     }
   }
@@ -95,7 +95,7 @@ export default class LayeredChartViewComponent extends React.Component<
     return R(
       "div",
       {
-        ref: (c) => {
+        ref: c => {
           return (this.header = c)
         }
       },
@@ -114,11 +114,12 @@ export default class LayeredChartViewComponent extends React.Component<
     return R(
       "div",
       {
-        ref: (c) => {
+        ref: c => {
           return (this.footer = c)
         }
       },
-      R(TextComponent, {
+      // Don't render footer if it's empty and no onDesignChange
+      isEmptyTextWidgetDesign(this.props.design.footer) && this.props.onDesignChange == null ? null : R(TextComponent, {
         design: this.props.design.footer!,
         onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
         schema: this.props.schema,
@@ -144,7 +145,7 @@ export default class LayeredChartViewComponent extends React.Component<
             height: this.props.height - this.state.headerHeight - this.state.footerHeight,
             scope: this.props.scope,
             onScopeChange: this.props.onScopeChange,
-            locale: this.context.locale
+            locale: this.context
           })
         : undefined,
       this.renderFooter()
@@ -206,14 +207,37 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
     // const c3 = require("c3")
     // console.log(chartOptions)
     try {
-      this.chart = c3.generate(chartOptions)  
+      this.chart = c3.generate(chartOptions)
     } catch (error) {
-      
-      throw(error)
+      throw error
+    }
+
+    const el = this.chartDiv
+    // https://github.com/mWater/monorepo/issues/8
+    if (props.design.type === "bar" && props.design.stacked && props.design.transpose) {
+      d3.select(el)
+        .selectAll(".bb-chart-text .bb-text")
+        .each(function (t: any, i: number) {
+          const bar = d3
+            .select(el)
+            .selectAll(".bb-chart-bar .bb-bar")
+            .filter((d: any) => {
+              return d.id === t.id && t.index === d.index
+            })
+            .nodes()[0] as SVGAElement
+
+          const text = d3.select(this)
+          const barBox = bar.getBBox()
+          const textBox = (text.nodes()[0]! as SVGAElement).getBBox()
+
+          if (barBox.width > textBox.width + 10) {
+            text.attr("x", barBox.x + (barBox.width - textBox.width) / 2)
+          } else {
+            text.style("opacity", 0)
+          }
+        })
     }
-    
 
-    console.log(this.chartDiv)
     // Remove listener for window focus (https://github.com/c3js/c3/issues/2742)
     window.removeEventListener("focus", this.chart.internal.windowFocusHandler)
     this.chart.internal.windowFocusHandler = () => {}
@@ -275,90 +299,108 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
     const compiler = new LayeredChartCompiler({ schema: this.props.schema })
     const el = this.chartDiv
 
-    if(!this.props.design.transpose && this.props.design.popoutSmallValues) {
+    if (!this.props.design.transpose && this.props.design.popoutSmallValues) {
       const stacked = this.props.design.stacked
-      
+
       let barWidth = 20
       const smalls: any[] = []
       const map = new Map()
       let _id = 0
       d3.select(el)
-      .selectAll(".bb-chart-bar .bb-bar")
-      .each(function (p: any, i){
-        if(!map.has(p.id)) {
-          map.set(p.id, _id++)
-        }
-        
-        const box = (d3.select(this).nodes()[0]! as SVGAElement).getBBox()
-        barWidth = box.width
-
-        if(box.height < 12) {
-          
-          d3.select(el)
-          .selectAll(".bb-chart-text .bb-text")
-          .filter(function(p, j){ return i === j })
-          .each(function(_p: any){
-            smalls.push({
-              origin_x: box.x,// + box.width,
-              origin_y: box.y,
-              series: map.get(p.id),
-              textY:  box.y - (12 * map.get(p.id)) - 10,
-              textX: box.x + 25,
-            })
-            ;(d3.select(this).node()as SVGAElement).classList.add("needs_adjustment")
-          })
-          .attr('data-boxX', box.x)
-          .attr('y', function(){
-            return box.y - (12 * map.get(p.id)) - 10
-            // return Number(d3.select(this).attr('y')) - 7
-          })
-        }
-      })
-    
-      if(smalls.length > 0) {
+        .selectAll(".bb-chart-bar .bb-bar")
+        .each(function (p: any, i) {
+          if (!map.has(p.id)) {
+            map.set(p.id, _id++)
+          }
+
+          const box = (d3.select(this).nodes()[0]! as SVGAElement).getBBox()
+          barWidth = box.width
+
+          if (box.height < 12) {
+            d3.select(el)
+              .selectAll(".bb-chart-text .bb-text")
+              .filter(function (p, j) {
+                return i === j
+              })
+              .each(function (_p: any) {
+                smalls.push({
+                  origin_x: box.x, // + box.width,
+                  origin_y: box.y,
+                  series: map.get(p.id),
+                  textY: box.y - 12 * map.get(p.id) - 10,
+                  textX: box.x + 25
+                })
+                ;(d3.select(this).node() as SVGAElement).classList.add("needs_adjustment")
+              })
+              .attr("data-boxX", box.x)
+              .attr("y", function () {
+                return box.y - 12 * map.get(p.id) - 10
+                // return Number(d3.select(this).attr('y')) - 7
+              })
+          }
+        })
+
+      if (smalls.length > 0) {
         const sliceWidth = 4
 
-        const seriesToBeDrawn = _.uniq(smalls.map((s) => s.series)).length
+        const seriesToBeDrawn = _.uniq(smalls.map(s => s.series)).length
 
         d3.select(el)
           .selectAll(".needs_adjustment")
-          .attr('x', function() {
+          .attr("x", function () {
             const self = d3.select(this)
-            return Number(self.attr('data-boxX')) + ((seriesToBeDrawn) * sliceWidth) + 10
+            return Number(self.attr("data-boxX")) + seriesToBeDrawn * sliceWidth + 10
           })
-          .attr('text-anchor', 'left')
+          .attr("text-anchor", "left")
 
-        const hackGroup = d3.select(el)
-        .selectAll(".bb-chart")
-        .selectAll(".popout_labels")
-        .data(["1"])
-        .enter()
-        .append('g')
-        .attr('class', 'popout_labels')
+        const hackGroup = d3
+          .select(el)
+          .selectAll(".bb-chart")
+          .selectAll(".popout_labels")
+          .data(["1"])
+          .enter()
+          .append("g")
+          .attr("class", "popout_labels")
 
         hackGroup
-          .selectAll('line')
+          .selectAll("line")
           .data(smalls)
           .enter()
-          .append('line')
-            .attr('x1', function(d) {return stacked ? d.origin_x + (sliceWidth*(seriesToBeDrawn - d.series)) : d.origin_x+5})
-            .attr('y1', function(d) {return d.origin_y})
-            .attr('x2', function(d) {return stacked ? d.origin_x + (sliceWidth*(seriesToBeDrawn - d.series)) : d.origin_x+5})
-            .attr('y2', function(d) {return d.textY + 3})
-            .attr('shape-rendering', 'crispEdges')
-            .style("stroke", "black")
-            .style("stroke-width", 0.5)
+          .append("line")
+          .attr("x1", function (d) {
+            return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5
+          })
+          .attr("y1", function (d) {
+            return d.origin_y
+          })
+          .attr("x2", function (d) {
+            return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5
+          })
+          .attr("y2", function (d) {
+            return d.textY + 3
+          })
+          .attr("shape-rendering", "crispEdges")
+          .style("stroke", "black")
+          .style("stroke-width", 0.5)
           .exit()
           .data(smalls)
           .enter()
-          .append('line')
-            .attr('x1', function(d) {return stacked ? d.origin_x + (sliceWidth*(seriesToBeDrawn - d.series)) : d.origin_x+5})
-            .attr('y1', function(d) {return d.textY + 3} )
-            .attr('x2', function(d) {return d.origin_x + ((seriesToBeDrawn) * sliceWidth) + 8})
-            .attr('y2', function(d) {return d.textY} )
-            .attr('shape-rendering', 'crispEdges')
-            .style("stroke", "black")
-            .style("stroke-width", 0.5)
+          .append("line")
+          .attr("x1", function (d) {
+            return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5
+          })
+          .attr("y1", function (d) {
+            return d.textY + 3
+          })
+          .attr("x2", function (d) {
+            return d.origin_x + seriesToBeDrawn * sliceWidth + 8
+          })
+          .attr("y2", function (d) {
+            return d.textY
+          })
+          .attr("shape-rendering", "crispEdges")
+          .style("stroke", "black")
+          .style("stroke-width", 0.5)
           .exit()
       }
     }
@@ -399,7 +441,12 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
         let scope
         const dataPoint = this.lookupDataPoint(dataMap, d)
         if (dataPoint) {
-          scope = compiler.createScope(this.props.design, dataPoint.layerIndex, dataPoint.row, this.props.locale || "en")
+          scope = compiler.createScope(
+            this.props.design,
+            dataPoint.layerIndex,
+            dataPoint.row,
+            this.props.locale || "en"
+          )
         }
 
         // Determine if scoped
@@ -452,7 +499,12 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
 
     // Create scope
     const compiler = new LayeredChartCompiler({ schema: this.props.schema })
-    const scope = compiler.createScope(this.props.design, dataPoint.layerIndex, dataPoint.row, this.props.locale || "en")
+    const scope = compiler.createScope(
+      this.props.design,
+      dataPoint.layerIndex,
+      dataPoint.row,
+      this.props.locale || "en"
+    )
 
     // If same scope data, remove scope
     if (this.props.scope && _.isEqual(scope.data, this.props.scope.data)) {
@@ -478,7 +530,7 @@ class C3ChartComponent extends React.Component<C3ChartComponentProps> {
     // css += ".c3-title { font-size: #{scale * 14}px; }\n"
 
     return R("div", {
-      ref: (c) => {
+      ref: c => {
         return (this.chartDiv = c)
       }
     })