Refactor/3755/thousands sepeartion (#3758)

* refactor(visualization): Add thousands separation for metrics * test(visualization): Add test for thousands separation * chore(visualization): update changelog
MaibornWolff · Sep 18, 2024 · 650c801 · 650c801
1 parent 4414cdb
commit 650c801
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/visualization/CHANGELOG.md b/visualization/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Changed
+
+- Add thousands seperation for metrics value [#3758](https://github.com/MaibornWolff/codecharta/pull/3758)
+
 ## [1.128.0] - 2024-09-18
 
 ### Added 🚀

diff --git a/...tion/app/codeCharta/ui/metricChooser/metricChooserValue/metricChooserValue.component.html b/...tion/app/codeCharta/ui/metricChooser/metricChooserValue/metricChooserValue.component.html
@@ -1,12 +1,12 @@
 @if (node$ | async; as node) {
     <cc-rounded-box>
         <cc-metric-chooser-type [metricFor]="metricFor"></cc-metric-chooser-type>
-        <span>{{ node.attributes[(primaryMetricNames$ | async)[metricFor]] }}</span>
+        <span>{{ node.attributes[(primaryMetricNames$ | async)[metricFor]]?.toLocaleString() }}</span>
     </cc-rounded-box>
 
     @if (node.deltas) {
         <cc-rounded-box [backgroundColor]="calculateBackgroundColor(node.deltas[(primaryMetricNames$ | async)[metricFor]])">
-            &Delta;{{ node.deltas[(primaryMetricNames$ | async)[metricFor]] }}
+            &Delta;{{ node.deltas[(primaryMetricNames$ | async)[metricFor]]?.toLocaleString() }}
         </cc-rounded-box>
     }
 }
diff --git a/...n/app/codeCharta/ui/metricChooser/metricChooserValue/metricChooserValue.component.spec.ts b/...n/app/codeCharta/ui/metricChooser/metricChooserValue/metricChooserValue.component.spec.ts
@@ -62,6 +62,21 @@ describe("metricChooserValueComponent", () => {
         expect(screen.queryByText("Δ")).toBe(null)
     })
 
+    it("should display value with thousands seperation", async () => {
+        const rloc = "1000000"
+        VALID_NODE.children[0].attributes = { rloc: Number(rloc) }
+        TestBed.overrideProvider(NodeSelectionService, {
+            useValue: { createNodeObservable: jest.fn().mockReturnValue(of(VALID_NODE.children[0])) }
+        })
+        await render(MetricChooserValueComponent, {
+            excludeComponentDeclaration: true,
+            componentProperties: { metricFor: "areaMetric" }
+        })
+
+        expect(screen.queryByText("1,000,000")).not.toBe(null)
+        expect(screen.queryByText("Δ")).toBe(null)
+    })
+
     it("should display zero height delta value in grey", async () => {
         TestBed.overrideProvider(NodeSelectionService, {
             useValue: {