Skip to content

Commit 7ed9e81

Browse files
ignoreintuitionignoreintuition
committed
gridline cleanup
1 parent 730af3b commit 7ed9e81

14 files changed

+364
-312
lines changed

‎dist/index.html‎

Lines changed: 1 addition & 1 deletion
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.54d64245c93f07f8de1551bc966830b4.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.2a515c02f246ccee676f.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.54d64245c93f07f8de1551bc966830b4.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.2a5b3d2ecf41d1ed0f6f.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/areaChart.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ var areaChart = function chart() {
109109
* @function
110110
*/
111111
var drawAxis = function drawAxis() {
112+
_this.drawGrid(cs);
112113
cs.polyFunction = d3.line().x(function (d) {
113114
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
114115
}).y(function (d) {

‎dist/module/import/barChart.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ var barChart = function chart() {
159159
* @function
160160
*/
161161
var drawAxis = function drawAxis() {
162+
_this.drawGrid(cs);
162163
cs.x.axis = d3.axisBottom().ticks(cs.x.ticks, 's').scale(cs.x.scale);
163164
cs.y.axis = d3.axisLeft().scale(cs.y.scale);
164165
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;

‎dist/module/import/bubbleChart.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ var bubbleChart = function chart(mode) {
3939
axisWidth: 30,
4040
ticks: 5
4141
},
42-
r: {}
42+
r: {
43+
max: 20
44+
}
4345
};
4446

4547
/**
@@ -92,16 +94,17 @@ var bubbleChart = function chart(mode) {
9294
* @function
9395
*/
9496
var buildScales = function buildScales(cs) {
95-
cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v2, _this.maxTriplet.v2]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
96-
cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v1, _this.maxTriplet.v1]).range([0, _this.width]);
97-
cs.r.scale = d3.scaleLinear().domain([_this.minTriplet.v3, _this.maxTriplet.v3]).range([0, 20]);
97+
cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v2 - cs.r.max, _this.maxTriplet.v2 + cs.r.max]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
98+
cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v1 - cs.r.max, _this.maxTriplet.v1 + cs.r.max]).range([0, _this.width]);
99+
cs.r.scale = d3.scaleLinear().domain([_this.minTriplet.v3, _this.maxTriplet.v3]).range([0, cs.r.max]);
98100
};
99101
/**
100102
* Draws the x and y axes on the svg
101103
* @member drawAxis
102104
* @function
103105
*/
104106
var drawAxis = function drawAxis(cs) {
107+
_this.drawGrid(cs);
105108
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
106109
cs.x.xOffset = cs.y.axisWidth + 5;
107110
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;

‎dist/module/import/lineGraph.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ var lineGraph = function chart(mode) {
131131
* @function
132132
*/
133133
var drawAxis = function drawAxis(cs) {
134+
_this.drawGrid(cs);
134135
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
135136
cs.x.xOffset = cs.y.axisWidth + 5;
136137
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;

‎dist/module/import/scatterPlot.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ var scatterPlot = function chart() {
101101
* @function
102102
*/
103103
var drawAxis = function drawAxis(cs) {
104+
_this.drawGrid(cs);
104105
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
105106
cs.x.xOffset = cs.y.axisWidth + 5;
106107
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;
@@ -114,7 +115,6 @@ var scatterPlot = function chart() {
114115
var points = svgContainer.selectAll('circle').data(this.ds);
115116

116117
cs = this.setOverrides(cs, this.chartData.overrides);
117-
118118
buildScales(cs);
119119
drawAxis(cs);
120120
enter(points);

‎dist/module/import/vBarChart.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ var vBarChart = function chart() {
161161
* @function
162162
*/
163163
var drawAxis = function drawAxis() {
164+
_this.drawGrid(cs);
164165
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
165166
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
166167
cs.x.yOffset = _this.displayHeight;

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,27 @@ var Chart = {
5757
this[this.chartData.chartType]('refresh');
5858
},
5959

60+
/**
61+
* Redraw the Chart when the data is recycled
62+
* @memberOf Chart
63+
*/
64+
drawGrid: function drawGrid(cs) {
65+
if (this.chartData.grid && this.chartData.grid.enabled === true) {
66+
var grid = {
67+
x: [],
68+
y: []
69+
};
70+
for (var i = this.header; i < (this.height - this.header) * .80; i += this.gridTicks) {
71+
grid.y.push(i);
72+
}
73+
d3.select('#' + this.chartData.selector).selectAll('line.gridLine').data(grid.y).enter().append('line').attr('class', 'gridLine').attr('x1', cs.y.axisWidth).attr('x2', this.width).attr('y1', function (d) {
74+
return d;
75+
}).attr('y2', function (d) {
76+
return d;
77+
}).style('stroke', '#D3D3D3').style('stroke-width', 1);
78+
}
79+
},
80+
6081
/**
6182
* Remove x and y axes
6283
* @memberOf Chart
@@ -241,6 +262,18 @@ var Chart = {
241262
return this.chartData.width || 200;
242263
},
243264

265+
/**
266+
* Grid Tick getter function
267+
* @memberOf Chart
268+
* @returns {number} gridTicks
269+
*/
270+
gridTicks: function gridTicks() {
271+
if (this.chartData.grid && this.chartData.grid.gridTicks != null) {
272+
return this.chartData.grid.gridTicks;
273+
}
274+
return 100;
275+
},
276+
244277
/**
245278
* Get the maxium value for metric
246279
* @memberOf Chart

‎dist/static/js/app.2a515c02f246ccee676f.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎dist/static/js/app.2a515c02f246ccee676f.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)