Commit 65d73d21 authored by Kevin Yumang's avatar Kevin Yumang

SERV-2286 - refactor charts

parent 91ded59f
...@@ -18,15 +18,15 @@ function set_chart() { ...@@ -18,15 +18,15 @@ function set_chart() {
function init_chart(chartId) { function init_chart(chartId) {
// Define element // Define element
let lineChartElement = document.getElementById(chartId); let chartElement = document.getElementById(chartId);
if (lineChartElement) { if (chartElement) {
let elementObject = $(lineChartElement); let elementObject = $(chartElement);
let lineChart = echarts.init(lineChartElement); let chartInstance = echarts.init(chartElement);
lineChart.showLoading({ chartInstance.showLoading({
text: 'LADE DATEN', text: 'LADE DATEN',
maskColor: '#353f53', maskColor: '#353f53',
color: '#fff', color: '#fff',
...@@ -35,9 +35,9 @@ function init_chart(chartId) { ...@@ -35,9 +35,9 @@ function init_chart(chartId) {
}); });
set_data(elementObject, function(options) { set_data(elementObject, function(options) {
lineChart.hideLoading(); chartInstance.hideLoading();
lineChart.setOption(options); chartInstance.setOption(options);
setResizeEvent(lineChartElement, lineChart); setResizeEvent(chartElement, chartInstance);
}) })
} }
} }
...@@ -295,10 +295,10 @@ function setMarkLine(series, seriesData, markLine) { ...@@ -295,10 +295,10 @@ function setMarkLine(series, seriesData, markLine) {
} }
//#endregion //#endregion
function setResizeEvent(lineChartElement, lineChart) { function setResizeEvent(chartElement, chartInstance) {
// Resize function // Resize function
let triggerChartResize = function() { let triggerChartResize = function() {
lineChartElement && lineChart.resize(); chartElement && chartInstance.resize();
}; };
// On sidebar width change // On sidebar width change
......
...@@ -18,17 +18,17 @@ function set_chart() { ...@@ -18,17 +18,17 @@ function set_chart() {
function init_chart(chartId) { function init_chart(chartId) {
// Define element // Define element
let lineChartElement = document.getElementById(chartId); let chartElement = document.getElementById(chartId);
if (lineChartElement) { if (chartElement) {
let elementObject = $(lineChartElement); let elementObject = $(chartElement);
let numberOfCharts = elementObject.attr('charts') ?? 1; let numberOfCharts = elementObject.attr('charts') ?? 1;
set_chart_height(numberOfCharts, lineChartElement) set_chart_height(numberOfCharts, chartElement)
let lineChart = echarts.init(lineChartElement); let chartInstance = echarts.init(chartElement);
lineChart.showLoading({ chartInstance.showLoading({
text: 'LADE DATEN', text: 'LADE DATEN',
maskColor: '#353f53', maskColor: '#353f53',
color: '#fff', color: '#fff',
...@@ -37,9 +37,9 @@ function init_chart(chartId) { ...@@ -37,9 +37,9 @@ function init_chart(chartId) {
}); });
set_data(elementObject, numberOfCharts, function(options) { set_data(elementObject, numberOfCharts, function(options) {
lineChart.hideLoading(); chartInstance.hideLoading();
lineChart.setOption(options); chartInstance.setOption(options);
setResizeEvent(lineChartElement, lineChart); setResizeEvent(chartElement, chartInstance);
}) })
} }
} }
...@@ -125,15 +125,15 @@ function set_data(elementObject, numberOfCharts, callback) { ...@@ -125,15 +125,15 @@ function set_data(elementObject, numberOfCharts, callback) {
} }
function set_chart_height(numberOfCharts, lineChartElement) { function set_chart_height(numberOfCharts, chartElement) {
// adjust container height before initialising the chart. // adjust container height before initialising the chart.
if (numberOfCharts > 1) { if (numberOfCharts > 1) {
let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80) let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
lineChartElement.style.height = height + 'px'; chartElement.style.height = height + 'px';
} }
return lineChartElement; return chartElement;
} }
//#endregion //#endregion
...@@ -440,10 +440,10 @@ function setArea(series, seriesData, isArea) { ...@@ -440,10 +440,10 @@ function setArea(series, seriesData, isArea) {
} }
//#endregion //#endregion
function setResizeEvent(lineChartElement, lineChart) { function setResizeEvent(chartElement, chartInstance) {
// Resize function // Resize function
let triggerChartResize = function() { let triggerChartResize = function() {
lineChartElement && lineChart.resize(); chartElement && chartInstance.resize();
}; };
// On sidebar width change // On sidebar width change
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment