-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #141 from ignoreintuition/development
Development
- Loading branch information
Showing
18 changed files
with
352 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.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> | ||
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import _Object$assign from 'babel-runtime/core-js/object/assign'; | ||
| /** | ||
| * @fileOverview Line Graph component definition | ||
| * | ||
| * @author Brian Greig | ||
| * | ||
| * @requires NPM:d3:Vue | ||
| * @requires src/v-chart-plugin.js | ||
| */ | ||
| var d3 = _Object$assign({}, require('d3-selection'), require('d3-scale'), require('d3-axis'), require('d3-shape')); | ||
| /** | ||
| * Builds a Line Graph. | ||
| * @module lineGraph | ||
| */ | ||
|
|
||
| var lineGraph = function chart(mode) { | ||
| 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: { | ||
| pointFill: '#005792', | ||
| pointStroke: '#d1f4fa' | ||
| }, | ||
| x: { | ||
| domain: [], | ||
| range: [], | ||
| axisHeight: 20 | ||
| }, | ||
| y: { | ||
| axisWidth: 30, | ||
| ticks: 5 | ||
| }, | ||
| r: {} | ||
| }; | ||
|
|
||
| /** | ||
| * Runs when a new element is added to the dataset | ||
| * @member enter | ||
| * @function | ||
| * @param {Object} points (svg element) | ||
| */ | ||
| var enter = function enter(points) { | ||
| points.enter().append('circle').attr('class', _this.selector).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; | ||
| }).attr('cy', function (d) { | ||
| return cs.y.scale(d.metric[1]); | ||
| }); | ||
| return points; | ||
| }; | ||
| /** | ||
| * Runs when a value of an element in dataset is changed | ||
| * @member transition | ||
| * @function | ||
| * @param {Object} points (svg element) | ||
| */ | ||
| var transition = function transition(points) { | ||
| points.transition().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; | ||
| }).attr('cy', function (d) { | ||
| return cs.y.scale(d.metric[1]); | ||
| }); | ||
| return points; | ||
| }; | ||
|
|
||
| /** | ||
| * Runs when an element is removed from the dataset | ||
| * @member exit | ||
| * @function | ||
| * @param {Object} points (svg element) | ||
| */ | ||
| var exit = function exit(points) { | ||
| points.exit().remove(); | ||
| return points; | ||
| }; | ||
|
|
||
| /** | ||
| * Builds the scales for the x and y axes | ||
| * @member buildScales | ||
| * @function | ||
| */ | ||
| var buildScales = function buildScales(cs) { | ||
| cs.y.scale = d3.scaleLinear().domain([_this.minTriplet.v1, _this.maxTriplet.v1]).range([_this.displayHeight - cs.x.axisHeight, _this.header]); | ||
| cs.x.scale = d3.scaleLinear().domain([_this.minTriplet.v2, _this.maxTriplet.v2]).range([0, _this.width]); | ||
| cs.r.scale = d3.scaleLinear().domain([_this.minTriplet.v3, _this.maxTriplet.v3]).range([0, 20]); | ||
| }; | ||
| /** | ||
| * Draws the x and y axes on the svg | ||
| * @member drawAxis | ||
| * @function | ||
| */ | ||
| 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); | ||
| }; | ||
|
|
||
| var points = svgContainer.selectAll('circle').data(this.ds); | ||
|
|
||
| cs = this.setOverrides(cs, this.chartData.overrides); | ||
|
|
||
| buildScales(cs); | ||
| drawAxis(cs); | ||
| enter(points); | ||
| transition(points); | ||
| exit(points); | ||
|
|
||
| return cs; | ||
| }; | ||
|
|
||
| export default lineGraph; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.