From 514cbfc88f73d277bc3d3a1cff910c3701345f77 Mon Sep 17 00:00:00 2001 From: Raj <theraj@umich.edu> Date: Fri, 4 Dec 2020 18:04:08 -0500 Subject: [PATCH] moved IG raw data and charts to import page --- src/containers/Instagram/Import.js | 49 ++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/src/containers/Instagram/Import.js b/src/containers/Instagram/Import.js index e038959..733c250 100644 --- a/src/containers/Instagram/Import.js +++ b/src/containers/Instagram/Import.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { Row, Col } from 'antd'; +import moment from 'moment' import Dropzone from '@imd/components/uielements/dropzone'; import { notification } from '@imd/components'; @@ -13,10 +14,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 CardWidget from '@imd/containers/Widgets/Card/CardWidget'; import IntlMessages from '@imd/components/utility/intlMessages'; +import UserData from './Data/connections.json'; +import ConnectionsByDayLine from './Components/ConnectionsByDayLine/ConnectionsByDayLine'; + +function callback(key) {} export default class extends Component { @@ -100,6 +106,49 @@ export default class extends Component { </DropzoneWrapper> </ContentHolder> </Box> + + <PageHeader>Data & Analytics</PageHeader> + <Box> + <Tabs defaultActiveKey="1" onChange={callback}> + <TabPane tab="Raw Data" key="1"> + <Tabs defaultActiveKey="1" onChange={callback}> + <TabPane tab="Followers" key="1"> + {Object.entries(UserData.followers).map(([name, date]) => ( + <Col lg={6} md={12} sm={12} xs={24} style={colStyle}> + <Box> + <h1>{name}</h1> + <div>{moment(date).format('YYYY-MM-DD')}</div> + </Box> + </Col> + ))} + </TabPane> + <TabPane tab="Following" key="2"> + {Object.entries(UserData.following).map(([name, date]) => ( + <Col lg={6} md={12} sm={12} xs={24} style={colStyle}> + <Box> + <h1>{name}</h1> + <div>{moment(date).format('YYYY-MM-DD')}</div> + </Box> + </Col> + ))} + </TabPane> + </Tabs> + </TabPane> + <TabPane tab="Graphs" key="2"> + <Row style={rowStyle} gutter={0} justify="start"> + <Col lg={24} md={12} sm={12} xs={24} style={colStyle}> + <IsoWidgetsWrapper> + <Box title="Connections By Day"> + <ContentHolder> + <ConnectionsByDayLine /> + </ContentHolder> + </Box> + </IsoWidgetsWrapper> + </Col> + </Row> + </TabPane> + </Tabs> + </Box> </LayoutWrapper> ); }; -- GitLab