LinkedIn Data Interpretation Draft

package.json

@@ -11,32 +11,35 @@
     "@uppy/instagram": "^1.3.2",
     "@uppy/react": "^1.3.2",
     "@uppy/tus": "^1.4.2",
-    "antd": "^3.24.2",
+    "antd": "^4.8.4",
     "antd-local-icon": "^0.1.3",
     "auth0-lock": "^11.17.3",
     "card-react": "^1.2.7",
     "chart.js": "^2.9.3",
     "classnames": "^2.2.6",
     "clone": "^2.1.2",
+    "convert-csv-to-json": "^1.0.0",
     "d3-shape": "^1.3.5",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-react-intl": "^2.0.6",
     "express": "^4.17.1",
     "firebase": "^7.2.0",
-    "formik": "^1.5.8",
+    "formik": "^2.2.5",
     "frappe-charts": "^0.0.8",
+    "fs": "0.0.1-security",
     "fuse.js": "^3.4.5",
     "globalize": "^1.4.2",
     "google-maps-react": "^2.0.2",
     "history": "^4.10.1",
+    "isomorphic-fetch": "^3.0.0",
     "js-rich-marker": "^1.1.2",
     "leaflet": "^1.5.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "node-fetch": "^2.6.1",
     "node-sass": "^4.12.0",
     "nprogress": "^0.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
     "react-addons-shallow-compare": "^15.6.2",
     "react-beautiful-dnd": "^11.0.5",
     "react-big-calendar": "^0.22.1",
@@ -48,7 +51,6 @@
     "react-dates": "^21.2.0",
     "react-dnd": "^7.4.5",
     "react-dnd-html5-backend": "^7.4.4",
-    "react-dom": "^16.11.0",
     "react-drawer": "^1.3.4",
     "react-dropzone-component": "^3.2.0",
     "react-element-resize": "^0.2.2",
@@ -73,7 +75,6 @@
     "react-sidebar": "^3.0.2",
     "react-speech-recognition": "^2.0.4",
     "react-tag-input": "^6.4.1",
-    "react-throttle": "^0.3.0",
     "react-trend": "^1.2.5",
     "react-vis": "^1.11.7",
     "react-youtube": "^7.9.0",
@@ -97,9 +98,15 @@
     "customize-cra": "^0.8.0",
     "enzyme": "^3.10.0",
     "enzyme-to-json": "^3.4.2",
+    "immutable": "^3.8.2",
+    "react": "^16.14.0",
     "react-app-rewired": "^2.1.4",
+    "react-dom": "^17.0.1",
+    "react-throttle": "^0.3.0",
     "redux-devtools-extension": "^2.13.8",
-    "redux-mock-store": "^1.5.3"
+    "redux-mock-store": "^1.5.3",
+    "sass": "^1.29.0",
+    "typescript": "^4.1.2"
   },
   "scripts": {
     "start": "react-app-rewired start",

src/containers/LinkedIn/Analytics.js

@@ -16,6 +16,8 @@ import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
 
 import CardWidget from '@imd/containers/Widgets/Card/CardWidget';
 import IntlMessages from '@imd/components/utility/intlMessages';
+import ConnectionData from './Data/Connections.csv'
+import TotalConnectionsPerMonth from './Components/TotalConnectionsPerMonth/TotalConnectionsPerMonth';
 
 export default class extends Component {
 
@@ -27,57 +29,18 @@ export default class extends Component {
 
     const CARD_WIDGET = [
     {
-      icon: 'ion-ios-people',
-      iconcolor: '#42A5F5',
-      number: '210',
-      text: 'widget.tinder.matches.text',
-    },
-    {
-      icon: 'ion-chatbox',
-      iconcolor: '#F75D81',
-      number: '540',
-      text: 'widget.tinder.messages.text',
-    },
-    {
-      icon: 'ion-trophy',
-      iconcolor: '#FEAC01',
-      number: 'widget.cardwidget3.number',
-      text: 'widget.cardwidget3.text',
+      icon: 'ion-ios-people-outline',
+      iconcolor: '#0051F7',
+      number: ConnectionData.length.toString(),
+      text: 'Total Connections',
     },
   ];
 
-    //##########
-    //Dropzone
-    //##########
-    const componentConfig = {
-      iconFiletypes: ['.json'],
-      method: true,
-      showFiletypeIcon: false,
-      uploadMultiple: false,
-      maxFilesize: 2, // MB
-      maxFiles: 1,
-      dictRemoveFile: 'Delete',
-      dictCancelUploadConfirmation: 'Are you sure to cancel upload?',
-      postUrl: '/upload',
-    };
-    const djsConfig = {
-      acceptedFiles: '.json',
-      params: {
-        account: "tinder"
-      }
-    };
-    const eventHandlers = {
-      addedfile: file => notification('success', `${file.name} added`),
-      success: file =>
-        notification('success', `${file.name} successfully uploaded`),
-      error: error => notification('error', 'Server is not set in the demo'),
-    };
-
     const { rowStyle, colStyle, gutter } = basicStyle;
 
     return (
       <LayoutWrapper>
-        <PageHeader>Import</PageHeader>
+        <PageHeader>Analytics</PageHeader>
         <Row style={rowStyle} gutter={0} justify="start">
           <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
             {CARD_WIDGET.map((widget, idx) => (
@@ -94,12 +57,12 @@ export default class extends Component {
           </Col>
           <Col lg={18} md={12} sm={12} xs={24} style={colStyle}>
           <IsoWidgetsWrapper>
-            <Box style={{height: 448}} title={configs.impressionsLineChart.header}>
+            <Box style={{height: 448}} title="Connections per Month">
               <ContentHolder>
-                <div id={configs.impressionsLineChart.parentId} />
+                <TotalConnectionsPerMonth />
               </ContentHolder>
             </Box>
-            </IsoWidgetsWrapper>
+          </IsoWidgetsWrapper>
           </Col>
         </Row>
       </LayoutWrapper>

src/containers/LinkedIn/Components/TotalConnectionsPerMonth/TotalConnectionsPerMonth.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Line } from 'react-chartjs-2';
 import { data, options } from './config';
 
-export default class TotalSongsByDayLine extends Component {
+export default class TotalConnectionsPerMonth extends Component {
   render() {
     return <Line data={data} height={90} />;
   }

src/containers/LinkedIn/Components/TotalConnectionsPerMonth/config.js

@@ -5,61 +5,39 @@ import ConnectionData from '../../Data/Connections.csv';
 //Process Data
 var dates = [];
 var totalConnectionsPerMonth = [];
-
-function csvJSON(csv){
-
-  var lines=csv.split("\n");
-
-  var result = [];
-
-  // NOTE: If your columns contain commas in their values, you'll need
-  // to deal with those before doing the next step 
-  // (you might convert them to &&& or something, then covert them back later)
-  // jsfiddle showing the issue https://jsfiddle.net/
-  var headers=lines[0].split(",");
-
-  for(var i=1;i<lines.length;i++){
-
-      var obj = {};
-      var currentline=lines[i].split(",");
-
-      for(var j=0;j<headers.length;j++){
-          obj[headers[j]] = currentline[j];
-      }
-
-      result.push(obj);
-
-  }
-
-  //return result; //JavaScript object
-  return JSON.stringify(result); //JSON
+function csvJSON(csvInput){
+  let csvToJson = require('convert-csv-to-json');
+  csvToJson.fieldDelimiter(',');
+  return csvToJson.getJsonFromCsv(csvInput);
 }
 
-csvJSON(ConnectionData).forEach(function(connection) {
-    let stri = (connection.endTime).split(' ');
+let connections = csvJSON(ConnectionData);
+
+connections.forEach(function(connection) {
+    let stri = (connection.FirstName).split(' ');
 
-    if (stri[0] in totalSongsPerDay)
+    if (stri[0] in totalConnectionsPerMonth)
     {
-        totalSongsPerDay[stri[0]] += 1;
+        totalConnectionsPerMonth[stri[0]] += 1;
     }
     else
     {
-        totalSongsPerDay[stri[0]] = 1;
+        totalConnectionsPerMonth[stri[0]] = 1;
     }
     
 });
-console.log(totalSongsPerDay);
-dates = Object.keys(totalSongsPerDay);
-var totalSongs = Object.values(totalSongsPerDay);
+console.log(totalConnectionsPerMonth);
+dates = Object.keys(totalConnectionsPerMonth);
+var totalConnections = Object.values(totalConnectionsPerMonth);
 
 dates.reverse();
-totalSongs.reverse();
+totalConnections.reverse();
 
 const data = {
     labels: dates,
     datasets: [
       {
-        label: '# of Songs',
+        label: '# of Connections',
         lineTension: 0.1,
         backgroundColor: 'rgba(252,48,120,0.2)',
         borderColor: 'rgba(252,48,120,1)',
@@ -68,7 +46,7 @@ const data = {
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
         pointHitRadius: 10,
-        data: totalSongs,
+        data: totalConnections,
       }
     ],
   };

src/containers/LinkedIn/Data.js

+import React, { Component } from 'react';
+import { Row, Col } from 'antd';
+
+import PageHeader from '@imd/components/utility/pageHeader';
+import Box from '@imd/components/utility/box';
+import LayoutWrapper from '@imd/components/utility/layoutWrapper';
+import ContentHolder from '@imd/components/utility/contentHolder';
+
+import basicStyle from '@imd/assets/styles/constants';
+import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
+import TotalConnectionsPerMonth from './Components/TotalConnectionsPerMonth/TotalConnectionsPerMonth';
+import CardWidget from '@imd/containers/Widgets/Card/CardWidget';
+import ConnectionData from './Data/Connections.csv';
+
+
+function csvJSON(csvInput){
+  let csvToJson = require('convert-csv-to-json');
+  csvToJson.fieldDelimiter(',');
+  let json = csvToJson.getJsonFromCsv(csvInput);
+  for(let i=0; i<json.length;i++){
+    console.log(json[i]);
+  }
+}
+
+export default class extends Component {
+
+  render() {
+
+    let connections = csvJSON(ConnectionData);
+
+    const { rowStyle, colStyle, gutter } = basicStyle;
+
+    return (
+      <LayoutWrapper>
+        <PageHeader>Data</PageHeader>
+
+        {connections.map((cnxn, idx) => (
+            <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
+                <Box>
+                    <h1>{cnxn.FirstName} {cnxn.LastName}</h1>
+                    <div>Date Connected: {cnxn.ConnectedOn}</div>
+                </Box>
+            </Col>
+         ))}
+      </LayoutWrapper>
+    );
+  };
+}
\ No newline at end of file