feat: #171 developer installed app graph (#190)

* feat: #171 developer installed app graph * feat: #171 update test cases * feat: #171 correct wording Co-authored-by: Cuong Vu <[email protected]>
reapit · Feb 7, 2020 · 4be972d · 4be972d
1 parent b615e13
commit 4be972d
Show file tree

Hide file tree

Showing 17 changed files with 1,175 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)>
@@ -113,7 +172,7 @@ exports[`InstallationTable should match snapshot 1`] = `
     Installations
   </Component>
   <p>
-    The installations table below shows the individuals per client with a total number of installations per app
+    The installations table below shows the individual installations per client with a total number of installations per app
   </p>
   <div>
     <p
@@ -202,7 +261,7 @@ exports[`InstallationTable should match with null developerData 1`] = `
     Installations
   </Component>
   <p>
-    The installations table below shows the individuals per client with a total number of installations per app
+    The installations table below shows the individual installations per client with a total number of installations per app
   </p>
   <div />
   <Component
@@ -270,7 +329,7 @@ exports[`InstallationTable should match with null installationsAppData 1`] = `
     Installations
   </Component>
   <p>
-    The installations table below shows the individuals per client with a total number of installations per app
+    The installations table below shows the individual installations per client with a total number of installations per app
   </p>
   <div>
     <p
@@ -316,7 +375,30 @@ exports[`InstallationTable should match with null installationsAppData 1`] = `
         },
       ]
     }
-    data={Array []}
+    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",
+        },
+      ]
+    }
     loading={false}
     scrollable={true}
   />

diff --git a/packages/marketplace/src/components/pages/__tests__/analytics.tsx b/packages/marketplace/src/components/pages/__tests__/analytics.tsx
@@ -58,21 +58,40 @@ describe('mapStateToProps', () => {
 })
 
 describe('InstallationTable', () => {
+  const installedApps = handleMapAppNameToInstallation(
+    installations.installationsAppData?.data || [],
+    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,31 +132,31 @@ 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,
   ])
   return (
     <div>
       <H4>Installations</H4>
-      <p>The installations table below shows the individuals per client with a total number of installations per app</p>
+      <p>
+        The installations table below shows the individual installations per client with a total number of installations
+        per app
+      </p>
       <div className={styles.totalCount}>
         {Object.entries(appCountEntries).map(([appName, count]) => (
           <p key={appName}>
@@ -179,12 +181,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>
   )

diff --git a/packages/marketplace/src/components/ui/__stubs__/developer-installations-chart-data.ts b/packages/marketplace/src/components/ui/__stubs__/developer-installations-chart-data.ts
@@ -0,0 +1,64 @@
+import { InstallationModelWithAppName } from '@/components/pages/analytics'
+
+export const installedAppsStub: Array<InstallationModelWithAppName> = [
+  {
+    id: 'b3c2f644-3241-4298-b320-b0398ff492f1',
+    appId: '062a376c-f5a3-46a0-a64b-e4bc6e5af2c1',
+    created: '2020-01-31T12:57:12',
+    client: 'DXX',
+    status: 'Active',
+    appName: 'App 1',
+    links: [
+      {
+        rel: 'self',
+        href: 'http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9',
+        action: 'GET',
+      },
+      {
+        rel: 'app',
+        href: 'http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1',
+        action: 'GET',
+      },
+    ],
+  },
+  {
+    id: 'b3c2f644-3241-4298-b320-b0398ff492f2',
+    appId: '062a376c-f5a3-46a0-a64b-e4bc6e5af2c2',
+    created: '2020-01-31T12:57:12',
+    client: 'DXX',
+    appName: 'App 2',
+    status: 'Active',
+    links: [
+      {
+        rel: 'self',
+        href: 'http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9',
+        action: 'GET',
+      },
+      {
+        rel: 'app',
+        href: 'http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1',
+        action: 'GET',
+      },
+    ],
+  },
+  {
+    id: 'b3c2f644-3241-4298-b320-b0398ff492f3',
+    appId: '062a376c-f5a3-46a0-a64b-e4bc6e5af2c3',
+    created: '2020-02-03T01:49:57',
+    client: 'DXX',
+    appName: 'App 3',
+    status: 'Active',
+    links: [
+      {
+        rel: 'self',
+        href: 'http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9',
+        action: 'GET',
+      },
+      {
+        rel: 'app',
+        href: 'http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1',
+        action: 'GET',
+      },
+    ],
+  },
+]
diff --git a/...ketplace/src/components/ui/__tests__/__snapshots__/developer-installations-chart.tsx.snap b/...ketplace/src/components/ui/__tests__/__snapshots__/developer-installations-chart.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeveloperInstallationsChart should match a snapshot 1`] = `
+<div>
+  <Component>
+    Installations
+  </Component>
+  <Line
+    data={
+      Object {
+        "datasets": Array [
+          Object {
+            "backgroundColor": "rgba(75,192,192,0.4)",
+            "borderCapStyle": "butt",
+            "borderColor": "rgba(75,192,192,1)",
+            "borderDash": Array [],
+            "borderDashOffset": 0,
+            "borderJoinStyle": "miter",
+            "data": Array [
+              2,
+              0,
+              0,
+              1,
+            ],
+            "fill": false,
+            "lineTension": 0.1,
+            "pointBackgroundColor": "#fff",
+            "pointBorderColor": "rgba(75,192,192,1)",
+            "pointBorderWidth": 1,
+            "pointHitRadius": 10,
+            "pointHoverBackgroundColor": "rgba(75,192,192,1)",
+            "pointHoverBorderColor": "rgba(220,220,220,1)",
+            "pointHoverBorderWidth": 2,
+            "pointHoverRadius": 5,
+            "pointRadius": 1,
+          },
+        ],
+        "labels": Array [
+          "31/01/2020",
+          "01/02/2020",
+          "02/02/2020",
+          "03/02/2020",
+        ],
+      }
+    }
+    options={
+      Object {
+        "legend": null,
+        "tooltips": Object {
+          "callbacks": Object {
+            "label": [Function],
+          },
+          "mode": "label",
+        },
+      }
+    }
+  />
+</div>
+`;