feat: add download chart fufllsize

index.html

@@ -73,7 +73,11 @@ <h2>Lãi suất</h2>
 
         <div id="interest-rate-list"></div>
       </section>
+      <div class="download-chart-container">
+        <canvas id="full-size-chart"></canvas>
+      </div>
     </main>
+
     <script type="module" src="/src/index.ts"></script>
   </body>
 </html>

src/assets/style.css

@@ -165,6 +165,13 @@ button:hover {
   margin-top: 0;
 }
 
+.download-chart-container {
+  width: 1000px;
+  position: absolute;
+  top: 0;
+  right: -1000px;
+}
+
 @media (max-width: 768px) {
   body {
     padding: 0;

src/index.ts

@@ -1,5 +1,5 @@
 import { ChartDataset } from "chart.js";
-import chart from "./main";
+import chart, { fullSizeChart } from "./main";
 import {
   calculateCompoundingInterest,
   color,
@@ -128,7 +128,14 @@ addDatasetBtn.addEventListener("click", () => {
 });
 
 downloadButton.addEventListener("click", () => {
-  const base64Image = chart.toBase64Image("image/png", 1);
+  const datasets = getDatasets();
+  console.log("datasets", datasets);
+  fullSizeChart.data.datasets = datasets;
+  fullSizeChart.data.labels = months(lengthOfTimeInMonths);
+
+  fullSizeChart.update();
+
+  const base64Image = fullSizeChart.toBase64Image("image/png", 1);
   const link = document.createElement("a");
   link.href = base64Image;
   link.download = "chart.png";
@@ -223,9 +230,15 @@ function renderInterestRateList() {
 
 function updateChart() {
   const datasets = getDatasets();
+  const labels = months(lengthOfTimeInMonths);
+
   chart.data.datasets = datasets;
-  chart.data.labels = months(lengthOfTimeInMonths);
+  chart.data.labels = labels;
   chart.update();
+
+  fullSizeChart.data.datasets = datasets;
+  fullSizeChart.data.labels = labels;
+  fullSizeChart.update();
 }
 
 window.addEventListener("load", () => {

src/main.ts

@@ -31,6 +31,10 @@ const ctx = document.getElementById(
   "compounding-interest-chart"
 ) as HTMLCanvasElement;
 
+const fullSizeCtx = document.getElementById(
+  "full-size-chart"
+) as HTMLCanvasElement;
+
 const getOrCreateLegendList = (_chart: Chart, id: string) => {
   const legendContainer = document.getElementById(id) as HTMLDivElement;
   let listContainer = legendContainer.querySelector("ul");
@@ -166,4 +170,51 @@ const chart = new Chart(ctx, {
   },
 } as ChartConfiguration);
 
+export const fullSizeChart = new Chart(fullSizeCtx, {
+  type: "line",
+  data: {
+    labels: months(),
+    datasets: [
+      {
+        label: "Kỳ hạn n (i%)",
+        data: [0],
+      },
+    ],
+  },
+  plugins: [htmlLegendPlugin],
+  options: {
+    maintainAspectRatio: true,
+    aspectRatio: 2 / 1,
+    scales: {
+      y: {
+        ticks: {
+          callback: function (value, _index, _ticks) {
+            return numeral(value).format("(0a)");
+          },
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        position: "bottom",
+        labels: {
+          font: {
+            size: 12,
+          },
+        },
+      },
+      htmlLegend: {
+        containerID: "legend-container",
+      },
+      title: {
+        display: true,
+        text: "LÃI KÉP",
+        font: {
+          size: 24,
+        },
+      },
+    },
+  },
+} as ChartConfiguration);
+
 export default chart;