Add ellipse and star to the character set of label text

This commit adds the ellipse (...) and star unicode characters
to the character set of the label text in the time-graph-font
controller. This would help display the ellipse symbol in the label
text (when the text is truncated) as a single character and takes
up the same space as a single character.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>

timeline-chart/src/components/time-graph-state.ts

@@ -89,9 +89,9 @@ export class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.Ti
         else {
             const textScaler = displayWidth / this.textWidth;
             const index = Math.min(Math.floor(textScaler * labelText.length), labelText.length - 1)
-            const partialLabel = labelText.substr(0, Math.max(index - 3, 0));
+            const partialLabel = labelText.substr(0, Math.max(index - 1, 0));
             if (partialLabel.length > 0) {
-                displayLabel = partialLabel.concat("...");
+                displayLabel = partialLabel.concat("…");
             }
         }
 

timeline-chart/src/time-graph-font-controller.ts

@@ -27,7 +27,7 @@ export class FontController {
             fill: fontColor === "White" ? "white" : "black",
             fontWeight: "bold"
         };
-        PIXI.BitmapFont.from(fontName, fontStyle, { chars: PIXI.BitmapFont.ASCII });
+        PIXI.BitmapFont.from(fontName, fontStyle, { chars: this.getCharacterSet() });
         return fontName;
     }
 
@@ -72,4 +72,13 @@ export class FontController {
         }
         return fontName ? fontName : "";
     }
+
+    private getCharacterSet(): string[][] {
+        let letters: string[][]= [];
+        letters.push(PIXI.BitmapFont.ASCII[0]);
+        letters.push(['★','★']);
+        letters.push(['…','…']);
+
+        return letters;
+    }
 }