Skip to content

Commit 823f000

Browse files
ioandrdrjova
ioandr
authored and
drjova
committed
general: refactor configuration
* Adds uglify-webpack-plugin. * Creates individual bundle for styles. * Small refactor on default configurations. * Adds debounce time in resize events. * Removes util/util.js. Signed-off by Ioannis Androulidakis <[email protected]>
1 parent 7724ba8 commit 823f000

21 files changed

+168
-126
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ $ xdg-open docs/index.html
4848

4949
## Usage
5050

51-
Getting started [guide](https://github.com/CERNDocumentServer/invenio-statistics-js/1_started.md)
51+
Getting started [guide](https://inveniosoftware.github.io/invenio-statistics-js/examples/tutorials/1_started.html)
5252

5353
## License
5454

‎examples/bar/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@
2929
<script src="../node_modules/d3-svg-legend/d3-legend.min.js"></script>
3030
<script src="../node_modules/d3-tip/index.js"></script>
3131
<script src="../node_modules/lodash/lodash.min.js"></script>
32+
<link rel="stylesheet" type="text/css" href="/dist/styles.bundle.css">
3233
</head>
3334
<body>
34-
<div class='count_per_country' style='width: 95vw; height: 95vh;'></div>
35+
<div class='bar-graph' style='width: 95vw; height: 95vh;'></div>
3536
<script src="../dist/bar.bundle.js"></script>
3637
</body>
3738
</html>

‎examples/bar/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { BarGraph } from '../../src/index';
2626

2727
// Initialize parameters
2828
const data = dataCDS.response2;
29-
const elementClass = 'count_per_country';
29+
const elementClass = 'bar-graph';
3030

3131
// Bar Graph
3232
new BarGraph(data, elementClass).render();

‎examples/groupedBar/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@
2929
<script src="../node_modules/d3-svg-legend/d3-legend.min.js"></script>
3030
<script src="../node_modules/d3-tip/index.js"></script>
3131
<script src="../node_modules/lodash/lodash.min.js"></script>
32+
<link rel="stylesheet" type="text/css" href="/dist/styles.bundle.css">
3233
</head>
3334
<body>
34-
<div class='stats_per_country' style='width: 95vw; height: 95vh;'></div>
35+
<div class='grouped-bar-graph' style='width: 95vw; height: 95vh;'></div>
3536
<script src="../dist/groupedBar.bundle.js"></script>
3637
</body>
3738
</html>

‎examples/groupedBar/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { GroupedBarGraph } from '../../src/index';
2626

2727
// Initialize parameters
2828
const data = dataCDS.response3;
29-
const elementClass = 'stats_per_country';
29+
const elementClass = 'grouped-bar-graph';
3030

3131
// Grouped Bar Graph
3232
new GroupedBarGraph(data, elementClass).render();

‎examples/line/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@
2929
<script src="../node_modules/d3-svg-legend/d3-legend.js"></script>
3030
<script src="../node_modules/d3-tip/index.js"></script>
3131
<script src="../node_modules/lodash/lodash.min.js"></script>
32+
<link rel="stylesheet" type="text/css" href="/dist/styles.bundle.css">
3233
</head>
3334
<body>
34-
<div class='stats_per_week' style='width: 95vw; height: 95vh;'></div>
35+
<div class='line-graph' style='width: 95vw; height: 95vh;'></div>
3536
<script src="../dist/line.bundle.js"></script>
3637
</body>
3738
</html>

‎examples/line/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { LineGraph } from '../../src/index';
2626

2727
// Initialize parameters
2828
const data = dataCDS.response1;
29-
const elementClass = 'stats_per_week';
29+
const elementClass = 'line-graph';
3030

3131
// Line Graph
3232
new LineGraph(data, elementClass).render();

‎examples/tutorials/1_started.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@ a new classed `div` element will be created as the placeholder of the graph.*
2525
* A `JSON` object as the **configuration**. *If no configuration object is specified, the default one is used.*
2626

2727
## Usage
28-
* [Line Graph](https://github.com/CERNDocumentServer/invenio-statistics-js/2_line.md)
29-
* [Bar Graph](https://github.com/CERNDocumentServer/invenio-statistics-js/3_bar.md)
28+
* [Line Graph](https://inveniosoftware.github.io/invenio-statistics-js/examples/tutorials/2_line.html)
29+
* [Bar Graph](https://inveniosoftware.github.io/invenio-statistics-js/examples/tutorials/3_bar.html)

‎karma.conf.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ module.exports = (config) => {
1616
'karma-webpack',
1717
'karma-jasmine',
1818
'karma-coverage',
19-
'karma-phantomjs-launcher',
2019
'karma-coverage-istanbul-reporter',
21-
'karma-sourcemap-loader'
20+
'karma-phantomjs-launcher'
2221
],
2322

2423
// list of files / patterns to load in the browser
@@ -38,7 +37,7 @@ module.exports = (config) => {
3837
// preprocess matching files before serving them to the browser
3938
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
4039
preprocessors: {
41-
'test/**/*.spec.js': ['webpack', 'sourcemap'],
40+
'test/**/*.spec.js': ['webpack'],
4241
'src/**/*.js': ['webpack', 'coverage']
4342
},
4443

@@ -49,9 +48,8 @@ module.exports = (config) => {
4948
// possible values: 'dots', 'progress'
5049
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
5150
reporters: ['progress', 'coverage-istanbul'],
52-
5351
coverageIstanbulReporter: {
54-
reports: ['html', 'lcovonly'],
52+
reports: ['html', 'lcovonly', 'text-summary'],
5553
dir: path.join(__dirname, 'coverage'),
5654
fixWebpackSourcePaths: true,
5755
skipFilesWithNoCoverage: true,

‎package.json

+9-7
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,21 @@
1414
"author": "CERN",
1515
"license": "GPL-2.0",
1616
"devDependencies": {
17-
"babel-core": "^6.25.0",
17+
"babel-core": "^6.26.0",
1818
"babel-eslint": "^7.2.3",
19-
"babel-loader": "^7.1.1",
19+
"babel-loader": "^7.1.2",
2020
"babel-plugin-lodash": "^3.2.11",
21-
"babel-polyfill": "^6.23.0",
21+
"babel-polyfill": "^6.26.0",
2222
"babel-preset-env": "^1.6.0",
2323
"banner-webpack-plugin": "^0.2.3",
24-
"css-loader": "^0.28.4",
25-
"eslint": "^4.4.1",
24+
"css-loader": "^0.28.5",
25+
"eslint": "^4.5.0",
2626
"eslint-config-airbnb": "^15.1.0",
2727
"eslint-loader": "^1.9.0",
2828
"eslint-plugin-import": "^2.7.0",
2929
"eslint-plugin-jsx-a11y": "^6.0.2",
30-
"eslint-plugin-react": "^7.2.0",
30+
"eslint-plugin-react": "^7.2.1",
31+
"extract-text-webpack-plugin": "^3.0.0",
3132
"friendly-errors-webpack-plugin": "^1.6.1",
3233
"istanbul": "^0.4.5",
3334
"istanbul-instrumenter-loader": "^3.0.0",
@@ -47,7 +48,8 @@
4748
"node-sass": "^4.5.3",
4849
"sass-loader": "^6.0.6",
4950
"style-loader": "^0.18.2",
50-
"webpack": "^3.5.3",
51+
"uglifyjs-webpack-plugin": "^0.4.6",
52+
"webpack": "^3.5.5",
5153
"yargs": "^8.0.2"
5254
},
5355
"dependencies": {

‎src/config/barConfig.js

+12-6
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
* as an Intergovernmental Organization or submit itself to any jurisdiction.
2222
*/
2323

24+
import _ from 'lodash';
25+
2426
// Export default configuration object
2527
const BarGraphConfig = {};
2628

@@ -45,8 +47,8 @@ BarGraphConfig.other = {
4547
options: {
4648
padding: 0.05,
4749
label: {
48-
value: 'Country',
49-
visible: true
50+
value: 'LabelX',
51+
visible: false
5052
},
5153
line: {
5254
visible: false
@@ -69,8 +71,8 @@ BarGraphConfig.other = {
6971
},
7072
options: {
7173
label: {
72-
value: 'Count',
73-
visible: true
74+
value: 'LabelY',
75+
visible: false
7476
},
7577
line: {
7678
visible: false
@@ -87,8 +89,8 @@ BarGraphConfig.other = {
8789
}
8890
},
8991
title: {
90-
value: 'Count per Country',
91-
visible: true
92+
value: 'Title',
93+
visible: false
9294
},
9395
colorScale: 'schemeCategory20',
9496
tooltip: {
@@ -108,4 +110,8 @@ BarGraphConfig.other = {
108110
}
109111
};
110112

113+
// For keyType : date
114+
BarGraphConfig.date = _.cloneDeep(BarGraphConfig.other);
115+
BarGraphConfig.date.axis.x.scale.format = '%d %b %Y';
116+
111117
export default BarGraphConfig;

‎src/config/groupedBarConfig.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
* as an Intergovernmental Organization or submit itself to any jurisdiction.
2222
*/
2323

24+
import _ from 'lodash';
25+
2426
// Export default configuration object
2527
const GroupedBarGraphConfig = {};
2628

@@ -45,7 +47,7 @@ GroupedBarGraphConfig.other = {
4547
options: {
4648
padding: 0.1,
4749
label: {
48-
value: 'Country',
50+
value: 'LabelX',
4951
visible: false
5052
},
5153
line: {
@@ -69,8 +71,8 @@ GroupedBarGraphConfig.other = {
6971
},
7072
options: {
7173
label: {
72-
value: 'Count',
73-
visible: true
74+
value: 'LabelY',
75+
visible: false
7476
},
7577
line: {
7678
visible: false
@@ -87,8 +89,8 @@ GroupedBarGraphConfig.other = {
8789
}
8890
},
8991
title: {
90-
value: 'Statistics per Country',
91-
visible: true
92+
value: 'Title',
93+
visible: false
9294
},
9395
colorScale: 'schemeCategory20',
9496
tooltip: {
@@ -105,4 +107,8 @@ GroupedBarGraphConfig.other = {
105107
}
106108
};
107109

110+
// For keyType : date
111+
GroupedBarGraphConfig.date = _.cloneDeep(GroupedBarGraphConfig.other);
112+
GroupedBarGraphConfig.date.axis.x.scale.format = '%d %b %Y';
113+
108114
export default GroupedBarGraphConfig;

‎src/config/lineConfig.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ LineGraphConfig.date = {
7878
},
7979
options: {
8080
label: {
81-
value: 'Count',
81+
value: 'LabelY',
8282
visible: false
8383
},
8484
line: {
@@ -96,8 +96,8 @@ LineGraphConfig.date = {
9696
}
9797
},
9898
title: {
99-
visible: true,
100-
value: 'Stats per week'
99+
value: 'Title',
100+
visible: false
101101
},
102102
colorScale: 'schemeCategory10',
103103
tooltip: {
@@ -141,12 +141,13 @@ LineGraphConfig.other = {
141141
mapTo: 'key',
142142
scale: {
143143
type: 'scaleBand',
144-
padding: 0.2
144+
padding: 0.2,
145+
format: null
145146
},
146147
options: {
147148
padding: 0,
148149
label: {
149-
value: 'Country',
150+
value: 'LabelX',
150151
visible: false
151152
},
152153
line: {
@@ -166,11 +167,11 @@ LineGraphConfig.other = {
166167
mapTo: 'value',
167168
scale: {
168169
type: 'scaleLinear',
169-
format: ''
170+
format: null
170171
},
171172
options: {
172173
label: {
173-
value: 'Downloads',
174+
value: 'LabelY',
174175
visible: false
175176
},
176177
line: {
@@ -188,8 +189,8 @@ LineGraphConfig.other = {
188189
}
189190
},
190191
title: {
191-
visible: true,
192-
value: 'Stats per country'
192+
value: 'Title',
193+
visible: false
193194
},
194195
colorScale: 'schemeCategory10',
195196
tooltip: {

‎src/graph/graph.js

+21-14
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@
2626

2727
import * as d3 from 'd3';
2828
import _ from 'lodash';
29-
import '../styles/styles.scss';
30-
import isOut from '../util/util';
3129

3230
require('d3-extended')(d3);
3331

@@ -206,8 +204,8 @@ class Graph {
206204
// Create the X-axis (horizontal)
207205
this.xAxis = d3.axisBottom(this.x);
208206

209-
// If timescale, set the format of the ticks
210-
if (this.config.axis.x.scale.type === 'scaleTime') {
207+
// If specified, set the format of the ticks
208+
if (this.config.axis.x.scale.format !== null) {
211209
this.xAxis.tickFormat(d3.timeFormat(this.config.axis.x.scale.format));
212210
}
213211

@@ -471,7 +469,8 @@ class Graph {
471469
selectedElements
472470
.transition()
473471
.duration(250)
474-
.attr('style', toggleLegend ? 'opacity: 1' : 'opacity: 0.3');
472+
.attr('style', toggleLegend ? 'opacity: 1' : 'opacity: 0.3')
473+
.style('cursor', 'pointer');
475474
});
476475

477476
// Add the legend to the graph and change cursor
@@ -484,7 +483,8 @@ class Graph {
484483
}
485484

486485
// Get the dimensions of the current legend
487-
const legendBox = this.svg.select('.igj-legend').node().getBBox();
486+
const legendBox = d3.select(`.${this.classElement}`)
487+
.select('.igj-legend').node().getBBox();
488488

489489
// Position the legend
490490
if (this.config.legend.position === 'bottom') {
@@ -552,6 +552,15 @@ class Graph {
552552
labelY = labels[1];
553553
}
554554

555+
// Helper function to calculate position of tooltip
556+
function isOut(valX, valY, w, h) {
557+
const out = {};
558+
out.top = (valY / h) < 0.15;
559+
out.left = (valX / w) < 0.1;
560+
out.right = (valX / w) > 0.9;
561+
return out;
562+
}
563+
555564
this.tooltip = d3.tip()
556565
.attr('class', `${this.classElement} igj-tip`)
557566
.offset((d) => {
@@ -609,16 +618,14 @@ class Graph {
609618
return dir;
610619
})
611620
.html((d) => {
612-
let res = '';
613-
if (this.config.axis.x.scale.type === 'scaleTime') {
621+
let res = `
622+
<strong>${labelX}:</strong>
623+
${_.get(d, keyX)}</br>`;
624+
if (this.config.axis.x.scale.format !== null) {
614625
res = `
615626
<strong>${labelX}:</strong>
616627
${d3.timeFormat(this.config.axis.x.scale.format)(_.get(d, keyX))}</br>
617628
`;
618-
} else {
619-
res = `
620-
<strong>${labelX}:</strong>
621-
${_.get(d, keyX)}</br>`;
622629
}
623630
res += `
624631
<strong>${labelY}:</strong>
@@ -662,9 +669,9 @@ class Graph {
662669
*/
663670
scaleOnResize(f) {
664671
Graph.resizeHandlers.push(f);
665-
d3.select(window).on('resize', () => {
672+
d3.select(window).on('resize', _.debounce(() => {
666673
Graph.resizeHandlers.forEach(h => h());
667-
});
674+
}, 150));
668675
}
669676

670677
/**

0 commit comments

Comments
 (0)