]> gitweb.hhaalo.de Git - feierabend.git/commitdiff
projects / feierabend.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ae50335)
add google line chart
authorBastian Dehn <hhaalo@arcor.de>
Sun, 7 Jul 2024 09:04:52 +0000 (11:04 +0200)
committerBastian Dehn <hhaalo@arcor.de>
Sun, 7 Jul 2024 09:42:27 +0000 (11:42 +0200)
src/xmlviewer/viewer.css patch | blob | history
src/xmlviewer/viewer.html patch | blob | history
src/xmlviewer/viewer.js patch | blob | history

diff --git a/src/xmlviewer/viewer.css b/src/xmlviewer/viewer.css
index 0f301eda565f5f1d37e104dc8a0bab08880ef152..3f370c101b8b671b17b1fbd21069b9981ab24720 100644 (file)
--- a/src/xmlviewer/viewer.css
+++ b/src/xmlviewer/viewer.css
@@ -48,14 +48,9 @@ tr:last-child td:last-child {
 .green {
        background-color: lightgreen;
 }
-@media only screen and (min-width: 62rem) {
-       .tables {
-               display: flex;
-               flex-direction: row;
-               gap: 1rem;
-               align-items: start;
-               justify-content: center;
-       }
+#diag {
+       width: 100%;
+       height: 40rem;
 }
 @media only screen and (max-width: 40rem) {
        th {
@@ -78,4 +73,13 @@ tr:last-child td:last-child {
                font-weight: bold;
                content: attr(data-cell) ": ";
        }
-}
\ No newline at end of file
+}
+@media only screen and (min-width: 62rem) {
+       .tables {
+               display: flex;
+               flex-direction: row;
+               gap: 1rem;
+               align-items: start;
+               justify-content: center;
+       }
+}
diff --git a/src/xmlviewer/viewer.html b/src/xmlviewer/viewer.html
index 8f184580b2e23368e1c775f230fa9cfff4f4f6e3..421ec23125e6f64ec9673bc7592eb98bd7313dac 100644 (file)
--- a/src/xmlviewer/viewer.html
+++ b/src/xmlviewer/viewer.html
@@ -5,9 +5,10 @@
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" type="text/css" href="viewer.css">
-               <script type="text/javascript" src="viewer.js"></script>
        </head>
        <body>
+               <script type="text/javascript" src="viewer.js"></script>
+               <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                <main>
                        <div class="fileinput">
                                <label>Zeitkonto-Datei: </label>
@@ -61,6 +62,7 @@
                                        </table>
                                </div>
                        </div>
+                       <div id="diag"></div>
                </main>
        </body>
 </html>
\ No newline at end of file
diff --git a/src/xmlviewer/viewer.js b/src/xmlviewer/viewer.js
index 2cfbd9597d36b36c5546fbff594cdd48c1e5fc0a..1cdc35b87a123745502e1d05aa8103a315d29e9b 100644 (file)
--- a/src/xmlviewer/viewer.js
+++ b/src/xmlviewer/viewer.js
@@ -121,6 +121,32 @@ function appendHeader(tableElement) {
        tableElement.append(trElement)
 }
 
+function loadChart(chartData) {
+       google.charts.load('current',{packages:['corechart']});
+       google.charts.setOnLoadCallback(() => {
+               const data = google.visualization.arrayToDataTable(chartData);
+
+               const options = {
+                       title: 'Verlauf der Salden',
+                       hAxis: {title: 'Datum'},
+                       vAxis: {title: 'Saldo'},
+                       legend: 'none'
+               };
+
+               const diag = document.getElementById('diag');
+               const chart = new google.visualization.LineChart(diag);
+               chart.draw(data, options);
+       });
+}
+
+function convertSaldoToHour(saldo) {
+       const numbers = saldo.split(":");
+       let hours = Number(numbers[0]);
+       hours += Number(numbers[1]) / 60;
+
+       return hours;
+}
+
 function loadFile() {
        const fileinput = document.getElementById("filepath");
        const element = document.getElementById("content");
@@ -141,11 +167,15 @@ function loadFile() {
                appendHeader(tableElement)
 
                const count = rootNode.childElementCount;
+               const chartData = [];
+               chartData.push(["datum", "saldo"]);
                for (let i = 0; i < count; i++) {
+                       chartData.push([rootNode.children[i].getAttribute("datum"),
+                               convertSaldoToHour(rootNode.children[i].getAttribute("saldo"))]);
                        appendRow(rootNode.children[i], tableElement);
                }
-
                element.append(tableElement);
+               loadChart(chartData);
        };
        filereader.readAsText(fileinput.files[0]);
 }
\ No newline at end of file
feierabend calculator