Use fontSize built-in

AUS-DOH-Safety-and-Quality · Jul 11, 2023 · 9e3298f · 9e3298f
1 parent acd36a1
commit 9e3298f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 160 deletions.
diff --git a/capabilities.json b/capabilities.json
@@ -609,38 +609,7 @@
         },
         "xlimit_tick_size": {
           "displayName": "Tick Font Size",
-          "type": {
-            "enumeration" : [
-              {
-                "displayName" : "Smallest",
-                "value" : "xx-small"
-              },
-              {
-                "displayName" : "Very Small",
-                "value" : "x-small"
-              },
-              {
-                "displayName" : "Small",
-                "value" : "small"
-              },
-              {
-                "displayName" : "Medium",
-                "value" : "medium"
-              },
-              {
-                "displayName" : "Large",
-                "value" : "large"
-              },
-              {
-                "displayName" : "Very Large",
-                "value" : "x-large"
-              },
-              {
-                "displayName" : "Largest",
-                "value" : "xx-large"
-              }
-            ]
-          }
+          "type": { "formatting": { "fontSize": true } }
         },
         "xlimit_tick_colour":{
           "displayName": "Tick Font Colour",
@@ -664,38 +633,7 @@
         },
         "xlimit_label_size": {
           "displayName": "Label Font Size",
-          "type": {
-            "enumeration" : [
-              {
-                "displayName" : "Smallest",
-                "value" : "xx-small"
-              },
-              {
-                "displayName" : "Very Small",
-                "value" : "x-small"
-              },
-              {
-                "displayName" : "Small",
-                "value" : "small"
-              },
-              {
-                "displayName" : "Medium",
-                "value" : "medium"
-              },
-              {
-                "displayName" : "Large",
-                "value" : "large"
-              },
-              {
-                "displayName" : "Very Large",
-                "value" : "x-large"
-              },
-              {
-                "displayName" : "Largest",
-                "value" : "xx-large"
-              }
-            ]
-          }
+          "type": { "formatting": { "fontSize": true } }
         },
         "xlimit_label_colour":{
           "displayName": "Label Font Colour",
@@ -732,38 +670,7 @@
         },
         "ylimit_tick_size": {
           "displayName": "Tick Font Size",
-          "type": {
-            "enumeration" : [
-              {
-                "displayName" : "Smallest",
-                "value" : "xx-small"
-              },
-              {
-                "displayName" : "Very Small",
-                "value" : "x-small"
-              },
-              {
-                "displayName" : "Small",
-                "value" : "small"
-              },
-              {
-                "displayName" : "Medium",
-                "value" : "medium"
-              },
-              {
-                "displayName" : "Large",
-                "value" : "large"
-              },
-              {
-                "displayName" : "Very Large",
-                "value" : "x-large"
-              },
-              {
-                "displayName" : "Largest",
-                "value" : "xx-large"
-              }
-            ]
-          }
+          "type": { "formatting": { "fontSize": true } }
         },
         "ylimit_tick_colour":{
           "displayName": "Tick Font Colour",
@@ -787,38 +694,7 @@
         },
         "ylimit_label_size": {
           "displayName": "Label Font Size",
-          "type": {
-            "enumeration" : [
-              {
-                "displayName" : "Smallest",
-                "value" : "xx-small"
-              },
-              {
-                "displayName" : "Very Small",
-                "value" : "x-small"
-              },
-              {
-                "displayName" : "Small",
-                "value" : "small"
-              },
-              {
-                "displayName" : "Medium",
-                "value" : "medium"
-              },
-              {
-                "displayName" : "Large",
-                "value" : "large"
-              },
-              {
-                "displayName" : "Very Large",
-                "value" : "x-large"
-              },
-              {
-                "displayName" : "Largest",
-                "value" : "xx-large"
-              }
-            ]
-          }
+          "type": { "formatting": { "fontSize": true } }
         },
         "ylimit_label_colour":{
           "displayName": "Label Font Colour",

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "minimist": "^1.2.7",
     "powerbi-visuals-api": "~3.6.0",
     "powerbi-visuals-utils-dataviewutils": "^2.2.1",
+    "powerbi-visuals-utils-typeutils": "^6.0.1",
     "regenerator-runtime": "^0.13.11"
   },
   "devDependencies": {

diff --git a/src/Classes/plotProperties.ts b/src/Classes/plotProperties.ts
@@ -6,6 +6,7 @@ import plotData from "./plotData"
 import settingsObject from "./settingsObject";
 import dataObject from "./dataObject";
 import controlLimits from "./controlLimits";
+import { pixelConverter } from "powerbi-visuals-utils-typeutils";
 
 type axisProperties = {
   lower: number,
@@ -100,42 +101,30 @@ class plotPropertiesClass {
     const browserFontSize: number = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]);
     const fontScaling: number = browserFontSize / 16;
 
-    // Map the default pixel sizes for each text label, based on browser default, and scale
-    // https://careerkarma.com/blog/css-font-size/
-    const fontSizeMap: Record<string, number> = {
-      "xx-small" : 9 * fontScaling,
-      "x-small" : 10 * fontScaling,
-      "small" : 13 * fontScaling,
-      "medium" : 16 * fontScaling,
-      "large" : 18 * fontScaling,
-      "x-large" : 24 * fontScaling,
-      "xx-large" : 32 * fontScaling
-    };
-
     // Only scale padding for label if a label is actually present
-    const xLabelSize: string = args.inputSettings.x_axis.xlimit_label_size.value;
-    const xLabelPadding: number = args.inputSettings.x_axis.xlimit_label.value ? fontSizeMap[xLabelSize] : 0;
-    const yLabelSize: string = args.inputSettings.y_axis.ylimit_label_size.value;
-    const yLabelPadding: number = args.inputSettings.y_axis.ylimit_label.value ? fontSizeMap[yLabelSize] : 0;
+    const xLabelSize: number = args.inputSettings.x_axis.xlimit_label_size.value;
+    const xLabelPadding: number = args.inputSettings.x_axis.xlimit_label.value ? xLabelSize * fontScaling : 0;
+    const yLabelSize: number = args.inputSettings.y_axis.ylimit_label_size.value;
+    const yLabelPadding: number = args.inputSettings.y_axis.ylimit_label.value ? yLabelSize * fontScaling : 0;
 
-    const xTickSize: string = args.inputSettings.x_axis.xlimit_tick_size.value;
+    const xTickSize: number = args.inputSettings.x_axis.xlimit_tick_size.value;
 
-    const yTickSize: string = args.inputSettings.y_axis.ylimit_tick_size.value;
+    const yTickSize: number = args.inputSettings.y_axis.ylimit_tick_size.value;
 
     this.xAxis = {
       lower: xLowerLimit !== null ? xLowerLimit : 0,
       upper: xUpperLimit,
-      start_padding: args.inputSettings.canvas.left_padding.value + fontSizeMap[xTickSize] + xLabelPadding,
+      start_padding: args.inputSettings.canvas.left_padding.value + xTickSize * fontScaling + xLabelPadding,
       end_padding: args.inputSettings.canvas.right_padding.value,
       colour: args.inputSettings.x_axis.xlimit_colour.value,
       ticks: args.inputSettings.x_axis.xlimit_ticks.value,
-      tick_size: xTickSize,
+      tick_size: pixelConverter.toString(xTickSize),
       tick_font: args.inputSettings.x_axis.xlimit_tick_font.value,
       tick_colour: args.inputSettings.x_axis.xlimit_tick_colour.value,
       tick_rotation: args.inputSettings.x_axis.xlimit_tick_rotation.value,
       tick_count: args.inputSettings.x_axis.xlimit_tick_count.value,
       label: args.inputSettings.x_axis.xlimit_label.value,
-      label_size: args.inputSettings.x_axis.xlimit_label_size.value,
+      label_size: pixelConverter.toString(args.inputSettings.x_axis.xlimit_label_size.value),
       label_font: args.inputSettings.x_axis.xlimit_label_font.value,
       label_colour: args.inputSettings.x_axis.xlimit_label_colour.value
     };
@@ -144,16 +133,16 @@ class plotPropertiesClass {
       lower: yLowerLimit,
       upper: yUpperLimit,
       start_padding: args.inputSettings.canvas.upper_padding.value,
-      end_padding: args.inputSettings.canvas.lower_padding.value + fontSizeMap[yTickSize] + yLabelPadding,
+      end_padding: args.inputSettings.canvas.lower_padding.value + yTickSize * fontScaling + yLabelPadding,
       colour: args.inputSettings.y_axis.ylimit_colour.value,
       ticks: args.inputSettings.y_axis.ylimit_ticks.value,
-      tick_size: yTickSize,
+      tick_size: pixelConverter.toString(yTickSize),
       tick_font: args.inputSettings.y_axis.ylimit_tick_font.value,
       tick_colour: args.inputSettings.y_axis.ylimit_tick_colour.value,
       tick_rotation: args.inputSettings.y_axis.ylimit_tick_rotation.value,
       tick_count: args.inputSettings.y_axis.ylimit_tick_count.value,
       label: args.inputSettings.y_axis.ylimit_label.value,
-      label_size: args.inputSettings.y_axis.ylimit_label_size.value,
+      label_size: pixelConverter.toString(args.inputSettings.y_axis.ylimit_label_size.value),
       label_font: args.inputSettings.y_axis.ylimit_label_font.value,
       label_colour: args.inputSettings.y_axis.ylimit_label_colour.value
     };

diff --git a/src/Classes/settingsGroups.ts b/src/Classes/settingsGroups.ts
@@ -125,13 +125,13 @@ class xAxisSettings {
   xlimit_colour: settingsPair<string>;
   xlimit_ticks: settingsPair<boolean>;
   xlimit_tick_font: settingsPair<string>;
-  xlimit_tick_size: settingsPair<string>;
+  xlimit_tick_size: settingsPair<number>;
   xlimit_tick_colour: settingsPair<string>;
   xlimit_tick_rotation: settingsPair<number>;
   xlimit_tick_count: settingsPair<number>;
   xlimit_label: settingsPair<string>;
   xlimit_label_font: settingsPair<string>;
-  xlimit_label_size: settingsPair<string>;
+  xlimit_label_size: settingsPair<number>;
   xlimit_label_colour: settingsPair<string>;
   xlimit_l: settingsPair<number>;
   xlimit_u: settingsPair<number>;
@@ -140,13 +140,13 @@ class xAxisSettings {
     this.xlimit_colour = new settingsPair("#000000");
     this.xlimit_ticks = new settingsPair(true);
     this.xlimit_tick_font = new settingsPair("'Arial', sans-serif");
-    this.xlimit_tick_size = new settingsPair("x-small");
+    this.xlimit_tick_size = new settingsPair(10);
     this.xlimit_tick_colour = new settingsPair("#000000");
     this.xlimit_tick_rotation = new settingsPair(-35);
     this.xlimit_tick_count = new settingsPair<number>(null);
     this.xlimit_label = new settingsPair<string>(null);
     this.xlimit_label_font = new settingsPair("'Arial', sans-serif");
-    this.xlimit_label_size = new settingsPair("x-small");
+    this.xlimit_label_size = new settingsPair(10);
     this.xlimit_label_colour = new settingsPair("#000000");
     this.xlimit_l = new settingsPair<number>(null);
     this.xlimit_u = new settingsPair<number>(null);
@@ -157,13 +157,13 @@ class yAxisSettings {
   ylimit_colour: settingsPair<string>;
   ylimit_ticks: settingsPair<boolean>;
   ylimit_tick_font: settingsPair<string>;
-  ylimit_tick_size: settingsPair<string>;
+  ylimit_tick_size: settingsPair<number>;
   ylimit_tick_colour: settingsPair<string>;
   ylimit_tick_rotation: settingsPair<number>;
   ylimit_tick_count: settingsPair<number>;
   ylimit_label: settingsPair<string>;
   ylimit_label_font: settingsPair<string>;
-  ylimit_label_size: settingsPair<string>;
+  ylimit_label_size: settingsPair<number>;
   ylimit_label_colour: settingsPair<string>;
   limit_multiplier: settingsPair<number>;
   ylimit_l: settingsPair<number>;
@@ -175,13 +175,13 @@ class yAxisSettings {
     this.ylimit_ticks = new settingsPair(true);
     this.ylimit_sig_figs = new settingsPair<number>(null);
     this.ylimit_tick_font = new settingsPair("'Arial', sans-serif");
-    this.ylimit_tick_size = new settingsPair("x-small");
+    this.ylimit_tick_size = new settingsPair(10);
     this.ylimit_tick_colour = new settingsPair("#000000");
     this.ylimit_tick_rotation = new settingsPair(0);
     this.ylimit_tick_count = new settingsPair<number>(null);
     this.ylimit_label = new settingsPair<string>(null);
     this.ylimit_label_font = new settingsPair("'Arial', sans-serif");
-    this.ylimit_label_size = new settingsPair("x-small");
+    this.ylimit_label_size = new settingsPair(10);
     this.ylimit_label_colour = new settingsPair("#000000");
     this.limit_multiplier = new settingsPair(1.5);
     this.ylimit_l = new settingsPair<number>(null);