Skip to content

Commit b5def1b

Browse files
andreaferrettiandreaferretti
committed
Moved to single page
1 parent da92ff8 commit b5def1b

File tree

3 files changed

+103
-80
lines changed

3 files changed

+103
-80
lines changed

‎css/main.css‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,20 @@
22
cursor: pointer;
33
}
44

5-
.panel {
6-
height: 600px;
5+
.center-wrap {
6+
text-align: center;
77
}
88

9-
.panel-title {
10-
display: inline;
9+
.center {
10+
display: inline-block;
1111
}
1212

13-
.links {
14-
float: right;
15-
}
16-
17-
.links a {
18-
cursor: pointer;
19-
margin-left: 10px;
20-
}
21-
22-
.modal {
23-
display: block;
13+
.selector {
14+
margin-bottom: 50px;
2415
}
2516

26-
.modal-dialog {
27-
width: 800px;
17+
.chart-panel {
18+
margin-top: 50px;
2819
}
2920

3021
/*Logo*/

‎js/components/composite.jsx‎

Lines changed: 65 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
var React = require('react');
22
var Row = require('react-bootstrap/Row');
3+
var Button = require('react-bootstrap/Button');
4+
var ButtonGroup = require('react-bootstrap/ButtonGroup');
35
var Panel = require('./panel.jsx');
46
var Logo = require('./logo.jsx');
57
var Pie = require('./pie.jsx');
@@ -13,52 +15,78 @@ var Stack = require('./stack.jsx');
1315
var Voronoi = require('./voronoi.jsx');
1416

1517
module.exports = React.createClass({
18+
getInitialState: function() {
19+
return {
20+
select: 0
21+
};
22+
},
23+
24+
select: function(i) {
25+
this.setState({select: i});
26+
},
27+
28+
components: [
29+
<Panel title="Pie Chart" key="pie" text="Here is a pie chart example. Sectors are clickable" sources={ ['components/pie', 'charts/pie'] }>
30+
<Pie />
31+
</Panel>,
32+
<Panel title="Path animation"
33+
key="path-animation"
34+
text={ <span>Integrate with <a href="http://maxwellito.github.io/vivus/" target="_blank">Vivus</a> to animate paths</span> }
35+
sources={ ['components/drawing'] }>
36+
<Drawing />
37+
</Panel>,
38+
<Panel key="line" title="Line Chart" text="Here is a zoomable timeline" sources={ ['components/timeline', 'charts/timeline'] }>
39+
<Timeline />
40+
</Panel>,
41+
<Panel
42+
key="zoomable"
43+
title="Zoomable timeline" text="Use the minimap to zoom the timeline"
44+
sources={ ['components/timeline2', 'charts/zoomable', 'charts/zoomedmap', 'charts/minimap'] }>
45+
<Timeline2 />
46+
</Panel>,
47+
<Panel key="speed-dial" title="Speed dial" text="We use a pie chart to track the mouse speed" sources={ ['components/dial'] }>
48+
<Dial />
49+
</Panel>,
50+
<Panel key="tree" title="Tree" text="Here is a Tree Graph" sources={ ['components/tree'] }>
51+
<Tree />
52+
</Panel>,
53+
<Panel key="bar" title="Bar" text="Point over the bars to animate" sources={ ['components/bar'] }>
54+
<Bar data={[[1, 2, 3, 4], [3, 4, 5, 6], [4, 2, 3, 2]]}/>
55+
</Panel>,
56+
<Panel key="stack" title="Stack" text="Point over the bars to animate" sources={ ['components/stack'] }>
57+
<Stack data={[[1, 2, 3, 4], [3, 4, 5, 6], [4, 2, 3, 2]]} />
58+
</Panel>,
59+
<Panel key="voronoi" title="Voronoi" text="Move the mouse over the diagram to add a point"
60+
sources={ ['components/voronoi', 'charts/voronoi'] }>
61+
<Voronoi />
62+
</Panel>
63+
],
64+
1665
render: function() {
66+
var n = this.state.select % this.components.length;
67+
var self = this;
68+
var selectors = this.components.map(function(c, i) {
69+
var active = i == self.state.select;
70+
var bsStyle = active ? "primary" : "default";
71+
return <Button
72+
key={ i }
73+
onClick={ self.select.bind(self, i) }
74+
active={ active }
75+
bsStyle={ bsStyle }>{ c.props.title }</Button>;
76+
});
77+
1778
return (
1879
<div className="container">
1980
<Row>
2081
<Logo />
2182
</Row>
2283
<Row>
23-
<Panel title="Pie Chart" text="Here is a pie chart example. Sectors are clickable" sources={ ['components/pie', 'charts/pie'] }>
24-
<Pie />
25-
</Panel>
26-
<Panel title="Path animation"
27-
text={ <span>Integrate with <a href="http://maxwellito.github.io/vivus/" target="_blank">Vivus</a> to animate paths</span> }
28-
sources={ ['components/drawing'] }>
29-
<Drawing />
30-
</Panel>
31-
</Row>
32-
<Row>
33-
<Panel title="Line Chart" text="Here is a zoomable timeline" sources={ ['components/timeline', 'charts/timeline'] }>
34-
<Timeline />
35-
</Panel>
36-
<Panel title="Zoomable timeline" text="Use the minimap to zoom the timeline"
37-
sources={ ['components/timeline2', 'charts/zoomable', 'charts/zoomedmap', 'charts/minimap'] }>
38-
<Timeline2 />
39-
</Panel>
40-
</Row>
41-
<Row>
42-
<Panel title="Speed dial" text="We use a pie chart to track the mouse speed" sources={ ['components/dial'] }>
43-
<Dial />
44-
</Panel>
45-
<Panel title="Tree" text="Here is a Tree Graph" sources={ ['components/tree'] }>
46-
<Tree />
47-
</Panel>
48-
</Row>
49-
<Row>
50-
<Panel title="Bar" text="Point over the bars to animate" sources={ ['components/bar'] }>
51-
<Bar data={[[1, 2, 3, 4], [3, 4, 5, 6], [4, 2, 3, 2]]}/>
52-
</Panel>
53-
<Panel title="Stack" text="Point over the bars to animate" sources={ ['components/stack'] }>
54-
<Stack data={[[1, 2, 3, 4], [3, 4, 5, 6], [4, 2, 3, 2]]} />
55-
</Panel>
84+
<div className="center-wrap">
85+
<ButtonGroup className="center">{ selectors }</ButtonGroup>
86+
</div>
5687
</Row>
5788
<Row>
58-
<Panel title="Voronoi" text="Move the mouse over the diagram to add a point"
59-
sources={ ['components/voronoi', 'charts/voronoi'] }>
60-
<Voronoi />
61-
</Panel>
89+
{ this.components[n] }
6290
</Row>
6391
</div>
6492
)}

‎js/components/panel.jsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
11
var React = require('react');
22
var Col = require('react-bootstrap/Col');
3-
var Modal = require('react-bootstrap/Modal');
43
var hljs = require('highlight.js');
54
var github = require('../github.jsx');
65

76
module.exports = React.createClass({
87
getInitialState: function() {
98
return {
10-
modal: false,
11-
content: '',
12-
title: ''
9+
sources: []
1310
};
1411
},
15-
show: function(s) {
12+
loadSource: function(s) {
1613
var self = this;
17-
return function() {
18-
github(s).then(function(content) {
19-
var body = hljs.highlight('javascript', content).value;
20-
self.setState({ modal: true, content: body, title: s });
14+
github(s).then(function(content) {
15+
var body = hljs.highlight('javascript', content).value;
16+
var sources = self.state.sources;
17+
sources.push({
18+
body: body,
19+
title: s
2120
});
22-
}
21+
self.setState({ sources: sources });
22+
});
23+
},
24+
loadSources: function(sources) {
25+
sources.forEach(this.loadSource);
2326
},
24-
hide: function() {
25-
this.setState({ modal: false });
27+
componentWillMount: function() {
28+
this.loadSources(this.props.sources);
2629
},
27-
modal: function() {
28-
return <Modal title={ this.state.title } onRequestHide={ this.hide }>
29-
<pre dangerouslySetInnerHTML={{__html: this.state.content}} />
30-
</Modal>
30+
componentWillReceiveProps: function(props) {
31+
this.loadSources(props.sources);
3132
},
3233
render: function() {
33-
var modal = this.state.modal ? this.modal() : null;
34-
var single = this.props.sources.length <= 1;
35-
var self = this;
36-
var links = this.props.sources.map(function (s, i) {
37-
var text = single ? 'Source': 'Source ' + (i + 1);
34+
var sources = this.state.sources.map(function (s) {
35+
return(
36+
<div className="panel panel-default">
37+
<div className="panel-heading">
38+
<h2 className="panel-title">{ s.title }.jsx</h2>
39+
</div>
3840

39-
return <a onClick={ self.show(s) }>{ text }</a>
41+
<div className="panel-body">
42+
<pre dangerouslySetInnerHTML={{__html: s.body }} />
43+
</div>
44+
</div>
45+
);
4046
});
4147

4248
return (
43-
<Col md={6}>
44-
{ modal }
49+
<Col md={12} className="chart-panel">
4550
<div className="panel panel-default">
4651
<div className="panel-heading">
4752
<h2 className="panel-title">{ this.props.title }</h2>
48-
49-
<span className="links">{ links }</span>
5053
</div>
5154

5255
<div className="panel-body">
@@ -55,6 +58,7 @@ module.exports = React.createClass({
5558
{ this.props.children }
5659
</div>
5760
</div>
61+
{ sources }
5862
</Col>
5963
)}
6064
});

0 commit comments

Comments
 (0)