some cosmetic changes

webapp/src/components/BarChart.vue

@@ -15,18 +15,29 @@ import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
-var data: any;
+var data_col: any;
-export const type = 'ColumnChart';
+export const type_col = 'ColumnChart';
-export const options = {
+export const options_col = {
     height: 300,
-    chartArea: { top: 25, width: '85%', height: '80%' },
+    chartArea: {
+        top: 25, 
+        width: '85%', 
+        height: '80%' 
+    },
+    bar: {
+        groupWidth: '100%'
+    },
     legend: {
         position: 'none'
     },
     hAxis: {
         format: 'HH',
+        minorGridlines: {
+            count: 0
+        }
     },
     vAxis: {
+        minValue: 0,
         format: '# Wh'
     }
 };
@@ -40,9 +51,9 @@ export default defineComponent({
     setup() {
         return () =>
             h(GChart, {
-                data,
+                data: data_col,
-                options,
+                options: options_col,
-                type
+                type: type_col
             });
     },
     beforeMount() {
@@ -60,11 +71,18 @@ export default defineComponent({
             var old_energy = 0.0;
             start.setDate(end.getDate() - interval);
             start.setHours(start.getHours() - 2);
-            data = [['Time', 'Energy']];
+            data_col = [[{
+                type: 'date',
+                id: 'Time'
+            },
+            {
+                type: 'number',
+                id: 'Energy'
+            }]]
             energy.forEach((x: any[]) => {
                 var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3]);
                 if ((d >= start) && (d <= end) && (old_energy > 0.0)) {
-                    data.push([d, Math.round((x[4] - old_energy) * 1000)])
+                    data_col.push([d, Math.round((x[4] - old_energy) * 1000)])
                 }
                 old_energy = x[4]
             })

webapp/src/components/CalendarChart.vue

@@ -3,9 +3,11 @@
         <div v-if="dataBase.valid_data">
             <div class="card-header">
             </div>
+            <div>
                 <GoogleChart />
             </div>
         </div>
+    </div>
 </template>
 
 <script lang="ts">
@@ -13,15 +15,16 @@ import { defineComponent, type PropType, h } from 'vue';
 import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 
-var data: any;
+var data_cal: any;
-export const type = 'Calendar';
+export const type_cal = 'Calendar';
-export const options = {
+export const options_cal = {
-    height: 250,
+    height: 270,
     colorAxis: {
+        minValue: 0,
         colors: ['#FFFFFF', '#0000FF']
     },
     calendar: {
-        cellSize: 20,
+        cellSize: 24,
     },
 };
 export default defineComponent({
@@ -34,9 +37,9 @@ export default defineComponent({
     setup() {
         return () =>
             h(GChart, {
-                data,
+                data: data_cal,
-                options,
+                options: options_cal,
-                type,
+                type: type_cal,
                 settings: {
                     packages: ['calendar'],
                 }
@@ -50,7 +53,7 @@ export default defineComponent({
     },
     methods: {
         drawChart() {
-            data = [[{
+            data_cal = [[{
                 type: 'date',
                 id: 'Date'
             },
@@ -70,7 +73,7 @@ export default defineComponent({
                     old_energy = x[4];
                 } else {
                     if (x[2] != old_day) {
-                        data.push(a)
+                        data_cal.push(a)
                         old_day = x[2]
                         old_energy = last_energy
                     }
@@ -79,7 +82,7 @@ export default defineComponent({
                 d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
                 a = [d, Math.round((last_energy - old_energy) * 1000)]
             })
-            data.push(a)
+            data_cal.push(a)
         }
     }
 });