Skip to content

Commit 5d40745

Browse files
graphierosgraphieros
committed
VueUiMolecule added component
1 parent e0a10f8 commit 5d40745

15 files changed

+1086
-11
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1515
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1616
![npm](https://img.shields.io/npm/dt/vue-data-ui)
17-
![Static Badge](https://img.shields.io/badge/components-34-green)
17+
![Static Badge](https://img.shields.io/badge/components-35-green)
1818

1919
[Interactive documentation](https://vue-data-ui.graphieros.com/)
2020

@@ -43,6 +43,7 @@ Available components:
4343
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
4444
- [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
4545
- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
46+
- [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
4647

4748

4849
## Mini charts

‎package-lock.json

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

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.54",
4+
"version": "1.9.55",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -36,7 +36,9 @@
3636
"tiremarks",
3737
"donut evolution",
3838
"mood radar",
39-
"3d bar"
39+
"3d bar",
40+
"molecule",
41+
"tree"
4042
],
4143
"author": "Alec Lloyd Probert",
4244
"repository": {

‎src/App.vue

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import TireTest from "./components/vue-ui-tiremarks.vue";
4545
import MoodRadarTest from "./components/vue-ui-mood-radar.vue";
4646
import Bar3dTest from "./components/vue-ui-3d-bar.vue";
4747
import DigitsTest from "./components/vue-ui-digits.vue";
48+
import MoleculeTest from './components/vue-ui-molecule.vue';
4849
import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
4950
5051
const dataset = ref([
@@ -3664,6 +3665,130 @@ const moodRadarConfig = ref({
36643665
percentage: 66
36653666
})
36663667
3668+
const clusterDataset = ref([
3669+
{
3670+
name: "root",
3671+
details: 'Lorem root',
3672+
nodes: [
3673+
{
3674+
name: 'node1',
3675+
details: 'Lorem ipsum',
3676+
nodes: [
3677+
{ name: 'node1.1', details: 'Lorem ipsum', nodes: [
3678+
{ name: 'node1.1'},
3679+
{ name: 'node1.2'},
3680+
{ name: 'node1.3'},
3681+
]},
3682+
{ name: 'node1.2',nodes: [
3683+
{ name: 'node1.1'},
3684+
{ name: 'node1.2'},
3685+
{ name: 'node1.3'},
3686+
{ name: 'node1.4'},
3687+
]},
3688+
{ name: 'node1.3',nodes: [
3689+
{ name: 'node1.1'},
3690+
{ name: 'node1.2'},
3691+
]},
3692+
{ name: 'node1.4',nodes: [
3693+
{ name: 'node1.1'},
3694+
{ name: 'node1.2'},
3695+
{ name: 'node1.3'},
3696+
{ name: 'node1.4'},
3697+
{ name: 'node1.5'},
3698+
{ name: 'node1.6'},
3699+
]},
3700+
{ name: 'node1.5',nodes: [
3701+
{ name: 'node1.1'},
3702+
{ name: 'node1.2'},
3703+
{ name: 'node1.3'},
3704+
{ name: 'node1.4'},
3705+
{ name: 'node1.5'},
3706+
{ name: 'node1.6'},
3707+
]},
3708+
{ name: 'node1.6', nodes: [
3709+
{ name: 'node1.1'},
3710+
{ name: 'node1.2'},
3711+
{ name: 'node1.3'},
3712+
{ name: 'node1.4'},
3713+
{ name: 'node1.5'},
3714+
{ name: 'node1.6'},
3715+
]},
3716+
]
3717+
},
3718+
{
3719+
name: 'node2',
3720+
nodes: [
3721+
{ name: 'node2.1', nodes: [
3722+
{ name: 'node1.1'},
3723+
{ name: 'node1.2'},
3724+
{ name: 'node1.3'},
3725+
{ name: 'node1.4'},
3726+
{ name: 'node1.5'},
3727+
{ name: 'node1.6', nodes: [
3728+
{ name: 'node1.1'},
3729+
{ name: 'node1.2'},
3730+
{ name: 'node1.3'},
3731+
{ name: 'node1.4'},
3732+
{ name: 'node1.5'},
3733+
{ name: 'node1.6', nodes: [
3734+
{ name: 'node1.1'},
3735+
{ name: 'node1.2'},
3736+
{ name: 'node1.3'},
3737+
{ name: 'node1.4'},
3738+
{ name: 'node1.5'},
3739+
{ name: 'node1.6', nodes: [
3740+
{ name: 'node1.1'},
3741+
{ name: 'node1.2'},
3742+
{ name: 'node1.3'},
3743+
{ name: 'node1.4'},
3744+
{ name: 'node1.5'},
3745+
{ name: 'node1.6'},
3746+
]},
3747+
]},
3748+
]},
3749+
]},
3750+
]
3751+
},
3752+
{
3753+
name: 'node2',
3754+
nodes: [
3755+
{ name: 'node3.1'},
3756+
{ name: 'node3.2'},
3757+
{ name: 'node3.3'},
3758+
]
3759+
},
3760+
{
3761+
name: 'node3',
3762+
nodes: [
3763+
{ name: 'node4.1'},
3764+
{ name: 'node4.2'},
3765+
{ name: 'node4.3'},
3766+
{ name: 'node4.4'},
3767+
]
3768+
},
3769+
{
3770+
name: 'node3',
3771+
nodes: [
3772+
{ name: 'node4.1'},
3773+
{ name: 'node4.2'},
3774+
{ name: 'node4.3'},
3775+
{ name: 'node4.4'},
3776+
{ name: 'node4.5'},
3777+
]
3778+
},
3779+
{
3780+
name: 'node3',
3781+
nodes: [
3782+
{ name: 'node4.1'},
3783+
{ name: 'node4.2'},
3784+
{ name: 'node4.3'},
3785+
{ name: 'node4.4'},
3786+
]
3787+
},
3788+
]
3789+
}
3790+
])
3791+
36673792
</script>
36683793

36693794
<template>
@@ -3743,10 +3868,32 @@ const moodRadarConfig = ref({
37433868
<BaseIcon name="digit7" stroke="#42d392" />
37443869
<BaseIcon name="digit8" stroke="#42d392" />
37453870
<BaseIcon name="digit9" stroke="#42d392" />
3871+
<BaseIcon name="chartCluster" stroke="#42d392" />
3872+
<BaseIcon name="arrowRight" stroke="#42d392" />
3873+
<BaseIcon name="arrowTop" stroke="#42d392" />
3874+
<BaseIcon name="arrowLeft" stroke="#42d392" />
3875+
<BaseIcon name="arrowBottom" stroke="#42d392" />
3876+
37463877
</div>
37473878
</template>
37483879
</Box>
37493880

3881+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_molecule)">
3882+
<template #title>
3883+
<BaseIcon name="chartCluster"/>
3884+
VueUiMolecule
3885+
</template>
3886+
<template #dev>
3887+
<MoleculeTest :dataset="clusterDataset"/>
3888+
</template>
3889+
<template #prod>
3890+
<VueUiMolecule :dataset="clusterDataset"/>
3891+
</template>
3892+
<template #config>
3893+
{{ PROD_CONFIG.vue_ui_molecule }}
3894+
</template>
3895+
</Box>
3896+
37503897
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
37513898
<template #title>
37523899
<BaseIcon name="chartMoodRadar"/>

‎src/atoms/BaseDirectionPad.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup>
2+
import BaseIcon from './BaseIcon.vue';
3+
const props = defineProps({
4+
color: {
5+
type: String,
6+
default: '#FF0000'
7+
}
8+
});
9+
const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'reset'])
10+
</script>
11+
12+
<template>
13+
<div style="position: absolute;bottom:0;right:0;width:80px;height:80px" data-html2canvas-ignore>
14+
<div style="position: relative;height:100%;width:100%">
15+
<button @click="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
16+
<BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>
17+
</button>
18+
<button @click="emit('moveTop')" style="position: absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
19+
<BaseIcon :stroke="color" name="arrowTop" style="cursor: pointer"/>
20+
</button>
21+
<button @click="emit('moveRight')" style="position: absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
22+
<BaseIcon :stroke="color" name="arrowRight" style="cursor: pointer"/>
23+
</button>
24+
<button @click="emit('moveBottom')" style="position: absolute;bottom:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
25+
<BaseIcon :stroke="color" name="arrowBottom" style="cursor: pointer"/>
26+
</button>
27+
<button @click="emit('reset')" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
28+
<BaseIcon :stroke="color" name="close" style="cursor: pointer" :strokeWidth="2"/>
29+
</button>
30+
</div>
31+
</div>
32+
</template>

‎src/atoms/BaseIcon.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,14 @@ const icons = computed(() => {
7979
star: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M3 19 10 15 17 19 14 12 19 8 13 8 10 2 7 8 1 8 6 12 3 19" />`,
8080
tableClose: `<path stroke-width="${props.strokeWidth}" stroke-linecap="round" fill="none" stroke="${props.stroke}" d="M4 1 4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L7 19M4 1 16 1C18 1 19 2 19 4L19 14M18 19 14 16 10 19"/><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="8" y1="1" x2="8" y2="19" stroke-linecap="round" /><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="1" y1="8" x2="19" y2="8" />`,
8181
tableOpen: `<path stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke="${props.stroke}" d="M4 1 4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L7 19M4 1 16 1C18 1 19 2 19 4L19 14M18 16 14 19 10 16"/><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="8" y1="1" x2="8" y2="19" stroke-linecap="round" /><line stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke="${props.stroke}" x1="1" y1="8" x2="19" y2="8" />`,
82+
chartCluster: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" d="M7 10A1 1 0 0013 10 1 1 0 007 10M10 7 10 4A1 1 0 0010 1 1 1 0 0010 4M7 10 4 10A1 1 0 001 10 1 1 0 004 10M10 13 10 16A1 1 0 0010 19 1 1 0 0010 16M13 10 16 10A1 1 0 0019 10 1 1 0 0016 10" />`,
83+
arrowRight: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M18 10 3 1C6 7 6 13 3 19L18 10" stroke-linejoin="round" />`,
84+
arrowTop: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 2 1 17C7 14 13 14 19 17L10 2" stroke-linejoin="round" />`,
85+
arrowLeft: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M2 10 17 1C14 7 14 13 17 19L2 10" stroke-linejoin="round" />`,
86+
arrowBottom: `<path fill="${props.stroke}" stroke="none" stroke-width="none" d="M10 18 1 3C7 6 13 6 19 3L10 18" stroke-linejoin="round" />`,
8287
}
8388
})
8489
85-
86-
/**
87-
* M8 1 7 2 8 3 12 3 13 2 12 1 8 1M7 10 8 9 12 9 13 10 12 11 8 11 7 10M7 18 8 17 12 17 13 18 12 19 8 19 7 18M6 3 7 4 7 8 6 9 5 8 5 4 6 3M6 11 7 12 7 16 6 17 5 16 5 12 6 11M14 3 13 4 13 8 14 9 15 8 15 4 14 3M14 11 15 12 15 16 14 17 13 16 13 12 14 11
88-
*/
8990
</script>
9091

9192
<template>

‎src/atoms/RecursiveCircles.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<template v-for="node in dataset">
3+
<template v-if="node.polygonPath && node.polygonPath.coordinates">
4+
<template v-for="(coordinate, index) in node.polygonPath.coordinates">
5+
<circle
6+
:cx="coordinate.x"
7+
:cy="coordinate.y"
8+
:r="node.circleRadius"
9+
:fill="`url(#gradient_${node.color})`"
10+
:stroke="hoveredUid && hoveredUid === node.uid ? strokeHovered : stroke"
11+
:stroke-width="hoveredUid && hoveredUid === node.uid ? node.circleRadius / 6 : node.circleRadius / 12"
12+
style="cursor:pointer"
13+
@click="zoom(node)"
14+
@mouseover="hover(node)"
15+
@mouseleave="hover(null)"
16+
/>
17+
</template>
18+
<template v-if="node.nodes && node.nodes.length > 0">
19+
<RecursiveCircles
20+
:dataset="node.nodes"
21+
:color="color"
22+
:linkColor="linkColor"
23+
:strokeHovered="strokeHovered"
24+
:hoveredUid="hoveredUid"
25+
@zoom="zoom"
26+
@hover="hover"
27+
/>
28+
</template>
29+
</template>
30+
</template>
31+
</template>
32+
33+
<script setup>
34+
import { toRef } from 'vue';
35+
36+
const props = defineProps({
37+
color: {
38+
type: String,
39+
default: '#000000',
40+
},
41+
dataset: {
42+
type: Array,
43+
default: () => [],
44+
},
45+
hoveredUid: {
46+
type: String,
47+
default: null
48+
},
49+
linkColor: {
50+
type: String,
51+
default: '#CCCCCC',
52+
},
53+
stroke: {
54+
type: String,
55+
default: "#FFFFFF"
56+
},
57+
strokeHovered: {
58+
type: String,
59+
default: '#000000'
60+
},
61+
});
62+
63+
const emit = defineEmits(["zoom", 'hover']);
64+
65+
function zoom(node) {
66+
emit('zoom', node)
67+
}
68+
69+
function hover(node) {
70+
emit('hover', node)
71+
}
72+
73+
const nodes = toRef(props, 'dataset');
74+
75+
nodes.value.forEach((node) => {
76+
if (node.nodes && node.nodes.length > 0) {
77+
node.nodes.forEach((childNode) => {
78+
childNode.parentNode = node;
79+
});
80+
}
81+
});
82+
</script>

0 commit comments

Comments
 (0)