improved css

frontend/src/components/SvgGraph.vue

@@ -12,17 +12,32 @@ const props = defineProps<{
     // max_x?: number
 }>();
 
-const svg_viewbox = computed(() => {
-    return `0 0 ${props.width} ${props.height}`;
+const width = computed(() => {
+    return props.width;
 });
+
+const height = computed(() => {
+    return props.height;
+});
+
+// const svg_viewbox = computed(() => {
+//     return `0 0 ${props.width} ${props.height}`;
+// });
 const now = useNow(33);
-const window_duration = 30 * 1000; // 30 seconds
+const window_duration = 10 * 1000; // 10 seconds
 
 const time_lines = [
     1, // 1ms
+    2, // 2ms
+    5, // 5ms
     10, // 10ms
+    20, // 20ms
+    50, // 50ms
     100, // 100ms
+    200, // 200ms
+    500, // 500ms
     1000, // 1s
+    2000, // 2s
     5000, // 5s
     10000, // 10s
     30000, // 30s
@@ -31,10 +46,12 @@ const time_lines = [
     6000000, // 10m
     18000000, // 30m
     36000000, // 1h
+    72000000, // 2h
     144000000, // 4h
     216000000, // 6h
     432000000, // 12h
     864000000, // 1d
+    1728000000, // 2d
     6048000000, // 1w
 ];
 time_lines.reverse();
@@ -49,7 +66,7 @@ const min_x = computed(() => max_x.value - window_duration);
 const x_map = (x: number) => {
     const diff_x = max_x.value - min_x.value;
     return (
-        ((props.width - 2 * border_left_right.value) * (x - min_x.value)) /
+        ((width.value - 2 * border_left_right.value) * (x - min_x.value)) /
             diff_x +
         border_left_right.value
     );
@@ -59,8 +76,8 @@ provide<GraphData>(GRAPH_DATA, {
     border_top_bottom: border_top_bottom,
     min_x: min_x,
     max_x: now,
-    width: () => props.width - 2 * border_left_right.value,
-    height: () => props.height - 2 * border_top_bottom.value,
+    width: () => width.value - 2 * border_left_right.value,
+    height: () => height.value - 2 * border_top_bottom.value,
     x_map: x_map,
 });
 
@@ -81,7 +98,7 @@ const lines = computed(() => {
 </script>
 
 <template>
-    <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
+    <svg ref="svg_graph" :width="width" :height="height">
         <defs>
             <clipPath id="content">
                 <rect
@@ -115,7 +132,8 @@ const lines = computed(() => {
                 ></polyline>
                 <text
                     class="bottom_edge"
-                    :transform="`translate(${x_map(tick)},${height - border_top_bottom + text_offset}) rotate(0)`"
+                    :x="x_map(tick)"
+                    :y="height - border_top_bottom + text_offset"
                 >
                     {{ new Date(tick).toLocaleString() }}
                 </text>
@@ -126,17 +144,16 @@ const lines = computed(() => {
 </template>
 
 <style scoped lang="scss">
+@use '@/assets/variables';
+
 .bottom_edge {
     text-anchor: middle;
     alignment-baseline: text-before-edge;
-    font-family: Helvetica, sans-serif;
+    font-family: variables.$text-font;
 }
 
 .time_tick {
-    stroke: #ffffff;
-    stroke-width: 1px;
-    fill: #ffffff;
-    color: #ffffff;
-    font-size: 16px;
+    stroke: variables.$time-tick;
+    fill: variables.$time-tick;
 }
 </style>