Merge pull request #91 from Vizzuality/SKY30-138-fe-implement-the-marine

[SKY30-138]: restores patterns in establishment widget
Vizzuality · Nov 28, 2023 · 9eadcac · 9eadcac
2 parents df43b8a + 6888672
commit 9eadcac
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 35 deletions.
diff --git a/frontend/src/components/charts/horizontal-bar-chart/constants.ts b/frontend/src/components/charts/horizontal-bar-chart/constants.ts
diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx
@@ -6,17 +6,13 @@ import { cn } from '@/lib/classnames';
 
 import TooltipButton from '../chart-tooltip-button';
 
-import { BAR_BACKGROUNDS } from './constants';
-
-const DEFAULT_BAR_COLOR = 'white';
 const DEFAULT_MAX_PERCENTAGE = 100;
 const PROTECTION_TARGET = 30;
 
 type HorizontalBarChartProps = {
   className: string;
   data: {
-    barColor?: string;
-    barBackground?: keyof typeof BAR_BACKGROUNDS;
+    background: string;
     title: string;
     totalArea: number;
     protectedArea: number;
@@ -25,7 +21,7 @@ type HorizontalBarChartProps = {
 };
 
 const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({ className, data }) => {
-  const { title, barColor, barBackground, totalArea, protectedArea, info } = data;
+  const { title, background, totalArea, protectedArea, info } = data;
 
   const targetPositionPercentage = useMemo(() => {
     return (PROTECTION_TARGET * 100) / DEFAULT_MAX_PERCENTAGE;
@@ -62,19 +58,13 @@ const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({ className, data
           of {formattedArea} km<sup>2</sup>
         </span>
       </div>
-      <div
-        className={cn('relative my-2 flex', {
-          'h-3': !!barColor,
-          'h-3.5': !barColor,
-        })}
-      >
+      <div className="relative my-2 flex h-3.5">
         <span className="absolute top-1/2 h-px w-full border-b border-dashed border-black"></span>
         <span
-          className={cn('absolute top-0 bottom-0 left-0', { 'border border-black': !barColor })}
+          className="absolute top-0 bottom-0 left-0 border border-black !bg-cover"
           style={{
-            backgroundColor: barColor || DEFAULT_BAR_COLOR,
+            background,
             width: `${barFillPercentage}%`,
-            ...(barBackground && { backgroundImage: `url(${BAR_BACKGROUNDS[barBackground]})` }),
           }}
         ></span>
         <span

diff --git a/frontend/src/constants/establishment-stages-chart-bar-backgrounds.ts b/frontend/src/constants/establishment-stages-chart-bar-backgrounds.ts
diff --git a/frontend/src/containers/data-tool/sidebar/widgets/establishment-stages/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/establishment-stages/index.tsx
@@ -4,14 +4,20 @@ import { groupBy } from 'lodash-es';
 
 import HorizontalBarChart from '@/components/charts/horizontal-bar-chart';
 import Widget from '@/components/widget';
-import { ESTABLISHMENT_STAGES_CHART_BAR_BACKGROUNDS } from '@/constants/establishment-stages-chart-bar-backgrounds';
 import { useGetMpaaEstablishmentStageStats } from '@/types/generated/mpaa-establishment-stage-stat';
 import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
 
 type EstablishmentStagesWidgetProps = {
   location: LocationGroupsDataItemAttributes;
 };
 
+const PATTERNS = {
+  'proposed-committed': '/images/data-tool/chart-bgs/dots.svg',
+  implemented: '/images/data-tool/chart-bgs/crosses.svg',
+  'actively-managed': '/images/data-tool/chart-bgs/dashes.svg',
+  designated: '/images/data-tool/chart-bgs/arrows.svg',
+};
+
 const EstablishmentStagesWidget: React.FC<EstablishmentStagesWidgetProps> = ({ location }) => {
   // Default params: filter by location
   const defaultQueryParams = {
@@ -83,18 +89,16 @@ const EstablishmentStagesWidget: React.FC<EstablishmentStagesWidgetProps> = ({ l
   const widgetChartData = useMemo(() => {
     if (!mergedEstablishmentStagesStats.length) return [];
 
-    const parsedData = mergedEstablishmentStagesStats.map((establishmentStage) => {
+    return mergedEstablishmentStagesStats.map((establishmentStage) => {
       return {
         title: establishmentStage.name,
         slug: establishmentStage.slug,
-        barBackground: ESTABLISHMENT_STAGES_CHART_BAR_BACKGROUNDS[establishmentStage.slug],
+        background: `border-box #fff url(${PATTERNS[establishmentStage.slug]})`,
         totalArea: location.totalMarineArea,
         protectedArea: establishmentStage.area,
         info: establishmentStage.info,
       };
     });
-
-    return parsedData;
   }, [location, mergedEstablishmentStagesStats]);
 
   // If there's no widget data, don't display the widget

diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx
@@ -59,7 +59,7 @@ const HabitatWidget: React.FC<HabitatWidgetProps> = ({ location }) => {
       return {
         title: habitat.name,
         slug: habitat.slug,
-        barColor: HABITAT_CHART_COLORS[habitat.slug],
+        background: HABITAT_CHART_COLORS[habitat.slug],
         totalArea: stats.totalArea,
         protectedArea: stats.protectedArea,
         info: habitat?.info,

diff --git a/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx
@@ -63,7 +63,7 @@ const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location
       return {
         title: protectionLevel.name,
         slug: protectionLevel.slug,
-        barColor: PROTECTION_TYPES_CHART_COLORS[protectionLevel.slug],
+        background: PROTECTION_TYPES_CHART_COLORS[protectionLevel.slug],
         totalArea: location.totalMarineArea,
         protectedArea: stats.area,
         info: protectionLevel.info,