alerts axis

Vizzuality · Apr 16, 2024 · cd8c02d · cd8c02d
1 parent 96c73ff
commit cd8c02d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 45 deletions.
diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx
@@ -25,35 +25,6 @@ import API_cloud_functions from 'services/cloud-functions';
 import Tooltip from './tooltip';
 import type { UseParamsOptions, DataResponse, CustomAreaGeometry } from './types';
 
-interface DataEntry {
-  date: {
-    value: string; // the date in YYYY-MM-DD format
-  };
-  count: number;
-}
-
-function extractMonthsOrYears(data: DataEntry[]): string[] {
-  const monthSet = new Set<string>();
-  const yearSet = new Set<string>();
-
-  data.forEach((entry) => {
-    const dateValue = entry.date.value;
-    const dateObject = new Date(dateValue);
-    // Format the date to "Month Year" (e.g., "May 2024")
-    const formattedMonthYear = dateObject.toLocaleString('en-US', {
-      month: 'long', // Full month name
-      year: 'numeric', // Four digit year
-    });
-    const yearOnly = dateObject.getFullYear().toString(); // Get the full year as a string
-
-    monthSet.add(formattedMonthYear);
-    yearSet.add(yearOnly);
-  });
-
-  // Determine which set to return based on the size of the monthSet
-  return monthSet.size > 19 ? Array.from(yearSet) : Array.from(monthSet);
-}
-
 // widget data
 const months = [
   { label: 'January', value: 1, shortLabel: 'Jan' },
@@ -114,7 +85,9 @@ const getData = (data) =>
         title: month.label,
         name: `${monthsConversion[month.label]} '${new Date(year + 1, 0, 0).toLocaleDateString(
           'en',
-          { year: '2-digit' }
+          {
+            year: '2-digit',
+          }
         )}`,
         alerts: d.count,
         label: `${month.label}, ${year}`,
@@ -150,7 +123,7 @@ const TickSmall = ({ x, y, payload }) => {
   );
 };
 
-const getTotal = (data) =>
+const getTotal = (data: { count: number }[]) =>
   data?.reduce((previous: number, current: { count: number }) => current.count + previous, 0);
 
 export function useAlerts<T>(
@@ -230,12 +203,12 @@ export function useAlerts<T>(
     );
 
   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 dataLimitOverflow = dataFiltered.length > 16;
 
     const config = {
       data: chartData,
@@ -248,7 +221,7 @@ export function useAlerts<T>(
       },
       margin: { top: 50, right: 10, left: 10, bottom: 35 },
       label: 'alerts',
-      xKey: 'name',
+      xKey: dataLimitOverflow ? 'year' : 'name',
       chartBase: {
         lines: {
           alerts: {
@@ -260,7 +233,8 @@ export function useAlerts<T>(
       },
       xAxis: {
         tick: TickSmall,
-        interval: 0,
+        ...(dataLimitOverflow && { ticks: Array.from(new Set(chartData.map((d) => d.year))) }),
+        interval: dataLimitOverflow ? 'preserveStartEnd' : 0,
         type: 'category',
       },
       yAxis: {
@@ -376,7 +350,7 @@ export function useAlerts<T>(
         },
       },
 
-      xKey: 'name',
+      xKey: 'year',
       chartBase: {
         lines: {
           alerts: {
@@ -388,7 +362,7 @@ export function useAlerts<T>(
       },
       xAxis: {
         tick: TickSmall,
-        interval: 0,
+        interval: 'preserveStartEnd',
         type: 'category',
       },
 

diff --git a/src/containers/datasets/customize-widgets-deck/widget.tsx b/src/containers/datasets/customize-widgets-deck/widget.tsx
@@ -22,6 +22,7 @@ import ARROW_SVG from 'svgs/ui/arrow-filled.svg?sprite';
 
 const CustomizeWidgetsDeck = () => {
   const displayedWidgets = useRecoilValue(activeWidgetsAtom);
+
   const [animateState, setAnimateState] = useState('start');
 
   useEffect(() => {
@@ -49,7 +50,7 @@ const CustomizeWidgetsDeck = () => {
             <Dialog>
               <DialogTrigger asChild>
                 <span className={`${WIDGET_SELECT_STYLES} print:border-hidden`}>
-                  {displayedWidgets.length} of {widgets.length}
+                  {displayedWidgets.length} of {widgets.length - 1}
                   <Icon
                     icon={ARROW_SVG}
                     className={`${WIDGET_SELECT_ARROW_STYLES} print:hidden`}

diff --git a/src/containers/datasets/drawing-upload-tool/index.tsx b/src/containers/datasets/drawing-upload-tool/index.tsx
@@ -85,11 +85,13 @@ const WidgetDrawingUploadTool = () => {
           'cursor-default opacity-30': !!customGeojson || isDrawingToolEnabled,
         })}
       >
-        <input
-          data-testid="shapefile-upload"
-          {...getInputProps()}
-          disabled={isDrawingToolEnabled || !!customGeojson}
-        />
+        {!uploadedGeojson && (
+          <input
+            data-testid="shapefile-upload"
+            {...getInputProps()}
+            disabled={isDrawingToolEnabled || !!customGeojson || !!uploadedGeojson}
+          />
+        )}
         <div className="flex flex-col items-center space-y-1">
           {uploadedGeojson || isDrawingUploadToolEnabled ? (
             <DeleteDrawingButton size="sm" />

diff --git a/src/containers/map/delete-drawing-button/index.tsx b/src/containers/map/delete-drawing-button/index.tsx
@@ -52,10 +52,8 @@ export const DeleteDrawingButton = ({ size = 'md' }: { size?: 'sm' | 'md' }) =>
     if (locationTool === 'worldwide') {
       handleWorldwideView();
     }
-
     resetDrawingState();
     resetAnalysisState();
-
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     replace(`/?${queryParams}`, null);
   }, [

diff --git a/src/hooks/analysis/index.ts b/src/hooks/analysis/index.ts
@@ -24,6 +24,7 @@ const fetchUploadFile = (data: FormData) =>
 export const useUploadFile = (
   file: File,
   onUploadFile?: (geojson: UploadFileResponse) => void,
+  enabled?: boolean,
   queryOptions?: QueryObserverOptions<UploadFileResponse>
 ) => {
   const [, setUploadErrorModal] = useRecoilState(uploadFileAtom);
@@ -32,7 +33,7 @@ export const useUploadFile = (
 
   return useQuery(['converter'], () => fetchUploadFile(data), {
     ...queryOptions,
-    enabled: !!file,
+    enabled: !!file && enabled,
     onSuccess: (geojson) => {
       onUploadFile?.(geojson);
     },