AB#387: Add bar chart to rollup page

client/src/pages/rollup/Show.js

@@ -13,6 +13,7 @@ import {
 import API from "api"
 import "components/BlueprintOverrides.css"
 import ButtonToggleGroup from "components/ButtonToggleGroup"
+import DailyRollupChart from "components/DailyRollupChart"
 import * as FieldHelper from "components/FieldHelper"
 import Fieldset from "components/Fieldset"
 import Messages from "components/Messages"
@@ -38,13 +39,39 @@ import { Field, Form, Formik } from "formik"
 import { Report } from "models"
 import moment from "moment"
 import PropTypes from "prop-types"
-import React, { useState } from "react"
+import React, { useMemo, useState } from "react"
 import { Button, FormText, Modal } from "react-bootstrap"
 import ContainerDimensions from "react-container-dimensions"
 import { connect } from "react-redux"
 import Settings from "settings"
 import utils from "utils"
 
+const GQL_ROLLUP_GRAPH = gql`
+  query(
+    $startDate: Instant!
+    $endDate: Instant!
+    $principalOrganizationUuid: String
+    $advisorOrganizationUuid: String
+    $orgType: OrganizationType
+  ) {
+    rollupGraph(
+      startDate: $startDate
+      endDate: $endDate
+      principalOrganizationUuid: $principalOrganizationUuid
+      advisorOrganizationUuid: $advisorOrganizationUuid
+      orgType: $orgType
+    ) {
+      org {
+        uuid
+        shortName
+        type
+      }
+      published
+      cancelled
+    }
+  }
+`
+
 const GQL_SHOW_ROLLUP_EMAIL = gql`
   query (
     $startDate: Instant!
@@ -82,6 +109,116 @@ const GQL_EMAIL_ROLLUP = gql`
   }
 `
 
+const Chart = ({
+  pageDispatchers,
+  rollupStart,
+  rollupEnd,
+  orgUuid,
+  setFocusedOrg
+}) => {
+  const variables = getVariables()
+  const { loading, error, data } = API.useApiQuery(GQL_ROLLUP_GRAPH, variables)
+  const { done, result } = useBoilerplate({
+    loading,
+    error,
+    pageDispatchers
+  })
+  const graphData = useMemo(() => {
+    if (!data) {
+      return []
+    }
+    const pinnedOrgs = Settings.pinned_ORGs
+    return data.rollupGraph
+      .map(d => {
+        d.org = d.org || { uuid: "-1", shortName: "Other" }
+        return d
+      })
+      .sort((a, b) => {
+        const aIndex = pinnedOrgs.indexOf(a.org.shortName)
+        const bIndex = pinnedOrgs.indexOf(b.org.shortName)
+        if (aIndex < 0) {
+          const nameOrder = a.org.shortName.localeCompare(b.org.shortName)
+          return bIndex < 0
+            ? nameOrder === 0
+              ? a.org.uuid - b.org.uuid
+              : nameOrder
+            : 1
+        } else {
+          return bIndex < 0 ? -1 : aIndex - bIndex
+        }
+      })
+  }, [data])
+  if (done) {
+    return result
+  }
+
+  const CHART_ID = "reports_by_organization"
+  const barColors = {
+    cancelled: "#ec971f",
+    published: "#75eb75"
+  }
+  const legendCss = {
+    width: "14px",
+    height: "14px",
+    display: "inline-block"
+  }
+
+  return (
+    <div className="scrollable-y">
+      <ContainerDimensions>
+        {({ width }) => (
+          <DailyRollupChart
+            width={width}
+            chartId={CHART_ID}
+            data={graphData}
+            onBarClick={setFocusedOrg}
+            tooltip={d => `
+              <h4>${d.org.shortName}</h4>
+              <p>Published: ${d.published}</p>
+              <p>Cancelled: ${d.cancelled}</p>
+              <p>Click to view details</p>
+            `}
+            barColors={barColors}
+          />
+        )}
+      </ContainerDimensions>
+
+      <div className="graph-legend">
+        <div style={{ ...legendCss, background: barColors.published }} />{" "}
+        Published reports:&nbsp;
+        <strong>
+          {graphData.reduce((acc, org) => acc + org.published, 0)}
+        </strong>
+      </div>
+      <div className="graph-legend">
+        <div style={{ ...legendCss, background: barColors.cancelled }} />{" "}
+        Cancelled engagements:&nbsp;
+        <strong>
+          {graphData.reduce((acc, org) => acc + org.cancelled, 0)}
+        </strong>
+      </div>
+    </div>
+  )
+
+  function getVariables() {
+    const variables = {
+      startDate: rollupStart,
+      endDate: rollupEnd,
+      advisorOrganizationUuid: orgUuid
+      // TODO: We cannot read orgType from the searchQuery
+    }
+    return variables
+  }
+}
+
+Chart.propTypes = {
+  pageDispatchers: PageDispatchersPropType,
+  rollupStart: PropTypes.object,
+  rollupEnd: PropTypes.object,
+  orgUuid: PropTypes.string,
+  setFocusedOrg: PropTypes.func
+}
+
 const REPORT_SEARCH_PROPS = Object.assign({}, DEFAULT_SEARCH_PROPS, {
   onSearchGoToSearchPage: false,
   searchObjectTypes: [SEARCH_OBJECT_TYPES.REPORTS]
@@ -144,6 +281,7 @@ const RollupShow = ({ pageDispatchers, searchQuery, setSearchQuery }) => {
   }
   const startDate = moment(queryParams.releasedAtStart)
   const endDate = moment(queryParams.releasedAtEnd)
+  const orgUuid = queryParams.orgUuid
   useBoilerplate({
     pageProps: DEFAULT_PAGE_PROPS,
     searchProps: REPORT_SEARCH_PROPS,
@@ -157,6 +295,12 @@ const RollupShow = ({ pageDispatchers, searchQuery, setSearchQuery }) => {
       title: "Reports by organization",
       renderer: renderReportCollection
     },
+    {
+      id: "rbdow-chart",
+      icons: [IconNames.GROUPED_BAR_CHART],
+      title: "Chart by organization",
+      renderer: renderChart
+    },
     {
       id: "rbdow-map",
       icons: [IconNames.MAP],
@@ -268,6 +412,21 @@ const RollupShow = ({ pageDispatchers, searchQuery, setSearchQuery }) => {
     </div>
   )
 
+  function renderChart(id) {
+    return (
+      <Chart
+        pageDispatchers={pageDispatchers}
+        rollupStart={startDate}
+        rollupEnd={endDate}
+        orgUuid={orgUuid}
+        setFocusedOrg={setFocusedOrg}
+        // TODO: orgType cannot be set using the search query.
+        // We need to find a way to set it or remove from rollupGraph query.
+        orgType={""}
+      />
+    )
+  }
+
   function renderReportCollection(id) {
     return <Collection queryParams={queryParams} />
   }
@@ -330,6 +489,20 @@ const RollupShow = ({ pageDispatchers, searchQuery, setSearchQuery }) => {
     setPeriod(nextPeriod)
   }
 
+  function setFocusedOrg(org) {
+    const newQueryParams = {
+      ...queryParams,
+      orgUuid: org.uuid,
+      orgRecurseStrategy: "CHILDREN",
+      orgType: org.type
+    }
+    deserializeQueryParams(
+      REPORT_SEARCH_PROPS.searchObjectTypes[0],
+      newQueryParams,
+      deserializeCallback
+    )
+  }
+
   function deserializeCallback(objectType, filters, text) {
     // We update the Redux state
     setSearchQuery({