76 lines
1.5 KiB
TypeScript
76 lines
1.5 KiB
TypeScript
import { defineComponent, h, PropType } from 'vue';
|
|
|
|
import { Bar } from 'vue-chartjs';
|
|
|
|
import {
|
|
Chart as ChartJS,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
BarElement,
|
|
CategoryScale,
|
|
LinearScale,
|
|
Plugin,
|
|
} from 'chart.js';
|
|
|
|
ChartJS.register(
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
BarElement,
|
|
CategoryScale,
|
|
LinearScale
|
|
);
|
|
|
|
export default defineComponent({
|
|
name: 'BarChart',
|
|
components: {
|
|
Bar,
|
|
},
|
|
props: {
|
|
chartId: {
|
|
type: String,
|
|
default: 'bar-chart',
|
|
},
|
|
chartData: {
|
|
type: Object,
|
|
},
|
|
chartOptions: {
|
|
type: Object,
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 400,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 400,
|
|
},
|
|
cssClasses: {
|
|
default: '',
|
|
type: String,
|
|
},
|
|
styles: {
|
|
type: Object as PropType<Partial<CSSStyleDeclaration>>,
|
|
default: () => {},
|
|
},
|
|
plugins: {
|
|
type: Array as PropType<Plugin<'bar'>[]>,
|
|
default: () => [],
|
|
},
|
|
},
|
|
setup(props) {
|
|
return () =>
|
|
h(Bar, {
|
|
chartData: props.chartData,
|
|
chartOptions: props.chartOptions,
|
|
chartId: props.chartId,
|
|
width: props.width,
|
|
height: props.height,
|
|
cssClasses: props.cssClasses,
|
|
styles: props.styles,
|
|
plugins: props.plugins,
|
|
});
|
|
},
|
|
});
|