Skip to content

Commit 6bb71c4

Browse files
ignoreintuitionignoreintuition
authored
Merge pull request #141 from ignoreintuition/development
Development
2 parents 608a57c + 7b97972 commit 6bb71c4

18 files changed

+352
-95
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.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>
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.ea0c2a26400e96edf6cc.js></script><script type=text/javascript src=/v-chart-plugin-demo/static/js/app.de77d3a1edc539760483.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/import/barChart.js

+29-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import _Object$assign from 'babel-runtime/core-js/object/assign';
2+
import { globalAgent } from 'http';
3+
24
/**
35
* @fileOverview Bar chart component definition
46
*
@@ -29,7 +31,7 @@ var barChart = function chart() {
2931
*/
3032
var cs = {
3133
palette: {
32-
fill: '#005792',
34+
fill: ['#005792', '#ffcdcd'],
3335
stroke: '#d1f4fa'
3436
},
3537
bar: {
@@ -63,7 +65,7 @@ var barChart = function chart() {
6365
* @function
6466
*/
6567
var getHeight = function getHeight() {
66-
return (_this.displayHeight - cs.x.axisHeight - _this.header - cs.bar.vPadding) / _this.ds.length - 1;
68+
return ((_this.displayHeight - cs.x.axisHeight - _this.header - cs.bar.vPadding) / _this.ds.length - 1) / _this.metric.length;
6769
};
6870

6971
/**
@@ -74,7 +76,7 @@ var barChart = function chart() {
7476
* @param {Object} i (svg element)
7577
*/
7678
var getYCoord = function getYCoord(d, i) {
77-
return i * (_this.displayHeight - cs.x.axisHeight - _this.header) / _this.ds.length + 1 + _this.header;
79+
return i * (_this.displayHeight - cs.x.axisHeight - _this.header) / _this.ds.length + 1 + _this.header + cs.bar.offset * getHeight();
7880
};
7981

8082
/**
@@ -103,7 +105,11 @@ var barChart = function chart() {
103105
* @param {Object} rects (svg element)
104106
*/
105107
var enter = function enter(rects) {
106-
rects.enter().append('rect').attr('fill', cs.palette.fill).attr('stroke', cs.palette.stroke).attr('class', _this.selector).attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding).on('mouseover', mouseOver).on('mouseout', mouseOut);
108+
_this.metric.forEach(function (e, i) {
109+
cs.bar.offset = i;
110+
rects[i].enter().append('rect').attr('fill', cs.palette.fill[i]).attr('stroke', cs.palette.stroke).attr('class', _this.selector).attr('class', 'r' + i).attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding).on('mouseover', mouseOver).on('mouseout', mouseOut);
111+
});
112+
if (_this.goal) _this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
107113
return rects;
108114
};
109115
/**
@@ -113,7 +119,11 @@ var barChart = function chart() {
113119
* @param {Object} rects (svg element)
114120
*/
115121
var transition = function transition(rects) {
116-
rects.transition().attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding);
122+
_this.metric.forEach(function (e, i) {
123+
cs.bar.offset = i;
124+
rects[i].transition().attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding);
125+
});
126+
if (_this.goal) _this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
117127
return rects;
118128
};
119129
/**
@@ -123,7 +133,9 @@ var barChart = function chart() {
123133
* @param {Object} rect (svg element)
124134
*/
125135
var exit = function exit(rects) {
126-
rects.exit().remove();
136+
_this.metric.forEach(function (e, i) {
137+
rects[i].exit().remove();
138+
});
127139
return rects;
128140
};
129141
/**
@@ -164,13 +176,22 @@ var barChart = function chart() {
164176
* @param {number} currentValue
165177
*/
166178
var getMaxDimLength = function getMaxDimLength(accumulator, currentValue) {
179+
if (!currentValue.dim) return accumulator;
167180
return currentValue.dim.length > accumulator ? currentValue.dim.length : accumulator;
168181
};
169182

170-
var rects = svgContainer.selectAll('rect').data(this.ds);
183+
var rects = [];
184+
this.metric.forEach(function (e, i) {
185+
rects.push(svgContainer.selectAll('rect.r' + i).data(_this.ds.map(function (d) {
186+
return {
187+
metric: d.metric[i],
188+
dim: d.dim
189+
};
190+
})));
191+
});
171192

172193
cs = this.setOverrides(cs, this.chartData.overrides);
173-
if (this.ds[0].dim) cs.y.axisWidth = cs.y.axisWidth || this.ds.reduce(getMaxDimLength, 0) * 10;
194+
if (this.ds[0] && this.ds[0].dim) cs.y.axisWidth = cs.y.axisWidth || this.ds.reduce(getMaxDimLength, 0) * 10;
174195

175196
buildScales(cs);
176197
drawAxis(cs);

‎dist/module/import/bubbleChart.js

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import _Object$assign from 'babel-runtime/core-js/object/assign';
2+
/**
3+
* @fileOverview Line Graph component definition
4+
*
5+
* @author Brian Greig
6+
*
7+
* @requires NPM:d3:Vue
8+
* @requires src/v-chart-plugin.js
9+
*/
10+
var d3 = _Object$assign({}, require('d3-selection'), require('d3-scale'), require('d3-axis'), require('d3-shape'));
11+
/**
12+
* Builds a Line Graph.
13+
* @module lineGraph
14+
*/
15+
16+
var lineGraph = function chart(mode) {
17+
var _this = this;
18+
19+
/**
20+
* The SVG that stores the chart
21+
* @member svgContainer
22+
*/
23+
var svgContainer = d3.select('#' + this.chartData.selector);
24+
/**
25+
* The configuration of the coordinate system
26+
* @member cs
27+
*/
28+
var cs = {
29+
palette: {
30+
pointFill: '#005792',
31+
pointStroke: '#d1f4fa'
32+
},
33+
x: {
34+
domain: [],
35+
range: [],
36+
axisHeight: 20
37+
},
38+
y: {
39+
axisWidth: 30,
40+
ticks: 5
41+
},
42+
r: {}
43+
};
44+
45+
/**
46+
* Runs when a new element is added to the dataset
47+
* @member enter
48+
* @function
49+
* @param {Object} points (svg element)
50+
*/
51+
var enter = function enter(points) {
52+
points.enter().append('circle').attr('class', _this.selector).attr('r', function (d) {
53+
return cs.r.scale(d.metric[2]);
54+
}).attr('cx', function (d) {
55+
return cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5;
56+
}).attr('cy', function (d) {
57+
return cs.y.scale(d.metric[1]);
58+
});
59+
return points;
60+
};
61+
/**
62+
* Runs when a value of an element in dataset is changed
63+
* @member transition
64+
* @function
65+
* @param {Object} points (svg element)
66+
*/
67+
var transition = function transition(points) {
68+
points.transition().attr('r', function (d) {
69+
return cs.r.scale(d.metric[2]);
70+
}).attr('cx', function (d) {
71+
return cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5;
72+
}).attr('cy', function (d) {
73+
return cs.y.scale(d.metric[1]);
74+
});
75+
return points;
76+
};
77+
78+
/**
79+
* Runs when an element is removed from the dataset
80+
* @member exit
81+
* @function
82+
* @param {Object} points (svg element)
83+
*/
84+
var exit = function exit(points) {
85+
points.exit().remove();
86+
return points;
87+
};
88+
89+
/**
90+
* Builds the scales for the x and y axes
91+
* @member buildScales
92+
* @function
93+
*/
94+
var buildScales = function buildScales(cs) {
95+
cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v1, _this.maxTriplet.v1]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
96+
cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v2, _this.maxTriplet.v2]).range([0, _this.width]);
97+
cs.r.scale = d3.scaleLinear().domain([_this.minTriplet.v3, _this.maxTriplet.v3]).range([0, 20]);
98+
};
99+
/**
100+
* Draws the x and y axes on the svg
101+
* @member drawAxis
102+
* @function
103+
*/
104+
var drawAxis = function drawAxis(cs) {
105+
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
106+
cs.x.xOffset = cs.y.axisWidth + 5;
107+
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;
108+
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
109+
cs.y.xOffset = cs.y.axisWidth;
110+
cs.y.yOffset = 0;
111+
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
112+
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);
113+
};
114+
115+
var points = svgContainer.selectAll('circle').data(this.ds);
116+
117+
cs = this.setOverrides(cs, this.chartData.overrides);
118+
119+
buildScales(cs);
120+
drawAxis(cs);
121+
enter(points);
122+
transition(points);
123+
exit(points);
124+
125+
return cs;
126+
};
127+
128+
export default lineGraph;

‎dist/module/import/lineGraph.js

+41-22
Original file line numberDiff line numberDiff line change
@@ -52,20 +52,20 @@ var lineGraph = function chart(mode) {
5252
_this.metric.forEach(function (e, i) {
5353
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);
5454
});
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;
55+
_this.metric.forEach(function (e, i) {
56+
cs.offset = i;
57+
points[i].enter().append('circle').attr('class', _this.selector).attr('class', "r" + i).attr('r', 2).on('mouseover', function (d) {
58+
_this.addTooltip(d, window.event);
59+
}).on('mouseout', function (d) {
60+
_this.removeTooltip(d);
61+
}).attr('cx', function (d) {
62+
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
63+
}).attr('cy', function (d) {
64+
return cs.y.scale(d.metric);
65+
});
66+
});
67+
if (_this.goal) _this.generateGoal(cs, svgContainer, true, 0);
68+
return points;
6969
};
7070
/**
7171
* Runs when a value of an element in dataset is changed
@@ -78,12 +78,20 @@ var lineGraph = function chart(mode) {
7878
path[i].transition().attr('d', cs.lineFunction[i](_this.ds));
7979
});
8080

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;
81+
_this.metric.forEach(function (e, i) {
82+
cs.offset = i;
83+
points[i].transition().attr('cx', function (d) {
84+
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
85+
}).attr('cy', function (d) {
86+
return cs.y.scale(d.metric);
87+
}).attr('cx', function (d) {
88+
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
89+
}).attr('cy', function (d) {
90+
return cs.y.scale(d.metric);
91+
});
92+
});
93+
if (_this.goal) _this.generateGoal(cs, svgContainer, true, 0);
94+
return points;
8795
};
8896

8997
/**
@@ -93,7 +101,9 @@ var lineGraph = function chart(mode) {
93101
* @param {Object} points (svg element)
94102
*/
95103
var exit = function exit(points, path) {
96-
points.exit().remove();
104+
_this.metric.forEach(function (e, i) {
105+
points[i].exit().remove();
106+
});
97107
_this.metric.forEach(function (e, i) {
98108
path[i].exit().remove();
99109
});
@@ -140,7 +150,16 @@ var lineGraph = function chart(mode) {
140150
}));
141151
});
142152

143-
var points = svgContainer.selectAll('circle').data(this.ds);
153+
var points = [];
154+
this.metric.forEach(function (e, i) {
155+
points.push(svgContainer.selectAll('circle.r' + i).data(_this.ds.map(function (d) {
156+
return {
157+
metric: d.metric[i],
158+
dim: d.dim
159+
};
160+
})));
161+
});
162+
144163
var path = [];
145164
this.metric.forEach(function (e, i) {
146165
path.push(svgContainer.selectAll('path#p' + i).data(_this.ds));

0 commit comments

Comments
 (0)