Function PriceTrend

PriceTrend(
    props: {
        points: readonly PricePoint[];
        userSettings?: PriceHistorySettings;
    },
): null
| ReactElement<unknown, string | JSXElementConstructor<any>>

Compact trend indicator: a colored glyph plus the signed delta and percent change since the previous recorded price. Rising prices read red, drops read green. Renders nothing when there aren't two points to compare.

Parameters

props: { points: readonly PricePoint[]; userSettings?: PriceHistorySettings }
The series points and the user's currency settings.

Returns null | ReactElement<unknown, string | JSXElementConstructor<any>>

The trend element, or null when there's no move to show.

Example

<PriceTrend points={series.points} userSettings={userSettings} />

Source

export function PriceTrend({
  points,
  userSettings,
}: {
  points: readonly PricePoint[];
  userSettings?: PriceHistorySettings;
}): ReactElement | null {
  if (points.length < 2) return null;
  const trend = describeTrend(points);
  const sign = trend.deltaUsd > 0 ? '+' : trend.deltaUsd < 0 ? '−' : '';
  const magnitude = formatUsd(Math.abs(trend.deltaUsd), userSettings);
  return (
    <Typography
      component="span"
      variant="caption"
      color={TREND_COLOR[trend.direction]}
      sx={{ whiteSpace: 'nowrap', fontWeight: 600 }}
    >
      {TREND_GLYPH[trend.direction]}
      {trend.direction !== 'flat' &&
        ` ${sign}${magnitude} (${sign}${Math.abs(trend.pctChange).toFixed(1)}%)`}
    </Typography>
  );
}