performr-runner-result-graph

v7.0.2

Published

2 years ago

Display the event breakdown of a performr-runner script run as a pretty graph. Using React & Redux & Less

Downloads

0High
0Medium
0Low

joris-van-der-wel

performr-runner-result-graph

Display the event breakdown of a performr-runner script run as a pretty graph. Using React & Redux & SCSS

Usage

npm i --save performr-runner-result-graph react

As an isolated SubApp

If you are integrating this React App in your own React App, you can simply import this module within your parent component. This container uses redux, however the store is isolated by default (see http://redux.js.org/docs/recipes/IsolatingSubapps.html):

import React, {Component} from 'react';
import PerformrRunnerResultGraph, {parseResultObject} from 'performr-runner-result-graph';
import SubApp from './subapp';
import sampleResult from './sample-result.json';

// Converts your plain-old-javascript-object to an Immutable.js Map and also adds extra lookup tables
const parsedSampleResult = parseResultObject(sampleResult);

class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp />
        <PerformrRunnerResultGraph resultObject={parsedSampleResult}/>
        <SubApp />
      </div>
    )
  }
}

As a SubApp with a shared redux store

Your store can be shared with this component by setting the store prop. All of the state for this component will be stored under the PerformrRunnerResultGraph key in the global state. Rendering multiple instances of this component is supported by setting the instanceKey prop:

import React, {Component} from 'react';
import PerformrRunnerResultGraph, {parseResultObject} from 'performr-runner-result-graph';
import SubApp from './subapp';
import sampleResult from './sample-result.json';
const parsedSampleResult = parseResultObject(sampleResult);

class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp/>
        <PerformrRunnerResultGraph
            instanceKey="foo"
            resultObject={parsedSampleResult}
            store={this.props.store}
        />
        <SubApp/>
      </div>
    )
  }
}

You will also have to integrate the reducer for this component:

import {combineReducers} from 'redux';
import {createRootReducer as createGraphReducer, stateKey as graphStateKey} from 'performr-runner-result-graph';

import someOtherReducer from './someOtherReducer';

const mainReducer = combineReducers({
    [graphStateKey]: createGraphReducer(['foo']),
    someOtherReducer,
});

Standalone

This package contains a webpack UMD bundle which contains everything that you need except react. Here is an example:

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/performr-runner-result-graph/dist/bundle.js"></script>
  <link rel="stylesheet" type="text/css" href="node_modules/performr-runner-result-graph/dist/bundle.css">
  <style>
    #upload {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    #demo-container > .PerformrRunnerResultGraph {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
        bottom: 0;
    }
  </style>
</head>
<body>
<input id="upload" type="file"/>
<div id="demo-container"></div>
<script>
  const render = resultObject => {
    const {parseResultObject, default: PerformrRunnerResultGraphComponent} = PerformrRunnerResultGraph;

    window.myResultObject = parseResultObject(resultObject.result);
    const instanceKey = 'foo';

    window.myResultGraph = React.createElement(PerformrRunnerResultGraphComponent, {
      resultObject: window.myResultObject,
      instanceKey,
    });

    const container = document.querySelector('#demo-container');
    ReactDOM.unmountComponentAtNode(container);
    ReactDOM.render(
      window.myResultGraph,
      container
    );
  };

  document.querySelector('#upload').addEventListener('change', e => {
    const {files} = e.target;

    if (!files.length) {
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      try {
        ReactDOM.unmountComponentAtNode(document.querySelector('#demo-container'));
        const resultObject = JSON.parse(reader.result);
        render(resultObject);
      }
      catch (err) {
        console.error('Parsing failed', err);
      }
    };
    reader.readAsText(files[0]);
  });
</script>
</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

performr-runner-result-graph

Usage

As an isolated SubApp

As a SubApp with a shared redux store

Standalone