diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/__tests__/ReleaseDataBlockEditPage.test.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/__tests__/ReleaseDataBlockEditPage.test.tsx index fc35274ffd..b0096e065b 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/__tests__/ReleaseDataBlockEditPage.test.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/__tests__/ReleaseDataBlockEditPage.test.tsx @@ -13,11 +13,13 @@ import _dataBlockService, { ReleaseDataBlockSummary, } from '@admin/services/dataBlockService'; import _permissionService from '@admin/services/permissionService'; +import render from '@common-test/render'; import _tableBuilderService, { Subject, } from '@common/services/tableBuilderService'; +import { Chart } from '@common/services/types/blocks'; import { waitFor } from '@testing-library/dom'; -import { render, screen, within } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { produce } from 'immer'; import React from 'react'; @@ -49,6 +51,48 @@ jest.mock('@common/hooks/useMedia', () => ({ })); describe('ReleaseDataBlockEditPage', () => { + const chart: Chart = { + title: 'Test chart title', + alt: 'Test chart alt', + type: 'verticalbar', + height: 300, + width: 600, + axes: { + major: { + type: 'major', + visible: true, + groupBy: 'timePeriod', + min: 0, + sortAsc: true, + size: 50, + showGrid: true, + tickConfig: 'default', + referenceLines: [], + dataSets: [ + { + filters: ['gender-female'], + indicator: 'authorised-absence-sessions', + }, + ], + }, + minor: { + type: 'minor', + visible: true, + min: 0, + sortAsc: true, + size: 50, + showGrid: true, + tickConfig: 'default', + referenceLines: [], + dataSets: [], + }, + }, + legend: { + position: 'top', + items: [], + }, + }; + const testDataBlock: ReleaseDataBlock = { id: 'block-1', dataBlockParentId: 'block-1-parent', @@ -82,49 +126,7 @@ describe('ReleaseDataBlockEditPage', () => { rows: [{ type: 'Indicator', value: 'authorised-absence-sessions' }], }, }, - charts: [ - { - title: 'Test chart title', - alt: 'Test chart alt', - type: 'verticalbar', - height: 300, - width: 600, - axes: { - major: { - type: 'major', - visible: true, - groupBy: 'timePeriod', - min: 0, - sortAsc: true, - size: 50, - showGrid: true, - tickConfig: 'default', - referenceLines: [], - dataSets: [ - { - filters: ['gender-female'], - indicator: 'authorised-absence-sessions', - }, - ], - }, - minor: { - type: 'minor', - visible: true, - min: 0, - sortAsc: true, - size: 50, - showGrid: true, - tickConfig: 'default', - referenceLines: [], - dataSets: [], - }, - }, - legend: { - position: 'top', - items: [], - }, - }, - ], + charts: [chart], }; const testDataBlockSummaries: ReleaseDataBlockSummary[] = [ diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageReadOnlyTabs.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageReadOnlyTabs.tsx index 5d0a09dc3a..d56f9ea9e4 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageReadOnlyTabs.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageReadOnlyTabs.tsx @@ -13,6 +13,7 @@ import mapFullTable from '@common/modules/table-tool/utils/mapFullTable'; import mapTableHeadersConfig from '@common/modules/table-tool/utils/mapTableHeadersConfig'; import tableBuilderQueries from '@common/queries/tableBuilderQueries'; import tableBuilderService from '@common/services/tableBuilderService'; +import { MapChart } from '@common/services/types/blocks'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import React, { useMemo, useState } from 'react'; @@ -25,9 +26,12 @@ const testId = (dataBlock: ReleaseDataBlock) => `Data block - ${dataBlock.name}`; const DataBlockPageReadOnlyTabs = ({ releaseId, dataBlock }: Props) => { + const isMapChart = dataBlock.charts[0]?.type === 'map'; const queryClient = useQueryClient(); const [selectedBoundaryLevel, setSelectedBoundaryLevel] = useState( - getMapInitialBoundaryLevel(dataBlock.charts), + isMapChart + ? getMapInitialBoundaryLevel(dataBlock.charts[0] as MapChart) + : undefined, ); const getDataBlockGeoJsonQuery = tableBuilderQueries.getDataBlockGeoJson( @@ -44,7 +48,7 @@ const DataBlockPageReadOnlyTabs = ({ releaseId, dataBlock }: Props) => { queryKey: getDataBlockGeoJsonQuery.queryKey, queryFn: selectedBoundaryLevel ? getDataBlockGeoJsonQuery.queryFn - : undefined, + : () => Promise.resolve({}), staleTime: Infinity, cacheTime: Infinity, keepPreviousData: true, @@ -57,8 +61,8 @@ const DataBlockPageReadOnlyTabs = ({ releaseId, dataBlock }: Props) => { tableBuilderService.getTableData( dataBlock.query, releaseId, - dataBlock.charts[0]?.type === 'map' - ? dataBlock.charts[0].boundaryLevel + isMapChart + ? (dataBlock.charts[0] as MapChart).boundaryLevel : undefined, ), [releaseId, dataBlock], @@ -73,7 +77,10 @@ const DataBlockPageReadOnlyTabs = ({ releaseId, dataBlock }: Props) => { ...tableData, subjectMeta: { ...tableData.subjectMeta, - locations: locationGeoJson ?? tableData.subjectMeta.locations, + locations: + selectedBoundaryLevel && locationGeoJson + ? locationGeoJson + : tableData.subjectMeta.locations, }, }); @@ -81,7 +88,13 @@ const DataBlockPageReadOnlyTabs = ({ releaseId, dataBlock }: Props) => { fullTable: table, tableHeaders: mapTableHeadersConfig(dataBlock.table.tableHeaders, table), }; - }, [tableData, locationGeoJson, isFetching, dataBlock.table.tableHeaders]); + }, [ + tableData, + locationGeoJson, + isFetching, + dataBlock.table.tableHeaders, + selectedBoundaryLevel, + ]); return ( diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageTabs.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageTabs.tsx index 0c6f4ebecd..ea3de9e322 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageTabs.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/DataBlockPageTabs.tsx @@ -82,7 +82,9 @@ const DataBlockPageTabs = ({ const tableData = await tableBuilderService.getTableData( query, releaseId, - getMapInitialBoundaryLevel(dataBlock.charts), + dataBlock.charts[0]?.type === 'map' + ? getMapInitialBoundaryLevel(dataBlock.charts[0]) + : undefined, ); const { initialStep, subjectMeta } = await getInitialStepSubjectMeta( diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx index d3cdb2add9..c7697f7772 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx @@ -68,7 +68,15 @@ const filterChartProps = (props: ChartBuilderChartProps): Chart => { const excludedProps: ( | keyof ChartBuilderChartProps | keyof InfographicChartProps - )[] = ['data', 'meta', 'getInfographic', 'file', 'titleType']; + | keyof MapBlockProps + )[] = [ + 'data', + 'meta', + 'getInfographic', + 'file', + 'titleType', + 'onBoundaryLevelChange', + ]; if (props.titleType === 'default') { excludedProps.push('title'); diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx index a8c29c8875..97dd740ddf 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx @@ -651,7 +651,6 @@ describe('ChartBuilder', () => { }, ], }, - onBoundaryLevelChange: function onBoundaryLevelChange() {}, }, undefined, ); diff --git a/src/explore-education-statistics-common/src/modules/charts/components/utils/getMapInitialBoundaryLevel.ts b/src/explore-education-statistics-common/src/modules/charts/components/utils/getMapInitialBoundaryLevel.ts index 05b78944fd..804eaff613 100644 --- a/src/explore-education-statistics-common/src/modules/charts/components/utils/getMapInitialBoundaryLevel.ts +++ b/src/explore-education-statistics-common/src/modules/charts/components/utils/getMapInitialBoundaryLevel.ts @@ -1,17 +1,14 @@ -import { Chart } from '@common/services/types/blocks'; +import { MapChart } from '@common/services/types/blocks'; import isEqual from 'lodash/isEqual'; import orderMapLegendItems from './orderMapLegendItems'; export default function getMapInitialBoundaryLevel( - charts: Chart[], + map: MapChart, ): number | undefined { - const chart = charts[0]; - if (chart?.type !== 'map' || chart?.legend === undefined) return undefined; - - const { dataSet: firstDataSet } = orderMapLegendItems(chart.legend)[0]; - const firstDataSetConfig = chart.map?.dataSetConfigs.find(({ dataSet }) => { + const { dataSet: firstDataSet } = orderMapLegendItems(map.legend)[0]; + const firstDataSetConfig = map.map?.dataSetConfigs.find(({ dataSet }) => { return isEqual(dataSet, firstDataSet); }); - return firstDataSetConfig?.boundaryLevel ?? chart.boundaryLevel; + return firstDataSetConfig?.boundaryLevel ?? map.boundaryLevel; } diff --git a/src/explore-education-statistics-common/src/modules/find-statistics/components/DataBlockTabs.tsx b/src/explore-education-statistics-common/src/modules/find-statistics/components/DataBlockTabs.tsx index 8a83d2fedc..f266ae53b1 100644 --- a/src/explore-education-statistics-common/src/modules/find-statistics/components/DataBlockTabs.tsx +++ b/src/explore-education-statistics-common/src/modules/find-statistics/components/DataBlockTabs.tsx @@ -46,7 +46,9 @@ const DataBlockTabs = ({ }: DataBlockTabsProps) => { const queryClient = useQueryClient(); const [selectedBoundaryLevel, setSelectedBoundaryLevel] = useState( - getMapInitialBoundaryLevel(dataBlock.charts), + dataBlock.charts[0]?.type === 'map' + ? getMapInitialBoundaryLevel(dataBlock.charts[0]) + : undefined, ); const { @@ -74,7 +76,7 @@ const DataBlockTabs = ({ queryKey: getDataBlockGeoJsonQuery.queryKey, queryFn: selectedBoundaryLevel ? getDataBlockGeoJsonQuery.queryFn - : undefined, + : () => Promise.resolve({}), staleTime: Infinity, cacheTime: Infinity, keepPreviousData: true, @@ -88,11 +90,14 @@ const DataBlockTabs = ({ ...tableData, subjectMeta: { ...tableData.subjectMeta, - locations: locationGeoJson ?? tableData.subjectMeta.locations, + locations: + selectedBoundaryLevel && locationGeoJson + ? locationGeoJson + : tableData.subjectMeta.locations, }, }) : undefined; - }, [tableData, locationGeoJson, isFetching]); + }, [tableData, locationGeoJson, isFetching, selectedBoundaryLevel]); const errorMessage = Could not load content; diff --git a/src/explore-education-statistics-common/src/services/types/blocks.ts b/src/explore-education-statistics-common/src/services/types/blocks.ts index 4595e3a67f..075d887db1 100644 --- a/src/explore-education-statistics-common/src/services/types/blocks.ts +++ b/src/explore-education-statistics-common/src/services/types/blocks.ts @@ -69,7 +69,7 @@ type LineChart = { }; }; -type MapChart = { +export type MapChart = { type: 'map'; axes: { major: AxisConfiguration;