feat: initial commit

src/components/temperature-bar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { RectConfig } from 'konva/lib/shapes/Rect'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { Layer, Rect } from 'vue-konva'
+
+const value = ref(50)
+const intervalId = ref<number | null>(null)
+
+const props = defineProps<{
+  x: number
+  y: number
+  width: number
+  height: number
+}>()
+
+const configBackground = computed(() => {
+  return {
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height,
+    fill: '#eee',
+    stroke: 'black',
+    strokeWidth: 1,
+    cornerRadius: 8,
+  } satisfies RectConfig
+})
+
+const configForeground = computed(() => {
+  const height = props.height * (value.value / 100.0)
+  let color = '#0f0'
+  if (value.value > 90) {
+    color = '#f00'
+  } else if (value.value > 75) {
+    color = '#ff0'
+  }
+
+  return {
+    x: props.x,
+    y: props.y + props.height - height,
+    width: props.width,
+    height,
+    fill: color,
+    cornerRadius: 8,
+  } satisfies RectConfig
+})
+
+function setValue(v: number) {
+  value.value = Math.min(100, Math.max(0, v))
+}
+
+onMounted(() => {
+  intervalId.value = setInterval(() => {
+    const movement = Math.random() * 10 - 5
+    setValue(value.value + movement)
+  }, 100)
+})
+
+onUnmounted(() => {
+  const id = intervalId.value
+  if (id) {
+    clearInterval(id)
+  }
+})
+</script>
+
+<template>
+  <Layer>
+    <Rect :config="configBackground" />
+    <Rect :config="configForeground" />
+  </Layer>
+</template>