Skip to content

Commit fb8e834

Browse files
ignoreintuitionignoreintuition
authored
Merge pull request #120 from ignoreintuition/issue-11-multivariate
Issue 11 multivariate
2 parents 86e2dc8 + ffae946 commit fb8e834

15 files changed

+410
-270
lines changed

‎dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css integrity=sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm crossorigin=anonymous><title>v-chart-plugin</title><link href=/v-chart-plugin-demo/static/css/app.f304e2ab4d8ba945cb52a7708d244e45.css rel=stylesheet></head><body bgcolor=yellow><div id=app></div><script type=text/javascript src=/v-chart-plugin-demo/static/js/manifest.c423efaf7696a83d1404.js></script><script type=text/javascript src=/v-chart-plugin-demo/static/js/vendor.204a476a59e23f5db787.js></script><script type=text/javascript src=/v-chart-plugin-demo/static/js/app.fa53c39ff82bc0000f0f.js></script></body><script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script><script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin=anonymous></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity=sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl crossorigin=anonymous></script></html>
1+
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css integrity=sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm crossorigin=anonymous><title>v-chart-plugin</title><link href=/v-chart-plugin-demo/static/css/app.f304e2ab4d8ba945cb52a7708d244e45.css rel=stylesheet></head><body bgcolor=yellow><div id=app></div><script type=text/javascript src=/v-chart-plugin-demo/static/js/manifest.c423efaf7696a83d1404.js></script><script type=text/javascript src=/v-chart-plugin-demo/static/js/vendor.204a476a59e23f5db787.js></script><script type=text/javascript src=/v-chart-plugin-demo/static/js/app.d0cfa1f5b8fb363d2216.js></script></body><script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script><script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin=anonymous></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity=sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl crossorigin=anonymous></script></html>

‎dist/module/assets/data/sales.js

+24
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,84 @@ export default [{
33
month: 'Jan',
44
year: 2018,
55
total: 475,
6+
forecast: 500,
7+
yoy: 1.05,
68
actual: true
79
}, {
810
month: 'Feb',
911
year: 2018,
1012
total: 515,
13+
forecast: 525,
14+
yoy: 1.03,
1115
actual: true
1216
}, {
1317
month: 'Mar',
1418
year: 2018,
1519
total: 390,
20+
forecast: 480,
21+
yoy: .95,
1622
actual: true
1723
}, {
1824
month: 'Apr',
1925
year: 2018,
2026
total: 430,
27+
forecast: 440,
28+
yoy: .80,
2129
actual: true
2230
}, {
2331
month: 'May',
2432
year: 2018,
2533
total: 510,
34+
forecast: 500,
35+
yoy: .70,
2636
actual: true
2737
}, {
2838
month: 'Jun',
2939
year: 2018,
3040
total: 399,
41+
forecast: 450,
42+
yoy: .75,
3143
actual: true
3244
}, {
3345
month: 'Jul',
3446
year: 2018,
3547
total: 601,
48+
forecast: 550,
49+
yoy: 1.00,
3650
actual: true
3751
}, {
3852
month: 'Aug',
3953
year: 2018,
4054
total: 496,
55+
forecast: 480,
56+
yoy: 1.15,
4157
actual: true
4258
}, {
4359
month: 'Sep',
4460
year: 2018,
4561
total: 379,
62+
forecast: 440,
63+
yoy: 1.10,
4664
actual: true
4765
}, {
4866
month: 'Oct',
4967
year: 2018,
5068
total: 410,
69+
forecast: 430,
70+
yoy: .85,
5171
actual: false
5272
}, {
5373
month: 'Nov',
5474
year: 2018,
5575
total: 490,
76+
forecast: 500,
77+
yoy: .95,
5678
actual: false
5779
}, {
5880
month: 'Dec',
5981
year: 2018,
6082
total: 610,
83+
forecast: 625,
84+
yoy: 1.01,
6185
actual: false
6286
}];

‎dist/module/import/lineGraph.js

+45-35
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ var lineGraph = function chart(mode) {
2727
*/
2828
var cs = {
2929
palette: {
30-
lineFill: '#ffcdcd',
30+
lineFill: ['#ffcdcd', '#005792'],
3131
pointFill: '#005792',
3232
pointStroke: '#d1f4fa'
3333
},
@@ -49,18 +49,23 @@ var lineGraph = function chart(mode) {
4949
* @param {Object} points (svg element)
5050
*/
5151
var enter = function enter(points, path) {
52-
if (mode === 'init') path.enter().append('path').attr('d', cs.lineFunction(_this.ds)).attr('fill', 'none').attr('stroke', cs.palette.lineFill).attr('stroke-width', 3);
53-
54-
points.enter().append('circle').attr('class', _this.selector).attr('r', 2).on('mouseover', function (d) {
55-
_this.addTooltip(d, window.event);
56-
}).on('mouseout', function (d) {
57-
_this.removeTooltip(d);
58-
}).attr('cx', function (d) {
59-
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
60-
}).attr('cy', function (d) {
61-
return cs.y.scale(d.metric);
52+
_this.metric.forEach(function (e, i) {
53+
path[i].enter().append('path').attr('d', cs.lineFunction[i](_this.ds)).attr('fill', 'none').attr('id', 'p' + i).attr('stroke', cs.palette.lineFill[i]).attr('stroke-width', 3);
6254
});
63-
return points;
55+
56+
// points.enter()
57+
// .append('circle')
58+
// .attr('class', this.selector)
59+
// .attr('r', 2)
60+
// .on('mouseover', (d) => {
61+
// this.addTooltip(d, window.event);
62+
// })
63+
// .on('mouseout', (d) => {
64+
// this.removeTooltip(d);
65+
// })
66+
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
67+
// .attr('cy', d => cs.y.scale(d.metric[0]));
68+
// return points;
6469
};
6570
/**
6671
* Runs when a value of an element in dataset is changed
@@ -69,18 +74,16 @@ var lineGraph = function chart(mode) {
6974
* @param {Object} points (svg element)
7075
*/
7176
var transition = function transition(points, path) {
72-
path.transition().attr('d', cs.lineFunction(_this.ds));
73-
74-
points.transition().attr('cx', function (d) {
75-
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
76-
}).attr('cy', function (d) {
77-
return cs.y.scale(d.metric);
78-
}).attr('cx', function (d) {
79-
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
80-
}).attr('cy', function (d) {
81-
return cs.y.scale(d.metric);
77+
_this.metric.forEach(function (e, i) {
78+
path[i].transition().attr('d', cs.lineFunction[i](_this.ds));
8279
});
83-
return points;
80+
81+
// points.transition()
82+
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
83+
// .attr('cy', d => cs.y.scale(d.metric[0]))
84+
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
85+
// .attr('cy', d => cs.y.scale(d.metric[0]));
86+
// return points;
8487
};
8588

8689
/**
@@ -91,7 +94,9 @@ var lineGraph = function chart(mode) {
9194
*/
9295
var exit = function exit(points, path) {
9396
points.exit().remove();
94-
path.exit().remove();
97+
_this.metric.forEach(function (e, i) {
98+
path[i].exit().remove();
99+
});
95100
return points;
96101
};
97102

@@ -100,9 +105,8 @@ var lineGraph = function chart(mode) {
100105
* @member buildScales
101106
* @function
102107
*/
103-
var buildScales = function buildScales() {
108+
var buildScales = function buildScales(cs) {
104109
cs.y.scale = d3.scaleLinear().domain([_this.min, _this.max]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
105-
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
106110
_this.ds.forEach(function (t) {
107111
return cs.x.domain.push(t.dim);
108112
});
@@ -116,22 +120,31 @@ var lineGraph = function chart(mode) {
116120
* @member drawAxis
117121
* @function
118122
*/
119-
var drawAxis = function drawAxis() {
123+
var drawAxis = function drawAxis(cs) {
120124
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
121125
cs.x.xOffset = cs.y.axisWidth + 5;
122126
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;
127+
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
123128
cs.y.xOffset = cs.y.axisWidth;
124129
cs.y.yOffset = 0;
130+
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
131+
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);
125132
};
126133

127-
cs.lineFunction = d3.line().x(function (d) {
128-
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
129-
}).y(function (d) {
130-
return cs.y.scale(d.metric);
134+
cs.lineFunction = [];
135+
this.metric.forEach(function (e, i) {
136+
cs.lineFunction.push(d3.line().x(function (d) {
137+
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
138+
}).y(function (d) {
139+
return cs.y.scale(d.metric[i]);
140+
}));
131141
});
132142

133143
var points = svgContainer.selectAll('circle').data(this.ds);
134-
var path = svgContainer.selectAll('path').data(this.ds);
144+
var path = [];
145+
this.metric.forEach(function (e, i) {
146+
path.push(svgContainer.selectAll('path#p' + i).data(_this.ds));
147+
});
135148

136149
cs = this.setOverrides(cs, this.chartData.overrides);
137150

@@ -141,9 +154,6 @@ var lineGraph = function chart(mode) {
141154
transition(points, path);
142155
exit(points, path);
143156

144-
svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
145-
svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);
146-
147157
return cs;
148158
};
149159

‎dist/module/v-chart-plugin.js

+49-17
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ var Chart = {
147147
*/
148148
generateLegend: function generateLegend(cs) {
149149
if (this.chartData.legends && this.chartData.legends.enabled === true) {
150-
d3.select('#' + this.chartData.selector).append('text').attr('x', this.width - 60).attr('y', this.height * 0.95).style('text-anchor', 'middle').text(this.chartData.metric);
150+
d3.select('#' + this.chartData.selector).append('text').attr('x', this.width - 60).attr('y', this.height * 0.95).style('text-anchor', 'middle').text(this.chartData.metric[0]);
151151

152152
d3.select('#' + this.chartData.selector).append("g").attr("class", "legends").append("rect").attr('x', this.width - 30).attr('y', this.height * 0.95 - 10).attr("width", 30).attr("height", 10).style("fill", function () {
153153
var fill = cs.palette.lineFill || cs.palette.fill;
@@ -165,14 +165,37 @@ var Chart = {
165165
ds: function ds() {
166166
var _this = this;
167167

168-
return this.chartData.data.map(function (d) {
169-
var td = {};
170-
td.metric = _this.chartData.metric ? d[_this.chartData.metric] : d;
168+
//TODO add in support for arrays with undefined metric
169+
var ds = { metric: [] };
170+
if (!Array.isArray(this.chartData.metric)) {
171+
ds.metric.push(this.chartData.metric);
172+
} else {
173+
ds.metric = this.chartData.metric;
174+
}
175+
ds.dim = this.chartData.dim;
176+
ds.data = this.chartData.data;
177+
178+
return ds.data.map(function (d) {
179+
var td = {
180+
metric: []
181+
};
182+
ds.metric.forEach(function (e, i) {
183+
td.metric[i] = d[e] || 0;
184+
});
171185
td.dim = _this.chartData.dim ? d[_this.chartData.dim] : null;
172186
return td;
173187
});
174188
},
175189

190+
/**
191+
* Metric getter function
192+
* @memberOf Chart
193+
* @returns {array} Metrics
194+
*/
195+
metric: function metric() {
196+
return this.chartData.metric;
197+
},
198+
176199
/**
177200
* Height getter function
178201
* @memberOf Chart
@@ -198,8 +221,12 @@ var Chart = {
198221
*/
199222
max: function max() {
200223
var max = 0;
224+
var results = [];
201225
this.ds.forEach(function (e) {
202-
max = max > e.metric ? max : e.metric;
226+
results = results.concat([].concat(_toConsumableArray(e.metric)));
227+
});
228+
results.forEach(function (e) {
229+
max = max > e ? max : e;
203230
});
204231
return max;
205232
},
@@ -210,21 +237,16 @@ var Chart = {
210237
* @returns {number} Min value for metric
211238
*/
212239
min: function min() {
213-
return Math.min.apply(Math, _toConsumableArray(this.ds.map(function (o) {
214-
return o.metric;
240+
var max = 0;
241+
var results = [];
242+
this.ds.forEach(function (e) {
243+
results = results.concat([].concat(_toConsumableArray(e.metric)));
244+
});
245+
return Math.min.apply(Math, _toConsumableArray(results.map(function (o) {
246+
return o;
215247
})));
216248
},
217249

218-
/**
219-
* Gets the height of the title
220-
* @memberOf Chart
221-
* @returns {number} Height of the chart title
222-
*/
223-
titleHeight: function titleHeight() {
224-
if (this.chartData.title) return this.chartData.textHeight || 25;
225-
return 0;
226-
},
227-
228250
/**
229251
* Gets the height of the dispaly area
230252
* @memberOf Chart
@@ -238,6 +260,16 @@ var Chart = {
238260
}
239261
},
240262

263+
/**
264+
* Gets the height of the title
265+
* @memberOf Chart
266+
* @returns {number} Height of the chart title
267+
*/
268+
titleHeight: function titleHeight() {
269+
if (this.chartData.title) return this.chartData.textHeight || 25;
270+
return 0;
271+
},
272+
241273
/**
242274
* Gets the subtitle height
243275
* @memberOf Chart

‎dist/static/js/app.d0cfa1f5b8fb363d2216.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/static/js/app.d0cfa1f5b8fb363d2216.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/static/js/app.fa53c39ff82bc0000f0f.js

-2
This file was deleted.

‎dist/static/js/app.fa53c39ff82bc0000f0f.js.map

-1
This file was deleted.

0 commit comments

Comments
 (0)