@iapps/d2-visualizer - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

package.json

 {
   "name": "@iapps/d2-visualizer",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "dependencies": {
@@ -5,0 +5,0 @@ "tslib": "^2.3.0"

src/lib/modules/single-value/single-value-visualizer.d.ts

 import { BaseVisualizer, Visualizer } from '../../shared/models/base-visualizer.model';
 export declare class SingleValueVisualizer extends BaseVisualizer implements Visualizer {
     draw(): void;
+    wrapText(text: string, maxChars: number): string[];
 }

src/lib/modules/single-value/single-value-visualizer.js

@@ -29,4 +29,11 @@ "use strict";
             const rem = (px) => `${(px / rootFontSize).toFixed(2)}rem`;
-            const titleFontSize = rem(12);
-            const filterFontSize = rem(8);
+            const titleFontSizePx = 12;
+            const filterFontSizePx = 8;
+            const valueFontSizePx = 32;
+            const titleFontSize = rem(titleFontSizePx);
+            const filterFontSize = rem(filterFontSizePx);
+            const valueFontSize = rem(valueFontSizePx);
+            const renderingWidth = renderingElement.getBoundingClientRect().width - 12;
+            const charWidth = 12 * 0.6;
+            const maxCharsPerLine = Math.floor(renderingWidth / charWidth);
             const textGroup = document.createElementNS(svgNamespace, 'g');
@@ -41,17 +48,33 @@ // Centering the text
             titleText.setAttribute('fill', '#666');
-            titleText.textContent = dataLabel;
+            const wrappedTitle = this.wrapText(dataLabel, maxCharsPerLine);
+            wrappedTitle.forEach((line, index) => {
+                const tspan = document.createElementNS(svgNamespace, 'tspan');
+                tspan.setAttribute('x', '0');
+                tspan.setAttribute('dy', index === 0 ? '0' : '1.2em');
+                tspan.textContent = line;
+                titleText.appendChild(tspan);
+            });
+            const titleHeight = wrappedTitle.length * titleFontSizePx;
             // Filter Label
             const filterText = document.createElementNS(svgNamespace, 'text');
-            filterText.setAttribute('y', '-4');
+            filterText.setAttribute('y', `${titleHeight - 16}`);
             filterText.setAttribute('text-anchor', 'middle');
             filterText.setAttribute('font-size', `${filterFontSize}`);
             filterText.setAttribute('fill', '#666');
-            filterText.textContent = filterLabel;
+            const wrappedFilter = this.wrapText(filterLabel, maxCharsPerLine);
+            wrappedFilter.forEach((line, index) => {
+                const tspan = document.createElementNS(svgNamespace, 'tspan');
+                tspan.setAttribute('x', '0');
+                tspan.setAttribute('dy', index === 0 ? '0' : '1.2em');
+                tspan.textContent = line;
+                filterText.appendChild(tspan);
+            });
+            const filterHeight = wrappedFilter.length * filterFontSizePx;
             // Value Text
             const valueText = document.createElementNS(svgNamespace, 'text');
-            valueText.setAttribute('y', '36');
+            valueText.setAttribute('y', `${titleHeight + filterHeight + 10}`);
             valueText.setAttribute('text-anchor', 'middle');
-            valueText.setAttribute('font-size', '2.5em');
+            valueText.setAttribute('font-size', valueFontSize);
             valueText.setAttribute('font-weight', '300');
-            valueText.textContent = visualizer_utilities_1.VisualizerUtil.toCommaSeparated(value);
+            valueText.textContent = visualizer_utilities_1.VisualizerUtil.toSpaceSeparated(value);
             // Append texts to the group
@@ -67,4 +90,22 @@ textGroup.appendChild(titleText);
     }
+    wrapText(text, maxChars) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        words.forEach((word) => {
+            if ((currentLine + word).length <= maxChars) {
+                currentLine += `${word} `;
+            }
+            else {
+                lines.push(currentLine.trim());
+                currentLine = `${word} `;
+            }
+        });
+        if (currentLine) {
+            lines.push(currentLine.trim());
+        }
+        return lines;
+    }
 }
 exports.SingleValueVisualizer = SingleValueVisualizer;
 //# sourceMappingURL=single-value-visualizer.js.map

src/lib/shared/utilities/visualizer.utilities.d.ts

 export declare class VisualizerUtil {
     static getDimensionNames(dimensions: string[], metaData: any): string[];
     static toCommaSeparated(value: number): string;
+    static toSpaceSeparated(value: number): string;
 }

src/lib/shared/utilities/visualizer.utilities.js

@@ -22,4 +22,12 @@ "use strict";
     }
+    static toSpaceSeparated(value) {
+        const valueString = value.toString().split('.');
+        const numberPart = valueString[0];
+        const decimalPart = valueString[1];
+        const thousands = /\B(?=(\d{3})+(?!\d))/g;
+        return (numberPart.replace(thousands, ' ') +
+            (decimalPart ? '.' + decimalPart : ''));
+    }
 }
 exports.VisualizerUtil = VisualizerUtil;
 //# sourceMappingURL=visualizer.utilities.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

853838

increased by0.79%

Lines of code

10141

increased by0.51%

No dependency changes