summaryrefslogtreecommitdiff
path: root/packages/client/src/pages/admin/overview.queue.chart.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/pages/admin/overview.queue.chart.vue')
-rw-r--r--packages/client/src/pages/admin/overview.queue.chart.vue186
1 files changed, 0 insertions, 186 deletions
diff --git a/packages/client/src/pages/admin/overview.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
deleted file mode 100644
index 1e095bddaa..0000000000
--- a/packages/client/src/pages/admin/overview.queue.chart.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-<canvas ref="chartEl"></canvas>
-</template>
-
-<script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref } from 'vue';
-import {
- Chart,
- ArcElement,
- LineElement,
- BarElement,
- PointElement,
- BarController,
- LineController,
- CategoryScale,
- LinearScale,
- TimeScale,
- Legend,
- Title,
- Tooltip,
- SubTitle,
- Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-
-Chart.register(
- ArcElement,
- LineElement,
- BarElement,
- PointElement,
- BarController,
- LineController,
- CategoryScale,
- LinearScale,
- TimeScale,
- Legend,
- Title,
- Tooltip,
- SubTitle,
- Filler,
-);
-
-const props = defineProps<{
- type: string;
-}>();
-
-const alpha = (hex, a) => {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
- const r = parseInt(result[1], 16);
- const g = parseInt(result[2], 16);
- const b = parseInt(result[3], 16);
- return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
-
-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');
-
-const { handler: externalTooltipHandler } = useChartTooltip();
-
-let chartInstance: Chart;
-
-function setData(values) {
- if (chartInstance == null) return;
- for (const value of values) {
- chartInstance.data.labels.push('');
- chartInstance.data.datasets[0].data.push(value);
- if (chartInstance.data.datasets[0].data.length > 100) {
- chartInstance.data.labels.shift();
- chartInstance.data.datasets[0].data.shift();
- }
- }
- chartInstance.update();
-}
-
-function pushData(value) {
- if (chartInstance == null) return;
- chartInstance.data.labels.push('');
- chartInstance.data.datasets[0].data.push(value);
- if (chartInstance.data.datasets[0].data.length > 100) {
- chartInstance.data.labels.shift();
- chartInstance.data.datasets[0].data.shift();
- }
- chartInstance.update();
-}
-
-const label =
- props.type === 'process' ? 'Process' :
- props.type === 'active' ? 'Active' :
- props.type === 'delayed' ? 'Delayed' :
- props.type === 'waiting' ? 'Waiting' :
- '?' as never;
-
-const color =
- props.type === 'process' ? '#00E396' :
- props.type === 'active' ? '#00BCD4' :
- props.type === 'delayed' ? '#E53935' :
- props.type === 'waiting' ? '#FFB300' :
- '?' as never;
-
-onMounted(() => {
- const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-
- chartInstance = new Chart(chartEl.value, {
- type: 'line',
- data: {
- labels: [],
- datasets: [{
- label: label,
- pointRadius: 0,
- tension: 0.3,
- borderWidth: 2,
- borderJoinStyle: 'round',
- borderColor: color,
- backgroundColor: alpha(color, 0.2),
- fill: true,
- data: [],
- }],
- },
- options: {
- aspectRatio: 2.5,
- layout: {
- padding: {
- left: 0,
- right: 0,
- top: 0,
- bottom: 0,
- },
- },
- scales: {
- x: {
- grid: {
- display: false,
- color: gridColor,
- borderColor: 'rgb(0, 0, 0, 0)',
- },
- ticks: {
- display: false,
- maxTicksLimit: 10,
- },
- },
- y: {
- min: 0,
- grid: {
- color: gridColor,
- borderColor: 'rgb(0, 0, 0, 0)',
- },
- },
- },
- interaction: {
- intersect: false,
- },
- plugins: {
- legend: {
- display: false,
- },
- tooltip: {
- enabled: false,
- mode: 'index',
- animation: {
- duration: 0,
- },
- external: externalTooltipHandler,
- },
- },
- },
- plugins: [chartVLine(vLineColor)],
- });
-});
-
-defineExpose({
- setData,
- pushData,
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>