From 61bd81a6b3b8bdb35fd0835b93e8885e0018b8b8 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Mon, 3 Jun 2024 10:23:14 +0200
Subject: [PATCH] Use another method to convert svg

---
 frontend/src/app/diagram/diagram.component.ts | 42 +++++++------------
 frontend/src/app/diagram/svgGeneration.ts     |  9 ++--
 2 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/diagram/diagram.component.ts b/frontend/src/app/diagram/diagram.component.ts
index 16ab0527cd..48501386dd 100644
--- a/frontend/src/app/diagram/diagram.component.ts
+++ b/frontend/src/app/diagram/diagram.component.ts
@@ -154,14 +154,16 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
     alignmentData.alignmentObjectDtoList.forEach((alignmentObject: AlignmentObject) => {
       if (alignmentObject.objectType == 'objective') {
         let observable: Observable<any> = new Observable((observer) => {
-          let objectiveTitle: string = this.replaceNonAsciiCharacters(alignmentObject.objectTitle);
-          let teamTitle: string = this.replaceNonAsciiCharacters(alignmentObject.objectTeamName);
           let element = {
             data: {
               id: 'Ob' + alignmentObject.objectId,
             },
             style: {
-              'background-image': this.generateObjectiveSVG(objectiveTitle, teamTitle, alignmentObject.objectState!),
+              'background-image': this.generateObjectiveSVG(
+                alignmentObject.objectTitle,
+                alignmentObject.objectTeamName,
+                alignmentObject.objectState!,
+              ),
             },
           };
           diagramElements.push(element);
@@ -172,9 +174,6 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
       } else {
         let observable: Observable<void> = this.keyResultService.getFullKeyResult(alignmentObject.objectId).pipe(
           map((keyResult: KeyResult) => {
-            let keyResultTitle: string = this.replaceNonAsciiCharacters(alignmentObject.objectTitle);
-            let teamTitle: string = this.replaceNonAsciiCharacters(alignmentObject.objectTeamName);
-
             if (keyResult.keyResultType == 'metric') {
               let metricKeyResult: KeyResultMetric = keyResult as KeyResultMetric;
               let percentage: number = calculateCurrentPercentage(metricKeyResult);
@@ -196,7 +195,11 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
                   id: 'KR' + alignmentObject.objectId,
                 },
                 style: {
-                  'background-image': this.generateKeyResultSVG(keyResultTitle, teamTitle, keyResultState),
+                  'background-image': this.generateKeyResultSVG(
+                    alignmentObject.objectTitle,
+                    alignmentObject.objectTeamName,
+                    keyResultState,
+                  ),
                 },
               };
               diagramElements.push(element);
@@ -209,7 +212,11 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
                   id: 'KR' + alignmentObject.objectId,
                 },
                 style: {
-                  'background-image': this.generateKeyResultSVG(keyResultTitle, teamTitle, keyResultState),
+                  'background-image': this.generateKeyResultSVG(
+                    alignmentObject.objectTitle,
+                    alignmentObject.objectTeamName,
+                    keyResultState,
+                  ),
                 },
               };
               diagramElements.push(element);
@@ -250,25 +257,6 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
     this.generateDiagram();
   }
 
-  replaceNonAsciiCharacters(text: string): string {
-    text = text.replace(/\u00c4/g, 'Ae');
-    text = text.replace(/\u00e4/g, 'ae');
-    text = text.replace(/\u00dc/g, 'Ue');
-    text = text.replace(/\u00fc/g, 'ue');
-    text = text.replace(/\u00d6/g, 'Oe');
-    text = text.replace(/\u00f6/g, 'oe');
-    text = text.replace(/\u00df/g, 'ss');
-    text = text.replace(/\u00B2/g, '^2');
-    text = text.replace(/\u00B3/g, '^3');
-    text = text.replace(/&/g, '&amp;');
-    text = text.replace(/</g, '&lt;');
-    text = text.replace(/>/g, '&gt;');
-    text = text.replace(/'/g, '&#039;');
-    text = text.replace(/"/g, '&quot;');
-
-    return text;
-  }
-
   generateObjectiveSVG(title: string, teamName: string, state: string): string {
     switch (state) {
       case 'ONGOING':
diff --git a/frontend/src/app/diagram/svgGeneration.ts b/frontend/src/app/diagram/svgGeneration.ts
index f4c03e89ae..8049c4db6a 100644
--- a/frontend/src/app/diagram/svgGeneration.ts
+++ b/frontend/src/app/diagram/svgGeneration.ts
@@ -48,7 +48,8 @@ export function generateObjectiveSVG(title: string, teamName: string, iconFuncti
 </svg>
 `;
 
-  return 'data:image/svg+xml;base64,' + btoa(svg);
+  let blob: Blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  return URL.createObjectURL(blob);
 }
 
 export function generateKeyResultSVG(title: string, teamName: string, backgroundColor: any, fontColor: any) {
@@ -97,7 +98,8 @@ export function generateKeyResultSVG(title: string, teamName: string, background
 </svg>
   `;
 
-  return 'data:image/svg+xml;base64,' + btoa(svg);
+  let blob: Blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  return URL.createObjectURL(blob);
 }
 
 export function generateNeutralKeyResultSVG(title: string, teamName: string) {
@@ -146,7 +148,8 @@ export function generateNeutralKeyResultSVG(title: string, teamName: string) {
 </svg>
   `;
 
-  return 'data:image/svg+xml;base64,' + btoa(svg);
+  let blob: Blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  return URL.createObjectURL(blob);
 }
 
 export function getDraftIcon() {