Fix missing scope for chart function evaluation

deploy/deploy.yaml

@@ -56,7 +56,7 @@ spec:
             - name: DATABASE_NAME
               value: mathy
           ports:
-            - containerPort: 80
+            - containerPort: 8000
 
         - name: redis
           image: redis:latest
@@ -73,7 +73,7 @@ spec:
     - name: http
       port: 80
       protocol: TCP
-      targetPort: 80
+      targetPort: 8000
   selector:
     name: mathy-api
 ---

src/components/RangeChart.vue

@@ -3,10 +3,11 @@ 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, ChartOptions, registerables } from 'chart.js'
+import { Chart, ChartData, registerables } from 'chart.js'
 import { MathStatement } from '../support/parse'
 import { ChartBox } from '../support/types'
 import { stepX, stepY } from '../support/const'
+import {MathPage} from '../support/page'
 
 Chart.register(...registerables)
 
@@ -17,6 +18,7 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
+  page: MathPage,
   fn: MathStatement,
   value: ChartBox,
 }>()
@@ -69,27 +71,32 @@ const getChartData = (): ChartData<'line'> => {
     throw new TypeError('Cannot chart node that is not a function.')
   }
 
-  const node = props.fn.parse() as math.FunctionAssignmentNode
-  const fn = node.compile().evaluate()  // FIXME need dependencies in scope
+  try {
+    const evaluationResult = props.page.evaluate()
+    const node = props.fn.parse() as math.FunctionAssignmentNode
+    const fn = node.compile().evaluate(evaluationResult.scope)
 
-  console.log('getChartData', {
-    labels: range.map(x => `${x}`),
-    datasets: [
-      {
+    return {
+      labels: range.map(x => `${x}`),
+      datasets: [{
         label: node.name,
-        data: range.map(n => fn(n)),
-      },
-    ],
-  })
-  return {
-    labels: range.map(x => `${x}`),
-    datasets: [{
-      label: node.name,
-      backgroundColor: '#553564',
-      borderColor: '#ccc',
-      data: range.map(x => fn(x)),
-      pointRadius: 5
-    }],
+        backgroundColor: '#553564',
+        borderColor: '#ccc',
+        data: range.map(x => fn(x)),
+        pointRadius: 5
+      }],
+    }
+  } catch (_) {
+    return {
+      labels: [],
+      datasets: [{
+        label: '',
+        backgroundColor: '#553564',
+        borderColor: '#ccc',
+        data: [],
+        pointRadius: 5
+      }],
+    }
   }
 }
 

src/pages/Editor.vue

@@ -515,6 +515,7 @@ onMounted(() => {
     <q-page-container id="editor" style='padding: 0'>
       <span v-for="(chartBox, index) in chartBoxes" style="display: flex">
         <RangeChart
+          :page="math"
           :fn="math.getFunctionByNameOrFail(chartBox.fnName)"
           :key="chartBoxKey"
           :value="chartBox"

src/support/page.ts

@@ -197,6 +197,7 @@ export class MathPage {
         return {
             variables: nonFunctionalScope,
             statements: evaluations,
+            scope,
         }
     }
 }

src/support/types.ts

@@ -90,6 +90,7 @@ export type EvaluatedValue = TypeTag<'@app.EvaluatedValue'> & string
 export interface EvaluationResult {
     variables: Record<VariableName, any>
     statements: Record<StatementID, any>
+    scope: Record<VariableName, any>
 }