Skip to content

Commit

Permalink
Merge a3167ce into b8d9df6
Browse files Browse the repository at this point in the history
  • Loading branch information
@tgorkin
tgorkin committed Jan 28, 2020
2 parents b8d9df6 + a3167ce commit 8f8786b
Show file tree
Hide file tree
Showing 52 changed files with 2,594 additions and 338 deletions.
2 changes: 1 addition & 1 deletion examples/website/arc/app.js
View file
Expand Up @@ -84,7 +84,7 @@ export default class App extends Component {
}

_recalculateArcs(data, selectedCounty = this.state.selectedCounty) {
if (!data) {
if (!data || !data.length) {
return;
}
if (!selectedCounty) {
Expand Down
2 changes: 1 addition & 1 deletion examples/website/brushing/app.js
View file
Expand Up @@ -70,7 +70,7 @@ export default class App extends Component {
}

_getLayerData({data}) {
if (!data) {
if (!data || !data.length) {
return null;
}
const arcs = [];
Expand Down
22 changes: 0 additions & 22 deletions examples/website/data-filter/app.js
View file
@@ -1,19 +1,13 @@
import React, {Component, Fragment} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
import {DataFilterExtension} from '@deck.gl/extensions';

import RangeInput from './range-input';

// Set your mapbox token here
const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

// Source data GeoJSON
const DATA_URL =
'https://raw.githubusercontent.com/uber-web/kepler.gl-data/master/earthquakes/data.csv'; // eslint-disable-line

const INITIAL_VIEW_STATE = {
latitude: 36.5,
longitude: -120,
Expand Down Expand Up @@ -169,19 +163,3 @@ export default class App extends Component {
);
}
}

export function renderToDOM(container) {
render(<App />, container);
require('d3-request').csv(DATA_URL, (error, response) => {
if (!error) {
const data = response.map(row => ({
timestamp: new Date(`${row.DateTime} UTC`).getTime(),
latitude: Number(row.Latitude),
longitude: Number(row.Longitude),
depth: Number(row.Depth),
magnitude: Number(row.Magnitude)
}));
render(<App data={data} />, container);
}
});
}
72 changes: 36 additions & 36 deletions examples/website/data-filter/range-input.js
View file
@@ -1,35 +1,37 @@
/* global requestAnimationFrame, cancelAnimationFrame */
import React, {PureComponent} from 'react';
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {styled} from 'baseui';
import {Slider} from 'baseui/slider';
import {Button, SHAPE, SIZE} from 'baseui/button';
import Start from 'baseui/icon/chevron-right';
import Stop from 'baseui/icon/delete';

const engine = new Styletron();

const Container = styled('div', {
const PositionContainer = styled('div', ({$theme}) => ({
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
bottom: '20px',
bottom: '40px',
width: '100%'
});
}));

const CenterContainer = styled('div', ({$theme}) => ({
marginLeft: 'auto',
marginRight: 'auto',
width: '40%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}));

const ThumbValue = styled('div', {
const ThumbValue = styled('div', ({$theme}) => ({
position: 'absolute',
top: '-2em'
});
}));

const TickBar = styled('div', {
const TickBar = styled('div', ({$theme}) => ({
width: '480px',
height: '24px',
maxWidth: '80vw'
});
}));

export default class RangeInput extends PureComponent {
constructor(props) {
Expand Down Expand Up @@ -82,27 +84,25 @@ export default class RangeInput extends PureComponent {
const isButtonEnabled = value[0] > min || value[1] < max;

return (
<StyletronProvider value={engine}>
<BaseProvider theme={LightTheme}>
<Container>
<Button
shape={SHAPE.round}
size={SIZE.compact}
disabled={!isButtonEnabled}
onClick={this._toggle}
>
{this.state.isPlaying ? <Stop title="Stop" /> : <Start title="Animate" />}
</Button>
<Slider
{...this.props}
overrides={{
ThumbValue: this._renderThumbValue,
TickBar: () => <TickBar />
}}
/>
</Container>
</BaseProvider>
</StyletronProvider>
<PositionContainer>
<CenterContainer>
<Button
shape={SHAPE.round}
size={SIZE.compact}
disabled={!isButtonEnabled}
onClick={this._toggle}
>
{this.state.isPlaying ? <Stop title="Stop" /> : <Start title="Animate" />}
</Button>
<Slider
{...this.props}
overrides={{
ThumbValue: this._renderThumbValue,
TickBar: () => <TickBar />
}}
/>
</CenterContainer>
</PositionContainer>
);
}
}
38 changes: 38 additions & 0 deletions examples/website/data-filter/root.js
View file
@@ -0,0 +1,38 @@
import React from 'react';
import {render} from 'react-dom';
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider} from 'baseui';
import App from './app';

const engine = new Styletron();

// Source data GeoJSON
const DATA_URL =
'https://raw.githubusercontent.com/uber-web/kepler.gl-data/master/earthquakes/data.csv'; // eslint-disable-line

function Root({data}) {
return (
<StyletronProvider value={engine}>
<BaseProvider theme={LightTheme}>
<App data={data} />
</BaseProvider>
</StyletronProvider>
);
}

export function renderToDOM(container) {
render(<Root />, container);
require('d3-request').csv(DATA_URL, (error, response) => {
if (!error) {
const data = response.map(row => ({
timestamp: new Date(`${row.DateTime} UTC`).getTime(),
latitude: Number(row.Latitude),
longitude: Number(row.Longitude),
depth: Number(row.Depth),
magnitude: Number(row.Magnitude)
}));
render(<Root data={data} />, container);
}
});
}
2 changes: 1 addition & 1 deletion examples/website/data-filter/webpack.config.js
View file
Expand Up @@ -7,7 +7,7 @@ const CONFIG = {
mode: 'development',

entry: {
app: './app.js'
app: './root.js'
},

output: {
Expand Down
2 changes: 1 addition & 1 deletion examples/website/plot/app.js
View file
Expand Up @@ -13,7 +13,7 @@ const INITIAL_VIEW_STATE = {
rotationX: 30,
rotationOrbit: -30,
/* global window */
zoom: Math.log2(window.innerHeight / 3) // fit 3x3x3 box in current viewport
zoom: typeof window !== `undefined` ? Math.log2(window.innerHeight / 3) : 1 // fit 3x3x3 box in current viewport
};

function getScale({min, max}) {
Expand Down
104 changes: 52 additions & 52 deletions website-gatsby/ocular-config.js
View file
Expand Up @@ -101,111 +101,111 @@ based maps.',

LINK_TO_GET_STARTED: '/docs',

INDEX_PAGE_URL: resolve(__dirname, './templates/index.jsx'),
INDEX_PAGE_URL: resolve(__dirname, './src/index.jsx'),

EXAMPLES: [
{
title: 'LineLayer',
path: 'examples/website/line',
image: 'images/examples/demo-thumb-line.jpg',
componentUrl: resolve(__dirname, './templates/examples/example-line-layer.jsx')
componentUrl: resolve(__dirname, './src/examples/example-line-layer.jsx')
},
{
title: 'HexagonLayer',
path: 'examples/heatmap',
image: 'images/examples/demo-thumb-heatmap.jpg',
componentUrl: resolve(__dirname, '../examples/website/3d-heatmap/app.js')
path: 'examples/website/3d-heatmap',
image: 'images/examples/demo-thumb-hexagon.jpg',
componentUrl: resolve(__dirname, './src/examples/example-hexagon-layer.jsx')
},
{
title: 'IconLayer',
path: 'examples/icon',
path: 'examples/website/icon',
image: 'images/examples/demo-thumb-icon.jpg',
componentUrl: resolve(__dirname, '../examples/website/icon/app.js')
componentUrl: resolve(__dirname, './src/examples/example-icon-layer.jsx')
},
{
title: 'GeoJsonLayer (Polygons)',
path: 'examples/geojson',
path: 'examples/website/geojson',
image: 'images/examples/demo-thumb-geojson.jpg',
componentUrl: resolve(__dirname, '../examples/website/geojson/app.js')
componentUrl: resolve(__dirname, './src/examples/example-geojson-layer.jsx')
},
{
title: 'GeoJsonLayer (Paths)',
path: 'examples/highway',
path: 'examples/website/highway',
image: 'images/examples/demo-thumb-highway.jpg',
componentUrl: resolve(__dirname, '../examples/website/highway/app.js')
componentUrl: resolve(__dirname, './src/examples/example-highway-demo.jsx')
},
{
title: 'ScreenGridLayer',
path: 'examples/screengrid',
path: 'examples/website/screengrid',
image: 'images/examples/demo-thumb-screengrid.jpg',
componentUrl: resolve(__dirname, '../examples/website/screen-grid/app.js')
componentUrl: resolve(__dirname, './src/examples/example-screengrid-layer.jsx')
},
{
title: 'ArcLayer',
path: 'examples/arc',
path: 'examples/website/arc',
image: 'images/examples/demo-thumb-arc.jpg',
componentUrl: resolve(__dirname, '../examples/website/arc/app.js')
componentUrl: resolve(__dirname, './src/examples/example-arc-layer.jsx')
},
{
title: 'ScatterplotLayer',
path: 'examples/scatterplot',
path: 'examples/website/scatterplot',
image: 'images/examples/demo-thumb-scatterplot.jpg',
componentUrl: resolve(__dirname, '../examples/website/scatterplot/app.js')
componentUrl: resolve(__dirname, './src/examples/example-scatterplot-layer.jsx')
},
{
title: 'PointCloudLayer',
path: 'examples/pointcloud',
path: 'examples/website/pointcloud',
image: 'images/examples/demo-thumb-point-cloud.jpg',
componentUrl: resolve(__dirname, '../examples/website/point-cloud/app.js')
componentUrl: resolve(__dirname, './src/examples/example-pointcloud-layer.jsx')
},
{
title: 'TextLayer',
path: 'examples/text',
path: 'examples/website/text-layer',
image: 'images/examples/demo-thumb-text.jpg',
componentUrl: resolve(__dirname, '../examples/website/tagmap/app.js')
componentUrl: resolve(__dirname, './src/examples/example-text-layer.jsx')
},
{
title: 'TileLayer',
path: 'examples/maptile',
path: 'examples/website/map-tile',
image: 'images/examples/demo-thumb-tile.jpg',
componentUrl: resolve(__dirname, '../examples/website/map-tile/app.js')
componentUrl: resolve(__dirname, './src/examples/example-tile-layer.jsx')
},
{
title: 'TripsLayer',
path: 'examples/trips',
path: 'examples/website/trips',
image: 'images/examples/demo-thumb-trip.jpg',
componentUrl: resolve(__dirname, '../examples/website/trips/app.js')
componentUrl: resolve(__dirname, './src/examples/example-trips-layer.jsx')
},
{
title: 'HeatmapLayer',
path: 'examples/website/heatmap',
image: 'images/examples/demo-thumb-heatmap.jpg',
componentUrl: resolve(__dirname, './src/examples/example-heatmap-layer.jsx')
},
{
title: 'Tile3DLayer',
path: 'examples/website/3d-tiles',
image: 'images/examples/demo-thumb-3d-tiles.jpg',
componentUrl: resolve(__dirname, './src/examples/example-tile3d-layer.jsx')
},
{
title: 'Brushing Layer',
path: 'examples/brushing',
title: 'Brushing',
path: 'examples/website/brushing',
image: 'images/examples/demo-thumb-brushing.jpg',
componentUrl: resolve(__dirname, '../examples/website/brushing/app.js')
componentUrl: resolve(__dirname, './src/examples/example-brushing-demo.jsx')
},
{
title: 'Data Filtering',
path: 'examples/website/data-filter',
image: 'images/examples/demo-thumb-data-filter.jpg',
componentUrl: resolve(__dirname, './src/examples/example-data-filter-demo.jsx')
},
{
title: '3D Surface Explorer',
path: 'examples/website/plot',
image: 'images/examples/demo-thumb-plot.jpg',
componentUrl: resolve(__dirname, './src/examples/example-plot-demo.jsx')
}
// {
// title: '3D Surface Explorer',
// path: 'examples/plot',
// image: 'images/examples/demo-thumb-plot.jpg',
// componentUrl: resolve(__dirname, '../examples/website/plot/app.js')
// }
// {
// title: 'Point Clouds & Meshes',
// image: 'images/example-pointcloud.png',
// componentUrl: resolve(__dirname, './examples/pointcloud/app.js')
// path: 'examples/pointcloud'
// },
// {
// title: '3D Tiles',
// image: 'images/example-gltf.jpg',
// componentUrl: resolve(__dirname, './examples/3d-tiles/app.js')
// path: 'examples/3d-tiles'
// },
// {
// title: 'GLTF',
// image: 'images/example-gltf.jpg',
// componentUrl: resolve(__dirname, './templates/example-gltf.jsx')
// path: 'examples/gltf'
// }
],

// Avoids duplicate conflicting inputs when importing from examples folders
Expand Down

0 comments on commit 8f8786b

Please sign in to comment.