From bff494f49c9de1d2f93d39bcc9e57fd5d80afe05 Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 15:33:01 +1200 Subject: [PATCH 1/6] Placeholder images for dashboard --- .../images/matrix-placeholder-dot-only.png | Bin 0 -> 4284 bytes .../public/images/matrix-placeholder-mix.png | Bin 0 -> 3576 bytes .../images/matrix-placeholder-text-only.png | Bin 0 -> 4271 bytes packages/tupaia-web/src/features/Chart.tsx | 8 ++--- .../DashboardItem/DashboardItemContent.tsx | 3 +- packages/tupaia-web/src/features/Matrix.tsx | 29 ++++++++++++++++++ packages/tupaia-web/src/types/types.d.ts | 14 ++++++++- .../src/components/Matrix/index.ts | 1 + 8 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 packages/tupaia-web/public/images/matrix-placeholder-dot-only.png create mode 100644 packages/tupaia-web/public/images/matrix-placeholder-mix.png create mode 100644 packages/tupaia-web/public/images/matrix-placeholder-text-only.png create mode 100644 packages/tupaia-web/src/features/Matrix.tsx diff --git a/packages/tupaia-web/public/images/matrix-placeholder-dot-only.png b/packages/tupaia-web/public/images/matrix-placeholder-dot-only.png new file mode 100644 index 0000000000000000000000000000000000000000..983325bbc5930755642b1b99b6f6a21741c7033e GIT binary patch literal 4284 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 B49Nfh literal 0 HcmV?d00001 diff --git a/packages/tupaia-web/public/images/matrix-placeholder-text-only.png b/packages/tupaia-web/public/images/matrix-placeholder-text-only.png new file mode 100644 index 0000000000000000000000000000000000000000..08a6a319e55265946dcc953dcd6ed8ab230f5ca2 GIT binary patch literal 4271 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 sJ;BmG{`>+9#_s>#l9__Sl>@72n|_d { +export const Chart = ({ viewContent, isEnlarged = false }: DashboardItemDisplayProps) => { const hasData = viewContent.data && viewContent.data.length > 0 ? true : false; return ( diff --git a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx index c7d93f8da5..201620016c 100644 --- a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx @@ -11,6 +11,7 @@ import { Typography, Link, CircularProgress } from '@material-ui/core'; import { ReportDisplayProps } from '../../types'; import { Chart } from '../Chart'; import { ExpandItemButton } from './ExpandItemButton'; +import { Matrix } from '../Matrix'; const ErrorLink = styled(Link)` color: inherit; @@ -49,9 +50,9 @@ const LoadingContainer = styled.div` padding: 1rem; `; -// Eventually matrix etc will be added here const DisplayComponents = { chart: Chart, + matrix: Matrix, }; interface DashboardItemContentProps { diff --git a/packages/tupaia-web/src/features/Matrix.tsx b/packages/tupaia-web/src/features/Matrix.tsx new file mode 100644 index 0000000000..adece5734b --- /dev/null +++ b/packages/tupaia-web/src/features/Matrix.tsx @@ -0,0 +1,29 @@ +/** + * Tupaia + * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd + */ + +import React from 'react'; +import styled from 'styled-components'; +import { getIsUsingDots } from '@tupaia/ui-components'; +import { DashboardItemDisplayProps, MatrixViewContent } from '../types'; +import { ConditionalPresentationOptions } from '@tupaia/types'; + +export const Matrix = ({ + viewContent, + isEnlarged = false, +}: Pick & { + viewContent: MatrixViewContent; +}) => { + const getPlaceholderImage = () => { + const { presentationOptions = {}, categoryPresentationOptions = {} } = viewContent; + if (!getIsUsingDots(presentationOptions) && !getIsUsingDots(categoryPresentationOptions)) + return '/images/matrix-placeholder-text-only.png'; + if ((presentationOptions as ConditionalPresentationOptions)?.applyLocation?.columnIndexes) + return '/images/matrix-placeholder-mix.png'; + return '/images/matrix-placeholder-dot-only.png'; + }; + if (!isEnlarged) return Matrix Placeholder; + console.log(viewContent); + return <>; +}; diff --git a/packages/tupaia-web/src/types/types.d.ts b/packages/tupaia-web/src/types/types.d.ts index 7e29031bc6..c5d5b87457 100644 --- a/packages/tupaia-web/src/types/types.d.ts +++ b/packages/tupaia-web/src/types/types.d.ts @@ -9,12 +9,14 @@ import { MapOverlay, MapOverlayGroupRelation, EntityType, + MatrixConfig, } from '@tupaia/types'; import { ActivePolygonProps, LeafletMapProps } from '@tupaia/ui-map-components'; -import { ViewContent } from '@tupaia/ui-chart-components'; +import { ViewContent as ChartViewContent } from '@tupaia/ui-chart-components'; import { Position } from 'geojson'; import { KeysToCamelCase } from './helpers'; import { GRANULARITY_CONFIG } from '@tupaia/utils'; +import { MatrixColumnType, MatrixRowType } from '@tupaia/ui-components'; export type SingleProject = KeysToCamelCase & { hasAccess: boolean; @@ -101,3 +103,13 @@ export type EntityResponse = Entity & { photoUrl?: string; children?: Entity[]; }; + +export type MatrixViewContent = MatrixConfig & { + rows: MatrixRowType[]; + columns: MatrixColumnType[]; +}; + +export type DashboardItemDisplayProps = { + viewContent: ChartViewContent | MatrixViewContent; + isEnlarged?: boolean; +}; diff --git a/packages/ui-components/src/components/Matrix/index.ts b/packages/ui-components/src/components/Matrix/index.ts index dd73d8877f..32e3eb86e7 100644 --- a/packages/ui-components/src/components/Matrix/index.ts +++ b/packages/ui-components/src/components/Matrix/index.ts @@ -4,3 +4,4 @@ */ export { Matrix } from './Matrix'; +export * from './utils'; From 224115a868fc5106734802545203b214fd04dcae Mon Sep 17 00:00:00 2001 From: acdunham Date: Tue, 11 Jul 2023 16:41:42 +1200 Subject: [PATCH 2/6] Working matrix --- .../tupaia-web/src/api/queries/useReport.ts | 6 +- packages/tupaia-web/src/features/Matrix.tsx | 63 +++++++++++++++++-- packages/tupaia-web/src/types/types.d.ts | 16 ++++- 3 files changed, 74 insertions(+), 11 deletions(-) diff --git a/packages/tupaia-web/src/api/queries/useReport.ts b/packages/tupaia-web/src/api/queries/useReport.ts index f0ca61073a..be3f8d2a6b 100644 --- a/packages/tupaia-web/src/api/queries/useReport.ts +++ b/packages/tupaia-web/src/api/queries/useReport.ts @@ -24,10 +24,9 @@ export const useReport = (reportCode: DashboardItemType['reportCode'], params: Q const timeZone = getBrowserTimeZone(); const formattedStartDate = formatDateForApi(startDate, null); const formattedEndDate = formatDateForApi(endDate, null); - const endpoint = legacy ? 'legacyDashboardReport' : 'report'; return useQuery( [ - endpoint, + 'report', reportCode, dashboardCode, projectCode, @@ -37,9 +36,10 @@ export const useReport = (reportCode: DashboardItemType['reportCode'], params: Q formattedEndDate, ], () => - get(`${endpoint}/${reportCode}`, { + get(`report/${reportCode}`, { params: { dashboardCode, + legacy, itemCode, projectCode, organisationUnitCode: entityCode, diff --git a/packages/tupaia-web/src/features/Matrix.tsx b/packages/tupaia-web/src/features/Matrix.tsx index adece5734b..dd373d0259 100644 --- a/packages/tupaia-web/src/features/Matrix.tsx +++ b/packages/tupaia-web/src/features/Matrix.tsx @@ -4,19 +4,67 @@ */ import React from 'react'; -import styled from 'styled-components'; -import { getIsUsingDots } from '@tupaia/ui-components'; -import { DashboardItemDisplayProps, MatrixViewContent } from '../types'; +import { + MatrixColumnType, + MatrixRowType, + getIsUsingDots, + Matrix as MatrixComponent, +} from '@tupaia/ui-components'; +import { + DashboardItemDisplayProps, + MatrixDataColumn, + MatrixDataRow, + MatrixViewContent, +} from '../types'; import { ConditionalPresentationOptions } from '@tupaia/types'; +const parseRows = ( + rows: MatrixDataRow[], + categoryId?: MatrixDataRow['categoryId'], +): MatrixRowType[] => { + const topLevelRows = categoryId ? rows.filter(row => row.categoryId === categoryId) : rows; + + return topLevelRows.map(row => { + const { dataElement = '', category, ...rest } = row; + if (category) { + return { + title: category, + ...rest, + children: parseRows(rows, category), + }; + } + return { + title: dataElement, + ...rest, + }; + }); +}; + +const parseColumns = (columns: MatrixDataColumn[]): MatrixColumnType[] => { + return columns.map(column => { + const { category, key, title, columns: children } = column; + if (category) + return { + title: category, + key: category, + children: parseColumns(children!), + }; + return { + title, + key, + }; + }); +}; + export const Matrix = ({ viewContent, isEnlarged = false, }: Pick & { viewContent: MatrixViewContent; }) => { + const { columns, rows, ...config } = viewContent; const getPlaceholderImage = () => { - const { presentationOptions = {}, categoryPresentationOptions = {} } = viewContent; + const { presentationOptions = {}, categoryPresentationOptions = {} } = config; if (!getIsUsingDots(presentationOptions) && !getIsUsingDots(categoryPresentationOptions)) return '/images/matrix-placeholder-text-only.png'; if ((presentationOptions as ConditionalPresentationOptions)?.applyLocation?.columnIndexes) @@ -24,6 +72,9 @@ export const Matrix = ({ return '/images/matrix-placeholder-dot-only.png'; }; if (!isEnlarged) return Matrix Placeholder; - console.log(viewContent); - return <>; + + const parsedRows = parseRows(rows, undefined); + const parsedColumns = parseColumns(columns); + + return ; }; diff --git a/packages/tupaia-web/src/types/types.d.ts b/packages/tupaia-web/src/types/types.d.ts index c5d5b87457..e07ba00555 100644 --- a/packages/tupaia-web/src/types/types.d.ts +++ b/packages/tupaia-web/src/types/types.d.ts @@ -104,9 +104,21 @@ export type EntityResponse = Entity & { children?: Entity[]; }; +export type MatrixDataRow = Record & { + dataElement?: string; + categoryId?: string; + category?: string; +}; + +export type MatrixDataColumn = { + title: string; + key: string; + category?: string; + columns?: MatrixDataColumn[]; +}; export type MatrixViewContent = MatrixConfig & { - rows: MatrixRowType[]; - columns: MatrixColumnType[]; + rows: MatrixDataRow[]; + columns: MatrixDataColumn[]; }; export type DashboardItemDisplayProps = { From f7fde28c35f66eaec4f7e41f47f47ef0d0f527c8 Mon Sep 17 00:00:00 2001 From: acdunham Date: Wed, 12 Jul 2023 09:31:36 +1200 Subject: [PATCH 3/6] Add description and handle no data --- packages/tupaia-web/src/api/queries/useReport.ts | 4 ++-- .../tupaia-web/src/components/DateRangePicker.tsx | 1 + packages/tupaia-web/src/features/Chart.tsx | 5 ++++- .../features/DashboardItem/DashboardItemContent.tsx | 2 +- .../features/DashboardItem/EnlargedDashboardItem.tsx | 9 +++++++++ .../src/features/DashboardItem/ExpandItemButton.tsx | 1 - packages/tupaia-web/src/features/Matrix.tsx | 11 +++++++++++ .../ui-components/src/components/Matrix/Matrix.tsx | 1 + 8 files changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/tupaia-web/src/api/queries/useReport.ts b/packages/tupaia-web/src/api/queries/useReport.ts index be3f8d2a6b..4488d226de 100644 --- a/packages/tupaia-web/src/api/queries/useReport.ts +++ b/packages/tupaia-web/src/api/queries/useReport.ts @@ -24,6 +24,7 @@ export const useReport = (reportCode: DashboardItemType['reportCode'], params: Q const timeZone = getBrowserTimeZone(); const formattedStartDate = formatDateForApi(startDate, null); const formattedEndDate = formatDateForApi(endDate, null); + const endPoint = legacy ? 'legacyDashboardReport' : 'report'; return useQuery( [ 'report', @@ -36,10 +37,9 @@ export const useReport = (reportCode: DashboardItemType['reportCode'], params: Q formattedEndDate, ], () => - get(`report/${reportCode}`, { + get(`${endPoint}/${reportCode}`, { params: { dashboardCode, - legacy, itemCode, projectCode, organisationUnitCode: entityCode, diff --git a/packages/tupaia-web/src/components/DateRangePicker.tsx b/packages/tupaia-web/src/components/DateRangePicker.tsx index b06102b87e..ed503f8724 100644 --- a/packages/tupaia-web/src/components/DateRangePicker.tsx +++ b/packages/tupaia-web/src/components/DateRangePicker.tsx @@ -23,6 +23,7 @@ const Wrapper = styled.div` padding: 0.2rem; text-transform: none; font-size: 0.875rem; + min-width: 0; color: ${({ theme }) => theme.palette.text.primary}; svg { height: 1.3rem; diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index 96165cf857..aab911c516 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -32,7 +32,10 @@ const Wrapper = styled.div<{ .recharts-wrapper, .recharts-wrapper svg { height: 100% !important; - width: 100%; + width: ${({ $isEnlarged }) => + $isEnlarged + ? '100%' + : '95%'} !important; // some charts end up overflowing the space in the dashboard, if the content is too large. This makes up for it. } li.recharts-legend-item { white-space: nowrap; // ensure there are no line breaks on the export legends diff --git a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx index 201620016c..edb239f3d5 100644 --- a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx @@ -18,7 +18,6 @@ const ErrorLink = styled(Link)` text-decoration: underline; font-weight: ${({ theme }) => theme.typography.fontWeightBold}; `; - const RetryButton = styled(TextButton)` margin: 0; padding: 0; @@ -31,6 +30,7 @@ const RetryButton = styled(TextButton)` `; const Alert = styled(BaseAlert)` + overflow: hidden; // this is to stop any extra long text from overflowing the alert and causing a horizontal scroll on the dashboard .MuiAlert-message { max-width: 100%; } diff --git a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx index a254281035..cf5ab13335 100644 --- a/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/EnlargedDashboardItem.tsx @@ -46,6 +46,14 @@ const Title = styled(Typography).attrs({ const TitleWrapper = styled(FlexColumn)` align-items: center; + margin-bottom: 1rem; +`; + +const Subheading = styled(Typography).attrs({ + variant: 'h3', +})` + font-size: 1rem; + margin-bottom: 1rem; `; /** @@ -126,6 +134,7 @@ export const EnlargedDashboardItem = () => { /> )} + {currentReport?.description && {currentReport?.description}} No data available; + return ; }; diff --git a/packages/ui-components/src/components/Matrix/Matrix.tsx b/packages/ui-components/src/components/Matrix/Matrix.tsx index df11977f90..a6fe220533 100644 --- a/packages/ui-components/src/components/Matrix/Matrix.tsx +++ b/packages/ui-components/src/components/Matrix/Matrix.tsx @@ -20,6 +20,7 @@ const MatrixTable = styled.table` border-collapse: collapse; border: 1px solid ${({ theme }) => getFullHex(theme.palette.text.primary)}33; color: ${({ theme }) => theme.palette.text.primary}; + table-layout: fixed; // this is to allow us to set max-widths on the columns height: 1px; // this is to make the cell content (eg. buttons) take full height of the cell, and does not actually get applied td, th { From db90349a3d81b4d98cd66d7b7bd14e9deda03dce Mon Sep 17 00:00:00 2001 From: acdunham Date: Wed, 12 Jul 2023 09:44:17 +1200 Subject: [PATCH 4/6] Add comments --- packages/tupaia-web/src/features/Chart.tsx | 7 +++- .../DashboardItem/DashboardItemContent.tsx | 5 ++- packages/tupaia-web/src/features/Matrix.tsx | 40 +++++++++++++------ packages/tupaia-web/src/types/types.d.ts | 20 +++++----- 4 files changed, 44 insertions(+), 28 deletions(-) diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index aab911c516..b862480596 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -6,7 +6,6 @@ import React from 'react'; import styled from 'styled-components'; import { Chart as ChartComponent, ViewContent } from '@tupaia/ui-chart-components'; -import { DashboardItemDisplayProps } from '../types'; const Wrapper = styled.div<{ $isEnlarged: boolean; @@ -42,7 +41,11 @@ const Wrapper = styled.div<{ } `; -export const Chart = ({ viewContent, isEnlarged = false }: DashboardItemDisplayProps) => { +interface ChartProps { + viewContent: ViewContent; + isEnlarged?: boolean; +} +export const Chart = ({ viewContent, isEnlarged = false }: ChartProps) => { const hasData = viewContent.data && viewContent.data.length > 0 ? true : false; return ( diff --git a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx index edb239f3d5..225dd6b32f 100644 --- a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx +++ b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContent.tsx @@ -7,11 +7,12 @@ import React from 'react'; import styled from 'styled-components'; import { UseQueryResult } from 'react-query'; import { Alert as BaseAlert, TextButton } from '@tupaia/ui-components'; +import { ViewContent as ChartViewContent } from '@tupaia/ui-chart-components'; import { Typography, Link, CircularProgress } from '@material-ui/core'; -import { ReportDisplayProps } from '../../types'; import { Chart } from '../Chart'; import { ExpandItemButton } from './ExpandItemButton'; import { Matrix } from '../Matrix'; +import { DashboardItemType, MatrixViewContent } from '../../types'; const ErrorLink = styled(Link)` color: inherit; @@ -56,7 +57,7 @@ const DisplayComponents = { }; interface DashboardItemContentProps { - viewContent: ReportDisplayProps; + viewContent: DashboardItemType & (ChartViewContent | MatrixViewContent); isEnlarged?: boolean; isLoading: boolean; error: UseQueryResult['error'] | null; diff --git a/packages/tupaia-web/src/features/Matrix.tsx b/packages/tupaia-web/src/features/Matrix.tsx index d87bc3546d..588731d287 100644 --- a/packages/tupaia-web/src/features/Matrix.tsx +++ b/packages/tupaia-web/src/features/Matrix.tsx @@ -11,12 +11,7 @@ import { Matrix as MatrixComponent, Alert, } from '@tupaia/ui-components'; -import { - DashboardItemDisplayProps, - MatrixDataColumn, - MatrixDataRow, - MatrixViewContent, -} from '../types'; +import { MatrixDataColumn, MatrixDataRow, MatrixViewContent } from '../types'; import { ConditionalPresentationOptions } from '@tupaia/types'; import styled from 'styled-components'; @@ -27,14 +22,19 @@ const NoDataMessage = styled(Alert).attrs({ margin: 1rem auto; max-width: 24rem; `; + +// This is a recursive function that parses the rows of the matrix into a format that the Matrix component can use. const parseRows = ( rows: MatrixDataRow[], categoryId?: MatrixDataRow['categoryId'], ): MatrixRowType[] => { + // Get the topmost level of rows if a categoryId has been passed in, otherwise just use all the rows that have been passed in const topLevelRows = categoryId ? rows.filter(row => row.categoryId === categoryId) : rows; + // loop through the topLevelRows, and parse them into the format that the Matrix component can use return topLevelRows.map(row => { const { dataElement = '', category, ...rest } = row; + // if the row has a category, then it has children, so we need to parse them using this same function if (category) { return { title: category, @@ -42,6 +42,7 @@ const parseRows = ( children: parseRows(rows, category), }; } + // otherwise, handle as a regular row return { title: dataElement, ...rest, @@ -49,15 +50,18 @@ const parseRows = ( }); }; +// This is a recursive function that parses the columns of the matrix into a format that the Matrix component can use. const parseColumns = (columns: MatrixDataColumn[]): MatrixColumnType[] => { return columns.map(column => { const { category, key, title, columns: children } = column; + // if a column has a category, then it has children, so we need to parse them using this same function if (category) return { title: category, key: category, children: parseColumns(children!), }; + // otherwise, handle as a regular column return { title, key, @@ -65,24 +69,34 @@ const parseColumns = (columns: MatrixDataColumn[]): MatrixColumnType[] => { }); }; -export const Matrix = ({ - viewContent, - isEnlarged = false, -}: Pick & { +/** + * This is the component that is used to display a matrix. It handles the parsing of the data into the format that the Matrix component can use, as well as placeholder images. It shows a message when there are no rows available to display. + */ + +interface MatrixProps { viewContent: MatrixViewContent; -}) => { + isEnlarged?: boolean; +} +export const Matrix = ({ viewContent, isEnlarged = false }: MatrixProps) => { const { columns, rows, ...config } = viewContent; + const getPlaceholderImage = () => { const { presentationOptions = {}, categoryPresentationOptions = {} } = config; + // if the matrix is not using any dots, show a text-only placeholder if (!getIsUsingDots(presentationOptions) && !getIsUsingDots(categoryPresentationOptions)) return '/images/matrix-placeholder-text-only.png'; + // if the matrix has applyLocation.columnIndexes, show a mix placeholder, because this means it is a mix of dots and text if ((presentationOptions as ConditionalPresentationOptions)?.applyLocation?.columnIndexes) return '/images/matrix-placeholder-mix.png'; + // otherwise, show a dot-only placeholder return '/images/matrix-placeholder-dot-only.png'; }; - if (!isEnlarged) return Matrix Placeholder; - const parsedRows = parseRows(rows, undefined); + const placeholderImage = getPlaceholderImage(); + // in the dashboard, show a placeholder image + if (!isEnlarged) return Matrix Placeholder; + + const parsedRows = parseRows(rows); const parsedColumns = parseColumns(columns); if (!parsedRows.length) return No data available; diff --git a/packages/tupaia-web/src/types/types.d.ts b/packages/tupaia-web/src/types/types.d.ts index e07ba00555..07409ed0b0 100644 --- a/packages/tupaia-web/src/types/types.d.ts +++ b/packages/tupaia-web/src/types/types.d.ts @@ -65,7 +65,6 @@ export type TupaiaUrlParams = { dashboardCode?: DashboardCode; }; -export type ReportDisplayProps = ViewContent & DashboardItemType; export type DashboardName = DashboardResponse['dashboardName']; export type SingleMapOverlayItem = KeysToCamelCase< @@ -104,24 +103,23 @@ export type EntityResponse = Entity & { children?: Entity[]; }; +// This is the row type in the response from the report endpoint when the report is a matrix. It will contain data for each column, keyed by the column key, as well as dataElement, categoryId and category export type MatrixDataRow = Record & { - dataElement?: string; - categoryId?: string; - category?: string; + dataElement?: string; // this is the data to display in the row header cell + categoryId?: string; // this means the row is a child of a grouped row + category?: string; // this means the row is a grouped row }; +// This is the column type in the response from the report endpoint when the report is a matrix export type MatrixDataColumn = { title: string; key: string; - category?: string; - columns?: MatrixDataColumn[]; + category?: string; // this means the column is a grouped column + columns?: MatrixDataColumn[]; // these are the child columns of a grouped column }; + +// The 'ViewContent' is the data that is passed to the matrix view component export type MatrixViewContent = MatrixConfig & { rows: MatrixDataRow[]; columns: MatrixDataColumn[]; }; - -export type DashboardItemDisplayProps = { - viewContent: ChartViewContent | MatrixViewContent; - isEnlarged?: boolean; -}; From 0df3610f85fede8a8455619279da6cd71025232e Mon Sep 17 00:00:00 2001 From: acdunham Date: Wed, 12 Jul 2023 10:09:30 +1200 Subject: [PATCH 5/6] Fix grouping and width --- packages/tupaia-web/src/features/Chart.tsx | 4 ---- packages/tupaia-web/src/features/Matrix.tsx | 13 +++++++++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/tupaia-web/src/features/Chart.tsx b/packages/tupaia-web/src/features/Chart.tsx index b862480596..6fae2ebaf2 100644 --- a/packages/tupaia-web/src/features/Chart.tsx +++ b/packages/tupaia-web/src/features/Chart.tsx @@ -31,10 +31,6 @@ const Wrapper = styled.div<{ .recharts-wrapper, .recharts-wrapper svg { height: 100% !important; - width: ${({ $isEnlarged }) => - $isEnlarged - ? '100%' - : '95%'} !important; // some charts end up overflowing the space in the dashboard, if the content is too large. This makes up for it. } li.recharts-legend-item { white-space: nowrap; // ensure there are no line breaks on the export legends diff --git a/packages/tupaia-web/src/features/Matrix.tsx b/packages/tupaia-web/src/features/Matrix.tsx index 588731d287..7be2621e3d 100644 --- a/packages/tupaia-web/src/features/Matrix.tsx +++ b/packages/tupaia-web/src/features/Matrix.tsx @@ -28,8 +28,17 @@ const parseRows = ( rows: MatrixDataRow[], categoryId?: MatrixDataRow['categoryId'], ): MatrixRowType[] => { - // Get the topmost level of rows if a categoryId has been passed in, otherwise just use all the rows that have been passed in - const topLevelRows = categoryId ? rows.filter(row => row.categoryId === categoryId) : rows; + let topLevelRows = []; + // if a categoryId is not passed in, then we need to find the top level rows + if (!categoryId) { + // get the highest level rows, which are the ones that have a category but no categoryId + const highestLevel = rows.filter(row => row.category && !row.categoryId); + // if there are no highest level rows, then the top level rows are just all of the rows + topLevelRows = highestLevel.length ? highestLevel : rows; + } else { + // otherwise, the top level rows are the ones that have the categoryId that was passed in + topLevelRows = rows.filter(row => row.categoryId === categoryId); + } // loop through the topLevelRows, and parse them into the format that the Matrix component can use return topLevelRows.map(row => { From 267328b2f5592a5abf2343399344ea50bbd9f724 Mon Sep 17 00:00:00 2001 From: acdunham Date: Wed, 12 Jul 2023 13:35:51 +1200 Subject: [PATCH 6/6] Move getPlaceholderImage --- packages/tupaia-web/src/features/Matrix.tsx | 25 ++++++++++----------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/tupaia-web/src/features/Matrix.tsx b/packages/tupaia-web/src/features/Matrix.tsx index 7be2621e3d..25bf9d894b 100644 --- a/packages/tupaia-web/src/features/Matrix.tsx +++ b/packages/tupaia-web/src/features/Matrix.tsx @@ -78,6 +78,17 @@ const parseColumns = (columns: MatrixDataColumn[]): MatrixColumnType[] => { }); }; +const getPlaceholderImage = ({ presentationOptions = {}, categoryPresentationOptions = {} }) => { + // if the matrix is not using any dots, show a text-only placeholder + if (!getIsUsingDots(presentationOptions) && !getIsUsingDots(categoryPresentationOptions)) + return '/images/matrix-placeholder-text-only.png'; + // if the matrix has applyLocation.columnIndexes, show a mix placeholder, because this means it is a mix of dots and text + if ((presentationOptions as ConditionalPresentationOptions)?.applyLocation?.columnIndexes) + return '/images/matrix-placeholder-mix.png'; + // otherwise, show a dot-only placeholder + return '/images/matrix-placeholder-dot-only.png'; +}; + /** * This is the component that is used to display a matrix. It handles the parsing of the data into the format that the Matrix component can use, as well as placeholder images. It shows a message when there are no rows available to display. */ @@ -89,19 +100,7 @@ interface MatrixProps { export const Matrix = ({ viewContent, isEnlarged = false }: MatrixProps) => { const { columns, rows, ...config } = viewContent; - const getPlaceholderImage = () => { - const { presentationOptions = {}, categoryPresentationOptions = {} } = config; - // if the matrix is not using any dots, show a text-only placeholder - if (!getIsUsingDots(presentationOptions) && !getIsUsingDots(categoryPresentationOptions)) - return '/images/matrix-placeholder-text-only.png'; - // if the matrix has applyLocation.columnIndexes, show a mix placeholder, because this means it is a mix of dots and text - if ((presentationOptions as ConditionalPresentationOptions)?.applyLocation?.columnIndexes) - return '/images/matrix-placeholder-mix.png'; - // otherwise, show a dot-only placeholder - return '/images/matrix-placeholder-dot-only.png'; - }; - - const placeholderImage = getPlaceholderImage(); + const placeholderImage = getPlaceholderImage(config); // in the dashboard, show a placeholder image if (!isEnlarged) return Matrix Placeholder;