IG-82 - Metadata quality report

HDRUK · Jun 10, 2020 · 658a7de · 658a7de
1 parent 9a65dfb
commit 658a7de
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/src/css/hdruk.css b/src/css/hdruk.css
@@ -1049,3 +1049,38 @@ iframe#discourse-embed-frame {
     overflow-wrap: break-word;
   }
 
+  .MetadataQuality{
+  padding-left:12px;
+  padding-right:12px;
+  height: 25px;
+  line-height: 25px;
+  border-radius: 4px;
+  display: inline-block;
+  color:white;
+  font-size: 14px;
+}
+
+.NotRatedBackground {
+    color: #3c3c3b;
+    font-weight: 500;
+    opacity: 0.7;
+    padding-left: 0px;
+}
+
+.RatingSilverBackground {
+  background-image: linear-gradient(to left, #cbcbcb, #9b9b9b 50%);
+}
+
+.RatingBronzeBackground {
+  background-image: linear-gradient(to left, #d9a466, #b16a36 50%);
+}
+
+.RatingPlatinumBackground {
+  background-image: linear-gradient(to left, #cbcbcb, #9b9b9b 50%);
+}
+
+.RatingGoldBackground {
+  background-image: linear-gradient(to left, #dfca5d, #bb9a30 50%);
+}
+
+
diff --git a/src/pages/dataset/DatasetPage.js b/src/pages/dataset/DatasetPage.js
@@ -199,7 +199,31 @@ class DatasetTitle extends Component {
       const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
       var releaseDate = new Date(data.releaseDate);
       var releasedOnDate = (data.releaseDate ? releaseDate.getDate() + " " + monthNames[releaseDate.getMonth()] + " " + releaseDate.getFullYear() : "");
-
+      var metadataQuality         = "";
+      var metadataQualityClass    = "MetadataQuality ";
+
+      if (data.quality) {
+        if (data.quality.quality_score <= 50) {
+          metadataQuality      = "Not rated";
+          metadataQualityClass += "NotRatedBackground";
+
+        } else if (data.quality.quality_score <= 70) {
+          metadataQuality      = "Bronze";
+          metadataQualityClass += "RatingBronzeBackground";
+
+        } else if (data.quality.quality_score <= 80) {
+          metadataQuality      = "Silver";
+          metadataQualityClass += "RatingSilverBackground";
+
+        } else if (data.quality.quality_score <= 90) {
+          metadataQuality      = "Gold";
+          metadataQualityClass += "RatingGoldBackground";
+
+        } else if (data.quality.quality_score > 90) {
+          metadataQuality      = "Platinum";
+          metadataQualityClass += "RatingPlatinumBackground";
+        }
+      }
       return (
           <div>
               <Row className="mt-2">
@@ -269,6 +293,16 @@ class DatasetTitle extends Component {
                                     {!keywords || keywords.length <= 0 ? <span className="Gray800-14px-Opacity">Not specified</span> : keywords.map((keyword) => {return <div className="mr-2 Gray800-14px tagBadges mb-2"> <a href={'/search?search=' + keyword}> {keyword} </a> </div> })}                                
                                 </Col>
                             </Row>
+
+                            <Row className="mt-3">
+                                <Col sm={2} lg={2} className="Gray800-14px" >
+                                    Meta-data quality
+                                </Col>
+                                <Col sm={10} lg={10}>
+                                    {data.quality ? <div><div className={metadataQualityClass}> {metadataQuality} </div> <a href="https://github.com/HDRUK/datasets#about-the-reports" className="ml-2 Purple-14px" target="_blank">How is this calculated? </a></div> : <Col sm={8} lg={8} className="Gray800-14px-Opacity">Not specified</Col>}
+                                </Col>
+                            </Row>
+
                       </div>
                   </Col>
                   <Col sm={1} lg={10} />