mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 10:38:54 +08:00
wip
This commit is contained in:
lana-k
137
src/components/Graph/EdgeColorSettings.vue
Normal file
137
src/components/Graph/EdgeColorSettings.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<Field label="Color">
|
||||
<RadioBlocks
|
||||
:options="edgeColorTypeOptions"
|
||||
:activeOption="modelValue.type"
|
||||
@option-change="updateColorType"
|
||||
/>
|
||||
<Field v-if="modelValue.type === 'constant'">
|
||||
<ColorPicker
|
||||
:selectedColor="modelValue.value"
|
||||
@color-change="updateSettings('value', $event)"
|
||||
/>
|
||||
</Field>
|
||||
<template v-else>
|
||||
<Field>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'variable'"
|
||||
:options="keyOptions"
|
||||
:value="modelValue.source"
|
||||
@change="updateSettings('source', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<RadioBlocks
|
||||
:options="colorSourceUsageOptions"
|
||||
:activeOption="modelValue.sourceUsage"
|
||||
@option-change="updateSettings('sourceUsage', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.sourceUsage === 'map_to'">
|
||||
<ColorscalePicker
|
||||
:selected="modelValue.colorscale"
|
||||
className="colorscale-picker"
|
||||
@colorscale-change="updateSettings('colorscale', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.type !== 'constant'" label="Color as">
|
||||
<RadioBlocks
|
||||
:options="сolorAsOptions"
|
||||
:activeOption="modelValue.mode"
|
||||
@option-change="updateSettings('mode', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.type !== 'constant'" label="Colorscale direction">
|
||||
<RadioBlocks
|
||||
:options="сolorscaleDirections"
|
||||
:activeOption="modelValue.colorscaleDirection"
|
||||
@option-change="updateSettings('colorscaleDirection', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markRaw } from 'vue'
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
|
||||
import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
|
||||
import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
RadioBlocks: applyPureReactInVue(RadioBlocks),
|
||||
Field: applyPureReactInVue(Field),
|
||||
ColorscalePicker: applyPureReactInVue(ColorscalePicker),
|
||||
ColorPicker: applyPureReactInVue(ColorPicker)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
edgeColorTypeOptions: markRaw([
|
||||
{ label: 'Constant', value: 'constant' },
|
||||
{ label: 'Variable', value: 'variable' }
|
||||
]),
|
||||
сolorAsOptions: markRaw([
|
||||
{ label: 'Continious', value: 'continious' },
|
||||
{ label: 'Categorical', value: 'categorical' }
|
||||
]),
|
||||
сolorscaleDirections: markRaw([
|
||||
{ label: 'Normal', value: 'normal' },
|
||||
{ label: 'Recersed', value: 'reversed' }
|
||||
]),
|
||||
colorSourceUsageOptions: markRaw([
|
||||
{ label: 'Direct', value: 'direct' },
|
||||
{ label: 'Map to', value: 'map_to' }
|
||||
]),
|
||||
defaultColorSettings: {
|
||||
constant: { value: '#1F77B4' },
|
||||
variable: {
|
||||
source: null,
|
||||
sourceUsage: 'map_to',
|
||||
colorscale: null,
|
||||
mode: 'categorical',
|
||||
colorscaleDirection: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateColorType(newColorType) {
|
||||
const currentColorType = this.modelValue.type
|
||||
this.defaultColorSettings[currentColorType] = this.modelValue
|
||||
|
||||
this.$emit('update:modelValue', {
|
||||
type: newColorType,
|
||||
...this.defaultColorSettings[newColorType]
|
||||
})
|
||||
},
|
||||
updateSettings(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.customPickerContainer) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
93
src/components/Graph/EdgeSizeSettings.vue
Normal file
93
src/components/Graph/EdgeSizeSettings.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Field label="Size">
|
||||
<RadioBlocks
|
||||
:options="edgeSizeTypeOptions"
|
||||
:activeOption="modelValue.type"
|
||||
@option-change="updateSizeType"
|
||||
/>
|
||||
|
||||
<Field>
|
||||
<NumericInput
|
||||
v-if="modelValue.type === 'constant'"
|
||||
:value="modelValue.value"
|
||||
:min="1"
|
||||
@update="updateSettings('value', $event)"
|
||||
/>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'variable'"
|
||||
:options="keyOptions"
|
||||
:value="modelValue.source"
|
||||
@change="updateSettings('source', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</Field>
|
||||
|
||||
<template v-if="modelValue.type !== 'constant'">
|
||||
<Field label="Size scale">
|
||||
<NumericInput
|
||||
:value="modelValue.scale"
|
||||
@update="updateSettings('scale', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Minimum size">
|
||||
<NumericInput
|
||||
:value="modelValue.min"
|
||||
@update="updateSettings('min', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markRaw } from 'vue'
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
NumericInput: applyPureReactInVue(NumericInput),
|
||||
RadioBlocks: applyPureReactInVue(RadioBlocks),
|
||||
Field: applyPureReactInVue(Field)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
edgeSizeTypeOptions: markRaw([
|
||||
{ label: 'Constant', value: 'constant' },
|
||||
{ label: 'Variable', value: 'variable' }
|
||||
]),
|
||||
defaultSizeSettings: {
|
||||
constant: { value: 4 },
|
||||
variable: { source: null, scale: 1, min: 1 }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateSizeType(newSizeType) {
|
||||
const currentSizeType = this.modelValue.type
|
||||
this.defaultSizeSettings[currentSizeType] = this.modelValue
|
||||
|
||||
this.$emit('update:modelValue', {
|
||||
type: newSizeType,
|
||||
...this.defaultSizeSettings[newSizeType]
|
||||
})
|
||||
},
|
||||
updateSettings(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
155
src/components/Graph/NodeColorSettings.vue
Normal file
155
src/components/Graph/NodeColorSettings.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<Field label="Color">
|
||||
<RadioBlocks
|
||||
:options="nodeColorTypeOptions"
|
||||
:activeOption="modelValue.type"
|
||||
@option-change="updateColorType"
|
||||
/>
|
||||
<Field v-if="modelValue.type === 'constant'">
|
||||
<ColorPicker
|
||||
:selectedColor="modelValue.value"
|
||||
@color-change="updateSettings('value', $event)"
|
||||
/>
|
||||
</Field>
|
||||
<template v-else>
|
||||
<Field>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'variable'"
|
||||
:options="keyOptions"
|
||||
:value="modelValue.source"
|
||||
@change="updateSettings('source', $event)"
|
||||
/>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'calculated'"
|
||||
:options="nodeCalculatedColorMethodOptions"
|
||||
:value="modelValue.method"
|
||||
@change="updateSettings('method', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<RadioBlocks
|
||||
:options="colorSourceUsageOptions"
|
||||
:activeOption="modelValue.sourceUsage"
|
||||
@option-change="updateSettings('sourceUsage', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.sourceUsage === 'map_to'">
|
||||
<ColorscalePicker
|
||||
:selected="modelValue.colorscale"
|
||||
className="colorscale-picker"
|
||||
@colorscale-change="updateSettings('colorscale', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.type !== 'constant'" label="Color as">
|
||||
<RadioBlocks
|
||||
:options="сolorAsOptions"
|
||||
:activeOption="modelValue.mode"
|
||||
@option-change="updateSettings('mode', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field v-if="modelValue.type !== 'constant'" label="Colorscale direction">
|
||||
<RadioBlocks
|
||||
:options="сolorscaleDirections"
|
||||
:activeOption="modelValue.colorscaleDirection"
|
||||
@option-change="updateSettings('colorscaleDirection', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markRaw } from 'vue'
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
|
||||
import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
|
||||
import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
RadioBlocks: applyPureReactInVue(RadioBlocks),
|
||||
Field: applyPureReactInVue(Field),
|
||||
ColorscalePicker: applyPureReactInVue(ColorscalePicker),
|
||||
ColorPicker: applyPureReactInVue(ColorPicker)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
nodeColorTypeOptions: markRaw([
|
||||
{ label: 'Constant', value: 'constant' },
|
||||
{ label: 'Variable', value: 'variable' },
|
||||
{ label: 'Calculated', value: 'calculated' }
|
||||
]),
|
||||
nodeCalculatedColorMethodOptions: markRaw([
|
||||
{ label: 'Degree', value: 'degree' },
|
||||
{ label: 'In degree', value: 'inDegree' },
|
||||
{ label: 'Out degree', value: 'outDegree' }
|
||||
]),
|
||||
сolorAsOptions: markRaw([
|
||||
{ label: 'Continious', value: 'continious' },
|
||||
{ label: 'Categorical', value: 'categorical' }
|
||||
]),
|
||||
сolorscaleDirections: markRaw([
|
||||
{ label: 'Normal', value: 'normal' },
|
||||
{ label: 'Recersed', value: 'reversed' }
|
||||
]),
|
||||
colorSourceUsageOptions: markRaw([
|
||||
{ label: 'Direct', value: 'direct' },
|
||||
{ label: 'Map to', value: 'map_to' }
|
||||
]),
|
||||
defaultColorSettings: {
|
||||
constant: { value: '#1F77B4' },
|
||||
variable: {
|
||||
source: null,
|
||||
sourceUsage: 'map_to',
|
||||
colorscale: null,
|
||||
mode: 'categorical',
|
||||
colorscaleDirection: 'normal'
|
||||
},
|
||||
calculated: {
|
||||
method: 'degree',
|
||||
sourceUsage: 'map_to',
|
||||
colorscale: null,
|
||||
mode: 'continious',
|
||||
colorscaleDirection: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateColorType(newColorType) {
|
||||
const currentColorType = this.modelValue.type
|
||||
this.defaultColorSettings[currentColorType] = this.modelValue
|
||||
|
||||
this.$emit('update:modelValue', {
|
||||
type: newColorType,
|
||||
...this.defaultColorSettings[newColorType]
|
||||
})
|
||||
},
|
||||
updateSettings(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.customPickerContainer) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
118
src/components/Graph/NodeSizeSettings.vue
Normal file
118
src/components/Graph/NodeSizeSettings.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<Field label="Size">
|
||||
<RadioBlocks
|
||||
:options="nodeSizeTypeOptions"
|
||||
:activeOption="modelValue.type"
|
||||
@option-change="updateSizeType"
|
||||
/>
|
||||
|
||||
<Field>
|
||||
<NumericInput
|
||||
v-if="modelValue.type === 'constant'"
|
||||
:value="modelValue.value"
|
||||
:min="1"
|
||||
@update="updateSettings('value', $event)"
|
||||
/>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'variable'"
|
||||
:options="keyOptions"
|
||||
:value="modelValue.source"
|
||||
@change="updateSettings('source', $event)"
|
||||
/>
|
||||
<Dropdown
|
||||
v-if="modelValue.type === 'calculated'"
|
||||
:options="nodeCalculatedSizeMethodOptions"
|
||||
:value="modelValue.method"
|
||||
@change="updateSettings('method', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</Field>
|
||||
|
||||
<template v-if="modelValue.type !== 'constant'">
|
||||
<Field label="Size scale">
|
||||
<NumericInput
|
||||
:value="modelValue.scale"
|
||||
@update="updateSettings('scale', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Size mode">
|
||||
<RadioBlocks
|
||||
:options="nodeSizeModeOptions"
|
||||
:activeOption="modelValue.mode"
|
||||
@option-change="updateSettings('mode', $event)"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Minimum size">
|
||||
<NumericInput
|
||||
:value="modelValue.min"
|
||||
@update="updateSettings('min', $event)"
|
||||
/>
|
||||
</Field>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markRaw } from 'vue'
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
|
||||
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
|
||||
import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
|
||||
import Field from 'react-chart-editor/lib/components/fields/Field'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown: applyPureReactInVue(Dropdown),
|
||||
NumericInput: applyPureReactInVue(NumericInput),
|
||||
RadioBlocks: applyPureReactInVue(RadioBlocks),
|
||||
Field: applyPureReactInVue(Field)
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
keyOptions: Array
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
nodeSizeTypeOptions: markRaw([
|
||||
{ label: 'Constant', value: 'constant' },
|
||||
{ label: 'Variable', value: 'variable' },
|
||||
{ label: 'Calculated', value: 'calculated' }
|
||||
]),
|
||||
nodeCalculatedSizeMethodOptions: markRaw([
|
||||
{ label: 'Degree', value: 'degree' },
|
||||
{ label: 'In degree', value: 'inDegree' },
|
||||
{ label: 'Out degree', value: 'outDegree' }
|
||||
]),
|
||||
nodeSizeModeOptions: markRaw([
|
||||
{ label: 'Area', value: 'area' },
|
||||
{ label: 'Diameter', value: 'diameter' }
|
||||
]),
|
||||
defaultSizeSettings: {
|
||||
constant: { value: 4 },
|
||||
variable: { source: null, scale: 1, mode: 'diameter', min: 1 },
|
||||
calculated: { method: 'degree', scale: 1, mode: 'diameter', min: 1 }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateSizeType(newSizeType) {
|
||||
const currentSizeType = this.modelValue.type
|
||||
this.defaultSizeSettings[currentSizeType] = this.modelValue
|
||||
|
||||
this.$emit('update:modelValue', {
|
||||
type: newSizeType,
|
||||
...this.defaultSizeSettings[newSizeType]
|
||||
})
|
||||
},
|
||||
updateSettings(attributeName, value) {
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
[attributeName]: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user