recharts#PieChart TypeScript Examples

RegionOverseasChart = ({ data }: { data: any }) => {
  const theme = useTheme();
  const chartColors = [theme.navy, theme.yellow, "#a6e5e3"];
  return (
    <StyledRegionOverseasChart>
      <h3>Overseas Travel</h3>
      <div className="row">
        <div>
          <div className="chart-wrap">
            <ResponsiveContainer width="100%" height="100%">
              {/* @ts-ignore */}
              <PieChart isAnimationActive={false}>
                <Pie dataKey="count" data={data} outerRadius="100%">
                  {data.map((_: any, index: number) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={chartColors[index % chartColors.length]}
                    />
                  ))}
                </Pie>
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
        <div>
          {data.map((item: any, i: number) => (
            <LegendItem key={i} typeColor={chartColors[i]}>
              {item.overseas}: <span>{item.count}</span>
            </LegendItem>
          ))}
        </div>
      </div>
    </StyledRegionOverseasChart>
  );
}

TransmissionChart = ({ data = [] }) => {
  const theme = useTheme();
  const chartColors = [
    theme.teal,
    theme.green,
    theme.navy,
    theme.yellow,
    "#956828",
  ];

  return (
    <StyledTransmissionChart>
      <div className="head">Source of cases</div>
      <div className="row">
        <div className="chart-wrap">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie dataKey="percent" data={data} outerRadius="100%">
                {data.map((_, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={chartColors[index % chartColors.length]}
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div>
          {data.map((item: any, i: number) => (
            <LegendItem key={i} typeColor={chartColors[i]}>
              {item.type}: <span>{item.percent}</span>
            </LegendItem>
          ))}
        </div>
      </div>
    </StyledTransmissionChart>
  );
}

PoolComposition: FC = () => {
  const { masset, fasset } = useSelectedFeederPoolState()

  const data = useMemo(
    () => [
      {
        name: masset.token.symbol,
        value: masset.totalVaultInMasset.simple,
        fill: assetColorMapping[masset.token.symbol] ?? '#444',
      },
      {
        name: fasset.token.symbol,
        value: fasset.totalVaultInMasset.simple,
        fill: assetColorMapping[fasset.token.symbol] ?? '#888',
      },
    ],
    [masset, fasset],
  )

  return (
    <RechartsContainer>
      <ResponsiveContainer aspect={2}>
        <PieChart margin={MARGIN}>
          <Pie dataKey="value" isAnimationActive={false} data={data} fill="fill" />
          <Legend align="left" layout="vertical" verticalAlign="middle" />
          <Tooltip
            formatter={toK as never}
            separator=" "
            contentStyle={{
              fontSize: '14px',
              padding: '8px',
              background: 'rgba(255, 255, 255, 0.8)',
              textAlign: 'right',
              border: 'none',
              borderRadius: '4px',
              color: Color.black,
            }}
            wrapperStyle={{
              top: 0,
              left: 0,
            }}
          />
        </PieChart>
      </ResponsiveContainer>
    </RechartsContainer>
  )
}

SkillDetailSummay: React.FC<SkillDetailSummaryProps> = ({
  slug,
  summary,
}) => {
  const i18n = useLang();
  const [visible, setVisible] = useState(false);
  const [matriz, setMatriz] = useState<Summary>({} as Summary);

  const { observer, onClose } = useModal({
    onClose: () => setVisible(!visible),
  });

  // Filter Empty Results from Summary

  const summaryData = summary.filter(({ value }) => value);

  const getFromattedTooltip = (value: number) => {
    const valueString = value.toString();

    return i18n.sub(value > 1 ? 'x-members' : 'x-member', valueString);
  };

  const hasSummary = !!summaryData.length;

  return (
    <Panel displayType="unstyled" title={i18n.get('summary')}>
      {hasSummary ? (
        <>
          <PieChart className="summary-chart" width={420} height={280}>
            <Pie
              data={summaryData}
              dataKey="value"
              nameKey="name"
              cx="50%"
              cy="50%"
              innerRadius={70}
              outerRadius={120}
              paddingAngle={0}
            >
              {summary.map((_, index) => (
                <Cell
                  key={index}
                  fill={COLORS[index]}
                  onClick={() => console.log(summary)}
                />
              ))}
            </Pie>
            <Tooltip formatter={getFromattedTooltip} />
            <Legend
              align="right"
              iconSize={16}
              formatter={(value) => (
                <ClayButton
                  displayType="unstyled"
                  onClick={() => {
                    setVisible(true);
                    const matriz = summary.find(({ name }) => name === value);
                    setMatriz(matriz);
                  }}
                >
                  <span className="legend-text">{value}</span>
                </ClayButton>
              )}
              iconType="square"
              layout="vertical"
              verticalAlign="middle"
            />
          </PieChart>
          <Modal
            visible={visible}
            observer={observer}
            title={matriz.name}
            subtitle={
              matriz.description
                ? `${i18n.sub('description-x-x', [
                    matriz.name,
                    matriz.description,
                  ])}`
                : null
            }
          >
            <ListMembers onClose={onClose} matriz={matriz} slug={slug} />
          </Modal>
        </>
      ) : (
        <EmptyState title={i18n.get('there-are-no-members-yet')} />
      )}
    </Panel>
  );
}

DriveInfoItem = ({ drive }: ICardProps) => {
  const freeSpace = drive.totalSpace - drive.usedSpace;

  const plotValues = [
    { value: freeSpace, color: "#D6D6D6", label: "Free Space" },
    {
      value: drive.usedSpace,
      color: capacityColors(drive.usedSpace, drive.totalSpace),
      label: "Used Space",
    },
  ];
  return (
    <Box
      sx={{
        display: "flex",
        flex: 1,
        alignItems: "center",
        paddingBottom: "10px",
        padding: "20px",
        border: "1px solid #eaeaea",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexFlow: "column",
          marginLeft: "10px",
          flex: 1,
        }}
      >
        <Box
          sx={{
            fontSize: "14px",
            fontWeight: 400,
            display: "flex",
            alignItems: "center",

            "& .min-icon": {
              marginRight: "10px",
              height: "10px",
              width: "10px",
              fill: driveStatusColor(drive.state),
              flexShrink: 0,
            },

            "& .drive-endpoint": {
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "normal",
              wordBreak: "break-all",
              marginRight: "8px",
              fontWeight: 600,
              fontSize: {
                md: "16px",
                xs: "10px",
              },
            },
          }}
        >
          <div className="drive-endpoint">{drive.endpoint || ""}</div>
          {drive.state && <CircleIcon />}
        </Box>

        <Box
          sx={{
            flex: 1,
            display: "flex",
            alignItems: "center",
            paddingLeft: "20px",
            marginTop: "10px",
            flexFlow: {
              sm: "row",
              xs: "column",
            },
            "& .info-label": {
              color: "#5E5E5E",
              fontSize: "12px",
              textAlign: "center",
            },
            "& .info-value": {
              fontSize: "18px",
              color: "#07193E",
              display: "flex",
              fontWeight: 500,
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
            },
          }}
        >
          <Box sx={{ flex: 1 }}>
            <div style={{ position: "relative", width: 110, height: 110 }}>
              <span
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  fontWeight: "bold",
                  color: "#000",
                  fontSize: 12,
                }}
              >
                {niceBytesInt(drive.usedSpace)}
              </span>
              <div>
                <PieChart width={110} height={110}>
                  <Pie
                    data={plotValues}
                    cx={"50%"}
                    cy={"50%"}
                    dataKey="value"
                    outerRadius={50}
                    innerRadius={40}
                    startAngle={-70}
                    endAngle={360}
                    animationDuration={1}
                  >
                    {plotValues.map((entry, index) => (
                      <Cell key={`cellCapacity-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                </PieChart>
              </div>
            </div>
          </Box>

          <Box
            sx={{
              display: "flex",
              gap: "5%",
              alignItems: "center",
              flex: 2,
              flexGrow: 1,
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexFlow: "column",
              }}
            >
              <div className="info-value">
                {niceBytes(
                  drive.totalSpace ? drive.totalSpace.toString() : "0"
                )}
              </div>
              <label className="info-label">Capacity</label>
            </Box>

            <Box
              sx={{
                display: "flex",
                flexFlow: "column",
              }}
            >
              <div className="info-value">
                {niceBytes(drive.usedSpace ? drive.usedSpace.toString() : "0")}
              </div>
              <label className="info-label">Used</label>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexFlow: "column",
              }}
            >
              <div className="info-value">
                {niceBytes(
                  drive.availableSpace ? drive.availableSpace.toString() : "0"
                )}
              </div>
              <label className="info-label">Available</label>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

ReportedUsage = ({
  usageValue,
  total,
  unit,
}: {
  usageValue: string;
  total: number | string;
  unit: string;
}) => {
  const plotValues = [
    { value: total, color: "#D6D6D6", label: "Free Space" },
    {
      value: usageValue,
      color: "#073052",
      label: "Used Space",
    },
  ];

  return (
    <Box
      sx={{
        maxHeight: "110px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        fontSize: "19px",

        padding: "10px",
        "& .unit-value": {
          fontSize: "50px",
          color: "#07193E",
        },
        "& .unit-type": {
          fontSize: "18px",
          color: "#5E5E5E",
          marginTop: "20px",
          marginLeft: "5px",
        },

        "& .usage-label": {
          display: "flex",
          alignItems: "center",
          fontSize: "16px",
          fontWeight: 600,
          marginRight: "20px",
          marginTop: "-10px",
          "& .min-icon": {
            marginLeft: "10px",
            height: 16,
            width: 16,
          },
        },
      }}
    >
      <Box>
        <div className="usage-label">
          <span>Reported Usage</span>
        </div>

        <Tooltip title={`${usageValue} Bytes`}>
          <label
            className={"unit-value"}
            style={{
              fontWeight: 600,
            }}
          >
            {total}
          </label>
        </Tooltip>
        <label className={"unit-type"}>{unit}</label>
      </Box>

      <Box>
        <Box sx={{ flex: 1 }}>
          <div
            style={{
              position: "relative",
              width: 105,
              height: 105,
              top: "-8px",
            }}
          >
            <div>
              <PieChart width={105} height={105}>
                <Pie
                  data={plotValues}
                  cx={"50%"}
                  cy={"50%"}
                  dataKey="value"
                  outerRadius={45}
                  innerRadius={35}
                  startAngle={-70}
                  endAngle={360}
                  animationDuration={1}
                >
                  {plotValues.map((entry, index) => (
                    <Cell key={`cellCapacity-${index}`} fill={entry.color} />
                  ))}
                </Pie>
              </PieChart>
            </div>
          </div>
        </Box>
      </Box>
    </Box>
  );
}

CapacityItem = ({
  value,
  timeStart,
  timeEnd,
  propLoading,
  apiPrefix,
}: {
  value: IDashboardPanel;
  timeStart: any;
  timeEnd: any;
  propLoading: boolean;
  apiPrefix: string;
}) => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState<boolean>(true);

  const [totalUsableFree, setTotalUsableFree] = useState<number>(0);
  const [totalUsed, setTotalUsed] = useState<number>(0);
  const [totalUsable, setTotalUsable] = useState<number>(0);

  useEffect(() => {
    if (propLoading) {
      setLoading(true);
    }
  }, [propLoading]);

  useEffect(() => {
    if (loading) {
      let stepCalc = 0;
      if (timeStart !== null && timeEnd !== null) {
        const secondsInPeriod = timeEnd.unix() - timeStart.unix();
        const periods = Math.floor(secondsInPeriod / 60);

        stepCalc = periods < 1 ? 15 : periods;
      }

      api
        .invoke(
          "GET",
          `/api/v1/${apiPrefix}/info/widgets/${value.id}/?step=${stepCalc}&${
            timeStart !== null ? `&start=${timeStart.unix()}` : ""
          }${timeStart !== null && timeEnd !== null ? "&" : ""}${
            timeEnd !== null ? `end=${timeEnd.unix()}` : ""
          }`
        )
        .then((res: any) => {
          const widgetsWithValue = widgetDetailsToPanel(res, value);

          let tUsable = 0;
          let tUsed = 0;
          let tFree = 0;

          widgetsWithValue.data.forEach((eachArray: any[]) => {
            eachArray.forEach((itemSum) => {
              switch (itemSum.legend) {
                case "Total Usable":
                  tUsable += itemSum.value;
                  break;
                case "Used Space":
                  tUsed += itemSum.value;
                  break;
                case "Usable Free":
                  tFree += itemSum.value;
                  break;
              }
            });
          });

          setTotalUsableFree(tFree);
          setTotalUsed(tUsed);
          setTotalUsable(tUsable);

          setLoading(false);
        })
        .catch((err: ErrorResponseHandler) => {
          dispatch(setErrorSnackMessage(err));
          setLoading(false);
        });
    }
  }, [loading, value, timeEnd, timeStart, dispatch, apiPrefix]);

  const usedConvert = calculateBytes(totalUsed, true, false);

  const plotValues = [
    {
      value: totalUsableFree,
      color: "#D6D6D6",
      label: "Usable Available Space",
    },
    {
      value: totalUsed,
      color: capacityColors(totalUsed, totalUsable),
      label: "Used Space",
    },
  ];
  return (
    <Box
      sx={{
        flex: 1,
        display: "flex",
        alignItems: "center",
        flexFlow: {
          sm: "row",
          xs: "column",
        },
      }}
    >
      <Box
        sx={{
          fontSize: "16px",
          fontWeight: 600,
          alignSelf: {
            xs: "flex-start",
          },
        }}
      >
        Capacity
      </Box>
      <Box
        sx={{
          position: "relative",
          width: 110,
          height: 110,
          marginLeft: {
            sm: "auto",
            xs: "",
          },
        }}
      >
        <Box
          sx={{
            position: "absolute",
            display: "flex",
            flexFlow: "column",
            alignItems: "center",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            fontWeight: "bold",
            color: "#000",
            fontSize: 12,
          }}
        >
          {niceBytesInt(totalUsableFree)}
          <br />
          <Box
            sx={{
              color: "#8F9090",
              fontSize: "10px",
              display: "flex",
              flexFlow: "column",
              alignItems: "center",
              textAlign: "center",
            }}
          >
            Current Usable Capacity
          </Box>
        </Box>
        <PieChart width={110} height={110}>
          <Pie
            data={plotValues}
            cx={"50%"}
            cy={"50%"}
            dataKey="value"
            outerRadius={50}
            innerRadius={40}
            startAngle={-70}
            endAngle={360}
            animationDuration={1}
          >
            {plotValues.map((entry, index) => (
              <Cell key={`cellCapacity-${index}`} fill={entry.color} />
            ))}
          </Pie>
        </PieChart>
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          marginLeft: {
            sm: "auto",
            xs: "",
          },
        }}
      >
        <Box>
          <Box
            sx={{
              color: "#5E5E5E",
              fontWeight: "bold",
              fontSize: "14px",
            }}
          >
            Used:
          </Box>
          <Box
            sx={{
              display: "flex",
              "& .value": {
                fontSize: "50px",
                fontFamily: "Lato",
                fontWeight: 600,
                alignSelf: "flex-end",
                lineHeight: 1,
              },
              "& .unit": {
                color: "#5E5E5E",
                fontWeight: "bold",
                fontSize: "14px",
                marginLeft: "12px",
                alignSelf: "flex-end",
              },
            }}
          >
            <div className="value">{usedConvert.total}</div>
            <div className="unit">{usedConvert.unit}</div>
          </Box>
          <Box
            sx={{
              marginTop: "5px",
              "& .value": {
                color: "#5E5E5E",
                fontWeight: "bold",
                fontSize: "14px",
                textAlign: "right",
              },
            }}
          >
            <div className="value">Of: {niceBytesInt(totalUsable)}</div>
          </Box>
        </Box>

        <Box
          sx={{
            marginLeft: "15px",
            height: "100%",
            display: "flex",
            alignItems: "flex-start",
          }}
        >
          <Box>
            {loading ? (
              <Loader style={{ width: "26px", height: "26px" }} />
            ) : (
              <ReportedUsageIcon />
            )}
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

PieChartWidget = ({
  classes,
  title,
  panelItem,
  timeStart,
  timeEnd,
  propLoading,

  apiPrefix,
}: IPieChartWidget) => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState<boolean>(true);
  const [dataInner, setDataInner] = useState<object[]>([]);
  const [dataOuter, setDataOuter] = useState<object[]>([]);
  const [result, setResult] = useState<IDashboardPanel | null>(null);

  useEffect(() => {
    if (propLoading) {
      setLoading(true);
    }
  }, [propLoading]);

  useEffect(() => {
    if (loading) {
      let stepCalc = 0;
      if (timeStart !== null && timeEnd !== null) {
        const secondsInPeriod = timeEnd.unix() - timeStart.unix();
        const periods = Math.floor(secondsInPeriod / 60);

        stepCalc = periods < 1 ? 15 : periods;
      }

      api
        .invoke(
          "GET",
          `/api/v1/${apiPrefix}/info/widgets/${
            panelItem.id
          }/?step=${stepCalc}&${
            timeStart !== null ? `&start=${timeStart.unix()}` : ""
          }${timeStart !== null && timeEnd !== null ? "&" : ""}${
            timeEnd !== null ? `end=${timeEnd.unix()}` : ""
          }`
        )
        .then((res: any) => {
          const widgetsWithValue = widgetDetailsToPanel(res, panelItem);
          setDataInner(widgetsWithValue.data);
          setDataOuter(widgetsWithValue.dataOuter as object[]);
          setResult(widgetsWithValue);
          setLoading(false);
        })
        .catch((err: ErrorResponseHandler) => {
          dispatch(setErrorSnackMessage(err));
          setLoading(false);
        });
    }
  }, [loading, panelItem, timeEnd, timeStart, dispatch, apiPrefix]);

  const pieChartConfiguration = result
    ? (result.widgetConfiguration as IPieChartConfiguration)
    : [];
  const middleLabel = result?.innerLabel;

  const innerColors = get(pieChartConfiguration, "innerChart.colorList", []);
  const outerColors = get(pieChartConfiguration, "outerChart.colorList", []);

  return (
    <div className={classes.singleValueContainer}>
      <div className={classes.titleContainer}>{title}</div>
      {loading && (
        <div className={classes.loadingAlign}>
          <Loader />
        </div>
      )}
      {!loading && (
        <div className={classes.contentContainer}>
          <span className={classes.pieChartLabel}>
            {middleLabel && splitSizeMetric(middleLabel)}
          </span>
          <div className={classes.chartContainer}>
            <ResponsiveContainer width="99%">
              <PieChart margin={{ top: 5, bottom: 5 }}>
                {dataOuter && (
                  <Pie
                    data={dataOuter as object[]}
                    cx={"50%"}
                    cy={"50%"}
                    dataKey="value"
                    innerRadius={get(
                      pieChartConfiguration,
                      "outerChart.innerRadius",
                      0
                    )}
                    outerRadius={get(
                      pieChartConfiguration,
                      "outerChart.outerRadius",
                      "80%"
                    )}
                    startAngle={get(
                      pieChartConfiguration,
                      "outerChart.startAngle",
                      0
                    )}
                    endAngle={get(
                      pieChartConfiguration,
                      "outerChart.endAngle",
                      360
                    )}
                    fill="#201763"
                  >
                    {dataOuter.map((entry, index) => (
                      <Cell
                        key={`cellOuter-${index}`}
                        fill={
                          typeof outerColors[index] === "undefined"
                            ? "#393939"
                            : outerColors[index]
                        }
                      />
                    ))}
                  </Pie>
                )}
                {dataInner && (
                  <Pie
                    data={dataInner as object[]}
                    dataKey="value"
                    cx={"50%"}
                    cy={"50%"}
                    innerRadius={get(
                      pieChartConfiguration,
                      "innerChart.innerRadius",
                      0
                    )}
                    outerRadius={get(
                      pieChartConfiguration,
                      "innerChart.outerRadius",
                      "80%"
                    )}
                    startAngle={get(
                      pieChartConfiguration,
                      "innerChart.startAngle",
                      0
                    )}
                    endAngle={get(
                      pieChartConfiguration,
                      "innerChart.endAngle",
                      360
                    )}
                    fill="#201763"
                  >
                    {dataInner.map((entry, index) => {
                      return (
                        <Cell
                          key={`cell-${index}`}
                          fill={
                            typeof innerColors[index] === "undefined"
                              ? "#393939"
                              : innerColors[index]
                          }
                        />
                      );
                    })}
                  </Pie>
                )}
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
      )}
    </div>
  );
}

TenantCapacity = ({
  totalCapacity,
  usedSpaceVariants,
  statusClass,
  render = "pie",
}: ITenantCapacity) => {
  const colors = [
    "#8dacd3",
    "#bca1ea",
    "#92e8d2",
    "#efc9ac",
    "#97f274",
    "#f7d291",
    "#71ACCB",
    "#f28282",
    "#e28cc1",
    "#2781B0",
  ];

  const BGColor = "#ededed";

  const totalUsedSpace = usedSpaceVariants.reduce((acc, currValue) => {
    return acc + currValue.value;
  }, 0);

  const emptySpace = totalCapacity - totalUsedSpace;

  let tiersList: CapacityValue[] = [];

  const standardTier = usedSpaceVariants.find(
    (tier) => tier.variant === "STANDARD"
  ) || {
    value: 0,
    variant: "empty",
  };

  if (usedSpaceVariants.length > 10) {
    const totalUsedByTiers = totalUsedSpace - standardTier.value;

    tiersList = [
      { value: totalUsedByTiers, color: "#2781B0", label: "Total Tiers Space" },
    ];
  } else {
    tiersList = usedSpaceVariants
      .filter((variant) => variant.variant !== "STANDARD")
      .map((variant, index) => {
        return {
          value: variant.value,
          color: colors[index],
          label: `Tier - ${variant.variant}`,
        };
      });
  }

  let standardTierColor = "#07193E";

  const usedPercentage = (standardTier.value * 100) / totalCapacity;

  if (usedPercentage >= 90) {
    standardTierColor = "#C83B51";
  } else if (usedPercentage >= 75) {
    standardTierColor = "#FFAB0F";
  }

  const plotValues: CapacityValue[] = [
    {
      value: standardTier.value,
      color: standardTierColor,
      label: "Used Space by Tenant",
    },
    ...tiersList,
    {
      value: emptySpace,
      color: render === "bar" ? BGColor : "transparent",
      label: "Empty Space",
    },
  ];

  if (render === "bar") {
    const plotValuesForUsageBar: ISizeBarItem[] = plotValues.map((plotVal) => {
      return {
        value: plotVal.value,
        color: plotVal.color,
        itemName: plotVal.label,
      };
    });

    return (
      <div style={{ width: "100%", marginBottom: 15 }}>
        <UsageBar
          totalValue={totalCapacity}
          sizeItems={plotValuesForUsageBar}
          bgColor={BGColor}
        />
      </div>
    );
  }

  return (
    <div style={{ position: "relative", width: 110, height: 110 }}>
      <div
        style={{ position: "absolute", right: -5, top: 15, zIndex: 400 }}
        className={statusClass}
      >
        <CircleIcon
          style={{
            border: "#fff 2px solid",
            borderRadius: "100%",
            width: 20,
            height: 20,
          }}
        />
      </div>
      <span
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          fontWeight: "bold",
          color: "#000",
          fontSize: 12,
        }}
      >
        {!isNaN(totalUsedSpace) ? niceBytesInt(totalUsedSpace) : "N/A"}
      </span>
      <div>
        <PieChart width={110} height={110}>
          <Pie
            data={[{ value: 100 }]}
            cx={"50%"}
            cy={"50%"}
            dataKey="value"
            outerRadius={50}
            innerRadius={40}
            fill={BGColor}
            isAnimationActive={false}
            stroke={"none"}
          />
          <Pie
            data={plotValues}
            cx={"50%"}
            cy={"50%"}
            dataKey="value"
            outerRadius={50}
            innerRadius={40}
          >
            {plotValues.map((entry, index) => (
              <Cell
                key={`cellCapacity-${index}`}
                fill={entry.color}
                stroke={"none"}
              />
            ))}
          </Pie>
        </PieChart>
      </div>
    </div>
  );
}