Skip to content

Commit ea41f39

Browse files
ignoreintuitionignoreintuition
authored
Merge pull request #149 from ignoreintuition/issue-135-gridlines
Issue 135 gridlines
2 parents 2a5cd39 + 7ed9e81 commit ea41f39

22 files changed

+389
-321
lines changed

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,20 @@ chartData: {
149149
}
150150
```
151151

152+
### Gridlines
153+
Gridlines are turned off by default. You can include and configure your gridlines via the configuration object:
154+
155+
```JavaScript
156+
chartData: {
157+
chartType: "barChart",
158+
...
159+
grid: {
160+
enabled: true,
161+
gridTicks: 25,
162+
}
163+
}
164+
```
165+
152166
### Chart types currently supported:
153167
* barChart: a chart in which the numerical values of variables are represented by the width of rectangles of equal height.
154168
* vBarChart: a chart in which the numerical values of variables are represented by the height of rectangles of equal width.

‎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.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

+1
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

+1
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

+7-4
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

+1
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

+1-1
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

+1
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

+33
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

-2
This file was deleted.

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

-1
This file was deleted.

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

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

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

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

‎dist/static/js/manifest.c423efaf7696a83d1404.js.map

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

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "v-chart-plugin",
33
"main": "./dist/module/v-chart-plugin.js",
4-
"version": "0.3.2",
4+
"version": "0.3.3",
55
"description": "This plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into your applications. Uses D3.js for charting.",
66
"keywords": [
77
"vue",

‎src/import/areaChart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ const areaChart = function chart() {
112112
* @function
113113
*/
114114
const drawAxis = () => {
115+
this.drawGrid(cs);
115116
cs.polyFunction = d3.line()
116117
.x(d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
117118
.y(d => cs.y.scale(d.metric));
@@ -135,7 +136,6 @@ const areaChart = function chart() {
135136
transition(poly);
136137
exit(poly);
137138

138-
this.drawGrid(cs);
139139
return cs;
140140
};
141141

‎src/import/barChart.js

+1
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ const barChart = function chart() {
170170
* @function
171171
*/
172172
const drawAxis = () => {
173+
this.drawGrid(cs);
173174
cs.x.axis = d3.axisBottom().ticks(cs.x.ticks, 's').scale(cs.x.scale);
174175
cs.y.axis = d3.axisLeft().scale(cs.y.scale);
175176
cs.x.yOffset = this.displayHeight - cs.x.axisHeight;

0 commit comments

Comments
 (0)