diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
index 71c7311d7..01f20a2ce 100644
--- a/apps/charterafrica/package.json
+++ b/apps/charterafrica/package.json
@@ -48,7 +48,7 @@
"@mui/utils": "^5.14.20",
"@next/env": "^14.0.3",
"@nivo/core": "^0.80.0",
- "@nivo/pie": "^0.80.0",
+ "@nivo/pie": "^0.84.0",
"@nivo/tooltip": "^0.80.0",
"@nivo/waffle": "^0.80.0",
"@payloadcms/plugin-cloud-storage": "^1.1.1",
diff --git a/apps/charterafrica/src/components/Ecosystem/Chart.js b/apps/charterafrica/src/components/Ecosystem/Chart.js
index db3fa6921..a753b59b2 100644
--- a/apps/charterafrica/src/components/Ecosystem/Chart.js
+++ b/apps/charterafrica/src/components/Ecosystem/Chart.js
@@ -1,8 +1,17 @@
/* eslint-env browser */
import { Box, useTheme, useMediaQuery } from "@mui/material";
+import dynamic from "next/dynamic";
import React, { useEffect, useState } from "react";
-import { Pie, Waffle } from "@/charterafrica/components/Charts";
+const Pie = dynamic(() => import("@/charterafrica/components/Charts/Pie"), {
+ ssr: false,
+});
+const Waffle = dynamic(
+ () => import("@/charterafrica/components/Charts/Waffle"),
+ {
+ ssr: false,
+ },
+);
const Chart = React.forwardRef(function Chart(props, ref) {
const { data, ...other } = props;
diff --git a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
index f9b94f730..166810aff 100644
--- a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
+++ b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
@@ -26,18 +26,10 @@ exports[` renders unchanged 1`] = `
>
+ />
+ />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 565b44036..da16fcbd3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,8 +76,8 @@ importers:
specifier: ^0.80.0
version: 0.80.0(@nivo/tooltip@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
"@nivo/pie":
- specifier: ^0.80.0
- version: 0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ specifier: ^0.84.0
+ version: 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
"@nivo/tooltip":
specifier: ^0.80.0
version: 0.80.0(@nivo/core@0.80.0)(react-dom@18.2.0)(react@18.2.0)
@@ -6693,18 +6693,18 @@ packages:
dependencies:
eslint-scope: 5.1.1
- /@nivo/arcs@0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+ /@nivo/arcs@0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
resolution:
{
- integrity: sha512-g5m/wM36Ey45J3hrVDBPMw1Z6GOgIRwgb5zTh7TFoPuhRBZEDQLmctk8XYOm0xOMVCzsm6WkU5wlSQUeBY6IHQ==,
+ integrity: sha512-6i6CQmqdk7KZnaYmg8l0jqElQM19LJ/29WlxwVtDW43iQD0AqDzXb/eIwzZSZwf8sfGP8e8vvapkESlfkmzuPw==,
}
peerDependencies:
- "@nivo/core": 0.80.0
react: ">= 16.14.0 < 19.0.0"
dependencies:
- "@nivo/colors": 0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react@18.2.0)
- "@nivo/core": 0.80.0(@nivo/tooltip@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/colors": 0.84.0(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/core": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
"@react-spring/web": 9.4.5(react-dom@18.2.0)(react@18.2.0)
+ "@types/d3-shape": 2.1.7
d3-shape: 1.3.7
react: 18.2.0
transitivePeerDependencies:
@@ -6731,6 +6731,29 @@ packages:
react: 18.2.0
dev: false
+ /@nivo/colors@0.84.0(react-dom@18.2.0)(react@18.2.0):
+ resolution:
+ {
+ integrity: sha512-wNG1uYyDP5Owc1Pdkz0zesdZCrPAywmSssNzQ2Aju7nVs7Ru7iHNBIvOAGgyXTe2gcrIO9VSasXWR+jEYyxN2Q==,
+ }
+ peerDependencies:
+ react: ">= 16.14.0 < 19.0.0"
+ dependencies:
+ "@nivo/core": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@types/d3-color": 2.0.6
+ "@types/d3-scale": 3.3.5
+ "@types/d3-scale-chromatic": 2.0.4
+ "@types/prop-types": 15.7.11
+ d3-color: 3.1.0
+ d3-scale: 3.3.0
+ d3-scale-chromatic: 2.0.0
+ lodash: 4.17.21
+ prop-types: 15.8.1
+ react: 18.2.0
+ transitivePeerDependencies:
+ - react-dom
+ dev: false
+
/@nivo/core@0.80.0(@nivo/tooltip@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
resolution:
{
@@ -6758,6 +6781,33 @@ packages:
- react-dom
dev: false
+ /@nivo/core@0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+ resolution:
+ {
+ integrity: sha512-HyQM4x4B7d4X9+xLPKkPxqIxhSDzbJUywGTDWHWx1daeX9VP8O+MqkTBsNsoB+tjxrbKrRJ0+ceS2w89JB+qrA==,
+ }
+ peerDependencies:
+ prop-types: ">= 15.5.10 < 16.0.0"
+ react: ">= 16.14.0 < 19.0.0"
+ dependencies:
+ "@nivo/recompose": 0.84.0(react@18.2.0)
+ "@nivo/tooltip": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@react-spring/web": 9.4.5(react-dom@18.2.0)(react@18.2.0)
+ "@types/d3-shape": 2.1.7
+ d3-color: 3.1.0
+ d3-format: 1.4.5
+ d3-interpolate: 3.0.1
+ d3-scale: 3.3.0
+ d3-scale-chromatic: 3.0.0
+ d3-shape: 1.3.7
+ d3-time-format: 3.0.0
+ lodash: 4.17.21
+ prop-types: 15.8.1
+ react: 18.2.0
+ transitivePeerDependencies:
+ - react-dom
+ dev: false
+
/@nivo/legends@0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react@18.2.0):
resolution:
{
@@ -6773,20 +6823,39 @@ packages:
react: 18.2.0
dev: false
- /@nivo/pie@0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+ /@nivo/legends@0.84.0(react-dom@18.2.0)(react@18.2.0):
resolution:
{
- integrity: sha512-Zj2PtozUg5wizxdI/2o13YzwnBwf8lLrgc8vH7ucsgOu5nj6oLLpGTuNd3CBmRJHFGIGNT39bP63lKnB3P6qOQ==,
+ integrity: sha512-o0s1cXoIH6Km9A2zoKB8Ey99Oc1w5nymz0j8s7hR2B0EHo5HgVbYjSs2sZD7NSwLt3QM57Nzxw9VzJ+sqfV30Q==,
}
peerDependencies:
- "@nivo/core": 0.80.0
react: ">= 16.14.0 < 19.0.0"
dependencies:
- "@nivo/arcs": 0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
- "@nivo/colors": 0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react@18.2.0)
- "@nivo/core": 0.80.0(@nivo/tooltip@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
- "@nivo/legends": 0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react@18.2.0)
- "@nivo/tooltip": 0.80.0(@nivo/core@0.80.0)(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/colors": 0.84.0(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/core": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@types/d3-scale": 3.3.5
+ "@types/prop-types": 15.7.11
+ d3-scale: 3.3.0
+ prop-types: 15.8.1
+ react: 18.2.0
+ transitivePeerDependencies:
+ - react-dom
+ dev: false
+
+ /@nivo/pie@0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+ resolution:
+ {
+ integrity: sha512-yM8oe162YlOKFZkpVhSF+9J/F3rhyUc+gS9M3M+HyVqzXM3xOKjZiqd5tckgFbvTixDK6FLsSBHzH2SRij/hDQ==,
+ }
+ peerDependencies:
+ react: ">= 16.14.0 < 19.0.0"
+ dependencies:
+ "@nivo/arcs": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/colors": 0.84.0(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/core": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/legends": 0.84.0(react-dom@18.2.0)(react@18.2.0)
+ "@nivo/tooltip": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@types/d3-shape": 2.1.7
d3-shape: 1.3.7
react: 18.2.0
transitivePeerDependencies:
@@ -6806,6 +6875,21 @@ packages:
react-lifecycles-compat: 3.0.4
dev: false
+ /@nivo/recompose@0.84.0(react@18.2.0):
+ resolution:
+ {
+ integrity: sha512-Odb+r0pEmGt4RV020jwvngF7PxBgxS1e1sy8bWlZKc5qkm6k3eVlZNuYU+zGbDxHMigImvrx5KfUv5iUqtQBZA==,
+ }
+ peerDependencies:
+ react: ">= 16.14.0 < 19.0.0"
+ dependencies:
+ "@types/prop-types": 15.7.11
+ "@types/react-lifecycles-compat": 3.0.4
+ prop-types: 15.8.1
+ react: 18.2.0
+ react-lifecycles-compat: 3.0.4
+ dev: false
+
/@nivo/tooltip@0.80.0(@nivo/core@0.80.0)(react-dom@18.2.0)(react@18.2.0):
resolution:
{
@@ -6821,6 +6905,20 @@ packages:
- react-dom
dev: false
+ /@nivo/tooltip@0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+ resolution:
+ {
+ integrity: sha512-x/6Vk4RXKHkG9q5dk4uFYwEfbMoIvJd5ahhVQ6bskuLks5FZoS6bkKoNggjxwmHbIWOVITGUXuykOfC54EWSpw==,
+ }
+ dependencies:
+ "@nivo/core": 0.84.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+ "@react-spring/web": 9.4.5(react-dom@18.2.0)(react@18.2.0)
+ transitivePeerDependencies:
+ - prop-types
+ - react
+ - react-dom
+ dev: false
+
/@nivo/waffle@0.80.0(@nivo/core@0.80.0)(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
resolution:
{
@@ -10443,6 +10541,13 @@ packages:
}
dev: false
+ /@types/d3-color@2.0.6:
+ resolution:
+ {
+ integrity: sha512-tbaFGDmJWHqnenvk3QGSvD3RVwr631BjKRD7Sc7VLRgrdX5mk5hTyoeBL6rXZaeoXzmZwIl1D2HPogEdt1rHBg==,
+ }
+ dev: false
+
/@types/d3-color@3.1.3:
resolution:
{
@@ -10466,6 +10571,13 @@ packages:
"@types/d3-color": 3.1.3
dev: false
+ /@types/d3-path@2.0.4:
+ resolution:
+ {
+ integrity: sha512-jjZVLBjEX4q6xneKMmv62UocaFJFOTQSb/1aTzs3m3ICTOFoVaqGBHpNLm/4dVi0/FTltfBKgmOK1ECj3/gGjA==,
+ }
+ dev: false
+
/@types/d3-path@3.0.2:
resolution:
{
@@ -10473,6 +10585,22 @@ packages:
}
dev: false
+ /@types/d3-scale-chromatic@2.0.4:
+ resolution:
+ {
+ integrity: sha512-OUgfg6wmoZVhs0/pV8HZhsMw7pYJnS6smfNK2S5ogMaPHfDUaTMu7JA5ssZrRupwf2vWI+haPAuUpsz+M1BOKA==,
+ }
+ dev: false
+
+ /@types/d3-scale@3.3.5:
+ resolution:
+ {
+ integrity: sha512-YOpKj0kIEusRf7ofeJcSZQsvKbnTwpe1DUF+P2qsotqG53kEsjm7EzzliqQxMkAWdkZcHrg5rRhB4JiDOQPX+A==,
+ }
+ dependencies:
+ "@types/d3-time": 2.1.4
+ dev: false
+
/@types/d3-scale@4.0.8:
resolution:
{
@@ -10482,6 +10610,15 @@ packages:
"@types/d3-time": 3.0.3
dev: false
+ /@types/d3-shape@2.1.7:
+ resolution:
+ {
+ integrity: sha512-HedHlfGHdwzKqX9+PiQVXZrdmGlwo7naoefJP7kCNk4Y7qcpQt1tUaoRa6qn0kbTdlaIHGO7111qLtb/6J8uuw==,
+ }
+ dependencies:
+ "@types/d3-path": 2.0.4
+ dev: false
+
/@types/d3-shape@3.1.6:
resolution:
{
@@ -10491,6 +10628,13 @@ packages:
"@types/d3-path": 3.0.2
dev: false
+ /@types/d3-time@2.1.4:
+ resolution:
+ {
+ integrity: sha512-BTfLsxTeo7yFxI/haOOf1ZwJ6xKgQLT9dCp+EcmQv87Gox6X+oKl4mLKfO6fnWm3P22+A6DknMNEZany8ql2Rw==,
+ }
+ dev: false
+
/@types/d3-time@3.0.3:
resolution:
{
@@ -10862,6 +11006,15 @@ packages:
"@types/react": 18.2.41
dev: false
+ /@types/react-lifecycles-compat@3.0.4:
+ resolution:
+ {
+ integrity: sha512-1CM48Y9ztL5S4wjt7DK2izrkgPp/Ql0zCJu/vHzhgl7J+BD4UbSGjHN1M2TlePms472JvOazUtAO1/G3oFZqIQ==,
+ }
+ dependencies:
+ "@types/react": 18.2.41
+ dev: false
+
/@types/react-transition-group@4.4.9:
resolution:
{
@@ -14330,6 +14483,17 @@ packages:
d3-interpolate: 2.0.1
dev: false
+ /d3-scale-chromatic@3.0.0:
+ resolution:
+ {
+ integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==,
+ }
+ engines: { node: ">=12" }
+ dependencies:
+ d3-color: 3.1.0
+ d3-interpolate: 3.0.1
+ dev: false
+
/d3-scale@3.3.0:
resolution:
{