Fix/2377/improve metric descriptions in legend (#2421)

* Hide legend block if label description is not available #2377

* Add new descriptions #2377

* Update Changelog #2377

* Add change to be able to display metrics cleanly even without description. #2377

Co-authored-by: Shivan-997 <57844849+Shivan-997@users.noreply.github.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
+### Fixed 🐞
+
+-   Hides legend block if label description is not available and adds new metric descriptions ([#2377](https://github.com/maibornwolff/codecharta/issues/2377)).
+
 ## [1.80.0] - 2021-10-04
 
 ### Added 🚀

visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html

@@ -1,24 +1,36 @@
 <div class="block-wrapper" ng-class="{ visible: $ctrl._viewModel.isLegendVisible, sideBarVisible: $ctrl._viewModel.isSideBarVisible }">
 	<div ng-if="!$ctrl._viewModel.isDeltaState">
-		<div class="legend-block">
+		<div ng-if="$ctrl._viewModel.areaMetricDescription" class="legend-block">
 			Size metric (<span class="bold">{{ $ctrl._viewModel.areaMetric }}</span
 			>: {{ $ctrl._viewModel.areaMetricDescription }})
 		</div>
-		<div class="legend-block">
+		<div ng-if="!$ctrl._viewModel.areaMetricDescription" class="legend-block">
+			Size metric: <span class="bold">{{ $ctrl._viewModel.areaMetric }}</span>
+		</div>
+		<div ng-if="$ctrl._viewModel.heightMetricDescription" class="legend-block">
 			Height metric (<span class="bold">{{ $ctrl._viewModel.heightMetric }}</span
 			>: {{ $ctrl._viewModel.heightMetricDescription }})
 		</div>
+		<div ng-if="!$ctrl._viewModel.heightMetricDescription" class="legend-block">
+			Height metric: <span class="bold">{{ $ctrl._viewModel.heightMetric }}</span>
+		</div>
 		<div ng-if="$ctrl._viewModel.edgeMetricHasEdge">
-			<div class="legend-block">
+			<div ng-if="$ctrl._viewModel.edgeDescription" class="legend-block">
 				Edge metric (<span class="bold">{{ $ctrl._viewModel.edge }}</span
 				>: {{ $ctrl._viewModel.edgeDescription }})
 			</div>
+			<div ng-if="!$ctrl._viewModel.edgeDescription" class="legend-block">
+				Edge metric: <span class="bold">{{ $ctrl._viewModel.edge }}</span>
+			</div>
 		</div>
 		<hr />
-		<div class="legend-block">
+		<div ng-if="$ctrl._viewModel.colorMetricDescription" class="legend-block">
 			Color metric (<span class="bold">{{ $ctrl._viewModel.colorMetric }}</span
 			>: {{ $ctrl._viewModel.colorMetricDescription }})
 		</div>
+		<div ng-if="!$ctrl._viewModel.colorMetricDescription" class="legend-block">
+			Color metric: <span class="bold">{{ $ctrl._viewModel.colorMetric }}</span>
+		</div>
 		<cc-store-color-picker map-color-for="positive" label="0 to &lt; {{ $ctrl._viewModel.colorRange.from | number: 0 }}">
 		</cc-store-color-picker>
 		<cc-store-color-picker

visualization/app/codeCharta/util/metric/metricDescriptions.ts

@@ -3,7 +3,9 @@ This file contains descriptions of the metrics
 */
 
 export const metricDescriptions: Map<string, string> = new Map([
+	["loc", "lines of code"],
 	["rloc", "real lines of code"],
+	["comment_lines", "number of code lines with comments"],
 	["mcc", "cyclomatic complexity"],
 	["avgCommits", "average number of commits from this file"],
 	["functions", "number of files from this file"],