block by shimizu 7b198ba0dd29ccbba60c35a8b2d33160

React & D3 v4 example - Enter,Update,Exit Transition

Full Screen

React と D3 ver.4 組み合わせて使うサンプル。

まだ、試行錯誤中。

Made with blockup-react

forked from blockup

script.js


import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as d3 from "d3";

import { loadAllData } from "./DataHandling";
import BarChart from "./BarChart.js";

class App extends Component {
  constructor() {
    super();

    this.state = {
      data: null,
      body_width: document.body.clientWidth
    };

    window.addEventListener("resize", this.resize().bind(this));
  }

  componentWillMount() {
    this.load();
  }

  resize() {
    let t;

    return event => {
      if (t !== false) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        const state = Object.assign(this.state, {
          body_width: document.body.clientWidth
        });
        this.setState(state);
      }, 100);
    };
  }

  load() {
    loadAllData(this.loaded.bind(this));
  }
  
  loaded(data){
      this.setState({ data: data });    
  }
  
  clickHandler() {
    this.load();
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <BarChart
            className="barChartComponet"
            data={this.state.data}
            width={this.state.body_width}
            height={430}
            xFn={d => d.year}
            yFn={d => d.value}
            margin={{ top: 60, left: 40, bottom: 20, right: 20 }}
            paddingInner={0.1}
            paddingOuter={0.1}
          />
        ) : (
          <p>Not found Data.</p>
        )}
        <div className="button">
          <button onClick={this.clickHandler.bind(this)}>Change Data</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html lang="jp">
<meta charset="utf-8">
<title>React & D3 v4 example - Enter,Update,Exit Transition</title>
<link href='dist.css' rel='stylesheet' />

<body>
  <div id="root">
	<script src='dist.js'></script>
</body>
</html>

BarChart.js

import React, { Component } from "react";
import * as d3 from "d3";
import { XAxis, YAxis, YGrid, Bars } from "./ChartComponents.js";

class BarChart extends Component {
  constructor(props) {
    super();

  }

  updateScale(props) {
    const data = props.data;

    const xScale = d3.scaleBand();
    const yScale = d3.scaleLinear().nice();
    
    
    const xDomain = data.map(props.xFn);
    const yDomain = [0, d3.max(data, d => props.yFn(d))];

    
    
    xScale
      .domain(xDomain)
      .range([0, props.width - (props.margin.left + props.margin.right)])
      .paddingInner(props.paddingInner)
      .paddingOuter(props.paddingOuter);

    yScale
      .domain(yDomain)
      .range([props.height - (props.margin.top + props.margin.bottom), 0]);
      
      return {xScale, yScale};
  }
  
  updatePlotSize(props){
    const plotWidth =
      props.width - (props.margin.left + props.margin.right);
    const plotHeight =
      props.height - (props.margin.top + props.margin.bottom);
      
      return {plotWidth, plotHeight}
    
  }

  
  
  render() {
    const {xScale, yScale} =  this.updateScale(this.props);
    
    const {plotWidth, plotHeight} = this.updatePlotSize(this.props);

    const metaData = {
      xScale: xScale,
      yScale: yScale,
      plotWidth: plotWidth,
      plotHeight: plotHeight
    };
    const plotData = {
      plotData: this.props.data.map((d, i) => {
        return {
          id: i,
          data: d,
          x: xScale(this.props.xFn(d)),
          y: yScale(this.props.yFn(d)),
          width: xScale.bandwidth(),
          height: plotHeight - yScale(this.props.yFn(d))
        };
      })
    };

    return (
      <svg width={this.props.width} height={this.props.height}>
        <g
          transform={`translate(${this.props.margin.left},${this.props.margin.top})`}
        >
          <rect width="17" height="17" fill="blue" y="-27" />
          <text textAnchor="start" dominantBaseline="central" y="-18" x="1.1em">
            Enter
          </text>
        </g>

        <g
          transform={`translate(${this.props.margin.left + 70},${this.props.margin.top})`}
        >
          <rect width="17" height="17" fill="green" y="-27" />
          <text textAnchor="start" dominantBaseline="central" y="-18" x="1.1em">
            Update
          </text>
        </g>

        <g
          transform={`translate(${this.props.margin.left + 160},${this.props
            .margin.top})`}
        >
          <rect width="17" height="17" fill="red" y="-27" />
          <text textAnchor="start" dominantBaseline="central" y="-18" x="1.1em">
            Exit
          </text>
        </g>

        <g
          className="axisLaeyr"
          width={plotWidth}
          height={plotHeight}
          transform={`translate(${this.props.margin.left}, ${this.props.margin.top})`}
        >
          <YGrid {...metaData} />
          <XAxis {...metaData} transform={`translate(0,${plotHeight})`} />
          <YAxis {...metaData} />
        </g>
        <g
          className="plotLayer"
          width={plotWidth}
          height={plotHeight}
          transform={`translate(${this.props.margin.left}, ${this.props.margin.top})`}
        >
          <Bars {...metaData} {...plotData} />
        </g>
      </svg>
    );
  }
}

export default BarChart;

ChartComponents.js

// todo:後で分割する。

import * as d3 from "d3";
import React, { Component } from "react";

export default function D3blackbox(d3render) {
  return class Blackbox extends Component {
    componentDidMount() {
      d3render.call(this);
    }
    componentDidUpdate() {
      d3render.call(this);
    }

    render() {
      const transform = this.props.transform || "";
      return <g transform={transform} ref="anchor" />;
    }
  };
}


export const XAxis = D3blackbox(function() {
  const axis = d3
    .axisBottom()
    .tickFormat(d => d)
    .scale(this.props.xScale);

  d3
    .select(this.refs.anchor)
    .classed("xAxis", true)
    .transition()
    .call(axis);
});

export const YAxis = D3blackbox(function() {
  const axis = d3
    .axisLeft()
    .tickFormat(d => d)
    .scale(this.props.yScale);

  d3
    .select(this.refs.anchor)
    .classed("yAxis", true)
    .transition()
    .call(axis);
});

export const YGrid = D3blackbox(function() {
  const axis = d3
    .axisRight()
    .tickFormat(d => null)
    .scale(this.props.yScale)
    .tickSizeOuter(0)
    .tickSizeInner(this.props.plotWidth);

  d3
    .select(this.refs.anchor)
    .classed("yGrid", true)
    .call(axis);
});

export const Bars = D3blackbox(function() {
  const parent = d3.select(this.refs.anchor).datum(this.props.plotData);

  const current = parent.selectAll(".bar").data(d => d);
  
  current.interrupt() //.selectAll("*");
  
  current.transition().attr("fill", "green");

  const enter = current.enter().append("g").classed("bar", true);
  enter.attr("fill", "blue");

  enter
    .append("rect")
    .attr("height", 0)
    .attr("transform", d => `translate(${d.x}, ${this.props.plotHeight})`);

  const exit = current.exit().classed("bar", false);
  exit
    .attr("fill", "red")
    .attr("opacity", 1)
    .transition()
    .attr("opacity", 0)
    .remove();

  const rect = current
    .merge(enter)
    .select("rect")
    .attr("width", d => d.width)
    .transition()
    .duration(1000)
    .attr("transform", d => `translate(${d.x}, ${d.y})`)
    .attr("height", d => d.height);
});

DataHandling.js

import * as d3 from "d3";

const cast = d => {
  Object.keys(d).forEach(function(key) {
    if (!isNaN(+d[key])) d[key] = +d[key];
  });

  return d;
};

const preformat = d => {
  return {
    id: d.id,
    year: d["年"],
    value: d["値"]
  };
};

/*
export const loadAllData = (callback = () => {} ) => {
    const q = d3.queue()
    
    q.defer(d3.tsv, './data.tsv', cast)
     
     q.await((error, data)  =>{
        callback(data.map(preformat));
    })   
}
*/

//デモ用ランダムデータ生成ffunction

export const loadAllData = (callback = () => {}) => {
  var rnd = n => ~~(Math.random() * n);
  var fakeData = d3.range(1995, 1999 + rnd(10)).map((d, i) => {
    return { 年: d, 値: rnd(1000) + 1 };
  });
  callback(fakeData.map(preformat));
};

data.tsv

年	値
1990	40
1991	80
1992	90
1993	82
1994	72
1995	20
1996	70
1997	94
1998	103
1999	110
2000	112

dist.css

body,html{width:100%;heigth:100%;padding:0x;margin:0}.axisLaeyr .xAxis .domain,.axisLaeyr .xAxis .tick>line{display:none}.axisLaeyr .yAxis .domain,.axisLaeyr .yAxis .tick>line{display:none}.axisLaeyr .yGrid .domain{display:none}.axisLaeyr .yGrid .tick>line{stroke-dasharray:3}.button{width:100%}.button button{display:block;width:100px;height:50px;margin:0 auto}

package.json

{
  "dependencies": {
    "d3": "^4.12.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-transition-group": "^2.2.1"
  },
  "scripts": {
    "start": "blockup-react server"
  }
}

style.styl

html, body 
	width 100%
	heigth 100%
	padding 0x
	margin 0px


.axisLaeyr
	.xAxis
		.domain, .tick > line
			display none
	
	.yAxis
		.domain
		.tick > line
			display none
		
	.yGrid
		.domain
			display none
		.tick > line
			stroke-dasharray 3

.button
	width 100%;

	button
		display block
		width 100px
		height 50px
		margin 0 auto

yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


asap@~2.0.3:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"

chain-function@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"

classnames@^2.2.5:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"

commander@2:
  version "2.13.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"

core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"

d3-array@1, d3-array@1.2.1, d3-array@^1.2.0:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"

d3-axis@1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"

d3-brush@1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.4.tgz#00c2f238019f24f6c0a194a26d41a1530ffe7bc4"
  dependencies:
    d3-dispatch "1"
    d3-drag "1"
    d3-interpolate "1"
    d3-selection "1"
    d3-transition "1"

d3-chord@1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.4.tgz#7dec4f0ba886f713fe111c45f763414f6f74ca2c"
  dependencies:
    d3-array "1"
    d3-path "1"

d3-collection@1, d3-collection@1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"

d3-color@1, d3-color@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"

d3-dispatch@1, d3-dispatch@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"

d3-drag@1, d3-drag@1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.1.tgz#df8dd4c502fb490fc7462046a8ad98a5c479282d"
  dependencies:
    d3-dispatch "1"
    d3-selection "1"

d3-dsv@1, d3-dsv@1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.8.tgz#907e240d57b386618dc56468bacfe76bf19764ae"
  dependencies:
    commander "2"
    iconv-lite "0.4"
    rw "1"

d3-ease@1, d3-ease@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"

d3-force@1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
  dependencies:
    d3-collection "1"
    d3-dispatch "1"
    d3-quadtree "1"
    d3-timer "1"

d3-format@1:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.2.tgz#1a39c479c8a57fe5051b2e67a3bee27061a74e7a"

d3-format@1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.1.tgz#4e19ecdb081a341dafaf5f555ee956bcfdbf167f"

d3-geo@1.9.1:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.9.1.tgz#157e3b0f917379d0f73bebfff3be537f49fa7356"
  dependencies:
    d3-array "1"

d3-hierarchy@1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26"

d3-interpolate@1, d3-interpolate@1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"
  dependencies:
    d3-color "1"

d3-path@1, d3-path@1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"

d3-polygon@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.3.tgz#16888e9026460933f2b179652ad378224d382c62"

d3-quadtree@1, d3-quadtree@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"

d3-queue@3.0.7:
  version "3.0.7"
  resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.7.tgz#c93a2e54b417c0959129d7d73f6cf7d4292e7618"

d3-random@1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3"

d3-request@1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.6.tgz#a1044a9ef4ec28c824171c9379fae6d79474b19f"
  dependencies:
    d3-collection "1"
    d3-dispatch "1"
    d3-dsv "1"
    xmlhttprequest "1"

d3-scale@1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
  dependencies:
    d3-array "^1.2.0"
    d3-collection "1"
    d3-color "1"
    d3-format "1"
    d3-interpolate "1"
    d3-time "1"
    d3-time-format "2"

d3-selection@1, d3-selection@1.2.0, d3-selection@^1.1.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.2.0.tgz#1b8ec1c7cedadfb691f2ba20a4a3cfbeb71bbc88"

d3-shape@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
  dependencies:
    d3-path "1"

d3-time-format@2, d3-time-format@2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31"
  dependencies:
    d3-time "1"

d3-time@1, d3-time@1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"

d3-timer@1, d3-timer@1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"

d3-transition@1, d3-transition@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.1.tgz#d8ef89c3b848735b060e54a39b32aaebaa421039"
  dependencies:
    d3-color "1"
    d3-dispatch "1"
    d3-ease "1"
    d3-interpolate "1"
    d3-selection "^1.1.0"
    d3-timer "1"

d3-voronoi@1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"

d3-zoom@1.7.1:
  version "1.7.1"
  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.7.1.tgz#02f43b3c3e2db54f364582d7e4a236ccc5506b63"
  dependencies:
    d3-dispatch "1"
    d3-drag "1"
    d3-interpolate "1"
    d3-selection "1"
    d3-transition "1"

d3@^4.12.2:
  version "4.12.2"
  resolved "https://registry.yarnpkg.com/d3/-/d3-4.12.2.tgz#12f775564c6a9de229f63db03446e2cb7bb56c8f"
  dependencies:
    d3-array "1.2.1"
    d3-axis "1.0.8"
    d3-brush "1.0.4"
    d3-chord "1.0.4"
    d3-collection "1.0.4"
    d3-color "1.0.3"
    d3-dispatch "1.0.3"
    d3-drag "1.2.1"
    d3-dsv "1.0.8"
    d3-ease "1.0.3"
    d3-force "1.1.0"
    d3-format "1.2.1"
    d3-geo "1.9.1"
    d3-hierarchy "1.1.5"
    d3-interpolate "1.1.6"
    d3-path "1.0.5"
    d3-polygon "1.0.3"
    d3-quadtree "1.0.3"
    d3-queue "3.0.7"
    d3-random "1.1.0"
    d3-request "1.0.6"
    d3-scale "1.0.7"
    d3-selection "1.2.0"
    d3-shape "1.2.0"
    d3-time "1.0.8"
    d3-time-format "2.1.1"
    d3-timer "1.0.7"
    d3-transition "1.1.1"
    d3-voronoi "1.1.2"
    d3-zoom "1.7.1"

dom-helpers@^3.2.0:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"

encoding@^0.1.11:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
  dependencies:
    iconv-lite "~0.4.13"

fbjs@^0.8.16:
  version "0.8.16"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
  dependencies:
    core-js "^1.0.0"
    isomorphic-fetch "^2.1.1"
    loose-envify "^1.0.0"
    object-assign "^4.1.0"
    promise "^7.1.1"
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.9"

iconv-lite@0.4, iconv-lite@~0.4.13:
  version "0.4.19"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"

is-stream@^1.0.1:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"

isomorphic-fetch@^2.1.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
  dependencies:
    node-fetch "^1.0.1"
    whatwg-fetch ">=0.10.0"

js-tokens@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
  dependencies:
    js-tokens "^3.0.0"

node-fetch@^1.0.1:
  version "1.7.3"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
  dependencies:
    encoding "^0.1.11"
    is-stream "^1.0.1"

object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

promise@^7.1.1:
  version "7.3.1"
  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
  dependencies:
    asap "~2.0.3"

prop-types@^15.5.8, prop-types@^15.6.0:
  version "15.6.0"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

react-dom@^16.2.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.0"

react-transition-group@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
  dependencies:
    chain-function "^1.0.0"
    classnames "^2.2.5"
    dom-helpers "^3.2.0"
    loose-envify "^1.3.1"
    prop-types "^15.5.8"
    warning "^3.0.0"

react@^16.2.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.0"

rw@1:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"

setimmediate@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"

ua-parser-js@^0.7.9:
  version "0.7.17"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"

warning@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
  dependencies:
    loose-envify "^1.0.0"

whatwg-fetch@>=0.10.0:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"

xmlhttprequest@1:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"