refactor queue chart to composition API
This commit is contained in:
parent
63591da33e
commit
3e05740bee
GPG key ID:
9EE6577A2A06F8F1
1 changed files with 154 additions and 171 deletions
|
|
@ -2,8 +2,8 @@
|
|||
<canvas ref="chartEl"></canvas>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import {
|
||||
Chart,
|
||||
ArcElement,
|
||||
|
|
@ -42,183 +42,166 @@ Chart.register(
|
|||
Filler,
|
||||
);
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
domain: {
|
||||
type: String,
|
||||
required: true,
|
||||
const props = defineProps<{
|
||||
domain: string,
|
||||
connection: any,
|
||||
}>();
|
||||
|
||||
const chartEl = ref<HTMLCanvasElement>(null);
|
||||
|
||||
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||
|
||||
// フォントカラー
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
|
||||
onMounted(() => {
|
||||
const chartInstance = new Chart(chartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Process',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#00E396',
|
||||
backgroundColor: '#00E3961A',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Active',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#00BCD4',
|
||||
backgroundColor: '#00BCD41A',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Waiting',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#FFB300',
|
||||
backgroundColor: '#FFB3001A',
|
||||
yAxisID: 'y2',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Delayed',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#E53935',
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
yAxisID: 'y2',
|
||||
data: []
|
||||
}],
|
||||
},
|
||||
connection: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const chartEl = ref<HTMLCanvasElement>(null);
|
||||
|
||||
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||
|
||||
// フォントカラー
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
|
||||
onMounted(() => {
|
||||
const chartInstance = new Chart(chartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Process',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#00E396',
|
||||
backgroundColor: '#00E3961A',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Active',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#00BCD4',
|
||||
backgroundColor: '#00BCD41A',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Waiting',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#FFB300',
|
||||
backgroundColor: '#FFB3001A',
|
||||
yAxisID: 'y2',
|
||||
data: []
|
||||
}, {
|
||||
label: 'Delayed',
|
||||
pointRadius: 0,
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
borderJoinStyle: 'round',
|
||||
borderColor: '#E53935',
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
yAxisID: 'y2',
|
||||
data: []
|
||||
}],
|
||||
options: {
|
||||
aspectRatio: 2.5,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 16,
|
||||
bottom: 8,
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 2.5,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 16,
|
||||
bottom: 8,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
maxTicksLimit: 10
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
stack: 'queue',
|
||||
stackWeight: 2,
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
},
|
||||
y2: {
|
||||
min: 0,
|
||||
offset: true,
|
||||
stack: 'queue',
|
||||
stackWeight: 1,
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
animation: {
|
||||
duration: 0,
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
maxTicksLimit: 10
|
||||
},
|
||||
},
|
||||
});
|
||||
y: {
|
||||
min: 0,
|
||||
stack: 'queue',
|
||||
stackWeight: 2,
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
},
|
||||
y2: {
|
||||
min: 0,
|
||||
offset: true,
|
||||
stack: 'queue',
|
||||
stackWeight: 1,
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: '#0000',
|
||||
},
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
boxWidth: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
animation: {
|
||||
duration: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const onStats = (stats) => {
|
||||
chartInstance.data.labels.push('');
|
||||
chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
|
||||
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
||||
if (chartInstance.data.datasets[0].data.length > 200) {
|
||||
chartInstance.data.labels.shift();
|
||||
chartInstance.data.datasets[0].data.shift();
|
||||
chartInstance.data.datasets[1].data.shift();
|
||||
chartInstance.data.datasets[2].data.shift();
|
||||
chartInstance.data.datasets[3].data.shift();
|
||||
}
|
||||
chartInstance.update();
|
||||
};
|
||||
const onStats = (stats) => {
|
||||
chartInstance.data.labels.push('');
|
||||
chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
|
||||
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
||||
if (chartInstance.data.datasets[0].data.length > 200) {
|
||||
chartInstance.data.labels.shift();
|
||||
chartInstance.data.datasets[0].data.shift();
|
||||
chartInstance.data.datasets[1].data.shift();
|
||||
chartInstance.data.datasets[2].data.shift();
|
||||
chartInstance.data.datasets[3].data.shift();
|
||||
}
|
||||
chartInstance.update();
|
||||
};
|
||||
|
||||
const onStatsLog = (statsLog) => {
|
||||
for (const stats of [...statsLog].reverse()) {
|
||||
chartInstance.data.labels.push('');
|
||||
chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
|
||||
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
||||
if (chartInstance.data.datasets[0].data.length > 200) {
|
||||
chartInstance.data.labels.shift();
|
||||
chartInstance.data.datasets[0].data.shift();
|
||||
chartInstance.data.datasets[1].data.shift();
|
||||
chartInstance.data.datasets[2].data.shift();
|
||||
chartInstance.data.datasets[3].data.shift();
|
||||
}
|
||||
}
|
||||
chartInstance.update();
|
||||
};
|
||||
const onStatsLog = (statsLog) => {
|
||||
for (const stats of [...statsLog].reverse()) {
|
||||
chartInstance.data.labels.push('');
|
||||
chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
|
||||
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
||||
if (chartInstance.data.datasets[0].data.length > 200) {
|
||||
chartInstance.data.labels.shift();
|
||||
chartInstance.data.datasets[0].data.shift();
|
||||
chartInstance.data.datasets[1].data.shift();
|
||||
chartInstance.data.datasets[2].data.shift();
|
||||
chartInstance.data.datasets[3].data.shift();
|
||||
}
|
||||
}
|
||||
chartInstance.update();
|
||||
};
|
||||
|
||||
props.connection.on('stats', onStats);
|
||||
props.connection.on('statsLog', onStatsLog);
|
||||
props.connection.on('stats', onStats);
|
||||
props.connection.on('statsLog', onStatsLog);
|
||||
|
||||
onUnmounted(() => {
|
||||
props.connection.off('stats', onStats);
|
||||
props.connection.off('statsLog', onStatsLog);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
chartEl,
|
||||
};
|
||||
},
|
||||
onUnmounted(() => {
|
||||
props.connection.off('stats', onStats);
|
||||
props.connection.off('statsLog', onStatsLog);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue