From 836fe4d94ccb9f998f395fae2ecabc1248bedff1 Mon Sep 17 00:00:00 2001 From: acdunham Date: Mon, 10 Jul 2023 15:55:13 +1200 Subject: [PATCH 1/7] WAITP-1216: tab buttons --- packages/tupaia-web/package.json | 1 + .../src/api/queries/useDashboards.ts | 11 +-- .../tupaia-web/src/constants/constants.ts | 2 + packages/tupaia-web/src/features/Chart.tsx | 3 +- .../DashboardItem/EnlargedDashboardItem.tsx | 91 +++++++++++++++++-- .../tupaia-web/src/features/FlippaTable.tsx | 15 +++ packages/utils/src/hexToRgba.js | 15 +++ packages/utils/src/index.js | 1 + yarn.lock | 1 + 9 files changed, 123 insertions(+), 17 deletions(-) create mode 100644 packages/tupaia-web/src/features/FlippaTable.tsx create mode 100644 packages/utils/src/hexToRgba.js diff --git a/packages/tupaia-web/package.json b/packages/tupaia-web/package.json index eca776295b..9c896aa250 100644 --- a/packages/tupaia-web/package.json +++ b/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", diff --git a/packages/tupaia-web/src/api/queries/useDashboards.ts b/packages/tupaia-web/src/api/queries/useDashboards.ts index ff106e3e97..933f51c140 100644 --- a/packages/tupaia-web/src/api/queries/useDashboards.ts +++ b/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 => 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 }; }; diff --git a/packages/tupaia-web/src/constants/constants.ts b/packages/tupaia-web/src/constants/constants.ts index 9b43313f16..005800c3d8 100644 --- a/packages/tupaia-web/src/constants/constants.ts +++ b/packages/tupaia-web/src/constants/constants.ts @@ -24,3 +24,5 @@ export const FORM_FIELD_VALIDATION = { }; export const MOBILE_BREAKPOINT = '900px'; + +export const ENLARGED_REPORT_CONTAINER_HEIGHT = '22.5rem'; diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 7868df1062..02f7632366 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -6,6 +6,7 @@ import React from 'react'; import styled from 'styled-components'; import { Chart as ChartComponent, ViewContent } from '@tupaia/ui-chart-components'; +import { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; const Wrapper = styled.div<{ $isEnlarged: boolean; @@ -18,7 +19,7 @@ const Wrapper = styled.div<{ align-items: stretch; height: ${({ $isEnlarged, $hasData }) => { if (!$hasData) return 'auto'; - return $isEnlarged ? '22.5rem' : '14rem'; + return $isEnlarged ? ENLARGED_REPORT_CONTAINER_HEIGHT : '14rem'; }}; flex-direction: column; .recharts-responsive-container { diff --git a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx index a254281035..cce029229d 100644 --- a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx @@ -3,17 +3,21 @@ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ -import React from 'react'; +import React, { ChangeEvent, useEffect, useState } from 'react'; import styled from 'styled-components'; import { useParams, useSearchParams } from 'react-router-dom'; -import { Typography } from '@material-ui/core'; +import { Typography, Tabs as MuiTabs, Tab as MuiTab } from '@material-ui/core'; +import { TabContext, TabPanel } from '@material-ui/lab'; +import { BarChart, GridOn } from '@material-ui/icons'; import { FlexColumn } from '@tupaia/ui-components'; +import { hexToRgba } from '@tupaia/utils'; 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 { FlippaTable } from '../FlippaTable'; const Wrapper = styled.div<{ $hasBigData?: boolean; @@ -48,10 +52,46 @@ const TitleWrapper = styled(FlexColumn)` align-items: center; `; +const TabsWrapper = styled.div` + width: 100%; + display: flex; + justify-content: flex-end; + + .MuiTabs-indicator { + display: none; + } +`; + +const Tabs = styled(MuiTabs)` + border: 1px solid ${({ theme }) => hexToRgba(theme.palette.text.primary, 0.2)}; + border-radius: 5px; + min-height: 0; +`; + +const Tab = styled(MuiTab)` + min-width: 0; + padding: 0.5rem; + min-height: 0; + svg { + width: 1.2rem; + height: 1.2rem; + } + &[aria-selected='true'] { + background-color: ${({ theme }) => theme.palette.primary.main}; + } +`; + +const ContentWrapper = styled.div``; + +enum DISPLAY_TYPES { + CHART = 'chart', + TABLE = 'table', +} /** * EnlargedDashboardItem is the dashboard item modal. It is visible when the report code in the url is equal to the report code of the item. */ export const EnlargedDashboardItem = () => { + const [displayType, setDisplayType] = useState(DISPLAY_TYPES.CHART); const { projectCode, entityCode, dashboardName } = useParams(); const [urlSearchParams, setUrlSearchParams] = useSearchParams(); const reportCode = urlSearchParams.get(URL_SEARCH_PARAMS.REPORT); @@ -89,6 +129,15 @@ export const EnlargedDashboardItem = () => { }, ); + const handleChangeDisplayType = (_event: ChangeEvent<{}>, value: DISPLAY_TYPES) => { + setDisplayType(value); + }; + + useEffect(() => { + console.log('reportCode', reportCode); + setDisplayType(DISPLAY_TYPES.CHART); + }, [reportCode]); + if (!reportCode || (!isLoadingDashboards && !currentReport)) return null; const viewContent = { @@ -107,6 +156,8 @@ export const EnlargedDashboardItem = () => { currentReport?.entityHeader || activeDashboard?.entityName }`; + const isChart = currentReport?.type === 'chart'; + return ( 20 || currentReport?.type === 'matrix'}> @@ -126,14 +177,34 @@ export const EnlargedDashboardItem = () => { /> )} - + + {isChart && ( + + + } aria-label="View chart" /> + } aria-label="View table" /> + + + )} + + + + + + + diff --git a/packages/tupaia-web/src/features/FlippaTable.tsx b/packages/tupaia-web/src/features/FlippaTable.tsx new file mode 100644 index 0000000000..f6084351d3 --- /dev/null +++ b/packages/tupaia-web/src/features/FlippaTable.tsx @@ -0,0 +1,15 @@ +/** + * Tupaia + * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd + */ + +import React from 'react'; +import styled from 'styled-components'; +import { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; + +const Wrapper = styled.div` + min-height: ${ENLARGED_REPORT_CONTAINER_HEIGHT}; // This is so that the chart is properly covered by this div, because of the way MUI Tabs work +`; +export const FlippaTable = () => { + return Hiii; +}; diff --git a/packages/utils/src/hexToRgba.js b/packages/utils/src/hexToRgba.js new file mode 100644 index 0000000000..2a8c0ee5c0 --- /dev/null +++ b/packages/utils/src/hexToRgba.js @@ -0,0 +1,15 @@ +/** + * Tupaia + * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd + */ + +export const hexToRgba = (hex, opacity) => { + let hexString = hex.replace('#', ''); + // If the hex is shortened, double up each character. This is for cases like '#fff' + const isShortened = hexString.length === 3; + if (isShortened) hexString = hexString.replace(/(.)/g, '$1$1'); + const r = parseInt(hexString.substring(0, 2), 16); + const g = parseInt(hexString.substring(2, 4), 16); + const b = parseInt(hexString.substring(4, 6), 16); + return `rgba(${r},${g},${b},${opacity})`; +}; diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js index 508ee7611e..677a26ebe8 100644 --- a/packages/utils/src/index.js +++ b/packages/utils/src/index.js @@ -42,3 +42,4 @@ export { VALUE_TYPES, formatDataValueByType } from './formatDataValueByType'; export { createClassExtendingProxy } from './proxy'; export { fetchPatiently } from './fetchPatiently'; export { oneSecondSleep, sleep } from './sleep'; +export { hexToRgba } from './hexToRgba'; diff --git a/yarn.lock b/yarn.lock index 189fbedf50..c2af95d460 100644 --- a/yarn.lock +++ b/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 From efba4581f1715f62e136c129c1e7e5531aab4f8c Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 08:25:35 +1200 Subject: [PATCH 2/7] WIP --- .../DashboardItem/EnlargedDashboardItem.tsx | 60 ++++++++++++------- .../tupaia-web/src/features/FlippaTable.tsx | 11 +++- .../src/components/ChartTable.tsx | 1 + 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx index cce029229d..91b4ea2e2c 100644 --- a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx @@ -83,15 +83,25 @@ const Tab = styled(MuiTab)` const ContentWrapper = styled.div``; -enum DISPLAY_TYPES { - CHART = 'chart', - TABLE = 'table', -} +const DISPLAY_TYPE_VIEWS = [ + { + value: 'chart', + Icon: BarChart, + label: 'View chart', + display: DashboardItemContent, + }, + { + value: 'table', + Icon: GridOn, + label: 'View table', + display: FlippaTable, + }, +]; /** * EnlargedDashboardItem is the dashboard item modal. It is visible when the report code in the url is equal to the report code of the item. */ export const EnlargedDashboardItem = () => { - const [displayType, setDisplayType] = useState(DISPLAY_TYPES.CHART); + const [displayType, setDisplayType] = useState(DISPLAY_TYPE_VIEWS[0].value); const { projectCode, entityCode, dashboardName } = useParams(); const [urlSearchParams, setUrlSearchParams] = useSearchParams(); const reportCode = urlSearchParams.get(URL_SEARCH_PARAMS.REPORT); @@ -129,13 +139,13 @@ export const EnlargedDashboardItem = () => { }, ); - const handleChangeDisplayType = (_event: ChangeEvent<{}>, value: DISPLAY_TYPES) => { + const handleChangeDisplayType = (_event: ChangeEvent<{}>, value: 'chart' | 'table') => { setDisplayType(value); }; useEffect(() => { - console.log('reportCode', reportCode); - setDisplayType(DISPLAY_TYPES.CHART); + // reset the display type to chart when the report code changes + setDisplayType(DISPLAY_TYPE_VIEWS[0].value); }, [reportCode]); if (!reportCode || (!isLoadingDashboards && !currentReport)) return null; @@ -145,6 +155,8 @@ export const EnlargedDashboardItem = () => { ...reportData, }; + console.log(viewContent); + // // On close, remove the report search param from the url const handleCloseModal = () => { urlSearchParams.delete(URL_SEARCH_PARAMS.REPORT); @@ -158,6 +170,8 @@ export const EnlargedDashboardItem = () => { const isChart = currentReport?.type === 'chart'; + const availableDisplayTypes = isChart ? DISPLAY_TYPE_VIEWS : [DISPLAY_TYPE_VIEWS[0]]; + return ( 20 || currentReport?.type === 'matrix'}> @@ -186,24 +200,24 @@ export const EnlargedDashboardItem = () => { variant="standard" aria-label="Toggle display type" > - } aria-label="View chart" /> - } aria-label="View table" /> + {DISPLAY_TYPE_VIEWS.map(({ value, Icon, label }) => ( + } aria-label={label} /> + ))} )} - - - - - - + {availableDisplayTypes.map(({ value, display: Content }) => ( + + + + ))} diff --git a/packages/tupaia-web/src/features/FlippaTable.tsx b/packages/tupaia-web/src/features/FlippaTable.tsx index f6084351d3..8f3a51181a 100644 --- a/packages/tupaia-web/src/features/FlippaTable.tsx +++ b/packages/tupaia-web/src/features/FlippaTable.tsx @@ -6,10 +6,17 @@ import React from 'react'; import styled from 'styled-components'; import { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; +import { ReportDisplayProps } from '../types'; +import { ChartTable } from '@tupaia/ui-chart-components'; const Wrapper = styled.div` min-height: ${ENLARGED_REPORT_CONTAINER_HEIGHT}; // This is so that the chart is properly covered by this div, because of the way MUI Tabs work `; -export const FlippaTable = () => { - return Hiii; + +export const FlippaTable = ({ viewContent }: { viewContent: ReportDisplayProps }) => { + return ( + + + + ); }; diff --git a/packages/ui-chart-components/src/components/ChartTable.tsx b/packages/ui-chart-components/src/components/ChartTable.tsx index f10a4fed19..ed74a9a445 100644 --- a/packages/ui-chart-components/src/components/ChartTable.tsx +++ b/packages/ui-chart-components/src/components/ChartTable.tsx @@ -26,6 +26,7 @@ interface ChartTableProps { export const ChartTable = ({ viewContent, className }: ChartTableProps) => { const { columns, data } = getChartTableData(viewContent); + console.log(data); // TODO: where is `dataElementCode` being removed in the prod version?! if (!getIsChartData(viewContent)) { return ( From 11450fe6e073d43a7252410a350daceda44d38e8 Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 13:10:21 +1200 Subject: [PATCH 3/7] Rename files --- .../features/{FlippaTable.tsx => ChartTable.tsx} | 6 +++--- .../DashboardItem/EnlargedDashboardItem.tsx | 14 ++++++++------ packages/utils/src/hexToRgba.js | 15 --------------- packages/utils/src/index.js | 1 - 4 files changed, 11 insertions(+), 25 deletions(-) rename packages/tupaia-web/src/features/{FlippaTable.tsx => ChartTable.tsx} (68%) delete mode 100644 packages/utils/src/hexToRgba.js diff --git a/packages/tupaia-web/src/features/FlippaTable.tsx b/packages/tupaia-web/src/features/ChartTable.tsx similarity index 68% rename from packages/tupaia-web/src/features/FlippaTable.tsx rename to packages/tupaia-web/src/features/ChartTable.tsx index 8f3a51181a..436c9d61f6 100644 --- a/packages/tupaia-web/src/features/FlippaTable.tsx +++ b/packages/tupaia-web/src/features/ChartTable.tsx @@ -7,16 +7,16 @@ import React from 'react'; import styled from 'styled-components'; import { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; import { ReportDisplayProps } from '../types'; -import { ChartTable } from '@tupaia/ui-chart-components'; +import { ChartTable as ChartTableComponent } from '@tupaia/ui-chart-components'; const Wrapper = styled.div` min-height: ${ENLARGED_REPORT_CONTAINER_HEIGHT}; // This is so that the chart is properly covered by this div, because of the way MUI Tabs work `; -export const FlippaTable = ({ viewContent }: { viewContent: ReportDisplayProps }) => { +export const ChartTable = ({ viewContent }: { viewContent: ReportDisplayProps }) => { return ( - + ); }; diff --git a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx index 91b4ea2e2c..cbee3ee206 100644 --- a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx @@ -10,14 +10,13 @@ import { Typography, Tabs as MuiTabs, Tab as MuiTab } from '@material-ui/core'; import { TabContext, TabPanel } from '@material-ui/lab'; import { BarChart, GridOn } from '@material-ui/icons'; import { FlexColumn } from '@tupaia/ui-components'; -import { hexToRgba } from '@tupaia/utils'; 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 { FlippaTable } from '../FlippaTable'; +import { ChartTable } from '../ChartTable'; const Wrapper = styled.div<{ $hasBigData?: boolean; @@ -63,7 +62,12 @@ const TabsWrapper = styled.div` `; const Tabs = styled(MuiTabs)` - border: 1px solid ${({ theme }) => hexToRgba(theme.palette.text.primary, 0.2)}; + border: 1px solid + ${({ theme }) => { + let hexString = theme.palette.text.primary.replace('#', ''); + hexString = hexString.length === 3 ? hexString.replace(/(.)/g, '$1$1') : hexString; + return `#${hexString}33`; + }}; border-radius: 5px; min-height: 0; `; @@ -94,7 +98,7 @@ const DISPLAY_TYPE_VIEWS = [ value: 'table', Icon: GridOn, label: 'View table', - display: FlippaTable, + display: ChartTable, }, ]; /** @@ -155,8 +159,6 @@ export const EnlargedDashboardItem = () => { ...reportData, }; - console.log(viewContent); - // // On close, remove the report search param from the url const handleCloseModal = () => { urlSearchParams.delete(URL_SEARCH_PARAMS.REPORT); diff --git a/packages/utils/src/hexToRgba.js b/packages/utils/src/hexToRgba.js deleted file mode 100644 index 2a8c0ee5c0..0000000000 --- a/packages/utils/src/hexToRgba.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd - */ - -export const hexToRgba = (hex, opacity) => { - let hexString = hex.replace('#', ''); - // If the hex is shortened, double up each character. This is for cases like '#fff' - const isShortened = hexString.length === 3; - if (isShortened) hexString = hexString.replace(/(.)/g, '$1$1'); - const r = parseInt(hexString.substring(0, 2), 16); - const g = parseInt(hexString.substring(2, 4), 16); - const b = parseInt(hexString.substring(4, 6), 16); - return `rgba(${r},${g},${b},${opacity})`; -}; diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js index 677a26ebe8..508ee7611e 100644 --- a/packages/utils/src/index.js +++ b/packages/utils/src/index.js @@ -42,4 +42,3 @@ export { VALUE_TYPES, formatDataValueByType } from './formatDataValueByType'; export { createClassExtendingProxy } from './proxy'; export { fetchPatiently } from './fetchPatiently'; export { oneSecondSleep, sleep } from './sleep'; -export { hexToRgba } from './hexToRgba'; From 2e8fa53957a23fd2dfc8ef2f6c2eb130a9c0e6d3 Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 14:06:22 +1200 Subject: [PATCH 4/7] rearrange files --- .../tupaia-web/src/constants/constants.ts | 2 - packages/tupaia-web/src/features/Chart.tsx | 113 +++++++++++++++--- .../tupaia-web/src/features/ChartTable.tsx | 22 ---- .../DashboardItem/EnlargedDashboardItem.tsx | 113 +++--------------- .../src/components/ChartTable.tsx | 1 - .../DateRangePicker/DateRangePicker.tsx | 2 +- 6 files changed, 112 insertions(+), 141 deletions(-) delete mode 100644 packages/tupaia-web/src/features/ChartTable.tsx diff --git a/packages/tupaia-web/src/constants/constants.ts b/packages/tupaia-web/src/constants/constants.ts index 005800c3d8..9b43313f16 100644 --- a/packages/tupaia-web/src/constants/constants.ts +++ b/packages/tupaia-web/src/constants/constants.ts @@ -24,5 +24,3 @@ export const FORM_FIELD_VALIDATION = { }; export const MOBILE_BREAKPOINT = '900px'; - -export const ENLARGED_REPORT_CONTAINER_HEIGHT = '22.5rem'; diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 02f7632366..6d7b85b4e4 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -3,24 +3,24 @@ * 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 { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; +import { Chart as ChartComponent, ChartTable, ViewContent } from '@tupaia/ui-chart-components'; +import { BarChart, GridOn } from '@material-ui/icons'; +import { Tabs } 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; + $displayType: string; }>` display: flex; position: relative; align-content: stretch; -webkit-box-align: stretch; align-items: stretch; - height: ${({ $isEnlarged, $hasData }) => { - if (!$hasData) return 'auto'; - return $isEnlarged ? ENLARGED_REPORT_CONTAINER_HEIGHT : '14rem'; - }}; flex-direction: column; .recharts-responsive-container { min-width: 0px; @@ -28,27 +28,108 @@ const Wrapper = styled.div<{ .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 }) => { + let hexString = theme.palette.text.primary.replace('#', ''); + hexString = hexString.length === 3 ? hexString.replace(/(.)/g, '$1$1') : hexString; + return `#${hexString}33`; + }}; + 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]]; + + const hasData = viewContent.data && viewContent.data.length > 0; return ( - - + + + {isEnlarged && ( + + + {DISPLAY_TYPE_VIEWS.map(({ value, Icon, label }) => ( + } aria-label={label} /> + ))} + + + )} + {availableDisplayTypes.map(({ value, display: Content }) => ( + + + + ))} + ); }; diff --git a/packages/tupaia-web/src/features/ChartTable.tsx b/packages/tupaia-web/src/features/ChartTable.tsx deleted file mode 100644 index 436c9d61f6..0000000000 --- a/packages/tupaia-web/src/features/ChartTable.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Tupaia - * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd - */ - -import React from 'react'; -import styled from 'styled-components'; -import { ENLARGED_REPORT_CONTAINER_HEIGHT } from '../constants'; -import { ReportDisplayProps } from '../types'; -import { ChartTable as ChartTableComponent } from '@tupaia/ui-chart-components'; - -const Wrapper = styled.div` - min-height: ${ENLARGED_REPORT_CONTAINER_HEIGHT}; // This is so that the chart is properly covered by this div, because of the way MUI Tabs work -`; - -export const ChartTable = ({ viewContent }: { viewContent: ReportDisplayProps }) => { - return ( - - - - ); -}; diff --git a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx index cbee3ee206..59508d7cec 100644 --- a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx @@ -3,20 +3,17 @@ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd */ -import React, { ChangeEvent, useEffect, useState } from 'react'; +import React from 'react'; import styled from 'styled-components'; import { useParams, useSearchParams } from 'react-router-dom'; -import { Typography, Tabs as MuiTabs, Tab as MuiTab } from '@material-ui/core'; -import { TabContext, TabPanel } from '@material-ui/lab'; -import { BarChart, GridOn } from '@material-ui/icons'; +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 { ChartTable } from '../ChartTable'; +import { DateRangePicker, Modal } from '../../components'; const Wrapper = styled.div<{ $hasBigData?: boolean; @@ -51,61 +48,10 @@ const TitleWrapper = styled(FlexColumn)` align-items: center; `; -const TabsWrapper = styled.div` - width: 100%; - display: flex; - justify-content: flex-end; - - .MuiTabs-indicator { - display: none; - } -`; - -const Tabs = styled(MuiTabs)` - border: 1px solid - ${({ theme }) => { - let hexString = theme.palette.text.primary.replace('#', ''); - hexString = hexString.length === 3 ? hexString.replace(/(.)/g, '$1$1') : hexString; - return `#${hexString}33`; - }}; - border-radius: 5px; - min-height: 0; -`; - -const Tab = styled(MuiTab)` - min-width: 0; - padding: 0.5rem; - min-height: 0; - svg { - width: 1.2rem; - height: 1.2rem; - } - &[aria-selected='true'] { - background-color: ${({ theme }) => theme.palette.primary.main}; - } -`; - -const ContentWrapper = styled.div``; - -const DISPLAY_TYPE_VIEWS = [ - { - value: 'chart', - Icon: BarChart, - label: 'View chart', - display: DashboardItemContent, - }, - { - value: 'table', - Icon: GridOn, - label: 'View table', - display: ChartTable, - }, -]; /** * EnlargedDashboardItem is the dashboard item modal. It is visible when the report code in the url is equal to the report code of the item. */ export const EnlargedDashboardItem = () => { - const [displayType, setDisplayType] = useState(DISPLAY_TYPE_VIEWS[0].value); const { projectCode, entityCode, dashboardName } = useParams(); const [urlSearchParams, setUrlSearchParams] = useSearchParams(); const reportCode = urlSearchParams.get(URL_SEARCH_PARAMS.REPORT); @@ -130,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, @@ -143,15 +89,6 @@ export const EnlargedDashboardItem = () => { }, ); - const handleChangeDisplayType = (_event: ChangeEvent<{}>, value: 'chart' | 'table') => { - setDisplayType(value); - }; - - useEffect(() => { - // reset the display type to chart when the report code changes - setDisplayType(DISPLAY_TYPE_VIEWS[0].value); - }, [reportCode]); - if (!reportCode || (!isLoadingDashboards && !currentReport)) return null; const viewContent = { @@ -170,13 +107,11 @@ export const EnlargedDashboardItem = () => { currentReport?.entityHeader || activeDashboard?.entityName }`; - const isChart = currentReport?.type === 'chart'; - - const availableDisplayTypes = isChart ? DISPLAY_TYPE_VIEWS : [DISPLAY_TYPE_VIEWS[0]]; + const { type } = currentReport || {}; return ( - 20 || currentReport?.type === 'matrix'}> + 20 || type === 'matrix'}> {currentReport?.name && {titleText}} @@ -193,34 +128,14 @@ export const EnlargedDashboardItem = () => { /> )} - - {isChart && ( - - - {DISPLAY_TYPE_VIEWS.map(({ value, Icon, label }) => ( - } aria-label={label} /> - ))} - - - )} - {availableDisplayTypes.map(({ value, display: Content }) => ( - - - - ))} - + diff --git a/packages/ui-chart-components/src/components/ChartTable.tsx b/packages/ui-chart-components/src/components/ChartTable.tsx index ed74a9a445..f10a4fed19 100644 --- a/packages/ui-chart-components/src/components/ChartTable.tsx +++ b/packages/ui-chart-components/src/components/ChartTable.tsx @@ -26,7 +26,6 @@ interface ChartTableProps { export const ChartTable = ({ viewContent, className }: ChartTableProps) => { const { columns, data } = getChartTableData(viewContent); - console.log(data); // TODO: where is `dataElementCode` being removed in the prod version?! if (!getIsChartData(viewContent)) { return ( diff --git a/packages/ui-components/src/components/DateRangePicker/DateRangePicker.tsx b/packages/ui-components/src/components/DateRangePicker/DateRangePicker.tsx index 188d7ec6a7..241b1e0268 100644 --- a/packages/ui-components/src/components/DateRangePicker/DateRangePicker.tsx +++ b/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; From 955ddeb148231a0af074236a8d4ed0099cc56085 Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 14:07:53 +1200 Subject: [PATCH 5/7] Remove unused types --- packages/tupaia-web/src/features/Chart.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 6d7b85b4e4..2d8556c6c8 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -11,11 +11,7 @@ import { Tabs } 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; - $displayType: string; -}>` +const Wrapper = styled.div` display: flex; position: relative; align-content: stretch; From 673252c470d18dd36686559da9438d5a55135f89 Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 14:11:11 +1200 Subject: [PATCH 6/7] Update Chart.tsx --- packages/tupaia-web/src/features/Chart.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 2d8556c6c8..0180749d2b 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -97,9 +97,8 @@ export const Chart = ({ viewContent, isEnlarged = false }: ChartProps) => { const availableDisplayTypes = isEnlarged ? DISPLAY_TYPE_VIEWS : [DISPLAY_TYPE_VIEWS[0]]; - const hasData = viewContent.data && viewContent.data.length > 0; return ( - + {isEnlarged && ( From 2093828b3ce8a10acc62b2d03a5eed8a1766c5a5 Mon Sep 17 00:00:00 2001 From: acdunham Date: Wed, 12 Jul 2023 13:25:04 +1200 Subject: [PATCH 7/7] Fix colors --- packages/tupaia-web/src/features/Chart.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 0180749d2b..adeac67933 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -7,7 +7,7 @@ import React, { ChangeEvent, useState } from 'react'; import styled from 'styled-components'; import { Chart as ChartComponent, ChartTable, ViewContent } from '@tupaia/ui-chart-components'; import { BarChart, GridOn } from '@material-ui/icons'; -import { Tabs } from '@material-ui/core'; +import { Tabs, darken, lighten } from '@material-ui/core'; import { Tab } from '@material-ui/core'; import { TabContext, TabPanel } from '@material-ui/lab'; @@ -15,7 +15,6 @@ const Wrapper = styled.div` display: flex; position: relative; align-content: stretch; - -webkit-box-align: stretch; align-items: stretch; flex-direction: column; .recharts-responsive-container { @@ -42,9 +41,12 @@ const TabsWrapper = styled.div` const TabsGroup = styled(Tabs)` border: 1px solid ${({ theme }) => { - let hexString = theme.palette.text.primary.replace('#', ''); - hexString = hexString.length === 3 ? hexString.replace(/(.)/g, '$1$1') : hexString; - return `#${hexString}33`; + 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;