Skip to content

Commit

Permalink
Merge pull request #116 from ignoreintuition/issue-101-typescript
Browse files Browse the repository at this point in the history 
Issue 101 typescript
  • Loading branch information
@ignoreintuition
ignoreintuition authored Nov 5, 2018
2 parents 8a44d4d + 987d73d commit 3a3baf0
Show file tree
Hide file tree
Showing 16 changed files with 1,017 additions and 223 deletions.
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.aebf041e861e5dad6c3e.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.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>
52 changes: 37 additions & 15 deletions dist/module/import/areaChart.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
import _Object$assign from 'babel-runtime/core-js/object/assign';
/**
* @fileOverview Area 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-shape'));
/**
* Builds an Area Chart.
* @constructor
* @param {String} mode (init / refresh)
* @exports areaChart
* @module areaChart
*/
var areaChart = 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: {
stroke: '#d1f4fa',
Expand All @@ -27,9 +42,10 @@ var areaChart = function chart() {
}
};
/**
* @method getPoints
* Returns plot points
* @member getPoints
* @function
* @param {Object} p
* @description Returns plot points
*/
var getPoints = function getPoints(p) {
var poly = ' ' + _this.width + ', ' + cs.x.yOffset + ' ';
Expand All @@ -43,33 +59,37 @@ var areaChart = function chart() {
var poly = svgContainer.selectAll('polygon').data([this.ds]);

/**
* @method enter
* Runs when a new element is added to the dataset
* @member enter
* @function
* @param {Object} s (svg element)
* @description Runs when a new element is added to the dataset
*/
var enter = function enter(s) {
s.enter().append('polygon').attr('stroke', cs.palette.stroke).attr('fill', cs.palette.fill).attr('points', getPoints);
};
/**
* @method transition
* Runs when a value of an element in dataset is changed
* @member transition
* @function
* @param {Object} s (svg element)
* @description Runs when a value of an element in dataset is changed
*/
var transition = function transition(s) {
s.transition().attr('points', getPoints);
};
/**
* @method exit
* Runs when an element is removed from the dataset
* @member exit
* @function
* @param {Object} s (svg element)
* @description Runs when an element is removed from the dataset
*/
var exit = function exit(s) {
s.exit().remove();
return s;
};
/**
* @method buildScales
* @description builds the scales for the x and y axes
* Builds the scales for the x and y axes
* @member buildScales
* @function
*/
var buildScales = function buildScales() {
cs.y.scale = d3.scaleLinear().domain([0, _this.max]).range([_this.displayHeight - cs.x.axisHeight, _this.titleHeight]);
Expand All @@ -84,8 +104,9 @@ var areaChart = function chart() {
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
};
/**
* @method drawAxis
* @description draws the x and y axes on the svg
* Draws the x and y axes on the svg
* @member drawAxis
* @function
*/
var drawAxis = function drawAxis() {
cs.polyFunction = d3.line().x(function (d) {
Expand All @@ -100,6 +121,7 @@ var areaChart = function chart() {
svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
if (_this.ds[0].dim) svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ',' + cs.y.yOffset + ')').call(cs.y.axis);
};

cs = this.setOverrides(cs, this.chartData.overrides);
buildScales(cs);
drawAxis(cs);
Expand Down
99 changes: 65 additions & 34 deletions dist/module/import/barChart.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,32 @@
import _Object$assign from 'babel-runtime/core-js/object/assign';
/**
* @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'));
/**
* Builds a Bar Chart.
* @constructor
* @param {String} mode (init / refresh)
* @exports barChart
* @module barChart
*/

var barChart = 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',
Expand All @@ -33,79 +48,88 @@ var barChart = function chart() {
};

/**
* @method getWidth
* @param {Object} d (svg element)
* @description Returns width of the bar
*/
* Returns width of the bar
* @member getWidth
* @function
* @param {Object} d (svg element)
*/
var getWidth = function getWidth(d) {
return cs.x.scale(d.metric);
};

/**
* @method getHeight
* @description Returns height of the bar
*/
* Returns height of the bar
* @member getHeight
* @function
*/
var getHeight = function getHeight() {
return (_this.displayHeight - cs.x.axisHeight - _this.header - cs.bar.vPadding) / _this.ds.length - 1;
};

/**
* @method getYCoord
* @param {Object} d (svg element)
* @param {Object} i (svg element)
* @description Returns y axis co-ordinate of the bar
*/
* Returns y axis co-ordinate of the bar
* @member getYCoord
* @function
* @param {Object} d (svg element)
* @param {Object} i (svg element)
*/
var getYCoord = function getYCoord(d, i) {
return i * (_this.displayHeight - cs.x.axisHeight - _this.header) / _this.ds.length + 1 + _this.header;
};

/**
* @method mouseOver
* @param {Object} d (svg element)
* @description Adds a tooltip on mouse over
*/
* Adds a tooltip on mouse over
* @member mouseOver
* @function
* @param {Object} d (svg element)
*/
var mouseOver = function mouseOver(d) {
_this.addTooltip(d, window.event);
};

/**
* @method mouseOut
* @param {Object} d (svg element)
* @description Removes tooltip on mouse out
*/
* Removes tooltip on mouse out
* @member mouseOut
* @function
* @param {Object} d (svg element)
*/
var mouseOut = function mouseOut(d) {
_this.removeTooltip(d);
};
/**
* @method enter
* Runs when a new element is added to the dataset
* @member enter
* @function
* @param {Object} rects (svg element)
* @description Runs when a new element is added to the dataset
*/
var enter = function enter(rects) {
rects.enter().append('rect').attr('fill', cs.palette.fill).attr('stroke', cs.palette.stroke).attr('class', _this.selector).attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding).on('mouseover', mouseOver).on('mouseout', mouseOut);
return rects;
};
/**
* @method transition
* Runs when a value of an element in dataset is changed
* @member transition
* @function
* @param {Object} rects (svg element)
* @description Runs when a value of an element in dataset is changed
*/
var transition = function transition(rects) {
rects.transition().attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding);
return rects;
};
/**
* @method exit
* Runs when an element is removed from the dataset
* @member exit
* @function
* @param {Object} rect (svg element)
* @description Runs when an element is removed from the dataset
*/
var exit = function exit(rects) {
rects.exit().remove();
return rects;
};
/**
* @method buildScales
* @description builds the scales for the x and y axes
* Builds the scales for the x and y axes
* @member buildScales
* @function
*/
var buildScales = function buildScales() {
cs.x.scale = d3.scaleLinear().domain([0, _this.max]).range([0, _this.width - cs.bar.hPadding - cs.y.axisWidth]);
Expand All @@ -118,8 +142,9 @@ var barChart = function chart() {
cs.y.scale = d3.scaleOrdinal().domain(cs.y.domain).range(cs.y.range);
};
/**
* @method drawAxis
* @description draws the x and y axes on the svg
* Draws the x and y axes on the svg
* @member drawAxis
* @function
*/
var drawAxis = function drawAxis() {
cs.x.axis = d3.axisBottom().ticks(cs.x.ticks, 's').scale(cs.x.scale);
Expand All @@ -131,7 +156,13 @@ var barChart = function chart() {
if (_this.ds[0].dim) svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ', ' + cs.y.yOffset + ')').call(cs.y.axis);
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
};

/**
* Get the maximum dimension length
* @member getMaxDimLength
* @function
* @param {number} accumulator
* @param {number} currentValue
*/
var getMaxDimLength = function getMaxDimLength(accumulator, currentValue) {
return currentValue.dim.length > accumulator ? currentValue.dim.length : accumulator;
};
Expand Down
Loading

0 comments on commit 3a3baf0

Please sign in to comment.