From 1dd00f83e93202e6f562165e3fc2aa6745647416 Mon Sep 17 00:00:00 2001 From: 1998-felix Date: Wed, 20 Mar 2024 11:29:13 +0300 Subject: [PATCH] feat: Remove double bar chart Signed-off-by: 1998-felix --- ui/charts.go | 5 - ui/web/static/js/charts.js | 145 -------- .../templates/charts/doublebarchartmodal.html | 318 ------------------ ui/web/templates/dashboard.html | 1 - 4 files changed, 469 deletions(-) delete mode 100644 ui/web/templates/charts/doublebarchartmodal.html diff --git a/ui/charts.go b/ui/charts.go index 4305d6ef2..22a67a9a6 100644 --- a/ui/charts.go +++ b/ui/charts.go @@ -68,11 +68,6 @@ func CreateItem() []Item { Content: "This is a horizontal bar chart", Widget: "horizontalBarChart", }, - { - Title: "Double Bar Chart", - Content: "This is a double bar chart", - Widget: "doubleBarChart", - }, { Title: "Multiple Line Chart", Content: "This is a multiple line chart", diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index 68134f3aa..a4f822232 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -300,150 +300,6 @@ class DonutChart extends Echart { } } -class DoubleBarChart extends Echart { - constructor(chartData, widgetID) { - super(widgetID, chartData); - this.Script = this.#generateScript(); - } - - #generateScript() { - let seriesName = this.chartData.seriesName.split(","); - return ` - var doubleBarChart = echarts.init(document.getElementById("${this.ID}")); - var option = { - title: { - text: '${this.chartData.title}', - left: 'left' - }, - tooltip: { - trigger: 'axis' - }, - legend: { - show: true, - - }, - toolbox: { - show: true, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ['line', 'bar'] }, - restore: { show: true }, - saveAsImage: { show: true } - } - }, - calculable: true, - xAxis: [ - { - type: 'category', - // prettier-ignore - data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - name: '${this.chartData.xAxisLabel}', - nameLocation: 'middle', - nameGap: 30 - } - ], - yAxis: [ - { - type: 'value', - name: '${this.chartData.yAxisLabel}', - nameLocation: 'middle', - nameGap: 40 - } - ], - series: [ - { - name: '${seriesName[0]}', - type: 'bar', - data: [ - 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 - ], - markPoint: { - data: [ - { type: 'max', name: 'Max' }, - { type: 'min', name: 'Min' } - ] - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - }, - { - name: '${seriesName[1]}', - type: 'bar', - data: [ - 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 - ], - markPoint: { - data: [ - { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, - { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 } - ] - }, - markLine: { - data: [{ type: 'average', name: 'Avg' }] - } - } - ] - }; - - doubleBarChart.setOption(option); - var chartData = { - channels: '${this.chartData.channels}'.split(','), - things: '${this.chartData.things}'.split(','), - name: '${this.chartData.valueName}', - from: ${this.chartData.startTime}, - to: ${this.chartData.stopTime}, - aggregation: '${this.chartData.aggregationType}', - limit: 100, - interval:'${this.chartData.updateInterval}' - }; - - async function fetchData(doubleBarChart, chartData) { - try { - const dataSeries0 = []; - const dataSeries1 = []; - const xAxisArray = []; - - - for (let i = 0; i < chartData.channels.length; i++) { - const apiEndpoint = '${pathPrefix}/data?channel=' + chartData.channels[i] + - '&name=' + chartData.name + - '&from='+ chartData.from + - '&to=' + chartData.to + - '&aggregation=' + chartData.aggregation + - '&limit=10' + - '&interval=' + chartData.interval + - '&publisher=' + chartData.things[i]; - - const response = await fetch(apiEndpoint); - if (!response.ok) { - throw new Error('HTTP request failed with status:', response.status) - } - const data = await response.json(); - if (data.messages != undefined && data.messages.length > 0) { - data.messages.forEach((message) => { - xAxisArray.push(new Date(message.time).toLocaleTimeString()); - dataSeries0.push(message.value); - }); - } - } - updateChart(horizontalBarChart, plotData); - } catch (error) { - console.error("Error fetching data:", error); - } - } - - updateChart(data) { - const barChart = echarts.init(document.getElementById(this.ID)); - const option = barChart.getOption(); - option.series[0].data = data.seriesData; - barChart.setOption(option); - } - } - `; - } -} - class DynamicDataChart extends Echart { constructor(chartData, widgetID) { super(widgetID, chartData); @@ -1937,7 +1793,6 @@ const chartTypes = { areaLineChart: AreaLineChart, timeSeriesBarChart: TimeSeriesBarChart, donutChart: DonutChart, - doubleBarChart: DoubleBarChart, dynamicDataChart: DynamicDataChart, entitiesTable: EntitiesTable, entityCount: EntityCount, diff --git a/ui/web/templates/charts/doublebarchartmodal.html b/ui/web/templates/charts/doublebarchartmodal.html deleted file mode 100644 index 8dace8a3b..000000000 --- a/ui/web/templates/charts/doublebarchartmodal.html +++ /dev/null @@ -1,318 +0,0 @@ - - -{{ define "doublebarchartmodal" }} - - - -{{ end }} diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html index 0a80b9088..ce7c2814b 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -106,7 +106,6 @@
Widgets
{{ template "arealinechartmodal" . }} {{ template "horizontalbarchartmodal" . }} {{ template "dynamicdatachartmodal" . }} - {{ template "doublebarchartmodal" . }} {{ template "multiplelinechartmodal" . }} {{ template "stepchartmodal" . }} {{ template "multigaugemodal" . }}