1
+ <script setup>
2
+ import { ref , computed } from " vue" ;
3
+ import LocalVueUiChord from ' ../src/components/vue-ui-chord.vue' ;
4
+ import LocalVueDataUi from ' ../src/components/vue-data-ui.vue' ;
5
+ import Box from " ./Box.vue" ;
6
+ import convertArrayToObject from " ./convertModel" ;
7
+ import { useArena } from " ../src/useArena" ;
8
+
9
+ const { local , build , vduiLocal , vduiBuild , toggleTable } = useArena ()
10
+
11
+ const dataset = ref ({
12
+ matrix: [
13
+ [ 12000 , 6000 , 9000 , 3000 ],
14
+ [ 2000 , 10000 , 2000 , 6001 ],
15
+ [ 8000 , 1600 , 8000 , 8001 ],
16
+ [ 1000 , 1000 , 1000 , 7001 ]
17
+ ],
18
+ labels: [' Group A' , ' Group B with a long name' , ' Group C' , ' Group D' ],
19
+ colors: []
20
+ })
21
+
22
+ const model = ref ([
23
+ { key: ' responsive' , def: false , type: ' checkbox' },
24
+ { key: ' enableRotation' , def: true , type: ' checkbox' },
25
+ { key: ' initialRotation' , def: 0 , type: ' number' , min: 0 , max: 360 },
26
+ { key: ' useCssAnimation' , def: true , type: ' checkbox' },
27
+
28
+ { key: ' style.chart.title.text' , def: ' Title' , type: ' text' , label: ' textContent' , category: ' title' },
29
+ { key: ' style.chart.title.color' , def: ' #1A1A1A' , type: ' color' , label: ' textColor' , category: ' title' },
30
+ { key: ' style.chart.title.fontSize' , def: 20 , type: ' number' , min: 6 , max: 48 , label: ' fontSize' , category: ' title' },
31
+ { key: ' style.chart.title.bold' , def: true , type: ' checkbox' , label: ' bold' , category: ' title' },
32
+ { key: ' style.chart.title.textAlign' , def: ' center' , type: ' select' , options: [' left' , ' center' , ' right' ]},
33
+ { key: ' style.chart.title.paddingLeft' , def: 0 , type: ' number' , min: 0 , max: 24 },
34
+ { key: ' style.chart.title.paddingRight' , def: 0 , type: ' number' , min: 0 , max: 24 },
35
+
36
+ { key: ' style.chart.title.subtitle.text' , def: ' Lorem ipsum dolor sit amet' , type: ' text' , label: ' textContent' , category: ' subtitle' },
37
+ { key: ' style.chart.title.subtitle.color' , def: ' #A1A1A1' , type: ' color' , label: ' textColor' , category: ' subtitle' },
38
+ { key: ' style.chart.title.subtitle.fontSize' , def: 16 , type: ' number' , min: 6 , max: 42 , label: ' fontSize' , category: ' subtitle' },
39
+ { key: ' style.chart.title.subtitle.bold' , def: false , type: ' checkbox' , label: ' bold' , category: ' subtitle' },
40
+
41
+ { key: ' style.chart.backgroundColor' , def: ' #FFFFFF' , type: ' color' },
42
+ { key: ' style.chart.color' , def: ' #1A1A1A' , type: ' color' },
43
+
44
+ { key: ' style.chart.legend.show' , def: true , type: ' checkbox' },
45
+ { key: ' style.chart.legend.backgroundColor' , def: ' #FFFFFF' , type: ' color' },
46
+ { key: ' style.chart.legend.color' , def: ' #1A1A1A' , type: ' color' },
47
+ { key: ' style.chart.legend.fontSize' , def: 14 , type: ' number' , min: 8 , max: 42 },
48
+ { key: ' style.chart.legend.bold' , def: false , type: ' checkbox' },
49
+
50
+ { key: ' style.chart.arcs.innerRadiusRatio' , def: 1 , type: ' number' , min: 0.1 , max: 1.5 , step: 0.1 },
51
+ { key: ' style.chart.arcs.outerRadiusRatio' , def: 1 , type: ' number' , min: 0.1 , max: 1.5 , step: 0.1 },
52
+ { key: ' style.chart.arcs.padAngle' , def: 5 , type: ' number' , min: 0 , max: 48 },
53
+ { key: ' style.chart.arcs.stroke' , def: ' #FFFFFF' , type: ' color' },
54
+ { key: ' style.chart.arcs.strokeWidth' , def: 1 , min: 1 , max: 12 , type: ' number' },
55
+
56
+ { key: ' style.chart.arcs.labels.show' , def: true , type: ' checkbox' },
57
+ { key: ' style.chart.arcs.labels.fontSize' , def: 14 , type: ' number' , min: 8 , max: 42 },
58
+ { key: ' style.chart.arcs.labels.bold' , def: false , type: ' checkbox' },
59
+ { key: ' style.chart.arcs.labels.curved' , def: false , type: ' checkbox' },
60
+ { key: ' style.chart.arcs.labels.adaptColorToBackground' , def: true , type: ' checkbox' },
61
+ { key: ' style.chart.arcs.labels.color' , def: ' #1A1A1A' , type: ' color' },
62
+ { key: ' style.chart.arcs.labels.offset' , def: 0 , type: ' number' , min: - 100 , max: 100 },
63
+
64
+ { key: ' style.chart.ribbons.stroke' , def: ' #FFFFFF' , type: ' color' },
65
+ { key: ' style.chart.ribbons.strokeWidth' , def: 1 , type: ' number' , min: 0 , max: 12 },
66
+ { key: ' style.chart.ribbons.underlayerOpacity' , def: 1 , type: ' range' , min: 0 , max: 1 , step: 0.01 },
67
+ { key: ' style.chart.ribbons.labels.show' , def: true , type: ' checkbox' },
68
+ { key: ' style.chart.ribbons.labels.prefix' , def: ' P' , type: ' text' },
69
+ { key: ' style.chart.ribbons.labels.suffix' , def: ' S' , type: ' text' },
70
+ { key: ' style.chart.ribbons.labels.rounding' , def: 0 , min: 0 , max: 6 , type: ' number' },
71
+ { key: ' style.chart.ribbons.labels.fontSize' , def: 14 , type: ' number' , min: 8 , max: 42 },
72
+ { key: ' style.chart.ribbons.labels.bold' , def: false , type: ' checkbox' },
73
+ { key: ' style.chart.ribbons.labels.useSerieColor' , def: false , type: ' checkbox' },
74
+ { key: ' style.chart.ribbons.labels.color' , def: ' #1A1A1A' , type: ' color' },
75
+ { key: ' style.chart.ribbons.labels.offset' , def: 0 , type: ' number' , min: - 100 , max: 100 },
76
+ { key: ' style.chart.ribbons.labels.minSeparationDeg' , def: 3 , type: ' number' , min: 0 , max: 24 },
77
+ { key: ' style.chart.ribbons.labels.connector.stroke' , def: ' #1A1A1A' , type: ' color' },
78
+ { key: ' style.chart.ribbons.labels.connector.strokeWidth' , def: 1 , type: ' number' , min: 0 , max: 12 },
79
+ { key: ' style.chart.ribbons.labels.marker.show' , def: true , type: ' checkbox' },
80
+ { key: ' style.chart.ribbons.labels.marker.radius' , def: 3 , type: ' number' , min: 0 , max: 12 },
81
+ { key: ' style.chart.ribbons.labels.marker.stroke' , def: ' #FFFFFF' , type: ' color' },
82
+ { key: ' style.chart.ribbons.labels.marker.strokeWidth' , def: 1 , type: ' number' , min: 0 , max: 12 }
83
+ ])
84
+
85
+ const themeOptions = ref ([
86
+ " " ,
87
+ " hack" ,
88
+ " zen" ,
89
+ " concrete" ,
90
+ " default" ,
91
+ " celebration" ,
92
+ " celebrationNight"
93
+ ])
94
+
95
+ const currentTheme = ref (themeOptions .value [0 ])
96
+
97
+
98
+ const config = computed (()=> {
99
+ const c = convertArrayToObject (model .value );
100
+ return {
101
+ ... c,
102
+ theme: currentTheme .value
103
+ }
104
+ })
105
+
106
+ </script >
107
+
108
+ <template >
109
+ <div style =" margin : 12px 0 ; color : white " >
110
+ Theme:
111
+ <select v-model =" currentTheme" @change =" step += 1" >
112
+ <option v-for =" opt in themeOptions" >{{ opt }}</option >
113
+ </select >
114
+ </div >
115
+
116
+ <div style =" width : 600px ; height : 600px ; resize : both ; overflow : auto ; background : white " >
117
+ <LocalVueUiChord
118
+ :dataset =" dataset"
119
+ :config =" {
120
+ ...config,
121
+ responsive: true
122
+ }" />
123
+ </div >
124
+
125
+ <Box >
126
+ <template #title >VueUiChord</template >
127
+
128
+ <template #local >
129
+ <LocalVueUiChord :dataset =" dataset" :config =" config" ref =" local" >
130
+ <!-- <template #pattern="{ seriesIndex, patternId }">
131
+ <pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b3100"/><path fill="none" stroke="#1A1A1A" d="M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2s14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6S49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14S20.785-8.742 16.3-3.661C11.918 1.306 8.353 6-.02 6.002"/></pattern>
132
+
133
+ <pattern v-if="seriesIndex === 1" :id="patternId" width="29" height="50.115" patternTransform="scale(2)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b31"/><path fill="none" stroke="#ecc94b" stroke-linecap="square" stroke-width=".5" d="M14.5 6.628 8.886 3.372v-6.515L14.502-6.4l5.612 3.257-.001 6.514zm0 50.06-5.613-3.256v-6.515l5.614-3.258 5.612 3.257-.001 6.515zm14.497-25.117-5.612-3.257v-6.515L29 18.541l5.612 3.257-.001 6.515zm-29 0-5.612-3.257v-6.515L0 18.541l5.612 3.257v6.515zM14.5 11.82 4.36 5.967l.002-11.706 10.14-5.855L24.638-5.74l-.001 11.707zm0 50.06L4.36 56.028l.002-11.706 10.14-5.855 10.137 5.852-.001 11.707zm14.498-25.118-10.14-5.852.002-11.707L29 13.349l10.137 5.853-.001 11.706zm-29 0-10.139-5.852.002-11.707L0 13.349l10.138 5.853-.002 11.706zm14.501-19.905L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z"/></pattern>
134
+ </template> -->
135
+ </LocalVueUiChord >
136
+ </template >
137
+
138
+ <template #VDUI-local >
139
+ <LocalVueDataUi component =" VueUiChord" :dataset =" dataset" :config =" config" ref =" vduiLocal" />
140
+ </template >
141
+
142
+ <template #build >
143
+ <VueUiChord :dataset =" dataset" :config =" config" ref =" build" />
144
+ </template >
145
+
146
+ <template #VDUI-build >
147
+ <VueDataUi component =" VueUiChord" :dataset =" dataset" :config =" config" ref =" vduiBuild" />
148
+ </template >
149
+
150
+ <template #knobs >
151
+ <div
152
+ style =" display : flex ; flex-direction : row ; flex-wrap :wrap ; align-items :center ; width : 100% ; color : #CCCCCC ; gap :24px ;" >
153
+ <div v-for =" knob in model" >
154
+ <label style =" font-size : 10px " >{{ knob.key }}</label >
155
+ <div
156
+ style =" display :flex ; flex-direction :row ; flex-wrap : wrap ; align-items :center ; gap :6px ; height : 40px " >
157
+ <input v-if =" !['none', 'select'].includes(knob.type)" :step =" knob.step" :type =" knob.type" :min =" knob.min ?? 0"
158
+ :max =" knob.max ?? 0" v-model =" knob.def" @change =" step += 1" >
159
+ <select v-if =" knob.type === 'select'" v-model =" knob.def" @change =" step += 1" >
160
+ <option v-for =" opt in knob.options" >{{ opt }}</option >
161
+ </select >
162
+ </div >
163
+ </div >
164
+ </div >
165
+ </template >
166
+
167
+ <template #config >
168
+ {{ config }}
169
+ </template >
170
+ </Box >
171
+ </template >
0 commit comments