From 8a3c9755ef705b60996b9b84835e29586c5916ce Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Thu, 6 Oct 2022 16:59:16 -0400
Subject: [PATCH] [ui] Line charts: explicitly update X-axis whenever xScale
 changes (#14814)

* Explicitly update X-axis whenever xScale changes

* Changelog
---
 .changelog/14814.txt                       | 3 +++
 ui/app/components/line-chart.js            | 7 +++++++
 ui/app/templates/components/line-chart.hbs | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 .changelog/14814.txt

diff --git a/.changelog/14814.txt b/.changelog/14814.txt
new file mode 100644
index 00000000000..b2661020848
--- /dev/null
+++ b/.changelog/14814.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed line charts to update x-axis (time) where relevant
+```
diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index c9a119b7581..5acf3f94e06 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -350,6 +350,13 @@ export default class LineChart extends Component {
     });
   }
 
+  @action
+  recomputeXAxis(el) {
+    if (!this.isDestroyed && !this.isDestroying) {
+      d3.select(el.querySelector('.x-axis')).call(this.xAxis);
+    }
+  }
+
   mountD3Elements() {
     if (!this.isDestroyed && !this.isDestroying) {
       d3.select(this.element.querySelector('.x-axis')).call(this.xAxis);
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 7927fe2c689..f669bd2023a 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -3,6 +3,7 @@
   ...attributes
   {{did-insert this.onInsert}}
   {{did-update this.renderChart}}
+  {{did-update this.recomputeXAxis this.xScale}}
   {{window-resize this.updateDimensions}}>
   <svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}">
     <title id="{{this.titleId}}">{{this.title}}</title>