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] 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>