Skip to content

Commit

Permalink
merge from head fork
Browse files Browse the repository at this point in the history
  • Loading branch information
José Silva committed Nov 13, 2018
2 parents c38d3da + cb6501a commit d0ecb39
Show file tree
Hide file tree
Showing 15 changed files with 419 additions and 276 deletions.
5 changes: 2 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
<li><a href="#build-setup">Build Setup</a> </li>
</ul>

![Screenshot](https://user-images.githubusercontent.com/5210420/48297569-b85bcd80-e479-11e8-85ad-b1a4cc00967f.gif)

## Purpose

This plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into their applications. The plugin is built off of the D3.js JavaScript library for manipulating documents based on data. By binding data from your components, you can create complex charts and graphs that respond to changes in your application. Vue.js lifecycle events will trigger the charts to update and maintain two-way binding between your charts and your data. By adding in a state management (such as Vuex) you can additionally persist state across an entire application.
Expand Down Expand Up @@ -145,9 +147,6 @@ If you wish to style the components of the chart you can via the selectors:
}
</style>
```
![screenshot](https://user-images.githubusercontent.com/5210420/47540328-a3d8dc00-d8a2-11e8-9948-3f878e01109f.gif)


## Performance Consideration

By default all charts are imported into v-chart-plugin.js. This allows all charts to share one common interface. If you are only using a few select charts in your implementation you can remove those unused charts from the import statements in the v-chart-plugin.js.
Expand Down
2 changes: 1 addition & 1 deletion dist/index.html
View file
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.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>
<!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>
24 changes: 24 additions & 0 deletions dist/module/assets/data/sales.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,84 @@ export default [{
month: 'Jan',
year: 2018,
total: 475,
forecast: 500,
yoy: 1.05,
actual: true
}, {
month: 'Feb',
year: 2018,
total: 515,
forecast: 525,
yoy: 1.03,
actual: true
}, {
month: 'Mar',
year: 2018,
total: 390,
forecast: 480,
yoy: .95,
actual: true
}, {
month: 'Apr',
year: 2018,
total: 430,
forecast: 440,
yoy: .80,
actual: true
}, {
month: 'May',
year: 2018,
total: 510,
forecast: 500,
yoy: .70,
actual: true
}, {
month: 'Jun',
year: 2018,
total: 399,
forecast: 450,
yoy: .75,
actual: true
}, {
month: 'Jul',
year: 2018,
total: 601,
forecast: 550,
yoy: 1.00,
actual: true
}, {
month: 'Aug',
year: 2018,
total: 496,
forecast: 480,
yoy: 1.15,
actual: true
}, {
month: 'Sep',
year: 2018,
total: 379,
forecast: 440,
yoy: 1.10,
actual: true
}, {
month: 'Oct',
year: 2018,
total: 410,
forecast: 430,
yoy: .85,
actual: false
}, {
month: 'Nov',
year: 2018,
total: 490,
forecast: 500,
yoy: .95,
actual: false
}, {
month: 'Dec',
year: 2018,
total: 610,
forecast: 625,
yoy: 1.01,
actual: false
}];
80 changes: 45 additions & 35 deletions dist/module/import/lineGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var lineGraph = function chart(mode) {
*/
var cs = {
palette: {
lineFill: '#ffcdcd',
lineFill: ['#ffcdcd', '#005792'],
pointFill: '#005792',
pointStroke: '#d1f4fa'
},
Expand All @@ -49,18 +49,23 @@ var lineGraph = function chart(mode) {
* @param {Object} points (svg element)
*/
var enter = function enter(points, path) {
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);

points.enter().append('circle').attr('class', _this.selector).attr('r', 2).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.dim) + cs.y.axisWidth + 5;
}).attr('cy', function (d) {
return cs.y.scale(d.metric);
_this.metric.forEach(function (e, i) {
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);
});
return points;

// points.enter()
// .append('circle')
// .attr('class', this.selector)
// .attr('r', 2)
// .on('mouseover', (d) => {
// this.addTooltip(d, window.event);
// })
// .on('mouseout', (d) => {
// this.removeTooltip(d);
// })
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
// .attr('cy', d => cs.y.scale(d.metric[0]));
// return points;
};
/**
* Runs when a value of an element in dataset is changed
Expand All @@ -69,18 +74,16 @@ var lineGraph = function chart(mode) {
* @param {Object} points (svg element)
*/
var transition = function transition(points, path) {
path.transition().attr('d', cs.lineFunction(_this.ds));

points.transition().attr('cx', function (d) {
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
}).attr('cy', function (d) {
return cs.y.scale(d.metric);
}).attr('cx', function (d) {
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
}).attr('cy', function (d) {
return cs.y.scale(d.metric);
_this.metric.forEach(function (e, i) {
path[i].transition().attr('d', cs.lineFunction[i](_this.ds));
});
return points;

// points.transition()
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
// .attr('cy', d => cs.y.scale(d.metric[0]))
// .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
// .attr('cy', d => cs.y.scale(d.metric[0]));
// return points;
};

/**
Expand All @@ -91,7 +94,9 @@ var lineGraph = function chart(mode) {
*/
var exit = function exit(points, path) {
points.exit().remove();
path.exit().remove();
_this.metric.forEach(function (e, i) {
path[i].exit().remove();
});
return points;
};

Expand All @@ -100,9 +105,8 @@ var lineGraph = function chart(mode) {
* @member buildScales
* @function
*/
var buildScales = function buildScales() {
var buildScales = function buildScales(cs) {
cs.y.scale = d3.scaleLinear().domain([_this.min, _this.max]).range([_this.displayHeight - cs.x.axisHeight, _this.header]);
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 All @@ -116,22 +120,31 @@ var lineGraph = function chart(mode) {
* @member drawAxis
* @function
*/
var drawAxis = function drawAxis() {
var drawAxis = function drawAxis(cs) {
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
cs.x.xOffset = cs.y.axisWidth + 5;
cs.x.yOffset = _this.displayHeight - cs.x.axisHeight;
cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
cs.y.xOffset = cs.y.axisWidth;
cs.y.yOffset = 0;
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);
};

cs.lineFunction = d3.line().x(function (d) {
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
}).y(function (d) {
return cs.y.scale(d.metric);
cs.lineFunction = [];
this.metric.forEach(function (e, i) {
cs.lineFunction.push(d3.line().x(function (d) {
return cs.x.scale(d.dim) + cs.y.axisWidth + 5;
}).y(function (d) {
return cs.y.scale(d.metric[i]);
}));
});

var points = svgContainer.selectAll('circle').data(this.ds);
var path = svgContainer.selectAll('path').data(this.ds);
var path = [];
this.metric.forEach(function (e, i) {
path.push(svgContainer.selectAll('path#p' + i).data(_this.ds));
});

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

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

svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);

return cs;
};

Expand Down
66 changes: 49 additions & 17 deletions dist/module/v-chart-plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ var Chart = {
*/
generateLegend: function generateLegend(cs) {
if (this.chartData.legends && this.chartData.legends.enabled === true) {
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);
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]);

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 () {
var fill = cs.palette.lineFill || cs.palette.fill;
Expand All @@ -165,14 +165,37 @@ var Chart = {
ds: function ds() {
var _this = this;

return this.chartData.data.map(function (d) {
var td = {};
td.metric = _this.chartData.metric ? d[_this.chartData.metric] : d;
//TODO add in support for arrays with undefined metric
var ds = { metric: [] };
if (!Array.isArray(this.chartData.metric)) {
ds.metric.push(this.chartData.metric);
} else {
ds.metric = this.chartData.metric;
}
ds.dim = this.chartData.dim;
ds.data = this.chartData.data;

return ds.data.map(function (d) {
var td = {
metric: []
};
ds.metric.forEach(function (e, i) {
td.metric[i] = d[e] || 0;
});
td.dim = _this.chartData.dim ? d[_this.chartData.dim] : null;
return td;
});
},

/**
* Metric getter function
* @memberOf Chart
* @returns {array} Metrics
*/
metric: function metric() {
return this.chartData.metric;
},

/**
* Height getter function
* @memberOf Chart
Expand All @@ -198,8 +221,12 @@ var Chart = {
*/
max: function max() {
var max = 0;
var results = [];
this.ds.forEach(function (e) {
max = max > e.metric ? max : e.metric;
results = results.concat([].concat(_toConsumableArray(e.metric)));
});
results.forEach(function (e) {
max = max > e ? max : e;
});
return max;
},
Expand All @@ -210,21 +237,16 @@ var Chart = {
* @returns {number} Min value for metric
*/
min: function min() {
return Math.min.apply(Math, _toConsumableArray(this.ds.map(function (o) {
return o.metric;
var max = 0;
var results = [];
this.ds.forEach(function (e) {
results = results.concat([].concat(_toConsumableArray(e.metric)));
});
return Math.min.apply(Math, _toConsumableArray(results.map(function (o) {
return o;
})));
},

/**
* Gets the height of the title
* @memberOf Chart
* @returns {number} Height of the chart title
*/
titleHeight: function titleHeight() {
if (this.chartData.title) return this.chartData.textHeight || 25;
return 0;
},

/**
* Gets the height of the dispaly area
* @memberOf Chart
Expand All @@ -238,6 +260,16 @@ var Chart = {
}
},

/**
* Gets the height of the title
* @memberOf Chart
* @returns {number} Height of the chart title
*/
titleHeight: function titleHeight() {
if (this.chartData.title) return this.chartData.textHeight || 25;
return 0;
},

/**
* Gets the subtitle height
* @memberOf Chart
Expand Down
2 changes: 2 additions & 0 deletions dist/static/js/app.d0cfa1f5b8fb363d2216.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/static/js/app.d0cfa1f5b8fb363d2216.js.map
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions dist/static/js/app.fa53c39ff82bc0000f0f.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/static/js/app.fa53c39ff82bc0000f0f.js.map
View file

This file was deleted.

Loading

0 comments on commit d0ecb39

Please sign in to comment.