mirror of
https://github.com/lana-k/sqliteviz.git
synced 2026-03-24 23:16:18 +08:00
wip
This commit is contained in:
lana-k
77
src/components/Graph/CirclePackLayoutSettings.vue
Normal file
77
src/components/Graph/CirclePackLayoutSettings.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<Field
|
||||
label="Hierarchy attributes"
|
||||
fieldContainerClassName="multiselect-field"
|
||||
>
|
||||
<multiselect
|
||||
:modelValue="modelValue.hierarchyAttributes"
|
||||
class="sqliteviz-select"
|
||||
:options="keyOptions"
|
||||
:multiple="true"
|
||||
:hideSelected="true"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:max="keyOptions.length"
|
||||
placeholder=""
|
||||
openDirection="bottom"
|
||||
@update:model-value="update('hierarchyAttributes', $event)"
|
||||
>
|
||||
<template #maxElements>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
|
||||
<template #placeholder>Select an Option</template>
|
||||
|
||||
<template #noResult>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
</Field>
|
||||
|
||||
<Field label="Seed value">
|
||||
<NumericInput
|
||||
:value="modelValue.seedValue"
|
||||
@update="update('seedValue', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Field: applyPureReactInVue(Field),
|
||||
NumericInput: applyPureReactInVue(NumericInput),
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
Multiselect
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
update(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.sqliteviz-select.multiselect--active .multiselect__input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
:deep(.multiselect-field .field__widget > *) {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
</style>
|
||||
125
src/components/Graph/ForceAtlasLayoutSettings.vue
Normal file
125
src/components/Graph/ForceAtlasLayoutSettings.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<Field label="Adjust sizes">
|
||||
<RadioBlocks
|
||||
:options="booleanOptions"
|
||||
:activeOption="modelValue.adjustSizes"
|
||||
@option-change="update('adjustSizes', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Barnes-Hut optimize">
|
||||
<RadioBlocks
|
||||
:options="booleanOptions"
|
||||
:activeOption="modelValue.barnesHutOptimize"
|
||||
@option-change="update('barnesHutOptimize', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field v-show="modelValue.barnesHutOptimize" label="Barnes-Hut Theta">
|
||||
<NumericInput
|
||||
:value="modelValue.barnesHutTheta"
|
||||
@update="update('barnesHutTheta', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Gravity">
|
||||
<NumericInput
|
||||
:value="modelValue.gravity"
|
||||
@update="update('gravity', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Strong gravity mode">
|
||||
<RadioBlocks
|
||||
:options="booleanOptions"
|
||||
:activeOption="modelValue.strongGravityMode"
|
||||
@option-change="update('strongGravityMode', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Noack's LinLog model">
|
||||
<RadioBlocks
|
||||
:options="booleanOptions"
|
||||
:activeOption="modelValue.linLogMode"
|
||||
@option-change="update('linLogMode', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Out bound attraction distribution">
|
||||
<RadioBlocks
|
||||
:options="booleanOptions"
|
||||
:activeOption="modelValue.outboundAttractionDistribution"
|
||||
@option-change="update('outboundAttractionDistribution', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Scaling ratio">
|
||||
<NumericInput
|
||||
:value="modelValue.scalingRatio"
|
||||
@update="update('scalingRatio', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Slow down">
|
||||
<NumericInput
|
||||
:value="modelValue.slowDown"
|
||||
:min="1"
|
||||
@update="update('slowDown', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Edge weight influence">
|
||||
<NumericInput
|
||||
:value="modelValue.edgeWeightInfluence"
|
||||
@update="update('edgeWeightInfluence', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Edge weight">
|
||||
<Dropdown
|
||||
:options="keyOptions"
|
||||
:value="modelValue.weightSource"
|
||||
@change="update('weightSource', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markRaw } from 'vue'
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
|
||||
import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Field: applyPureReactInVue(Field),
|
||||
RadioBlocks: applyPureReactInVue(RadioBlocks),
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
NumericInput: applyPureReactInVue(NumericInput)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
booleanOptions: markRaw([
|
||||
{ label: 'Yes', value: true },
|
||||
{ label: 'No', value: false }
|
||||
])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
34
src/components/Graph/RandomLayoutSettings.vue
Normal file
34
src/components/Graph/RandomLayoutSettings.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<Field label="Seed value">
|
||||
<NumericInput
|
||||
:value="modelValue.seedValue"
|
||||
@update="update('seedValue', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Field: applyPureReactInVue(Field),
|
||||
NumericInput: applyPureReactInVue(NumericInput)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
update(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user