Use monospace font for state labels

When the timeline chart is zoom in/out, the label of each state
will be modified to fit the width of the state. When the width
of the state is smaller than the width of the label, the text is
truncated. To determine how much text is truncated, the timeline
chart uses the ratio of width of label text / width of state.
However, since the width of each charater is different, this ratio
does not well-represent how much text can be displayed in the label,
causing text to overflow out of the state. The solution is to use a
monospace font, in which all characters are of the same width.

This commit changes the font-family of the labels from Verdana to
monospace. With this change, the browser will default to the monospace
font of the OS and make the texts fit within the states.

Fixes #224.

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

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

@@ -6,7 +6,7 @@ export class FontController {
     private fontColorMap: Map<number, string>;
     private defaultFontName: string = "LabelFont8White";
 
-    constructor(fontFamily: string = "Verdana") {
+    constructor(fontFamily: string = "monospace") {
         this.fontFamily = fontFamily;
         this.fontNameMap = new Map<number, Map<string, string>>();
         this.fontColorMap = new Map<number, string>();
@@ -25,7 +25,7 @@ export class FontController {
             fontFamily: this.fontFamily,
             fontSize: fontSize,
             fill: fontColor === "White" ? "white" : "black",
-            fontWeight: 900
+            fontWeight: "bold"
         };
         PIXI.BitmapFont.from(fontName, fontStyle, { chars: PIXI.BitmapFont.ASCII });
         return fontName;