react-intl#FormattedNumber TypeScript Examples

export function AktAmount(props) {
  if (props.showInUSD) {
    return (
      <>
        <FormattedNumber
          value={(props.uakt / 1000000) * props.usdPrice}
          style="currency"
          currency="USD"
        />
      </>
    );
  } else {
    return (
      <>
        <FormattedNumber value={props.uakt / 1000000} /> akt
      </>
    );
  }
}

DiffNumber: React.FunctionComponent<DiffNumberProps> = ({ value, className = "" }) => {
  if (typeof value !== "number") return null;

  const classes = useStyles();
  const isPositiveDiff = value >= 0;

  return (
    <span className={className}>
      {value >= 0 ? "+" : null}
      <FormattedNumber value={value} maximumFractionDigits={2} />
    </span>
  );
}

DiffPercentageChip: React.FunctionComponent<DiffPercentageChipProps> = ({
  value,
  size = "small",
}) => {
  if (typeof value !== "number") return null;

  const classes = useStyles();
  const isPositiveDiff = value >= 0;

  return (
    <Chip
      size={size}
      className={clsx(
        {
          [classes.green]: isPositiveDiff,
          [classes.red]: !isPositiveDiff,
          [classes.small]: size === "small",
          [classes.medium]: size === "medium",
        },
        classes.root
      )}
      classes={{ label: classes.label }}
      icon={isPositiveDiff ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
      label={<FormattedNumber style="percent" maximumFractionDigits={2} value={Math.abs(value)} />}
      // label="11.33%"
    />
  );
}

HumanReadableBytes: React.FunctionComponent<HumanReadableBytesProps> = ({ value }) => {
  if (typeof value !== "number") return null;

  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB"];
  let finalValue = 0;
  let finalUnit = sizes[0];

  if (value !== 0) {
    const i = parseInt(Math.floor(Math.log(value) / Math.log(1024)).toString());

    if (i !== 0) {
      finalValue = value / Math.pow(1024, i);
      finalUnit = sizes[i];
    }
  }

  return (
    <>
      <FormattedNumber value={finalValue} maximumFractionDigits={1} />
      <small style={{ paddingLeft: "5px", fontWeight: "bold", fontSize: 16 }}>{finalUnit}</small>
    </>
  );
}

ProviderCell = ({ cell, marketData }: { cell: any; marketData: MarketData }) => {
  const isAkash = cell.provider === "akash";
  const classes = useCellStyles();

  return (
    <TableCell align="center" className={classes.root}>
      <div className={classes.amount}>
        {isAkash ? (
          <div>
            <FormattedNumber value={cell.amount * 0.432 * marketData.price} style="currency" currency="USD" />
          </div>
        ) : (
          <FormattedNumber value={cell.amount} style="currency" currency="USD" />
        )}
      </div>
      <div className={classes.unitContainer}>
        <div className={classes.unitLabel}>cpu:</div>
        <div className={classes.unitValue}>{cell.cpu}</div>
      </div>
      <div className={classes.unitContainer}>
        <div className={classes.unitLabel}>ram:</div>
        <div className={classes.unitValue}>{cell.ram}</div>
      </div>

      {cell.machineType && (
        <div className={classes.unitContainer}>
          <div className={classes.unitLabel}>type:</div>
          <div className={classes.unitValue}>{cell.machineType}</div>
        </div>
      )}
      {cell.storage && (
        <div className={classes.unitContainer}>
          <div className={classes.unitLabel}>storage:</div>
          <div className={classes.unitValue}>{cell.storage}</div>
        </div>
      )}

      {isAkash && <div className={classes.aktAmount}>({cell.amount} uakt)</div>}
    </TableCell>
  );
}

Dashboard: React.FunctionComponent<IDashboardProps> = ({ dashboardData }) => {
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  let tileClassName = "col-lg-3";

  return (
    <>
      {dashboardData.marketData && (
        <Paper className={classes.priceDataContainer} elevation={2}>
          <div className={classes.priceData}>
            AKT{" "}
            <div className={classes.priceDataValue}>
              <FormattedNumber style="currency" currency="USD" value={dashboardData.marketData.price} />
              <Box display="flex" alignItems="center" fontSize=".8rem" fontWeight={300}>
                <DiffPercentageChip value={dashboardData.marketData.priceChangePercentage24 / 100} />
                <Box component="span" ml=".5rem">
                  (24h)
                </Box>
              </Box>
            </div>
          </div>
          <div className={classes.priceData}>
            <span>Market cap</span>{" "}
            <span className={classes.priceDataValue}>
              <FormattedNumber style="currency" currency="USD" value={dashboardData.marketData.marketCap} minimumFractionDigits={0} maximumFractionDigits={0} />
            </span>
          </div>
          <div className={classes.priceData}>
            <span>Volume (24h)</span>{" "}
            <span className={classes.priceDataValue}>
              <FormattedNumber style="currency" currency="USD" value={dashboardData.marketData.volume} minimumFractionDigits={0} maximumFractionDigits={0} />
            </span>
          </div>
          <div className={classes.priceData}>
            <span>Rank</span> <span className={classes.priceDataValue}>{dashboardData.marketData.marketCapRank}</span>
          </div>
        </Paper>
      )}

      <div
        className={clsx("row", {
          "mb-4": !mediaQuery.smallScreen,
          "mb-2 text-center": mediaQuery.smallScreen
        })}
      >
        <div className="col-xs-12">
          <Typography variant="h1" className={clsx(classes.title, { "text-center": mediaQuery.smallScreen })}>
            Network summary
          </Typography>
        </div>
      </div>

      <div className="row">
        <div className={clsx("col-xs-12", tileClassName)}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={uaktToAKT(dashboardData.now.dailyUAktSpent)} maximumFractionDigits={2} /> AKT
              </>
            }
            text="Daily AKT spent"
            tooltip="Last 24h"
            graphPath={`/graph/${SnapshotsUrlParam.dailyAktSpent}`}
            diffNumber={uaktToAKT(dashboardData.now.dailyUAktSpent - dashboardData.compare.dailyUAktSpent)}
            diffPercent={percIncrease(dashboardData.compare.dailyUAktSpent, dashboardData.now.dailyUAktSpent)}
          />
        </div>

        <div className={clsx("col-xs-12", tileClassName)}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={uaktToAKT(dashboardData.now.totalUAktSpent)} maximumFractionDigits={2} /> AKT
              </>
            }
            text="Total spent on decloud"
            tooltip="This is the total amount akt spent to rent computing power on the akash network since the beginning of the network. (March 2021)"
            graphPath={`/graph/${SnapshotsUrlParam.totalAKTSpent}`}
            diffNumber={uaktToAKT(dashboardData.now.totalUAktSpent - dashboardData.compare.totalUAktSpent)}
            diffPercent={percIncrease(dashboardData.compare.totalUAktSpent, dashboardData.now.totalUAktSpent)}
          />
        </div>

        <div className={clsx("col-xs-12", tileClassName)}>
          <StatsCard
            number={<FormattedNumber value={dashboardData.now.totalLeaseCount - dashboardData.compare.totalLeaseCount} />}
            text="Daily new leases"
            tooltip="Last 24h"
            graphPath={`/graph/${SnapshotsUrlParam.dailyDeploymentCount}`}
            diffNumber={dashboardData.now.dailyLeaseCount - dashboardData.compare.dailyLeaseCount}
            diffPercent={percIncrease(dashboardData.compare.dailyLeaseCount, dashboardData.now.dailyLeaseCount)}
          />
        </div>

        <div className={clsx("col-xs-12", tileClassName)}>
          <StatsCard
            number={<FormattedNumber value={dashboardData.now.totalLeaseCount} />}
            text="Total lease count"
            tooltip="The total lease count consists of all deployments that were live at some point and that someone paid for. This includes deployments that were deployed for testing or that were meant to be only temporary."
            graphPath={`/graph/${SnapshotsUrlParam.allTimeDeploymentCount}`}
            diffNumber={dashboardData.now.totalLeaseCount - dashboardData.compare.totalLeaseCount}
            diffPercent={percIncrease(dashboardData.compare.totalLeaseCount, dashboardData.now.totalLeaseCount)}
          />
        </div>
      </div>

      <div
        className={clsx("row mt-5", {
          "mb-4": !mediaQuery.smallScreen,
          "mb-2 text-center": mediaQuery.smallScreen
        })}
      >
        <div className="col-xs-12">
          <Typography variant="h1" className={clsx(classes.title, { "text-center": mediaQuery.smallScreen })}>
            Total resources currently leased
            {/* <Chip
                  size="small"
                  label="Live"
                  icon={<FiberManualRecordIcon />}
                  classes={{ root: classes.liveChip, icon: classes.liveChipIcon }}
                /> */}
          </Typography>
        </div>
      </div>
      <div className="row">
        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={<FormattedNumber value={dashboardData.now.activeLeaseCount} />}
            text="Active leases"
            tooltip={
              <>
                <div>This is the number of leases currently active on the network. A deployment can be anything. </div>
                <div>For example: a simple website to a blockchain node or a video game server.</div>
              </>
            }
            graphPath={`/graph/${SnapshotsUrlParam.activeDeployment}`}
            diffNumber={dashboardData.now.activeLeaseCount - dashboardData.compare.activeLeaseCount}
            diffPercent={percIncrease(dashboardData.compare.activeLeaseCount, dashboardData.now.activeLeaseCount)}
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={dashboardData.now.activeCPU / 1000} maximumFractionDigits={2} />
                <small style={{ paddingLeft: "5px", fontWeight: "bold", fontSize: 16 }}>vCPUs</small>
              </>
            }
            text="Compute"
            graphPath={`/graph/${SnapshotsUrlParam.compute}`}
            diffNumber={(dashboardData.now.activeCPU - dashboardData.compare.activeCPU) / 1000}
            diffPercent={percIncrease(dashboardData.compare.activeCPU, dashboardData.now.activeCPU)}
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={dashboardData.now.activeMemory / 1024 / 1024 / 1024} maximumFractionDigits={2} />
                <small style={{ paddingLeft: "5px", fontWeight: "bold", fontSize: 16 }}>GB</small>
              </>
            }
            text="Memory"
            graphPath={`/graph/${SnapshotsUrlParam.memory}`}
            diffNumber={(dashboardData.now.activeMemory - dashboardData.compare.activeMemory) / 1024 / 1024 / 1024}
            diffPercent={percIncrease(dashboardData.compare.activeMemory, dashboardData.now.activeMemory)}
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={dashboardData.now.activeStorage / 1024 / 1024 / 1024} maximumFractionDigits={2} />
                <small style={{ paddingLeft: "5px", fontWeight: "bold", fontSize: 16 }}>GB</small>
              </>
            }
            text="Storage"
            graphPath={`/graph/${SnapshotsUrlParam.storage}`}
            diffNumber={(dashboardData.now.activeStorage - dashboardData.compare.activeStorage) / 1024 / 1024 / 1024}
            diffPercent={percIncrease(dashboardData.compare.activeStorage, dashboardData.now.activeStorage)}
          />
        </div>
      </div>

      <div
        className={clsx("row mt-5", {
          "mb-4": !mediaQuery.smallScreen,
          "mb-2 text-center": mediaQuery.smallScreen
        })}
      >
        <div className="col-xs-12">
          <Typography variant="h1" className={clsx(classes.title, { "text-center": mediaQuery.smallScreen })}>
            Network Capacity
          </Typography>
        </div>
      </div>
      <div className="row">
        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={<FormattedNumber value={dashboardData.networkCapacity.activeProviderCount} />}
            text="Active providers"
            tooltip={
              <>
                <div>This is the number of providers currently active on the network.</div>
              </>
            }
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <FormattedNumber value={dashboardData.networkCapacity.totalCPU / 1000} maximumFractionDigits={0} />
                <small style={{ paddingLeft: "5-px", fontWeight: "bold", fontSize: 16 }}>vCPUs</small>
              </>
            }
            text="Compute"
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <HumanReadableBytes value={dashboardData.networkCapacity.totalMemory} />
              </>
            }
            text="Memory"
          />
        </div>

        <div className={clsx("col-xs-12 col-lg-3")}>
          <StatsCard
            number={
              <>
                <HumanReadableBytes value={dashboardData.networkCapacity.totalStorage} />
              </>
            }
            text="Storage"
          />
        </div>
      </div>
    </>
  );
}

Graph: React.FunctionComponent<IGraphProps> = ({}) => {
  const [selectedRange, setSelectedRange] = useState(SelectedRange["7D"]);
  const { snapshot: snapshotUrlParam } = useParams<{ snapshot: string }>();
  const snapshot = urlParamToSnapshot(snapshotUrlParam as SnapshotsUrlParam);
  const { data: snapshotData, status } = useGraphSnapshot(snapshot);
  const mediaQuery = useMediaQueryContext();
  const classes = useStyles();
  const theme = getTheme();
  const intl = useIntl();

  const title = getTitle(snapshot as Snapshots);
  const snapshotMetadata = snapshotData && getSnapshotMetadata(snapshot as Snapshots, snapshotData);
  const rangedData = snapshotData && snapshotData.snapshots.slice(snapshotData.snapshots.length - selectedRange, snapshotData.snapshots.length);
  const minValue = rangedData && snapshotMetadata.unitFn(rangedData.map((x) => x.value).reduce((a, b) => (a < b ? a : b)));
  const maxValue = snapshotData && snapshotMetadata.unitFn(rangedData.map((x) => x.value).reduce((a, b) => (a > b ? a : b)));
  const graphData = snapshotData
    ? [
        {
          id: snapshot,
          color: "rgb(1,0,0)",
          data: rangedData.map((snapshot) => ({
            x: snapshot.date,
            y: round(snapshotMetadata.unitFn(snapshot.value))
          }))
        }
      ]
    : null;
  const graphMetadata = getGraphMetadataPerRange(selectedRange);

  return (
    <div className={clsx("container", classes.root)}>
      <Helmet title={title} />

      <div>
        <Button component={RouterLink} to="/" startIcon={<ArrowBackIcon />}>
          Back
        </Button>
      </div>

      <div className={clsx("row mt-4 mb-2")}>
        <div className="col-xs-12">
          <Typography variant="h1" className={clsx(classes.title)}>
            {title}
          </Typography>
        </div>
      </div>

      {!snapshotData && status === "loading" && (
        <div className={classes.loading}>
          <CircularProgress size={80} />
        </div>
      )}

      {snapshotData && (
        <>
          <Box className={classes.subTitle}>
            <Box className={classes.subTitleValues}>
              <Typography variant="h3" className={classes.titleValue}>
                <FormattedNumber value={snapshotMetadata.unitFn(snapshotData.currentValue)} maximumFractionDigits={2} />
                &nbsp;
                <DiffPercentageChip value={percIncrease(snapshotData.compareValue, snapshotData.currentValue)} size="medium" />
                &nbsp;
                <DiffNumber value={snapshotMetadata.unitFn(snapshotData.currentValue - snapshotData.compareValue)} className={classes.diffNumber} />
              </Typography>
            </Box>

            <ButtonGroup size="small" aria-label="Graph range select" className={classes.graphRangeSelect}>
              <Button variant={selectedRange === SelectedRange["7D"] ? "contained" : "outlined"} onClick={() => setSelectedRange(SelectedRange["7D"])}>
                7D
              </Button>
              <Button variant={selectedRange === SelectedRange["1M"] ? "contained" : "outlined"} onClick={() => setSelectedRange(SelectedRange["1M"])}>
                1M
              </Button>
              <Button variant={selectedRange === SelectedRange["ALL"] ? "contained" : "outlined"} onClick={() => setSelectedRange(SelectedRange["ALL"])}>
                ALL
              </Button>
            </ButtonGroup>
          </Box>

          <div className={classes.graphContainer}>
            <Box className={classes.watermark}>
              <Typography variant="caption">akashlytics.com</Typography>
            </Box>
            <ResponsiveLineCanvas
              theme={theme}
              data={graphData}
              curve="linear"
              margin={{ top: 30, right: 35, bottom: 50, left: 45 }}
              xScale={{ type: "point" }}
              yScale={{
                type: "linear",
                min: minValue * 0.98,
                max: maxValue * 1.02
              }}
              yFormat=" >-1d"
              // @ts-ignore will be fixed in 0.69.1
              axisBottom={{
                tickRotation: mediaQuery.mobileView ? 45 : 0,
                format: (dateStr) => intl.formatDate(dateStr, { day: "numeric", month: "short", timeZone: "utc" }),
                tickValues: getTickValues(rangedData, graphMetadata.xModulo)
              }}
              // @ts-ignore will be fixed in 0.69.1
              axisLeft={{
                format: (val) => nFormatter(val, 2)
              }}
              axisTop={null}
              axisRight={null}
              colors={"#e41e13"}
              pointSize={graphMetadata.size}
              pointBorderColor="#e41e13"
              pointColor={"#ffffff"}
              pointBorderWidth={graphMetadata.border}
              isInteractive={true}
              tooltip={(props) => (
                <div className={classes.graphTooltip}>
                  <Typography variant="caption">
                    <FormattedDate value={new Date(props.point.data.x)} day="numeric" month="long" timeZone="UTC" />
                  </Typography>
                  <Box>{nFormatter(props.point.data.y as number, 2)}</Box>
                </div>
              )}
              enableGridX={false}
              enableCrosshair={true}
            />
          </div>
        </>
      )}
    </div>
  );
}