Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix compare label on block map #1153

Merged
merged 1 commit into from
Sep 16, 2024
Merged

Fix compare label on block map #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions app/scripts/components/common/blocks/block-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useMemo, useState, useEffect } from 'react';
import styled from 'styled-components';
import { MapboxOptions } from 'mapbox-gl';
import * as dateFns from 'date-fns';
import {
convertProjectionToMapbox,
projectionDefault,
Expand Down Expand Up @@ -162,7 +163,6 @@ function MapBlock(props: MapBlockProps) {
}

const datasetLayers = getDatasetLayers(datasets);

const layersToFetch = useMemo(() => {
const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []);
let totalLayers = [baseMapStaticData];
Expand Down Expand Up @@ -259,9 +259,12 @@ function MapBlock(props: MapBlockProps) {

const computedCompareLabel = useMemo(() => {
// Use a provided label if it exist.
if (compareLabel && compareDataLayer) {
const providedLabel = compareDataLayer.data.mapLabel as string;
return providedLabel;
if (compareLabel) return compareLabel as string;
// Use label function from originalData.Compare
else if (baseDataLayer?.data.compare?.mapLabel) {
if (typeof baseDataLayer.data.compare.mapLabel === 'string') return baseDataLayer.data.compare.mapLabel;
const labelFn = baseDataLayer.data.compare.mapLabel as (unknown) => string;
return labelFn({dateFns, datetime: selectedDatetime, compareDatetime: compareToDate });
}

// Default to date comparison.
Expand All @@ -275,7 +278,7 @@ function MapBlock(props: MapBlockProps) {
: null;
}, [
compareLabel,
compareDataLayer,
baseDataLayer,
selectedDatetime,
compareToDate,
baseTimeDensity,
Expand Down
16 changes: 16 additions & 0 deletions app/scripts/components/sandbox/mdx-page/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,22 @@
</Figure>
</Block>

<Block type='wide'>
<Figure>
<Map
datasetId='no2'
layerId='no2-monthly'
dateTime='2020-03-01'
compareDateTime='2018-03-01'
compareLabel='overriding compare label'
projectionId='equirectangular'
allowProjectionChange
isComparing={true}
/>
<Caption>Comparing dates set manually</Caption>
</Figure>
</Block>

<Block type='full'>
<Figure>
<Map
Expand Down
4 changes: 2 additions & 2 deletions mock/datasets/no2.data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ layers:
layerId: nightlights-hd-monthly
mapLabel: |
::js ({ dateFns, datetime, compareDatetime }) => {
return `${dateFns.format(datetime, 'LLL yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
return `${dateFns.format(datetime, 'yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
}
legend:
unit:
Expand Down Expand Up @@ -163,7 +163,7 @@ layers:
layerId: no2-monthly-diff
mapLabel: |
::js ({ dateFns, datetime, compareDatetime }) => {
return `${dateFns.format(datetime, 'LLL yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
return `${dateFns.format(datetime, 'yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
}
legend:
unit:
Expand Down
Loading