✨ Add absolute nation diff chart

Use custom fixed build of async-component with ctrlplusb/react-async-component#93

Author: kronthto

src/components/AsyncLineChart.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { asyncComponent } from 'react-async-component'
+import { asyncComponent } from '../vendor/react-async-component'
 import LoadBlock from './LoadBlock'
 
 const AsyncLineChart = asyncComponent({

src/components/ChromeRivals/OnlineCountChart.js

@@ -8,7 +8,7 @@ import subDays from 'date-fns/subDays'
 import startOfHour from 'date-fns/startOfHour'
 import startOfday from 'date-fns/startOfDay'
 
-const options = (scale = 'day') => {
+const options = (scale = 'day', yLabelString = 'Pl. Count') => {
   return {
     elements: {
       point: { radius: 0 }
@@ -47,7 +47,7 @@ const options = (scale = 'day') => {
 
           scaleLabel: {
             display: true,
-            labelString: 'Pl. Count'
+            labelString: yLabelString
           }
         }
       ]
@@ -159,6 +159,7 @@ class PlayerFameChart extends Component {
     const startDate = subDays(new Date(), backdays)
 
     let serieses = { BCU: [], ANI: [] }
+    let diffSerieses = { BCU: [], ANI: [] }
 
     data.forEach(row => {
       const dt = row.timestamp
@@ -175,6 +176,15 @@ class PlayerFameChart extends Component {
         x: dt,
         y: row.ani
       })
+
+      diffSerieses.ANI.push({
+        x: dt,
+        y: Math.max(0, row.ani - row.bcu)
+      })
+      diffSerieses.BCU.push({
+        x: dt,
+        y: Math.max(0, row.bcu - row.ani)
+      })
     })
 
     let datasets = Object.keys(serieses).map(function(seriesKey) {
@@ -191,6 +201,20 @@ class PlayerFameChart extends Component {
         pointRadius: 3
       }
     })
+    let datasetsDiff = Object.keys(diffSerieses).map(function(seriesKey) {
+      return {
+        fill: true,
+        borderColor: seriesColorCoding[seriesKey],
+        backgroundColor: seriesColorCoding[seriesKey],
+        borderWidth: 0,
+        //cubicInterpolationMode:'monotone',
+        steppedLine: true,
+        //showLine: false,
+        label: seriesKey,
+        data: diffSerieses[seriesKey],
+        pointRadius: 0
+      }
+    })
 
     let width = 45 * backdays
 
@@ -209,6 +233,19 @@ class PlayerFameChart extends Component {
             type="line"
           />
         </div>
+        <div
+          style={{
+            width: width > window.innerWidth ? width + 'px' : '100%',
+            height: '200px',
+            position: 'relative'
+          }}
+        >
+          <AsyncLineChart
+            options={options(backdays < 4 ? 'hour' : 'day', 'Nation diff')}
+            data={{ datasets: datasetsDiff }}
+            type="line"
+          />
+        </div>
       </div>
     )
   }

src/index.js

@@ -14,7 +14,7 @@ import ScrollToTop from './components/ScrollToTop'
 import App from './containers/App'
 import * as serviceWorker from './serviceWorker'
 
-import { AsyncComponentProvider } from 'react-async-component'
+import { AsyncComponentProvider } from './vendor/react-async-component'
 
 import toast from './utils/toast'
 

src/routes.js

@@ -5,7 +5,7 @@ import Home from './components/Home'
 import NoMatch from './components/NoMatch'
 
 import lazyImport from './utils/lazyImportHack'
-import { asyncComponent } from 'react-async-component'
+import { asyncComponent } from './vendor/react-async-component'
 import LoadBlock from './components/LoadBlock'
 
 export const crTopKillsIntervalUrl = '/killsBetween'