diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss index f04b13e86..68651cd25 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss @@ -4,7 +4,7 @@ // height: 460px; // width: 680px; } - + ::ng-deep .timeseries-base { @include themify($themes) { fill: lighten(themed('dark-primary-text'), 45%); @@ -13,10 +13,10 @@ .chart-wrapper { height: calc(100% - 1px); - width: calc(50% - 30px); + width: calc(100% - 1px); } #timeseriesChart { height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts index 767f9c4a7..181e4c0cb 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts @@ -156,52 +156,30 @@ export class TimeseriesChartComponent implements OnInit { } public onResized() { - // this.createSVG(); + this.createSVG(); } private createSVG() { + this.margin = { top: 10, right: 0, bottom: 25, left: 50 }; + if (this.svg) { d3.selectAll('#timeseries-chart > svg').remove(); d3.selectAll('.tooltip').remove(); + let element = document.getElementById("timeseriesChart"); + element.innerHTML = ""; } - this.margin = { top: 10, right: 0, bottom: 25, left: 50 }; - this.margin = this.margin; - - const elem = document.getElementById('ts-chart-column'); - const tsChart = document.getElementById('timeseriesChart'); - - this.height = elem.offsetHeight; - this.width = tsChart.offsetWidth; - // let chartHeight = this.height - this.margin.top - this.margin.bottom; - // let chartWidth = this.width - this.margin.left - this.margin.right; - let chartWidthMargin =this.width + this.margin.left + this.margin.right; - let chartHeightMargin = this.height + this.margin.top + this.margin.bottom; - - // let chartMin = Math.min(chartHeight, chartWidth); - - // this.height = this.timeseriesChart.nativeElement.offsetHeight - this.margin.top - this.margin.bottom; - // this.width = this.timeseriesChart.nativeElement.offsetWidth - this.margin.left - this.margin.right; - // - // this.svg = d3.select(this.timeseriesChart.nativeElement).append('svg') - // .attr('width', this.width + this.margin.left + this.margin.right) - // .attr('height', this.height + this.margin.top + this.margin.bottom) - // .append('g') - // .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`); - - + this.height = this.timeseriesChart.nativeElement.offsetHeight - this.margin.top - this.margin.bottom; + this.width = this.timeseriesChart.nativeElement.offsetWidth - this.margin.left - this.margin.right; this.svg = d3.select(this.timeseriesChart.nativeElement).append('svg') - .attr('width', chartWidthMargin + this.margin.left) - .attr('height', chartHeightMargin) - .attr('viewBox','-10 -10 '+ chartWidthMargin +' '+ chartHeightMargin) - .attr('preserveAspectRatio','xMaxYMax') + .attr('width', this.width + this.margin.left + this.margin.right) + .attr('height', this.height + this.margin.top + this.margin.bottom) .append('g') - .attr('transform', - 'translate(0,chartMin)'); - + .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`); this.drawChart(); + } }