Feat/met 2394 rename micar and bolnisi code

src/Routers.tsx

@@ -57,8 +57,8 @@ import ConstitutionalCommitteeDetail from "./pages/ConstitutionalCommitteeDetail
 import Overview from "./pages/Overview";
 import NetworkMonitoring from "./pages/NetworkMonitoring";
 import GovernanceActionDetails from "./pages/GovernanceActionDetails";
-import BolnisiLanding from "./pages/BolnisiLanding";
-import Micar from "./pages/Micar";
+import TraceabilityProgramLanding from "./pages/TraceabilityProgramLanding";
+import Sustainability from "./pages/Sustainability";
 
 const StakeAddressRegistration = () => <Stake stakeAddressType={STAKE_ADDRESS_TYPE.REGISTRATION} />;
 const StakeAddressDeregistration = () => <Stake stakeAddressType={STAKE_ADDRESS_TYPE.DEREREGISTRATION} />;
@@ -130,8 +130,8 @@ const Routes: React.FC = () => {
       <Route path={routers.TERMS_OF_SERVICE} exact component={TermOfServices} />
       <Route path={routers.NATIVE_SCRIPT_DETAIL} exact component={NativeScriptsDetailPage} />
       <Route path={routers.DREP_DETAILS} exact component={DrepDetail} />
-      <Route path={routers.BOLNISI_LANDING} exact component={BolnisiLanding} />
-      <Route path={routers.MICAR} exact component={Micar} />
+      <Route path={routers.TRACEABILITYPROGRAM_LANDING} exact component={TraceabilityProgramLanding} />
+      <Route path={routers.SUSTAINABILITY} exact component={Sustainability} />
       <Route path={routers.ACCOUNT}>
         <AccountLayout>
           <Switch>

src/commons/menus.ts

@@ -3,11 +3,11 @@ import { IconType } from "react-icons/lib";
 
 import {
   BlockChainMenuIcon,
-  BolnisiDashboard,
+  TraceabilityProgramDashboard,
   BrowseIcon,
   DashboardIcon,
   GovernanceHome,
-  MicarIcon,
+  SustainabilityIcon,
   NetworkMonitoringIcon,
   OperationalIcon,
   ProtocolIcon,
@@ -136,16 +136,16 @@ export const menus: Menu[] = [
     href: routers.NETWORK_MONITORING
   },
   {
-    title: "Bolnisi",
+    title: "Traceability Program",
     key: "glossary.traceability",
-    icon: BolnisiDashboard,
-    href: routers.BOLNISI_LANDING
+    icon: TraceabilityProgramDashboard,
+    href: routers.TRACEABILITYPROGRAM_LANDING
   },
   {
-    title: "Micar",
-    key: "glossary.micar",
-    icon: MicarIcon,
-    href: routers.MICAR
+    title: "Sustainability Indicators",
+    key: "glossary.sustainabilityindicators",
+    icon: SustainabilityIcon,
+    href: routers.SUSTAINABILITY
   }
 ];
 

src/commons/resources/index.ts

@@ -62,7 +62,7 @@ import CommunityIconLight from "./icons/community-icon-light.svg";
 import CommunityIconDark from "./icons/community-icon-dark.svg";
 import FetchDataErrDark from "./icons/fetch-data-err-dark.svg";
 import StakingLifecycleIcon from "./icons/menus/stakingLifecycle.svg";
-import BolnisiDashboard from "./icons/bolnisi-dashboard.svg";
+import TraceabilityProgramDashboard from "./icons/traceability-dashboard.svg";
 import NetworkMonitoringIcon from "./icons/menus/networkMonitoring.svg";
 import ProtocolIcon from "./icons/menus/Protocol.svg";
 import PolygonWhiteIconUrl from "./icons/polygon-white.svg";
@@ -280,8 +280,8 @@ import CCDetailVotingParticipation from "./icons/CCVotingParticipation.svg?react
 import CCDetailLifetimeVotes from "./icons/CCDetailLifetimeVotes.svg?react";
 import CCStatusHistory from "./icons/CCStatusHistory.svg?react";
 import CCDetailRegistrationInformation from "./icons/CCDetailRegistrationInformation.svg?react";
-import MicarIcon from "./icons/micar.svg";
-import SearchMicarIcon from "./icons/search-icon.svg?react";
+import SustainabilityIcon from "./icons/sustainability.svg";
+import SearchSustainabilityIcon from "./icons/search-icon.svg?react";
 
 // eslint-disable-next-line import/order
 import TotalOutput from "./icons/totalOutput.svg?react";
@@ -432,7 +432,7 @@ export {
   DeregistrationLightIcon,
   RegistrationDarkIcon,
   RegistrationLightIcon,
-  BolnisiDashboard,
+  TraceabilityProgramDashboard,
   // React component
   ExchangeIcon,
   PolygonDarkIcon,
@@ -565,8 +565,8 @@ export {
   GovernanceIcon,
   PoolVotingIcon,
   ParticipationIcon,
-  MicarIcon,
-  SearchMicarIcon
+  SustainabilityIcon,
+  SearchSustainabilityIcon
 };
 
 import AIcon from "./icons/AIcon.svg?react";
@@ -752,7 +752,7 @@ import NativeStatus from "./icons/NativeStatus.svg?react";
 import NativeTimelock from "./icons/NativeTimelock.svg?react";
 import NativeType from "./icons/NativeType.svg?react";
 import NativeOneMint from "./icons/NativeOneMint.svg?react";
-import BolsiniAddress from "./icons/bolsiniAddress.svg?react";
+import TraceabilityAddress from "./icons/traceabilityAddress.svg?react";
 import DrawerClose from "./icons/drawerClose.svg?react";
 import CCCurentState from "./icons/CCCurentState.svg?react";
 import CCProposalPolicy from "./icons/CCProposalPolicy.svg?react";
@@ -764,7 +764,7 @@ import CCLastChange from "./icons/CCLastChange.svg?react";
 import CClistMembers from "./icons/CClistMembers.svg?react";
 import CCGorvernanceVote from "./icons/CCGorvernanceVote.svg?react";
 import CCHistoryStatus from "./icons/CCHistoryStatus.svg?react";
-import BolnisiDropdown from "./icons/bolnisi-dropdown.svg?react";
+import TraceabilityProgramDropdown from "./icons/traceability-dropdown.svg?react";
 import Lighning from "./icons/Lighning.svg?react";
 import LighningWhite from "./icons/lighning-white.svg?react";
 import Earch from "./icons/Earch.svg?react";
@@ -961,7 +961,7 @@ export {
   NativeTimelock,
   NativeType,
   NativeOneMint,
-  BolsiniAddress,
+  TraceabilityAddress,
   DrawerClose,
   CCCurentState,
   CCProposalPolicy,
@@ -985,23 +985,23 @@ export {
   ClockWhite
 };
 
-// Bolnisi Landing
+// TraceabilityProgram Landing
 
-import bolnisiHeaderBackgroundDark from "./bolnisiLanding/background-header-dark.png";
-import bolnisiHeaderBackgroundLight from "./bolnisiLanding/background-header-light.png";
-import bolnisiHeaderLaptop from "./bolnisiLanding/header-laptop.png";
-import bolnisiHeaderMobile from "./bolnisiLanding/header-mobile.png";
-import bolnisiHeaderTablet from "./bolnisiLanding/header-tablet.png";
-import bodyBackground from "./bolnisiLanding/body-background.png";
-import bolnisiProgress from "./bolnisiLanding/bolnisi-progress.png";
+import traceabilityprogramHeaderBackgroundDark from "./traceabilityLanding/background-header-dark.png";
+import traceabilityprogramHeaderBackgroundLight from "./traceabilityLanding/background-header-light.png";
+import traceabilityprogramHeaderLaptop from "./traceabilityLanding/header-laptop.png";
+import traceabilityprogramHeaderMobile from "./traceabilityLanding/header-mobile.png";
+import traceabilityprogramHeaderTablet from "./traceabilityLanding/header-tablet.png";
+import bodyBackground from "./traceabilityLanding/body-background.png";
+import traceabilityprogramProgress from "./traceabilityLanding/traceability-progress.png";
 
 export {
-  bolnisiHeaderBackgroundDark,
-  bolnisiHeaderBackgroundLight,
-  bolnisiHeaderLaptop,
-  bolnisiHeaderMobile,
-  bolnisiHeaderTablet,
+  traceabilityprogramHeaderBackgroundDark,
+  traceabilityprogramHeaderBackgroundLight,
+  traceabilityprogramHeaderLaptop,
+  traceabilityprogramHeaderMobile,
+  traceabilityprogramHeaderTablet,
   bodyBackground,
-  bolnisiProgress,
-  BolnisiDropdown
+  traceabilityprogramProgress,
+  TraceabilityProgramDropdown
 };

src/commons/routers.ts

@@ -55,8 +55,8 @@ export const routers = {
   TERMS_OF_SERVICE: "/terms-of-service",
   SMARTCONTRACT_DETAIL: "/smartcontract/:id",
   DREP_DETAILS: "/drep/:drepId",
-  BOLNISI_LANDING: "/bolnisi",
-  MICAR: "/micar",
+  TRACEABILITYPROGRAM_LANDING: "/traceability-program",
+  SUSTAINABILITY: "/sustainability-indicators",
   NOT_FOUND: "/*"
 } as const;
 

src/commons/utils/api.ts

@@ -184,12 +184,12 @@ export const API = {
   EMISSIONS: {
     GRAPH: "txs/graph"
   },
-  MICAR: {
+  SUSTAINABILITY: {
     CARBON_EMISSION: "MiCAR/carbon-emission",
     INDICATOR: "/MiCAR/carbon-emission/overview",
     HISTORYCAL: "/MiCAR/carbon-emission/historical"
   },
-  BOLNISI: {
+  TRACEABILITYPROGRAM: {
     OVERVIEW: "bolnisi/overview"
   }
 };

src/commons/utils/constants.ts

@@ -132,7 +132,8 @@ export const CARDANO_NEWS_URL = process.env.REACT_APP_CARDANO_NEWS_URL || get(wi
 export const APP_VERSION = process.env.REACT_APP_VERSION || get(window, "env.REACT_APP_VERSION");
 export const EXT_ADA_PRICE_URL =
   process.env.REACT_APP_EXT_ADA_PRICE_URL || get(window, "env.REACT_APP_EXT_ADA_PRICE_URL");
-export const BOLNISI_NAME_API = process.env.REACT_APP_BOLNISI_NAME_API || get(window, "env.REACT_APP_BOLNISI_NAME_API");
+export const TRACEABILITYPROGRAM_NAME_API =
+  process.env.REACT_APP_BOLNISI_NAME_API || get(window, "env.REACT_APP_BOLNISI_NAME_API");
 export const API_GECKO = process.env.REACT_APP_API_URL_COIN_GECKO || get(window, "env.REACT_APP_API_URL_COIN_GECKO");
 export const FF_GLOBAL_IS_CONWAY_ERA =
   (process.env.REACT_APP_FF_GLOBAL_IS_CONWAY_ERA || get(window, "env.REACT_APP_FF_GLOBAL_IS_CONWAY_ERA")) === "true";
@@ -333,6 +334,6 @@ export enum VOTE_TYPE_GOV_ACTIONS {
   STAKING_POOL_KEY_HASH = "STAKING_POOL_KEY_HASH"
 }
 
-export const BOLNISI_LANDING_READ_CASE_STUDY = "https://cardanofoundation.org/case-studies/bolnisi";
-export const BOLNISI_LANDING_OIV = "https://www.oiv.int/";
-export const BOLNISI_LANDING_NWA = "https://wine.gov.ge/En/";
+export const TRACEABILITYPROGRAM_LANDING_READ_CASE_STUDY = "https://cardanofoundation.org/case-studies/bolnisi";
+export const TRACEABILITYPROGRAM_LANDING_OIV = "https://www.oiv.int/";
+export const TRACEABILITYPROGRAM_LANDING_NWA = "https://wine.gov.ge/En/";

src/components/AddressDetail/AddressAnalytics/index.tsx

@@ -74,9 +74,20 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
     false,
     blockKey
   );
+  const calculatedHighestAndLowest = useMemo(() => {
+    if (!data?.data?.length) return { highest: 0, lowest: 0 };
 
-  const maxBalance = BigNumber(data?.highestBalance || 0).toString();
-  const minBalance = BigNumber(data?.lowestBalance || 0).toString();
+    return data.data.reduce(
+      (acc, curr) => ({
+        highest: Math.max(acc.highest, curr.value),
+        lowest: Math.min(acc.lowest, curr.value)
+      }),
+      { highest: data.data[0].value, lowest: data.data[0].value }
+    );
+  }, [data?.data]);
+
+  const maxBalance = BigNumber(calculatedHighestAndLowest.highest || 0).toString();
+  const minBalance = BigNumber(calculatedHighestAndLowest.lowest || 0).toString();
 
   const highest = Number(maxBalance);
   const lowest = Number(minBalance);
@@ -91,28 +102,33 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
     })) || [];
 
   const customTicks = useMemo(() => {
-    // Default ticks by recharts
-    const ticks = getNiceTickValues([0, Math.max(Number(maxBalance), highest)], 5);
+    const values = data?.data?.map((item) => item.value) || [0];
 
-    // With 14 is font-size (tick label height), 400 is chart height
-    const labelHeight = 14 / 400;
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
 
-    const tickMax = ticks[ticks.length - 1] || 1;
+    const tickMin = Math.min(0, minValue);
+    const tickMax = Math.max(maxValue * 1.2, Math.abs(minValue) * 1.2, 0);
 
-    // If tick near lowest and highest ( tick / tickMax < labelHeight), hidden it.
-    const needShowTicks = ticks.filter(
-      (tick) =>
-        BigNumber(tick).minus(lowest).div(tickMax).abs().gt(labelHeight) &&
-        BigNumber(tick).minus(highest).div(tickMax).abs().gt(labelHeight)
-    );
-    // Ticks add highest
-    needShowTicks.push(highest);
+    const ticks = getNiceTickValues([tickMin, tickMax], 5);
+    const tickMaxValue = Math.max(...ticks.map(Math.abs));
+
+    const threshold = tickMaxValue * 0.1;
+
+    const filteredTicks = ticks.filter((tick) => {
+      if (tick === ticks[0] || tick === ticks[ticks.length - 1]) return true;
+      const distanceToHighest = Math.abs(tick - highest);
+      const distanceToLowest = Math.abs(tick - lowest);
+      return distanceToHighest > threshold && distanceToLowest > threshold;
+    });
 
-    // If lowest equal highest, add it.
-    if (BigNumber(highest).minus(lowest).div(tickMax).abs().gt(0)) needShowTicks.push(lowest);
+    filteredTicks.push(highest);
+    if (BigNumber(highest).minus(lowest).div(tickMaxValue).abs().gt(0)) {
+      filteredTicks.push(lowest);
+    }
 
-    return needShowTicks.sort((a, b) => a - b);
-  }, [maxBalance, highest, lowest]);
+    return [...new Set(filteredTicks)].sort((a, b) => a - b);
+  }, [data?.data, highest, lowest]);
 
   const lowestIndex = customTicks.indexOf(lowest) + 1;
   const highestIndex = customTicks.indexOf(highest) + 1;
@@ -144,6 +160,35 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
     );
   };
 
+  const getTickOffset = (value: number) => {
+    if (!customTicks.includes(value)) {
+      return 0;
+    }
+
+    const maxAbsValue = Math.max(...customTicks.map(Math.abs));
+    const isNearlyEqual = Math.abs(highest - lowest) / maxAbsValue < 0.05;
+
+    if (value === highest) {
+      if (Math.abs(value) / maxAbsValue > 0.95) {
+        return -45;
+      }
+      if (isNearlyEqual) {
+        return -20;
+      }
+      return -10;
+    }
+
+    if (value === lowest) {
+      if (isNearlyEqual) {
+        return 20;
+      }
+      if (Math.abs(highest - lowest) / maxAbsValue < 0.1) {
+        return 10;
+      }
+    }
+    return 0;
+  };
+
   return (
     <Card title={<TextCardHighlight>{t("analytics")}</TextCardHighlight>}>
       <Wrapper container columns={24} spacing={4.375}>
@@ -176,7 +221,7 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
                   width={900}
                   height={400}
                   data={convertDataChart}
-                  margin={{ top: 5, right: 5, bottom: 14 }}
+                  margin={{ top: 10, right: 10, bottom: 14, left: 15 }}
                 >
                   {/* Defs for ticks filter background color */}
                   {["lowest", "highest"].map((item) => {
@@ -202,9 +247,7 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
                     tick={{
                       fill: theme.mode === "light" ? theme.palette.secondary.light : theme.palette.secondary[800]
                     }}
-                    tickLine={{
-                      stroke: theme.mode === "light" ? theme.palette.secondary.light : theme.palette.secondary[800]
-                    }}
+                    tickLine={false}
                     tickMargin={5}
                     color={theme.palette.secondary.light}
                     stroke={theme.palette.secondary.light}
@@ -219,15 +262,27 @@ const AddressAnalytics: React.FC<{ address?: string }> = ({ address }) => {
                   </XAxis>
                   <YAxis
                     tickFormatter={formatPriceValue}
-                    tick={{
-                      fill: theme.mode === "light" ? theme.palette.secondary.light : theme.palette.secondary[800]
-                    }}
+                    tick={({ x, y, payload }) => (
+                      <g transform={`translate(${x},${y})`}>
+                        <text
+                          dy={getTickOffset(payload.value)}
+                          x={0}
+                          y={0}
+                          textAnchor="end"
+                          fill={theme.mode === "light" ? theme.palette.secondary.light : theme.palette.secondary[800]}
+                        >
+                          {formatPriceValue(payload.value)}
+                        </text>
+                      </g>
+                    )}
                     tickLine={{
                       stroke: theme.mode === "light" ? theme.palette.secondary.light : theme.palette.secondary[800]
                     }}
                     color={theme.palette.secondary.light}
                     interval={0}
                     ticks={customTicks}
+                    padding={{ top: 10, bottom: 10 }}
+                    width={80}
                   />
                   <Tooltip content={renderTooltip} cursor={false} />
                   <CartesianGrid vertical={false} strokeWidth={0.33} />