From a32e252ba45ad77e7d58d5099336afc1a5b8d275 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 2 Feb 2024 16:34:28 +0300 Subject: [PATCH 1/3] facilitate resizing of charts on the dashboard Signed-off-by: ianmuchyri --- ui/web/static/js/dashboards.js | 16 +- .../templates/charts/arealinechartmodal.html | 149 +++++---- ui/web/templates/charts/barchartmodal.html | 37 ++- ui/web/templates/charts/donutmodal.html | 77 +++-- .../charts/dynamicdatachartmodal.html | 285 +++++++++--------- ui/web/templates/charts/gaugemodal.html | 41 ++- .../charts/horizontalbarchartmodal.html | 81 +++-- ui/web/templates/charts/linechartmodal.html | 37 ++- ui/web/templates/charts/piechartmodal.html | 75 +++-- ui/web/templates/charts/speedgaugemodal.html | 127 ++++---- .../charts/stackedlinechartmodal.html | 101 +++---- ui/web/templates/charts/tempgaugemodal.html | 251 ++++++++------- ui/web/templates/dashboard.html | 4 +- 13 files changed, 626 insertions(+), 655 deletions(-) diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js index f6632ba5..6e426f0b 100644 --- a/ui/web/static/js/dashboards.js +++ b/ui/web/static/js/dashboards.js @@ -98,6 +98,7 @@ function editGrid(grid) { gridState.items.forEach((itemData) => { const newItem = document.createElement("div"); newItem.className = "item"; + newItem.classList.add("item-editable"); newItem.innerHTML = itemData.innerHTML.trim(); var scriptTag = document.createElement("script"); scriptTag.type = "text/javascript"; @@ -105,6 +106,8 @@ function editGrid(grid) { scriptTag.innerHTML = itemData.widgetScript; newItem.appendChild(scriptTag); const item = grid.add(newItem); + var widgetID = itemData.widgetID; + resizeObserver.observe(newItem); }); grid.layout(gridState.layout); } @@ -119,11 +122,6 @@ function editGrid(grid) { item.disabled = false; }); - document.querySelectorAll(".item").forEach((item) => { - item.classList.add("item-editable"); - resizeObserver.observe(item); - }); - return grid; } @@ -140,10 +138,12 @@ const resizeObserver = new ResizeObserver((entries) => { var el = item.getElement(); grid = item.getGrid(); + const contentEl = el.querySelector(".item-content"); + var chart = echarts.getInstanceByDom(contentEl); + // Calculate the change in width and height var widthChange = target.clientWidth - previousSize.width; var heightChange = target.clientHeight - previousSize.height; - const contentEl = el.querySelector(".item-content"); var itemContentWidth = parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange; var itemContentHeight = @@ -159,6 +159,10 @@ const resizeObserver = new ResizeObserver((entries) => { el.style.height = target.clientHeight + "px"; el.querySelector(".item-content").style.width = itemContentWidth + "px"; el.querySelector(".item-content").style.height = itemContentHeight + "px"; + chart.resize({ + width: itemContentWidth, + height: itemContentHeight, + }); grid.refreshItems(); grid.layout(true); } diff --git a/ui/web/templates/charts/arealinechartmodal.html b/ui/web/templates/charts/arealinechartmodal.html index 18dc5650..9b844e49 100644 --- a/ui/web/templates/charts/arealinechartmodal.html +++ b/ui/web/templates/charts/arealinechartmodal.html @@ -98,86 +98,83 @@ var widgetID = "arealinechart-" + Date.now(); var widgetScript = ` - var areaLineChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 300, - }); - var option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } + var areaLineChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + data: ['voltage', 'current', 'temperature', 'pressue'] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: ['thing1', 'thing2', 'thing3', 'thing4', 'thing5', 'thing6', 'thing7'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'voltage', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' }, - legend: { - data: ['voltage', 'current', 'temperature', 'pressue'] + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: 'current', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: 'temperature', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' }, - xAxis: [ - { - type: 'category', - boundaryGap: false, - data: ['thing1', 'thing2', 'thing3', 'thing4', 'thing5', 'thing6', 'thing7'] - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'voltage', - type: 'line', - stack: 'Total', - areaStyle: {}, - emphasis: { - focus: 'series' - }, - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: 'current', - type: 'line', - stack: 'Total', - areaStyle: {}, - emphasis: { - focus: 'series' - }, - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: 'temperature', - type: 'line', - stack: 'Total', - areaStyle: {}, - emphasis: { - focus: 'series' - }, - data: [150, 232, 201, 154, 190, 330, 410] - }, - { - name: 'pressure', - type: 'line', - stack: 'Total', - areaStyle: {}, - emphasis: { - focus: 'series' - }, - data: [320, 332, 301, 334, 390, 330, 320] - }, - ] - }; + data: [150, 232, 201, 154, 190, 330, 410] + }, + { + name: 'pressure', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390, 330, 320] + }, + ] + }; - areaLineChart.setOption(option);`; + areaLineChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html index e1c2be93..5ca4aaff 100644 --- a/ui/web/templates/charts/barchartmodal.html +++ b/ui/web/templates/charts/barchartmodal.html @@ -98,27 +98,24 @@ var widgetID = "barchart-" + Date.now(); var widgetScript = ` - var barChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 200, - }); - var option = { - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar' - } - ] - }; + var barChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar' + } + ] + }; - barChart.setOption(option);`; + barChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/donutmodal.html b/ui/web/templates/charts/donutmodal.html index 5517e73f..36a9908e 100644 --- a/ui/web/templates/charts/donutmodal.html +++ b/ui/web/templates/charts/donutmodal.html @@ -98,50 +98,47 @@ var widgetID = "donut-" + Date.now(); var widgetScript = ` - var donut = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 200, - }); - var option = { - tooltip: { - trigger: 'item' + var donut = echarts.init(document.getElementById("${widgetID}")); + var option = { + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' }, - legend: { - top: '5%', - left: 'center' - }, - series: [ - { - name: 'Access From', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold' - } - }, - labelLine: { - show: false - }, - data: [ - { value: 1048, name: 'Thing1' }, - { value: 735, name: 'Thing2' }, - { value: 580, name: 'Thing3' }, - { value: 484, name: 'Thing4' }, - { value: 300, name: 'Thing5' } - ] + emphasis: { + label: { + show: true, + fontSize: 40, + fontWeight: 'bold' } + }, + labelLine: { + show: false + }, + data: [ + { value: 1048, name: 'Thing1' }, + { value: 735, name: 'Thing2' }, + { value: 580, name: 'Thing3' }, + { value: 484, name: 'Thing4' }, + { value: 300, name: 'Thing5' } ] - }; + } + ] + }; - donut.setOption(option);`; + donut.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/dynamicdatachartmodal.html b/ui/web/templates/charts/dynamicdatachartmodal.html index b45e302c..d04deb0f 100644 --- a/ui/web/templates/charts/dynamicdatachartmodal.html +++ b/ui/web/templates/charts/dynamicdatachartmodal.html @@ -100,151 +100,148 @@ var widgetID = "dynamicDatachart-" + Date.now(); var widgetScript = ` - var dynamicDataChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 600, - height: 600, - }); - var app = {}; - var categories = (function () { - let now = new Date(); - let res = []; - let len = 10; - while (len--) { - res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); - now = new Date(+now - 2000); - } - return res; - })(); - var categories2 = (function () { - let res = []; - let len = 10; - while (len--) { - res.push(10 - len - 1); - } - return res; - })(); - var data = (function () { - - let res = []; - let len = 10; - while (len--) { - res.push(Math.round(Math.random() * 1000)); - } - return res; - })(); - var data2 = (function () { - let res = []; - let len = 0; - while (len < 10) { - res.push(+(Math.random() * 10 + 5).toFixed(1)); - len++; - } - return res; - })(); - var option = { - title: { - text: 'Dynamic Data' - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#283b56' - } - } - }, - legend: {}, - toolbox: { - show: true, - feature: { - dataView: { readOnly: false }, - restore: {}, - saveAsImage: {} - } - }, - dataZoom: { - show: false, - start: 0, - end: 100 - }, - xAxis: [ - { - type: 'category', - boundaryGap: true, - data: categories - }, - { - type: 'category', - boundaryGap: true, - data: categories2 - } - ], - yAxis: [ - { - type: 'value', - scale: true, - name: 'Price', - max: 30, - min: 0, - boundaryGap: [0.2, 0.2] - }, - { - type: 'value', - scale: true, - name: 'Order', - max: 1200, - min: 0, - boundaryGap: [0.2, 0.2] - } - ], - series: [ - { - name: 'Dynamic Bar', - type: 'bar', - xAxisIndex: 1, - yAxisIndex: 1, - data: data - }, - { - name: 'Dynamic Line', - type: 'line', - data: data2 - } - ] - }; - app.count = 11; - setInterval(function () { - let axisData = new Date().toLocaleTimeString().replace(/^\D*/, ''); - data.shift(); - data.push(Math.round(Math.random() * 1000)); - data2.shift(); - data2.push(+(Math.random() * 10 + 5).toFixed(1)); - categories.shift(); - categories.push(axisData); - categories2.shift(); - categories2.push(app.count++); - dynamicDataChart.setOption({ - xAxis: [ - { - data: categories - }, - { - data: categories2 - } - ], - series: [ - { - data: data - }, - { - data: data2 - } - ] - }); - }, 2100); + var dynamicDataChart = echarts.init(document.getElementById("${widgetID}")); + var app = {}; + var categories = (function () { + let now = new Date(); + let res = []; + let len = 10; + while (len--) { + res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); + now = new Date(+now - 2000); + } + return res; + })(); + var categories2 = (function () { + let res = []; + let len = 10; + while (len--) { + res.push(10 - len - 1); + } + return res; + })(); + var data = (function () { + + let res = []; + let len = 10; + while (len--) { + res.push(Math.round(Math.random() * 1000)); + } + return res; + })(); + var data2 = (function () { + let res = []; + let len = 0; + while (len < 10) { + res.push(+(Math.random() * 10 + 5).toFixed(1)); + len++; + } + return res; + })(); + var option = { + title: { + text: 'Dynamic Data' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#283b56' + } + } + }, + legend: {}, + toolbox: { + show: true, + feature: { + dataView: { readOnly: false }, + restore: {}, + saveAsImage: {} + } + }, + dataZoom: { + show: false, + start: 0, + end: 100 + }, + xAxis: [ + { + type: 'category', + boundaryGap: true, + data: categories + }, + { + type: 'category', + boundaryGap: true, + data: categories2 + } + ], + yAxis: [ + { + type: 'value', + scale: true, + name: 'Price', + max: 30, + min: 0, + boundaryGap: [0.2, 0.2] + }, + { + type: 'value', + scale: true, + name: 'Order', + max: 1200, + min: 0, + boundaryGap: [0.2, 0.2] + } + ], + series: [ + { + name: 'Dynamic Bar', + type: 'bar', + xAxisIndex: 1, + yAxisIndex: 1, + data: data + }, + { + name: 'Dynamic Line', + type: 'line', + data: data2 + } + ] + }; + app.count = 11; + setInterval(function () { + let axisData = new Date().toLocaleTimeString().replace(/^\D*/, ''); + data.shift(); + data.push(Math.round(Math.random() * 1000)); + data2.shift(); + data2.push(+(Math.random() * 10 + 5).toFixed(1)); + categories.shift(); + categories.push(axisData); + categories2.shift(); + categories2.push(app.count++); + dynamicDataChart.setOption({ + xAxis: [ + { + data: categories + }, + { + data: categories2 + } + ], + series: [ + { + data: data + }, + { + data: data2 + } + ] + }); + }, 2100); - dynamicDataChart.setOption(option);`; + dynamicDataChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/gaugemodal.html b/ui/web/templates/charts/gaugemodal.html index 750f9ae0..3606ac2e 100644 --- a/ui/web/templates/charts/gaugemodal.html +++ b/ui/web/templates/charts/gaugemodal.html @@ -98,33 +98,30 @@ var widgetID = "gauge-" + Date.now(); var widgetScript = ` - var gaugeChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 300, - height: 300, - }); - var option = { - tooltip: { - formatter: "{a}
{b} : {c}%", + var gaugeChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + tooltip: { + formatter: "{a}
{b} : {c}%", + }, + series: [ + { + name: "", + type: "gauge", + progress: { + show: true, }, - series: [ + detail: { valueAnimation: true, formatter: "{value}" }, + data: [ { - name: "", - type: "gauge", - progress: { - show: true, - }, - detail: { valueAnimation: true, formatter: "{value}" }, - data: [ - { - value: 55, - name: "Pressure", - }, - ], + value: 55, + name: "Pressure", }, ], - }; + }, + ], + }; - gaugeChart.setOption(option);`; + gaugeChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html index 09664d38..8522e4fb 100644 --- a/ui/web/templates/charts/horizontalbarchartmodal.html +++ b/ui/web/templates/charts/horizontalbarchartmodal.html @@ -100,49 +100,46 @@ var widgetID = "linechart-" + Date.now(); var widgetScript = ` - var lineChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 200, - }); - var option = { - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line' - } - ] - }; + var lineChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [150, 230, 224, 218, 135, 147, 260], + type: 'line' + } + ] + }; - lineChart.setOption(option);`; + lineChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/piechartmodal.html b/ui/web/templates/charts/piechartmodal.html index 3a160c2c..758d5aa3 100644 --- a/ui/web/templates/charts/piechartmodal.html +++ b/ui/web/templates/charts/piechartmodal.html @@ -98,47 +98,44 @@ var widgetID = "piechart-" + Date.now(); var widgetScript = ` - var pieChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 300, - }); - var option = { - title: { - text: 'active channels per thing', - subtext: 'Fake Data', - left: 'center' - }, - tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - left: 'left' - }, - series: [ - { - name: 'Access From', - type: 'pie', - radius: '50%', - data: [ - { value: 1048, name: 'thing1' }, - { value: 735, name: 'thing2' }, - { value: 580, name: 'thing3' }, - { value: 484, name: 'thing4' }, - { value: 300, name: 'thing5' } - ], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } + var pieChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + title: { + text: 'active channels per thing', + subtext: 'Fake Data', + left: 'center' + }, + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + left: 'left' + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: '50%', + data: [ + { value: 1048, name: 'thing1' }, + { value: 735, name: 'thing2' }, + { value: 580, name: 'thing3' }, + { value: 484, name: 'thing4' }, + { value: 300, name: 'thing5' } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' } - } - ] - }; + } + } + ] + }; - pieChart.setOption(option);`; + pieChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/speedgaugemodal.html b/ui/web/templates/charts/speedgaugemodal.html index 05fd0b1c..bcdaa2aa 100644 --- a/ui/web/templates/charts/speedgaugemodal.html +++ b/ui/web/templates/charts/speedgaugemodal.html @@ -98,78 +98,75 @@ var widgetID = "speedgauge-" + Date.now(); var widgetScript = ` - var speedGaugeChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 500, - }); - var option = { - series: [ - { - type: 'gauge', - axisLine: { - lineStyle: { - width: 30, - color: [ - [0.3, '#67e0e3'], - [0.7, '#37a2da'], - [1, '#fd666d'] - ] - } - }, - pointer: { - itemStyle: { - color: 'auto' - } - }, - axisTick: { - distance: -30, - length: 8, - lineStyle: { - color: '#fff', - width: 2 - } - }, - splitLine: { - distance: -30, - length: 30, - lineStyle: { - color: '#fff', - width: 4 - } - }, - axisLabel: { - color: 'inherit', - distance: 40, - fontSize: 20 - }, - detail: { - valueAnimation: true, - formatter: '{value} km/h', - color: 'inherit' - }, - data: [ - { - value: 25 - } + var speedGaugeChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + series: [ + { + type: 'gauge', + axisLine: { + lineStyle: { + width: 30, + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] ] } + }, + pointer: { + itemStyle: { + color: 'auto' + } + }, + axisTick: { + distance: -30, + length: 8, + lineStyle: { + color: '#fff', + width: 2 + } + }, + splitLine: { + distance: -30, + length: 30, + lineStyle: { + color: '#fff', + width: 4 + } + }, + axisLabel: { + color: 'inherit', + distance: 40, + fontSize: 20 + }, + detail: { + valueAnimation: true, + formatter: '{value} km/h', + color: 'inherit' + }, + data: [ + { + value: 25 + } ] - }; - setInterval(function () { - speedGaugeChart.setOption({ - series: [ + } + ] + }; + setInterval(function () { + speedGaugeChart.setOption({ + series: [ + { + data: [ { - data: [ - { - value: +(Math.random() * 100).toFixed(2) - } - ] + value: +(Math.random() * 100).toFixed(2) } ] - }); - }, 2000); + } + ] + }); + }, 2000); - speedGaugeChart.setOption(option);`; + speedGaugeChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html index 451d796b..7fa8dff2 100644 --- a/ui/web/templates/charts/stackedlinechartmodal.html +++ b/ui/web/templates/charts/stackedlinechartmodal.html @@ -98,59 +98,56 @@ var widgetID = "stackedlinechart-" + Date.now(); var widgetScript = ` - var stackedLineChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 300, - }); - var option = { - tooltip: { - trigger: 'axis' - }, - legend: { - data: ['current', 'voltage', 'temperature'] - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - toolbox: { - feature: { - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['Thing1', 'Thing2', 'Thing3', 'Thing4', 'Thing5', 'Thing6', 'Thing7'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - name: 'current', - type: 'line', - stack: 'Total', - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: 'voltage', - type: 'line', - stack: 'Total', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: 'temperature', - type: 'line', - stack: 'Total', - data: [150, 232, 201, 154, 190, 330, 410] - }, - ] - }; + var stackedLineChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['current', 'voltage', 'temperature'] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['Thing1', 'Thing2', 'Thing3', 'Thing4', 'Thing5', 'Thing6', 'Thing7'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: 'current', + type: 'line', + stack: 'Total', + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: 'voltage', + type: 'line', + stack: 'Total', + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: 'temperature', + type: 'line', + stack: 'Total', + data: [150, 232, 201, 154, 190, 330, 410] + }, + ] + }; - stackedLineChart.setOption(option);`; + stackedLineChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/charts/tempgaugemodal.html b/ui/web/templates/charts/tempgaugemodal.html index 06323d28..7029e171 100644 --- a/ui/web/templates/charts/tempgaugemodal.html +++ b/ui/web/templates/charts/tempgaugemodal.html @@ -98,142 +98,139 @@ var widgetID = "tempgauge-" + Date.now(); var widgetScript = ` - var tempGaugeChart = echarts.init(document.getElementById("${widgetID}"), null, { - width: 500, - height: 500, - }); - var option = { - series: [ + var tempGaugeChart = echarts.init(document.getElementById("${widgetID}")); + var option = { + series: [ + { + type: 'gauge', + center: ['50%', '60%'], + startAngle: 200, + endAngle: -20, + min: 0, + max: 60, + splitNumber: 12, + itemStyle: { + color: '#FFAB91' + }, + progress: { + show: true, + width: 30 + }, + pointer: { + show: false + }, + axisLine: { + lineStyle: { + width: 30 + } + }, + axisTick: { + distance: -45, + splitNumber: 5, + lineStyle: { + width: 2, + color: '#999' + } + }, + splitLine: { + distance: -52, + length: 14, + lineStyle: { + width: 3, + color: '#999' + } + }, + axisLabel: { + distance: -20, + color: '#999', + fontSize: 20 + }, + anchor: { + show: false + }, + title: { + show: false + }, + detail: { + valueAnimation: true, + width: '60%', + lineHeight: 40, + borderRadius: 8, + offsetCenter: [0, '-15%'], + fontSize: 60, + fontWeight: 'bolder', + formatter: '{value} °C', + color: 'inherit' + }, + data: [ { - type: 'gauge', - center: ['50%', '60%'], - startAngle: 200, - endAngle: -20, - min: 0, - max: 60, - splitNumber: 12, - itemStyle: { - color: '#FFAB91' - }, - progress: { - show: true, - width: 30 - }, - pointer: { - show: false - }, - axisLine: { - lineStyle: { - width: 30 - } - }, - axisTick: { - distance: -45, - splitNumber: 5, - lineStyle: { - width: 2, - color: '#999' - } - }, - splitLine: { - distance: -52, - length: 14, - lineStyle: { - width: 3, - color: '#999' - } - }, - axisLabel: { - distance: -20, - color: '#999', - fontSize: 20 - }, - anchor: { - show: false - }, - title: { - show: false - }, - detail: { - valueAnimation: true, - width: '60%', - lineHeight: 40, - borderRadius: 8, - offsetCenter: [0, '-15%'], - fontSize: 60, - fontWeight: 'bolder', - formatter: '{value} °C', - color: 'inherit' - }, - data: [ - { - value: 20 - } - ] - }, + value: 20 + } + ] + }, + { + type: 'gauge', + center: ['50%', '60%'], + startAngle: 200, + endAngle: -20, + min: 0, + max: 60, + itemStyle: { + color: '#FD7347' + }, + progress: { + show: true, + width: 8 + }, + pointer: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + show: false + }, + data: [ { - type: 'gauge', - center: ['50%', '60%'], - startAngle: 200, - endAngle: -20, - min: 0, - max: 60, - itemStyle: { - color: '#FD7347' - }, - progress: { - show: true, - width: 8 - }, - pointer: { - show: false - }, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - splitLine: { - show: false - }, - axisLabel: { - show: false - }, - detail: { - show: false - }, - data: [ - { - value: 37 - } - ] + value: 37 } ] - }; - setInterval(function () { - const random = +(Math.random() * 60).toFixed(2); - tempGaugeChart.setOption({ - series: [ + } + ] + }; + setInterval(function () { + const random = +(Math.random() * 60).toFixed(2); + tempGaugeChart.setOption({ + series: [ + { + data: [ { - data: [ - { - value: random - } - ] - }, + value: random + } + ] + }, + { + data: [ { - data: [ - { - value: random - } - ] + value: random } ] - }); - }, 2000); + } + ] + }); + }, 2000); - tempGaugeChart.setOption(option);`; + tempGaugeChart.setOption(option);`; addWidget(widgetID, widgetScript); }); diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html index d4e5d5a8..4c3cd2ae 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -118,8 +118,7 @@
Widgets
-
-
+
`; var scriptTag = document.createElement("script"); @@ -129,6 +128,7 @@
Widgets
newItem.appendChild(scriptTag); grid.add(newItem); + resizeObserver.observe(newItem); } function removeGridItem(item) { From 1ac5e230a948429cd7a15df6bbeee196b049f46f Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 2 Feb 2024 16:38:11 +0300 Subject: [PATCH 2/3] remove unused variables Signed-off-by: ianmuchyri --- ui/web/static/js/dashboards.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js index 6e426f0b..d23deac5 100644 --- a/ui/web/static/js/dashboards.js +++ b/ui/web/static/js/dashboards.js @@ -105,8 +105,6 @@ function editGrid(grid) { scriptTag.defer = true; scriptTag.innerHTML = itemData.widgetScript; newItem.appendChild(scriptTag); - const item = grid.add(newItem); - var widgetID = itemData.widgetID; resizeObserver.observe(newItem); }); grid.layout(gridState.layout); From 77774ca58eee15f7d4896d52f9d9a1f761ba7964 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Mon, 5 Feb 2024 11:53:03 +0300 Subject: [PATCH 3/3] fix error Signed-off-by: ianmuchyri --- ui/web/static/js/dashboards.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js index d23deac5..298b25a6 100644 --- a/ui/web/static/js/dashboards.js +++ b/ui/web/static/js/dashboards.js @@ -105,6 +105,7 @@ function editGrid(grid) { scriptTag.defer = true; scriptTag.innerHTML = itemData.widgetScript; newItem.appendChild(scriptTag); + grid.add(newItem); resizeObserver.observe(newItem); }); grid.layout(gridState.layout);