Skip to content

Commit 3a3baf0

Browse files
ignoreintuitionignoreintuition
authored
Merge pull request #116 from ignoreintuition/issue-101-typescript
Issue 101 typescript
2 parents 8a44d4d + 987d73d commit 3a3baf0

16 files changed

+1017
-223
lines changed

‎dist/index.html‎

Lines changed: 1 addition & 1 deletion
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.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>
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>

‎dist/module/import/areaChart.js‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
import _Object$assign from 'babel-runtime/core-js/object/assign';
2+
/**
3+
* @fileOverview Area chart component definition
4+
*
5+
* @author Brian Greig
6+
*
7+
* @requires NPM:d3:Vue
8+
* @requires src/v-chart-plugin.js
9+
*/
10+
211
/* eslint-env browser */
312
var d3 = _Object$assign({}, require('d3-selection'), require('d3-scale'), require('d3-axis'), require('d3-shape'));
413
/**
514
* Builds an Area Chart.
6-
* @constructor
7-
* @param {String} mode (init / refresh)
8-
* @exports areaChart
15+
* @module areaChart
916
*/
1017
var areaChart = function chart() {
1118
var _this = this;
1219

20+
/**
21+
* The SVG that stores the chart
22+
* @member svgContainer
23+
*/
1324
var svgContainer = d3.select('#' + this.chartData.selector);
25+
/**
26+
* The configuration of the coordinate system
27+
* @member cs
28+
*/
1429
var cs = {
1530
palette: {
1631
stroke: '#d1f4fa',
@@ -27,9 +42,10 @@ var areaChart = function chart() {
2742
}
2843
};
2944
/**
30-
* @method getPoints
45+
* Returns plot points
46+
* @member getPoints
47+
* @function
3148
* @param {Object} p
32-
* @description Returns plot points
3349
*/
3450
var getPoints = function getPoints(p) {
3551
var poly = ' ' + _this.width + ', ' + cs.x.yOffset + ' ';
@@ -43,33 +59,37 @@ var areaChart = function chart() {
4359
var poly = svgContainer.selectAll('polygon').data([this.ds]);
4460

4561
/**
46-
* @method enter
62+
* Runs when a new element is added to the dataset
63+
* @member enter
64+
* @function
4765
* @param {Object} s (svg element)
48-
* @description Runs when a new element is added to the dataset
4966
*/
5067
var enter = function enter(s) {
5168
s.enter().append('polygon').attr('stroke', cs.palette.stroke).attr('fill', cs.palette.fill).attr('points', getPoints);
5269
};
5370
/**
54-
* @method transition
71+
* Runs when a value of an element in dataset is changed
72+
* @member transition
73+
* @function
5574
* @param {Object} s (svg element)
56-
* @description Runs when a value of an element in dataset is changed
5775
*/
5876
var transition = function transition(s) {
5977
s.transition().attr('points', getPoints);
6078
};
6179
/**
62-
* @method exit
80+
* Runs when an element is removed from the dataset
81+
* @member exit
82+
* @function
6383
* @param {Object} s (svg element)
64-
* @description Runs when an element is removed from the dataset
6584
*/
6685
var exit = function exit(s) {
6786
s.exit().remove();
6887
return s;
6988
};
7089
/**
71-
* @method buildScales
72-
* @description builds the scales for the x and y axes
90+
* Builds the scales for the x and y axes
91+
* @member buildScales
92+
* @function
7393
*/
7494
var buildScales = function buildScales() {
7595
cs.y.scale = d3.scaleLinear().domain([0, _this.max]).range([_this.displayHeight - cs.x.axisHeight, _this.titleHeight]);
@@ -84,8 +104,9 @@ var areaChart = function chart() {
84104
cs.x.axis = d3.axisBottom().scale(cs.x.scale);
85105
};
86106
/**
87-
* @method drawAxis
88-
* @description draws the x and y axes on the svg
107+
* Draws the x and y axes on the svg
108+
* @member drawAxis
109+
* @function
89110
*/
90111
var drawAxis = function drawAxis() {
91112
cs.polyFunction = d3.line().x(function (d) {
@@ -100,6 +121,7 @@ var areaChart = function chart() {
100121
svgContainer.append('g').append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
101122
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);
102123
};
124+
103125
cs = this.setOverrides(cs, this.chartData.overrides);
104126
buildScales(cs);
105127
drawAxis(cs);

‎dist/module/import/barChart.js‎

Lines changed: 65 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
import _Object$assign from 'babel-runtime/core-js/object/assign';
2+
/**
3+
* @fileOverview Bar chart component definition
4+
*
5+
* @author Brian Greig
6+
*
7+
* @requires NPM:d3:Vue
8+
* @requires src/v-chart-plugin.js
9+
*/
10+
211
/* eslint-env browser */
312
var d3 = _Object$assign({}, require('d3-selection'), require('d3-scale'), require('d3-axis'), require('d3-ease'));
413
/**
514
* Builds a Bar Chart.
6-
* @constructor
7-
* @param {String} mode (init / refresh)
8-
* @exports barChart
15+
* @module barChart
916
*/
1017

1118
var barChart = function chart() {
1219
var _this = this;
1320

21+
/**
22+
* The SVG that stores the chart
23+
* @member svgContainer
24+
*/
1425
var svgContainer = d3.select('#' + this.chartData.selector);
26+
/**
27+
* The configuration of the coordinate system
28+
* @member cs
29+
*/
1530
var cs = {
1631
palette: {
1732
fill: '#005792',
@@ -33,79 +48,88 @@ var barChart = function chart() {
3348
};
3449

3550
/**
36-
* @method getWidth
37-
* @param {Object} d (svg element)
38-
* @description Returns width of the bar
39-
*/
51+
* Returns width of the bar
52+
* @member getWidth
53+
* @function
54+
* @param {Object} d (svg element)
55+
*/
4056
var getWidth = function getWidth(d) {
4157
return cs.x.scale(d.metric);
4258
};
4359

4460
/**
45-
* @method getHeight
46-
* @description Returns height of the bar
47-
*/
61+
* Returns height of the bar
62+
* @member getHeight
63+
* @function
64+
*/
4865
var getHeight = function getHeight() {
4966
return (_this.displayHeight - cs.x.axisHeight - _this.header - cs.bar.vPadding) / _this.ds.length - 1;
5067
};
5168

5269
/**
53-
* @method getYCoord
54-
* @param {Object} d (svg element)
55-
* @param {Object} i (svg element)
56-
* @description Returns y axis co-ordinate of the bar
57-
*/
70+
* Returns y axis co-ordinate of the bar
71+
* @member getYCoord
72+
* @function
73+
* @param {Object} d (svg element)
74+
* @param {Object} i (svg element)
75+
*/
5876
var getYCoord = function getYCoord(d, i) {
5977
return i * (_this.displayHeight - cs.x.axisHeight - _this.header) / _this.ds.length + 1 + _this.header;
6078
};
6179

6280
/**
63-
* @method mouseOver
64-
* @param {Object} d (svg element)
65-
* @description Adds a tooltip on mouse over
66-
*/
81+
* Adds a tooltip on mouse over
82+
* @member mouseOver
83+
* @function
84+
* @param {Object} d (svg element)
85+
*/
6786
var mouseOver = function mouseOver(d) {
6887
_this.addTooltip(d, window.event);
6988
};
7089

7190
/**
72-
* @method mouseOut
73-
* @param {Object} d (svg element)
74-
* @description Removes tooltip on mouse out
75-
*/
91+
* Removes tooltip on mouse out
92+
* @member mouseOut
93+
* @function
94+
* @param {Object} d (svg element)
95+
*/
7696
var mouseOut = function mouseOut(d) {
7797
_this.removeTooltip(d);
7898
};
7999
/**
80-
* @method enter
100+
* Runs when a new element is added to the dataset
101+
* @member enter
102+
* @function
81103
* @param {Object} rects (svg element)
82-
* @description Runs when a new element is added to the dataset
83104
*/
84105
var enter = function enter(rects) {
85106
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);
86107
return rects;
87108
};
88109
/**
89-
* @method transition
110+
* Runs when a value of an element in dataset is changed
111+
* @member transition
112+
* @function
90113
* @param {Object} rects (svg element)
91-
* @description Runs when a value of an element in dataset is changed
92114
*/
93115
var transition = function transition(rects) {
94116
rects.transition().attr('width', getWidth).attr('height', getHeight).attr('y', getYCoord).attr('x', cs.y.axisWidth + cs.bar.hPadding);
95117
return rects;
96118
};
97119
/**
98-
* @method exit
120+
* Runs when an element is removed from the dataset
121+
* @member exit
122+
* @function
99123
* @param {Object} rect (svg element)
100-
* @description Runs when an element is removed from the dataset
101124
*/
102125
var exit = function exit(rects) {
103126
rects.exit().remove();
104127
return rects;
105128
};
106129
/**
107-
* @method buildScales
108-
* @description builds the scales for the x and y axes
130+
* Builds the scales for the x and y axes
131+
* @member buildScales
132+
* @function
109133
*/
110134
var buildScales = function buildScales() {
111135
cs.x.scale = d3.scaleLinear().domain([0, _this.max]).range([0, _this.width - cs.bar.hPadding - cs.y.axisWidth]);
@@ -118,8 +142,9 @@ var barChart = function chart() {
118142
cs.y.scale = d3.scaleOrdinal().domain(cs.y.domain).range(cs.y.range);
119143
};
120144
/**
121-
* @method drawAxis
122-
* @description draws the x and y axes on the svg
145+
* Draws the x and y axes on the svg
146+
* @member drawAxis
147+
* @function
123148
*/
124149
var drawAxis = function drawAxis() {
125150
cs.x.axis = d3.axisBottom().ticks(cs.x.ticks, 's').scale(cs.x.scale);
@@ -131,7 +156,13 @@ var barChart = function chart() {
131156
if (_this.ds[0].dim) svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.y.xOffset + ', ' + cs.y.yOffset + ')').call(cs.y.axis);
132157
svgContainer.append('g').attr('class', 'axis').attr('transform', 'translate(' + cs.x.xOffset + ', ' + cs.x.yOffset + ')').call(cs.x.axis);
133158
};
134-
159+
/**
160+
* Get the maximum dimension length
161+
* @member getMaxDimLength
162+
* @function
163+
* @param {number} accumulator
164+
* @param {number} currentValue
165+
*/
135166
var getMaxDimLength = function getMaxDimLength(accumulator, currentValue) {
136167
return currentValue.dim.length > accumulator ? currentValue.dim.length : accumulator;
137168
};

0 commit comments

Comments
 (0)