mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 02:28:54 +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>
|
||||
40
src/components/svg/graph.vue
Normal file
40
src/components/svg/graph.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 4C5 5.10457 4.10457 6 3 6C1.89543 6 1 5.10457 1 4C1 2.89543 1.89543 2 3 2C4.10457 2 5 2.89543 5 4Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
<path
|
||||
d="M17 7.5C17 8.88071 15.8807 10 14.5 10C13.1193 10 12 8.88071 12 7.5C12 6.11929 13.1193 5 14.5 5C15.8807 5 17 6.11929 17 7.5Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
<path
|
||||
d="M8 13.5C8 14.8807 6.88071 16 5.5 16C4.11929 16 3 14.8807 3 13.5C3 12.1193 4.11929 11 5.5 11C6.88071 11 8 12.1193 8 13.5Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
<path
|
||||
d="M2.93128 5.31436L3.90527 5.08778L5.48693 11.8867L4.51294 12.1133L2.93128 5.31436Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
<path
|
||||
d="M12.9447 7.79159L13.5548 8.58392L7.30516 13.3962L6.69507 12.6038L12.9447 7.79159Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
<path
|
||||
d="M14.1316 6.51712L3.13166 3.51723L2.86844 4.48202L13.8684 7.48191L14.1316 6.51712Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GraphIcon'
|
||||
}
|
||||
</script>
|
||||
20
src/components/svg/stop.vue
Normal file
20
src/components/svg/stop.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 4C3 3.44772 3.44772 3 4 3H14C14.5523 3 15 3.44772 15 4V14C15 14.5523 14.5523 15 14 15H4C3.44772 15 3 14.5523 3 14V4Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StopIcon'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user