Implemented usage of new styles and updated packages (#131)

* Implemented usage of new styles and updated packages

* Updated packages

Author: AleksSavelev

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## Changelog
 
+## 8.1.0
+
+* Added `fontWeight`, `fontStyle`, `textDecoration` to `LegendData` interface
+* Added `fontWeight`, `fontStyle`, `textDecoration` to `LabelOld` interface
+* Updated packages
+
 ## 8.0.0
 
 ### Module `axis`

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-utils-chartutils",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "ChartUtils",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -35,16 +35,16 @@
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-axis": "^3.0.6",
-    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-transition": "^3.0.9",
-    "@types/jasmine": "^5.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@types/jasmine": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "coverage-istanbul-loader": "3.0.5",
-    "eslint": "^9.13.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-powerbi-visuals": "^1.0.0",
-    "jasmine": "5.4.0",
+    "jasmine": "5.6.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
@@ -53,16 +53,16 @@
     "karma-sourcemap-loader": "^0.4.0",
     "karma-typescript": "^5.5.4",
     "karma-webpack": "5.0.1",
-    "less": "^4.2.0",
+    "less": "^4.3.0",
     "lodash.union": "4.6.0",
-    "playwright-chromium": "^1.48.2",
+    "playwright-chromium": "^1.52.0",
     "powerbi-visuals-api": "^5.11.0",
     "powerbi-visuals-utils-colorutils": "^6.0.5",
     "powerbi-visuals-utils-testutils": "^6.1.1",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.0",
-    "webpack": "^5.96.1"
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.6"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -73,7 +73,7 @@
     "powerbi-visuals-utils-formattingutils": "^6.1.2",
     "powerbi-visuals-utils-svgutils": "^6.0.4",
     "powerbi-visuals-utils-typeutils": "^6.0.3",
-    "typescript-eslint": "^8.12.2"
+    "typescript-eslint": "^8.31.0"
   },
   "optionalDependencies": {
     "fsevents": "2.3.3"

package.json

@@ -35,6 +35,7 @@ export interface FontProperties {
     readonly variant?: string;
     readonly weight?: string;
     readonly whiteSpace?: string;
+    readonly decoration?: string;
 }
 
 export interface MutableFontProperties {

src/label/fontProperties.ts

@@ -389,6 +389,15 @@ export interface LabelOld extends ISelectableDataPoint{
     /** A text anchor used to override the default label text-anchor (middle) */
     textAnchor?: string;
 
+    /** The font weight of the data label */
+    fontWeight?: string;
+
+    /** The font style of the data label */
+    fontStyle?: string;
+
+    /** The text decoration of the data label */
+    textDecoration?: string;
+
     /** points for reference line rendering */
     leaderLinePoints?: number[][];
 

src/label/labelLayout.ts

@@ -113,9 +113,12 @@ export function downgradeToOldLabels(labels: Label[]): LabelOld[] {
         const inheritedLabel: Label = { ...label };
         inheritedLabel.fontProperties = null;
         const oldLabel: LabelOld = <any>inheritedLabel;
-        oldLabel.fill = label.fontProperties ? label.fontProperties.color : undefined;
-        oldLabel.fontSize = (label.fontProperties && label.fontProperties.size) ? label.fontProperties.size.pt : undefined;
-        oldLabel.fontFamily = label.fontProperties ? label.fontProperties.family : undefined;
+        oldLabel.fill = label?.fontProperties?.color;
+        oldLabel.fontSize = label?.fontProperties?.size?.pt;
+        oldLabel.fontFamily = label?.fontProperties?.family;
+        oldLabel.fontWeight = label?.fontProperties?.weight;
+        oldLabel.fontStyle = label?.fontProperties?.style;
+        oldLabel.textDecoration = label?.fontProperties?.decoration;
         return oldLabel;
     });
 }

src/label/labelUtils.ts

@@ -103,7 +103,10 @@ export function drawDefaultLabels(
         .style("fill", (d: LabelOld) => d.fill)
         .style("font-size", (d: LabelOld) => pixelConverter.fromPoint(d.fontSize || DefaultLabelFontSizeInPt))
         .style("font-family", (d: LabelOld) => d.fontFamily ? d.fontFamily : undefined)
-        .style("text-anchor", (d: LabelOld) => d.textAnchor);
+        .style("text-anchor", (d: LabelOld) => d.textAnchor)
+        .style("font-weight", (d: LabelOld) => d.fontWeight)
+        .style("font-style", (d: LabelOld) => d.fontStyle)
+        .style("text-decoration", (d: LabelOld) => d.textDecoration)
 
     if (hasTooltip) {
         labels.append("title").text((d: LabelOld) => d.tooltip);

src/label/newDataLabelUtils.ts

@@ -84,6 +84,9 @@ export interface LegendData {
     labelColor?: string;
     fontSize?: number;
     fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
 }
 
 export const legendProps = {
@@ -93,6 +96,9 @@ export const legendProps = {
     showTitle: "showTitle",
     labelColor: "labelColor",
     fontSize: "fontSize",
+    fontWeight: "fontWeight",
+    fontStyle: "fontStyle",
+    textDecoration: "textDecoration",
 };
 
 export interface ILegend {

src/legend/legendInterfaces.ts

@@ -305,6 +305,9 @@ export class SVGLegend implements ILegend {
             .style("fill", data.labelColor)
             .style("font-size", PixelConverter.fromPoint(data.fontSize))
             .style("font-family", data.fontFamily)
+            .style("font-weight", data.fontWeight)
+            .style("font-style", data.fontStyle)
+            .style("text-decoration", data.textDecoration)
             .text((d: TitleLayout) => d.text)
             .attr("x", (d: TitleLayout) => d.x)
             .attr("y", (d: TitleLayout) => d.y)
@@ -392,7 +395,10 @@ export class SVGLegend implements ILegend {
             .text((d: LegendDataPoint) => d.label)
             .style("fill", data.labelColor)
             .style("font-size", PixelConverter.fromPoint(data.fontSize))
-            .style("font-family", data.fontFamily);
+            .style("font-family", data.fontFamily)
+            .style("font-weight", data.fontWeight)
+            .style("font-style", data.fontStyle)
+            .style("text-decoration", data.textDecoration);
 
         legendItems
             .exit()