Get dependencies on a sure footing (#1)

* Do not roll dependencies into build artifacts * Bump version
johnwalley · Sep 3, 2016 · f7981e2 · f7981e2
1 parent f07842b
commit f7981e2
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 33 deletions.
diff --git a/example/index.html b/example/index.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="./example/bumps.css" >
   <script src="https://d3js.org/d3.v4.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>
   <script src="../build/d3-bumps-chart.js"></script>
 </head>
 
@@ -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
@@ -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
@@ -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() ],
 };
diff --git 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,15 +389,15 @@ 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)
             .style('cursor', 'pointer');
 
     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
@@ -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
@@ -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();
 });