|
|
|
@ -3,7 +3,7 @@ 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 { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
|
|
|
|
|
import { MathStatement } from '../support/parse'
|
|
|
|
|
import { ChartBox } from '../support/types'
|
|
|
|
|
import { stepX, stepY } from '../support/const'
|
|
|
|
@ -20,6 +20,42 @@ 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 = []
|
|
|
|
@ -51,6 +87,7 @@ const getChartData = (): ChartData<'line'> => {
|
|
|
|
|
label: node.name,
|
|
|
|
|
backgroundColor: '#553564',
|
|
|
|
|
data: range.map(x => fn(x)),
|
|
|
|
|
pointRadius: 5
|
|
|
|
|
}],
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -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>
|
|
|
|
|
|
|
|
|
|