diff --git a/backend/package.json b/backend/package.json
index 40de53489f470dbc9847ce1a82e8b6388bf8e270..4d5dabb51e35166cacd7da6c366113d7bda187f8 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -15,6 +15,7 @@
"chai": "^4.3.0",
"chai-as-promised": "^7.1.1",
"chai-http": "^4.3.0",
+ "chart.js": "^3.0.2",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2b61b803b256a42b09ed4ecff30c0634a35c3fba..3bcab11ed33ec8200d55989fe790e4650230b13c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1088,6 +1088,11 @@
"postcss": "^7.0.0"
}
},
+ "@j-t-mcc/vue3-chartjs": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@j-t-mcc/vue3-chartjs/-/vue3-chartjs-0.3.0.tgz",
+ "integrity": "sha512-3/JhMRpG8CNmXHaG3JXY3978KG3o8YWrAYhLBu8PnjfKYB0hlVVb5OUtA2eKLqvEG8AVE6HpC8EKqB/XsK8MLQ=="
+ },
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1748,16 +1753,6 @@
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true
},
- "ansi-styles": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
- "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
- "optional": true,
- "requires": {
- "color-convert": "^2.0.1"
- }
- },
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1784,34 +1779,6 @@
"unique-filename": "^1.1.1"
}
},
- "chalk": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
- "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
- "dev": true,
- "optional": true,
- "requires": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- }
- },
- "color-convert": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
- "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "color-name": "~1.1.4"
- }
- },
- "color-name": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true,
- "optional": true
- },
"fs-extra": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -1823,25 +1790,6 @@
"universalify": "^0.1.0"
}
},
- "has-flag": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true,
- "optional": true
- },
- "loader-utils": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
- "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "big.js": "^5.2.2",
- "emojis-list": "^3.0.0",
- "json5": "^2.1.2"
- }
- },
"ssri": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz",
@@ -1852,16 +1800,6 @@
"minipass": "^3.1.1"
}
},
- "supports-color": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
- "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
- "optional": true,
- "requires": {
- "has-flag": "^4.0.0"
- }
- },
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1878,18 +1816,6 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
- },
- "vue-loader-v16": {
- "version": "npm:vue-loader@16.2.0",
- "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
- "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
- "dev": true,
- "optional": true,
- "requires": {
- "chalk": "^4.1.0",
- "hash-sum": "^2.0.0",
- "loader-utils": "^2.0.0"
- }
}
}
},
@@ -3325,6 +3251,32 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "chart.js": {
+ "version": "2.9.4",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+ "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+ "requires": {
+ "chartjs-color": "^2.1.0",
+ "moment": "^2.10.2"
+ }
+ },
+ "chartjs-color": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+ "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+ "requires": {
+ "chartjs-color-string": "^0.6.0",
+ "color-convert": "^1.9.3"
+ }
+ },
+ "chartjs-color-string": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+ "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+ "requires": {
+ "color-name": "^1.0.0"
+ }
+ },
"check-types": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -3728,7 +3680,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -3736,8 +3687,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
- "dev": true
+ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.4",
@@ -8649,6 +8599,11 @@
"minimist": "^1.2.5"
}
},
+ "moment": {
+ "version": "2.29.1",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+ "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+ },
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12836,6 +12791,87 @@
}
}
},
+ "vue-loader-v16": {
+ "version": "npm:vue-loader@16.2.0",
+ "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+ "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "chalk": "^4.1.0",
+ "hash-sum": "^2.0.0",
+ "loader-utils": "^2.0.0"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "chalk": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+ "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true,
+ "optional": true
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true,
+ "optional": true
+ },
+ "loader-utils": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+ "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
"vue-router": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6cfd88ca8a5f68cc845cd2f3d27aa50078d5dc8a..e34804bc9602a1ca84542ac808a9773d0cd236c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,10 +8,12 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "@j-t-mcc/vue3-chartjs": "^0.3.0",
"@popperjs/core": "^2.9.1",
"aos": "^2.3.4",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
+ "chart.js": "^2.9.0",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
diff --git a/frontend/src/views/StudyProgression/Chart.vue b/frontend/src/views/StudyProgression/Chart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c33760b877c55d64c4365270728f1603afc96a25
--- /dev/null
+++ b/frontend/src/views/StudyProgression/Chart.vue
@@ -0,0 +1,12 @@
+<script>
+import { Line } from "vue-chartjs";
+Line.defaults.global.legend.display = false;
+
+export default {
+ extends: Line,
+ props: ["data", "options"],
+ mounted() {
+ this.renderChart(this.data, this.options);
+ }
+};
+</script>
diff --git a/frontend/src/views/StudyProgression/StudyProgression.scss b/frontend/src/views/StudyProgression/StudyProgression.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..61bb43c5d26dd1053382292a45a4c5185a4213c0 100644
--- a/frontend/src/views/StudyProgression/StudyProgression.scss
+++ b/frontend/src/views/StudyProgression/StudyProgression.scss
@@ -0,0 +1,31 @@
+.container-study-progression {
+ .no-border {
+ border-top: 0cm;
+ margin-bottom: 20px;
+ padding: 0px;
+ }
+ .title-no-border {
+ color: #8bbfe2;
+ padding-bottom: 0rem;
+ }
+ .card-body-no-border {
+ padding: 0rem;
+ }
+ .body-no-border {
+ display: inline;
+ }
+ .table-transcript {
+ margin: 0cm;
+ }
+ .block_container {
+ display: inline-block;
+ justify-content: center;
+ }
+ .card-graph {
+ margin-bottom: 20px;
+ }
+}
+
+canvas {
+ margin: 18px 0px;
+}
diff --git a/frontend/src/views/StudyProgression/StudyProgression.vue b/frontend/src/views/StudyProgression/StudyProgression.vue
index f8949999589a6b96acbb2cc94f9814fd2fe9b7cc..aef2fae77dd5109b6b274dc22634ea904ae0a7f7 100644
--- a/frontend/src/views/StudyProgression/StudyProgression.vue
+++ b/frontend/src/views/StudyProgression/StudyProgression.vue
@@ -3,19 +3,291 @@
<div class="col-auto p-0">
<sidebar />
</div>
- <div class="col-auto p-4 container-study-progression">
- <h1>Perkembangan Studi (Coming Soon)</h1>
- <!-- @TODO: code here -->
+ <div class="col p-4 container-study-progression">
+ <h1 data-aos="fade-down" data-aos-duration="1500" class="mb-4">
+ Perkembangan Studi
+ </h1>
+ <!-- container study progression -->
+ <div class="row">
+ <div class="col-md-4">
+ <!-- card IPK -->
+ <div
+ data-aos="fade-up"
+ data-aos-duration="500"
+ class="card p-3 no-border"
+ >
+ <div class="card-body-no-border">
+ <div class="row">
+ <div class="col">
+ <h3
+ data-aos="fade-in"
+ data-aos-offset="300"
+ data-aos-easing="ease-in-sine"
+ class="title-no-border"
+ >
+ IP & IPK
+ </h3>
+ <h1 class="text-blue-six" style="display:inline;">
+ 3.99 /
+ </h1>
+ <h3 class="text-blue-six" style="display:inline;">
+ 3.99
+ </h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- card NR -->
+ <div
+ data-aos="fade-up"
+ data-aos-duration="500"
+ class="card p-3 no-border"
+ >
+ <div class="card-body-no-border">
+ <div class="row">
+ <div class="col">
+ <h3
+ data-aos="fade-in"
+ data-aos-offset="300"
+ data-aos-easing="ease-in-sine"
+ class="title-no-border"
+ >
+ NR (1-2020/2021)
+ </h3>
+ <h1 class="text-blue-six" style="display:inline;">
+ 4.00 /
+ </h1>
+ <h3 class="text-blue-six" style="display:inline;">
+ 12 SKS
+ </h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- card credits pass -->
+ <div
+ data-aos="fade-up"
+ data-aos-duration="500"
+ class="card p-3 no-border"
+ >
+ <div class="card-body-no-border">
+ <div class="row">
+ <div class="col">
+ <h3
+ data-aos="fade-in"
+ data-aos-offset="300"
+ data-aos-easing="ease-in-sine"
+ class="title-no-border"
+ >
+ SKS LULUS
+ </h3>
+ <h1 class="text-blue-six" style="display:inline;">
+ 12 SKS /
+ </h1>
+ <h3 class="text-blue-six" style="display:inline;">
+ NILAI T 0 SKS
+ </h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- card graph -->
+ <div class="card-graph col-md-8">
+ <div data-aos="fade-up" data-aos-duration="500" class="card p-3">
+ <div class="card-body">
+ <div class="row">
+ <div class="col">
+ <vue3-chart-js
+ :id="chart.id"
+ :type="chart.type"
+ :options="chart.options"
+ :data="chart.data"
+ ></vue3-chart-js>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <!-- Transkrip Historis -->
+ <div class="col-md-12">
+ <div class="card p-3">
+ <div
+ data-aos="fade-in"
+ data-aos-offset="300"
+ data-aos-easing="ease-in-sine"
+ class="card-body"
+ >
+ <div class="row">
+ <div class="col"></div>
+ </div>
+ <div class="row">
+ <!-- Table 1 -->
+ <h3
+ data-aos="fade-in"
+ data-aos-offset="300"
+ data-aos-easing="ease-in-sine"
+ class="text-blue-six mb-4"
+ >
+ Transkrip Historis
+ </h3>
+ <!-- Table 1-->
+ <h5 class="title-no-border">
+ Semester 1 tahun 2019/2020
+ </h5>
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Kode</th>
+ <th scope="col">Mata Kuliah</th>
+ <th scope="col" class="text-center">SKS</th>
+ <th scope="col" class="text-center">Nilai</th>
+ <th scope="col" class="text-center">Semester</th>
+ <th scope="col" class="text-center">Masuk Transkrip</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>IF5122</td>
+ <td>Pembangunan Perangkat Lunak</td>
+ <td class="text-center">
+ 2
+ </td>
+ <td class="text-center">A</td>
+ <td class="text-center">
+ 1
+ </td>
+ <td class="text-center">
+ Sudah
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">1</th>
+ <td>IF5123</td>
+ <td>Kualitas Perangkat Lunak</td>
+ <td class="text-center">
+ 2
+ </td>
+ <td class="text-center">A</td>
+ <td class="text-center">
+ 1
+ </td>
+ <td class="text-center">
+ Sudah
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- Table 2-->
+ <h5 class="title-no-border">
+ Semester 2 tahun 2019/2020
+ </h5>
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Kode</th>
+ <th scope="col">Mata Kuliah</th>
+ <th scope="col" class="text-center">SKS</th>
+ <th scope="col" class="text-center">Nilai</th>
+ <th scope="col" class="text-center">Semester</th>
+ <th scope="col" class="text-center">Masuk Transkrip</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>IF5122</td>
+ <td>Pembangunan Perangkat Lunak</td>
+ <td class="text-center">
+ 2
+ </td>
+ <td class="text-center">A</td>
+ <td class="text-center">
+ 1
+ </td>
+ <td class="text-center">
+ Sudah
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">1</th>
+ <td>IF5123</td>
+ <td>Kualitas Perangkat Lunak</td>
+ <td class="text-center">
+ 2
+ </td>
+ <td class="text-center">A</td>
+ <td class="text-center">
+ 1
+ </td>
+ <td class="text-center">
+ Sudah
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
-
<script>
import Sidebar from "@/components/Sidebar/Sidebar";
+import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";
export default {
- components: { Sidebar },
- name: "StudyProgression"
+ components: { Sidebar, Vue3ChartJs },
+ name: "StudyProgression",
+ data() {
+ return {
+ chart: {
+ id: "ipkChart",
+ type: "line",
+ data: {
+ labels: ["1/2019", "2/2019", "1/2020", "2/2020"],
+ datasets: [
+ {
+ label: "IP",
+ data: [3, 3.5, 3, 4],
+ fill: false,
+ borderColor: "#1673B1",
+ tension: 0.1
+ }
+ ]
+ },
+ options: {
+ legend: {
+ display: false
+ },
+ scales: {
+ xAxes: [
+ {
+ gridLines: {
+ display: false
+ }
+ }
+ ],
+ yAxes: [
+ {
+ gridLines: {
+ display: true
+ }
+ }
+ ]
+ },
+ aspectRatio: 3
+ }
+ }
+ };
+ }
};
</script>