diff --git a/src/components/Navigation/Ui/ScoreRenderer.js b/src/components/Navigation/Ui/ScoreRenderer.js
index 5694e9b7b..ea05232b3 100644
--- a/src/components/Navigation/Ui/ScoreRenderer.js
+++ b/src/components/Navigation/Ui/ScoreRenderer.js
@@ -50,6 +50,7 @@ class ScoreRenderer extends Component {
return (
{label}: {score[name]}
+ {this.renderUnit()}
)
}
@@ -71,10 +72,15 @@ class ScoreRenderer extends Component {
Licensed
{this.renderScores(licensedScore, licensedToolScore)}
+ {this.renderScoreInfo()}
)
} else {
- return {this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))}
+ return (
+
+ {this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))} {this.renderScoreInfo()}
+
+ )
}
}
@@ -82,17 +88,36 @@ class ScoreRenderer extends Component {
return (
-
{`Effective: ${isNumber(effective.total) ? effective.total : effective}`}
+
+ {`Effective: ${isNumber(effective.total) ? effective.total : effective}`}
+ {this.renderUnit()}
+
{this.renderScore(effective)}
-
{`Tools: ${isNumber(tools.total) ? tools.total : tools}`}
+
+ {`Tools: ${isNumber(tools.total) ? tools.total : tools}`}
+ {this.renderUnit()}
+
{this.renderScore(tools)}
)
}
+ renderUnit = () => /100
+
+ renderScoreInfo = () => (
+
+ )
+
render() {
const { domain, scores } = this.props
if (!domain && !scores) return null
diff --git a/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js b/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js
index 49605469e..6f3728d64 100644
--- a/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js
+++ b/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js
@@ -48,11 +48,15 @@ describe('ScoreRenderer', () => {
expect(resultScores).toEqual(
-
Effective: 0
+
+ Effective: 0/100
+
{instance.renderScore(licensedScore)}
-
Tools: 0
+
+ Tools: 0/100
+
{instance.renderScore(licensedToolScore)}
diff --git a/src/styles/_ScoreRenderer.scss b/src/styles/_ScoreRenderer.scss
index c3349ed6e..b12c1550c 100644
--- a/src/styles/_ScoreRenderer.scss
+++ b/src/styles/_ScoreRenderer.scss
@@ -5,9 +5,18 @@
color: white;
font-size: 16px;
}
+ .ScoreInfo {
+ font-size: 12px;
+ text-decoration: underline;
+ width: 100%;
+ text-align: right;
+ a {
+ color: white;
+ }
+ }
.ScoreRenderer__domain {
display: flex;
- width: 300px;
+ width: 400px;
}
.ScoreRenderer__domain__section {
padding: 10px;
@@ -18,7 +27,11 @@
padding: 0;
}
}
+ .unit {
+ font-size: 12px;
+ }
}
.ant-tooltip-inner {
- width: 300px !important;
+ background-color: rgba(0, 0, 0, 0.9);
+ width: 400px !important;
}