StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.4 KiB
95 lines
2.4 KiB
import Chart from 'chart.js';
|
|
export function generateChart(chartId, chartType) {
|
|
return {
|
|
render: function render(createElement) {
|
|
return createElement('div', {
|
|
style: this.styles,
|
|
class: this.cssClasses
|
|
}, [createElement('canvas', {
|
|
attrs: {
|
|
id: this.chartId,
|
|
width: this.width,
|
|
height: this.height
|
|
},
|
|
ref: 'canvas'
|
|
})]);
|
|
},
|
|
props: {
|
|
chartId: {
|
|
default: chartId,
|
|
type: String
|
|
},
|
|
width: {
|
|
default: 400,
|
|
type: Number
|
|
},
|
|
height: {
|
|
default: 400,
|
|
type: Number
|
|
},
|
|
cssClasses: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
styles: {
|
|
type: Object
|
|
},
|
|
plugins: {
|
|
type: Array,
|
|
default: function _default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
_chart: null,
|
|
_plugins: this.plugins
|
|
};
|
|
},
|
|
methods: {
|
|
addPlugin: function addPlugin(plugin) {
|
|
this.$data._plugins.push(plugin);
|
|
},
|
|
generateLegend: function generateLegend() {
|
|
if (this.$data._chart) {
|
|
return this.$data._chart.generateLegend();
|
|
}
|
|
},
|
|
renderChart: function renderChart(data, options) {
|
|
if (this.$data._chart) this.$data._chart.destroy();
|
|
this.$data._chart = new Chart(this.$refs.canvas.getContext('2d'), {
|
|
type: chartType,
|
|
data: data,
|
|
options: options,
|
|
plugins: this.$data._plugins
|
|
});
|
|
}
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
if (this.$data._chart) {
|
|
this.$data._chart.destroy();
|
|
}
|
|
}
|
|
};
|
|
}
|
|
export var Bar = generateChart('bar-chart', 'bar');
|
|
export var HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar');
|
|
export var Doughnut = generateChart('doughnut-chart', 'doughnut');
|
|
export var Line = generateChart('line-chart', 'line');
|
|
export var Pie = generateChart('pie-chart', 'pie');
|
|
export var PolarArea = generateChart('polar-chart', 'polarArea');
|
|
export var Radar = generateChart('radar-chart', 'radar');
|
|
export var Bubble = generateChart('bubble-chart', 'bubble');
|
|
export var Scatter = generateChart('scatter-chart', 'scatter');
|
|
export default {
|
|
Bar: Bar,
|
|
HorizontalBar: HorizontalBar,
|
|
Doughnut: Doughnut,
|
|
Line: Line,
|
|
Pie: Pie,
|
|
PolarArea: PolarArea,
|
|
Radar: Radar,
|
|
Bubble: Bubble,
|
|
Scatter: Scatter
|
|
}; |