improved css

frontend/src/components/GraphAxis.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, provide, ref, toValue, watch } from 'vue';
 import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis';
-import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData } from '@/graph/graph';
 
 const props = defineProps<{
@@ -19,7 +18,7 @@ const type = computed(() => props.type || AxisType.Linear);
 const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)];
 ticker_locations.reverse();
 
-const ticker = useNow(33);
+const graph_data = inject<GraphData>(GRAPH_DATA)!;
 
 const min_y = ref(Infinity);
 const max_y = ref(-Infinity);
@@ -28,7 +27,7 @@ const raw_max_y = ref(-Infinity);
 
 const axis_update_watch = ref(0);
 
-watch([ticker], () => {
+watch([graph_data.min_x, graph_data.max_x], () => {
     axis_update_watch.value++;
     min_y.value = raw_min_y.value;
     max_y.value = raw_max_y.value;
@@ -53,9 +52,6 @@ function update_max_y(y: number) {
     }
 }
 
-// const half_diff_y_value = computed(() => (max_y.value - min_y.value) / 2.0);
-// const average_y_value = computed(() => min_y.value + half_diff_y_value.value);
-
 const min_y_value = computed(() => {
     if (props.y_limits) {
         return props.y_limits[0];
@@ -103,8 +99,6 @@ const max_y_value = computed(() => {
     }
 });
 
-const graph_data = inject<GraphData>(GRAPH_DATA)!;
-
 const y_map = (y: number) => {
     const height = toValue(graph_data.height);
     const border_top_bottom = toValue(graph_data.border_top_bottom);
@@ -279,11 +273,7 @@ const lines = computed(() => {
 </template>
 
 <style scoped lang="scss">
-.x_axis {
-    fill: #ffffff;
-    stroke: #ffffff;
-    color: #ffffff;
-}
+@use '@/assets/variables';
 
 .right_edge {
     text-anchor: start;
@@ -295,27 +285,21 @@ const lines = computed(() => {
 
 .middle_text {
     alignment-baseline: middle;
-    font-family: Helvetica, sans-serif;
+    font-family: variables.$text-font;
 }
 
 .minor_tick {
-    stroke: #666666;
-    stroke-width: 1px;
-    fill: #666666;
-    color: #666666;
+    stroke: variables.$minor-tick;
+    fill: variables.$minor-tick;
 }
 
 .major_tick {
-    stroke: #aaaaaa;
-    stroke-width: 1px;
-    fill: #aaaaaa;
-    color: #aaaaaa;
+    stroke: variables.$major-tick;
+    fill: variables.$major-tick;
 }
 
 .grid_tick {
-    stroke: #ffffff;
-    stroke-width: 1px;
-    fill: #ffffff;
-    color: #ffffff;
+    fill: variables.$grid-line;
+    stroke: variables.$grid-line;
 }
 </style>