Adding a new visualization

The project is based around pages, where each page can be seen as a "screen". Each page can contain a number of components. The components are done with react and should handle loading and unloading from the DOM.

All styling is done with css and components sizes and positions can be set per page to allow a flexible way to combine and reuse the different components.

Creating your new component.

Create a new file in src/components. The visualization should be a class that extends Component from React. When the component is mounted into the DOM a render function will be called. This function is expected to return JSX specifying the DOM elements that the component should contain.

// src/components/my-component.js

import React, {Component} from "react";

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}!</h1>
      </div>
    );
  }
}

For more info on React components see https://facebook.github.io/react/docs/getting-started.html.

Connecting to the data

To connect your component to the data store create a new page in src/pages. We use react-redux to make the connection between data and the components as easy as possible.

Here we send data from appState.myData.data to the component and its callabale at this.props.data inside the component.

// src/page/my-component-page.js

import React from "react";
import {connect} from "react-redux";
import MyComponent from "../components/my-component";

const MyComponentPage = ({data}) => <MyComponent data={data} />;

const mapStateToProps = appState => {
 return {
   data: appState.myData
 };
};

export default connect(mapStateToProps)(MyComponentPage);

Creating a route

Next step is to connect your component to a route. We use react-router. Import your component and add an entry under the Route element.

<Route path="mycomponent" component={MyComponentPage} />

Will create a route at http://url-to-app/#/mycomponent

The wrapper component is used to facilitate routing. Beneath is a complete example with a specified index and a custom route.

// /src/routes.js

import React from "react";
import {Route, IndexRoute} from "react-router";

import Wrapper from "./components/wrapper";
import MyComponentPage from "./pages/my-component-page";

export default (
  <Route path="/" component={Wrapper}>
    <IndexRoute component={MyComponentPage} />
    <Route path="mycomponent" component={MyComponentPage} />
  </Route>
);

Adding a new visualization - Visualisering/Visualisering GitHub Wiki