|
@@ -1,19 +1,5 @@
|
|
|
-<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>
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed } from "vue";
|
|
|
import { Line } from "vue-chartjs";
|
|
|
import {
|
|
|
Chart as ChartJS,
|
|
@@ -38,64 +24,42 @@ ChartJS.register(
|
|
|
LineController
|
|
|
);
|
|
|
|
|
|
-export default {
|
|
|
- name: "LineChart",
|
|
|
- // eslint-disable-next-line vue/no-reserved-component-names
|
|
|
- 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
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+const props = defineProps({
|
|
|
+ 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: () => {} }
|
|
|
+});
|
|
|
+
|
|
|
+const chartStyles = computed(() => ({
|
|
|
+ position: "relative",
|
|
|
+ height: props.height,
|
|
|
+ ...props.styles
|
|
|
+}));
|
|
|
+const chartOptions = computed(() => ({
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ resizeDelay: 10,
|
|
|
+ ...props.options
|
|
|
+}));
|
|
|
</script>
|
|
|
+
|
|
|
+<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>
|