feat: #171 developer installed app graph

reapit · Feb 7, 2020 · 124365b · 124365b
1 parent f4546ae
commit 124365b
Show file tree

Hide file tree

Showing 17 changed files with 1,290 additions and 597 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "little-loader": "^0.2.0",
     "localforage": "^1.7.3",
     "lodash.merge": "^4.6.2",
+    "lodash.orderby": "^4.6.0",
     "papaparse": "^5.1.1",
     "pell": "^1.0.6",
     "prop-types": "^15.7.2",

diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap
@@ -10,6 +10,41 @@ exports[`AnalyticsPage should match snapshot 1`] = `
       Dashboard
     </Component>
     <hr />
+    <Component
+      isMultiLine={true}
+    >
+      <Component>
+        <DeveloperInstallationsChart
+          data={
+            Array [
+              Object {
+                "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+                "appName": undefined,
+                "client": "DXX",
+                "created": "2019-12-03T05:33:20",
+                "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+                "links": Array [
+                  Object {
+                    "action": "GET",
+                    "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+                    "rel": "self",
+                  },
+                  Object {
+                    "action": "GET",
+                    "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+                    "rel": "app",
+                  },
+                ],
+                "status": "Active",
+              },
+            ]
+          }
+        />
+      </Component>
+      <Component>
+        <DeveloperTrafficChart />
+      </Component>
+    </Component>
     <Component
       developer={
         Object {
@@ -100,6 +135,30 @@ exports[`AnalyticsPage should match snapshot 1`] = `
           "loading": false,
         }
       }
+      installedApps={
+        Array [
+          Object {
+            "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+            "appName": undefined,
+            "client": "DXX",
+            "created": "2019-12-03T05:33:20",
+            "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+            "links": Array [
+              Object {
+                "action": "GET",
+                "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+                "rel": "self",
+              },
+              Object {
+                "action": "GET",
+                "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+                "rel": "app",
+              },
+            ],
+            "status": "Active",
+          },
+        ]
+      }
     />
   </Component>
 </Connect(ErrorBoundary)>
@@ -161,12 +220,52 @@ exports[`InstallationTable should match snapshot 1`] = `
     }
     data={
       Array [
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c3",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-02-03T01:49:57",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f3",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c2",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f2",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
         Object {
           "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
           "appName": undefined,
           "client": "DXX",
-          "created": "2019-12-03T05:33:20",
-          "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f1",
           "links": Array [
             Object {
               "action": "GET",
@@ -229,12 +328,52 @@ exports[`InstallationTable should match with null developerData 1`] = `
     }
     data={
       Array [
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c3",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-02-03T01:49:57",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f3",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c2",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f2",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
         Object {
           "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
           "appName": undefined,
           "client": "DXX",
-          "created": "2019-12-03T05:33:20",
-          "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f1",
           "links": Array [
             Object {
               "action": "GET",
@@ -316,7 +455,70 @@ exports[`InstallationTable should match with null installationsAppData 1`] = `
         },
       ]
     }
-    data={Array []}
+    data={
+      Array [
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c3",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-02-03T01:49:57",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f3",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c2",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f2",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
+        Object {
+          "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+          "appName": undefined,
+          "client": "DXX",
+          "created": "2020-01-31T12:57:12",
+          "id": "b3c2f644-3241-4298-b320-b0398ff492f1",
+          "links": Array [
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+              "rel": "self",
+            },
+            Object {
+              "action": "GET",
+              "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+              "rel": "app",
+            },
+          ],
+          "status": "Active",
+        },
+      ]
+    }
     loading={false}
     scrollable={true}
   />

diff --git a/packages/marketplace/src/components/pages/__tests__/analytics.tsx b/packages/marketplace/src/components/pages/__tests__/analytics.tsx
@@ -18,6 +18,7 @@ import { appsDataStub } from '@/sagas/__stubs__/apps'
 import { ReduxState } from '@/types/core'
 import { DeveloperState } from '@/reducers/developer'
 import { AppInstallationsState } from '@/reducers/app-installations'
+import { installedAppsStub } from '@/components/ui/__stubs__/developer-installations-chart-data'
 
 jest.mock('@reapit/elements', () => ({
   ...jest.requireActual('@reapit/elements'),
@@ -58,21 +59,37 @@ describe('mapStateToProps', () => {
 })
 
 describe('InstallationTable', () => {
+  const installedApps = handleMapAppNameToInstallation(installedAppsStub, appsDataStub.data.data || [])()
+
   it('should match snapshot', () => {
-    expect(shallow(<InstallationTable installations={installations} developer={developer} />)).toMatchSnapshot()
+    expect(
+      shallow(<InstallationTable installedApps={installedApps} installations={installations} developer={developer} />),
+    ).toMatchSnapshot()
   })
 
   it('should match with null installationsAppData', () => {
     const installationsWithoutData = { ...installations, installationsAppData: null }
     expect(
-      shallow(<InstallationTable installations={installationsWithoutData} developer={developer} />),
+      shallow(
+        <InstallationTable
+          installedApps={installedApps}
+          installations={installationsWithoutData}
+          developer={developer}
+        />,
+      ),
     ).toMatchSnapshot()
   })
 
   it('should match with null developerData', () => {
     const developerWithoutData = { ...developer, developerData: null }
     expect(
-      shallow(<InstallationTable installations={installations} developer={developerWithoutData} />),
+      shallow(
+        <InstallationTable
+          installedApps={installedApps}
+          installations={installations}
+          developer={developerWithoutData}
+        />,
+      ),
     ).toMatchSnapshot()
   })
 })

diff --git a/packages/marketplace/src/components/pages/analytics.tsx b/packages/marketplace/src/components/pages/analytics.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import { Table, FlexContainerBasic, H3, H4, Loader, toLocalTime, Pagination } from '@reapit/elements'
+import { Table, FlexContainerBasic, H3, H4, Loader, toLocalTime, Pagination, Grid, GridItem } from '@reapit/elements'
+import DeveloperInstallationsChart from '@/components/ui/developer-installations-chart'
+import DeveloperTrafficChart from '@/components/ui/developer-traffic-chart'
 import { connect } from 'react-redux'
 import { ReduxState } from '@/types/core'
 import { InstallationModel, AppSummaryModel } from '@reapit/foundations-ts-definitions'
@@ -130,24 +132,21 @@ export const handleCountCurrentInstallationForEachApp = (
 
 export const handleSetPageNumber = setPageNumber => (pageNumber: number) => setPageNumber(pageNumber)
 
-export const InstallationTable: React.FC<{ installations: AppInstallationsState; developer: DeveloperState }> = ({
-  installations,
-  developer,
-}) => {
+export const InstallationTable: React.FC<{
+  installedApps: InstallationModelWithAppName[]
+  installations: AppInstallationsState
+  developer: DeveloperState
+}> = ({ installedApps, installations, developer }) => {
   const [pageNumber, setPageNumber] = React.useState<number>(1)
 
   const installationAppDataArray = installations.installationsAppData?.data ?? []
   const developerDataArray = developer.developerData?.data?.data ?? []
 
-  const installationAppDataArrayWithName = React.useMemo(
-    handleMapAppNameToInstallation(installationAppDataArray, developerDataArray),
-    [installationAppDataArray, developerDataArray],
-  )
-  const appCountEntries = React.useMemo(
-    handleCountCurrentInstallationForEachApp(installationAppDataArrayWithName, developerDataArray),
-    [installationAppDataArrayWithName, developerDataArray],
-  )
-  const memoizedData = React.useMemo(handleUseMemoData(installationAppDataArrayWithName, pageNumber), [
+  const appCountEntries = React.useMemo(handleCountCurrentInstallationForEachApp(installedApps, developerDataArray), [
+    installedApps,
+    developerDataArray,
+  ])
+  const memoizedData = React.useMemo(handleUseMemoData(installedApps, pageNumber), [
     installationAppDataArray,
     pageNumber,
   ])
@@ -179,12 +178,32 @@ export const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ installations, dev
     return <Loader />
   }
 
+  const installationAppDataArray = installations.installationsAppData?.data ?? []
+  const developerDataArray = developer.developerData?.data?.data ?? []
+
+  const installationAppDataArrayWithName = React.useMemo(
+    handleMapAppNameToInstallation(installationAppDataArray, developerDataArray),
+    [installationAppDataArray, developerDataArray],
+  )
+
   return (
     <ErrorBoundary>
       <FlexContainerBasic hasPadding flexColumn className={styles.wrapAnalytics}>
         <H3>Dashboard</H3>
         <hr className={styles.hr} />
-        <InstallationTable installations={installations} developer={developer} />
+        <Grid isMultiLine>
+          <GridItem>
+            <DeveloperInstallationsChart data={installationAppDataArrayWithName} />
+          </GridItem>
+          <GridItem>
+            <DeveloperTrafficChart />
+          </GridItem>
+        </Grid>
+        <InstallationTable
+          installedApps={installationAppDataArrayWithName}
+          installations={installations}
+          developer={developer}
+        />
       </FlexContainerBasic>
     </ErrorBoundary>
   )