update colours for each gauge

Signed-off-by: Musilah <[email protected]>
absmach · Mar 19, 2024 · cdf99d8 · cdf99d8
1 parent f6ff95d
commit cdf99d8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/internal/postgres/postgres.go b/internal/postgres/postgres.go
@@ -20,10 +20,10 @@ var (
 // Config defines the options that are used when connecting to the PostgresSQL instance.
 type Config struct {
 	Host        string `env:"MG_UI_DB_HOST"           envDefault:"localhost"`
-	Port        string `env:"MG_UI_DB_PORT"           envDefault:"6007"`
-	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala"`
-	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala"`
-	Name        string `env:"MG_UI_DB_NAME"           envDefault:"ui"`
+	Port        string `env:"MG_UI_DB_PORT"           envDefault:"5432"`
+	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala-ui"`
+	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala-ui"`
+	Name        string `env:"MG_UI_DB_NAME"           envDefault:"dashboards"`
 	SSLMode     string `env:"MG_UI_DB_SSL_MODE"       envDefault:"disable"`
 	SSLCert     string `env:"MG_UI_DB_SSL_CERT"       envDefault:""`
 	SSLKey      string `env:"MG_UI_DB_SSL_KEY"        envDefault:""`

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -1132,13 +1132,12 @@ class MultiGaugeChart extends Echart {
     const channels = JSON.stringify(this.chartData.channels);
     const things = JSON.stringify(this.chartData.things);
     const gaugeLabel = this.chartData.labels;
-    const colours = this.chartData.colours;
+    const colours = JSON.stringify(this.chartData.colours);
 
     return `
     var multiGaugeChart = echarts.init(document.getElementById("${this.ID}"));
 
     var gaugeLabel = ${JSON.stringify(gaugeLabel)};
-    var colours = ${JSON.stringify(colours)};
 
     var gaugeData = gaugeLabel.map((label, index) => {
       // Dynamic positioning can be improved based on the number of gauges
@@ -1217,7 +1216,7 @@ class MultiGaugeChart extends Echart {
       publishers: ${things},
       gaugeLabel: gaugeLabel,
       name: '${this.chartData.valueName}',
-      colours: colours,
+      colours: ${colours},
     }
     getData(multiGaugeChart, chartData);
 
@@ -1228,10 +1227,8 @@ class MultiGaugeChart extends Echart {
             "&publisher=" + chartData.publishers[i] +
             "&name=" + name;
           const response = await fetch(url);
-          console.log("Response: ", response);
           if (response.ok) {
             const data = await response.json();
-            console.log("Data: ", data);
             if (data.messages && data.messages.length > 0) {
               gaugeData[i].value = data.messages[0].value;
             } else {
@@ -1253,7 +1250,7 @@ class MultiGaugeChart extends Echart {
                 offsetCenter: ['0%', (index - (gaugeLabel.length - 1) / 2) * 40 + 12 + '%']
               },
               itemStyle: {
-                color: chartData.colours[i],
+                color: chartData.colours[index],
               }
             };
           });

diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
@@ -108,18 +108,10 @@ <h5>Data Source</h5>
                           />
                         </td>
                         <td>
-                          <input
-                            type="color"
-                            class="form-control"
-                            name="gaugeColour"
-                          />
+                          <input type="color" class="form-control" name="gaugeColour" />
                         </td>
                         <td class="text-center">
-                          <button 
-                            type="button" 
-                            class="btn btn-sm" 
-                            onclick="deleteRow(this)"
-                          >
+                          <button type="button" class="btn btn-sm" onclick="deleteRow(this)">
                             <i class="fas fa-trash-alt"></i>
                           </button>
                         </td>