luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

[ui] Line charts: explicitly update X-axis whenever xScale changes (#14814) 

* Explicitly update X-axis whenever xScale changes

* Changelog
This commit is contained in:
Phil Renaud 2022-10-06 16:59:16 -04:00 committed by GitHub
parent e516fc266f
commit 4b93a30225
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/14814.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Fixed line charts to update x-axis (time) where relevant
```

7
ui/app/components/line-chart.js
View File

@ -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() { mountD3Elements() {
if (!this.isDestroyed && !this.isDestroying) { if (!this.isDestroyed && !this.isDestroying) {
d3.select(this.element.querySelector('.x-axis')).call(this.xAxis); d3.select(this.element.querySelector('.x-axis')).call(this.xAxis);

1
ui/app/templates/components/line-chart.hbs
View File

@ -3,6 +3,7 @@
...attributes ...attributes
{{did-insert this.onInsert}} {{did-insert this.onInsert}}
{{did-update this.renderChart}} {{did-update this.renderChart}}
{{did-update this.recomputeXAxis this.xScale}}
{{window-resize this.updateDimensions}}> {{window-resize this.updateDimensions}}>
<svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}"> <svg data-test-line-chart aria-labelledby="{{this.titleId}}" aria-describedby="{{this.descriptionId}}">
<title id="{{this.titleId}}">{{this.title}}</title> <title id="{{this.titleId}}">{{this.title}}</title>