Skip to content

Commit 972eb0b

Browse files
graphierosgraphieros
authored
Merge pull request #284 from graphieros/next
Add new VueUiDag component
2 parents 63aee0d + 0270836 commit 972eb0b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+6405
-77
lines changed

‎README.md‎

Lines changed: 49 additions & 43 deletions
Large diffs are not rendered by default.

‎TestingArena/ArenaVueUiDag.vue‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
<script setup>
2+
import { ref, computed, onMounted } from "vue";
3+
import LocalVueUiDag from "../src/components/vue-ui-dag.vue";
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import ConfigKnobs from "./ConfigKnobs.vue";
8+
import { useConfigurationControls } from "./createConfigModel";
9+
import { useConfig } from "../src/useConfig"
10+
import { useArena } from "../src/useArena";
11+
import { VueUiDag } from "vue-data-ui";
12+
import {VueUiDag as VueUiDagTreeshaken } from "vue-data-ui/vue-ui-dag";
13+
14+
const { local, build, vduiLocal, vduiBuild } = useArena();
15+
const { vue_ui_dag: DEFAULT_CONFIG } = useConfig();
16+
17+
const {
18+
CHECKBOX,
19+
NUMBER,
20+
RANGE,
21+
TEXT,
22+
COLOR,
23+
SELECT,
24+
createModel
25+
} = useConfigurationControls(DEFAULT_CONFIG);
26+
27+
const dataset = ref({
28+
nodes: [
29+
{ id: "A", label: "AAA\naaa", backgroundColor: '#FF0000', color: 'white'},
30+
{ id: "B", label: "BBB",},
31+
{ id: "C", label: "CCC", color: '#FF0000'},
32+
{ id: "D", label: "DDD" },
33+
],
34+
edges: [
35+
{ from: "A", to: "B", color: '#FF0000'},
36+
{ from: "B", to: "A" },
37+
{ from: "B", to: "A" },
38+
{ from: "C", to: "A" },
39+
{ from: "B", to: "D" },
40+
{ from: "C", to: "D" },
41+
{ from: "D", to: "A" },
42+
]
43+
});
44+
45+
// const dataset = ref(undefined);
46+
47+
// onMounted(() => {
48+
// setTimeout(() => {
49+
// dataset.value = {
50+
// nodes: [
51+
// { id: "A", label: "AAA", backgroundColor: '#FF0000', color: 'white'},
52+
// { id: "B", label: "BBB",},
53+
// { id: "C", label: "CCC", color: '#FF0000'},
54+
// { id: "D", label: "DDD" },
55+
// ],
56+
// edges: [
57+
// { from: "A", to: "B" },
58+
// { from: "B", to: "A" },
59+
// { from: "B", to: "A" },
60+
// { from: "C", to: "A" },
61+
// { from: "B", to: "D" },
62+
// { from: "C", to: "D" },
63+
// { from: "D", to: "A" },
64+
// ]
65+
// }
66+
// }, 2000)
67+
// })
68+
69+
const model = createModel([
70+
CHECKBOX('loading', { def: false }),
71+
CHECKBOX('debug', { def: true }),
72+
CHECKBOX('userOptions.buttons.pdf', { def: true }),
73+
CHECKBOX('userOptions.buttons.img', { def: true }),
74+
CHECKBOX('userOptions.buttons.svg', { def: true }),
75+
CHECKBOX('userOptions.buttons.fullscreen', { def: true }),
76+
CHECKBOX('userOptions.buttons.zoom', { def: true }),
77+
78+
TEXT('style.fontFamily', { def: 'inherit' }),
79+
80+
COLOR('style.chart.backgroundColor', { def: '#FFFFFF' }),
81+
COLOR('style.chart.color', { def: '#1A1A1A' }),
82+
83+
SELECT('style.chart.layout.rankDirection', ['TB', 'RL', 'BT', 'LR'], { def: 'TB'}),
84+
SELECT('style.chart.layout.rankSeparation', [100, 80, 60, 40, 20, 0], { def: 60} ),
85+
SELECT('style.chart.layout.nodeSeparation', [100, 75, 50, 25, 0], { def: 50}),
86+
SELECT('style.chart.layout.edgeSeparation', [60, 50, 40, 30, 20, 10, 0], { def: 30}),
87+
RANGE('style.chart.layout.nodeWidth', {def: 100, min: 40, max: 200 }),
88+
RANGE('style.chart.layout.nodeHeight', {def: 40, min: 20, max: 200 }),
89+
CHECKBOX('style.chart.layout.curvedEdges', { def: true }),
90+
SELECT('style.chart.layout.align', ['UL', 'UR', 'DL', 'DR', ''], { def: undefined }),
91+
SELECT('style.chart.layout.arrowShape', ['undirected', 'normal', 'vee'], { def: 'vee'}),
92+
93+
COLOR('style.chart.nodes.stroke', { def: '#E1E5E8'}),
94+
RANGE('style.chart.nodes.strokeWidth', { def: 1, min: 0, max: 12 }),
95+
RANGE('style.chart.nodes.borderRadius', { def: 3, min: 0, max: 24 }),
96+
COLOR('style.chart.nodes.backgroundColor', { def: '#FFFFFF'}),
97+
COLOR('style.chart.nodes.labels.color', { def: '#1A1A1A' }),
98+
RANGE('style.chart.nodes.labels.fontSize', { def: 12, min: 8, max: 42}),
99+
CHECKBOX('style.chart.nodes.labels.bold', { def: false }),
100+
CHECKBOX('style.chart.nodes.tooltip.showOnClick', { def: true }),
101+
COLOR('style.chart.nodes.tooltip.backgroundColor', { def: '#E1E5E8'}),
102+
COLOR('style.chart.nodes.tooltip.color', { def: '#1A1A1A' }),
103+
TEXT('style.chart.nodes.tooltip.maxWidth', { def: '300px'}),
104+
105+
COLOR('style.chart.edges.stroke', { def: '#CCCCCC' }),
106+
RANGE('style.chart.edges.strokeWidth', { def: 1, min: 0.5, max: 6, step: 0.1 }),
107+
108+
CHECKBOX('style.chart.midpoints.show', { def: true }),
109+
RANGE('style.chart.midpoints.radius', { def: 4, min: 2, max: 8, step: 0.5 }),
110+
COLOR('style.chart.midpoints.stroke', { def: '#CCCCCC'}),
111+
COLOR('style.chart.midpoints.fill', { def: '#FFFFFF'}),
112+
RANGE('style.chart.midpoints.strokeWidth', { def: 1, min: 0.5, max: 6, step: 0.1 }),
113+
TEXT('style.chart.midpoints.tooltip.maxWidth', { def: '300px'}),
114+
COLOR('style.chart.midpoints.tooltip.backgroundColor', { def: '#E1E5E8'}),
115+
COLOR('style.chart.midpoints.tooltip.color', { def: '#1A1A1A'}),
116+
117+
CHECKBOX('style.chart.controls.show', { def: true }),
118+
SELECT('style.chart.controls.position', ['top', 'bottom'], { def: 'bottom' }),
119+
COLOR('style.chart.controls.backgroundColor', { def: '#E1E5E8'}),
120+
COLOR('style.chart.controls.buttonColor', { def: '#E1E5E8'}),
121+
COLOR('style.chart.controls.color', { def: '#1A1A1A'}),
122+
NUMBER('style.chart.controls.fontSize', { def: 14, min: 8, max: 36 }),
123+
TEXT('style.chart.controls.border', { def: '1px solid #CCCCCC'}),
124+
TEXT('style.chart.controls.padding', { def: '0.5rem'}),
125+
TEXT('style.chart.controls.borderRadius', { def: '0.25rem'}),
126+
127+
CHECKBOX('style.chart.zoom.active', { def: true }),
128+
129+
TEXT('style.chart.title.text', { def: 'Title'}),
130+
COLOR('style.chart.title.color', { def: '#1A1A1A'}),
131+
NUMBER('style.chart.title.fontSize', { def: 20, min: 12, max: 36}),
132+
CHECKBOX('style.chart.title.bold', { def: true }),
133+
SELECT('style.chart.title.textAlign', ['left', 'center', 'right'], { def: 'center'}),
134+
NUMBER('style.chart.title.paddingLeft', { def: 0, min: -100, max: 100 }),
135+
NUMBER('style.chart.title.paddingRight', { def: 0, min: -100, max: 100 }),
136+
COLOR('style.chart.title.subtitle.color', { def: '#A1A1A1' }),
137+
TEXT('style.chart.title.subtitle.text', { def: 'Subtitle'}),
138+
NUMBER('style.chart.title.subtitle.fontSize', { def: 16, min: 8, max: 36 }),
139+
CHECKBOX('style.chart.title.subtitle.bold', { def: false })
140+
]);
141+
142+
const config = computed(() => {
143+
const c = convertArrayToObject(model.value);
144+
145+
return {
146+
...c,
147+
// loading: true
148+
}
149+
});
150+
151+
// onMounted(() => {
152+
// if (local.value) {
153+
// console.log(local.value.getData())
154+
// }
155+
// })
156+
157+
const themeOptions = ref([
158+
"",
159+
"dark",
160+
"hack",
161+
"zen",
162+
"concrete",
163+
"default",
164+
"celebration",
165+
"celebrationNight"
166+
])
167+
168+
const currentTheme = ref(themeOptions.value[4]);
169+
170+
const configTheme = computed(() => ({
171+
theme: currentTheme.value,
172+
style: {
173+
chart: {
174+
nodes: {
175+
tooltip: { showOnClick: true }
176+
},
177+
midpoints: { show: true },
178+
title: {
179+
text: 'Title',
180+
subtitle: {
181+
text: 'Subtitle'
182+
}
183+
}
184+
}
185+
}
186+
}));
187+
188+
</script>
189+
190+
<template>
191+
<div style="margin: 12px 0; color: white">
192+
Theme:
193+
<select v-model="currentTheme" @change="step += 1">
194+
<option v-for="opt in themeOptions">{{ opt }}</option>
195+
</select>
196+
</div>
197+
198+
<Box comp="VueUiDag" :dataset="dataset" :config="config">
199+
<template #title>VueUiDag</template>
200+
201+
<template #local>
202+
<LocalVueUiDag :dataset="dataset" :config="config" ref="local">
203+
<!-- <template #node-label="{ node }">
204+
{{ node.label }}
205+
</template>
206+
<template #node="{ node }">
207+
<div style="width: 100%; height: 100%; border: 1px solid red; color: black">
208+
{{ node.label }}
209+
</div>
210+
</template> -->
211+
<!-- <template #tooltip-midpoint="{ edge }">
212+
{{ edge }}
213+
</template>
214+
<template #tooltip-node="{ node }">
215+
{{ node }}
216+
</template> -->
217+
</LocalVueUiDag>
218+
</template>
219+
220+
<template #theme>
221+
<LocalVueUiDag :dataset="dataset" :config="configTheme"/>
222+
</template>
223+
224+
<template #VDUI-local>
225+
<LocalVueDataUi component="VueUiDag" :dataset="dataset" :config="config"/>
226+
</template>
227+
228+
<template #build>
229+
<VueUiDag :dataset="dataset" :config="config"/>
230+
</template>
231+
232+
<template #build-treesh>
233+
<VueUiDagTreeshaken :dataset="dataset" :config="config"/>
234+
</template>
235+
236+
<template #VDUI-build>
237+
<VueDataUi component="VueUiDag" :dataset="dataset" :config="config"/>
238+
</template>
239+
240+
<template #knobs>
241+
<ConfigKnobs :model="model" />
242+
</template>
243+
</Box>
244+
</template>

‎TestingArena/ArenaVueUiIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { VueUiIcon } from "vue-data-ui";
66
import { VueUiIcon as VueUiIconTreeshaken } from "vue-data-ui/vue-ui-icon";
77
88
const icons = ref([
9-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg", "chartStackline", "zoomLock", "zoomUnlock", "lock", "unlock", "triangleInformation", "triangleExclamation"
9+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg", "chartStackline", "zoomLock", "zoomUnlock", "lock", "unlock", "triangleInformation", "triangleExclamation", "direction", "chartDag"
1010
])
1111
1212
</script>

‎TestingArena/Box.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const props = defineProps({
99
type: String
1010
},
1111
dataset: {
12-
type: [Object, Array]
12+
type: [Object, Array, Number]
1313
},
1414
config: {
1515
type: Object,

‎cypress/fixtures/vdui-components.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,41 @@
55
*
66
*/
77
export const components = [
8+
{
9+
name: 'VueUiDag',
10+
dataset: {
11+
nodes: [
12+
{ id: 'A', label: 'AAA' },
13+
{ id: 'B', label: 'BBB' },
14+
{ id: 'C', label: 'CCC' },
15+
],
16+
edges: [
17+
{ from: 'A', to: 'B' },
18+
{ from: 'A', to: 'C' },
19+
]
20+
},
21+
config: {
22+
style: {
23+
chart: {
24+
nodes: {
25+
tooltip: {
26+
showOnClick: true
27+
}
28+
},
29+
midpoints: {
30+
show: true
31+
},
32+
title: {
33+
text: 'Title',
34+
subtitle: {
35+
text: 'Subtitle'
36+
}
37+
}
38+
}
39+
}
40+
},
41+
wrapperClass: '.vue-ui-dag'
42+
},
843
{
944
name: 'VueUiChord',
1045
dataset: {

‎manual-testing/src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const components = [
6868
{ name: 'ArenaVueUiAnnotator', icon: 'annotator'},
6969
{ name: 'ArenaVueUiCursor', icon: 'cursor'},
7070
{ name: 'ArenaVueUiDigits', icon: 'digit8'},
71+
{ name: 'ArenaVueUiDag', icon: 'chartDag' }
7172
].map(componentItem => ({
7273
path: `/${componentItem.name}`,
7374
name: componentItem.name.replace('Arena', ''),

‎manual-testing/src/router/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ const components = [
6262
'ArenaVueUiDashboard',
6363
'ArenaVueUiAnnotator',
6464
'ArenaVueUiCursor',
65-
'ArenaVueUiDigits'
65+
'ArenaVueUiDigits',
66+
'ArenaVueUiDag'
6667
].map(c => ({
6768
path: `/${c}`,
6869
name: c,

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@
5050
"waffle",
5151
"wheel",
5252
"wordcloud",
53-
"circle packing"
53+
"circle packing",
54+
"dag"
5455
],
5556
"author": "Alec Lloyd Probert",
5657
"repository": {
@@ -110,7 +111,7 @@
110111
"remove-attr": "^0.0.13",
111112
"sass": "^1.57.1",
112113
"simple-git": "^3.24.0",
113-
"vite": "^7.2.4",
114+
"vite": "^7.2.6",
114115
"vitest": "^4.0.13",
115116
"vue": "^3.5.25"
116117
}

‎src/DAG/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
All files in the DAG directory are ported from the superb @dagrejs/dagre library, and adapted to function inside vue-data-ui's environment.

0 commit comments

Comments
 (0)