Minor graphic changes to charts

linkarkitektur · Jun 12, 2024 · 17c3540 · 17c3540
1 parent bb61ab6
commit 17c3540
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/components/Graphs/SelectablePieChart.vue b/src/components/Graphs/SelectablePieChart.vue
@@ -124,6 +124,7 @@ function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
   const padAngle = stroke === "none" ? 1 / outerRadius : 0.02
   const maxTextLength = 12
 
+  const unit = 'kg CO2e'
   const colors = ref(options.colors || 
     groupData.value.map(d => 
       getValueColorFromGradient(d.value, 0, Math.max(...groupData.value.map(d => d.value)))
@@ -172,7 +173,7 @@ function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
       }
 
       tooltipDiv
-        .html(data.data.label + ": " + roundNumber(data.value, 3))
+        .html(data.data.label + ": " + roundNumber(data.value, 3) + " " + unit)
         .style("left", left + "px")
         .style("top", top + "px")
     }
@@ -308,15 +309,25 @@ function SelectablePieChart(data: ChartData[], options: ChartOptions = {}) {
         })
       })
 
-    // Add total in the middle
-    graph.append("text")
-      .attr("text-anchor", "middle")
-      .attr("dy", "0.35em")
-      .attr("x", w / 2)
-      .attr("y", h / 2)
-      .classed("text-md", true)
-      .style("font-weight", "bold")
-      .text(roundNumber(total.value, 1))
+      let textElement = graph.append("text")
+        .attr("text-anchor", "middle")
+        .attr("dy", "0.35em")
+        .attr("x", w / 2)
+        .attr("y", h / 2)
+        
+        .style("font-weight", "bold")
+
+      textElement.append("tspan")
+        .text(roundNumber(total.value, 1))
+        .classed("text-md", true)
+        .attr("x", w / 2)
+        .attr("dy", "-0.2em")
+
+      textElement.append("tspan")
+        .text(unit)
+        .classed("text-xs", true)
+        .attr("x", w / 2)
+        .attr("dy", "1.2em")
   }
   return { drawChart }
 }

diff --git a/src/components/Graphs/StackedBarChart.vue b/src/components/Graphs/StackedBarChart.vue
@@ -20,6 +20,7 @@ const sampleData: ChartData[] = [
   { label: 'C1-C4', value: 50 }
 ]
 
+
 export default {
   name: 'StackedBarChart',
   props: {
@@ -91,6 +92,8 @@ function stackedBarChart(data: ChartData[], options: ChartOptions = {}) {
   const totalAbs = ref(d3.sum(data, d => Math.abs(d.value)))
   const { groupData, zeroPoint } = groupDataFunc(data, total)
 
+  const unit = ' kg CO2e'
+
   const colors = ref(options.colors || 
     groupData.map(d => 
       getValueColorFromGradient(d.value, 0, Math.max(...groupData.map(d => d.value)))
@@ -146,7 +149,7 @@ function stackedBarChart(data: ChartData[], options: ChartOptions = {}) {
       }
 
       tooltipDiv
-        .html(data.label + ": " + data.value)
+        .html(data.label + ": " + data.value + unit)
         .style("left", left + "px")
         .style("top", top + "px")
     }
@@ -220,7 +223,16 @@ function stackedBarChart(data: ChartData[], options: ChartOptions = {}) {
         .attr('x', d => xScale(d.cumulative as number) + (xScale(Math.abs(d.value)) / 2))
         .attr('y', (h / 2) + 5)
         .style('fill', (d, i) => chroma(colors.value[i]).darken(2))
-        .text(d => d.value.toString())
+        .each(function(this: SVGTextElement, d) {
+          const text = d3.select(this)
+          
+          text.append('tspan')
+            .text(d.value.toString());
+
+          text.append('tspan')
+            .attr('class', 'text-xs')
+            .text(" " + unit);
+        })
     )
 
     // Add the labels