wip switch to highcharts

package.json

@@ -6,14 +6,15 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --host"
   },
   "devDependencies": {
     "vite": "^4.1.0"
   },
   "dependencies": {
     "@ui5/webcomponents": "^1.11.0",
     "@ui5/webcomponents-icons": "^1.11.0",
+    "highcharts": "^10.3.3",
     "moment": "^2.29.4"
   }
 }

src/css/style.css

@@ -95,16 +95,18 @@ ui5-table#extraPaymentsTable {
 }
 
 div#lineChart {
+  height: 400px;
   flex-grow: 1;
   flex-shrink: 1;
 }
 
 div#pieChart {
+  height: 400px;
   flex-grow: 1;
   flex-shrink: 1;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 800px) {
   body {
     margin: 0;
     display: flex;

src/js/calcLoan.js

@@ -2,8 +2,10 @@ import { validInput, validateAdditionalPayments } from "./validateInput";
 import { renderMonthTableStart, renderMonthTableRow, renderMonthTableEnd } from "./monthTable";
 import { gatherAdditionalPayments } from "./extraPayment";
 import { drawLineChart, drawPieChart } from "./charts";
+import { drawLineChartH, drawPieChartH } from "./chartsH";
 import { loanData } from "./loadData";
 
+
 import moment from 'moment';
 
 export function setUpCalc(element) {
@@ -127,6 +129,7 @@ export function setUpCalc(element) {
             }
 
             // Line chart data
+            // Google chards data
             includeAddPayments && loanData.addLineChartData([
                 index,
                 remainingPrincipal,
@@ -210,11 +213,11 @@ export function setUpCalc(element) {
         const data = new loanData(startDate.format("DD/MM/YYYY"), loanAmount, interestRate, loanTerm, fixedPrincipal);
         data.additionalPayments = additionalPayments;
         data.lineChartData = [
-            ["Month", "Principal", "Interest"],
+            //["Month", "Principal", "Interest"],
             [0, loanAmount, 0],
         ];
         data.pieChartData = [
-            ["Principal", "Interest"]
+            //["Principal", "Interest"]
         ];
 
         additionalPayments.length && calcLoanData(data, false);
@@ -230,8 +233,8 @@ export function setUpCalc(element) {
         tableDiv.innerHTML = tableHtml;
 
         // Charts
-        drawLineChart(data.lineChartData);
-        drawPieChart(data.pieChartData);
+        drawLineChartH(data.lineChartData);
+        drawPieChartH(data.pieChartData);
 
         data.destroy();
     }

src/js/charts.js

@@ -10,7 +10,7 @@ const drawLineChart = lineChartData => {
         },
         hAxis: { title: "Month" },
         vAxis: { title: "Amount" },
-        //width: 600
+        width: "100%"
     };
 
     var chart = new google.visualization.LineChart(
@@ -28,8 +28,8 @@ const drawPieChart = pieChartData => {
             position: "right",
             alignment: "center"
         },
-        //width: 500,
-        pieSliceText: 'value'
+        pieSliceText: 'value',
+        width: "100%"
     };
 
     var chart = new google.visualization.PieChart(

src/js/chartsH.js

@@ -0,0 +1,108 @@
+import HighCharts from 'highcharts';
+
+const extractToLineChartSeries = (data, seriesName, index) => {
+    const seriesData = data.map(dataPoint => ({
+        x: dataPoint[0],
+        y: dataPoint[index]
+    }));
+    return {
+        name: seriesName,
+        data: seriesData
+    }
+};
+
+const drawLineChartH = lineChartData => {
+    const remainingPrincipal = extractToLineChartSeries(lineChartData, "Principal", 1);
+    const totalInterest = extractToLineChartSeries(lineChartData, "Interest", 2);
+
+    console.log(remainingPrincipal);
+    console.log(totalInterest);
+
+    remainingPrincipal.color = '#0070f2';
+    totalInterest.color = '#aa0808';
+
+    const options = {
+        title: {
+            text: 'Loan Payment Schedule'
+        },
+        xAxis: {
+            title: {
+                text: 'Month'
+            }
+        },
+        yAxis: {
+            title: {
+                text: 'Amount'
+            }
+        },
+        series: [
+            remainingPrincipal,
+            totalInterest
+        ],
+        legend: {
+            align: 'center',
+            verticalAlign: 'bottom'
+        },
+        tooltip: {
+            shared: true,
+            useHTML: true,
+            headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
+            pointFormat:
+                '<tr><td style="color: {series.color}">{series.name} </td>' +
+                '<td style="text-align: right"><b>{point.y}</b></td></tr>',
+            footerFormat: '</table>',
+            valueDecimals: 2
+        }
+    };
+
+    HighCharts.chart('lineChart', options);
+};
+
+const drawPieChartH = pieChartData => {
+    console.log(pieChartData)
+    const options = {
+        title: {
+            text: 'Loan Payment'
+        },
+        colors: [
+            '#ff0000',
+            '#0d233a'
+        ],
+        series: [{
+            type: 'pie',
+            data: [
+                {
+                    name: pieChartData[0][0],
+                    color: '#0070f2',
+                    y: pieChartData[0][1]
+                },
+                {
+                    name: pieChartData[1][0],
+                    color: '#aa0808',
+                    y: pieChartData[1][1]
+                }
+            ]
+        }],
+        legend: {
+            align: 'right',
+            verticalAlign: 'middle'
+        },
+        tooltip: {
+            useHTML: true,
+            headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
+            pointFormat:
+                '<tr><td> {point.y} </td></tr>' +
+                '<tr><td style="text-align: right"><b>{point.percentage:.2f} %</b></td></tr>',
+            footerFormat: '</table>',
+            valueDecimals: 2
+            //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        }
+    };
+
+    HighCharts.chart('pieChart', options);
+};
+
+export {
+    drawLineChartH,
+    drawPieChartH
+};

src/js/main.js

@@ -40,3 +40,9 @@ startDate.setAttribute('value', moment().format('DD/MM/YYYY'));
 
 setUpExtraPayments(document.getElementById('addExtraPayment'));
 setUpCalc(document.getElementById('calcBtn'));
+
+// window.onresize = doALoadOfStuff;
+
+// function doALoadOfStuff() {
+//     //do a load of stuff
+// }