commit
29c2885475
|
Before Width: | Height: | Size: 673 B After Width: | Height: | Size: 679 B |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,110 @@
|
||||
<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'
|
||||
|
||||
Chart.register(...registerables)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(eventName: 'move', x: number, y:number): void,
|
||||
(eventName: 'edit'): void,
|
||||
(eventName: 'remove'): void,
|
||||
}>()
|
||||
|
||||
const props = defineProps<{
|
||||
fn: MathStatement,
|
||||
value: ChartBox,
|
||||
}>()
|
||||
|
||||
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 ) {
|
||||
range.push(i)
|
||||
}
|
||||
|
||||
if ( !props.fn.isFunctionDeclaration() ) {
|
||||
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
|
||||
|
||||
console.log('getChartData', {
|
||||
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',
|
||||
data: range.map(x => fn(x)),
|
||||
}],
|
||||
}
|
||||
}
|
||||
|
||||
const chartData = ref(getChartData())
|
||||
const chartKey = ref(uuidv4())
|
||||
computed(() => {
|
||||
chartData.value = getChartData()
|
||||
chartKey.value = uuidv4()
|
||||
})
|
||||
|
||||
function onControlledDrag(e: {event: MouseEvent, data: {x: number, y: number}}) {
|
||||
|
||||
// const x = e.x;
|
||||
// const y = e.y;
|
||||
const { x, y } = e.data;
|
||||
props.value.x = x;
|
||||
props.value.y = y;
|
||||
console.log(e)
|
||||
}
|
||||
function onControlledDragStop(e: {event: MouseEvent, data: {x: number, y: number}}) {
|
||||
// console.log(typeof(e))
|
||||
const { x, y } = e.data;
|
||||
// const x = e.x;
|
||||
// const y = e.y;
|
||||
console.log(self)
|
||||
emit('move', x, y);
|
||||
onControlledDrag(e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Draggable
|
||||
:grid="[stepX, stepY]"
|
||||
:default-position="{ x: props.value.x, y: props.value.y }"
|
||||
: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 class="sidebar">
|
||||
<q-btn color="grey-7" round flat icon="more_vert">
|
||||
<q-menu cover auto-close>
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section @click="() => $emit('edit')">Edit</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section @click="() => $emit('remove')">Remove</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
</template>
|
||||
@ -0,0 +1,118 @@
|
||||
<script setup lang="ts">
|
||||
import * as math from 'mathjs'
|
||||
import {onMounted, ref} from 'vue'
|
||||
import {MathStatement} from '../support/parse'
|
||||
import {v4 as uuidv4} from 'uuid'
|
||||
import Katex from '../components/Katex.vue'
|
||||
import {ChartBox, StatementID} from '../support/types'
|
||||
import {MathPage} from '../support/page'
|
||||
|
||||
const props = defineProps<{
|
||||
page: MathPage,
|
||||
chartBox?: ChartBox,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(eventName: 'save', statement: ChartBox): void,
|
||||
}>()
|
||||
|
||||
const chartBoxModalError = ref<string|undefined>(undefined)
|
||||
const chartBoxFunctionName = ref('')
|
||||
const chartBoxMinXValue = ref(0)
|
||||
const chartBoxMaxXValue = ref(30)
|
||||
const chartBoxStepXValue = ref(1)
|
||||
|
||||
const validateChartBox = () => {
|
||||
if ( !chartBoxFunctionName.value ) {
|
||||
return 'Missing function name'
|
||||
}
|
||||
|
||||
if ( isNaN(parseFloat(String(chartBoxMinXValue.value))) ) {
|
||||
return 'Invalid minimum X-value'
|
||||
}
|
||||
|
||||
if ( isNaN(parseFloat(String(chartBoxMaxXValue.value))) ) {
|
||||
return 'Invalid maximum X-value'
|
||||
}
|
||||
|
||||
if ( isNaN(parseFloat(String(chartBoxStepXValue.value))) ) {
|
||||
return 'Invalid X-value step size'
|
||||
}
|
||||
|
||||
if ( !props.page.getFunctionByName(chartBoxFunctionName.value) ) {
|
||||
return 'Invalid function name'
|
||||
}
|
||||
}
|
||||
|
||||
const saveChartBox = () => {
|
||||
chartBoxModalError.value = validateChartBox()
|
||||
if ( chartBoxModalError.value ) {
|
||||
return
|
||||
}
|
||||
|
||||
if ( props.chartBox ) {
|
||||
props.chartBox.fnName = chartBoxFunctionName.value
|
||||
props.chartBox.minX = chartBoxMinXValue.value
|
||||
props.chartBox.maxX = chartBoxMaxXValue.value
|
||||
props.chartBox.stepX = chartBoxStepXValue.value
|
||||
emit('save', props.chartBox)
|
||||
} else {
|
||||
emit('save', new ChartBox(
|
||||
chartBoxFunctionName.value,
|
||||
chartBoxMinXValue.value,
|
||||
chartBoxMaxXValue.value,
|
||||
chartBoxStepXValue.value,
|
||||
))
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if ( props.chartBox ) {
|
||||
chartBoxFunctionName.value = props.chartBox.fnName
|
||||
chartBoxMinXValue.value = props.chartBox.minX
|
||||
chartBoxMaxXValue.value = props.chartBox.maxX
|
||||
chartBoxStepXValue.value = props.chartBox.stepX
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section v-if="chartBoxModalError">
|
||||
<div style="color: darkred; font-weight: bold">{{ chartBoxModalError }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="chartBoxFunctionName"
|
||||
outlined
|
||||
autofocus
|
||||
label="Function name"
|
||||
/>
|
||||
<br>
|
||||
<q-input
|
||||
v-model="chartBoxMinXValue"
|
||||
outlined
|
||||
autofocus
|
||||
label="Minimum X-value"
|
||||
/>
|
||||
<br>
|
||||
<q-input
|
||||
v-model="chartBoxMaxXValue"
|
||||
outlined
|
||||
autofocus
|
||||
label="Maximum X-value"
|
||||
/>
|
||||
<br>
|
||||
<q-input
|
||||
v-model="chartBoxStepXValue"
|
||||
outlined
|
||||
autofocus
|
||||
label="X-value step size"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" class="text-primary">
|
||||
<q-btn flat label="Cancel" v-close-popup></q-btn>
|
||||
<q-btn flat label="Save" @click="() => saveChartBox()"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
Loading…
Reference in new issue