Uplot Test

1
<script setup lang="ts">
2
import { $theme } from '@/store/system.ts';
3
import { useStore } from '@nanostores/vue';
4
import dayjs from 'dayjs';
5
import Uplot from 'uplot';
6
import { onMounted, onUnmounted, ref, watch } from 'vue';
7

8
import { base, defaultTimeAxes, makeNoiseData } from './chartOptionData';
9
import { toolTipCloset } from './tooltipCloset';
10
import 'uplot/dist/uPlot.min.css';
11

12
const theme = useStore($theme);
13

14
const chartRef = ref<HTMLDivElement>();
15
const chartContainer = ref<HTMLDivElement>();
16
const chart = ref<Uplot>();
17
const canvasWidth = ref(100);
18

19
let interval: number | null = null;
20
let resizeObserver: ResizeObserver | null = null;
21

22
const data = ref<[number[], number[], number[], number[]]>([[], [], [], []]);
23
const options = ref<Uplot.Options>({
24
  ...base,
25
  width: canvasWidth.value,
26
  height: 600,
27
  scales: {
28
    '%': {
29
      auto: false,
30
      range: (min, max) => [0, 100],
31
    },
32
  },
33
  plugins: [
34
    toolTipCloset({
35
      Uplot,
36
      darkMode: true,
37
    }),
38
  ],
39
  series: [
40
    {},
41
    {
42
      label: 'CPU',
43
      scale: '%',
44
      value: (u, v) => v == null ? '' : `${v.toFixed(2)}%`,
45
      stroke: 'red',
46
    },
47
    {
48
      label: 'RAM',
49
      scale: '%',
50
      value: (u, v) => v == null ? '' : `${v.toFixed(2)}%`,
51
      stroke: 'blue',
52
    },
53
    {
54
      label: 'Disk',
55
      scale: '%',
56
      value: (u, v) => v == null ? '' : `${v.toFixed(2)} %`,
57
      stroke: 'green',
58
    },
59
  ],
60
});
61

62
onMounted(() => {
63
  resizeObserver = new ResizeObserver((entries) => {
64
    for (const entry of entries) {
65
      canvasWidth.value = entry.contentRect.width;
66
    }
67
  });
68

69
  if (chartContainer.value) {
70
    resizeObserver.observe(chartContainer.value);
71
  }
72

73
  const worker = new Worker(new URL('./sampleChart.worker?worker', import.meta.url), {
74
    type: 'module',
75
  });
76

77
  worker.onmessage = (event) => {
78
    data.value = event.data.res as [number[], number[], number[], number[]];
79
    let cpu = event.data.cpu;
80
    let ram = event.data.ram;
81
    let disk = event.data.disk;
82

83
    const maxValue1 = 3000;
84
    const maxValue2 = 5000;
85
    const maxValue3 = 8000;
86
    const totalSteps = dayjs().endOf('day').unix() - dayjs().startOf('day').unix();
87

88
    options.value.axes = [
89
      { ...defaultTimeAxes },
90
      {
91
        scale: '%',
92
        values: (u, vals, space) => vals.map((v) => `${+v.toFixed(1)}%`),
93
      },
94
    ];
95

96
    canvasWidth.value = chartContainer.value?.clientWidth ?? 800;
97

98
    makeChart();
99

100
    interval = setInterval(() => {
101
      cpu = makeNoiseData(cpu, maxValue1, totalSteps);
102
      ram = makeNoiseData(ram, maxValue2, totalSteps);
103
      disk = makeNoiseData(disk, maxValue3, totalSteps);
104
      data.value[1].push(cpu / 100);
105
      data.value[2].push(ram / 100);
106
      data.value[3].push(disk / 100);
107

108
      chart.value?.setData(data.value);
109
      chart.value?.redraw();
110
    }, 1000) as unknown as number;
111
  };
112

113
  worker.postMessage({});
114
});
115

116
onUnmounted(() => {
117
  if (interval) {
118
    clearInterval(interval);
119
  }
120
  resizeObserver?.disconnect();
121
});
122

123
watch(theme, () => {
124
}, { immediate: false });
125

126
watch(canvasWidth, () => {
127
  chart.value?.setSize({ width: canvasWidth.value, height: 600 });
128
}, { immediate: false });
129

130
function makeChart() {
131
  if (!options.value?.axes)
132
    return;
133

134
  options.value.axes[0].stroke = theme.value === 'dark' ? 'white' : 'black';
135
  options.value.axes[0].grid = { stroke: theme.value === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' };
136
  options.value.axes[1].stroke = theme.value === 'dark' ? 'white' : 'black';
137
  options.value.axes[1].grid = { stroke: theme.value === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' };
138
  chart.value = new Uplot(options.value, data.value, chartRef.value);
139
}
140
</script>
141

142
<template>
143
  <div id="chart-container" ref="chartContainer" class="flex justify-center">
144
    <div ref="chartRef" />
145
  </div>
146
</template>

1
/* eslint-disable no-restricted-globals */
2
import dayjs from 'dayjs';
3
import { makeNoiseData } from './chartOptionData';
4

5
self.addEventListener('message', () => {
6
  const res = [
7
    [],
8
    [],
9
    [],
10
    [],
11
  ];
12
  const start = dayjs().startOf('day').unix();
13
  const end = dayjs().unix();
14

15
  let cpu = 100; // 시작 값
16
  let ram = 3000;
17
  let disk = 6000;
18
  const maxValue1 = 3000; // 최대 값
19
  const maxValue2 = 5000;
20
  const maxValue3 = 8000;
21
  const totalSteps = dayjs().endOf('day').unix() - start;
22

23
  for (let i = start; i <= end; i += 1) {
24
    cpu = makeNoiseData(cpu, maxValue1, totalSteps);
25
    ram = makeNoiseData(ram, maxValue2, totalSteps);
26
    disk = makeNoiseData(disk, maxValue3, totalSteps);
27

28
    res[0].push(i);
29
    res[1].push(cpu / 100);
30
    res[2].push(ram / 100);
31
    res[3].push(disk / 100);
32
  }
33
  for (let i = end; i < dayjs().endOf('day').unix(); i += 1) {
34
    res[0].push(i);
35
  }
36

37
  self.postMessage({ res, cpu, ram, disk });
38
});