feat: Added basic line chart component using chart.js

frontend/package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@babel/runtime": "^7.17.9",
         "can-autoplay": "^3.0.2",
+        "chart.js": "^3.7.1",
         "config": "^3.3.7",
         "date-fns": "^2.28.0",
         "dompurify": "^2.3.6",
@@ -21,6 +22,7 @@
         "normalize.css": "^8.0.1",
         "toasters": "^2.3.1",
         "vue": "3.2.31",
+        "vue-chartjs": "^4.1.0",
         "vue-content-loader": "^2.0.1",
         "vue-json-pretty": "^2.1.0",
         "vue-loader": "^17.0.0",
@@ -2801,6 +2803,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -7704,6 +7711,15 @@
         "@vue/shared": "3.2.31"
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.0.tgz",
+      "integrity": "sha512-lHOs5vjb9dDdXz/0TbQWjJuL1/KOLT1tlvo+6b1M+JyyIQjeAf8K9IVsUhx8fdSIR4QD9CBELN/cYgYwKdiJ7g==",
+      "peerDependencies": {
+        "chart.js": "^3.7.0",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      }
+    },
     "node_modules/vue-content-loader": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",
@@ -10662,6 +10678,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+      "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -14365,6 +14386,12 @@
         }
       }
     },
+    "vue-chartjs": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.0.tgz",
+      "integrity": "sha512-lHOs5vjb9dDdXz/0TbQWjJuL1/KOLT1tlvo+6b1M+JyyIQjeAf8K9IVsUhx8fdSIR4QD9CBELN/cYgYwKdiJ7g==",
+      "requires": {}
+    },
     "vue-content-loader": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz",

frontend/package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "can-autoplay": "^3.0.2",
+    "chart.js": "^3.7.1",
     "config": "^3.3.7",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.6",
@@ -55,6 +56,7 @@
     "normalize.css": "^8.0.1",
     "toasters": "^2.3.1",
     "vue": "3.2.31",
+    "vue-chartjs": "^4.1.0",
     "vue-content-loader": "^2.0.1",
     "vue-json-pretty": "^2.1.0",
     "vue-loader": "^17.0.0",

frontend/src/components/LineChart.vue

@@ -0,0 +1,100 @@
+<template>
+	<Line
+		:ref="`chart-${chartId}`"
+		:chart-options="chartOptions"
+		:chart-data="data"
+		:chart-id="chartId"
+		:dataset-id-key="datasetIdKey"
+		:plugins="plugins"
+		:css-classes="cssClasses"
+		:styles="chartStyles"
+		:width="width"
+		:height="height"
+	/>
+</template>
+
+<script>
+import { Line } from "vue-chartjs";
+import {
+	Chart as ChartJS,
+	Title,
+	Tooltip,
+	Legend,
+	LineElement,
+	PointElement,
+	CategoryScale,
+	LinearScale,
+	LineController
+} from "chart.js";
+
+ChartJS.register(
+	Title,
+	Tooltip,
+	Legend,
+	LineElement,
+	PointElement,
+	CategoryScale,
+	LinearScale,
+	LineController
+);
+
+export default {
+	name: "LineChart",
+	components: { Line },
+	props: {
+		chartId: {
+			type: String,
+			default: "line-chart"
+		},
+		datasetIdKey: {
+			type: String,
+			default: "label"
+		},
+		width: {
+			type: Number,
+			default: 200
+		},
+		height: {
+			type: Number,
+			default: 200
+		},
+		cssClasses: {
+			default: "",
+			type: String
+		},
+		styles: {
+			type: Object,
+			default: () => {}
+		},
+		plugins: {
+			type: Object,
+			default: () => {}
+		},
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		options: {
+			type: Object,
+			default: () => {}
+		}
+	},
+	computed: {
+		chartStyles() {
+			return {
+				position: "relative",
+				height: this.height,
+				...this.styles
+			};
+		},
+		chartOptions() {
+			return {
+				responsive: true,
+				maintainAspectRatio: false,
+				resizeDelay: 10,
+				...this.options
+			};
+		}
+	}
+};
+</script>