From 6c004f7fc7602a25e458115bfdf18bd76351015a Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Wed, 6 Mar 2024 14:21:46 +0200
Subject: [PATCH 1/3] Fix parsing unicode into symbol for charts legend

---
 .../widget/lib/legend.component.html          | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index 155ae07df9..d3bfac2b13 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -32,14 +32,14 @@
         <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
+            [innerHTML]="legendKey.dataKey.label"
             [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
-          {{ legendKey.dataKey.label }}
         </td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true">{{ legendData.data[legendKey.dataIndex].latest }}</td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true" [innerHTML]="legendData.data[legendKey.dataIndex].min"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showMax === true" [innerHTML]="legendData.data[legendKey.dataIndex].max"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true" [innerHTML]="legendData.data[legendKey.dataIndex].avg"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true" [innerHTML]="legendData.data[legendKey.dataIndex].total"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true" [innerHTML]="legendData.data[legendKey.dataIndex].latest"></td>
       </tr>
     </ng-container>
     <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
@@ -47,40 +47,35 @@
       <td *ngFor="let legendKey of legendKeys()">
         <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
         <span class="tb-legend-label"
+              [innerHTML]="legendKey.dataKey.label"
               (click)="toggleHideData(legendKey.dataIndex)"
               [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
-                  {{ legendKey.dataKey.label }}
         </span>
       </td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
       <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
-        {{ legendData.data[legendKey.dataIndex].min }}
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].min">
       </td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
       <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
-        {{ legendData.data[legendKey.dataIndex].max }}
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].max">
       </td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
       <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
-        {{ legendData.data[legendKey.dataIndex].avg }}
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].avg">
       </td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
       <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
-        {{ legendData.data[legendKey.dataIndex].total }}
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].total">
       </td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
       <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
-        {{ legendData.data[legendKey.dataIndex].latest }}
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].latest">
       </td>
     </tr>
   </tbody>

From f9ff021821527d79d591ca3f726889646c95d696 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Wed, 6 Mar 2024 14:25:47 +0200
Subject: [PATCH 2/3] Refactoring

---
 .../components/widget/lib/legend.component.html   | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index d3bfac2b13..25b0c4aa2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -55,28 +55,23 @@
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
       <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].min">
-      </td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].min"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
       <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].max">
-      </td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].max"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
       <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].avg">
-      </td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].avg"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
       <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].total">
-      </td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].total"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
       <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].latest">
-      </td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].latest"></td>
     </tr>
   </tbody>
 </table>

From e246c317001f974e0163d8f01171fbb1cf5cd8cf Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Mon, 11 Mar 2024 16:40:26 +0200
Subject: [PATCH 3/3] Added safe html

---
 .../widget/lib/legend.component.html          | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index 25b0c4aa2a..2e7e4b786c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -32,14 +32,19 @@
         <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
-            [innerHTML]="legendKey.dataKey.label"
+            [innerHTML]="legendKey.dataKey.label | safe: 'html'"
             [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
         </td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true" [innerHTML]="legendData.data[legendKey.dataIndex].min"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showMax === true" [innerHTML]="legendData.data[legendKey.dataIndex].max"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true" [innerHTML]="legendData.data[legendKey.dataIndex].avg"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true" [innerHTML]="legendData.data[legendKey.dataIndex].total"></td>
-        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true" [innerHTML]="legendData.data[legendKey.dataIndex].latest"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
+            [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showMax === true"
+            [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showAvg === true"
+            [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showTotal === true"
+            [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
+        <td class="tb-legend-value" *ngIf="legendConfig.showLatest === true"
+            [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
       </tr>
     </ng-container>
     <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
@@ -47,7 +52,7 @@
       <td *ngFor="let legendKey of legendKeys()">
         <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
         <span class="tb-legend-label"
-              [innerHTML]="legendKey.dataKey.label"
+              [innerHTML]="legendKey.dataKey.label | safe: 'html'"
               (click)="toggleHideData(legendKey.dataIndex)"
               [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
         </span>
@@ -55,23 +60,28 @@
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMin === true">
       <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].min"></td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+          [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showMax === true">
       <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].max"></td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+          [innerHTML]="legendData.data[legendKey.dataIndex].max | safe: 'html'"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showAvg === true">
       <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].avg"></td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+          [innerHTML]="legendData.data[legendKey.dataIndex].avg | safe: 'html'"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showTotal === true">
       <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].total"></td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+          [innerHTML]="legendData.data[legendKey.dataIndex].total | safe: 'html'"></td>
     </tr>
     <tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
       <td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
-      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()" [innerHTML]="legendData.data[legendKey.dataIndex].latest"></td>
+      <td class="tb-legend-value" *ngFor="let legendKey of legendKeys()"
+          [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
     </tr>
   </tbody>
 </table>