Skip to content

Documentation and Build Tooling Updates #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Documentation and Build Tooling Updates #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a3a6766
Remove unnecessary references to `react-d3-core`
robatron Mar 9, 2016
524e6c2
Mention alternate ES6 module syntax
robatron Mar 9, 2016
041997f
Provide dev tools locally, and include NPM script aliases
robatron Mar 9, 2016
f725553
Update README to use build-tool enhancements
robatron Mar 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
60 changes: 24 additions & 36 deletions get_start/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,11 +276,16 @@ <h3 id="require-libraries">Require Libraries</h3>
<p>We need to require some library we need to use:</p>
<pre><code class="lang-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;
</code></pre>
<p>Or if you're using ES6 modules:</p>
<pre><code class="lang-js">import React from 'react';
import ReactDOM from 'react-dom';
import {LineChart} from 'react-d3-basic';
</code></pre>
<h3 id="load">Load</h3>
<p>Load your data using webpack</p>
<pre><code class="lang-js">var chartData = require('dsv?delimiter=,!../../data/garbage.csv');
Expand Down Expand Up @@ -315,31 +320,23 @@ <h3 id="settings">Settings</h3>
<h3 id="render-">Render!</h3>
<p>Render it in React!</p>
<pre><code class="lang-js">ReactDOM.render(
&lt;Chart
title={title}
width={width}
height={height}
margins= {margins}
&gt;
&lt;LineChart
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
chartSeries={chartSeries}
x={x}
/&gt;
&lt;/Chart&gt;
&lt;LineChart
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
chartSeries={chartSeries}
x={x}
/&gt;
, document.getElementById('line-user')
)
)
</code></pre>
<h3 id="full-code-in-your-javascript">Full code in your javascript</h3>
<pre><code class="lang-js">"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() {
Expand Down Expand Up @@ -367,25 +364,16 @@ <h3 id="full-code-in-your-javascript">Full code in your javascript</h3>
}

ReactDOM.render(
&lt;Chart
&lt;LineChart
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
margins= {margins}
&gt;
&lt;LineChart
showXGrid= {false}
showYGrid= {false}
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
chartSeries={chartSeries}
x={x}
/&gt;
&lt;/Chart&gt;
, document.getElementById('line-user')
chartSeries={chartSeries}
x={x}
/&gt;
, document.getElementById('line-user')
)
})()
</code></pre>
Expand Down
63 changes: 27 additions & 36 deletions intro/get_start/write_chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@ 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;
```

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
Expand Down Expand Up @@ -62,24 +70,17 @@ Render it in React!

```js
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
Expand All @@ -89,7 +90,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() {
Expand Down Expand Up @@ -117,25 +117,16 @@ var LineChart = require('react-d3-basic').LineChart;
}

ReactDOM.render(
<Chart
<LineChart
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
margins= {margins}
>
<LineChart
showXGrid= {false}
showYGrid= {false}
margins= {margins}
title={title}
data={chartData}
width={width}
height={height}
chartSeries={chartSeries}
x={x}
/>
</Chart>
, document.getElementById('line-user')
chartSeries={chartSeries}
x={x}
/>
, document.getElementById('line-user')
)
})()
```
14 changes: 10 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}