10BC0 Updated examples + new chart builder · Nititj/ChartsCSS.org@81b2412 · GitHub
Skip to content

Commit 81b2412

Browse files
ramiyramiy
committed
Updated examples + new chart builder
1 parent f4b37fb commit 81b2412

File tree

9 files changed

+432
-295
lines changed

9 files changed

+432
-295
lines changed

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

Lines changed: 382 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,382 @@
1+
<template>
2+
<div class="chart-builder">
3+
4+
<form class="controls">
5+
6+
<fieldset v-for="(group, idx) in chartControls">
7+
8+
<template v-for="control in group">
9+
10+
<legend v-if="control.type==='legend'">
11+
{{control.label}}
12+
</legend>
13+
14+
<label v-if="control.type==='range'" disabled>
15+
{{control.label}}:
16+
<input type="range" disabled :min="control.min" :max="control.max" :step="control.step" :value="helper[control.id]" @click.prevent="toggleUserData(idx, control)" />
17+
</label>
18+
19+
<button v-if="control.type==='button'" @click.prevent="toggleUserData(idx, control)" :class="{ pressed: userData[idx].includes(control.id) }">
20+
{{control.label}}
21+
</button>
22+
23+
</template>
24+
25+
</fieldset>
26+
27+
</form>
28+
29+
<hr>
30+
31+
<div class="chart-code">
32+
&lt;table class="<strong>{{chartClass}}</strong>"&gt;
33+
<br>
34+
...
35+
<br>
36+
&lt;/table&gt;
37+
</div>
38+
39+
<table :class="chartClass" v-if="isMultiple">
40+
41+
<caption> Multiple Dataset Table </caption>
42+
43+
<thead>
44+
<tr>
45+
<th scope="col"> Year </th>
46+
<th scope="col"> Progress 1 </th>
47+
<th scope="col"> Progress 2 </th>
48+
<th scope="col"> Progress 3 </th>
49+
<th scope="col"> Progress 4 </th>
50+
<th scope="col"> Progress 5 </th>
51+
</tr>
52+
</thead>
53+
54+
<tbody>
55+
<tr>
56+
<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>
62+
</tr>
63+
<tr>
64+
<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>
70+
</tr>
71+
<tr>
72+
<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>
78+
</tr>
79+
</tbody>
80+
</table>
81+
82+
<table :class="chartClass" v-if="! isMultiple">
83+
84+
<caption> Single Dataset Table </caption>
85+
86+
<thead>
87+
<tr>
88+
<th scope="col"> Month </th>
89+
<th scope="col"> Progress </th>
90+
</tr>
91+
</thead>
92+
93+
<tbody>
94+
<tr>
95+
<th scope="row"> Jan </th>
96+
<td style="--size: 0.3;"> <span class="data"> 30 </span> </td>
97+
</tr>
98+
<tr>
99+
<th scope="row"> Feb </th>
100+
<td style="--size: 0.5;"> <span class="data"> 50 </span> </td>
101+
</tr>
102+
<tr>
103+
<th scope="row"> Mar </th>
104+
<td style="--size: 0.8;"> <span class="data"> 80 </span> </td>
105+
</tr>
106+
<tr>
107+
<th scope="row"> Apr </th>
1CCF 108+
<td style="--size: 1;"> <span class="data"> 100 </span> </td>
109+
</tr>
110+
<tr>
111+
<th scope="row"> May </th>
112+
<td style="--size: 0.65;"> <span class="data"> 65 </span> </td>
113+
</tr>
114+
<tr>
115+
<th scope="row"> Jun </th>
116+
<td style="--size: 0.45;"> <span class="data"> 45 </span> </td>
117+
</tr>
118+
<tr>
119+
<th scope="row"> Jul </th>
120+
<td style="--size: 0.15;"> <span class="data"> 15 </span> </td>
121+
</tr>
122+
<tr>
123+
<th scope="row"> Aug </th>
124+
<td style="--size: 0.32;"> <span class="data"> 32 </span> </td>
125+
</tr>
126+
<tr>
127+
<th scope="row"> Sep </th>
128+
<td style="--size: 0.6;"> <span class="data"> 60 </span> </td>
129+
</tr>
130+
<tr>
131+
<th scope="row"> Oct </th>
132+
<td style="--size: 0.9;"> <span class="data"> 90 </span> </td>
133+
</tr>
134+
<tr>
135+
<th scope="row"> Nov </th>
136+
<td style="--size: 0.55;"> <span class="data"> 55 </span> </td>
137+
</tr>
138+
<tr>
139+
<th scope="row"> Dec </th>
140+
<td style="--size: 0.4;"> <span class="data"> 40 </span> </td>
141+
</tr>
142+
</tbody>
143+
144+
</table>
145+
</div>
146+
</template>
147+
148+
<script>
149+
export default {
150+
name: 'SwitchCharts',
151+
data() {
152+
return {
153+
chartControls: {
154+
chartType: [
155+
{ id: '', label: 'Chart Type', type: 'legend' },
156+
{ id: '', label: 'None', type: 'button' },
157+
{ id: 'bar', label: 'Bar', type: 'button' },
158+
{ id: 'column', label: 'Column', type: 'button' },
159+
{ id: 'line', label: 'Line', type: 'button' },
160+
{ id: 'bubble', label: 'Bubble', 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' },
165+
],
166+
datasets: [
167+
{ id: '', label: 'Datasets', type: 'legend' },
168+
{ id: 'multiple', label: 'Multiple', type: 'button' },
169+
],
170+
heading: [
171+
{ id: '', label: 'Chart Heading', type: 'legend' },
172+
{ id: 'show-heading', label: 'Heading', type: 'button' },
173+
],
174+
orientation: [
175+
{ id: '', label: 'Orientation', type: 'legend' },
176+
{ id: 'reverse', label: 'Reverse', type: 'button' },
177+
],
178+
labels: [
179+
{ id: '', label: 'Labels', type: 'legend' },
180+
{ id: 'show-labels', label: 'Show Labels', type: 'button' },
181+
],
182+
reverseOrder: [
183+
{ id: '', label: 'Reverse Order', type: 'legend' },
184+
{ id: 'reverse-data', label: 'Reverse Data', type: 'button' },
185+
{ id: 'reverse-datasets', label: 'Reverse Datasets', type: 'button' },
186+
],
187+
axes: [
188+
{ id: '', label: 'Axes', type: 'legend' },
189+
{ id: 'show-primary-axis', label: 'Primary Axis', type: 'button' },
190+
{ id: 'show-data-axes', label: 'Data Axes', type: 'button' },
191+
],
192+
axes2: [
193+
{ id: '', label: 'Axes', type: 'legend' },
194+
{ id: 'show-*-secondary-axes', label: 'Secondary Axes', type: 'range', min: '0', max: '10', step: '1' },
195+
],
196+
spacing: [
197+
{ id: '', label: 'Spacing', type: 'legend' },
198+
{ id: 'data-spacing-*', label: 'Data', type: 'range', min: '0', max: '20', step: '1' },
199+
{ id: 'datasets-spacing-*', label: 'Dataset', type: 'range', min: '0', max: '20', step: '1' },
200+
],
201+
},
202+
userData: {
203+
chartType: [''],
204+
datasets: [],
205+
heading: [],
206+
orientation: [],
207+
labels: [],
208+
axes: [],
209+
reverseOrder: [],
210+
spacing: [],
211+
},
212+
helper: {
213+
'show-*-secondary-axes': 0,
214+
'data-spacing-*': 0,
215+
'dataset-spacing-*': 0,
216+
},
217+
}
218+
},
219+
computed: {
220+
isMultiple() {
221+
return this.userData.datasets.includes('multiple');
222+
},
223+
chartClass() {
224+
const type = ( !Array.isArray(this.userData.chartType) || this.userData.chartType.length <= 0 || this.userData.chartType[0] === '' )
225+
? ''
226+
: 'charts-css ' + this.userData.chartType;
227+
const multiple = this.userData.datasets ? ' ' + this.userData.datasets.join(' ') : '';
228+
const heading = this.userData.heading ? ' ' + this.userData.heading.join(' ') : '';
229+
const reverseOrder = this.userData.reverseOrder ? ' ' + this.userData.reverseOrder.join(' ') : '';
230+
const orientation = this.userData.orientation ? ' ' + this.userData.orientation.join(' ') : '';
231+
const labels = this.userData.labels ? ' ' + this.userData.labels.join(' ') : '';
232+
const axes = this.userData.axes ? ' ' + this.userData.axes.join(' ') : '';
233+
const dataSpacing = ( this.userData.spacing.dataSpacing > 0 ) ? ` data-spacing-${this.userData.spacing.dataSpacing}` : '';
234+
const datasetsSpacing = ( this.userData.spacing.datasetsSpacing > 0 ) ? ` datasets-spacing-${this.userData.spacing.datasetsSpacing}` : '';
235+
236+
return `${type} ${multiple} ${heading} ${reverseOrder} ${orientation} ${labels} ${axes} ${dataSpacing} ${datasetsSpacing}`.trim();
237+
}
238+
},
239+
watch: {
240+
helper(newValue, oldValue) {
241+
var index = this.userData[group].indexOf(control.id);
242+
243+
if (index === -1) {
244+
this.userData[group].push(control.id.replace('*', 'xxx'));
245+
} else {
246+
this.userData[group].splice(index, 1);
247+
}
248+
}
249+
},
250+
methods: {
251+
toggleUserData(group, control) {
252+
// Update chart type group (unique case)
253+
if (group === 'chartType') {
254+
this.userData.chartType = [];
255+
this.userData[group].push(control.id);
256+
return;
257+
}
258+
259+
// Other groups
260+
if (control.type === 'button') {
261+
// Buttons
262+
var index = this.userData[group].indexOf(control.id);
263+
if (index === -1) {
264+
this.userData[group].push(control.id);
265+
} else {
266+
this.userData[group].splice(index, 1);
267+
}
268+
} else if (control.type === 'range') {
269+
// Range
270+
var className = this.helper[control.id];
271+
var index = this.userData[group].indexOf(control.id);
272+
273+
if (index === -1) {
274+
// this.userData[group].push(control.id.replace('*', 'xxx'));
275+
} else {
276+
// this.userData[group].splice(index, 1);
277+
}
278+
}
279+
280+
}
281+
}
282+
}
283+
</script>
284+
285+
<style>
286+
.chart-builder .controls {
287+
display: grid;
288+
grid-template-columns: 110px 1fr 1fr;
289+
gap: 20px 20px;
290+
grid-template-areas:
291+
"chart-types multiple heading"
292+
"chart-types orientation labels"
293+
"chart-types order axes"
294+
"chart-types axes2 axes2"
295+
"chart-types spacing spacing";
296+
padding: 1rem;
297+
border: 1px solid lightgrey;
298+
}
299+
.chart-builder .controls fieldset:nth-of-type(1) { grid-area: chart-types; }
300+
.chart-builder .controls fieldset:nth-of-type(2) { grid-area: multiple; }
301+
.chart-builder .controls fieldset:nth-of-type(3) { grid-area: heading; }
302+
.chart-builder .controls fieldset:nth-of-type(4) { grid-area: orientation; }
303+
.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; }
308+
.chart-builder .controls fieldset {
309+
display: flex;
310+
justify-content: center;
311+
flex-wrap: wrap;
312+
gap: 10px;
313+
margin: 0;
314+
border: 1px solid lightgrey;
315+
}
316+
.chart-builder .controls fieldset:first-of-type {
317+
flex-direction: column;
318+
justify-content: flex-start;
319+
align-content: center;
320+
}
321+
.chart-builder .controls button {
322+
-webkit-appearance: none;
323+
appearance: none;
324+
padding: 8px 12px;
325+
border: 1px solid black;
326+
border: 0;
327+
border-radius: 6px;
328+
color: #fff;
329+
outline: none;
330+
background-color: #f57;
331+
box-shadow: 0 4px 4px #999;
332+
transition-duration: 0.3s;
333+
cursor: pointer;
334+
}
335+
.chart-builder .controls button:hover {
336+
background-color: #d57;
337+
box-shadow: 0 4px 4px #666;
338+
}
339+
.chart-builder .controls button:active,
340+
.chart-builder .controls button.pressed {
341+
background-color: #a13;
342+
box-shadow: 0 3px 3px #666;
343+
transform: translateY(3px);
344+
}
345+
.chart-builder .controls input[type="range"] {
346+
-webkit-appearance: none;
347+
appearance: none;
348+
width: 100%;
349+
height: 8px;
350+
background: #d3d3d3;
351+
outline: none;
352+
}
353+
.chart-builder .controls input[type="range"]::-webkit-slider-thumb,
354+
.chart-builder .controls input[type="range"]::-moz-range-thumb {
355+
-webkit-appearance: none;
356+
appearance: none;
357+
width: 14px;
358+
height: 14px;
359+
border: 0;
360+
border-radius: 50%;
361+
background: #f57;
362+
cursor: pointer;
363+
}
364+
.chart-builder .chart-code {
365+
margin-block-start: 2rem;
366+
margin-block-end: 2rem;
367+
padding: 1rem;
368+
border: 1px solid lightgrey;
369+
}
370+
.chart-builder .chart-code strong {
371+
font-weight: bold;
372+
}
373+
.chart-builder table {
374+
margin: 0 auto;
375+
}
376+
.chart-builder table.charts-css.bar {
377+
width: 100%;
378+
}
379+
.chart-builder table.charts-css.column {
380+
height: 200px;
381+
}
382+
</style>

0 commit comments

Comments
 (0)