Function ChartPanel

console/src/platform/billing/UsagePage.tsx:151–199

({
  dailyCosts,
  regionFilter,
  isLoading,
  isError,
  error,
}: ChartPanelProps)

};

const ChartPanel = ({
  dailyCosts,
  regionFilter,
  isLoading,
  isError,
  error,
}: ChartPanelProps) => {
  const totalSpend = useMemo(
    () => getTotalSpend(dailyCosts, regionFilter),
    [dailyCosts, regionFilter],
  );

  return (
    <Box data-testid="chart-panel">
      <HStack justifyContent="space-between" my={3}>
        <Text
          as="h4"
          textStyle="heading-md"
          data-testid={`${regionFilter}-spend-amount`}
        >
          {formatCurrency(totalSpend)}
        </Text>
      </HStack>
      <Flex
        minHeight={legendHeightPx + chartHeightPx}
        data-testid="chart-container"
      >
        {isLoading && (
          <Spinner
            data-testid="chart-loading-spinner"
            size="xl"
            margin="auto"
          />
        )}
        {isError && (
          <ErrorBox
            data-testid="chart-error"
            message={
              error?.message || "There was an error fetching your usage."
            }
          />
        )}
        {!isLoading && !isError && dailyCosts && (
          <DailyUsageChart region={regionFilter} data={dailyCosts} />
        )}
      </Flex>
    </Box>
  );
};

const UsagePage = () => {
  const { organization } = useCurrentOrganization();