using bar chart instead of pie, increasing font size to 20

soil-and-land · Jul 30, 2024 · fa43d60 · fa43d60
1 parent 66ab04c
commit fa43d60
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "socrates-web",
   "private": true,
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "homepage": "https://soil-and-land.github.io/socrates-web/",
   "scripts": {

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     About: typeof import('./components/About.vue')['default']
+    BarChart: typeof import('./components/BarChart.vue')['default']
     BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
     BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
     Contact: typeof import('./components/Contact.vue')['default']

diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
@@ -0,0 +1,164 @@
+<script setup lang="js">
+import {onMounted, onUpdated, reactive, watch} from "vue";
+import {Chart} from 'chart.js/auto';
+
+const props = defineProps(['label', 'data']);
+let chart;
+let chartContext;
+
+let data = reactive({
+  bar: [
+    props.data.co2[props.data.years.length - 1],
+    props.data.n2o.fert[props.data.years.length - 1],
+    props.data.n2o.min[props.data.years.length - 1],
+    props.data.n2o.res[props.data.years.length - 1],
+    props.data.n2o.indirect[props.data.years.length - 1],
+    props.data.n2o.urine[props.data.years.length - 1],
+    props.data.ch4.animal[props.data.years.length - 1]
+  ],
+  labels: [
+    {name: 'Soil C (0-30 cm)', color: 'rgb(44,55,166)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Nitrous Oxide (Fertiliser)', color: 'rgb(255, 99, 132)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Nitrous Oxide (Mineralised)', color: 'rgb(54, 162, 235)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Nitrous Oxide (Residues)', color: 'rgb(255, 205, 86)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Nitrous Oxide (Indirect)', color: 'rgb(79,73,79)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Nitrous Oxide (Urine)', color: 'rgb(206,58,31)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+    {name: 'Methane (Animal)', color: 'rgb(217,109,62)', unit: 'kg CO<sub>2</sub>-eq/ha'},
+  ]
+});
+
+const renderChart = () => {
+  chart = new Chart(chartContext, {
+    type: 'bar',
+    data: {
+      labels: [
+        'Soil C (0-30 cm)',
+        'Nitrous Oxide (Fertiliser)',
+        'Nitrous Oxide (Mineralised)',
+        'Nitrous Oxide (Residues)',
+        'Nitrous Oxide (Indirect)',
+        'Nitrous Oxide (Urine)',
+        'Methane (Animal)'
+      ],
+      datasets: [
+        {
+          label: ' ',
+          backgroundColor: [
+            'rgb(44,55,166)',
+            'rgb(255, 99, 132)',
+            'rgb(54, 162, 235)',
+            'rgb(255, 205, 86)',
+            'rgb(79,73,79)',
+            'rgb(206,58,31)',
+            'rgb(217,109,62)'
+          ],
+          fontSize: 24,
+          // borderColor: 'rgb(53,148,126)',
+          data: [
+            props.data.co2[props.data.years.length - 1],
+            props.data.n2o.fert[props.data.years.length - 1],
+            props.data.n2o.min[props.data.years.length - 1],
+            props.data.n2o.res[props.data.years.length - 1],
+            props.data.n2o.indirect[props.data.years.length - 1],
+            props.data.n2o.urine[props.data.years.length - 1],
+            props.data.ch4.animal[props.data.years.length - 1]
+          ]
+        }
+      ]
+    },
+    hoverOffset: 1,
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: {
+          display: false,
+        }
+      },
+      scales: {
+        y: {
+          beginAtZero: true,  // Ensure y-axis starts at zero
+          suggestedMin: getMin(),
+          // min: getMin(),  // Minimum value for y-axis
+          max: getMax() // Maximum value for y-axis
+        }
+      }
+    }
+  });
+};
+
+onMounted(() => {
+  chartContext = document.getElementById('barChartCanvas');
+  renderChart();
+});
+
+const getMax = () => {
+  return Math.max(...data.bar);
+}
+const getMin = () => {
+  let min = Math.min(...data.bar);
+  if (min >= 0) {
+    min = 0;
+  } else {
+    min = min - 100;
+  }
+  return min;
+}
+
+watch(() => props.data, (first, second) => {
+  if (chart) {
+    data.bar = [
+      props.data.co2[props.data.years.length - 1],
+      props.data.n2o.fert[props.data.years.length - 1],
+      props.data.n2o.min[props.data.years.length - 1],
+      props.data.n2o.res[props.data.years.length - 1],
+      props.data.n2o.indirect[props.data.years.length - 1],
+      props.data.n2o.urine[props.data.years.length - 1],
+      props.data.ch4.animal[props.data.years.length - 1]
+    ];
+    chart.data = {
+      labels: [
+        'Soil C (0-30 cm)',
+        'Nitrous Oxide (Fertiliser)',
+        'Nitrous Oxide (Mineralised)',
+        'Nitrous Oxide (Residues)',
+        'Nitrous Oxide (Indirect)',
+        'Nitrous Oxide (Urine)',
+        'Methane (Animal)'
+      ],
+      datasets: [
+        {
+          label: ' ',
+          backgroundColor: [
+            'rgb(44,55,166)',
+            'rgb(255, 99, 132)',
+            'rgb(54, 162, 235)',
+            'rgb(255, 205, 86)',
+            'rgb(79,73,79)',
+            'rgb(206,58,31)',
+            'rgb(217,109,62)'
+          ],
+          // borderColor: 'rgb(53,148,126)',
+          data: data.bar
+        }
+      ]
+    }
+    chart.options.scales = {y: {suggestedMin: getMin(), max: getMax()}};
+    chart.update();
+  }
+})
+
+</script>
+<template>
+  <el-row :span="24" :gutter="10">
+    <div class="flex flex-row p-2" v-for="(l, index) in data.labels">
+      <div class="w-8 h-4" :style="`background-color: ${l.color}`"></div>
+      <span class="pl-2">{{ l.name }}</span>
+      <span class="pl-2">{{ data.bar[index] }}</span>
+      <span class="px-2" v-html="l.unit"/>
+    </div>
+  </el-row>
+  <div class="sm:w-full md:w-full lg:w-full xl:w-40% 2xl:w-40%">
+    <canvas id="barChartCanvas" height="400"></canvas>
+  </div>
+</template>
diff --git a/src/components/Input.vue b/src/components/Input.vue
@@ -770,8 +770,12 @@ function isIterable(obj) {
           </el-col>
           <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"
                   class="w-full">
+            <!--Not using pie anymore switched to a bar chart to display negatives a bit better-->
+            <!--<div class="grid place-items-center">-->
+            <!--  <pie-chart :data="store.results"/>-->
+            <!--</div>-->
             <div class="grid place-items-center">
-            <pie-chart :data="store.results"/>
+              <bar-chart :data="store.results"/>
             </div>
           </el-col>
           <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"

diff --git a/src/components/layouts/BaseHeader.vue b/src/components/layouts/BaseHeader.vue
@@ -3,7 +3,7 @@ import { toggleDark } from "~/composables";
 </script>
 
 <template>
-  <el-menu class="sticky top-0 z-50" mode="horizontal" :router="true">
+  <el-menu class="sticky top-0 z-50 bg-opacity-100" mode="horizontal" :router="true">
     <el-menu-item index="/input">SOCRATES</el-menu-item>
     <el-menu-item index="/about">About</el-menu-item>
     <el-menu-item index="/help">Help</el-menu-item>

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -5,6 +5,10 @@
 //   --ep-color-primary: red;
 // }
 
+html {
+  font-size: 20px;
+}
+
 body {
   font-family: Inter, system-ui, Avenir, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,4 +5,4 @@ export default {
     extend: {},
   },
   plugins: [],
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,4 @@ export default { @@
         extend: {},
       },
       plugins: [],
-    }
+    }