Added stable sorting to graph

public/index.html

@@ -9,7 +9,6 @@
 	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-	<link href="https://unpkg.com/react-vis@1.6.7/dist/dist.min.js" />
 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 	<title>Demo App - Jeroen Vijgen</title>
 </head>

src/Views/GraphView.tsx

@@ -12,7 +12,26 @@ interface IData {
 export default class GraphView extends React.Component<{
 	data: any
 }> {
+    // Remove "year-" from the label, not required.
+    prepDate(date: string): string {
+        return date.substring(5, date.length);
+    }
+
     parseData(): Array<IData>{
+      // Sort data to coherently display in the Graph.
+      // eslint-disable-next-line
+      this.props.data.sort((a: any, b: any) => {
+        let dateA = new Date(a.date);
+        let dateB = new Date(b.date);
+        let same = dateA.getTime() === dateB.getTime();
+        // Date is eql, ignore sorting to stablize sorting.
+        if (same) return 0;
+        // Date A is greater than Date B.
+        if (dateA > dateB) return 1;
+        // Date A is lesser than Date B.
+        if (dateA < dateB) return -1;
+      });
+      
       // Object needing to be returned: 
       // { id: "missed_chat_count", data: [{x: int (DATE), y: int (Count)}] }
       // { id: "conversation_count", data: [{x: int (DATE), y: int (Count)}] }
@@ -22,9 +41,9 @@ export default class GraphView extends React.Component<{
       array.push({ id: "conversation_count", data: [] });
       array.push({ id: "visitors_with_conversation_count", data: [] });
       this.props.data.forEach((_item: any) => {
-        array[0].data.push({ x: _item.date, y: _item.missed_chat_count });
-        array[1].data.push({ x: _item.date, y: _item.conversation_count });
-        array[2].data.push({ x: _item.date, y: _item.visitors_with_conversation_count });
+        array[0].data.push({ x: this.prepDate(_item.date), y: _item.missed_chat_count });
+        array[1].data.push({ x: this.prepDate(_item.date), y: _item.conversation_count });
+        array[2].data.push({ x: this.prepDate(_item.date), y: _item.visitors_with_conversation_count });
       });
       return array;
     }
@@ -35,11 +54,11 @@ export default class GraphView extends React.Component<{
         <div className="GraphView">
             <ResponsiveAreaBump
                 data={this.parseData()}
-                margin={{ top: 40, right: 100, bottom: 40, left: 100 }}
+                margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
                 spacing={4}
                 colors={{ scheme: 'nivo' }}
                 blendMode="multiply"
-                startLabel="id"
+                endLabel={false}
                 axisTop={{
                     tickSize: 5,
                     tickPadding: 5,
@@ -48,14 +67,7 @@ export default class GraphView extends React.Component<{
                     legendPosition: 'middle',
                     legendOffset: -36
                 }}
-                axisBottom={{
-                    tickSize: 5,
-                    tickPadding: 5,
-                    tickRotation: 0,
-                    legend: '',
-                    legendPosition: 'middle',
-                    legendOffset: 32
-                }}
+                axisBottom={null}
             />
         </div>
         )

src/index.css

@@ -5,14 +5,10 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: url(./Background/bg.jfif) no-repeat center center;
-  /* background-color: #282c34; */
-  height: 100%;
-  margin: 0;
+  background: url(./Background/bg.jfif);
 }
 
 #App {
-	height: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -23,7 +19,6 @@ body {
 .DashboardComponent {
 	background-color: white;
 	border-style: solid;
-	border-width: solid;
 	border-color: #FD4114;
 	border-radius: 7px;
 }
@@ -33,5 +28,5 @@ body {
 }
 
 .GraphView {
-	height: 250px;
+	height: 300px;
 }