WIP

Vizzuality · Mar 5, 2024 · 0aa6de6 · 0aa6de6
1 parent 462570b
commit 0aa6de6
Show file tree

Hide file tree

Showing 18 changed files with 598 additions and 104 deletions.
diff --git a/client/package.json b/client/package.json
@@ -73,6 +73,7 @@
     "react-map-gl": "7.1.7",
     "react-range": "1.8.14",
     "react-redux": "8.0.2",
+    "react-world-flags": "1.6.0",
     "recharts": "2.9.0",
     "rooks": "7.14.1",
     "sharp": "0.32.6",

diff --git a/client/src/components/button/component.tsx b/client/src/components/button/component.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import classNames from 'classnames';
 import Link from 'next/link';
 import { pickBy } from 'lodash-es';
 
 import Loading from 'components/loading';
+import { cn } from '@/lib/utils';
 
 import type { LinkProps } from 'next/link';
 import type { FC } from 'react';
@@ -53,15 +53,15 @@ const PRIMARY =
 const BASE_BORDER =
   'border bg-transparent focus:outline-offset-2 focus:outline focus:outline-none focus:ring-1';
 
-const SECONDARY = classNames(
+const SECONDARY = cn(
   BASE_BORDER,
   'border border-gray-300 focus:border-navy-400 text-gray-600 hover:bg-gray-50 focus:ring-green-700',
 );
 
 const TERTIARY =
   'border-transparent shadow-sm text-white bg-gray-500 hover:bg-gray-600 focus:outline-offset-2 focus:outline focus:outline-gray-500/20';
 
-const PRIMARY_LIGHT = classNames(BASE_BORDER, 'text-navy-400 border-navy-400');
+const PRIMARY_LIGHT = cn(BASE_BORDER, 'text-navy-400 border-navy-400');
 
 export const THEME = {
   default: COMMON_CLASSNAMES,
@@ -106,7 +106,7 @@ const buildClassName = ({
   size,
   variant,
 }: ButtonProps | AnchorProps) =>
-  classNames(
+  cn(
     classes.base,
     danger ? classes.variant[variant].danger : classes.variant[variant].default,
     classes.size[size],
@@ -121,7 +121,7 @@ const ButtonTemplate: React.FC<AnchorButtonProps> = ({ danger, icon, loading, si
     {!loading && icon && (
       <div className="mr-2">
         {React.cloneElement(icon, {
-          className: classNames(
+          className: cn(
             {
               'w-3 h-3': size === 'xs',
               'w-4 h-4': size !== 'xs',
@@ -134,7 +134,7 @@ const ButtonTemplate: React.FC<AnchorButtonProps> = ({ danger, icon, loading, si
     )}
     {loading && (
       <Loading
-        className={classNames('mr-2', {
+        className={cn('mr-2', {
           'h-3 w-3': size === 'xs',
           'h-4 w-4': size !== 'xs',
           'text-gray-900': variant === 'white' && !danger,

diff --git a/client/src/components/icons/commodities/cattle.tsx b/client/src/components/icons/commodities/cattle.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const CattleSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M7.637 14.661a.428.428 0 0 0-.43.391l-.099.9c.196 1.663.392 2.641.392 2.641h.88l.49-3.834c-.47-.04-.862-.078-1.175-.117-.02.02-.039.02-.058.02Zm5.595.156h-.02c-.391.02-.782.04-1.174.04.216 2.328.509 3.736.509 3.736h.88l.333-2.582c-.02-.255-.059-.528-.078-.802a.462.462 0 0 0-.45-.392Z" />
+      <path d="M21.546 8.93c-.156-.725-.802-.255-1.252-.686-.254-.234-.939-.782-1.565-1.369.059-.215.255-.646.783-1.154.098-.098.02-.274-.118-.255-.9.157-1.29.372-1.643.763-.235-.371-.626-.684-.88-.86-.118-.079-.255-.02-.274.117-.059.352-.098.998.117 1.448.117.274.254.45.391.587-.195 0-.41-.098-.606-.372-.509.332-1.056.626-1.39.626H7.462c-.803 0-1.566.352-2.016.998-.254-.04-.723-.079-1.154.215-.587.391-.88 1.213-.92 2.426-.038 1.408-.038 2.386-.038 3.032-.196.059-.333.235-.333.744 0 .45.215 1.036.391 1.428.079.156.352.156.411 0 .176-.392.391-.978.391-1.428.02-.47-.117-.646-.313-.705 0-.645 0-1.624.04-3.032.02-.998.254-1.683.665-1.976a.845.845 0 0 1 .489-.157c-.568.979-.411 2.387-.313 4.07.195 3.188.626 5.204.626 5.204h.9l.391-3.6a.95.95 0 0 1 1.056-.841 35.54 35.54 0 0 0 5.44.156.983.983 0 0 1 1.016.86c.216 2.153.49 3.444.49 3.444h.88l.567-4.343c.744-.49 1.174-1.8 1.409-2.739a1.382 1.382 0 0 1 1.35-1.056h1.428c.782-.02 1.448-.47 1.232-1.546Zm-3.13-.627a.392.392 0 0 1-.391-.391c0-.215.176-.391.391-.391.215 0 .391.176.391.39.02.196-.156.392-.39.392Z" />
+    </svg>
+  );
+};
+
+export default CattleSVG;
diff --git a/client/src/components/icons/commodities/cocoa.tsx b/client/src/components/icons/commodities/cocoa.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const CocoaSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      fill="currentColor"
+      viewBox="0 0 24 25"
+      {...props}
+    >
+      <path d="M15.15 7.15c-3.055-.371-6.125 1.136-7.869 3.876-1.742 2.737-1.773 6.105-.091 8.633 3.053.368 6.127-1.14 7.868-3.877 1.744-2.74 1.773-6.108.092-8.633Zm-2.617 9.514a1.483 1.483 0 0 1-1.96.495 1.425 1.425 0 0 1-.212.603 1.483 1.483 0 0 1-2.015.466l-.354-.216a1.42 1.42 0 0 1-.46-1.98c.12-.188.278-.339.458-.452a1.42 1.42 0 0 1-.406-1.942c.169-.266.41-.457.682-.568a1.42 1.42 0 0 1 .076-1.395 1.476 1.476 0 0 1 1.245-.68 1.431 1.431 0 0 1 .22-.85 1.483 1.483 0 0 1 1.959-.498c.024-.209.094-.414.213-.6a1.483 1.483 0 0 1 2.015-.467l.353.216a1.42 1.42 0 0 1 .001 2.43 1.42 1.42 0 0 1 .408 1.945c-.168.264-.41.455-.683.567.213.43.205.956-.075 1.396a1.483 1.483 0 0 1-1.245.68c.019.285-.05.583-.22.85ZM19.1 7.122l-1.417-.867a1.274 1.274 0 0 0-1.731.4l1.417.867a1.275 1.275 0 0 0 1.732-.4Zm-5.28-1.773 1.418.867a1.22 1.22 0 0 0-.395-1.701l-1.418-.867a1.222 1.222 0 0 0 .395 1.7Z" />
+      <path d="m13.099 13.857-.708-.433a.635.635 0 0 0-.866.2.61.61 0 0 0 .197.85l.709.433a.638.638 0 0 0 .865-.2.608.608 0 0 0-.197-.85Zm-3.152-.472a.638.638 0 0 0 .865-.2.61.61 0 0 0-.197-.85l-.708-.433a.635.635 0 0 0-.866.2.61.61 0 0 0 .198.85l.708.433Zm2.685-1.505a.61.61 0 0 0 .197.85l.354.217a.638.638 0 0 0 .865-.2.61.61 0 0 0-.197-.85l-.354-.216a.633.633 0 0 0-.865.2Zm.239-1.545.355.217a.638.638 0 0 0 .864-.2.61.61 0 0 0-.197-.85l-.354-.216a.635.635 0 0 0-.865.2.61.61 0 0 0 .197.85Zm-3.406 6.139-.354-.217a.635.635 0 0 0-.865.2.61.61 0 0 0 .197.85l.354.216a.638.638 0 0 0 .865-.2.608.608 0 0 0-.197-.85Zm1.235-5.049.354.217a.638.638 0 0 0 .865-.2.61.61 0 0 0-.197-.85l-.354-.216a.635.635 0 0 0-.866.2.61.61 0 0 0 .198.85Zm.937 3.958-.354-.217a.635.635 0 0 0-.865.2.61.61 0 0 0 .197.85l.354.216a.638.638 0 0 0 .865-.2.608.608 0 0 0-.197-.85Zm-1.932-.455a.61.61 0 0 0-.197-.85l-.354-.216a.635.635 0 0 0-.865.2.61.61 0 0 0 .197.85l.354.216a.64.64 0 0 0 .865-.2Z" />
+    </svg>
+  );
+};
+
+export default CocoaSVG;
diff --git a/client/src/components/icons/commodities/coffee.tsx b/client/src/components/icons/commodities/coffee.tsx
@@ -0,0 +1,18 @@
+import type { SVGAttributes } from 'react';
+
+const CoffeeSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      fill="currentColor"
+      viewBox="0 0 24 25"
+      {...props}
+    >
+      <path d="M7.776 11.806c-1.378.172-2.562 1.649-2.75 3.555-.208 2.11.88 3.943 2.436 4.122.327-.913.55-2.155.37-3.776-.184-1.654-.158-2.938-.056-3.9Zm.579.007c-.103.928-.136 2.19.045 3.832.178 1.6-.007 2.861-.314 3.82 1.33-.236 2.455-1.687 2.638-3.542.204-2.078-.85-3.887-2.37-4.11Zm6.221 3.864c.91-1.393 1.747-2.368 2.438-3.046-1.173-.744-3.026-.357-4.383.995-1.502 1.495-1.827 3.604-.741 4.73.833-.497 1.794-1.314 2.686-2.679Zm2.881-2.673c-.67.652-1.497 1.604-2.401 2.987-.882 1.348-1.825 2.204-2.672 2.748 1.176.664 2.967.259 4.288-1.056 1.479-1.474 1.815-3.54.785-4.68Zm-4.707-.496c-.039-.97-.298-2.204-1.07-3.64-.79-1.465-1.246-2.665-1.512-3.597-1.214.676-1.76 2.488-1.22 4.326.596 2.034 2.293 3.327 3.801 2.91Zm.572-.25c1.145-.717 1.645-2.484 1.12-4.272C13.854 5.982 12.2 4.7 10.707 5.06c.253.9.694 2.081 1.477 3.536.763 1.418 1.064 2.657 1.138 3.66Z" />
+    </svg>
+  );
+};
+
+export default CoffeeSVG;
diff --git a/client/src/components/icons/commodities/palm-oil.tsx b/client/src/components/icons/commodities/palm-oil.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const PalmOilSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M11.713 13.353a3.137 3.137 0 0 1-2.825 1.762 3.15 3.15 0 0 1-3.144-3.144c0-1.503 1.884-4.571 2.992-6.15a.181.181 0 0 1 .137-.077c.06 0 .106.03.137.076a32.77 32.77 0 0 1 1.655 2.628 4.03 4.03 0 0 1 .699-.304 27.214 27.214 0 0 0-1.716-2.75.929.929 0 0 0-.76-.394.95.95 0 0 0-.76.395C7.613 6.139 5 9.936 5 11.986a3.896 3.896 0 0 0 3.888 3.889 3.898 3.898 0 0 0 3.828-3.19c-.335.122-.669.35-1.003.668Z" />
+      <path d="M7.536 13.46a.374.374 0 0 1-.288-.137 2.14 2.14 0 0 1-.471-1.337c0-.273.091-.653.288-1.154a.37.37 0 0 1 .486-.213.37.37 0 0 1 .213.486c-.213.547-.243.79-.243.881 0 .32.106.623.304.866a.37.37 0 0 1-.289.608Zm9.524-3.63a4.15 4.15 0 0 1 1.442-.304c.198 0 .258-.273.076-.364-1.033-.486-2.202-.517-3.114-.167-.44-.76-1.275-1.352-2.217-1.58-.182-.046-.304.167-.182.319a4.5 4.5 0 0 1 .698 1.048c-1.169-.35-2.733.045-3.781 1.154-.122.137-.016.35.167.32 1.002-.153 1.837-.198 2.475-.062-1.032.334-1.853 1.428-2.02 2.75-.03.182.198.303.32.151.971-1.109 2.08-1.458 3.052-1.184-.926 1.944-1.412 4.784-1.595 6.333H10.65a.256.256 0 0 0-.258.258c0 .152.121.258.258.258h5.346a.256.256 0 0 0 .258-.258.256.256 0 0 0-.258-.258H14.31c-.121-1.488.046-4.131.775-5.923.926.243 1.625 1.184 1.883 2.658.03.182.289.227.365.045.5-1.139.425-2.475-.289-3.341.699.288 1.443.866 2.066 1.534.121.136.349.03.334-.152-.182-1.55-1.215-2.825-2.385-3.235Z" />
+    </svg>
+  );
+};
+
+export default PalmOilSVG;
diff --git a/client/src/components/icons/commodities/rubber.tsx b/client/src/components/icons/commodities/rubber.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const RubberSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M10.905 5.604a.257.257 0 0 1 .335.154.265.265 0 0 1-.153.339l-2.057.78c.003.16.004.323.005.492l1.87-.71a.257.257 0 0 1 .335.154.266.266 0 0 1-.153.34L9.04 7.93l.002.492 1.864-.709a.257.257 0 0 1 .335.155.266.266 0 0 1-.153.339l-2.048.777c0 .241-.002.49-.004.74a.77.77 0 0 1 .855.221c.068.079.12.17.152.268.137.408.5.625 1.078.947.6.335 1.343.748 1.687 1.62l.039.06.3.529h.834c-.236-4.434-.04-9.016-.036-9.09a.267.267 0 0 0-.068-.19.26.26 0 0 0-.181-.087c-.145-.003-4.343-.005-4.467 0a.258.258 0 0 0-.235.172.267.267 0 0 0-.016.102c.001.031.027.817.047 2.042l1.88-.715ZM14.299 17c-.418.215-.88.327-1.349.327-1.634 0-2.977-1.333-3.124-3.1a.801.801 0 0 1 .204-.602.781.781 0 0 1 .575-.256h.586l.086-.15c-.16-.244-.459-.419-.91-.67-.447-.248-.967-.538-1.36-1.02-.08 3.442-.33 7.191-.991 9.004a.267.267 0 0 0 .124.325c.037.02.078.03.12.03h6.644a.258.258 0 0 0 .22-.121.266.266 0 0 0 .017-.253c-.38-.833-.65-2.078-.842-3.514Z" />
+      <path d="M12.393 13.106a.234.234 0 0 0-.044-.057 2.03 2.03 0 0 0-.723-.952c-.53-.406-1.197-.622-1.68-1.093a1.532 1.532 0 0 1-.397-.621.263.263 0 0 0-.132-.15.257.257 0 0 0-.347.119.267.267 0 0 0-.015.2 2 2 0 0 0 .335.615c.423.534 1.064.806 1.628 1.15l.008.005c.385.237.698.498.839.921l-.373.654h-.887a.26.26 0 0 0-.247.179.265.265 0 0 0-.013.107c.124 1.492 1.244 2.616 2.605 2.616 1.36 0 2.48-1.124 2.604-2.616a.267.267 0 0 0-.155-.263.26.26 0 0 0-.104-.023h-2.45l-.452-.791Zm-.45 1.055.225-.396.226.396a.266.266 0 0 1-.096.36.258.258 0 0 1-.355-.096.266.266 0 0 1 0-.264Zm3.053.264c-.207 1.07-1.046 1.847-2.046 1.847-1 0-1.84-.776-2.046-1.847h.495a.785.785 0 0 0 .77.66.773.773 0 0 0 .675-.396.802.802 0 0 0 .094-.264h2.058Z" />
+    </svg>
+  );
+};
+
+export default RubberSVG;
diff --git a/client/src/components/icons/commodities/soy.tsx b/client/src/components/icons/commodities/soy.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const SoySVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      fill="currentColor"
+      viewBox="0 0 24 25"
+      {...props}
+    >
+      <path d="M17.548 5.384a.245.245 0 0 0-.096-.26l-.11-.077a.243.243 0 0 0-.328.039 5.416 5.416 0 0 0-.962 1.817 4.655 4.655 0 0 1-.968 1.746A2.66 2.66 0 0 0 14.5 9.75a2.567 2.567 0 0 0 .035 1.483.923.923 0 0 1-.021.676l-.078.188a.91.91 0 0 1-.499.498 2.88 2.88 0 0 0-1.328 1.156 2.92 2.92 0 0 0-.474 1.515.913.913 0 0 1-.328.672.934.934 0 0 1-.78.213 2.95 2.95 0 0 0-1.538.136 2.774 2.774 0 0 0-1.546 1.244 1.78 1.78 0 0 1-.281.392c-.527.558-1.396 1.678-1.393 2.944a.139.139 0 0 0 .267.046c.051-.138.112-.272.182-.402a1.944 1.944 0 0 1 2.233-.889 2.93 2.93 0 0 0 1.678-.103c.961-.355 1.627-1.067 1.727-1.778a.895.895 0 0 1 .313-.551l.104-.089a.927.927 0 0 1 .658-.224c.713.04 1.55-.448 2.08-1.29a2.573 2.573 0 0 0 .339-2.273.93.93 0 0 1 0-.712l.05-.113a.88.88 0 0 1 .398-.449 2.373 2.373 0 0 0 1.122-1.529c.118-.444.118-.91 0-1.355a4.973 4.973 0 0 1-.207-1.895c.068-.633.18-1.26.335-1.878Z" />
+      <path d="M6.967 17.394a1.23 1.23 0 0 1-.238-.807 1.066 1.066 0 0 1 1.043-1.096.917.917 0 0 1 .666.356c.241-.145.497-.264.762-.356h.036a2.36 2.36 0 0 0-.118-.252 1.936 1.936 0 0 1-.067-.16.941.941 0 0 1 .042-.648.917.917 0 0 1 .549-.547 2.94 2.94 0 0 0 1.318-.882 2.89 2.89 0 0 0 .712-1.6.92.92 0 0 1 .335-.626l.156-.132a.934.934 0 0 1 .641-.213c.256.01.511-.025.755-.1.01-.246.043-.49.1-.729a.899.899 0 0 1-1.05-.33 1.023 1.023 0 0 1 1.103-1.423c.244.04.466.166.624.356a1.65 1.65 0 0 1 .12-.143 3.47 3.47 0 0 0 .681-1.138 5.63 5.63 0 0 1-1.157.132 2.599 2.599 0 0 0-1.293.398 2.355 2.355 0 0 0-1.133 1.5.87.87 0 0 1-.317.513l-.092.078a.938.938 0 0 1-.68.214 2.6 2.6 0 0 0-2.08.981c-.673.758-.88 1.693-.652 2.368a.916.916 0 0 1-.021.712l-.057.124a.897.897 0 0 1-.435.459c-.666.306-1.168 1.152-1.214 2.17a2.91 2.91 0 0 0 .356 1.585c.184-.268.386-.524.605-.764Zm1.963-6.17a1.003 1.003 0 0 1 1.504-.22 1.004 1.004 0 0 1-.002 1.518 1.004 1.004 0 1 1-1.502-1.298Z" />
+    </svg>
+  );
+};
+
+export default SoySVG;
diff --git a/client/src/components/icons/commodities/wood.tsx b/client/src/components/icons/commodities/wood.tsx
@@ -0,0 +1,19 @@
+import type { SVGAttributes } from 'react';
+
+const WoodSVG = (props?: SVGAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      fill="currentColor"
+      viewBox="0 0 24 25"
+      {...props}
+    >
+      <path d="M6.992 13.312c.538 0 .993-.86.993-1.879 0-1.02-.455-1.879-.993-1.879-.54 0-.992.86-.992 1.879 0 1.02.451 1.879.992 1.879Zm0 .498c-.54 0-.992.86-.992 1.88s.451 1.878.992 1.878c.538 0 .993-.859.993-1.879s-.455-1.879-.993-1.879Z" />
+      <path d="M17.45 15.226h-1.774a.247.247 0 0 1 0-.494h1.738c-.177-.55-.494-.922-.851-.922a.215.215 0 0 1-.087-.02.233.233 0 0 1-.09.02H7.91c.212.272.365.586.447.922h1.647a.247.247 0 1 1 0 .494H8.451c.02.154.028.308.027.463.001.153-.008.307-.027.459h2.973a.25.25 0 0 1 .229.346.247.247 0 0 1-.229.152H8.357c-.083.335-.235.65-.447.922h8.476c.031 0 .062.007.09.02a.213.213 0 0 1 .087-.02c.357 0 .674-.377.85-.922h-3.51a.249.249 0 0 1-.228-.152.249.249 0 0 1 .229-.346h3.545a.22.22 0 0 1 .075.016 3.608 3.608 0 0 0 0-.95.23.23 0 0 1-.075.012Zm-7.446-4.75a.247.247 0 0 1 .247.247.25.25 0 0 1-.247.251H8.451c.02.152.028.306.027.46.001.154-.008.309-.027.462h2.973a.247.247 0 1 1 0 .494H8.357c-.082.336-.235.65-.447.922h8.476c.031 0 .062.007.09.02a.213.213 0 0 1 .087-.02c.357 0 .674-.373.85-.922h-3.51a.247.247 0 1 1 0-.494h3.546c.025.002.05.006.075.012a3.608 3.608 0 0 0 0-.95.232.232 0 0 1-.075.016h-1.773a.25.25 0 0 1-.229-.346.247.247 0 0 1 .23-.152h1.737c-.177-.545-.494-.922-.851-.922a.307.307 0 0 1-.087-.015.334.334 0 0 1-.09.015H7.91c.212.273.364.587.447.922h1.647ZM12.24 9.06l-1.274-1.279h-.597l.514 1.28h1.357Zm2.119-.682c.33-.326.318-.985.27-1.353-.368-.047-1.027-.06-1.353.27-.33.326-.317.985-.27 1.353.368.048 1.027.06 1.353-.27Z" />
+    </svg>
+  );
+};
+
+export default WoodSVG;
diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/index.tsx
@@ -1,4 +1,4 @@
-import { formatPercentage } from '@/utils/number-format';
+import type { ReactNode } from 'react';
 
 const BreakdownItem = ({
   name,
@@ -8,21 +8,21 @@ const BreakdownItem = ({
 }: {
   name: string;
   color: string;
-  icon: string;
+  icon: ReactNode;
   value: number;
 }): JSX.Element => {
   return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center">
-        <div className="mr-2 h-2 w-2 rounded-full bg-[#4AB7F3]" />
+    <div className="flex items-center justify-between space-x-6 py-3 after:ml-6 after:w-[98px]">
+      <div className="flex flex-1 items-center space-x-4">
+        {icon ?? null}
         <span>{name}</span>
       </div>
       <div className="shrink-0 grow-0">
         <div className="text-center">
-          {formatPercentage(value)} <span className="text-xs">of suppliers</span>
+          {`${value}%`} <span className="text-2xs">of suppliers</span>
         </div>
         <div className="h-[2px] w-[340px] bg-gray-200">
-          <div className={`h-[2px] ${color}`} style={{ width: formatPercentage(value) }} />
+          <div className="h-[2px]" style={{ width: `${value}%`, backgroundColor: color }} />
         </div>
       </div>
     </div>

diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts
@@ -0,0 +1,36 @@
+import { cloneElement } from 'react';
+
+import CocoaSVG from '@/components/icons/commodities/cocoa';
+import SoySVG from '@/components/icons/commodities/soy';
+import RubberSVG from '@/components/icons/commodities/rubber';
+import WoodSVG from '@/components/icons/commodities/wood';
+import CoffeeSVG from '@/components/icons/commodities/coffee';
+import PalmOilSVG from '@/components/icons/commodities/palm-oil';
+import CattleSVG from '@/components/icons/commodities/cattle';
+import { cn } from '@/lib/utils';
+
+export type CommodityName = 'cocoa' | 'soy' | 'rubber' | 'wood' | 'coffee' | 'palm-oil' | 'cattle';
+
+const SVGS_DICTIONARY = {
+  cocoa: CocoaSVG,
+  soy: SoySVG,
+  rubber: RubberSVG,
+  wood: WoodSVG,
+  coffee: CoffeeSVG,
+  'palm-oil': PalmOilSVG,
+  cattle: CattleSVG,
+};
+
+export function getCommodityIconByName(
+  commodity: CommodityName,
+  iconProps?: React.SVGProps<SVGSVGElement>,
+) {
+  const Icon = SVGS_DICTIONARY[commodity];
+
+  if (Icon === undefined) return null;
+
+  return cloneElement(Icon(), {
+    ...iconProps,
+    className: cn('w-[56px] h-[56px]', iconProps?.className),
+  });
+}
diff --git a/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx b/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx
@@ -1,16 +1,67 @@
-const SAMPLE_DATA = {
-  byMaterial: [
-    { name: 'Supplier 1', value: 100 },
-    { name: 'Supplier 1', value: 100 },
+import { useMemo, type ComponentProps } from 'react';
+import Flag from 'react-world-flags';
+
+import { getCommodityIconByName } from '../breakdown-item/utils';
+import Breakdown from '..';
+
+import { eudr } from '@/store/features/eudr';
+import { useAppSelector } from '@/store/hooks';
+
+import type BreakdownItem from '../breakdown-item';
+import type { CommodityName } from '../breakdown-item/utils';
+
+type CommonData = {
+  name: string;
+  value: number;
+};
+
+type CommodityData = CommonData & {
+  name: CommodityName;
+};
+
+type CountryData = CommonData & {
+  iso3: string;
+};
+
+const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = {
+  commodities: [
+    { name: 'cattle', value: 80 },
+    { name: 'cocoa', value: 22 },
+    { name: 'coffee', value: 54 },
+    { name: 'palm-oil', value: 50 },
+    { name: 'wood', value: 11 },
+    { name: 'soy', value: 5 },
+    { name: 'rubber', value: 70 },
   ],
-  byOrigin: [
-    { name: 'Supplier 1', value: 100, iso3: 'ITA' },
-    { name: 'Supplier 1', value: 100, iso3: 'ITA' },
+  countries: [
+    { name: 'Italy', value: 33, iso3: 'ITA' },
+    { name: 'Spain', value: 56, iso3: 'ESP' },
+    { name: 'Brazil', value: 8, iso3: 'BRA' },
   ],
 };
 
+export const CATEGORY_COLOR = '#4AB7F3';
+
 const DeforestationFreeSuppliersBreakdown = () => {
-  return <div>DeforestationFreeSuppliersBreakdown</div>;
+  const { viewBy } = useAppSelector(eudr);
+
+  const data: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
+    if (viewBy === 'commodities') {
+      return SAMPLE_DATA[viewBy].map((item) => ({
+        ...item,
+        color: CATEGORY_COLOR,
+        icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }),
+      }));
+    }
+
+    return SAMPLE_DATA[viewBy].map((item) => ({
+      ...item,
+      color: CATEGORY_COLOR,
+      icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
+    }));
+  }, [viewBy]);
+
+  return <Breakdown data={data} />;
 };
 
 export default DeforestationFreeSuppliersBreakdown;
diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/index.tsx b/client/src/containers/analysis-eudr/category-list/breakdown/index.tsx
@@ -0,0 +1,15 @@
+import BreakdownItem from './breakdown-item';
+
+import type { ComponentProps } from 'react';
+
+const Breakdown = ({ data }: { data: ComponentProps<typeof BreakdownItem>[] }): JSX.Element => {
+  return (
+    <div className="divide-y divide-dashed divide-gray-200">
+      {data.map((item) => (
+        <BreakdownItem key={item.name} {...item} />
+      ))}
+    </div>
+  );
+};
+
+export default Breakdown;