New value charts updates

package.json

@@ -64,6 +64,7 @@
     "eth-contract-metadata": "^1.9.3",
     "ethers": "^4.0.44",
     "events": "^1.1.1",
+    "fbjs": "^1.0.0",
     "global": "^4.3.2",
     "grapheme-splitter": "^1.0.4",
     "https-browserify": "0.0.1",

src/components/value-chart/Chart.js

@@ -2,9 +2,9 @@ import React, { useMemo, useState, useRef } from 'react';
 import ValueChart from './ValueChart';
 import ValueText from './ValueText';
 import {
-  // data1,
-  // data2,
-  // data3,
+  data1,
+  data2,
+  data3,
   data4,
   dataColored1,
   dataColored2,
@@ -14,13 +14,20 @@ import TimespanSelector from './TimespanSelector';
 import { colors } from '../../styles';
 
 const dataColored = [dataColored1, dataColored2, dataColored3];
-const dataSwitching = [
+const dataSwitching1 = [
   dataColored,
   [dataColored1, dataColored2],
   [dataColored2, dataColored3],
   [data4],
 ];
 
+const dataSwitching2 = [
+  [data2],
+  [data1],
+  [dataColored2, dataColored3],
+  [data3],
+];
+
 const colorsArray = [
   colors.red,
   colors.grey,
@@ -40,9 +47,41 @@ let colorIndex = 0;
 
 export default function Chart() {
   const textInputRef = useRef(null);
-  const data = useMemo(() => {
+
+  const data1 = useMemo(() => {
+    colorIndex = 0;
+    return dataSwitching1.map((sectionsData, index) => {
+      return {
+        name: index,
+        segments: sectionsData.map((data, i) => {
+          return {
+            color: colorsArray[colorIndex++],
+            line: i * 5,
+            points: data.map(values => {
+              return {
+                isImportant: Math.random() < 0.05 ? true : false,
+                x: values.timestamp,
+                y: values.value,
+              };
+            }),
+            renderStartSeparator:
+              colorIndex % 2 !== 0
+                ? {
+                    fill: colorsArray[colorIndex],
+                    r: 7,
+                    stroke: 'white',
+                    strokeWidth: colorIndex + 2,
+                  }
+                : undefined,
+          };
+        }),
+      };
+    });
+  }, []);
+
+  const data2 = useMemo(() => {
     colorIndex = 0;
-    return dataSwitching.map((sectionsData, index) => {
+    return dataSwitching2.map((sectionsData, index) => {
       return {
         name: index,
         segments: sectionsData.map((data, i) => {
@@ -79,16 +118,17 @@ export default function Chart() {
         ref={textInputRef}
       />
       <ValueChart
-        mode="gesture-managed" // "gesture-managed" / "detailed" / "simplified"
-        enableSelect // enable checking value in touched point of chart
+        mode="gesture-managed"
+        enableSelect
         onValueUpdate={value => {
           textInputRef.current.updateValue(value);
         }}
         currentDataSource={currentChart}
-        amountOfPathPoints={100} // amount of points for switch between charts
-        data={data}
+        amountOfPathPoints={100}
+        data={data2}
         barColor={change > 0 ? colors.chartGreen : colors.red}
         stroke={{ detailed: 1.5, simplified: 3 }}
+        importantPointsIndexInterval={25}
       />
       <TimespanSelector
         reloadChart={setCurrentChart}