react-intl#FormattedDate TypeScript Examples

Home: React.FunctionComponent<IHomeProps> = ({}) => {
  const { data: dashboardData, status } = useDashboardData();
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();

  return (
    <>
      <Helmet title="Dashboard" />
      <div className={clsx("container")}>
        {dashboardData ? (
          <>
            <Dashboard dashboardData={dashboardData} />

            <div className="row mt-5">
              <div
                className={clsx("col-12", classes.refreshDate, {
                  "text-center": mediaQuery.smallScreen
                })}
              >
                Last updated: <FormattedDate value={dashboardData.now.date} /> <FormattedTime value={dashboardData.now.date} />
              </div>
            </div>
          </>
        ) : (
          <div className="text-center">
            <CircularProgress size={80} />
          </div>
        )}
      </div>
    </>
  );
}

export default function LogList({ typesVisible }: LogListProps) {
  let [logs, logsError] = useApi(getLogs);

  if (logsError != null) {
    return <span className='panic'>Failed to load logs: {apiErrorMessage(logsError)}</span>;
  }

  if (logs == null) {
    return <span>Loading logs...</span>;
  }

  if (Object.values(typesVisible).some((visible) => visible)) {
    logs = logs.filter((log) => typesVisible[log.type]);
  }

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Timestamp</th>
          <th>Message</th>
        </tr>
      </thead>
      <tbody>
        {logs.map((log) => (
          <tr key={log.id}>
            <td>#{log.id}</td>
            <td>
              <FormattedDate dateStyle='medium' timeStyle='medium' value={log.created_at} />
            </td>
            <td>
              <LogMessage {...log} />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

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>
  );
}