helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor queue chart to composition API

Browse source
This commit is contained in:
Johann150 2022-07-23 23:03:20 +02:00
parent 63591da33e
commit 3e05740bee
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 154 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/client/src/components/queue-chart.vue
View file

@ -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,26 +42,19 @@ Chart.register(
Filler,
);
export default defineComponent({
props: {
domain: {
type: String,
required: true,
},
connection: {
required: true,
},
},
const props = defineProps<{
domain: string,
connection: any,
}>();
setup(props) {
const chartEl = ref<HTMLCanvasElement>(null);
const chartEl = ref<HTMLCanvasElement>(null);
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
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');
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
onMounted(() => {
onMounted(() => {
const chartInstance = new Chart(chartEl.value, {
type: 'line',
data: {
@ -210,15 +203,5 @@ export default defineComponent({
props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog);
});
});
return {
chartEl,
};
},
});
</script>
<style lang="scss" scoped>
</style>