add colour option

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

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -1132,11 +1132,13 @@ 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;
 
     return `
     var multiGaugeChart = echarts.init(document.getElementById("${this.ID}"));
 
-    gaugeLabel = ${JSON.stringify(gaugeLabel)};
+    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
@@ -1214,7 +1216,8 @@ class MultiGaugeChart extends Echart {
       channels: ${channels},
       publishers: ${things},
       gaugeLabel: gaugeLabel,
-      name: '${this.chartData.valueName}'
+      name: '${this.chartData.valueName}',
+      colours: colours,
     }
     getData(multiGaugeChart, chartData);
 
@@ -1248,6 +1251,9 @@ class MultiGaugeChart extends Echart {
               detail: {
                 valueAnimation: true,
                 offsetCenter: ['0%', (index - (gaugeLabel.length - 1) / 2) * 40 + 12 + '%']
+              },
+              itemStyle: {
+                color: chartData.colours[i],
               }
             };
           });

diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
@@ -72,6 +72,7 @@ <h5>Data Source</h5>
                         <th scope="col">Channel</th>
                         <th scope="col">Thing</th>
                         <th scope="col">Label</th>
+                        <th scope="col">Colour</th>
                         <th scope="col"></th>
                       </tr>
                     </thead>
@@ -107,7 +108,18 @@ <h5>Data Source</h5>
                           />
                         </td>
                         <td>
-                          <button type="button" class="btn btn-sm" onclick="deleteRow(this)">
+                          <input
+                            type="color"
+                            class="form-control"
+                            name="gaugeColour"
+                          />
+                        </td>
+                        <td class="text-center">
+                          <button 
+                            type="button" 
+                            class="btn btn-sm" 
+                            onclick="deleteRow(this)"
+                          >
                             <i class="fas fa-trash-alt"></i>
                           </button>
                         </td>
@@ -213,6 +225,7 @@ <h5>Data Source</h5>
       const channels = [];
       const things = [];
       const labels = [];
+      const colours = [];
       let formData = new FormData(form);
       for (let [name, value] of formData) {
         switch (name) {
@@ -225,6 +238,9 @@ <h5>Data Source</h5>
           case "gaugeLabel":
             labels.push(value);
             break;
+          case "gaugeColour":
+            colours.push(value);
+            break;
           default:
             chartData[name] = value;
             break;
@@ -233,6 +249,7 @@ <h5>Data Source</h5>
       chartData["channels"] = channels;
       chartData["things"] = things;
       chartData["labels"] = labels;
+      chartData["colours"] = colours;
 
       var widgetID = "multiGaugeChart-" + Date.now();
 
@@ -269,6 +286,9 @@ <h5>Data Source</h5>
             <input type="text" class="form-control" name="gaugeLabel"
               placeholder="Gauge Label" required />
           </td>
+          <td>
+            <input type="color" class="form-control" name="gaugeColour" />
+          </td>
           <td class="text-center">
             <button type="button" class="btn btn-sm" onclick="removeRow(this)">
               <i class="fas fa-trash-alt"></i>