From a3a6766bfaef5c55d552aa2ef8ca94f18f8f7a7e Mon Sep 17 00:00:00 2001 From: Rob McGuire-Dale Date: Tue, 8 Mar 2016 19:57:48 -0800 Subject: [PATCH 1/4] Remove unnecessary references to `react-d3-core` --- get_start/index.html | 47 ++++++++++------------------- intro/get_start/write_chart.md | 55 ++++++++++++---------------------- 2 files changed, 34 insertions(+), 68 deletions(-) diff --git a/get_start/index.html b/get_start/index.html index 10a89b6..b31665a 100644 --- a/get_start/index.html +++ b/get_start/index.html @@ -276,8 +276,8 @@

Require Libraries

We need to require some library we need to use:

// first of course react!
 var React = require('react');
-// require `react-d3-core` for Chart component, which help us build a blank svg and chart title.
-var Chart = require('react-d3-core').Chart;
+// second, ReactDOM.
+var ReactDOM = require('react-dom');
 // require `react-d3-basic` for Line chart component.
 var LineChart = require('react-d3-basic').LineChart;
@@ -315,31 +315,23 @@

Settings

Render!

Render it in React!

ReactDOM.render(
-    <Chart
-      title={title}
-      width={width}
-      height={height}
-      margins= {margins}
-      >
-      <LineChart
-        margins= {margins}
-        title={title}
-        data={chartData}
-        width={width}
-        height={height}
-        chartSeries={chartSeries}
-        x={x}
-      />
-    </Chart>
+  <LineChart
+    margins= {margins}
+    title={title}
+    data={chartData}
+    width={width}
+    height={height}
+    chartSeries={chartSeries}
+    x={x}
+  />
   , document.getElementById('line-user')
-  )
+)

Full code in your javascript

"use strict"
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Chart = require('react-d3-core').Chart;
 var LineChart = require('react-d3-basic').LineChart;
 
 (function() {
@@ -366,16 +358,8 @@ 
Full code in your javascript

       return d.index;
     }
 
-  ReactDOM.render(
-    <Chart
-      title={title}
-      width={width}
-      height={height}
-      margins= {margins}
-      >
+    ReactDOM.render(
       <LineChart
-        showXGrid= {false}
-        showYGrid= {false}
         margins= {margins}
         title={title}
         data={chartData}
@@ -384,9 +368,8 @@ 
Full code in your javascript

         chartSeries={chartSeries}
         x={x}
       />
-    </Chart>
-  , document.getElementById('line-user')
-  )
+      , document.getElementById('line-user')
+    )
 })()
diff --git a/intro/get_start/write_chart.md b/intro/get_start/write_chart.md index 91f56c4..46adc1c 100644 --- a/intro/get_start/write_chart.md +++ b/intro/get_start/write_chart.md @@ -8,8 +8,8 @@ We need to require some library we need to use: ```js // first of course react! var React = require('react'); -// require `react-d3-core` for Chart component, which help us build a blank svg and chart title. -var Chart = require('react-d3-core').Chart; +// second, ReactDOM. +var ReactDOM = require('react-dom'); // require `react-d3-basic` for Line chart component. var LineChart = require('react-d3-basic').LineChart; ``` @@ -62,24 +62,17 @@ Render it in React! ```js ReactDOM.render( - - - + , document.getElementById('line-user') - ) +) ``` ### Full code in your javascript @@ -89,7 +82,6 @@ ReactDOM.render( var React = require('react'); var ReactDOM = require('react-dom'); -var Chart = require('react-d3-core').Chart; var LineChart = require('react-d3-basic').LineChart; (function() { @@ -117,25 +109,16 @@ var LineChart = require('react-d3-basic').LineChart; } ReactDOM.render( - - - - , document.getElementById('line-user') + chartSeries={chartSeries} + x={x} + /> + , document.getElementById('line-user') ) })() ``` From 524e6c25d2aa2804b6dca97adddbaa9246b4d9ed Mon Sep 17 00:00:00 2001 From: Rob McGuire-Dale Date: Tue, 8 Mar 2016 19:58:27 -0800 Subject: [PATCH 2/4] Mention alternate ES6 module syntax --- get_start/index.html | 29 +++++++++++++++++------------ intro/get_start/write_chart.md | 8 ++++++++ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/get_start/index.html b/get_start/index.html index b31665a..61a5e44 100644 --- a/get_start/index.html +++ b/get_start/index.html @@ -281,6 +281,11 @@

Require Libraries

// require `react-d3-basic` for Line chart component. var LineChart = require('react-d3-basic').LineChart; +

Or if you're using ES6 modules:

+
import React from 'react';
+import ReactDOM from 'react-dom';
+import {LineChart} from 'react-d3-basic';
+

Load

Load your data using webpack

var chartData = require('dsv?delimiter=,!../../data/garbage.csv');
@@ -358,18 +363,18 @@ 
Full code in your javascript

       return d.index;
     }
 
-    ReactDOM.render(
-      <LineChart
-        margins= {margins}
-        title={title}
-        data={chartData}
-        width={width}
-        height={height}
-        chartSeries={chartSeries}
-        x={x}
-      />
-      , document.getElementById('line-user')
-    )
+  ReactDOM.render(
+    <LineChart
+      margins= {margins}
+      title={title}
+      data={chartData}
+      width={width}
+      height={height}
+      chartSeries={chartSeries}
+      x={x}
+    />
+    , document.getElementById('line-user')
+  )
 })()
diff --git a/intro/get_start/write_chart.md b/intro/get_start/write_chart.md index 46adc1c..b6e3927 100644 --- a/intro/get_start/write_chart.md +++ b/intro/get_start/write_chart.md @@ -14,6 +14,14 @@ var ReactDOM = require('react-dom'); var LineChart = require('react-d3-basic').LineChart; ``` +Or if you're using ES6 modules: + +```js +import React from 'react'; +import ReactDOM from 'react-dom'; +import {LineChart} from 'react-d3-basic'; +``` + ### Load Load your data using webpack From 041997fd76f68ff51f5993e64167bb548b2e37fd Mon Sep 17 00:00:00 2001 From: Rob McGuire-Dale Date: Tue, 8 Mar 2016 20:20:37 -0800 Subject: [PATCH 3/4] Provide dev tools locally, and include NPM script aliases --- package.json | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ba13d4f..617e9a9 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,10 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "init": "npm install && git submodule init && git submodule update", - "sync": "git submodule foreach git pull origin master" + "sync": "git submodule foreach git pull origin master", + "start": "http-server", + "build-site": "canner-core build canner.js", + "build-docs": "make smashmd" }, "repository": { "type": "git", @@ -19,7 +22,10 @@ "url": "https://github.com/react-d3/react-d3.github.io/issues" }, "homepage": "https://github.com/react-d3/react-d3.github.io", - "dependencies": { - }, - "devDependencies": {} + "dependencies": {}, + "devDependencies": { + "canner-core": "^0.3.0", + "http-server": "^0.9.0", + "smash-md": "^0.1.2" + } } From f725553e6667a4a3c78cce46a5b1b19078a5306b Mon Sep 17 00:00:00 2001 From: Rob McGuire-Dale Date: Tue, 8 Mar 2016 20:21:06 -0800 Subject: [PATCH 4/4] Update README to use build-tool enhancements --- README.md | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index dcd3972..6c65a59 100644 --- a/README.md +++ b/README.md @@ -16,35 +16,26 @@ Update git submodules $ npm run sync ``` -## Rebuild website - -first you have to install `canner-core` to generate html in http://reactd3.org +Start the dev server. The site will be available at http://localhost:8080 ``` -npm install -g canner-core +$ npm start ``` -building web pages. +## Rebuild website + +The parent website is written in markdown, and can be found in `./intro`. After each change, build the site with: ``` -canner-core build canner.js +$ npm run build-site ``` ----- - -We build most of our document in markdown. - -Inside `./docs` folder you can see there are two folders in each folder `md`, `md_origin`. `md_origin` is the original md files which need to compile via [smashmd](https://github.com/Canner/smash-md). - -You can just type +Additionally, we put the contents inside `./docs`. In each folder, there are two folders, `md`, and `md_origin`. `md_origin` contains the original md files which need to compile via [smashmd](https://github.com/Canner/smash-md). After each change, run build the docs with: ``` -make smashmd +$ npm run build-docs ``` -to recompile the whole original markdown files. - - ## License MIT