README
di2-connection-map
Setup
yarn install
yarn run build
Development
Connection map can be run in standalone mode for development outside of host applications.
In order to have a successful build you first need to have bower
installed globally. Then run bower install
within the repo to generate the bower_components
directory.
Development harness can be found in src/mount.tsx
.
yarn run watch
yarn run dev
Deploy
Connection map is consumed as an npm package via the consuming projects package.json. Connection map must be built and tagged with a version before being pushed to github where it will be available under that version in consuming projects.
Rough deploy step-by-step:
- Make changes to connection map and commit.
yarn run build
and commit built files.- Tag as new version and push tags - easy way is
npm version major|minor|patch
>git push origin <BRANCH> --tags
. - PR in to master.
- In consuming project update version in package.json:
"di2-connection-map": "git+ssh://git@github.com/financial-times/di2-connection-map.git#v0.3.0",
->"di2-connection-map": "git+ssh://git@github.com/financial-times/di2-connection-map.git#v0.4.0",
Structure
Connection map is a react component that wraps an svg
and triggers drawing code using d3.js to create the visualisation.
There are 5 main elements to the code base.
- Wrapping react components
connection-map
class that triggers drawing from sub classes and manages zoom and navigation events- Several small classes for various visual components of the visualisation that manage thier own drawing
- Several React SFC's used to render HTML strings for usage in the svg
mini-map
class for drawing and managing the mini-map navigation aid
Usage
// Pesudocode
import ConnectionMap, { IConnectionCompanyData } from 'di2-connection-map';
const connectionsData: IConnectionCompanyData = /* data from somewhere */
const connectionsId: string = /* entityId of the active company */
ReactDOM.render(
<ConnectionMap
connectionsData={connectionsData}
requestId={connectionsId}
onNavigate={scoutId => /* navigate fn */ }
onNavigateToCompanyPage={scoutId => /* navigate fn */ }
/>,
document.body)