Skip to content

Commit 5204b23

Browse files
ramiyramiy
committed
Chart Builder: update the builder & fix some bugs
1 parent 96b8dcb commit 5204b23

File tree

1 file changed

+63
-41
lines changed

1 file changed

+63
-41
lines changed

‎src/.vuepress/components/chart-builder.vue‎

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<input type="range" disabled :min="control.min" :max="control.max" :step="control.step" :value="helper[control.id]" @click.prevent="toggleUserData(idx, control)" />
1717
</label>
1818

19-
<button v-if="control.type==='button'" @click.prevent="toggleUserData(idx, control)" :class="{ pressed: userData[idx].includes(control.id) }">
19+
<button v-if="control.type==='button'" @click.prevent="toggleUserData(idx, control)" :class="{ pressed: userData[idx].includes(control.id) }" :disabled="control.disabled">
2020
{{control.label}}
2121
</button>
2222

@@ -54,29 +54,30 @@
5454
<tbody>
5555
<tr>
5656
<th scope="row"> 2000 </th>
57-
<td style="--size: 0.2;"> <span class="data"> 20 </span> </td>
58-
<td style="--size: 0.5;"> <span class="data"> 50 </span> </td>
59-
<td style="--size: 1.0;"> <span class="data"> 100 </span> </td>
60-
<td style="--size: 0.7;"> <span class="data"> 70 </span> </td>
61-
<td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
57+
<td style="--start: 0.4; --size: 0.2;"> <span class="data"> 20 </span> </td>
58+
<td style="--start: 0.3; --size: 0.5;"> <span class="data"> 50 </span> </td>
59+
<td style="--start: 0.2; --size: 1.0;"> <span class="data"> 100 </span> </td>
60+
<td style="--start: 0.1; --size: 0.7;"> <span class="data"> 70 </span> </td>
61+
<td style="--start: 0.0; --size: 0.4;"> <span class="data"> 40 </span> </td>
6262
</tr>
6363
<tr>
6464
<th scope="row"> 2010 </th>
65-
<td style="--size: 0.9;"> <span class="data"> 90 </span> </td>
66-
<td style="--size: 0.6;"> <span class="data"> 60 </span> </td>
67-
<td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
68-
<td style="--size: 0.7;"> <span class="data"> 70 </span> </td>
69-
<td style="--size: 1.0;"> <span class="data"> 100 </span> </td>
65+
<td style="--start: 0.2; --size: 0.9;"> <span class="data"> 90 </span> </td>
66+
<td style="--start: 0.5; --size: 0.6;"> <span class="data"> 60 </span> </td>
67+
<td style="--start: 1.0; --size: 0.4;"> <span class="data"> 40 </span> </td>
68+
<td style="--start: 0.7; --size: 0.3;"> <span class="data"> 30 </span> </td>
69+
<td style="--start: 0.4; --size: 0.2;"> <span class="data"> 20 </span> </td>
7070
</tr>
7171
<tr>
7272
<th scope="row"> 2020 </th>
73-
<td style="--size: 0.2;"> <span class="data"> 20 </span> </td>
74-
<td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
75-
<td style="--size: 0.6;"> <span class="data"> 60 </span> </td>
76-
<td style="--size: 0.8;"> <span class="data"> 80 </span> </td>
77-
<td style="--size: 1.0;"> <span class="data"> 100 </span> </td>
73+
<td style="--start: 0.9; --size: 0.2;"> <span class="data"> 20 </span> </td>
74+
<td style="--start: 0.6; --size: 0.4;"> <span class="data"> 40 </span> </td>
75+
<td style="--start: 0.4; --size: 0.6;"> <span class="data"> 60 </span> </td>
76+
<td style="--start: 0.3; --size: 0.1;"> <span class="data"> 10 </span> </td>
77+
<td style="--start: 0.2; --size: 0.4;"> <span class="data"> 40 </span> </td>
7878
</tr>
7979
</tbody>
80+
8081
</table>
8182

8283
<table :class="chartClass" v-if="! isMultiple">
@@ -93,51 +94,51 @@
9394
<tbody>
9495
<tr>
9596
<th scope="row"> Jan </th>
96-
<td style="--size: 0.3;"> <span class="data"> 30 </span> </td>
97+
<td style="--start: 0.0; --size: 0.3;"> <span class="data"> 30 </span> </td>
9798
</tr>
9899
<tr>
99100
<th scope="row"> Feb </th>
100-
<td style="--size: 0.5;"> <span class="data"> 50 </span> </td>
101+
<td style="--start: 0.3; --size: 0.5;"> <span class="data"> 50 </span> </td>
101102
</tr>
102103
<tr>
103104
<th scope="row"> Mar </th>
104-
<td style="--size: 0.8;"> <span class="data"> 80 </span> </td>
105+
<td style="--start: 0.5; --size: 0.8;"> <span class="data"> 80 </span> </td>
105106
</tr>
106107
<tr>
107108
<th scope="row"> Apr </th>
108-
<td style="--size: 1;"> <span class="data"> 100 </span> </td>
109+
<td style="--start: 0.8; --size: 1.0;"> <span class="data"> 100 </span> </td>
109110
</tr>
110111
<tr>
111112
<th scope="row"> May </th>
112-
<td style="--size: 0.65;"> <span class="data"> 65 </span> </td>
113+
<td style="--start: 1.0; --size: 0.65;"> <span class="data"> 65 </span> </td>
113114
</tr>
114115
<tr>
115116
<th scope="row"> Jun </th>
116-
<td style="--size: 0.45;"> <span class="data"> 45 </span> </td>
117+
<td style="--start: 0.65; --size: 0.45;"> <span class="data"> 45 </span> </td>
117118
</tr>
118119
<tr>
119120
<th scope="row"> Jul </th>
120-
<td style="--size: 0.15;"> <span class="data"> 15 </span> </td>
121+
<td style="--start: 0.45; --size: 0.15;"> <span class="data"> 15 </span> </td>
121122
</tr>
122123
<tr>
123124
<th scope="row"> Aug </th>
124-
<td style="--size: 0.32;"> <span class="data"> 32 </span> </td>
125+
<td style="--start: 0.15; --size: 0.32;"> <span class="data"> 32 </span> </td>
125126
</tr>
126127
<tr>
127128
<th scope="row"> Sep </th>
128-
<td style="--size: 0.6;"> <span class="data"> 60 </span> </td>
129+
<td style="--start: 0.32; --size: 0.6;"> <span class="data"> 60 </span> </td>
129130
</tr>
130131
<tr>
131132
<th scope="row"> Oct </th>
132-
<td style="--size: 0.9;"> <span class="data"> 90 </span> </td>
133+
<td style="--start: 0.6; --size: 0.9;"> <span class="data"> 90 </span> </td>
133134
</tr>
134135
<tr>
135136
<th scope="row"> Nov </th>
136-
<td style="--size: 0.55;"> <span class="data"> 55 </span> </td>
137+
<td style="--start: 0.9; --size: 0.55;"> <span class="data"> 55 </span> </td>
137138
</tr>
138139
<tr>
139140
<th scope="row"> Dec </th>
140-
<td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
141+
<td style="--start: 0.55; --size: 0.4;"> <span class="data"> 40 </span> </td>
141142
</tr>
142143
</tbody>
143144

@@ -147,7 +148,7 @@
147148

148149
<script>
149150
export default {
150-
name: 'SwitchCharts',
151+
name: 'ChartBuilder',
151152
data() {
152153
return {
153154
chartControls: {
@@ -158,10 +159,10 @@ export default {
158159
{ id: 'column', label: 'Column', type: 'button' },
159160
{ id: 'area', label: 'Area', type: 'button' },
160161
{ id: 'line', label: 'Line', type: 'button' },
161-
{ id: 'pie', label: 'Pie', type: 'button' },
162-
{ id: 'donut', label: 'Donut', type: 'button' },
163-
{ id: 'radar', label: 'Radar', type: 'button' },
164-
{ id: 'polar', label: 'Polar', type: 'button' },
162+
{ id: 'pie', label: 'Pie', type: 'button', disabled: 'disabled' },
163+
{ id: 'donut', label: 'Donut', type: 'button', disabled: 'disabled' },
164+
{ id: 'radar', label: 'Radar', type: 'button', disabled: 'disabled' },
165+
{ id: 'polar', label: 'Polar', type: 'button', disabled: 'disabled' },
165166
],
166167
datasets: [
167168
{ id: '', label: 'Datasets', type: 'legend' },
@@ -179,6 +180,11 @@ export default {
179180
{ id: '', label: 'Labels', type: 'legend' },
180181
{ id: 'show-labels', label: 'Show Labels', type: 'button' },
181182
],
183+
data: [
184+
{ id: '', label: 'Data', type: 'legend' },
185+
{ id: 'hide-data', label: 'Hide Data', type: 'button' },
186+
{ id: 'show-data-on-hover', label: 'Show Data on Hover', type: 'button' },
187+
],
182188
reverseOrder: [
183189
{ id: '', label: 'Reverse Order', type: 'legend' },
184190
{ id: 'reverse-data', label: 'Reverse Data', type: 'button' },
@@ -206,6 +212,7 @@ export default {
206212
orientation: [],
207213
labels: [],
208214
axes: [],
215+
data: [],
209216
reverseOrder: [],
210217
spacing: [],
211218
},
@@ -226,14 +233,15 @@ export default {
226233
: 'charts-css ' + this.userData.chartType;
227234
const multiple = this.userData.datasets ? ' ' + this.userData.datasets.join(' ') : '';
228235
const heading = this.userData.heading ? ' ' + this.userData.heading.join(' ') : '';
236+
const data = this.userData.data ? ' ' + this.userData.data.join(' ') : '';
229237
const reverseOrder = this.userData.reverseOrder ? ' ' + this.userData.reverseOrder.join(' ') : '';
230238
const orientation = this.userData.orientation ? ' ' + this.userData.orientation.join(' ') : '';
231239
const labels = this.userData.labels ? ' ' + this.userData.labels.join(' ') : '';
232240
const axes = this.userData.axes ? ' ' + this.userData.axes.join(' ') : '';
233241
const dataSpacing = ( this.userData.spacing.dataSpacing > 0 ) ? ` data-spacing-${this.userData.spacing.dataSpacing}` : '';
234242
const datasetsSpacing = ( this.userData.spacing.datasetsSpacing > 0 ) ? ` datasets-spacing-${this.userData.spacing.datasetsSpacing}` : '';
235243
236-
return `${type} ${multiple} ${heading} ${reverseOrder} ${orientation} ${labels} ${axes} ${dataSpacing} ${datasetsSpacing}`.trim();
244+
return `${type} ${multiple} ${heading} ${data} ${reverseOrder} ${orientation} ${labels} ${axes} ${dataSpacing} ${datasetsSpacing}`.trim();
237245
}
238246
},
239247
watch: {
@@ -290,8 +298,8 @@ export default {
290298
grid-template-areas:
291299
"chart-types multiple heading"
292300
"chart-types orientation labels"
293-
"chart-types order axes"
294-
"chart-types axes2 axes2"
301+
"chart-types data order"
302+
"chart-types axes axes2"
295303
"chart-types spacing spacing";
296304
padding: 1rem;
297305
border: 1px solid lightgrey;
@@ -301,17 +309,19 @@ export default {
301309
.chart-builder .controls fieldset:nth-of-type(3) { grid-area: heading; }
302310
.chart-builder .controls fieldset:nth-of-type(4) { grid-area: orientation; }
303311
.chart-builder .controls fieldset:nth-of-type(5) { grid-area: labels; }
304-
.chart-builder .controls fieldset:nth-of-type(6) { grid-area: order; }
305-
.chart-builder .controls fieldset:nth-of-type(7) { grid-area: axes; }
306-
.chart-builder .controls fieldset:nth-of-type(8) { grid-area: axes2; }
307-
.chart-builder .controls fieldset:nth-of-type(9) { grid-area: spacing; }
312+
.chart-builder .controls fieldset:nth-of-type(6) { grid-area: data; }
313+
.chart-builder .controls fieldset:nth-of-type(7) { grid-area: order; }
314+
.chart-builder .controls fieldset:nth-of-type(8) { grid-area: axes; }
315+
.chart-builder .controls fieldset:nth-of-type(9) { grid-area: axes2; }
316+
.chart-builder .controls fieldset:nth-of-type(10) { grid-area: spacing; }
308317
.chart-builder .controls fieldset {
309318
display: flex;
310319
justify-content: center;
311320
flex-wrap: wrap;
312321
gap: 10px;
313322
margin: 0;
314323
border: 1px solid lightgrey;
324+
padding: 5px 5px 15px;
315325
}
316326
.chart-builder .controls fieldset:first-of-type {
317327
flex-direction: column;
@@ -332,7 +342,8 @@ export default {
332342
transition-duration: 0.3s;
333343
cursor: pointer;
334344
}
335-
.chart-builder .controls button:hover {
345+
.chart-builder .controls button:hover,
346+
.chart-builder .controls button:focus {
336347
background-color: #d57;
337348
box-shadow: 0 4px 4px #666;
338349
}
@@ -342,6 +353,16 @@ export default {
342353
box-shadow: 0 3px 3px #666;
343354
transform: translateY(3px);
344355
}
356+
.chart-builder .controls button[disabled] {
357+
color: #999;
358+
background-color: #ccc;
359+
cursor: not-allowed;
360+
}
361+
.chart-builder .controls button[disabled]:hover,
362+
.chart-builder .controls button[disabled]:focus {
363+
background-color: #ccc;
364+
box-shadow: 0 4px 4px #999;
365+
}
345366
.chart-builder .controls input[type="range"] {
346367
-webkit-appearance: none;
347368
appearance: none;
@@ -372,6 +393,7 @@ export default {
372393
}
373394
.chart-builder table {
374395
margin: 0 auto;
396+
height: 250px;
375397
}
376398
.chart-builder table.charts-css.bar {
377399
width: 100%;

0 commit comments

Comments
 (0)