init

client/src/components/GraphModal.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { METRICS } from '../services/units'
+import MetricChart from './MetricChart.vue'
+import type { DataRow } from '../services/api'
+
+const props = defineProps<{ metricKey: string | null; currentData: DataRow }>()
+const emit  = defineEmits<{ (e: 'close'): void }>()
+
+const meta  = computed(() => props.metricKey ? METRICS[props.metricKey] : null)
+</script>
+
+<style scoped lang="scss">
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.close-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover { background: var(--hover); }
+}
+</style>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="metricKey" class="backdrop" @click.self="emit('close')">
+        <div class="modal">
+          <div class="modal-header">
+            <div class="modal-title">
+              <span>{{ meta?.icon }}</span>
+              <span>{{ meta?.label ?? metricKey }}</span>
+            </div>
+            <button class="close-btn" @click="emit('close')">✕</button>
+          </div>
+          <MetricChart :metric-key="metricKey" :current-data="currentData" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>