From 06edc9f0258b3c3d84959d0cd9f7da13e27f1c86 Mon Sep 17 00:00:00 2001 From: mluena Date: Mon, 29 Apr 2024 08:25:42 +0200 Subject: [PATCH] layer disclaimer --- src/components/map/drawing-tool/component.tsx | 12 +- src/containers/datasets/alerts/hooks.tsx | 412 ++++++++---------- src/containers/datasets/alerts/types.d.ts | 20 + src/containers/datasets/alerts/widget.tsx | 35 +- 4 files changed, 236 insertions(+), 243 deletions(-) diff --git a/src/components/map/drawing-tool/component.tsx b/src/components/map/drawing-tool/component.tsx index e37c451b7..5aca7613a 100644 --- a/src/components/map/drawing-tool/component.tsx +++ b/src/components/map/drawing-tool/component.tsx @@ -18,6 +18,7 @@ export type DrawControlProps = ConstructorParameters[0] & { customPolygon?: GeoJSON.FeatureCollection; onSetCustomPolygon?: (customPolygon) => void; styles?: typeof DRAWING_STYLES; + onError?: (message: string, error: Error) => void; }; const DEFAULT_PROPS: Partial = { @@ -49,7 +50,7 @@ export const DrawControl = (props: DrawControlProps) => { } ); - const { onSetCustomPolygon, customPolygon } = props; + const { onSetCustomPolygon, customPolygon, onError } = props; useEffect(() => { if (!customPolygon) { @@ -61,13 +62,18 @@ export const DrawControl = (props: DrawControlProps) => { if (!drawRef) return null; if (customPolygon) { - drawRef.add(customPolygon); + try { + drawRef.add(customPolygon); + } catch (error) { + console.error('Error adding custom polygon:', error); + onError?.('Error adding custom polygon:', error); + } if (onSetCustomPolygon) { onSetCustomPolygon(customPolygon); } } - }, [onSetCustomPolygon, customPolygon, drawRef]); + }, [onSetCustomPolygon, customPolygon, drawRef, onError]); return null; }; diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx index d5ec1d268..df49539ec 100644 --- a/src/containers/datasets/alerts/hooks.tsx +++ b/src/containers/datasets/alerts/hooks.tsx @@ -1,10 +1,7 @@ -import { useMemo } from 'react'; - import type { SourceProps, LayerProps } from 'react-map-gl'; import sortBy from 'lodash-es/sortBy'; -import Error from 'next/error'; import { useRouter } from 'next/router'; import { formatAxis } from 'lib/format'; @@ -13,7 +10,7 @@ import { analysisAtom } from 'store/analysis'; import { alertsEndDate, alertsStartDate } from 'store/widgets/alerts'; import { useQuery, UseQueryOptions } from '@tanstack/react-query'; -import { AxiosError, CanceledError } from 'axios'; +import { AxiosError, AxiosResponse, CanceledError } from 'axios'; import type { Visibility } from 'mapbox-gl'; import { CartesianViewBox } from 'recharts/types/util/types'; import { useRecoilValue, useSetRecoilState } from 'recoil'; @@ -25,7 +22,7 @@ import API_cloud_functions from 'services/cloud-functions'; import { MONTHS, MONTHS_CONVERSION } from './constants'; import Tooltip from './tooltip'; -import type { UseParamsOptions, DataResponse, CustomAreaGeometry } from './types'; +import type { UseParamsOptions, AlertData, CustomAreaGeometry } from './types'; const getStops = () => { const colorSchema = ['rgba(199, 43, 214, 1)', 'rgba(235, 68, 68, 0.7)', 'rgba(255, 194, 0, 0.5)']; @@ -100,18 +97,17 @@ const DefaultTick = ({ x, y, payload }) => { const getTotal = (data: { count: number }[]) => data?.reduce((previous: number, current: { count: number }) => current.count + previous, 0); -export function useAlerts( +export function useAlerts( startDate: { label: string; value: string }, endDate: { label: string; value: string }, params?: UseParamsOptions, dataParams?: CustomAreaGeometry, - queryOptions?: UseQueryOptions, + queryOptions?: UseQueryOptions, onCancel?: () => void ) { const setStartDate = useSetRecoilState(alertsStartDate); const setEndDate = useSetRecoilState(alertsEndDate); const { - push, query: { params: queryParams }, } = useRouter(); @@ -131,15 +127,12 @@ export function useAlerts( ...dataParams, }, }) - .then((response) => { - console.log(response); + .then((response: AxiosResponse) => { return response.data; }) .catch((err: CanceledError | AxiosError) => { - console.log(err, 'entra en el rr'); if (err.code === 'ERR_CANCELED') onCancel?.(); - push('/500'); - return ; + throw new Error('Error fetching alerts'); }); } @@ -151,239 +144,218 @@ export function useAlerts( location_id, ...params, }, - }).then((response) => { - console.log(response, 'response no analysis'); - return response.data; - }); + }).then((response) => response.data); } }; - const query = useQuery(['alerts', params, location_id], fetchAlerts, { - placeholderData: [], + return useQuery(['alerts', params, location_id], fetchAlerts, { select: (data) => { - if (!data) return null; - if (data?.props?.statusCode === 500) { - console.log('dentro', data.props); - return ; - } - console.log(data, 'data'); - return data; - }, - ...queryOptions, - }); + if (!data) return undefined; + const fullData = getData(data); - const { data, isFetched } = query; - console.log('isError', data); - // if (isError) return ; - const fullData = getData(data); - const noData = isFetched && !fullData?.length; - - const startDateOptions = fullData.map((d) => d.startDate); - const endDateOptions = fullData.map((d) => d.endDate); - - const defaultStartDate = startDateOptions[0]; - const defaultEndDate = endDateOptions[endDateOptions.length - 1]; - - const selectedStartDate = startDate || defaultStartDate; - const selectedEndDate = endDate || defaultEndDate; - - if (selectedEndDate) setEndDate(selectedEndDate); - if (selectedStartDate) setStartDate(selectedStartDate); - const dataFiltered = - Array.isArray(data) && - data.filter( - (d) => selectedStartDate?.value <= d.date.value && d.date.value <= selectedEndDate?.value - ); - - const fixedXAxis = fullData.map((d) => d.year); - - const chartData = getData(dataFiltered); - const startIndex = fullData.findIndex((d) => d.startDate?.value === selectedStartDate?.value); - const endIndex = fullData.findIndex((d) => d.endDate?.value === selectedEndDate?.value); - - return useMemo(() => { - const alertsTotal = getTotal(dataFiltered); - - const config = { - data: chartData, - type: 'line', - dataKey: 'alerts', - height: 350, - cartesianGrid: { - vertical: false, - horizontal: false, - }, - margin: { top: 50, right: 10, left: 10, bottom: 35 }, - label: 'alerts', - xKey: 'name', - chartBase: { - lines: { - alerts: { - stroke: 'url(#colorAlerts)', - strokeWidth: 2.5, - isAnimationActive: false, + const startDateOptions = fullData.map((d) => d.startDate); + const endDateOptions = fullData.map((d) => d.endDate); + + const defaultStartDate = startDateOptions[0]; + const defaultEndDate = endDateOptions[endDateOptions.length - 1]; + + const selectedStartDate = startDate || defaultStartDate; + const selectedEndDate = endDate || defaultEndDate; + + if (selectedEndDate) setEndDate(selectedEndDate); + if (selectedStartDate) setStartDate(selectedStartDate); + + const dataFiltered = + Array.isArray(data) && + data.filter( + (d) => selectedStartDate?.value <= d.date.value && d.date.value <= selectedEndDate?.value + ); + + const fixedXAxis = fullData.map((d) => d.year); + + const chartData = getData(dataFiltered); + const startIndex = fullData.findIndex((d) => d.startDate?.value === selectedStartDate?.value); + const endIndex = fullData.findIndex((d) => d.endDate?.value === selectedEndDate?.value); + + const alertsTotal = getTotal(dataFiltered); + + const config = { + data: chartData, + type: 'line', + dataKey: 'alerts', + height: 350, + cartesianGrid: { + vertical: false, + horizontal: false, + }, + margin: { top: 50, right: 10, left: 10, bottom: 35 }, + label: 'alerts', + xKey: 'name', + chartBase: { + lines: { + alerts: { + stroke: 'url(#colorAlerts)', + strokeWidth: 2.5, + isAnimationActive: false, + }, }, }, - }, - xAxis: { - tick: TickSmall, - type: 'category', - }, - yAxis: { - tick: { - fontSize: 10, - fill: 'rgba(0,0,0,0.54)', + xAxis: { + tick: TickSmall, + type: 'category', }, + yAxis: { + tick: { + fontSize: 10, + fill: 'rgba(0,0,0,0.54)', + }, - width: 40, - interval: 0, - orientation: 'right', - value: 'alerts', - label: ({ viewBox }: { viewBox: CartesianViewBox }) => { - const { x, y } = viewBox; - - return ( - - - { + const { x, y } = viewBox; + + return ( + + - Alerts - - - - ); - }, - type: 'number', - }, - tooltip: { - content: (properties) => { - return ; + + Alerts + + + + ); + }, + type: 'number', }, - }, - }; - const configBrush = { - data: fullData, - type: 'line', - dataKey: 'alerts', - height: 100, - cartesianGrid: { - vertical: false, - horizontal: false, - }, - referenceAreas: [ - { - x1: 0, - x2: 11, - y1: -100, - y2: 480, - fill: 'url(#diagonal-stripe-1) #000', + tooltip: { + content: (properties) => { + return ; + }, }, - { - x1: startDate?.value, - x2: endDate?.value, - y1: -100, - y2: 480, - fill: '#fff', - fillOpacity: 1, + }; + const configBrush = { + data: fullData, + type: 'line', + dataKey: 'alerts', + height: 100, + cartesianGrid: { + vertical: false, + horizontal: false, }, - ], - margin: { top: 20, right: 40, left: 10, bottom: 5 }, - gradients: { - key: { - attributes: { - id: 'colorAlerts', + referenceAreas: [ + { x1: 0, - y1: 0, - x2: 0, - y2: 1, + x2: 11, + y1: -100, + y2: 480, + fill: 'url(#diagonal-stripe-1) #000', }, - stops: getStops(), - }, - }, - patterns: { - diagonal: { - attributes: { - id: 'diagonal-stripe-1', - patternUnits: 'userSpaceOnUse', - patternTransform: 'rotate(-45)', - width: 4, - height: 6, + { + x1: startDate?.value, + x2: endDate?.value, + y1: -100, + y2: 480, + fill: '#fff', + fillOpacity: 1, + }, + ], + margin: { top: 20, right: 40, left: 10, bottom: 5 }, + gradients: { + key: { + attributes: { + id: 'colorAlerts', + x1: 0, + y1: 0, + x2: 0, + y2: 1, + }, + stops: getStops(), }, - children: { - rect2: { - tag: 'rect', - x: 0, - y: 0, + }, + patterns: { + diagonal: { + attributes: { + id: 'diagonal-stripe-1', + patternUnits: 'userSpaceOnUse', + patternTransform: 'rotate(-45)', width: 4, height: 6, - transform: 'translate(0,0)', - fill: '#d2d2d2', }, - rect: { - tag: 'rect', - x: 0, - y: 0, - width: 3, - height: 6, - transform: 'translate(0,0)', - fill: '#fff', + children: { + rect2: { + tag: 'rect', + x: 0, + y: 0, + width: 4, + height: 6, + transform: 'translate(0,0)', + fill: '#d2d2d2', + }, + rect: { + tag: 'rect', + x: 0, + y: 0, + width: 3, + height: 6, + transform: 'translate(0,0)', + fill: '#fff', + }, }, }, }, - }, - xKey: 'year', - chartBase: { - lines: { - alerts: { - stroke: 'url(#colorAlerts)', - strokeWidth: 2.5, - isAnimationActive: false, + xKey: 'year', + chartBase: { + lines: { + alerts: { + stroke: 'url(#colorAlerts)', + strokeWidth: 2.5, + isAnimationActive: false, + }, }, }, - }, - xAxis: { - tick: DefaultTick, - ticks: Array.from(new Set(fixedXAxis)), - interval: 0, - type: 'category', - }, + xAxis: { + tick: DefaultTick, + ticks: Array.from(new Set(fixedXAxis)), + interval: 0, + type: 'category', + }, - tooltip: false, - customBrush: { - margin: { top: 60, right: 20, left: 15, bottom: 80 }, - startIndex, - endIndex, - }, - }; - - return { - ...query, - config, - fullData, - configBrush, - selectedStartDate, - selectedEndDate, - startDateOptions, - endDateOptions, - dateOptions: startDateOptions, - alertsTotal: formatAxis(alertsTotal), - chartData, - defaultStartDate, - defaultEndDate, - noData, - }; - }, [query, startDate, endDate, data, startIndex, endIndex, selectedStartDate, selectedEndDate]); + tooltip: false, + customBrush: { + margin: { top: 60, right: 20, left: 15, bottom: 80 }, + startIndex, + endIndex, + }, + }; + return { + alertsTotal: formatAxis(alertsTotal), + startDateOptions, + selectedStartDate, + config, + fullData, + configBrush, + selectedEndDate, + endDateOptions, + defaultStartDate, + defaultEndDate, + }; + }, + ...queryOptions, + }); } // dataset layer diff --git a/src/containers/datasets/alerts/types.d.ts b/src/containers/datasets/alerts/types.d.ts index fc2267dfa..cb14c5f9a 100644 --- a/src/containers/datasets/alerts/types.d.ts +++ b/src/containers/datasets/alerts/types.d.ts @@ -8,6 +8,26 @@ export type DataResponse = { data: { date: { label: string; value: number }; }; + selectedStartDate: string; + endDateOptions: { label: string; value: number }[]; }; export type CustomAreaGeometry = { geometry: GeoJSON.FeatureCollection }; + +export interface AlertData { + alertsTotal: string; + startDateOptions: { label: string; value: string }[]; + selectedStartDate: { label: string; value: string }; + endDateOptions: { label: string; value: string }[]; + selectedEndDate: { label: string; value: string }; + config: unknown; + configBrush: { + customBrush: { + startIndex: number; + endIndex: number; + }; + }; + defaultStartDate: { label: string; value: string }; + defaultEndDate: { label: string; value: string }; + fullData: unknown; +} diff --git a/src/containers/datasets/alerts/widget.tsx b/src/containers/datasets/alerts/widget.tsx index 03ab2e0d0..076cd8ba3 100644 --- a/src/containers/datasets/alerts/widget.tsx +++ b/src/containers/datasets/alerts/widget.tsx @@ -33,7 +33,6 @@ const AlertsWidget = () => { const { customGeojson } = useRecoilValue(drawingToolAtom); const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom); const activeLayers = useRecoilValue(activeLayersAtom); - const [isCanceled, setIsCanceled] = useState(false); const handleQueryCancellation = useCallback(() => { @@ -45,24 +44,7 @@ const AlertsWidget = () => { [activeLayers] ); - const { - isLoading, - isFetched, - isError, - isPlaceholderData, - refetch, - alertsTotal, - startDateOptions, - selectedStartDate, - endDateOptions, - selectedEndDate, - config, - configBrush, - fullData, - defaultStartDate, - defaultEndDate, - noData, - } = useAlerts( + const { data, isLoading, isFetched, isError, isPlaceholderData, refetch } = useAlerts( startDate, endDate, null, @@ -79,7 +61,20 @@ const AlertsWidget = () => { await refetch(); }, [refetch]); - if (noData) return ; + if (!data) return ; + + const { + alertsTotal, + startDateOptions, + selectedStartDate, + endDateOptions, + selectedEndDate, + config, + configBrush, + fullData, + defaultStartDate, + defaultEndDate, + } = data; return (