facebook tabs

src/containers/Facebook/Import.js

-import React, { Component } from 'react';
+import React, { Component, lazy } from 'react';
 import { Row, Col } from 'antd';
-
+import moment from 'moment'
 import Dropzone from '@imd/components/uielements/dropzone';
 import { notification } from '@imd/components';
 import PageHeader from '@imd/components/utility/pageHeader';
@@ -13,10 +13,15 @@ import basicStyle from '@imd/assets/styles/constants';
 import FrappeChart from 'frappe-charts/dist/frappe-charts.min.esm';
 import * as configs from './config';
 import 'frappe-charts/dist/frappe-charts.min.css';
+import Tabs, { TabPane } from '@imd/components/uielements/tabs';
 import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
+import TotalFriendsByDayLine from './Components/TotalFriendsByDayLine/TotalFriendsByDayLine';
+import FriendData from './Data/friends/friends.json';
+
+const SentReceivedPie = lazy(() => import('./Components/SentReceivedPie/SentReceivedPie'));
+
 
-import CardWidget from '@imd/containers/Widgets/Card/CardWidget';
-import IntlMessages from '@imd/components/utility/intlMessages';
+function callback(key) {}
 
 export default class extends Component {
 
@@ -102,6 +107,43 @@ export default class extends Component {
             </DropzoneWrapper>
           </ContentHolder>
         </Box>
+
+        <Box title="Interpretation">
+          <Tabs defaultActiveKey="1" onChange={callback}>
+            <TabPane tab="Raw Data" key="1">
+            {FriendData.friends.map((friend, idx) => (
+                <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
+                    <Box>
+                        <h1>{friend.name}</h1>
+                        <div>{moment.unix(friend.timestamp).format('YYYY-MM-DD')}</div>
+                    </Box>
+                </Col>
+            ))}
+            </TabPane>
+            <TabPane tab="Analytics" key="2">
+              <Row style={rowStyle} gutter={0} justify="start">
+              <Col lg={24} md={12} sm={12} xs={24} style={colStyle}>
+                <IsoWidgetsWrapper>
+                    <Box title="Total Friends By Day">
+                      <ContentHolder>
+                        <TotalFriendsByDayLine />
+                      </ContentHolder>
+                    </Box>
+                  </IsoWidgetsWrapper>
+                </Col>
+              </Row>
+              <Row style={rowStyle} gutter={0} justify="start">
+                <Col lg={8} md={12} sm={12} xs={24} style={colStyle}>
+                  <IsoWidgetsWrapper> 
+                    <Box height={450} title="Friend Statuses">
+                        <SentReceivedPie />
+                    </Box>
+                  </IsoWidgetsWrapper>
+                </Col>
+              </Row>
+            </TabPane>
+          </Tabs>
+        </Box>
       </LayoutWrapper>
     );
   };

src/containers/Instagram/Components/ConnectionsByDayLine/config.js

@@ -27,7 +27,6 @@ for (const [name, dat] of Object.entries(ConnectionData.followers).reverse()) {
 for (const [name, dat] of Object.entries(ConnectionData.following).reverse()) {
     
     let date = moment(dat).format('YYYY-MM-DD');
-    console.log(date);
     if (date in followingPerDay)
     {
         followingPerDay[date] += 1;