Skip to content

Commit b6e6b15

Browse files
graphierosgraphieros
committed
New feature - VueUiDag - Add new component
1 parent eecf188 commit b6e6b15

File tree

21 files changed

+2418
-71
lines changed

21 files changed

+2418
-71
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", 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,

‎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,

‎src/atoms/BaseIcon.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,8 @@ const icons = computed(() => {
211211
unlock: `<path d="M 16 8 C 18 1 10 0 8 2 M 3 8 L 17 8 C 18 8 18 9 18 9 L 18 18 C 18 19 17 19 17 19 L 3 19 C 3 19 2 19 2 18 L 2 9 C 2 9 2 8 3 8 M 10 11 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 11 M 10 13 L 10 16" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
212212
triangleInformation: `<path d="M 4 18 L 16 18 C 17 18 20 18 19 15 L 12 3 C 11 1 9 1 8 3 L 1 15 C 0 18 3 18 4 18 M 10 15 L 10 10 M 10 6 A 1 1 0 0 0 10 8 A 1 1 0 0 0 10 6" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`,
213213
triangleExclamation: `<path d="M 4 18 L 16 18 C 17 18 20 18 19 15 L 12 3 C 11 1 9 1 8 3 L 1 15 C 0 18 3 18 4 18 M 10 11 L 10 5 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`,
214+
direction: `<path d="M 18 8 A 1 1 0 0 0 18 8 C 17 -1 3 -1 2 9 M 2 12 C 3 21 17 21 18 11 M 1 6 L 2 9 L 5 7 M 15 13 L 18 11 L 19 14" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
215+
chartDag: `<path d="M 8 2 L 12 2 C 13 2 13 3 13 3 L 13 4 C 13 4 13 5 12 5 L 8 5 C 8 5 7 5 7 4 L 7 3 C 7 3 7 2 8 2 M 2 10 L 2 11 C 2 11 2 12 3 12 L 7 12 C 7 12 8 12 8 11 L 8 10 C 8 10 8 9 7 9 L 3 9 C 2 9 2 10 2 10 M 12 10 L 12 11 C 12 11 12 12 13 12 L 17 12 C 17 12 18 12 18 11 L 18 10 C 18 10 18 9 17 9 L 13 9 C 12 9 12 10 12 10 M 3 16 L 7 16 C 8 16 8 17 8 17 L 8 18 C 8 18 8 19 7 19 L 3 19 C 2 19 2 18 2 18 L 2 17 C 2 17 2 16 3 16 M 12 17 L 12 18 C 12 18 12 19 13 19 L 17 19 C 18 19 18 18 18 18 L 18 17 C 18 16 17 16 17 16 L 13 16 C 12 16 12 17 12 17 M 10 5 C 10 8 5 6 5 9 M 10 5 C 10 8 15 6 15 9 M 5 12 L 5 16 M 15 12 L 15 16" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
214216
}
215217
});
216218

0 commit comments

Comments
 (0)