From f7981e2f336f426112b1397eee6904b552731b3c Mon Sep 17 00:00:00 2001 From: John Walley Date: Sat, 3 Sep 2016 11:41:41 +0100 Subject: [PATCH] Get dependencies on a sure footing (#1) * Do not roll dependencies into build artifacts * Bump version --- example/index.html | 9 ++++----- package.json | 14 ++++++++------ rollup.config.js | 8 +------- src/bumpsChart.js | 42 ++++++++++++++++++++++++++++------------- src/util.js | 2 +- test/bumpsChart-test.js | 2 +- 6 files changed, 44 insertions(+), 33 deletions(-) diff --git a/example/index.html b/example/index.html index 56ba890..46d5db7 100644 --- a/example/index.html +++ b/example/index.html @@ -3,6 +3,7 @@ + @@ -28,16 +29,14 @@ var data = bumpsChart.joinEvents(transformedEvents, set, gender); - console.log(data); - var props = { data: data, year: { start: 2015, end: 2016 }, selectedCrews: new Set(), highlightedCrew: null, - addSelectedCrew: null, - removeSelectedCrew: null, - highlightCrew: null, + addSelectedCrew: bumpsChart.bumpsChart().addSelectedCrew, + removeSelectedCrew: bumpsChart.bumpsChart().removeSelectedCrew, + highlightCrew: bumpsChart.bumpsChart().highlightCrew, windowWidth: window.width }; diff --git a/package.json b/package.json index 3b8ee4e..dcac416 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "d3-bumps-chart", - "version": "0.0.3", + "version": "0.0.4", "description": "Draw bumps charts.", "keywords": [ "d3", @@ -21,20 +21,22 @@ "url": "https://github.com/johnwalley/d3-bumps-chart.git" }, "scripts": { - "pretest": "rm -rf build && mkdir build && rollup -c --banner \"$(preamble)\" -f umd -n bumpsChart -o build/d3-bumps-chart.js -- index.js", + "pretest": "rm -rf build && mkdir build && rollup -c --banner \"$(preamble)\" -f umd -g d3-array:d3,d3-dsv:d3,d3-selection:d3,d3-scale:d3,d3-shape:d3,lodash:_ -n bumpsChart -o build/d3-bumps-chart.js -- index.js", "test": "tape 'test/**/*-test.js' && eslint index.js src", "prepublish": "npm run test && uglifyjs --preamble \"$(preamble)\" build/d3-bumps-chart.js -c -m -o build/d3-bumps-chart.min.js", "postpublish": "zip -j build/d3-bumps-chart.zip -- LICENSE README.md build/d3-bumps-chart.js build/d3-bumps-chart.min.js" }, "dependencies": { + "d3-array": "^1.0.1", + "d3-dsv": "^1.0.1", + "d3-scale": "^1.0.3", + "d3-selection": "^1.0.2", + "d3-shape": "^1.0.3", + "lodash": "^4.15.0" }, "devDependencies": { "babel-preset-es2015-rollup": "^1.2.0", - "d3": "^4.2.2", - "d3-array": "^1.0.1", - "d3-dsv": "^1.0.1", "eslint": "2", - "lodash-es": "^4.15.0", "package-preamble": "0.0.2", "rollup": "0.34", "rollup-plugin-babel": "^2.6.1", diff --git a/rollup.config.js b/rollup.config.js index 23bcd05..cc23070 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,11 +1,5 @@ import babel from 'rollup-plugin-babel'; -import nodeResolve from 'rollup-plugin-node-resolve'; export default { - entry: 'index.js', - format: 'cjs', - plugins: [ nodeResolve(), babel({ - exclude: 'node_modules/**' - }) ], - dest: 'bundle.js' + plugins: [ babel() ], }; \ No newline at end of file diff --git a/src/bumpsChart.js b/src/bumpsChart.js index dc7f833..7bf29fd 100644 --- a/src/bumpsChart.js +++ b/src/bumpsChart.js @@ -1,4 +1,7 @@ -import * as d3 from 'd3'; +import {select} from 'd3-selection'; +import {scaleLinear} from 'd3-scale'; +import {line} from 'd3-shape'; +import {max, range} from 'd3-array'; const abbrevCamCollege = { 'A': 'Addenbrooke\'s', @@ -148,11 +151,13 @@ function crewColor(name) { } export default function() { + var selectedCrews = new Set(); + function bumpsChart() { } bumpsChart.setup = function(el) { - const svg = d3.select(el).select('svg'); + const svg = select(el).select('svg'); const clipPathId = 'clip' + Math.random(100000); // TODO: Require a unique id @@ -224,13 +229,13 @@ export default function() { crews.forEach(crew => crew.highlighted = selectedCrews.has(crew.name)); crews.forEach(crew => crew.hover = highlightedCrew === crew.name); - const x = d3.scaleLinear(); - const y = d3.scaleLinear(); + const x = scaleLinear(); + const y = scaleLinear(); x.domain([0, 4]); x.range([0, xRangeMax]); - const yDomainMax = d3.max(crews, c => d3.max(c.values.filter(d => d !== null), v => v.pos)); + const yDomainMax = max(crews, c => max(c.values.filter(d => d !== null), v => v.pos)); y.domain([-1, yDomainMax]); y.range([yMarginTop, yDomainMax * heightOfOneCrew - yMarginTop]); @@ -248,7 +253,7 @@ export default function() { const labelsGroup = svg.select('.labels'); const lines = svg.select('.lines'); - const line = d3.line() + const lineFunc = line() .defined(d => d !== null && d.pos > -1) .x((d) => x(d.day)) .y((d) => y(d.pos)); @@ -262,7 +267,7 @@ export default function() { const startLabelIndex = yearRelative * 5; let finishLabelIndex = startLabelIndex + numYearsToView * 5 - 1; - const maxDays = d3.max(data.crews.map(c => c.values.length)); + const maxDays = max(data.crews.map(c => c.values.length)); if (finishLabelIndex > maxDays - 1) { finishLabelIndex = maxDays - 1; @@ -329,7 +334,7 @@ export default function() { // Years const years = yearsGroup.selectAll('.year') - .data(d3.range(startYear, endYear + 1), d => d); + .data(range(startYear, endYear + 1), d => d); years.enter() .append('text') @@ -384,7 +389,7 @@ export default function() { crewYear.enter() .append('path') - .attr('d', d => line(d.values)) + .attr('d', d => lineFunc(d.values)) .attr('class', 'active') .classed('blades', d => d.blades) .classed('spoons', d => d.spoons) @@ -392,7 +397,7 @@ export default function() { crewYear.transition() .duration(transitionLength) - .attr('d', d => line(d.values)); + .attr('d', d => lineFunc(d.values)); crewYear.exit() .transition() @@ -421,13 +426,13 @@ export default function() { .on('mouseout', () => { highlightCrew(null); }) - .attr('d', d => line(d.values)) + .attr('d', d => lineFunc(d.values)) .attr('class', 'background') .style('cursor', 'pointer'); crewBackground.transition() .duration(transitionLength) - .attr('d', d => line(d.values)); + .attr('d', d => lineFunc(d.values)); crewBackground.exit() .transition() @@ -525,7 +530,7 @@ export default function() { // NumbersRight const numbersRight = labelsGroup.selectAll('.position-label-right') - .data(d3.range(0, crews.filter(d => + .data(range(0, crews.filter(d => d.values[d.values.length === finishLabelIndex ? finishLabelIndex - 1 : finishLabelIndex].pos > -1).length), d => d); @@ -581,5 +586,16 @@ export default function() { .remove(); } + bumpsChart.addSelectedCrew = function(name) { + selectedCrews.add(name); + } + + bumpsChart.removeSelectedCrew = function(name) { + selectedCrews.delete(name); + } + + bumpsChart.highlightCrew = function() { + } + return bumpsChart; } diff --git a/src/util.js b/src/util.js index a72cfc7..6f23b8b 100644 --- a/src/util.js +++ b/src/util.js @@ -1,4 +1,4 @@ -import {uniq, uniqBy} from 'lodash-es'; +import {uniq, uniqBy} from 'lodash'; import {csvParse} from 'd3-dsv'; import {min, max} from 'd3-array'; diff --git a/test/bumpsChart-test.js b/test/bumpsChart-test.js index 4bcafb8..c35c205 100644 --- a/test/bumpsChart-test.js +++ b/test/bumpsChart-test.js @@ -2,6 +2,6 @@ var tape = require("tape"), bumpsChart = require("../"); tape("setup() a valid svg element", function(test) { - test.doesNotThrow(bumpsChart.bumpsChart({}).setup, ""); + test.doesNotThrow(bumpsChart.bumpsChart().setup, ""); test.end(); });