summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkMiniChart.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkMiniChart.vue')
-rw-r--r--packages/client/src/components/MkMiniChart.vue73
1 files changed, 0 insertions, 73 deletions
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MkMiniChart.vue
deleted file mode 100644
index c64ce163f9..0000000000
--- a/packages/client/src/components/MkMiniChart.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
- <defs>
- <linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
- <stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
- <stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
- </linearGradient>
- </defs>
- <polygon
- :points="polygonPoints"
- :style="`stroke: none; fill: url(#${ gradientId });`"
- />
- <polyline
- :points="polylinePoints"
- fill="none"
- :stroke="color"
- stroke-width="2"
- />
- <circle
- :cx="headX"
- :cy="headY"
- r="3"
- :fill="color"
- />
-</svg>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import tinycolor from 'tinycolor2';
-import { useInterval } from '@/scripts/use-interval';
-
-const props = defineProps<{
- src: number[];
-}>();
-
-const viewBoxX = 50;
-const viewBoxY = 50;
-const gradientId = uuid();
-let polylinePoints = $ref('');
-let polygonPoints = $ref('');
-let headX = $ref<number | null>(null);
-let headY = $ref<number | null>(null);
-let clock = $ref<number | null>(null);
-const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
-const color = accent.toRgbString();
-
-function draw(): void {
- const stats = props.src.slice().reverse();
- const peak = Math.max.apply(null, stats) || 1;
-
- const _polylinePoints = stats.map((n, i) => [
- i * (viewBoxX / (stats.length - 1)),
- (1 - (n / peak)) * viewBoxY,
- ]);
-
- polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
- polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
-
- headX = _polylinePoints[_polylinePoints.length - 1][0];
- headY = _polylinePoints[_polylinePoints.length - 1][1];
-}
-
-watch(() => props.src, draw, { immediate: true });
-
-// Vueが何故かWatchを発動させない場合があるので
-useInterval(draw, 1000, {
- immediate: false,
- afterMounted: true,
-});
-</script>