@weni/unnnic-system 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +4738 -4480
- package/dist/unnnic.umd.js +21 -21
- package/package.json +1 -1
- package/src/components/ChartFunnel/ChartFunnel.vue +40 -0
- package/src/components/ChartFunnel/ChartFunnelBaseRow.vue +77 -0
- package/src/components/ChartFunnel/ChartFunnelFiveRows.vue +102 -0
- package/src/components/ChartFunnel/ChartFunnelFourRows.vue +90 -0
- package/src/components/ChartFunnel/ChartFunnelThreeRows.vue +78 -0
- package/src/components/index.js +4 -1
- package/src/stories/ChartFunnel.stories.js +78 -0
package/package.json
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="chartComponent"
|
|
4
|
+
:data="data"
|
|
5
|
+
/>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
import ChartFunnelThreeRows from './ChartFunnelThreeRows.vue';
|
|
10
|
+
import ChartFunnelFourRows from './ChartFunnelFourRows.vue';
|
|
11
|
+
import ChartFunnelFiveRows from './ChartFunnelFiveRows.vue';
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
name: 'UnnnicChartFunnel',
|
|
15
|
+
|
|
16
|
+
components: {
|
|
17
|
+
ChartFunnelThreeRows,
|
|
18
|
+
ChartFunnelFourRows,
|
|
19
|
+
ChartFunnelFiveRows,
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
props: {
|
|
23
|
+
data: {
|
|
24
|
+
type: Array,
|
|
25
|
+
required: true,
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
computed: {
|
|
30
|
+
chartComponent() {
|
|
31
|
+
const componentMap = {
|
|
32
|
+
3: 'ChartFunnelThreeRows',
|
|
33
|
+
4: 'ChartFunnelFourRows',
|
|
34
|
+
5: 'ChartFunnelFiveRows',
|
|
35
|
+
};
|
|
36
|
+
return componentMap[this.data.length] || null;
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
</script>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
class="unnnic-chart-funnel-base-rows"
|
|
4
|
+
:viewBox="viewBox"
|
|
5
|
+
fill="none"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<g
|
|
9
|
+
class="unnnic-chart-funnel-base-rows__row"
|
|
10
|
+
v-for="(row, index) of rows"
|
|
11
|
+
:key="row.title + index"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
class="row__path"
|
|
15
|
+
:d="row.pathD"
|
|
16
|
+
/>
|
|
17
|
+
<text
|
|
18
|
+
x="50%"
|
|
19
|
+
:y="row.titleY"
|
|
20
|
+
class="row__title"
|
|
21
|
+
>
|
|
22
|
+
{{ row.title }}
|
|
23
|
+
</text>
|
|
24
|
+
<text
|
|
25
|
+
x="50%"
|
|
26
|
+
:y="row.descriptionY"
|
|
27
|
+
class="row__description"
|
|
28
|
+
>
|
|
29
|
+
{{ row.description }}
|
|
30
|
+
</text>
|
|
31
|
+
</g>
|
|
32
|
+
</svg>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
export default {
|
|
37
|
+
name: 'UnnnicChartFunnelThreeRows',
|
|
38
|
+
|
|
39
|
+
props: {
|
|
40
|
+
rows: {
|
|
41
|
+
type: Array,
|
|
42
|
+
required: true,
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
viewBox: String,
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<style lang="scss" scoped>
|
|
51
|
+
@import '../../assets/scss/unnnic.scss';
|
|
52
|
+
|
|
53
|
+
.unnnic-chart-funnel-base-rows {
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: 100%;
|
|
56
|
+
margin: 0;
|
|
57
|
+
padding: 0;
|
|
58
|
+
|
|
59
|
+
&__row {
|
|
60
|
+
.row__title,
|
|
61
|
+
.row__description {
|
|
62
|
+
fill: $unnnic-color-neutral-white;
|
|
63
|
+
font-family: $unnnic-font-family-secondary;
|
|
64
|
+
text-anchor: middle;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.row__title {
|
|
68
|
+
font-size: $unnnic-font-size-body-lg;
|
|
69
|
+
font-weight: $unnnic-font-weight-bold;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.row__description {
|
|
73
|
+
font-size: $unnnic-font-size-body-md;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ChartFunnelBaseRow
|
|
3
|
+
class="unnnic-chart-funnel-five-rows"
|
|
4
|
+
:rows="rows"
|
|
5
|
+
viewBox="0 0 361 220"
|
|
6
|
+
/>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
|
|
11
|
+
export default {
|
|
12
|
+
name: 'UnnnicChartFunnelFiveRows',
|
|
13
|
+
|
|
14
|
+
components: {
|
|
15
|
+
ChartFunnelBaseRow,
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
props: {
|
|
19
|
+
data: {
|
|
20
|
+
type: Array,
|
|
21
|
+
required: true,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
computed: {
|
|
26
|
+
rows() {
|
|
27
|
+
const { data } = this;
|
|
28
|
+
return [
|
|
29
|
+
{
|
|
30
|
+
pathD:
|
|
31
|
+
'M352.506 0H8.42251C1.93921 0 -1.85142 7.30766 1.88266 12.6076L24 44H336.75L359.028 12.6324C362.79 7.33528 359.003 0 352.506 0Z',
|
|
32
|
+
titleX: '50%',
|
|
33
|
+
titleY: '20',
|
|
34
|
+
descriptionX: '50%',
|
|
35
|
+
descriptionY: '38',
|
|
36
|
+
title: data[0].title,
|
|
37
|
+
description: data[0].description,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
pathD: 'M337 44H24L56.4654 88H304.535L337 44Z',
|
|
41
|
+
titleX: '50%',
|
|
42
|
+
titleY: '62',
|
|
43
|
+
descriptionX: '50%',
|
|
44
|
+
descriptionY: '80',
|
|
45
|
+
title: data[1].title,
|
|
46
|
+
description: data[1].description,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
pathD: 'M304.5 88H56.5L88.9564 132H273.708L304.5 88Z',
|
|
50
|
+
titleX: '50%',
|
|
51
|
+
titleY: '106',
|
|
52
|
+
descriptionX: '50%',
|
|
53
|
+
descriptionY: '124',
|
|
54
|
+
title: data[2].title,
|
|
55
|
+
description: data[2].description,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
pathD: 'M274 132H89L121 176H242L274 132Z',
|
|
59
|
+
titleX: '50%',
|
|
60
|
+
titleY: '150',
|
|
61
|
+
descriptionX: '50%',
|
|
62
|
+
descriptionY: '168',
|
|
63
|
+
title: data[3].title,
|
|
64
|
+
description: data[3].description,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
pathD:
|
|
68
|
+
'M242 176H120.957L130.481 213.947C131.374 217.505 134.573 220 138.241 220H223.89C227.498 220 230.659 217.585 231.608 214.105L242 176Z',
|
|
69
|
+
titleX: '50%',
|
|
70
|
+
titleY: '194',
|
|
71
|
+
descriptionX: '50%',
|
|
72
|
+
descriptionY: '212',
|
|
73
|
+
title: data[4].title,
|
|
74
|
+
description: data[4].description,
|
|
75
|
+
},
|
|
76
|
+
];
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<style lang="scss">
|
|
83
|
+
@import '../../assets/scss/unnnic.scss';
|
|
84
|
+
|
|
85
|
+
.unnnic-chart-funnel-five-rows {
|
|
86
|
+
[class$='row']:nth-child(1) {
|
|
87
|
+
fill: $unnnic-color-weni-950;
|
|
88
|
+
}
|
|
89
|
+
[class$='row']:nth-child(2) {
|
|
90
|
+
fill: $unnnic-color-weni-900;
|
|
91
|
+
}
|
|
92
|
+
[class$='row']:nth-child(3) {
|
|
93
|
+
fill: $unnnic-color-weni-800;
|
|
94
|
+
}
|
|
95
|
+
[class$='row']:nth-child(4) {
|
|
96
|
+
fill: $unnnic-color-weni-700;
|
|
97
|
+
}
|
|
98
|
+
[class$='row']:nth-child(5) {
|
|
99
|
+
fill: $unnnic-color-weni-600;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ChartFunnelBaseRow
|
|
3
|
+
class="unnnic-chart-funnel-four-rows"
|
|
4
|
+
:rows="rows"
|
|
5
|
+
viewBox="0 0 365 224"
|
|
6
|
+
/>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
|
|
11
|
+
export default {
|
|
12
|
+
name: 'UnnnicChartFunnelFourRows',
|
|
13
|
+
|
|
14
|
+
components: {
|
|
15
|
+
ChartFunnelBaseRow,
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
props: {
|
|
19
|
+
data: {
|
|
20
|
+
type: Array,
|
|
21
|
+
required: true,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
computed: {
|
|
26
|
+
rows() {
|
|
27
|
+
const { data } = this;
|
|
28
|
+
return [
|
|
29
|
+
{
|
|
30
|
+
pathD:
|
|
31
|
+
'M356.374 0H8.57255C2.47804 0 -1.37827 6.54249 1.5734 11.8745L26 56H338.75L363.36 11.8984C366.336 6.56589 362.481 0 356.374 0Z',
|
|
32
|
+
titleX: '50%',
|
|
33
|
+
titleY: '23',
|
|
34
|
+
descriptionX: '50%',
|
|
35
|
+
descriptionY: '43',
|
|
36
|
+
title: data[0].title,
|
|
37
|
+
description: data[0].description,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
pathD: 'M339 56H26L58.4654 112H306.535L339 56Z',
|
|
41
|
+
titleX: '50%',
|
|
42
|
+
titleY: '78',
|
|
43
|
+
descriptionX: '50%',
|
|
44
|
+
descriptionY: '98',
|
|
45
|
+
title: data[1].title,
|
|
46
|
+
description: data[1].description,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
pathD: 'M306.5 112H58.5L90.9564 168H275.708L306.5 112Z',
|
|
50
|
+
titleX: '50%',
|
|
51
|
+
titleY: '136',
|
|
52
|
+
descriptionX: '50%',
|
|
53
|
+
descriptionY: '156',
|
|
54
|
+
title: data[2].title,
|
|
55
|
+
description: data[2].description,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
pathD:
|
|
59
|
+
'M276 168H91L120.697 219.969C122.121 222.462 124.772 224 127.643 224H239.357C242.228 224 244.879 222.462 246.303 219.969L276 168Z',
|
|
60
|
+
titleX: '50%',
|
|
61
|
+
titleY: '190',
|
|
62
|
+
descriptionX: '50%',
|
|
63
|
+
descriptionY: '210',
|
|
64
|
+
title: data[3].title,
|
|
65
|
+
description: data[3].description,
|
|
66
|
+
},
|
|
67
|
+
];
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<style lang="scss">
|
|
74
|
+
@import '../../assets/scss/unnnic.scss';
|
|
75
|
+
|
|
76
|
+
.unnnic-chart-funnel-four-rows {
|
|
77
|
+
[class$='row']:nth-child(1) {
|
|
78
|
+
fill: $unnnic-color-weni-950;
|
|
79
|
+
}
|
|
80
|
+
[class$='row']:nth-child(2) {
|
|
81
|
+
fill: $unnnic-color-weni-800;
|
|
82
|
+
}
|
|
83
|
+
[class$='row']:nth-child(3) {
|
|
84
|
+
fill: $unnnic-color-weni-700;
|
|
85
|
+
}
|
|
86
|
+
[class$='row']:nth-child(4) {
|
|
87
|
+
fill: $unnnic-color-weni-600;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</style>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ChartFunnelBaseRow
|
|
3
|
+
class="unnnic-chart-funnel-three-rows"
|
|
4
|
+
:rows="rows"
|
|
5
|
+
viewBox="0 0 375 222"
|
|
6
|
+
/>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
|
|
11
|
+
export default {
|
|
12
|
+
name: 'UnnnicChartFunnelThreeRows',
|
|
13
|
+
|
|
14
|
+
components: {
|
|
15
|
+
ChartFunnelBaseRow,
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
props: {
|
|
19
|
+
data: {
|
|
20
|
+
type: Array,
|
|
21
|
+
required: true,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
computed: {
|
|
26
|
+
rows() {
|
|
27
|
+
const { data } = this;
|
|
28
|
+
return [
|
|
29
|
+
{
|
|
30
|
+
pathD:
|
|
31
|
+
'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
|
|
32
|
+
titleX: '50%',
|
|
33
|
+
titleY: '32',
|
|
34
|
+
descriptionX: '50%',
|
|
35
|
+
descriptionY: '52',
|
|
36
|
+
title: data[0].title,
|
|
37
|
+
description: data[0].description,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
|
|
41
|
+
titleX: '50%',
|
|
42
|
+
titleY: '106',
|
|
43
|
+
descriptionX: '50%',
|
|
44
|
+
descriptionY: '126',
|
|
45
|
+
title: data[1].title,
|
|
46
|
+
description: data[1].description,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
pathD:
|
|
50
|
+
'M311.5 148H63.5L93.8569 217.213C95.1325 220.122 98.0075 222 101.183 222H275.372C278.603 222 281.517 220.056 282.758 217.073L311.5 148Z',
|
|
51
|
+
titleX: '50%',
|
|
52
|
+
titleY: '180',
|
|
53
|
+
descriptionX: '50%',
|
|
54
|
+
descriptionY: '200',
|
|
55
|
+
title: data[2].title,
|
|
56
|
+
description: data[2].description,
|
|
57
|
+
},
|
|
58
|
+
];
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<style lang="scss">
|
|
65
|
+
@import '../../assets/scss/unnnic.scss';
|
|
66
|
+
|
|
67
|
+
.unnnic-chart-funnel-three-rows {
|
|
68
|
+
[class$='row']:nth-child(1) {
|
|
69
|
+
fill: $unnnic-color-weni-950;
|
|
70
|
+
}
|
|
71
|
+
[class$='row']:nth-child(2) {
|
|
72
|
+
fill: $unnnic-color-weni-800;
|
|
73
|
+
}
|
|
74
|
+
[class$='row']:nth-child(3) {
|
|
75
|
+
fill: $unnnic-color-weni-600;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
</style>
|
package/src/components/index.js
CHANGED
|
@@ -29,7 +29,7 @@ import radio from './Radio/Radio.vue';
|
|
|
29
29
|
import languageSelect from './Dropdown/LanguageSelect.vue';
|
|
30
30
|
import modal from './Modal/Modal.vue';
|
|
31
31
|
import modalUpload from './ModalUpload/ModalUpload.vue';
|
|
32
|
-
import {callAlert, callModal} from '../utils/call';
|
|
32
|
+
import { callAlert, callModal } from '../utils/call';
|
|
33
33
|
import selectSmart from './SelectSmart/SelectSmart.vue';
|
|
34
34
|
// import select from './Select/Select.vue';
|
|
35
35
|
import selectItem from './Select/SelectItem.vue';
|
|
@@ -76,6 +76,7 @@ import ChatsNavbar from './ChatsNavbar/ChatsNavbar.vue';
|
|
|
76
76
|
import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
|
|
77
77
|
import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
|
|
78
78
|
import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
|
|
79
|
+
import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
|
|
79
80
|
|
|
80
81
|
export const components = {
|
|
81
82
|
unnnicFormElement: formElement,
|
|
@@ -157,6 +158,7 @@ export const components = {
|
|
|
157
158
|
unnnicChatsUserAvatar: ChatsUserAvatar,
|
|
158
159
|
unnnicChartMultiLine: ChartMultiLine,
|
|
159
160
|
unnnicEmojiPicker: EmojiPicker,
|
|
161
|
+
unnnicChartFunnel: ChartFunnel,
|
|
160
162
|
};
|
|
161
163
|
|
|
162
164
|
export const unnnicFontSize = fontSize;
|
|
@@ -239,3 +241,4 @@ export const unnnicChatsNavbar = ChatsNavbar;
|
|
|
239
241
|
export const unnnicChatsUserAvatar = ChatsUserAvatar;
|
|
240
242
|
export const unnnicChartMultiLine = ChartMultiLine;
|
|
241
243
|
export const unnnicEmojiPicker = EmojiPicker;
|
|
244
|
+
export const unnnicChartFunnel = ChartFunnel;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import unnnicChartFunnel from '../components/ChartFunnel/ChartFunnel.vue';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Charts/ChartFunnel',
|
|
5
|
+
component: unnnicChartFunnel,
|
|
6
|
+
decorators: [
|
|
7
|
+
() => ({ template: '<div style="width: 500px;"><story /></div>' }),
|
|
8
|
+
],
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const ThreeRows = {
|
|
12
|
+
args: {
|
|
13
|
+
data: [
|
|
14
|
+
{
|
|
15
|
+
title: '100% (18.621)',
|
|
16
|
+
description: 'Execução de fluxo',
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: '67% (12.476)',
|
|
20
|
+
description: 'Execução de fluxo',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
title: '12% (2.234)',
|
|
24
|
+
description: 'Execução de fluxo',
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const FourRows = {
|
|
31
|
+
args: {
|
|
32
|
+
data: [
|
|
33
|
+
{
|
|
34
|
+
title: '100% (18.621)',
|
|
35
|
+
description: 'Execução de fluxo',
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
title: '67% (12.476)',
|
|
39
|
+
description: 'Execução de fluxo',
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
title: '12% (2.234)',
|
|
43
|
+
description: 'Execução de fluxo',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
title: '5% (931)',
|
|
47
|
+
description: 'Execução de fluxo',
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export const FiveRows = {
|
|
54
|
+
args: {
|
|
55
|
+
data: [
|
|
56
|
+
{
|
|
57
|
+
title: '100% (18.621)',
|
|
58
|
+
description: 'Execução de fluxo',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
title: '67% (12.476)',
|
|
62
|
+
description: 'Execução de fluxo',
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
title: '12% (2.234)',
|
|
66
|
+
description: 'Execução de fluxo',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
title: '5% (931)',
|
|
70
|
+
description: 'Execução de fluxo',
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
title: '2% (372)',
|
|
74
|
+
description: 'Execução de fluxo',
|
|
75
|
+
},
|
|
76
|
+
],
|
|
77
|
+
},
|
|
78
|
+
};
|