feat: Use bar chart instead of pie chart, closes #5

open-contracting · Aug 13, 2023 · 58d70f2 · 58d70f2
1 parent 7565cb1
commit 58d70f2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/frontend/src/components/DatasetLevelCheck.vue b/frontend/src/components/DatasetLevelCheck.vue
@@ -212,7 +212,7 @@ export default {
 }
 
 .card-body {
-    padding: 15px;
+    padding: 15px 15px 0;
 }
 
 .check_headline {
@@ -223,6 +223,7 @@ export default {
 .check_description {
     overflow-wrap: break-word;
     color: $headings_light_color;
+    margin-bottom: 0;
 }
 
 .ok_icon {

diff --git a/frontend/src/components/DonutChart.vue b/frontend/src/components/DonutChart.vue
@@ -1,13 +1,12 @@
 <template>
   <GChart
-    type="PieChart"
+    type="BarChart"
     :data="chartData"
     :options="chartOptions"
   />
 </template>
 
 <script>
-const chroma = require("chroma-js");
 import { GChart } from "vue-google-charts";
 import datasetMixin from "@/plugins/datasetMixins.js";
 
@@ -17,37 +16,56 @@ export default {
     props: ["check"],
     data() {
         return {
-            // Array will be automatically processed with visualization.arrayToDataTable function
             chartData: [],
+            // https://developers.google.com/chart/interactive/docs/gallery/barchart
             chartOptions: {
+                height: 300,
                 legend: {
-                    alignment: "center"
+                    position: "none",
                 },
+                chartArea: {
+                    top: 0,
+                    height: 280,
+                },
+                hAxis: {
+                    viewWindowMode: "maximized",
+                    minValue: 0,
+                },
+                annotations: {
+                    stem: {
+                        color: "transparent",
+                        length: 5,
+                    }
+                },
+                colors: ["#555cb3"],
                 fontName: "GTEestiProDisplay-Regular",
-                chartArea: { left: 10, top: 20, width: "100%", height: "85%" },
-                sliceVisibilityThreshold: 0.5 / 360,
-                colors: []
+                fontSize: 14,
             }
         };
     },
     mounted() {
-        this.chartData.push(["Category", "Share"]);
+        this.chartData.push([
+            this.$t("datasetLevel.code"),
+            this.$t("datasetLevel.count"),
+            {label: this.$t("datasetLevel.percent"), role: "annotation"}
+        ]);
 
-        var totalCount = 0;
         var shares = this.orderedShares(this.check.meta.shares);
+        var labelLength = 0;
+
         for (var key in shares) {
-            this.chartData.push([shares[key][0], shares[key][1].count]);
-            totalCount += shares[key][1].count;
+            this.chartData.push([
+                shares[key][0],
+                shares[key][1].count,
+                this.$options.filters.formatPercentage(100 * shares[key][1].share)
+            ]);
+            labelLength += shares[key][0].length;
         }
 
-        this.chartOptions.colors = this.generateGradient(
-            this.chartData.slice(1).filter(v => v[1] / totalCount >= this.chartOptions.sliceVisibilityThreshold)
-                .length + 1
-        );
-    },
-    methods: {
-        generateGradient: function (colorCount) {
-            return chroma.scale(["#2B2E5A", "#EFF0FC"]).mode("lab").colors(colorCount);
+        // Make more room for long labels.
+        if (labelLength / shares.length > 10) {
+            this.chartOptions.chartArea.left = 120;
+            this.chartOptions.chartArea.width = 200;
         }
     }
 };

diff --git a/frontend/src/messages/en.js b/frontend/src/messages/en.js
@@ -137,6 +137,9 @@ export const messages = {
         label_21_50: "21 - 50",
         label_51_100: "51 - 100",
         label_100: "100+",
+        code: "Code",
+        count: "Count",
+        percent: "Percent",
         examples: "Examples",
         from: "from",
         // The section keys are accessed dynamically in DatasetLevelSection.vue.