changed font size

src/WebApi_database.cpp

@@ -314,61 +314,3 @@ void WebApiDatabaseClass::onDatabaseDay(AsyncWebServerRequest* request)
     AsyncWebServerResponse* response = request->beginChunkedResponse("application/json", readchunkDay);
     request->send(response);
 }
-
-/*  JS
-const energy = JSON.parse('[[23,5,19,6,175.4089966],[23,5,19,10,175.7649994],[23,5,19,10,175.8939972],[23,5,19,10,175.904007],[23,5,19,10,175.9149933],[23,5,19,11,175.9669952],[23,5,19,11,175.973999],[23,5,19,12,176.1159973],[23,5,19,13,176.2900085],[23,5,19,14,176.4179993],[23,5,19,15,176.5429993],[23,5,19,16,176.6100006],[23,5,19,17,176.7269897],[23,5,19,18,176.8370056],[23,5,19,19,176.9060059],[23,5,19,20,176.9360046],[23,5,19,21,176.9459991],[23,5,20,5,176.9459991],[23,5,20,6,176.9470062],[23,5,20,7,176.9629974],[23,5,20,8,177.0270081],[23,5,20,9,177.0899963],[23,5,20,10,177.2389984],[23,5,20,11,177.4759979],[23,5,20,12,177.7310028],[23,5,20,13,178.0749817],[23,5,20,14,178.3970032],[23,5,20,15,178.7460022],[23,5,20,16,179.0829926],[23,5,20,17,179.3110046],[23,5,20,18,179.4849854],[23,5,20,19,179.5549927],[23,5,20,20,179.5899963]]')
-
-var end = new Date()
-var start = new Date()
-var interval = 1
-start.setDate(end.getDate() - interval)
-start.setHours(start.getHours() - 1)
-console.log(start.toLocaleString())
-console.log(end.toLocaleString())
-
-google.charts.load('current', {
-  packages: ['corechart', 'bar']
-});
-google.charts.setOnLoadCallback(drawBasic);
-
-function drawBasic() {
-  var data = new google.visualization.DataTable();
-  data.addColumn('datetime', 'Time');
-  data.addColumn('number', 'Energy');
-  var old_energy = energy[0][4]
-  energy.forEach((x) => {
-    var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
-    if ((d >= start) && (d <= end)) {
-      data.addRow([d, (x[4] - old_energy) * 1000])
-    }
-    old_energy = x[4]
-  })
-
-  var date_formatter = new google.visualization.DateFormat({
-    pattern: "dd.MM.YY HH:mm"
-  });
-  date_formatter.format(data, 0);
-
-  var options = {
-    height: 500,
-    legend: {
-      position: 'none'
-    },
-    hAxis: {
-      format: 'dd.MM.YY HH:mm',
-      slantedText: true
-    },
-    vAxis: {
-      format: '# Wh'
-    }
-  }
-
-  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
-  chart.draw(data, options);
-}
-*/
-
-/* HTML
-  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-  <div id="chart_div"></div>
-*/

webapp/package.json

@@ -16,8 +16,10 @@
     "bootstrap": "^5.3.2",
     "bootstrap-icons-vue": "^1.11.1",
     "mitt": "^3.0.1",
+    "pure-vue-chart": "^0.4.0",
     "sortablejs": "^1.15.1",
     "spark-md5": "^3.0.2",
+    "tippy.js": "^6.3.7",
     "vue": "^3.4.5",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",

webapp/src/components/CalendarChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="card row" v-if="dataLoaded">
-        <CalendarHeatmap :values="values" :end-date="endDate" :style="{'font-size': '12px'}" tooltip-unit="Wh" />
+        <CalendarHeatmap :values="values" :end-date="endDate" :style="{'font-size': '10px'}" tooltip-unit="Wh" />
     </div>
 </template>