Skip to content

Commit

Permalink
overhaul rv examples, added final example
Browse files Browse the repository at this point in the history
  • Loading branch information
Jerome Cukier committed Aug 19, 2017
1 parent 1b36ce5 commit 0b198f8
Show file tree
Hide file tree
Showing 36 changed files with 861 additions and 711 deletions.
51 changes: 21 additions & 30 deletions demos/add-charts/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,40 +93,46 @@ export default class App extends Component {
const distance = curr.trip_distance;
const amount = curr.total_amount;

const pickupHour = Number(pickupTime.slice(11, 13));
const dropoffHour = Number(dropoffTime.slice(11, 13));

if (!isNaN(Number(curr.pickup_longitude)) && !isNaN(Number(curr.pickup_latitude))) {
accu.points.push({
position: [Number(curr.pickup_longitude), Number(curr.pickup_latitude)],
hour: pickupHour,
pickup: true
});
}

if (!isNaN(Number(curr.dropoff_longitude)) && !isNaN(Number(curr.dropoff_latitude))) {
accu.points.push({
position: [Number(curr.dropoff_longitude), Number(curr.dropoff_latitude)],
hour: dropoffHour,
pickup: false
});
}

const pickupHour = pickupTime.slice(11, 13);
const dropoffHour = dropoffTime.slice(11, 13);


const prevPickups = accu.pickupObj[pickupHour] || 0;
const prevDropoffs = accu.dropoffObj[dropoffHour] || 0;

accu.pickupObj[pickupHour] = prevPickups + 1;
accu.dropoffObj[dropoffHour] = prevDropoffs + 1;
accu.scatterplot.push({x: distance, y: amount});

return accu;
}, {
points: [],
pickupObj: {},
dropoffObj: {},
scatterplot: []
dropoffObj: {}
});

data.pickups = Object.entries(data.pickupObj).map(d => ({x: Number(d[0]) + 0.5, y: d[1]}));
data.dropoffs = Object.entries(data.dropoffObj).map(d => ({x: Number(d[0]) + 0.5, y: d[1]}));
data.pickups = Object.entries(data.pickupObj).map(d => {
const hour = Number(d[0]);
return {hour, x: hour + 0.5, y: d[1]};
});
data.dropoffs = Object.entries(data.dropoffObj).map(d => {
const hour = Number(d[0]);
return {hour, x: hour + 0.5, y: d[1]};
});
data.status = 'READY';

this.setState(data);
Expand Down Expand Up @@ -154,26 +160,14 @@ export default class App extends Component {
});
}

_renderTooltip() {
const {x, y, hoveredObject} = this.state;

if (!hoveredObject) {
return null;
}

return (
<div style={{...tooltipStyle, left: x, top: y}}>
<div>{hoveredObject.id}</div>
</div>
);
}

render() {
const {viewport, dropoffs, pickups, points, settings, status} = this.state;

const {viewport, hoveredObject, points, settings, status, x, y} = this.state;
return (
<div>
{this._renderTooltip()}
{hoveredObject &&
<div style={{...tooltipStyle, left: x, top: y}}>
<div>{hoveredObject.id}</div>
</div>}
<LayerControls
settings={settings}
propTypes={LAYER_CONTROLS}
Expand All @@ -189,10 +183,7 @@ export default class App extends Component {
onHover={this._onHover.bind(this)}
settings={settings}/>
</MapGL>
<Charts
dropoffs={dropoffs}
pickups={pickups}
/>
<Charts {...this.state} />
<Spinner status={status} />
</div>
);
Expand Down
59 changes: 51 additions & 8 deletions demos/add-charts/charts.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import React from 'react';
import {charts} from './style';

import {XYPlot, VerticalBarSeries, XAxis, YAxis
import {
VerticalBarSeries,
XAxis,
XYPlot,
YAxis
} from 'react-vis';

export default function Charts({pickups}) {
if (!pickups) {
return (<div style={charts}/>);
Expand All @@ -11,22 +16,60 @@ export default function Charts({pickups}) {
<h2>Pickups by hour</h2>
<p>As percentage of all trips</p>
<XYPlot
margin={{left: 40, right: 20, top: 10, bottom: 20}}
margin={{left: 40, right: 25, top: 10, bottom: 25}}
height={140}
width={280}
xDomain={[0, 24]}
width={480}
yDomain={[0, 1000]}
>
<YAxis
tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<VerticalBarSeries
color='#0080FF'
color="#125C77"
data={pickups}
/>
<XAxis
tickFormat={(h) => (h % 24) >= 12 ?
(h % 12 || 12) + 'PM' :
(h % 12 || 12) + 'AM'
}
tickSizeInner={0}
tickValues={[0, 6, 12, 18, 24]}
/>
</XYPlot>
</div>);
}

/* inital setup
import React from 'react';
import {charts} from './style';
import {
VerticalBarSeries,
XAxis,
XYPlot,
YAxis
} from 'react-vis';
export default function Charts({pickups}) {
if (!pickups) {
return (<div style={charts}/>);
}
return (<div style={charts}>
<h2>Pickups by hour</h2>
<p>As percentage of all trips</p>
<XYPlot
height={140}
width={480}
>
<XAxis />
<YAxis />
<VerticalBarSeries
data={pickups}
/>
<XAxis
tickPadding={2} tickValues={[0, 6, 12, 18, 24]}
tickFormat={(d) => (d % 24) >= 12 ? (d % 12 || 12) + 'PM' : (d % 12 || 12) + 'AM'}/>
</XYPlot>
</div>);
}
*/
4 changes: 2 additions & 2 deletions demos/add-charts/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ export const layerControl = {
};

export const charts = {
background: '#fff',
background: 'white',
borderRadius: 3,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
height: 210,
padding: '10px',
position: 'absolute',
left: 20,
top: 20,
width: 300,
width: 500,
zIndex: 100
};

Expand Down
118 changes: 35 additions & 83 deletions demos/charts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,8 @@ import autobind from 'autobind-decorator';
import {
XYPlot,
VerticalBarSeries,
AreaSeries,
Crosshair,
DiscreteColorLegend,
Hint,
LineSeries,
MarkSeries,
LineMarkSeries,
VerticalGridLines,
YAxis,
XAxis
} from 'react-vis';
Expand Down Expand Up @@ -45,15 +39,16 @@ const data = [

const basicStyle = {
boxShadow: "0 1px 3px 0 rgba(0,0,0,0.20)",
width: 280
width: 480,
margin: '10px 0 10px 3px'
};
const dropoffs = data.map(d => ({x: d.hour + 0.5, y: d.dropoffs}));
const pickups = data.map(d => ({x: d.hour + 0.5, y: d.pickups}));
const dropoffs = data.map(d => ({hour: d.hour, x: d.hour + 0.5, y: d.dropoffs}));
const pickups = data.map(d => ({hour: d.hour, x: d.hour + 0.5, y: d.pickups}));

export function BarChartBasic() {
return (<div className="bar-chart-basic"
style={basicStyle}>
<XYPlot height={140} width={280}>
<XYPlot height={140} width={480}>
<XAxis />
<YAxis />
<VerticalBarSeries data={pickups} />
Expand Down Expand Up @@ -108,6 +103,7 @@ export function BarChartYDomain() {
<YAxis tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<VerticalBarSeries data={pickups} />
<XAxis/>
</XYPlot></div>);
}

Expand All @@ -125,16 +121,15 @@ export function BarChartCustomColor() {
<YAxis tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<VerticalBarSeries
color='#0080FF'
color="#125C77"
data={pickups} />
</XYPlot></div>);
}

export function LineChartsBasic() {
export function BasicLineChart() {
return (<div className="line-chart-basic"
style={basicStyle}>
<XYPlot height={140} width={280}
xDomain={[0, 24]}
<XYPlot height={140} width={480}
yDomain={[0, 1000]}
margin={{left: 40, right: 20, top: 10, bottom: 30}}>
<XAxis
Expand All @@ -143,85 +138,42 @@ export function LineChartsBasic() {
/>
<YAxis tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<LineSeries data={pickups} color='#0080FF'/>
<LineSeries data={dropoffs} color='#FF0080'/>
<LineSeries data={pickups} color="#08F" />
<MarkSeries data={dropoffs} color="#F08" opacity="0.5" size="3"/>
</XYPlot>
</div>);
}

export function LineChartsInteraction() {
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {hour: null};
}

render() {
const {hour} = this.state;

return (<XYPlot
margin={{left: 40, right: 20, top: 10, bottom: 30}}
height={140}
onMouseLeave={()=> {this.setState({hour: null});}}
width={280}
xDomain={[0, 24]}
yDomain={[0, 1000]}
>
<XAxis
tickValues={[0, 6, 12, 18, 24]}
tickFormat={(d) => (d % 24) >= 12 ? (d % 12 || 12) + 'PM' : (d % 12 || 12) + 'AM'}
/>
<YAxis tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<LineSeries onNearestX={(d) => this.setState({hour: d.x})} data={pickups} color='#08F'/>
<LineSeries data={dropoffs} color='#F08'/>
{hour ? <LineSeries data={[
{x: hour, y: 0},
{x: hour, y: 1000}]} color="#888" opacity="0.8" strokeWidth="1" /> : null}
</XYPlot>);
}
export class HoverInteraction extends Component {
constructor() {
super();
this.state = {highlightedHour: null};
}

return (<div className="line-chart-interaction" style={basicStyle}>
<LineChart />
</div>);
}

export function LineChartsDynamicMark() {
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {hour: null};
}

render() {
const {hour} = this.state;
const marks = hour === null ? [] :
[pickups, dropoffs].map((d, i) => ({
...d.find(e => e.x === hour),
color: i ? '#F08' : '#08F'}))
return (<XYPlot
margin={{left: 40, right: 20, top: 10, bottom: 30}}
height={140}
onMouseLeave={()=> {this.setState({hour: null});}}
width={280}
xDomain={[0, 24]}
render() {
const {highlightedHour} = this.state;
const data = pickups.map(d => ({
...d,
color: d.hour === highlightedHour ? '#17B8BE' : '#125C77'
}));

return (<div style={basicStyle}>
<XYPlot height={140} width={480}
yDomain={[0, 1000]}
>
margin={{left: 40, right: 20, top: 10, bottom: 30}}>
<YAxis
tickFormat={(d) => (d / 100).toFixed(0) + '%'}
/>
<XAxis
tickValues={[0, 6, 12, 18, 24]}
tickFormat={(d) => (d % 24) >= 12 ? (d % 12 || 12) + 'PM' : (d % 12 || 12) + 'AM'}
/>
<YAxis tickFormat={(d) => (d / 100).toFixed(0) + '%'}
<VerticalBarSeries
colorType="literal"
data={data}
onValueMouseOver={(d) => this.setState({highlightedHour: d.hour})}
/>
<LineSeries onNearestX={(d) => {this.setState({hour: d.x})}} data={pickups} color='#08F'/>
<LineSeries data={dropoffs} color='#F08'/>
<MarkSeries data={marks} colorType='literal' size='3'/>
</XYPlot>);
}
</XYPlot>
</div>);
}
}

return (<div className="line-chart-dynamic-mark" style={basicStyle}>
<LineChart />
</div>);
}
0 demos/line-charts/README.md → demos/introducing-interaction/README.md
View file
File renamed without changes.
Loading

0 comments on commit 0b198f8

Please sign in to comment.