From 9e3298f44dd76b8d6e58a24e92b8acb2b5c11b17 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Tue, 11 Jul 2023 14:15:31 +0300 Subject: [PATCH] Use fontSize built-in --- capabilities.json | 132 ++-------------------------------- package.json | 1 + src/Classes/plotProperties.ts | 37 ++++------ src/Classes/settingsGroups.ts | 16 ++--- 4 files changed, 26 insertions(+), 160 deletions(-) diff --git a/capabilities.json b/capabilities.json index adbf4da..706727e 100644 --- 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 index 9875973..7a25fe1 100644 --- 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 index bcebdb4..2a1ec6f 100644 --- 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 = { - "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 index 1b206af..17a5252 100644 --- a/src/Classes/settingsGroups.ts +++ b/src/Classes/settingsGroups.ts @@ -125,13 +125,13 @@ class xAxisSettings { xlimit_colour: settingsPair; xlimit_ticks: settingsPair; xlimit_tick_font: settingsPair; - xlimit_tick_size: settingsPair; + xlimit_tick_size: settingsPair; xlimit_tick_colour: settingsPair; xlimit_tick_rotation: settingsPair; xlimit_tick_count: settingsPair; xlimit_label: settingsPair; xlimit_label_font: settingsPair; - xlimit_label_size: settingsPair; + xlimit_label_size: settingsPair; xlimit_label_colour: settingsPair; xlimit_l: settingsPair; xlimit_u: settingsPair; @@ -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(null); this.xlimit_label = new settingsPair(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(null); this.xlimit_u = new settingsPair(null); @@ -157,13 +157,13 @@ class yAxisSettings { ylimit_colour: settingsPair; ylimit_ticks: settingsPair; ylimit_tick_font: settingsPair; - ylimit_tick_size: settingsPair; + ylimit_tick_size: settingsPair; ylimit_tick_colour: settingsPair; ylimit_tick_rotation: settingsPair; ylimit_tick_count: settingsPair; ylimit_label: settingsPair; ylimit_label_font: settingsPair; - ylimit_label_size: settingsPair; + ylimit_label_size: settingsPair; ylimit_label_colour: settingsPair; limit_multiplier: settingsPair; ylimit_l: settingsPair; @@ -175,13 +175,13 @@ class yAxisSettings { this.ylimit_ticks = new settingsPair(true); this.ylimit_sig_figs = new settingsPair(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(null); this.ylimit_label = new settingsPair(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(null);