- HomeController.ts: addes api method for showing number of publications per month for given year

- adapted command ValidateChecksum.ts: on published files are checked. better information logging
- better LineChart.vue component: showing real statistics
- start/routes/apu.ts: added Route.get('/statistic/:year', 'HomeController.findPublicationsPerMonth');

resources/js/Components/Charts/LineChart.vue

@@ -1,7 +1,29 @@
-<script setup>
+<script lang="ts" setup>
 import { ref, watch, computed, onMounted } from 'vue';
-import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip } from 'chart.js';
+import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip, registerables } from 'chart.js';
+import { Ref } from 'vue';
+import { ChartDataCustomTypesPerDataset } from 'chart.js';
 
+
+// interface Dataset {
+
+//     borderColor: string;
+//     // borderDash:
+//     // (0) []
+//     borderDashOffset: number;
+//     borderWidth: number;
+//     cubicInterpolationMode: string;
+//     data: Array<number>;
+//     fill: boolean;
+//     pointBackgroundColor: string;
+//     pointBorderColor: string;
+//     pointBorderWidth: number;
+//     pointHoverBackgroundColor: string;
+//     pointHoverBorderWidth: number;
+//     pointHoverRadius: number;
+//     pointRadius: number;
+//     tension: number;
+// }
 const props = defineProps({
     data: {
         type: Object,
@@ -9,16 +31,38 @@ const props = defineProps({
     },
 });
 
-const root = ref(null);
+const root: Ref<HTMLCanvasElement | null> = ref<HTMLCanvasElement | null>(null);
 
 let chart;
 
 Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip);
 
 onMounted(() => {
+    Chart.register(...registerables);
+
+    // https://gitea.geologie.ac.at/kaiarn/geomon.viewer/src/branch/master/src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
     chart = new Chart(root.value, {
         type: 'line',
-        data: props.data,
+        data: props.data as ChartDataCustomTypesPerDataset<"line", number[], string>,
+        // data: {
+        //     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        //     // labels: [],
+        //     datasets: [
+        //             {
+        //             data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2600, 2700],
+        //             label: "Africa",
+        //             borderColor: "#3e95cd",
+        //             fill: false
+        //         }, {
+        //             data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267, 444, 555],
+        //             label: "Asia",
+        //             borderColor: "#8e5ea2",
+        //             fill: false
+        //         }
+        //     ]
+        // },
+
+
         options: {
             responsive: true,
             maintainAspectRatio: false,
@@ -32,11 +76,12 @@ onMounted(() => {
             },
             plugins: {
                 legend: {
-                    display: false,
+                    display: true,
                 },
             },
         },
     });
+
 });
 
 const chartData = computed(() => props.data);

resources/js/Components/Charts/chart.config.js

@@ -36,7 +36,7 @@ const datasetObject = (color, points) => {
     };
 };
 
-export const sampleChartData = (points = 9) => {
+export const sampleChartData = (points = 12) => {
     const labels = [];
 
     for (let i = 1; i <= points; i++) {