Skip to content

Commit 606255d

Browse files
andrewdalpinoandrewdalpino
committed
CLean up bubble chart
1 parent 5f76b6a commit 606255d

File tree

4 files changed

+135
-129
lines changed

4 files changed

+135
-129
lines changed

‎assets/app.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/app.js.gz

2 Bytes
Binary file not shown.

‎ui/pages/BubbleChart.vue

Lines changed: 133 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,106 @@
11
<template>
22
<div>
3-
<h2 class="title is-size-5"><span class="icon mr-3"><i class="fas fa-cogs"></i></span>Chart Settings</h2>
4-
<div class="columns">
5-
<div class="column is-one-third">
6-
<div class="field">
7-
<label class="label">X Axis</label>
8-
<div class="control">
9-
<div class="select">
10-
<select v-model="dataColumns.xAxis" @change="updateDataset()">
11-
<option :value="null">Select column</option>
12-
<option v-for="(header, offset) in continuousHeaders"
13-
:key="offset"
14-
:value="header.offset"
15-
>{{ header.title }}</option>
16-
</select>
3+
<section class="section">
4+
<div class="container">
5+
<h2 class="title is-size-5"><span class="icon mr-3"><i class="fas fa-cogs"></i></span>Chart Properties</h2>
6+
<div class="columns">
7+
<div class="column is-one-third">
8+
<div class="field">
9+
<label class="label">X Axis</label>
10+
<div class="control">
11+
<div class="select">
12+
<select v-model="settings.dataColumns.xAxis" @change="updateDataset()">
13+
<option :value="null">Select column</option>
14+
<option v-for="(header, offset) in continuousHeaders"
15+
:key="offset"
16+
:value="header.offset"
17+
>{{ header.title }}</option>
18+
</select>
19+
</div>
20+
</div>
1721
</div>
1822
</div>
19-
</div>
20-
</div>
21-
<div class="column is-one-third">
22-
<div class="field">
23-
<label class="label">Y Axis</label>
24-
<div class="control">
25-
<div class="select">
26-
<select v-model="dataColumns.yAxis" @change="updateDataset()">
27-
<option :value="null">Select column</option>
28-
<option v-for="(header, offset) in continuousHeaders"
29-
:key="offset"
30-
:value="header.offset"
31-
>{{ header.title }}</option>
32-
</select>
23+
<div class="column is-one-third">
24+
<div class="field">
25+
<label class="label">Y Axis</label>
26+
<div class="control">
27+
<div class="select">
28+
<select v-model="settings.dataColumns.yAxis" @change="updateDataset()">
29+
<option :value="null">Select column</option>
30+
<option v-for="(header, offset) in continuousHeaders"
31+
:key="offset"
32+
:value="header.offset"
33+
>{{ header.title }}</option>
34+
</select>
35+
</div>
36+
</div>
3337
</div>
3438
</div>
35-
</div>
36-
</div>
37-
<div class="column is-one-third">
38-
<div class="field">
39-
<label class="label">Scale</label>
40-
<div class="control">
41-
<div class="select">
42-
<select v-model="dataColumns.scale" @change="updateDataset()">
43-
<option :value="null">Select column</option>
44-
<option v-for="(header, offset) in continuousHeaders"
45-
:key="offset"
46-
:value="header.offset"
47-
>{{ header.title }}</option>
48-
</select>
39+
<div class="column is-one-third">
40+
<div class="field">
41+
<label class="label">Scale</label>
42+
<div class="control">
43+
<div class="select">
44+
<select v-model="settings.dataColumns.scale" @change="updateDataset()">
45+
<option :value="null">Select column</option>
46+
<option v-for="(header, offset) in continuousHeaders"
47+
:key="offset"
48+
:value="header.offset"
49+
>{{ header.title }}</option>
50+
</select>
51+
</div>
52+
</div>
4953
</div>
5054
</div>
5155
</div>
52-
</div>
53-
</div>
54-
<div class="columns mb-5">
55-
<div class="column is-one-third">
56-
<div class="field">
57-
<label class="label">Bubble Radius</label>
58-
<div class="control">
59-
<input v-model="bubbleRadius" class="slider is-circle has-output is-fullwidth" step="1" min="1" max="50" type="range" @change="updateDataset()" />
60-
<output>{{ bubbleRadius }}</output>
61-
</div>
62-
</div>
63-
</div>
64-
<div class="column is-one-third">
65-
<div class="field">
66-
<label class="label">Bubble Stroke</label>
67-
<div class="control">
68-
<input v-model="bubbleStroke" class="slider is-circle has-output is-fullwidth" step="1" min="1" max="5" type="range" @change="updateBubbleStroke()" />
69-
<output>{{ bubbleStroke }}</output>
56+
<div class="columns mb-5">
57+
<div class="column is-one-third">
58+
<div class="field">
59+
<label class="label">Radius</label>
60+
<div class="control">
61+
<input v-model="settings.radius" class="slider is-circle has-output is-fullwidth" step="1" min="1" max="50" type="range" @change="updateDataset()" />
62+
<output>{{ settings.radius }}</output>
63+
</div>
64+
</div>
7065
</div>
71-
</div>
72-
</div>
73-
<div class="column is-one-third">
74-
<div class="field">
75-
<label class="label">Bubble Color</label>
76-
<div class="control">
77-
<div class="dropdown" :class="{ 'is-active' : colorPickerOpen }">
78-
<div class="dropdown-trigger">
79-
<span class="button" aria-haspopup="true" aria-controls="dropdown-menu2" @click="colorPickerOpen = !colorPickerOpen">
80-
<span class="tag mx-2 px-5" :style="{ background: bubbleColorRgbString }"></span>
81-
<span class="icon is-small">
82-
<i class="fas fa-angle-down" aria-hidden="true"></i>
83-
</span>
84-
</span>
66+
<div class="column is-one-third">
67+
<div class="field">
68+
<label class="label">Stroke</label>
69+
<div class="control">
70+
<input v-model="settings.stroke" class="slider is-circle has-output is-fullwidth" step="1" min="1" max="5" type="range" @change="updateStroke()" />
71+
<output>{{ settings.stroke }}</output>
8572
</div>
86-
<div class="dropdown-menu" role="menu">
87-
<div class="dropdown-content">
88-
<div class="dropdown-item">
89-
<div>
90-
<input v-model="bubbleColor.r" class="slider is-danger is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateBubbleColor()" />
91-
<output>{{ bubbleColor.r }}</output>
92-
</div>
93-
<div>
94-
<input v-model="bubbleColor.g" class="slider is-success is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateBubbleColor()" />
95-
<output>{{ bubbleColor.g }}</output>
96-
</div>
97-
<div>
98-
<input v-model="bubbleColor.b" class="slider is-info is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateBubbleColor()" />
99-
<output>{{ bubbleColor.b }}</output>
73+
</div>
74+
</div>
75+
<div class="column is-one-third">
76+
<div class="field">
77+
<label class="label">Color</label>
78+
<div class="control">
79+
<div class="dropdown" :class="{ 'is-active' : colorPickerOpen }">
80+
<div class="dropdown-trigger">
81+
<span class="button" aria-haspopup="true" aria-controls="dropdown-menu2" @click="colorPickerOpen = !colorPickerOpen">
82+
<span class="tag mx-2 px-5" :style="{ background: rgbColorString }"></span>
83+
<span class="icon is-small">
84+
<i class="fas fa-angle-down" aria-hidden="true"></i>
85+
</span>
86+
</span>
87+
</div>
88+
<div class="dropdown-menu" role="menu">
89+
<div class="dropdown-content">
90+
<div class="dropdown-item">
91+
<div>
92+
<input v-model="settings.color.r" class="slider is-danger is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateColor()" />
93+
<output>{{ settings.color.r }}</output>
94+
</div>
95+
<div>
96+
<input v-model="settings.color.g" class="slider is-success is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateColor()" />
97+
<output>{{ settings.color.g }}</output>
98+
</div>
99+
<div>
100+
<input v-model="settings.color.b" class="slider is-info is-circle has-output is-fullwidth" step="1" min="0" max="255" type="range" @change="updateColor()" />
101+
<output>{{ settings.color.b }}</output>
102+
</div>
103+
</div>
100104
</div>
101105
</div>
102106
</div>
@@ -105,10 +109,14 @@
105109
</div>
106110
</div>
107111
</div>
108-
</div>
109-
<figure class="mt-5">
110-
<canvas id="dataset-bubble-chart" width="550" height="550"></canvas>
111-
</figure>
112+
</section>
113+
<section class="section">
114+
<div class="container">
115+
<figure class="mt-5">
116+
<canvas id="dataset-bubble-chart" width="550" height="550"></canvas>
117+
</figure>
118+
</div>
119+
</section>
112120
</div>
113121
</template>
114122

@@ -118,19 +126,21 @@ import bus from '../bus';
118126
export default {
119127
data() {
120128
return {
121-
dataColumns: {
122-
xAxis: null,
123-
yAxis: null,
124-
scale: null,
125-
},
126-
bubbleColor: {
127-
r: 143,
128-
g: 59,
129-
b: 222,
129+
settings: {
130+
dataColumns: {
131+
xAxis: null,
132+
yAxis: null,
133+
scale: null,
134+
},
135+
radius: 5,
136+
stroke: 2,
137+
color: {
138+
r: 143,
139+
g: 59,
140+
b: 222,
141+
},
130142
},
131143
colorPickerOpen: false,
132-
bubbleRadius: 5,
133-
bubbleStroke: 2,
134144
chart: null,
135145
};
136146
},
@@ -141,6 +151,9 @@ export default {
141151
},
142152
},
143153
computed: {
154+
rgbColorString() {
155+
return 'rgb(' + Object.values(this.settings.color).join(', ') + ')';
156+
},
144157
continuousHeaders() {
145158
return this.dataset.header.map((title, offset) => {
146159
return {
@@ -151,9 +164,6 @@ export default {
151164
return Number( this.dataset.data[0][offset]) == this.dataset.data[0][offset];
152165
});
153166
},
154-
bubbleColorRgbString() {
155-
return 'rgb(' + Object.values(this.bubbleColor).join(', ') + ')';
156-
},
157167
},
158168
mounted() {
159169
let context = document.getElementById('dataset-bubble-chart').getContext('2d');
@@ -164,8 +174,8 @@ export default {
164174
datasets: [
165175
{
166176
label: 'Bubbles',
167-
borderColor: this.bubbleColorRgbString,
168-
borderWidth: this.bubbleStroke,
177+
borderColor: this.rgbColorString,
178+
borderWidth: this.settings.stroke,
169179
fill: true,
170180
},
171181
],
@@ -211,24 +221,24 @@ export default {
211221
});
212222
213223
bus.$on('dataset-imported', (payload) => {
214-
this.dataColumns.xAxis = null;
215-
this.dataColumns.yAxis = null;
216-
this.dataColumns.scale = null;
224+
this.settings.dataColumns.xAxis = null;
225+
this.settings.dataColumns.yAxis = null;
226+
this.settings.dataColumns.scale = null;
217227
218228
this.updateDataset();
219229
});
220230
},
221231
methods: {
222232
updateDataset() {
223-
if (this.dataColumns.xAxis !== null && this.dataColumns.yAxis !== null) {
224-
this.chart.options.scales.xAxes[0].scaleLabel.labelString = this.dataset.header[this.dataColumns.xAxis];
225-
this.chart.options.scales.yAxes[0].scaleLabel.labelString = this.dataset.header[this.dataColumns.yAxis];
233+
if (this.settings.dataColumns.xAxis !== null && this.settings.dataColumns.yAxis !== null) {
234+
this.chart.options.scales.xAxes[0].scaleLabel.labelString = this.dataset.header[this.settings.dataColumns.xAxis];
235+
this.chart.options.scales.yAxes[0].scaleLabel.labelString = this.dataset.header[this.settings.dataColumns.yAxis];
226236
227-
if (this.dataColumns.scale !== null) {
237+
if (this.settings.dataColumns.scale !== null) {
228238
let values = [];
229239
230240
this.dataset.data.forEach((row) => {
231-
values.push(row[this.dataColumns.scale])
241+
values.push(row[this.settings.dataColumns.scale])
232242
});
233243
234244
const min = Math.min(...values);
@@ -247,9 +257,9 @@ export default {
247257
248258
this.dataset.data.forEach((row, offset) => {
249259
data.push({
250-
x: row[this.dataColumns.xAxis],
251-
y: row[this.dataColumns.yAxis],
252-
r: weights[offset] * this.bubbleRadius,
260+
x: row[this.settings.dataColumns.xAxis],
261+
y: row[this.settings.dataColumns.yAxis],
262+
r: weights[offset] * this.settings.radius,
253263
});
254264
});
255265
@@ -260,13 +270,13 @@ export default {
260270
261271
this.chart.update();
262272
},
263-
updateBubbleStroke() {
264-
this.chart.data.datasets[0].borderWidth = this.bubbleStroke;
273+
updateStroke() {
274+
this.chart.data.datasets[0].borderWidth = this.settings.stroke;
265275
266276
this.chart.update();
267277
},
268-
updateBubbleColor() {
269-
this.chart.data.datasets[0].borderColor = this.bubbleColorRgbString;
278+
updateColor() {
279+
this.chart.data.datasets[0].borderColor = this.rgbColorString;
270280
271281
this.chart.update();
272282
},

‎ui/pages/Visualizer.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,7 @@
1818
<dataset-preview :dataset="dataset"></dataset-preview>
1919
</div>
2020
</section>
21-
<section class="section">
22-
<div class="container">
23-
<router-view :dataset="dataset"></router-view>
24-
</div>
25-
</section>
21+
<router-view :dataset="dataset"></router-view>
2622
</div>
2723
</template>
2824

0 commit comments

Comments
 (0)