'Web 개발/React' 카테고리의 글 목록

Web 개발/React

[React] Hook 정리 (useState, useEffect, useReducer, useMemo, useCallback, useRef)

2020. 3. 16. 23:03

* useState
* const [name, setName] = useState(‘’);
* useEffect
* componentDidMount + componentDidUpdate
* useEffect은 함수를 컴포넌트가 화면에 맨 처음 렌더링될때만 실행
* 두번째 파라미터로 비어있는 배열을 넣어주면 업데이트될때 수행되지 않는다.
* 특정 값이 변경될 때만 호출하고 싶은 경우는 두번째 파라미터로 넘긴다.
* 특정값을 변경하는 코드를 함께 넣고, 두번째 파라미터에서 특정값이 변경될때 호출하면 무한으로 useEffet가 호출됨
* 업데이트 되기 직전이나, 언마운트 되기 전에 작업을 수행하고 싶으면 return () => { .. cleanup } 함수를 반환한다.
* useReducer
* 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을때 사용
* 현재 상태, 업데이트를 위해 필요한 정보를 담는 action값을 전달받아 새로운 상태를 반환하는 함수
* 새로운 상태를 만들 때는 반드시 불변성을 유지?
* 액션 객체는 반드시 type을 지니고 있을 필요가 없다. (문자열, 숫자 상관없음)
* 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.
* event.target 을 사용하면 action.name을 state로 사용을 할 수 있다.
* reducer에 return { ...state , [action.name]: action.value }}

function reducer(state, action) {
switch (action.type) {
case "INCREMENT":
return {value: state.value + 1}

...
}
}

const [state, dispatch] = useReducer(reducer, {value:0}); // 두번째 파라미터에는 해당 리듀서의 기본값
// state는 현재 가리키고 있는 상태, dispatch는 액션을 발생시키는 함수
onClick => dispatch({type: 'INCREMENT'})}

* useMemo
* 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용
* 값을 재사용(숫자, 문자열, 객체)
* const avg = useMemo(() => getAverage(list), [list]);
* useCallback
* 함수를 재사용
* useMemo와 유사하게 주로 렌더링 성능을 최적화해야 하는 상황에서 사용
* 컴포넌트가 리렌더링 될때마다 함수들이 새로생기기 때문에 useCallback을 이용
* 함수에 useCallBack을 추가해서 컴포넌트가 처음 렌더링될때만 함수 생성 or 특정 값이 변경되었을때만 함수생성(=useEffect와 유사함)
* useRef
* 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.
* 예) 컴포넌트에서 특정 버튼을 눌렀을때 input에 포커스를 가게 하기
* inputEl = useRef(null); <input ref={inputEl} /> inputEl.current.focus()
* 컴포넌트 로컬 변수로 사용 (로컬변수는 렌더링과 상관없이 바뀔수 있는 값) 클래스에서 사용했던 로컬변수를 함수형으로 컴포넌트를 선언하기 위해서
* id = useRef(1), setId = (n) => { id.current = n; } printId = () => {console.log(id.current}
* CustomHooks
* https://github.com/rehooks/awesome-react-hooks
* https://nikgraf.github.io/react-hooks

'Web 개발 > React' 카테고리의 다른 글

[React] onKeyPress가 두번 호출 되는 현상 (0)	2020.03.15
index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`. (0)	2020.03.13
nivo Heatmap code (0)	2020.03.12
Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] searchkit 사용해보자 (0)	2020.03.02

[React] onKeyPress가 두번 호출 되는 현상

2020. 3. 15. 10:36

  const onKeyPress = e => {
    if (e.key === 'Enter') {
      const { value, name } = e.target;
      e.preventDefault();
      console.log('onKeyPress');
      search();
    }
  };

로 구현하고 이벤트를 onKeyPress를 했더니 두번 호출되었다. e.preventDefault()를 통해 해결 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소하는 역할을해서 두번호출되는 것을 막는다.

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

[React] Hook 정리 (useState, useEffect, useReducer, useMemo, useCallback, useRef) (0)	2020.03.16
index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`. (0)	2020.03.13
nivo Heatmap code (0)	2020.03.12
Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] searchkit 사용해보자 (0)	2020.03.02

index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`.

2020. 3. 13. 00:06

https://github.com/plouc/nivo/issues/423

전체에 값이 채워져 있어야 한다.

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

[React] Hook 정리 (useState, useEffect, useReducer, useMemo, useCallback, useRef) (0)	2020.03.16
[React] onKeyPress가 두번 호출 되는 현상 (0)	2020.03.15
nivo Heatmap code (0)	2020.03.12
Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] searchkit 사용해보자 (0)	2020.03.02

nivo Heatmap code

2020. 3. 12. 22:03

import React from 'react';
import { ResponsiveHeatMap } from '@nivo/heatmap';
import { AutoSizer } from 'react-virtualized';
// import AutoSizer from 'react-virtualized-auto-sizer';
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.

export default function NivoHeatMap({ props, data, loading, error, onClick }) {
  return (
    <div style={{ display: 'flex' }}>
      {/* <div style={{ flex: '1 1 auto', height: '100vh' }}> */}
      <div>
        <AutoSizer>
          {({ height, width }) =>
            !loading &&
            data && (
              <div height={height} width={width}>
                {height}, {width}
                <div style={{ height: 400 }}>
                  <ResponsiveHeatMap
                    onClick={onClick}
                    data={data.values}
                    keys={data.dedicatedAreaSet}
                    indexBy="floor"
                    margin={{
                      top: 100,
                      right: 60,
                      bottom: 60,
                      left: 60,
                    }}
                    forceSquare={false}
                    axisTop={null}
                    axisBottom={{
                      orient: 'bottom',
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '전용면적',
                      legendPosition: 'middle',
                      legendOffset: 36,
                    }}
                    axisLeft={{
                      orient: 'left',
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '층',
                      legendPosition: 'middle',
                      legendOffset: -40,
                    }}
                    colors="oranges"
                    cellOpacity={1}
                    cellShape="rect"
                    cellBorderColor="inherit:darker(0.4)"
                    labelTextColor="inherit:darker(1.8)"
                    // labelTextColor="#fff1fb"
                    defs={[
                      {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'inherit',
                        color: 'rgba(0, 0, 0, 0.1)',
                        rotation: -45,
                        lineWidth: 4,
                        spacing: 7,
                      },
                    ]}
                    fill={[
                      {
                        id: 'lines',
                      },
                    ]}
                    animate={true}
                    motionStiffness={80}
                    motionDamping={9}
                    hoverTarget="cell"
                    cellHoverOthersOpacity={0.25}
                    sizeVariation={0.3}
                  />
                </div>
              </div>
            )
          }
        </AutoSizer>
      </div>
    </div>
  );
}

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

[React] onKeyPress가 두번 호출 되는 현상 (0)	2020.03.15
index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`. (0)	2020.03.13
Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] searchkit 사용해보자 (0)	2020.03.02
[React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0)	2020.03.01

Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다.

2020. 3. 11. 23:39

react에서 차트를 화면에 뿌려주고 있는데 차트가 화면에 표시되면서 이상하게 팬소리가 엄청나서 살펴보니 console에서 다음과 같은 에러를 발생하고 있었다...에러가 더럽게도 길다.

parents의 사이즈때문이라는데 아래 이슈 참고

https://github.com/plouc/nivo/issues/411
https://github.com/plouc/nivo/issues/122

index.js:1 Warning: Failed prop type: Invalid prop `axisLeft.legendPosition` of value `center` supplied to `HeatMap`, expected one of ["start","middle","end"].
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1875
createElementWithValidation @ react.development.js:2059
render @ shouldUpdate.js:36
finishClassComponent @ react-dom.development.js:18470
updateClassComponent @ react-dom.development.js:18423
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 40 more frames
index.js:1 Warning: Failed prop type: Invalid prop `left.legendPosition` of value `center` supplied to `Axes`, expected one of ["start","middle","end"].
    in Axes (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
updateFunctionComponent @ react-dom.development.js:18328
updateSimpleMemoComponent @ react-dom.development.js:18285
updateMemoComponent @ react-dom.development.js:18188
beginWork$1 @ react-dom.development.js:20248
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 38 more frames
index.js:1 Warning: Failed prop type: Invalid prop `legendPosition` of value `center` supplied to `Axis`, expected one of ["start","middle","end"].
    in Axis (created by Axes)
    in Axes (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
updateMemoComponent @ react-dom.development.js:18197
beginWork$1 @ react-dom.development.js:20248
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 36 more frames
index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`.
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1875
createElementWithValidation @ react.development.js:2059
render @ shouldUpdate.js:36
finishClassComponent @ react-dom.development.js:18470
updateClassComponent @ react-dom.development.js:18423
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 40 more frames
index.js:1 Warning: Received NaN for the `x` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
warningWithoutStack @ react-dom.development.js:530
warning @ react-dom.development.js:1018
validateProperty$1 @ react-dom.development.js:7443
warnUnknownProperties @ react-dom.development.js:7505
validateProperties$2 @ react-dom.development.js:7528
validatePropertiesInDevelopment @ react-dom.development.js:7575
setInitialProperties @ react-dom.development.js:7860
finalizeInitialChildren @ react-dom.development.js:9478
completeWork @ react-dom.development.js:21095
completeUnitOfWork @ react-dom.development.js:24733
performUnitOfWork @ react-dom.development.js:24706
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 41 more frames
index.js:1 Warning: Received NaN for the `y` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
warningWithoutStack @ react-dom.development.js:530
warning @ react-dom.development.js:1018
validateProperty$1 @ react-dom.development.js:7443
warnUnknownProperties @ react-dom.development.js:7505
validateProperties$2 @ react-dom.development.js:7528
validatePropertiesInDevelopment @ react-dom.development.js:7575
setInitialProperties @ react-dom.development.js:7860
finalizeInitialChildren @ react-dom.development.js:9478
completeWork @ react-dom.development.js:21095
completeUnitOfWork @ react-dom.development.js:24733
performUnitOfWork @ react-dom.development.js:24706
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 41 more frames
index.js:1 Warning: Received NaN for the `width` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
warningWithoutStack @ react-dom.development.js:530
warning @ react-dom.development.js:1018
validateProperty$1 @ react-dom.development.js:7443
warnUnknownProperties @ react-dom.development.js:7505
validateProperties$2 @ react-dom.development.js:7528
validatePropertiesInDevelopment @ react-dom.development.js:7575
setInitialProperties @ react-dom.development.js:7860
finalizeInitialChildren @ react-dom.development.js:9478
completeWork @ react-dom.development.js:21095
completeUnitOfWork @ react-dom.development.js:24733
performUnitOfWork @ react-dom.development.js:24706
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 41 more frames
index.js:1 Warning: Received NaN for the `height` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
warningWithoutStack @ react-dom.development.js:530
warning @ react-dom.development.js:1018
validateProperty$1 @ react-dom.development.js:7443
warnUnknownProperties @ react-dom.development.js:7505
validateProperties$2 @ react-dom.development.js:7528
validatePropertiesInDevelopment @ react-dom.development.js:7575
setInitialProperties @ react-dom.development.js:7860
finalizeInitialChildren @ react-dom.development.js:9478
completeWork @ react-dom.development.js:21095
completeUnitOfWork @ react-dom.development.js:24733
performUnitOfWork @ react-dom.development.js:24706
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:222
e @ VM14:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
(anonymous) @ redux-saga-core.esm.js:481
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
dispatch @ VM14:1
(anonymous) @ NivoHeatMapContainer.js:442
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
performSyncWorkOnRoot @ react-dom.development.js:24251
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
flushPendingDiscreteUpdates @ react-dom.development.js:24377
flushDiscreteUpdates @ react-dom.development.js:24356
flushDiscreteUpdatesIfNeeded @ react-dom.development.js:1463
dispatchDiscreteEvent @ react-dom.development.js:5880
Show 41 more frames
1865Error: <rect> attribute x: Expected length, "NaN".
1865Error: <rect> attribute y: Expected length, "NaN".
1865Error: <rect> attribute width: Expected length, "NaN".
1864Error: <rect> attribute height: Expected length, "NaN".

legendposition을 'center'에서 'middle'로 변경

Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`.
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
index.js:1 Warning: Received NaN for the `x` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
index.js:1 Warning: Received NaN for the `y` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
index.js:1 Warning: Received NaN for the `width` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
index.js:1 Warning: Received NaN for the `height` attribute. If this is expected, cast the value to a string.
    in rect (created by HeatMapCellRect)
    in g (created by HeatMapCellRect)
    in HeatMapCellRect (created by pure(HeatMapCellRect))
    in pure(HeatMapCellRect) (created by TransitionMotion)
    in g (created by TransitionMotion)
    in TransitionMotion (created by Container)
    in g (created by SvgWrapper)
    in svg (created by SvgWrapper)
    in SvgWrapper (created by Container)
    in div (created by Container)
    in MotionConfigProvider (created by Container)
    in Container (created by HeatMap)
    in HeatMap (created by pure(HeatMap))
    in pure(HeatMap) (created by withPropsOnChange(pure(HeatMap)))
    in withPropsOnChange(pure(HeatMap)) (created by withPropsOnChange(withPropsOnChange(pure(HeatMap))))
    in withPropsOnChange(withPropsOnChange(pure(HeatMap))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))) (created by withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))
    in withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))) (created by defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))
    in defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))) (created by defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))
    in defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))) (created by withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))))
    in withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap)))))))))))))))) (created by withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))))
    in withState(withPropsOnChange(defaultProps(withPropsOnChange(defaultProps(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(withPropsOnChange(pure(HeatMap))))))))))))))))) (created by HeatMap)
    in HeatMap
    in div
    in Unknown (created by Measure)
    in Measure (created by ResponsiveWrapper)
    in ResponsiveWrapper (created by ResponsiveHeatMap)
    in ResponsiveHeatMap (at NivoHeatMap.js:14)
    in div (at NivoHeatMap.js:13)
    in div (at NivoHeatMap.js:11)
    in NivoHeatMap (at NivoHeatMapContainer.js:463)
    in NivoHeatMapContainer (created by Context.Consumer)
    in withRouter(NivoHeatMapContainer) (at Dashboard.js:96)
    in div (at Widget.js:56)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Widget.js:32)
    in div (at Widget.js:31)
    in Widget (at Dashboard.js:90)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:89)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at Dashboard.js:88)
    in Dashboard (at DashboardContainer.js:36)
    in DashboardContainer (created by Context.Consumer)
    in withRouter(DashboardContainer) (at ContextRoute.js:11)
    in DashboardProvider (at ContextRoute.js:10)
    in Route (at ContextRoute.js:9)
    in ContextRoute (at Layout.js:49)
    in Switch (at Layout.js:48)
    in div (at Layout.js:42)
    in div (at Layout.js:38)
    in Layout (created by Context.Consumer)
    in withRouter(Layout) (created by Context.Consumer)
    in Route (at App.js:54)
    in PrivateRoute (at App.js:39)
    in Switch (at App.js:32)
    in Router (created by HashRouter)
    in HashRouter (at App.js:31)
    in App (at src/index.js:47)
    in HelmetProvider (at src/index.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:45)
    in ThemeProvider (at src/index.js:44)
    in Provider (at src/index.js:43)
    in LayoutProvider (at src/index.js:42)
console.<computed> @ index.js:1
react-dom.development.js:12357 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Motion, TransitionMotion
printWarning @ react-dom.development.js:12357
3406Error: <rect> attribute x: Expected length, "NaN".
3406Error: <rect> attribute y: Expected length, "NaN".
3406Error: <rect> attribute width: Expected length, "NaN".
3406Error: <rect> attribute height: Expected length, "NaN".

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`. (0)	2020.03.13
nivo Heatmap code (0)	2020.03.12
[React] searchkit 사용해보자 (0)	2020.03.02
[React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0)	2020.03.01
[React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이 (1)	2020.03.01

[React] searchkit 사용해보자

2020. 3. 2. 20:54

github
introduction gitbook
typescript 로 작성되어 있음

$ yarn add @searchkit/refinement-autosuggest
$ yarn add @searchkit/autosuggest

searchkit-examples-github을 보면 express, next 로 작성한 example 코드가 있으다.
searchkit-express

Searchkit/Packages

packages

이걸 보니까 gitbook 작성이 가능하겠다

gitbook

... 너무 복잡하다 ㅠㅠ 다음에 보게되면 이어서 보자...

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

nivo Heatmap code (0)	2020.03.12
Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0)	2020.03.01
[React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이 (1)	2020.03.01
[React] 앱을 작업하는 순서 (Conext, Provider, App.js, ...) (0)	2020.02.29

[React] Route에 React Context Provider 적용하는 방법 (+소스코드)

2020. 3. 1. 12:58

ContextProvider를 사용할때 Route에는 어떻게 적용하는게 효율적일지!

<Route path="/app/dashboard">
  <DashboardContext>
    <Dashboard></Dashboard>
  </DashboardContext>
</Route>

반복적으로 위와같이 입력하기 어려우니 ContextRoute를 생성하자


import React from 'react';
import { Route } from 'react-router-dom';

const ContextRoute = ({ provider, component, ...rest }) => {
  const { Provider } = provider;
  const Component = component;

  return (
    <Route {...rest}>
      <Provider>
        <Component />
      </Provider>
    </Route>
  );
};

export default ContextRoute;

위에 ContextRoute를 정의한 이후에는 다음과같이 작성하면 된다.

<ContextRoute
  path="/app/dashboard"
  provider={DashboardContext}
component={Dashboard}
/>

참고

https://stackoverflow.com/questions/50155909/how-to-use-context-api-with-react-router-v4/50158702

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다. (0)	2020.03.11
[React] searchkit 사용해보자 (0)	2020.03.02
[React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이 (1)	2020.03.01
[React] 앱을 작업하는 순서 (Conext, Provider, App.js, ...) (0)	2020.02.29
[React] 유용한 컴포넌트 리스트 (0)	2020.02.29

[React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이

2020. 3. 1. 11:32

React Context는 오랫동안 사용이 가능했지만 이번에 React hooks이 나오면서 더 좋아졌다. 이전에는 redux라는 third-party libraries를 사용해서 React Apps의 상태를 관리했었다. 이 개발자가 redux에 대한 내용 을 작성했는데, redux를 사용할 개발자들은 이 해당 포스트를 참고해도 좋을것 같다. (참고로 이 코드를 React context hook 으로 리팩토링을 진행했음

React Redux를 사용할때

나는 react-context-hook을 사용하고 싶으니... 이 코드의 흐름을 이해해보려고 한다. 이전 redux를 사용할때는 component, container, ilb/api, modules를 각각 생성했었는데, 코드 관리가 어려웠다. 하나의 API를 추가하려면 너무 많은 작업이 필요했고, 여러 파일을 변경하면서 수정하는게 보통 쉬운게 아니다. 내가 모듈에 작성했던건지.. lib/api에 작성했던건지 나도 기억이 안나니.. 보통 Redux를 사용하면 Component에 내가 원하는 UI를 표시하고, Container안에 component를 넣고 container에서는 데이터를 lib/api, modules을 통해 가져온다. 역할로 나눠보면 lib/api, modules은 데이터 처리를 해주고, container에서는 데이터 처리의 상태를 확인하다가 변경된 부분이 있다면 데이터를 업데이트를하고, component에서는 container에서 업데이트된 데이터를 화면에 출력을 한다.

위 작업을 하기 위해서는 첫번째로 component를 작성하고, 두번째로 lib/api, module을 작성을 한뒤에 컴포넌트에 데이터가 정상적으로 들어가는지 확인하고, 이후에는 변경되는 데이터를 확인하고 업데이트하는 container를 작성해 최종적으로 component가 아닌 container를 pages에 추가했었다. 이방법이 정답은 아니겠지만 내가 본 책에서는 그랬다. 지금 다른 코드를 보면 이 책도 예전 방식을 따라했던것 같다. 너무 빠르게 변화함..

React Context를 사용하면

React Context를 사용하면 context, container, component를 생성하면된다.

Context
- reducer를 구현해 어떤 액션 타입이 왔을때 어떻게 데이터를 리턴할지에 대해서 명시
- 추가로 article에 대한 articleContext.js를 생성하고, 그 안에는 ArticleProvider를 정의한다. 이 Provider는 값을 전달하는 역할을 한다.
Container
- container는 context를 이용해 article의 내용을 가져오는 역할을 한다. useContext(ArticleContext를 통해 articles을 가져오고 article을 화면에 출력할 내용을 생성한다. (출력할때 component에 미리 Article 을 만들어놓으면 여기서 사용)
Component
- 위 container에서 작업할 Article을 만든다.
- ArticleAdd.js를 생성하는데 여기서도 useContext(ArticleContext)을 이용해 dispatch를 가져온다.
  - newAddArticle과 같은 함수를 호출한다.
  - 호출되는 함수에서는 dispatch를 통해 새로운 Article이 추가되었다고 알린다.
App.js
- 최종 앱에는 아래 같은 하위 구성을 정의한다.
  - ArticleProvider (context)
    - AddArticle (component)
    - Articles (container)

참고

저작자표시 비영리 변경금지

'Web 개발 > React' 카테고리의 다른 글

[React] searchkit 사용해보자 (0)	2020.03.02
[React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0)	2020.03.01
[React] 앱을 작업하는 순서 (Conext, Provider, App.js, ...) (0)	2020.02.29
[React] 유용한 컴포넌트 리스트 (0)	2020.02.29
[React] Dashboard 좋은 재료들 모음 (0)	2020.02.29

PREV 1 2 3 4 ···6 NEXT

더블리의 12층

Web 개발/React

[React] Hook 정리 (useState, useEffect, useReducer, useMemo, useCallback, useRef)

'Web 개발 > React' 카테고리의 다른 글

[React] onKeyPress가 두번 호출 되는 현상

'Web 개발 > React' 카테고리의 다른 글

index.js:1 Warning: Failed prop type: The prop `value` is marked as required in `HeatMapCellRect`, but its value is `undefined`.

'Web 개발 > React' 카테고리의 다른 글

nivo Heatmap code

'Web 개발 > React' 카테고리의 다른 글

Error: <rect> attribute x: Expected length, "NaN" 미친듯한 에러와 팬소리에 미치다.

legendposition을 'center'에서 'middle'로 변경

'Web 개발 > React' 카테고리의 다른 글

[React] searchkit 사용해보자

Searchkit/Packages

이걸 보니까 gitbook 작성이 가능하겠다

'Web 개발 > React' 카테고리의 다른 글

[React] Route에 React Context Provider 적용하는 방법 (+소스코드)

참고

'Web 개발 > React' 카테고리의 다른 글

[React] React Context vs Redux 무엇이 좋을까? 흐름 주저리 정리해보자, Redux Context 사용하는 코드 예제풀이

React Redux를 사용할때

React Context를 사용하면

참고

'Web 개발 > React' 카테고리의 다른 글

+ Recent posts

티스토리툴바