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> <canvas ref="chartEl"></canvas>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import { import {
Chart, Chart,
ArcElement, ArcElement,
@ -42,26 +42,19 @@ Chart.register(
Filler, Filler,
); );
export default defineComponent({ const props = defineProps<{
props: { domain: string,
domain: { connection: any,
type: String, }>();
required: true,
},
connection: {
required: true,
},
},
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, { const chartInstance = new Chart(chartEl.value, {
type: 'line', type: 'line',
data: { data: {
@ -210,15 +203,5 @@ export default defineComponent({
props.connection.off('stats', onStats); props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog); props.connection.off('statsLog', onStatsLog);
}); });
});
return {
chartEl,
};
},
}); });
</script> </script>
<style lang="scss" scoped>
</style>