Various chart axis fixes for CD

Accounts for the point when a Creative Different chart has only one
data point. In this case it expands the domain 1 month before and after
the single data point so it renders the bar and label in the center. It
also expands the stroke width of the data so it' displays as a bar.

Also fixed a bug with the ovelapping data points due to a feature
we're not using yet. The feature allows CD to mark data points as
`prioritized` but it was causing other problems and is not in use
so I removed it for now.

Author: Marco

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 .yarn-integrity
 
 build/
+dist/
 
 # redis dump
 dump.rdb

app/javascript/ui/global/charts/AreaChart.js

@@ -13,12 +13,13 @@ import {
   themeLabelStyles,
 } from '~/ui/global/charts/ChartUtils'
 
-const chartStyle = (style, order) => {
+const chartStyle = (style, order, singleDataPoint) => {
   if (style.fill) {
     const darkFill = darkenColor(style.fill, order)
     const opacity = 0.8
+    const strokeWidth = singleDataPoint ? 10 : null
     return {
-      data: { fill: darkFill, opacity },
+      data: { fill: darkFill, opacity, strokeWidth },
       labels: {
         fontSize: 18,
       },
@@ -87,10 +88,10 @@ const AreaChart = ({
         measure,
       })
   }
-
+  const singleDataPoint = values.length === 2 && values[1].isDuplicate
   return (
     <VictoryArea
-      style={chartStyle(dataset.style || {}, colorOrder)}
+      style={chartStyle(dataset.style || {}, colorOrder, singleDataPoint)}
       labels={d => d.value}
       labelComponent={
         <TickLabelWithTooltip

app/javascript/ui/global/charts/ChartGroup.js

@@ -23,6 +23,7 @@ import {
   victoryTheme,
   emojiSeriesForQuestionType,
   chartDomainForDatasetValues,
+  domainXForSingleValue,
   formatValuesForVictory,
 } from '~/ui/global/charts/ChartUtils'
 
@@ -95,10 +96,14 @@ class ChartGroup extends React.Component {
         )
       )
     })
-    return chartDomainForDatasetValues({
+    const domain = chartDomainForDatasetValues({
       values: allValues,
       maxYDomain: this.primaryDataset.max_domain,
     })
+    if (allValues.length === 1) {
+      domain.x = domainXForSingleValue(allValues[0].date)
+    }
+    return domain
   }
 
   get isSmallChartStyle() {
@@ -178,6 +183,7 @@ class ChartGroup extends React.Component {
 
   calculateLabelWidth(label) {
     const modifier = this.isSmallChartStyle ? 12 : 8
+    if (!label.text) return 0
     return label.text.length * modifier
   }
 
@@ -198,6 +204,7 @@ class ChartGroup extends React.Component {
       sortedLabels = sortedLabels.slice(1)
     }
     const overlappingLabels = []
+    if (sortedLabels.length === 1) return []
     sortedLabels.forEach((label, i) => {
       let overlapping = false
       for (let j = i + 1; j < sortedLabels.length; j++) {
@@ -215,6 +222,9 @@ class ChartGroup extends React.Component {
             overlappingLabels.push(label)
             label.overlapping = true
             continue
+          } else {
+            overlappingLabels.push(subLabel)
+            subLabel.overlapping = true
           }
         }
       }
@@ -239,18 +249,10 @@ class ChartGroup extends React.Component {
 
     const nonPrioritizedLabels = []
     overlappingLabels.forEach(l => {
-      const datum = this.primaryDatasetValues.find(dv =>
-        _.isEqual(dv.date, l.datum)
-      )
-      if (datum) {
-        if (datum.prioritized) {
-          datum.overlappingLabel = true
-        } else {
-          nonPrioritizedLabels.push(l)
-        }
-      }
+      nonPrioritizedLabels.push(l)
     })
 
+    console.log('here', nonPrioritizedLabels.map(l => l.x))
     return _.uniq(_.xorWith(renderedLabels, nonPrioritizedLabels, _.isEqual))
   }
 

app/javascript/ui/global/charts/ChartUtils.js

@@ -60,6 +60,17 @@ export const primaryFillColorFromDataset = dataset => {
   return dataset.style && dataset.style.fill ? dataset.style.fill : '#000000'
 }
 
+export const domainXForSingleValue = date => {
+  return [
+    moment(date)
+      .subtract('months', 1)
+      .toDate(),
+    moment(date)
+      .add('months', 1)
+      .toDate(),
+  ]
+}
+
 export const chartDomainForDatasetValues = ({ values, maxYDomain }) => {
   if (values.length === 0) {
     return {