Add stories for ChartDialog and HierarchicalFacet

src/client/components/facet_bar/ChartDialog.js

@@ -6,6 +6,10 @@ import Tooltip from '@material-ui/core/Tooltip'
 import GeneralDialog from '../main_layout/GeneralDialog'
 import ApexChart from '../facet_results/ApexChart'
 
+/**
+ * A component for displaying an ApexChart in a Material-UI Dialog.
+ * A Dialog is a type of modal window that appears in front of app content.
+ */
 const ChartDialog = props => {
   const [open, setOpen] = React.useState(false)
   const { fetchFacetConstrainSelf, facetID, facetClass, data, fetching } = props
@@ -85,10 +89,25 @@ const ChartDialog = props => {
 }
 
 ChartDialog.propTypes = {
+  /**
+   * Unique id of the facet.
+   */
   facetID: PropTypes.string,
+  /**
+   * The class of the facet for server-side configs.
+   */
   facetClass: PropTypes.string,
+  /**
+   * The data for Apex chart as an array of objecsts.
+   */
   data: PropTypes.array,
+  /**
+   * Loading indicator.
+   */
   fetching: PropTypes.bool.isRequired,
+  /**
+   * Redux action for fetching the data. Currently using a modified version of the fetchFacet action.
+   */
   fetchFacetConstrainSelf: PropTypes.func
 }
 

src/client/components/facet_bar/ChartDialog.stories.js

+import React from 'react'
+import ChartDialog from './ChartDialog'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+import { productionPlace } from './HierarchicalFacet.testData'
+
+export default {
+  component: ChartDialog,
+  title: 'Sampo-UI/facet_bar/ChartDialog',
+  decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
+}
+export const basic = props => {
+  return (
+    <div style={{ width: 400 }}>
+      <ChartDialog
+        data={productionPlace.flatValues}
+        fetching={false}
+        facetID='productionPlace'
+        facetClass='perspective1'
+        fetchFacetConstrainSelf={() => null}
+      />
+    </div>
+  )
+}

src/client/components/facet_results/ApexChart.js

@@ -52,6 +52,9 @@ class ApexChart extends React.Component {
   }
 
   componentDidMount () {
+    if (this.props.data.length > 0) {
+      this.renderChart()
+    }
     this.props.fetchFacetConstrainSelf({
       facetClass: this.props.facetClass,
       facetID: this.props.facetID
@@ -61,54 +64,60 @@ class ApexChart extends React.Component {
   componentDidUpdate (prevProps) {
     // Render the chart when data changes
     if (prevProps.data !== this.props.data) {
-      const labels = []
-      const series = []
-      let otherCount = 0
-      const totalLength = this.props.data.length
-      const threshold = 0.15
-      this.props.data.map(item => {
-        const portion = parseInt(item.instanceCount) / totalLength
-        if (portion < threshold) {
-          otherCount += parseInt(item.instanceCount)
-        } else {
-          labels.push(item.prefLabel)
-          series.push(parseInt(item.instanceCount))
-        }
-      })
-      if (otherCount !== 0) {
-        labels.push('Other')
-        series.push(otherCount)
-      }
-      let chartColors = []
-      if (series.length > colors.length) {
-        const quotient = Math.ceil(series.length / colors.length)
-        for (let i = 0; i < quotient; i++) {
-          chartColors = chartColors.concat(colors)
-        }
-      } else {
-        chartColors = colors
-      }
-      chartColors = chartColors.slice(0, series.length)
-      const options = {
-        ...this.props.options,
-        series,
-        labels,
-        colors: chartColors
-      }
-      // Destroy the previous chart
-      if (this.chart) {
-        this.chart.destroy()
-      }
-      this.chart = new ApexCharts(
-        this.chartRef.current,
-        options
-      )
-      this.chart.render()
+      this.renderChart()
     }
   }
 
   componentWillUnmount () {
-    this.chart.destroy()
+    if (!this.chart == null) {
+      this.chart.destroy()
+    }
+  }
+
+  renderChart = () => {
+    const labels = []
+    const series = []
+    let otherCount = 0
+    const totalLength = this.props.data.length
+    const threshold = 0.15
+    this.props.data.map(item => {
+      const portion = parseInt(item.instanceCount) / totalLength
+      if (portion < threshold) {
+        otherCount += parseInt(item.instanceCount)
+      } else {
+        labels.push(item.prefLabel)
+        series.push(parseInt(item.instanceCount))
+      }
+    })
+    if (otherCount !== 0) {
+      labels.push('Other')
+      series.push(otherCount)
+    }
+    let chartColors = []
+    if (series.length > colors.length) {
+      const quotient = Math.ceil(series.length / colors.length)
+      for (let i = 0; i < quotient; i++) {
+        chartColors = chartColors.concat(colors)
+      }
+    } else {
+      chartColors = colors
+    }
+    chartColors = chartColors.slice(0, series.length)
+    const options = {
+      ...this.props.options,
+      series,
+      labels,
+      colors: chartColors
+    }
+    // Destroy the previous chart
+    if (!this.chart == null) {
+      this.chart.destroy()
+    }
+    this.chart = new ApexCharts(
+      this.chartRef.current,
+      options
+    )
+    this.chart.render()
   }
 
   render () {

src/client/components/main_layout/GeneralDialog.js

@@ -27,7 +27,7 @@ const GeneralDialog = props => {
       {children}
     </Dialog>
   )
-};
+}
 
 GeneralDialog.propTypes = {
   classes: PropTypes.object.isRequired,