12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <script setup lang="ts">
- import { PropType, computed } from "vue";
- import { Line } from "vue-chartjs";
- import {
- Chart as ChartJS,
- Title,
- Tooltip,
- Legend,
- LineElement,
- PointElement,
- CategoryScale,
- LinearScale,
- LineController,
- Plugin
- } from "chart.js";
- ChartJS.register(
- Title,
- Tooltip,
- Legend,
- LineElement,
- PointElement,
- CategoryScale,
- LinearScale,
- LineController
- );
- 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 as PropType<Partial<CSSStyleDeclaration>>,
- default: () => {}
- },
- plugins: { type: Object as PropType<Plugin<"line">[]>, default: () => {} },
- data: { type: Object as PropType<any>, default: () => {} },
- options: { type: Object, default: () => {} }
- });
- const chartStyles = computed(() => ({
- position: "relative",
- height: `${props.height}px`,
- "max-height": `${props.height}px`,
- ...props.styles
- }));
- const chartOptions = computed(() => ({
- responsive: true,
- maintainAspectRatio: false,
- resizeDelay: 10,
- ...props.options
- }));
- </script>
- <template>
- <Line
- :ref="`chart-${chartId}`"
- :options="chartOptions"
- :data="data"
- :chart-id="chartId"
- :dataset-id-key="datasetIdKey"
- :plugins="plugins"
- :css-classes="cssClasses"
- :style="chartStyles"
- :width="width"
- :height="height"
- />
- </template>
|