Added options to change charts to match theme

src/components/RangeChart.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import * as math from 'mathjs'
-import {v4 as uuidv4} from 'uuid'
-import {LineChart} from 'vue-chart-3'
-import {computed, ref} from 'vue'
-import {Chart, ChartData, registerables} from 'chart.js'
-import {MathStatement} from '../support/parse'
-import {ChartBox} from '../support/types'
-import {stepX, stepY} from '../support/const'
+import { v4 as uuidv4 } from 'uuid'
+import { LineChart } from 'vue-chart-3'
+import { computed, ref } from 'vue'
+import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+import { MathStatement } from '../support/parse'
+import { ChartBox } from '../support/types'
+import { stepX, stepY } from '../support/const'
 
 Chart.register(...registerables)
 
 const emit = defineEmits<{
-  (eventName: 'move', x: number, y:number): void,
+  (eventName: 'move', x: number, y: number): void,
   (eventName: 'edit'): void,
   (eventName: 'remove'): void,
 }>()
@@ -20,16 +20,52 @@ const props = defineProps<{
   fn: MathStatement,
   value: ChartBox,
 }>()
+const options = ref({
+  plugins: {
+    legend: {
+      labels: {
+        color: "white",
+        font: {
+          size: 18
+        }
+      }
+    }
+  },
+  scales: {
+    y: {
+      ticks: {
+        color: "white",
+        font: {
+          size: 15,
+        },
+      },
+      grid: {
+          color: '#ccc'
+      }
+    },
+    x: {
+      ticks: {
+        color: "white",
+        font: {
+          size: 14
+        },
+      },
+      grid: {
+          color: '#ccc'
+      }
+    }
+  }
+})
 
 const getChartData = (): ChartData<'line'> => {
   const range = []
   const min = Math.min(props.value.minX, props.value.maxX)
   const max = Math.max(props.value.minX, props.value.maxX)
-  for ( let i = min; i <= max; i += parseFloat(String(props.value.stepX)) || 1 ) {
+  for (let i = min; i <= max; i += parseFloat(String(props.value.stepX)) || 1) {
     range.push(i)
   }
 
-  if ( !props.fn.isFunctionDeclaration() ) {
+  if (!props.fn.isFunctionDeclaration()) {
     throw new TypeError('Cannot chart node that is not a function.')
   }
 
@@ -51,6 +87,7 @@ const getChartData = (): ChartData<'line'> => {
       label: node.name,
       backgroundColor: '#553564',
       data: range.map(x => fn(x)),
+      pointRadius: 5
     }],
   }
 }
@@ -62,7 +99,7 @@ computed(() => {
   chartKey.value = uuidv4()
 })
 
-function onControlledDrag(e: {event: MouseEvent, data: {x: number, y: number}}) {
+function onControlledDrag(e: { event: MouseEvent, data: { x: number, y: number } }) {
 
   // const x = e.x;
   // const y = e.y;
@@ -71,7 +108,7 @@ function onControlledDrag(e: {event: MouseEvent, data: {x: number, y: number}})
   props.value.y = y;
   console.log(e)
 }
-function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number}}) {
+function onControlledDragStop(e: { event: MouseEvent, data: { x: number, y: number } }) {
   // console.log(typeof(e))
   const { x, y } = e.data;
   // const x = e.x;
@@ -81,7 +118,6 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
   onControlledDrag(e);
 }
 </script>
-
 <template>
   <Draggable
     :grid="[stepX, stepY]"
@@ -89,8 +125,10 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
     :position="{ x: props.value.x, y: props.value.y }"
     @stop="onControlledDragStop"
   >
-    <div style="background: white; display: flex; flex-direction: row; border: 1px solid #ccc; border-radius: 3px;">
-      <LineChart :chartData="chartData" :key="chartKey" class="inner-chart"/>
+    <div
+      style="background: var(--q-dark); display: flex; flex-direction: row; border: 1px solid #ccc; border-radius: 3px;"
+    >
+      <LineChart :options="options" :chartData="chartData" :key="chartKey" class="inner-chart" />
       <div class="sidebar">
         <q-btn color="grey-7" round flat icon="more_vert">
           <q-menu cover auto-close>
@@ -108,3 +146,7 @@ function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number
     </div>
   </Draggable>
 </template>
+
+<style>
+</style>
+