From f5932dd19a1378e93e0d36857c28e0b5aa77e9dd Mon Sep 17 00:00:00 2001
From: s-egge <ssteele836@gmail.com>
Date: Sun, 24 Dec 2023 10:28:58 -0800
Subject: [PATCH] align charts to the left and fix tooltips

---
 src/components/charts/chartController.vue | 67 ++++++++++++++++++-----
 src/components/charts/linechart.js        |  4 +-
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue
index 06b30a1a..570f1623 100644
--- a/src/components/charts/chartController.vue
+++ b/src/components/charts/chartController.vue
@@ -235,24 +235,42 @@ export default {
             data.datasets.length >= 1 &&
             data.datasets[0].data.length >= 1
           ) {
-            this.chart.update()
-            let timeDif =
-              new Date(data.datasets[0].data[data.datasets[0].data.length - 1].x).getTime() -
-              new Date(data.datasets[0].data[0].x).getTime()
-            let dif = 0
-            if (timeDif <= 24 * 60 * 60 * 1000) {
-              dif = 2
-              this.chart.options.scales.xAxes[0].time.unit = 'minute'
-            } else if (timeDif <= 7 * 24 * 60 * 60 * 1000) {
-              dif = 1
-              this.chart.options.scales.xAxes[0].time.unit = 'hour'
-            } else {
-              this.chart.options.scales.xAxes[0].time.unit = 'day'
-            }
-            this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = (this.height / 200) * 8 - dif
+              this.chart.update()
+
+              // if multiple chart timeperiods, find chart with largest date range
+              if (data.datasets.length > 1 && data.datasets[0].multStart.length > 1) {
+
+                // find chart with largest dataset
+                let largestChart = data.datasets[0]
+                for (let i in data.datasets) {
+                  if (data.datasets[i].data.length > largestChart.data.length) {
+                    largestChart = data.datasets[i]
+                  }
+                }
+
+                // map all other datasets to the largest dataset
+                this.mapXValues(largestChart, data.datasets)
+              } 
+
+              let timeDif =
+                new Date(data.datasets[0].data[data.datasets[0].data.length - 1].x).getTime() -
+                new Date(data.datasets[0].data[0].x).getTime()
+              let dif = 0
+              if (timeDif <= 24 * 60 * 60 * 1000) {
+                dif = 2
+                this.chart.options.scales.xAxes[0].time.unit = 'minute'
+              } else if (timeDif <= 7 * 24 * 60 * 60 * 1000) {
+                dif = 1
+                this.chart.options.scales.xAxes[0].time.unit = 'hour'
+              } else {
+                this.chart.options.scales.xAxes[0].time.unit = 'day'
+              }
+              this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = (this.height / 200) * 8 - dif
           }
           this.chartData = data
+
           console.log(this.path)
+          console.log(this.chartData)
           this.loading = false
           // console.log('done loading!', this.path, data)
           // this.$store.getters[this.path]
@@ -338,6 +356,25 @@ export default {
           return ' '
         }
       }
+    },
+    // Map x-values of all datasets to the x-values of the largest dataset when dealing with
+    // multiple time periods so that the charts are overlapped/aligned
+    mapXValues: function (largestChart, charts) {
+      for (let chart of charts){
+        // check if current chart is the largest chart, don't map if so
+        // may need a better way to differentiate charts, but this works for now
+        // and accounts for have two charts that are the same length
+        if (chart.backgroundColor != largestChart.backgroundColor) {
+          //loop through all data points in current chart and map x-value to largest chart
+          //also create a datapoint for the original x-value so that we can display it on tooltip hover
+          for (let i in chart.data) {
+            if (chart.data[i].y != null){
+              chart.data[i].originalX = chart.data[i].x
+              chart.data[i].x = largestChart.data[i].x
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/components/charts/linechart.js b/src/components/charts/linechart.js
index 21a0b460..caf08c77 100644
--- a/src/components/charts/linechart.js
+++ b/src/components/charts/linechart.js
@@ -31,7 +31,9 @@ export default {
         tooltips: {
           callbacks: {
             title: function (item, data) {
-              let d = new Date(item[0].xLabel)
+              let originalXlabel = data.datasets[item[0].datasetIndex].data[item[0].index].originalX
+              // use originalXlabel if it exists, otherwise use the default xLabel
+              let d = new Date(originalXlabel || item[0].xLabel)
               let meridiem = 'am'
               let hours = d.getHours()
               if (hours > 12) {