Waitp 1316 Chart table

packages/tupaia-web/package.json

@@ -37,6 +37,7 @@
     "@tupaia/ui-chart-components": "1.0.0",
     "@tupaia/ui-components": "1.0.0",
     "@tupaia/ui-map-components": "1.0.0",
+    "@tupaia/utils": "1.0.0",
     "axios": "^1.4.0",
     "moment": "^2.29.1",
     "react": "^16.13.1",

packages/tupaia-web/src/api/queries/useDashboards.ts

@@ -12,7 +12,7 @@ export const useDashboards = (
   entityCode?: EntityCode,
   dashboardName?: DashboardName,
 ) => {
-  const { data: dashboards = [], isLoading } = useQuery(
+  const { data = [], isLoading } = useQuery(
     ['dashboards', projectCode, entityCode],
     (): Promise<DashboardsResponse[]> =>
       get('dashboards', {
@@ -23,12 +23,11 @@ export const useDashboards = (
 
   let activeDashboard = null;
 
-  if (dashboards.length > 0 && dashboardName) {
+  if (data?.length > 0 && dashboardName) {
     activeDashboard =
-      dashboards.find(
-        (dashboard: DashboardsResponse) => dashboard.dashboardName === dashboardName,
-      ) || dashboards[0];
+      data?.find((dashboard: DashboardsResponse) => dashboard.dashboardName === dashboardName) ||
+      data[0];
   }
 
-  return { dashboards, activeDashboard, isLoading };
+  return { dashboards: data, activeDashboard, isLoading };
 };

packages/tupaia-web/src/features/Chart.tsx

@@ -3,51 +3,130 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import styled from 'styled-components';
-import { Chart as ChartComponent, ViewContent } from '@tupaia/ui-chart-components';
+import { Chart as ChartComponent, ChartTable, ViewContent } from '@tupaia/ui-chart-components';
+import { BarChart, GridOn } from '@material-ui/icons';
+import { Tabs, darken, lighten } from '@material-ui/core';
+import { Tab } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
 
-const Wrapper = styled.div<{
-  $isEnlarged: boolean;
-  $hasData: boolean;
-}>`
+const Wrapper = styled.div`
   display: flex;
   position: relative;
   align-content: stretch;
-  -webkit-box-align: stretch;
   align-items: stretch;
-  height: ${({ $isEnlarged, $hasData }) => {
-    if (!$hasData) return 'auto';
-    return $isEnlarged ? '22.5rem' : '14rem';
-  }};
   flex-direction: column;
   .recharts-responsive-container {
     min-width: 0px;
   }
   .recharts-wrapper {
     font-size: 1rem !important; // this is to make sure the labels on the charts are relative to the base font size
   }
-  // Make the charts conform to the parent container's size
-  .recharts-wrapper,
-  .recharts-wrapper svg {
-    height: 100% !important;
-    width: 100%;
-  }
   li.recharts-legend-item {
     white-space: nowrap; // ensure there are no line breaks on the export legends
   }
 `;
 
+const TabsWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  .MuiTabs-indicator {
+    display: none;
+  }
+`;
+
+const TabsGroup = styled(Tabs)`
+  border: 1px solid
+    ${({ theme }) => {
+      const {
+        text: { primary },
+        type,
+      } = theme.palette;
+      // This is to give the illusion of a thinner border, by blending it into the background more
+      return type === 'light' ? lighten(primary, 0.5) : darken(primary, 0.6);
+    }};
+  border-radius: 5px;
+  min-height: 0;
+`;
+
+const TabButton = styled(Tab)`
+  min-width: 0;
+  padding: 0.3rem;
+  min-height: 0;
+  svg {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+  &[aria-selected='true'] {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+
+const ContentWrapper = styled.div<{
+  $isEnlarged: boolean;
+}>`
+  padding: ${({ $isEnlarged }) => ($isEnlarged ? '1rem 0' : 'initial')};
+`;
+
 interface ChartProps {
   viewContent: ViewContent;
   isEnlarged?: boolean;
 }
 
+const DISPLAY_TYPE_VIEWS = [
+  {
+    value: 'chart',
+    Icon: BarChart,
+    label: 'View chart',
+    display: ChartComponent,
+  },
+  {
+    value: 'table',
+    Icon: GridOn,
+    label: 'View table',
+    display: ChartTable,
+  },
+];
+
 export const Chart = ({ viewContent, isEnlarged = false }: ChartProps) => {
-  const hasData = viewContent.data && viewContent.data.length > 0 ? true : false;
+  const [displayType, setDisplayType] = useState(DISPLAY_TYPE_VIEWS[0].value);
+  const handleChangeDisplayType = (_event: ChangeEvent<{}>, value: 'chart' | 'table') => {
+    setDisplayType(value);
+  };
+
+  const availableDisplayTypes = isEnlarged ? DISPLAY_TYPE_VIEWS : [DISPLAY_TYPE_VIEWS[0]];
+
   return (
-    <Wrapper $isEnlarged={isEnlarged} $hasData={hasData}>
-      <ChartComponent viewContent={viewContent} isEnlarged={isEnlarged} isExporting={false} />
+    <Wrapper>
+      <TabContext value={displayType}>
+        {isEnlarged && (
+          <TabsWrapper>
+            <TabsGroup
+              value={displayType}
+              onChange={handleChangeDisplayType}
+              variant="standard"
+              aria-label="Toggle display type"
+            >
+              {DISPLAY_TYPE_VIEWS.map(({ value, Icon, label }) => (
+                <TabButton key={value} value={value} icon={<Icon />} aria-label={label} />
+              ))}
+            </TabsGroup>
+          </TabsWrapper>
+        )}
+        {availableDisplayTypes.map(({ value, display: Content }) => (
+          <ContentWrapper
+            key={value}
+            value={value}
+            as={isEnlarged ? TabPanel : 'div'}
+            $isEnlarged={isEnlarged}
+          >
+            <Content viewContent={viewContent} isEnlarged={isEnlarged} isExporting={false} />
+          </ContentWrapper>
+        ))}
+      </TabContext>
     </Wrapper>
   );
 };

packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx

@@ -8,12 +8,12 @@ import styled from 'styled-components';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { Typography } from '@material-ui/core';
 import { FlexColumn } from '@tupaia/ui-components';
-import { DateRangePicker, Modal } from '../../components';
 import { URL_SEARCH_PARAMS } from '../../constants';
 import { useDashboards } from '../../api/queries';
 import { DashboardItemContent } from './DashboardItemContent';
 import { useDateRanges } from '../../utils';
 import { useReport } from '../../api/queries/useReport';
+import { DateRangePicker, Modal } from '../../components';
 
 const Wrapper = styled.div<{
   $hasBigData?: boolean;
@@ -76,7 +76,7 @@ export const EnlargedDashboardItem = () => {
     onResetDate,
   } = useDateRanges(URL_SEARCH_PARAMS.REPORT_PERIOD, currentReport);
 
-  const { data: reportData, isLoading: isLoadingReportData, error, isError, refetch } = useReport(
+  const { data: reportData, isLoading: isLoadingReportData, error, refetch } = useReport(
     reportCode,
     {
       projectCode,
@@ -107,9 +107,11 @@ export const EnlargedDashboardItem = () => {
     currentReport?.entityHeader || activeDashboard?.entityName
   }`;
 
+  const { type } = currentReport || {};
+
   return (
     <Modal isOpen onClose={handleCloseModal}>
-      <Wrapper $hasBigData={reportData?.data?.length > 20 || currentReport?.type === 'matrix'}>
+      <Wrapper $hasBigData={reportData?.data?.length > 20 || type === 'matrix'}>
         <Container>
           <TitleWrapper>
             {currentReport?.name && <Title>{titleText}</Title>}
@@ -127,12 +129,12 @@ export const EnlargedDashboardItem = () => {
             )}
           </TitleWrapper>
           <DashboardItemContent
-            viewContent={viewContent}
             isLoading={isLoadingReportData}
-            error={isError ? error : null}
+            error={error}
+            viewContent={viewContent}
             onRetryFetch={refetch}
-            isEnlarged
             isExpandable={false}
+            isEnlarged
           />
         </Container>
       </Wrapper>

packages/ui-components/src/components/DateRangePicker/DateRangePicker.tsx

@@ -60,7 +60,6 @@ const Button = styled(MuiButton)`
 const Label = styled(Typography)`
   padding-left: 1rem;
   padding-right: 1rem;
-  min-width: 8rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,6 +70,7 @@ const Label = styled(Typography)`
   cursor: auto;
   button + & {
     border: 1px solid ${props => props.theme.palette.grey['400']};
+    min-width: 8rem;
   }
   &.MuiButtonGroup-groupedOutlinedHorizontal {
     margin-left: 0;

yarn.lock

@@ -10599,6 +10599,7 @@ __metadata:
     "@tupaia/ui-chart-components": 1.0.0
     "@tupaia/ui-components": 1.0.0
     "@tupaia/ui-map-components": 1.0.0
+    "@tupaia/utils": 1.0.0
     "@types/mapbox__polyline": ^1.0.2
     "@types/material-ui": ^0.21.12
     "@types/react": 16.8.6