Added data quality template (#46)

Signed-off-by: BOUVIER-NEVEU Clement <clement.bouvierneveu@rte-france.com>
opfab · Jun 17, 2024 · 9f91bce · 9f91bce
1 parent d42c618
commit 9f91bce
Show file tree

Hide file tree

Showing 14 changed files with 658 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,5 +4,6 @@
 cypress/node_modules/
 
 server/businessconfig-storage/businessdata
-server/businessconfig-storage/bundles/demoProcess
+server/businessconfig-storage/bundles/demoProcessId
+server/businessconfig-storage/bundles/dataQualityProcessId
 server/businessconfig-storage/realtimescreens.json
diff --git a/client/demo/bundles/builtInUseCases/config.json b/client/demo/bundles/builtInUseCases/config.json
@@ -1,5 +1,5 @@
 {
-    "id": "demoProcess",
+    "id": "demoProcessId",
     "name": "builtInUseCases",
     "version": "1",
     "uiVisibility": {

diff --git a/client/demo/bundles/dataQuality/config.json b/client/demo/bundles/dataQuality/config.json
@@ -0,0 +1,21 @@
+{
+    "id": "dataQualityProcessId",
+    "name": "Data quality",
+    "version": "1",
+    "uiVisibility": {
+        "monitoring": true,
+        "processMonitoring": true,
+        "logging": true,
+        "calendar": true
+    },
+    "states": {
+        "dataQualityState": {
+            "name": "Data quality",
+            "description": "Data quality state",
+            "color": "#DA00DA",
+            "templateName": "dataQuality",
+            "styles": ["style"],
+            "acknowledgmentAllowed": "Always"
+        }
+    }
+}
diff --git a/client/demo/bundles/dataQuality/i18n.json b/client/demo/bundles/dataQuality/i18n.json
@@ -0,0 +1,17 @@
+{
+	"message":{
+		"title": "Message",
+		"summary": "Message received"
+	},
+	"messageState":{
+		"title": "Message",
+		"summary": "Message received : {{summary}}"
+	},
+	"chartDetail" : { "title": "Data quality"},
+	"chartLine" : { "title": "Electricity consumption forecast"},
+	"question" : {"title": "⚡ Planned Outage"},
+	"contingencies": {"title" : "⚠️ Network Contingencies ⚠️", "summary": "Contingencies report for French network"},
+	"processState": {
+		"title": "Process state ({{status}})"
+	}
+}
diff --git a/client/demo/bundles/dataQuality/template/dataQuality.handlebars b/client/demo/bundles/dataQuality/template/dataQuality.handlebars
@@ -0,0 +1,204 @@
+<!-- Copyright (c) 2024, RTE (http://www.rte-france.com)              -->
+<!-- See AUTHORS.txt                                                       -->
+<!-- This Source Code Form is subject to the terms of the Mozilla Public   -->
+<!-- License, v. 2.0. If a copy of the MPL was not distributed with this   -->
+<!-- file, You can obtain one at http://mozilla.org/MPL/2.0/.              -->
+<!-- SPDX-License-Identifier: MPL-2.0                                      -->
+<!-- This file is part of the OperatorFabric project.                      -->
+
+<div class="opfab-border-box" style="width:100%; display:inline-block">
+    <div>
+      <span  opfab-tooltip-text="After reading the message, please acknowledge the card." class="opfab-tooltip"><b>Info on quality degradation of the main server </b></span>
+
+    </div>
+    <div>
+      <ul>
+      {{#each card.data.indications }}
+          <li><div title={{keepSpacesAndEndOfLine (json this.tooltip)}}><b>{{this.title}}</b></div>{{this.information}}</li>
+      {{/each}}
+      </ul>
+    </div>
+</div>
+
+<br/>
+<hr/>
+<div class="opfab-border-box" style="width:100%; display:inline-block;">
+  <label>  Historical evolution of the quality of network snapshot</label>
+
+  <div style="position: relative; height:35vh; width:100%;margin:auto">
+    <canvas id="myChart"></canvas>
+  </div>
+
+</div>
+</div>
+
+<br/>
+<hr/>
+
+<div class="opfab-border-box" style="width:100%; display:inline-block;">
+  <label> History of the number of non-standard deviations</label>
+
+  <div style="position: relative; height:35vh; width:100%;margin:auto">
+    <canvas id="myChartEcartsHN" style="display:block;"></canvas>
+  </div>
+</div>
+
+<!-- test for calling business application from a card -->
+<br/>
+<br/>
+
+<a href="javascript:opfab.navigate.redirectToBusinessMenu('uid_test_0','?search=chart&fulltext=1')"> Want more information about charts ? </a>
+
+
+
+
+<script>
+
+    cardTemplate = {
+        initChart: function() {
+            const opfabColor = getComputedStyle(document.body).getPropertyValue('--opfab-text-color');
+
+
+            if (window.myChart instanceof Chart) {
+                window.myChart.destroy();
+            }
+            if (window.myChartEcartsHN instanceof Chart) {
+                window.myChartEcartsHN.destroy();
+            }
+
+
+            const chartContext = document.getElementById('myChart').getContext('2d');
+            window.myChart = new Chart(chartContext, {
+                type: 'line',
+                data: {
+                    datasets: [{
+                        label: 'Quality Main Server',
+                        data : {{json card.data.quality}},
+                        fill : false,
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        tension: 0.4,
+                        parsing: {
+                        xAxisKey: 'hour',
+                        yAxisKey: 'Qualite_P'
+                        }
+                    },
+                    {
+                        label: 'Quality Secondary Server',
+                        data : {{json card.data.quality}},
+                        fill : false,
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                        borderColor: 'rgba(54, 162, 0, 1)',
+                        tension: 0.1,
+                        parsing: {
+                        xAxisKey: 'hour',
+                        yAxisKey: 'Qualite_R'
+                        }
+                    }]
+                },
+                options: {
+                    maintainAspectRatio: false,
+                    stepped: true,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: {{json card.data.quality_chart_title}}
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {color:'rgba(100,100,100,0.2)'},
+                            ticks: {
+                                color: opfabColor
+                            }
+                        },
+                        x: {
+                            grid: {color:'rgba(100,100,100,0.2)'},
+                            ticks: {
+                                color: opfabColor
+                            }
+                        }
+                    }
+                }
+            });
+
+
+            const chartHNContext = document.getElementById('myChartEcartsHN').getContext('2d');
+            window.myChartEcartsHN = new Chart(chartHNContext, {
+                type: 'line',
+                data: {
+                    datasets: [{
+                        label: 'Quality threshold 7',
+                        data : {{json card.data.ecartsHN}},
+                        fill : false,
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                        borderColor: 'rgba(195, 14, 5, 0.8)',
+                        tension: 0.4,
+                        parsing: {
+                        xAxisKey: 'hour',
+                        yAxisKey: 'Seuil_P'
+                        }
+                    },
+                    {
+                        label: 'Non-standard deviations - Main Server',
+                        data : {{json card.data.ecartsHN}},
+                        fill : false,
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        tension: 0.1,
+                        parsing: {
+                        xAxisKey: 'hour',
+                        yAxisKey: 'Nb_HN_P'
+                        }
+                    },
+                    {
+                        label: 'Non-standard deviations - Secondary Server',
+                        data : {{json card.data.ecartsHN}},
+                        fill : false,
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                        borderColor: 'rgba(54, 162, 0, 1)',
+                        tension: 0.1,
+                        parsing: {
+                        xAxisKey: 'hour',
+                        yAxisKey: 'Nb_HN_R'
+                        }
+                    }]
+                },
+                options: {
+                    maintainAspectRatio: false,
+                    stepped: true,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: "History of non-standard deviations "
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {color:'rgba(100,100,100,0.2)'},
+                            ticks: {
+                                color: opfabColor
+                            }
+                        },
+                        x: {
+                            grid: {color:'rgba(100,100,100,0.2)'},
+                            ticks: {
+                                color: opfabColor
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+    }
+    
+    cardTemplate.initChart();
+
+    opfab.currentCard.listenToStyleChange(() => {
+        cardTemplate.initChart()
+    });
+
+</script>
diff --git a/client/demo/businessData/loadBusinessData.sh b/client/demo/businessData/loadBusinessData.sh
@@ -23,6 +23,6 @@ then
 else
 	echo "Will load businessData $1 on $url"
 	source ../../getToken.sh admin $url
-	curl -s -v -X POST "$url:2100/businessconfig/businessData/$1" -H  "accept: application/json" -H  "Content-Type: multipart/form-data" -H "Authorization:Bearer $token" -F "file=@$1"
+	curl -s -X POST "$url:2100/businessconfig/businessData/$1" -H  "accept: application/json" -H  "Content-Type: multipart/form-data" -H "Authorization:Bearer $token" -F "file=@$1"
 	echo ""
 fi