Merge pull request #13 from MichiganDaily/dev

Overhaul API

.github/ISSUE_TEMPLATE/bug_report.md

@@ -12,6 +12,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +25,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.gitignore

@@ -1 +1,8 @@
+# Node
 node_modules/
+
+# macOS
+.DS_Store
+
+# Visual Studio Code
+.vscode

README.md

@@ -2,82 +2,56 @@
 
 > beautiful or else.
 
-**bore** lets you write extendible, reusable, and stylistically consistent
-visualizations. We're using it for our interactive graphics at the [Michigan
-Daily](https://michigandaily.com).
-
-<p align="center">
-  <img width="300" src="https://imgur.com/HyMdqda.png">
-</p>
-
-## Installation
-
-Minified CSS and JS files are in `dist/`.
-
-Depends on:
-
-- [d3v5](https://d3js.org/)
-- [d3-array](https://github.com/d3/d3-array) to use the most up-to-date array
-  functions
-- [d3-annotations](https://d3-annotation.susielu.com/) for annotations
-
-## Usage
-
-### Example
-
-In your HTML, have a parent figure element with class `vis` and another
-identifying class name.
-```html
-<figure class="vis cases_closings"></figure>
-```
-In your JavaScript, declare a new visualization by inheriting one of our base
-visualization classes (documentation coming soon™). Create an instance of the
-visualization and call its `draw()` function to render.
-```js
-class CasesClosings extends bore.MultiLinePlot {
-  constructor(el, width, height, margins, data) {
-    super(el, width, height, margins, data);
-    this.title = "A Late Start and a Rush to Catch Up";
-    this.subtitle = "Cumulative case and school count on a log scale (slope is rate of exponential increase)."
-    this.author = "Naitian Zhou";
-
-    this.yscale = d3.scaleLog().range([this.height, 0]).nice();
-    this.yaxis.ticks(6);
-
-    this.xaxis.tickFormat(d3.timeFormat("%m-%d"));
-    this.draw();
-  }
-
-  hoverFormat(d) {
-    // this is a shorthand because index is 0 or 1
-    return !d.ind ? `${d.y} schools` : `${d.y} cases`;
-  }
-
-  draw() {
-    super.draw();
-  }
-}
-const closings_counts = closings_ct.getData();
-const case_counts = Array.from(
-d3.rollup(
-  nytcases_data,
-  (g) => d3.sum(g.map((s) => s.cases)),
-  (d) => formatTime(d.date)
-).entries(),
-d => ({x: parseTime(d[0]), y: d[1]})
-).sort((a, b) => d3.ascending(a.x, b.x));
-const cases_closings = new CasesClosings(
-  ".vis.cases_closings",
-  400,
-  300,
-  { top: 60, bottom: 50, left: 50, right: 60 },
-  [closings_counts, case_counts]
-)
-```
-
-## Contributing
-
-Clone the repository, and install the node modules with `yarn`.
-
-To build for production (compiles and minifies SCSS and Javascript), just run
-`gulp`.
+`bore` is a library built on top of [D3](https://github.com/d3/d3) that lets you create extendible, reusable, and stylistically consistent visualizations. It follows from the article ["Towards Reusable Charts"](https://bost.ocks.org/mike/chart/) written by [Mike Bostock](https://github.com/d3/d3).
+
+We use it for our data graphics at [The Michigan Daily](https://michigandaily.com).
+
+## Installing `bore`
+
+1. Add `bore` as a dependency:
+
+   ```bash
+   yarn add "https://github.com/MichiganDaily/bore.git#dev"
+   ```
+
+2. Import `bore`:
+
+   ```javascript
+   import * as bore from "bore";
+   ```
+
+## API Reference
+
+TODO
+
+## Developing `bore`
+
+### Install `bore` and `cookie`
+
+1. In the same parent directory, clone `bore` and `cookie`.
+2. In `cookie`, run `make`.
+3. In `bore`, run `yarn`.
+
+### Link `bore` and `cookie`
+
+1. In `bore`, run `yarn link`.
+2. In `cookie`, run `yarn link "bore"`.
+3. Import `bore` in `cookie`:
+
+   ```javascript
+   // cookie/src/graphic/js/graphic.js
+   import * as bore from "bore";
+   ```
+
+### Serve `cookie`
+
+In `cookie`, run `make dev`.
+
+Whenever changes are made in `bore`, the `cookie` server will reload to reflect those changes.
+
+### Unlink `bore` and `cookie`
+
+When finished developing, unlink the repositories.
+
+1. In `cookie`, run `yarn unlink "bore"`.
+2. In `bore`, run `yarn unlink`.

package.json

@@ -1,20 +1,32 @@
 {
   "name": "bore",
   "version": "1.0.0",
-  "description": "Michigan Daily D3 graphing library",
-  "main": "bore.min.js",
-  "repository": "https://github.com/MichiganDaily/bore",
-  "author": "Naitian Zhou",
+  "description": "The Michigan Daily D3 graphing library",
+  "type": "module",
+  "main": "src/bore.js",
+  "module": "src/bore.js",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MichiganDaily/bore.git"
+  },
+  "author": {
+    "name": "Naitian Zhou"
+  },
+  "contributors": [
+    {
+      "name": "Eric Lau"
+    }
+  ],
   "license": "MIT",
+  "dependencies": {
+    "d3": "^7.4.4"
+  },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-sass": "^4.0.2",
-    "gulp-uglify": "^3.0.2",
-    "node-sass": "^7.0.0"
+    "@rollup/plugin-node-resolve": "^13.2.1",
+    "rollup": "^2.70.2",
+    "rollup-plugin-terser": "^7.0.2"
   }
 }

rollup.config.js

@@ -0,0 +1,13 @@
+import resolve from "@rollup/plugin-node-resolve";
+import { terser } from "rollup-plugin-terser";
+import pkg from "./package.json";
+
+export default [{
+    input: "./src/bore.js",
+    output: [{ file: `./dist/${pkg.name}.min.js` }],
+    plugins: [resolve(), terser()],
+    onwarn(message, warn) {
+        if (message.code === "CIRCULAR_DEPENDENCY") return;
+        warn(message);
+    }
+}]