x-axis labels fix

src/components/charts/chartController.vue

@@ -238,7 +238,7 @@ export default {
  this.chart.update()
 
  // format charts if there are multiple time peridods
- if (data.datasets.length > 1 && data.datasets[0].multStart.length > 1) {
+ if (this.multipleTimePeriods(data.datasets)) {
  this.formatMultipleTimePeriods(data.datasets)
  }
 
@@ -340,7 +340,7 @@ export default {
  } else {
  // if there are multiple time period charts, don't display a label on the bottom as the time
  // periods will be displayed individually on the top
- if (this.chartData.datasets.length > 1 && this.chartData.datasets[0].multStart.length > 1) {
+ if (this.multipleTimePeriods(this.chartData.datasets)) {
  return ' '
  }
 
@@ -353,6 +353,12 @@ export default {
  }
  }
  },
+ multipleTimePeriods: function (charts) {
+ if (charts.length > 1 && charts[0].multStart.length > 1) {
+ return true
+ }
+ return false
+ },
  // this formats a chart with multiple time periods, changing labels, aligning all charts to the left,
  // and mapping datasets so that hovering displays the correct date
  formatMultipleTimePeriods: function (charts) {
@@ -385,6 +391,30 @@ export default {
  }
  }
  }
+ },
+ // this is called when there are multiple time period charts, it returns an array of all the
+ // chart dates for that index so that they can be displayed on multiple lines
+ buildXaxisTick (index) {
+ if (this.chartData.datasets) {
+ let tick = []
+ for (let chart of this.chartData.datasets) {
+ let date = ''
+
+ if (chart.data[index]) {
+ if (chart.data[index].originalX) {
+ date = chart.data[index].originalX.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' })
+ } else {
+ date = chart.data[index].x.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' })
+ }
+ }
+
+ tick.push(date)
+ }
+
+ return tick
+ }
+
+ return ''
  }
  }
 }

src/components/charts/linechart.js

@@ -144,7 +144,17 @@ export default {
  fontFamily: 'Open Sans',
  autoSkip: true,
  stepSize: 10,
- source: 'data'
+ source: 'data',
+ // the following three settinsg change the x-ticks if there are multiple time periods,
+ // otherwise the default settings are used
+ autoSkipPadding: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 10 : 3,
+ maxRotation: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 0 : 50,
+ callback: (val, index) => {
+ if (this.$parent.multipleTimePeriods(this.$parent.chartData.datasets)) {
+ return this.$parent.buildXaxisTick(index)
+ }
+ return val
+ }
  },
  scaleLabel: {
  display: this.$parent.buildLabel('y') !== '',