moving from charts.js to echarts

dynamic-mapping-ui/package.json

@@ -33,10 +33,11 @@
     "@c8y/ngx-components": "^1020.18.1",
     "@c8y/options": "^1020.18.1",
     "@ngx-translate/core": "15.0.0",
-    "chart.js": "^4.4.1",
     "css-loader": "^7.1.2",
+    "echarts": "^5.5.1",
     "jsonata": "^2.0.3",
     "ngx-bootstrap": "^12.0.0",
+    "ngx-echarts": "^18.0.0",
     "postcss-loader": "^8.1.0",
     "rxjs": "~7.8.1",
     "style-loader": "^4.0.0",

dynamic-mapping-ui/src/monitoring/chart/chart.component.css

@@ -1,5 +1,11 @@
-#divChart{
-    /* position: relative;  */
-    height:30vh; 
-    width:60vw
-}
+#divChart {
+  /* position: relative;  */
+  height: 30vh;
+  width: 60vw;
+}
+
+.bar-chart {
+  /* height: 30vh;
+  width: 60vw; */
+  margin-top: 30px;
+}

dynamic-mapping-ui/src/monitoring/chart/chart.component.html

@@ -18,7 +18,7 @@
   ~
   ~ @authors Christof Strack
   -->
-  
+
 <c8y-title translate>Monitoring</c8y-title>
 
 <div class="card">
@@ -27,9 +27,13 @@ <h4 class="card-title">Messages processed by mappings</h4>
   </div>
   <div class="card-block">
     <div class="col-lg-10 col-lg-offset-1">
-      <div class="chart-container" id="divChart" #divChart>
-        <canvas id="monitoringChart"></canvas>
-      </div>
+      <div
+        echarts
+        [options]="echartOptions"
+        [merge]="echartUpdateOptions"
+        class="bar-chart"
+        (chartInit)="onChartInit($event)"
+      ></div>
     </div>
   </div>
 </div>