89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
/** @odoo-module **/
|
|
|
|
import { registry } from "@web/core/registry";
|
|
import { useService } from "@web/core/utils/hooks";
|
|
import { BasePreview } from "./base_preview";
|
|
import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
|
|
|
|
const { Component, onMounted, onWillUnmount, onPatched, useRef} = owl;
|
|
|
|
export class ChartPreview extends Component {
|
|
static template = 'ks_dashboard_ninja.chartPreview';
|
|
static props = {...standardWidgetProps};
|
|
|
|
setup() {
|
|
this.chartIns = null;
|
|
this.chartCtx = useRef('chartCtx');
|
|
this.chartTypeMap = new Map([
|
|
['ks_pie_chart', 'pie'],
|
|
['ks_bar_chart', 'bar'],
|
|
['ks_line_chart', 'line'],
|
|
['ks_horizontalBar_chart', 'bar'],
|
|
['ks_area_chart', 'line'],
|
|
['ks_doughnut_chart', 'doughnut'],
|
|
['ks_polarArea_chart', 'polarArea'],
|
|
['ks_radialBar_chart', 'radar'],
|
|
['ks_scatter_chart', 'scatter'],
|
|
['ks_funnel_chart', 'bar'],
|
|
['ks_bullet_chart', 'bar'],
|
|
// ['ks_radar_view', 'radar'],
|
|
// ['ks_flower_view', 'flower'],
|
|
])
|
|
|
|
onMounted(() => {
|
|
this.renderChart(this.chartCtx.el)
|
|
})
|
|
|
|
onPatched(() => {
|
|
if (this.chartIns){
|
|
this.chartIns.destroy();
|
|
}
|
|
this.renderChart(this.chartCtx.el);
|
|
})
|
|
|
|
onWillUnmount(() => {
|
|
if (this.chartIns) {
|
|
this.chartIns.destroy();
|
|
}
|
|
})
|
|
}
|
|
|
|
setChartData() {
|
|
this.chartData = JSON.parse(this.props.record.data.ks_chart_data);
|
|
this.data = {
|
|
labels: this.chartData.labels ?? [],
|
|
datasets: this.chartData.datasets ?? '',
|
|
}
|
|
this.options = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
},
|
|
indexAxis: 'x',
|
|
}
|
|
if (this.ks_type === 'ks_horizontalBar_chart') {
|
|
this.options.indexAxis ='y';
|
|
}
|
|
if (this.props.record.data.ks_semi_circle_chart && ["pie", "doughnut"].includes(this.ks_type)) {
|
|
this.options.rotation = Math.PI;
|
|
this.options.circumference = Math.PI;
|
|
}
|
|
}
|
|
|
|
renderChart(ctx) {
|
|
this.ks_type = this.props.record.data.ks_dashboard_item_type;
|
|
this.setChartData();
|
|
this.chartIns = new Chart(ctx, {
|
|
type: this.chartTypeMap.get(this.ks_type),
|
|
data: this.data,
|
|
options: this.options
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
registry.category("view_widgets").add("chart_preview", {
|
|
component: ChartPreview,
|
|
}); |