Skip to content

Commit

Permalink
Merge pull request #155 from ignoreintuition/development
Browse files Browse the repository at this point in the history
Development
  • Loading branch information
ignoreintuition committed Dec 8, 2018
2 parents 71e294f + 6fbcd1f commit 933ce30
Show file tree
Hide file tree
Showing 65 changed files with 15,226 additions and 824 deletions.
30 changes: 29 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<p align="center">
<a href="#">
<img src="https://img.shields.io/github/release-pre/ignoreintuition/v-chart-plugin.svg"
<img src="https://img.shields.io/github/release/ignoreintuition/v-chart-plugin.svg"
alt="version">
</a>
<a href="#">
Expand Down Expand Up @@ -108,15 +108,20 @@ export default {
metric: ['count', 'pyCount', 'revenue']
data: [
{'count': 120,
'pyCount': 115,
'revenue': 170,
'fruit': 'apples'},
{'count': 250,
'pyCount': 255,
'revenue': 325,
'fruit': 'oranges'}
]
}
}
}
}
```

### Overrides
If you need to override any of the default values of the charts (pallette colors, ticks, margins, etc) you can pass an overrides object to you chartData.

Expand All @@ -134,6 +139,7 @@ If you need to override any of the default values of the charts (pallette colors
}
},
```

### Legends
Legends are turned off by default. You can add a legend to a chart by including a legends objects in your chartData as such:

Expand Down Expand Up @@ -163,6 +169,28 @@ chartData: {
}
```

### Goals
Goals are used to place a line on your graph showing where your target is for the period:

```JavaScript
chartData: {
chartType: "lineGraph",
...
goal: 500,
}
```

### Labels
Labels are assigned to the x and y axis:

```JavaScript
chartData: {
chartType: "lineGraph",
...
label: true,
}
```

### Chart types currently supported:
* barChart: a chart in which the numerical values of variables are represented by the width of rectangles of equal height.
* vBarChart: a chart in which the numerical values of variables are represented by the height of rectangles of equal width.
Expand Down
2 changes: 1 addition & 1 deletion dist/index.html
Original file line number Diff line number Diff line change
@@ -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.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>
<!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.a391d398da741e3a07d3.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>
5 changes: 3 additions & 2 deletions dist/module/import/areaChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ var areaChart = function chart() {
axisWidth: 45
},
y: {
axisWidth: 45
axisWidth: 45,
ticks: 10
}
};
/**
Expand Down Expand Up @@ -93,7 +94,7 @@ var areaChart = function chart() {
*/
var buildScales = function buildScales() {
cs.y.scale = d3.scaleLinear().domain([0, _this.max]).range([_this.displayHeight - cs.x.axisHeight, _this.titleHeight]);
cs.y.axis = d3.axisLeft().ticks(10, 's').scale(cs.y.scale);
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
_this.ds.forEach(function (t) {
return cs.x.domain.push(t.dim);
});
Expand Down
8 changes: 5 additions & 3 deletions dist/module/import/barChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ var barChart = function chart() {
vPadding: 5
},
x: {
label: this.dim,
axisHeight: 10,
ticks: 5
},
y: {
label: this.metric,
domain: [],
range: [],
axisWidth: null
axisWidth: 50
}
};

Expand Down Expand Up @@ -109,7 +111,7 @@ var barChart = function chart() {
cs.bar.offset = i;
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);
});
if (_this.goal) _this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
if (_this.goal) _this.generateGoal(cs, false, cs.y.axisWidth + cs.bar.hPadding);
return rects;
};
/**
Expand All @@ -123,7 +125,7 @@ var barChart = function chart() {
cs.bar.offset = i;
rects[i].transition().attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding);
});
if (_this.goal) _this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
if (_this.goal) _this.generateGoal(cs, false, cs.y.axisWidth + cs.bar.hPadding);
return rects;
};
/**
Expand Down
151 changes: 151 additions & 0 deletions dist/module/import/boxPlot.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import _Object$assign from 'babel-runtime/core-js/object/assign';
import { globalAgent } from 'http';

/**
* @fileOverview Bar chart component definition
*
* @author Brian Greig
*
* @requires NPM:d3:Vue
* @requires src/v-chart-plugin.js
*/

/* eslint-env browser */
var d3 = _Object$assign({}, require('d3-selection'), require('d3-scale'), require('d3-axis'), require('d3-ease'), require('d3-array'));
/**
* Builds a Box Plot.
* @module boxPlot
*/

var boxPlot = function chart() {
var _this = this;

/**
* The SVG that stores the chart
* @member svgContainer
*/
var svgContainer = d3.select('#' + this.chartData.selector);
/**
* The configuration of the coordinate system
* @member cs
*/
var cs = {
palette: {
fill: ['#005792', '#ffcdcd'],
stroke: '#d1f4fa'
},
x: {
axisHeight: 10,
ticks: 5
},
y: {
axisWidth: 10,
ticks: 5
}
};

/**
* Runs when a new element is added to the dataset
* @member enter
* @function
* @param {Object} boxes (svg element)
*/
var enter = function enter(boxes, lines) {
boxes.enter().append('rect').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('class', _this.selector).attr('width', 50).attr('height', function (d) {
return cs.y.scale(d.thirdQrt) - cs.y.scale(d.firstQrt);
}).attr('x', 50).attr('y', function (d) {
return cs.y.scale(d.firstQrt);
});

var l = lines.enter();

l.append('line').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('x1', 75).attr('y1', function (d) {
return cs.y.scale(d.min);
}).attr('x2', 75).attr('y2', function (d) {
return cs.y.scale(d.firstQrt);
});

l.append('line').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('x1', 75).attr('y1', function (d) {
return cs.y.scale(d.thirdQrt);
}).attr('x2', 75).attr('y2', function (d) {
return cs.y.scale(d.max);
});

l.append('line').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('x1', 50).attr('y1', function (d) {
return cs.y.scale(d.median);
}).attr('x2', 100).attr('y2', function (d) {
return cs.y.scale(d.median);
});

l.append('line').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('x1', 50).attr('y1', function (d) {
return cs.y.scale(d.min);
}).attr('x2', 100).attr('y2', function (d) {
return cs.y.scale(d.min);
});

l.append('line').attr('fill', 'none').attr('stroke', 'black').attr('stroke-width', 3).attr('x1', 50).attr('y1', function (d) {
return cs.y.scale(d.max);
}).attr('x2', 100).attr('y2', function (d) {
return cs.y.scale(d.max);
});

return boxes;
};
/**
* Runs when a value of an element in dataset is changed
* @member transition
* @function
* @param {Object} boxes (svg element)
*/
var transition = function transition(boxes) {
boxes.transition();
return boxes;
};
/**
* Runs when an element is removed from the dataset
* @member exit
* @function
* @param {Object} boxes (svg element)
*/
var exit = function exit(rects) {
boxes.exit().remove();
return rects;
};
/**
* Builds the scales for the x and y axes
* @member buildScales
* @function
*/
var buildScales = function buildScales() {
cs.y.scale = d3.scaleLinear().domain([_this.min * 0.95, _this.max * 1.05]).range([_this.header, _this.displayHeight]);
};
/**
* Draws the x and y axes on the svg
* @member drawAxis
* @function
*/
var drawAxis = function drawAxis() {};

var ds = this.metricAsArray('total').sort();
var a = [{
min: this.min,
median: d3.quantile(ds, 0.5),
max: this.max,
firstQrt: d3.quantile(ds, 0.25),
thirdQrt: d3.quantile(ds, 0.75)
}];

var boxes = svgContainer.selectAll('rect').data(a);
var lines = svgContainer.selectAll('line').data(a);

cs = this.setOverrides(cs, this.chartData.overrides);
buildScales(cs);
drawAxis(cs);
enter(boxes, lines);
transition(boxes, lines);
exit(boxes, lines);

return cs;
};

export default boxPlot;
10 changes: 7 additions & 3 deletions dist/module/import/bubbleChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ var bubbleChart = function chart(mode) {
*/
var cs = {
palette: {
pointFill: '#005792',
pointStroke: '#d1f4fa'
fill: '#005792',
stroke: '#d1f4fa'
},
x: {
domain: [],
Expand All @@ -51,7 +51,11 @@ var bubbleChart = function chart(mode) {
* @param {Object} points (svg element)
*/
var enter = function enter(points) {
points.enter().append('circle').attr('class', _this.selector).attr('r', function (d) {
points.enter().append('circle').attr('class', _this.selector).attr('fill', cs.palette.fill).attr('stroke', cs.palette.stroke).on('mouseover', function (d) {
_this.addTooltip(d, window.event);
}).on('mouseout', function (d) {
_this.removeTooltip(d);
}).attr('r', function (d) {
return cs.r.scale(d.metric[2]);
}).attr('cx', function (d) {
return cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5;
Expand Down
8 changes: 5 additions & 3 deletions dist/module/import/lineGraph.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@ var lineGraph = function chart(mode) {
pointStroke: '#d1f4fa'
},
x: {
label: this.dim,
domain: [],
range: [],
axisHeight: 20
},
y: {
axisWidth: 30,
label: this.metric,
axisWidth: 40,
ticks: 5
}
};
Expand All @@ -64,7 +66,7 @@ var lineGraph = function chart(mode) {
return cs.y.scale(d.metric);
});
});
if (_this.goal) _this.generateGoal(cs, svgContainer, true, 0);
if (_this.goal) _this.generateGoal(cs, true, 0);
return points;
};
/**
Expand All @@ -90,7 +92,7 @@ var lineGraph = function chart(mode) {
return cs.y.scale(d.metric);
});
});
if (_this.goal) _this.generateGoal(cs, svgContainer, true, 0);
if (_this.goal) _this.generateGoal(cs, true, 0);
return points;
};

Expand Down
16 changes: 11 additions & 5 deletions dist/module/import/scatterPlot.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@ var scatterPlot = function chart() {
x: {
domain: [],
range: [],
axisHeight: 20
axisHeight: 20,
label: this.metric[0]
},
y: {
axisWidth: 30,
ticks: 5
ticks: 5,
label: this.metric[1]
},
r: {
width: 5
Expand All @@ -53,7 +55,11 @@ var scatterPlot = function chart() {
* @param {Object} points (svg element)
*/
var enter = function enter(points) {
points.enter().append('circle').attr('class', _this.selector).attr('r', cs.r.width).attr('cx', function (d) {
points.enter().append('circle').attr('class', _this.selector).attr('fill', cs.palette.fill).attr('stroke', cs.palette.stroke).attr('r', cs.r.width).on('mouseover', function (d) {
_this.addTooltip(d, window.event);
}).on('mouseout', function (d) {
_this.removeTooltip(d);
}).attr('cx', function (d) {
return cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5;
}).attr('cy', function (d) {
return cs.y.scale(d.metric[1]);
Expand Down Expand Up @@ -92,8 +98,8 @@ var scatterPlot = function chart() {
* @function
*/
var buildScales = function buildScales(cs) {
cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v2, _this.maxTriplet.v2]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v1, _this.maxTriplet.v1]).range([0, _this.width]);
cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v2 - _this.maxTriplet.v2 * .05, _this.maxTriplet.v2 + _this.maxTriplet.v2 * .05]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v1 - _this.maxTriplet.v2 * .05, _this.maxTriplet.v1 + _this.maxTriplet.v1 * .05]).range([0, _this.width]);
};
/**
* Draws the x and y axes on the svg
Expand Down
Loading

0 comments on commit 933ce30

Please sign in to comment.