Skip to content

Charts: Add TrendIndicator component #46213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
annacmc wants to merge 2 commits into
base: trunk
Choose a base branch
from
Draft

Charts: Add TrendIndicator component #46213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
731dfbf
Add TrendIndicator component to charts package
annacmc Dec 6, 2025
cc3929f
changelog
annacmc Dec 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/js-packages/charts/changelog/add-charts-new-trend-indicator
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Charts: adds trend indicator
9 changes: 9 additions & 0 deletions projects/js-packages/charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,12 @@
"require": "./dist/components/tooltip/index.cjs"
},
"./tooltip/style.css": "./dist/components/tooltip/index.css",
"./trend-indicator": {
"jetpack:src": "./src/components/trend-indicator/index.ts",
"import": "./dist/components/trend-indicator/index.js",
"require": "./dist/components/trend-indicator/index.cjs"
},
"./trend-indicator/style.css": "./dist/components/trend-indicator/index.css",
"./utils": {
"jetpack:src": "./src/utils/index.ts",
"import": "./dist/utils/index.js",
Expand Down Expand Up @@ -144,6 +150,9 @@
"legend": [
"./dist/components/legend/index.d.ts"
],
"trend-indicator": [
"./dist/components/trend-indicator/index.d.ts"
],
"hooks": [
"./dist/hooks/index.d.ts"
],
Expand Down
2 changes: 2 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { TrendIndicator } from './trend-indicator';
export type { TrendIndicatorProps, TrendDirection } from './types';
35 changes: 35 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Meta, StoryObj } from '@storybook/react';
import { TrendIndicator } from '../trend-indicator';
import type { TrendIndicatorProps } from '../types';

const meta: Meta< TrendIndicatorProps > = {
title: 'JS Packages/Charts/Components/Trend Indicator',
component: TrendIndicator,
parameters: {
layout: 'centered',
},
};

export default meta;
type Story = StoryObj< TrendIndicatorProps >;

export const Up: Story = {
args: {
direction: 'up',
value: '+14%',
},
};

export const Down: Story = {
args: {
direction: 'down',
value: '-5%',
},
};

export const Neutral: Story = {
args: {
direction: 'neutral',
value: '0%',
},
};
49 changes: 49 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/test/trend-indicator.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { render, screen } from '@testing-library/react';
import { TrendIndicator } from '../trend-indicator';

describe( 'TrendIndicator', () => {
it( 'renders up trend with value', () => {
render( <TrendIndicator direction="up" value="+14%" /> );

expect( screen.getByText( '+14%' ) ).toBeInTheDocument();
} );

it( 'renders down trend with value', () => {
render( <TrendIndicator direction="down" value="-5%" /> );

expect( screen.getByText( '-5%' ) ).toBeInTheDocument();
} );

it( 'renders neutral trend with value', () => {
render( <TrendIndicator direction="neutral" value="0%" /> );

expect( screen.getByText( '0%' ) ).toBeInTheDocument();
} );

it( 'renders icon for up direction', () => {
render( <TrendIndicator direction="up" value="+10%" /> );

expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );

it( 'renders icon for down direction', () => {
render( <TrendIndicator direction="down" value="-10%" /> );

expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );

it( 'does not render icon for neutral direction', () => {
render( <TrendIndicator direction="neutral" value="0%" /> );

expect( screen.queryByRole( 'img', { hidden: true } ) ).not.toBeInTheDocument();
Comment on lines +24 to +38
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is querying for role="img" which should be removed from the component (see the accessibility issue in the main component file). After removing role="img" from the SVG, these tests will need to be updated to use a different query method.

Consider using container.querySelector('svg') instead:

it( 'renders icon for up direction', () => {
  const { container } = render( <TrendIndicator direction="up" value="+10%" /> );
  
  const svg = container.querySelector( 'svg' );
  expect( svg ).toBeInTheDocument();
  expect( svg ).toHaveAttribute( 'aria-hidden', 'true' );
} );
Suggested change
render( <TrendIndicator direction="up" value="+10%" /> );
expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );
it( 'renders icon for down direction', () => {
render( <TrendIndicator direction="down" value="-10%" /> );
expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );
it( 'does not render icon for neutral direction', () => {
render( <TrendIndicator direction="neutral" value="0%" /> );
expect( screen.queryByRole( 'img', { hidden: true } ) ).not.toBeInTheDocument();
const { container } = render( <TrendIndicator direction="up" value="+10%" /> );
const svg = container.querySelector('svg');
expect( svg ).toBeInTheDocument();
expect( svg ).toHaveAttribute( 'aria-hidden', 'true' );
} );
it( 'renders icon for down direction', () => {
const { container } = render( <TrendIndicator direction="down" value="-10%" /> );
const svg = container.querySelector('svg');
expect( svg ).toBeInTheDocument();
expect( svg ).toHaveAttribute( 'aria-hidden', 'true' );
} );
it( 'does not render icon for neutral direction', () => {
const { container } = render( <TrendIndicator direction="neutral" value="0%" /> );
const svg = container.querySelector('svg');
expect( svg ).not.toBeInTheDocument();

Copilot uses AI. Check for mistakes.
Comment on lines +24 to +38
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is querying for role="img" which should be removed from the component (see the accessibility issue in the main component file). After removing role="img" from the SVG, these tests will need to be updated to use a different query method.

Consider using container.querySelector('svg') instead:

it( 'does not render icon for neutral direction', () => {
  const { container } = render( <TrendIndicator direction="neutral" value="0%" /> );
  
  expect( container.querySelector( 'svg' ) ).not.toBeInTheDocument();
} );
Suggested change
render( <TrendIndicator direction="up" value="+10%" /> );
expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );
it( 'renders icon for down direction', () => {
render( <TrendIndicator direction="down" value="-10%" /> );
expect( screen.getByRole( 'img', { hidden: true } ) ).toBeInTheDocument();
} );
it( 'does not render icon for neutral direction', () => {
render( <TrendIndicator direction="neutral" value="0%" /> );
expect( screen.queryByRole( 'img', { hidden: true } ) ).not.toBeInTheDocument();
const { container } = render( <TrendIndicator direction="up" value="+10%" /> );
expect( container.querySelector('svg') ).toBeInTheDocument();
} );
it( 'renders icon for down direction', () => {
const { container } = render( <TrendIndicator direction="down" value="-10%" /> );
expect( container.querySelector('svg') ).toBeInTheDocument();
} );
it( 'does not render icon for neutral direction', () => {
const { container } = render( <TrendIndicator direction="neutral" value="0%" /> );
expect( container.querySelector('svg') ).not.toBeInTheDocument();

Copilot uses AI. Check for mistakes.
} );

it( 'applies custom className', () => {
const { container } = render(
<TrendIndicator direction="up" value="+10%" className="custom-class" />
);

// eslint-disable-next-line testing-library/no-node-access
expect( container.firstChild ).toHaveClass( 'custom-class' );
} );
} );
Comment on lines +1 to +49
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests are missing for the accessibility concern of providing semantic meaning to screen reader users. Consider adding a test to verify that the component provides appropriate accessible text:

it( 'provides accessible label for screen readers', () => {
  const { container } = render(
    <TrendIndicator direction="up" value="+14%" />
  );
  
  const indicator = container.firstChild as HTMLElement;
  expect( indicator ).toHaveAttribute( 'aria-label' );
  expect( indicator.getAttribute( 'aria-label' ) ).toMatch( /increase/i );
} );

This would ensure the component remains accessible as it evolves.

Copilot uses AI. Check for mistakes.
18 changes: 18 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/trend-indicator.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.125em;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;

&__icon {
width: 1em;
height: 1em;
flex-shrink: 0;
}

&__value {
white-space: nowrap;
}
}
53 changes: 53 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/trend-indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import clsx from 'clsx';
import styles from './trend-indicator.module.scss';
import type { TrendIndicatorProps, TrendDirection } from './types';

const COLORS: Record< TrendDirection, string > = {
up: '#1a8917',
down: '#d63638',
neutral: '#646970',
};
Comment on lines +5 to +9
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The hardcoded color values don't integrate with the existing chart theming system. The charts package uses a theme provider (GlobalChartsProvider) that allows consumers to customize colors through themes (see themes.ts).

For consistency with other components like ConversionFunnelChart (which uses positiveChangeColor and negativeChangeColor from theme settings), consider:

  1. Adding trendIndicator colors to the theme configuration in themes.ts:
trendIndicator: {
  upColor: '#1a8917',
  downColor: '#d63638', 
  neutralColor: '#646970',
}
  1. Accessing theme colors via the context:
const { trendIndicatorSettings } = useChartTheme();
const COLORS: Record< TrendDirection, string > = {
  up: trendIndicatorSettings?.upColor || '#1a8917',
  down: trendIndicatorSettings?.downColor || '#d63638',
  neutral: trendIndicatorSettings?.neutralColor || '#646970',
};

This would allow consumers to customize trend indicator colors to match their design system while maintaining sensible defaults.

Copilot uses AI. Check for mistakes.

const Icon = ( { direction }: { direction: TrendDirection } ) => {
if ( direction === 'neutral' ) {
return null;
}

const isUp = direction === 'up';
return (
<svg
className={ styles[ 'trend-indicator__icon' ] }
viewBox="0 0 16 16"
fill="none"
role="img"
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SVG icon has conflicting ARIA attributes. Setting both role="img" and aria-hidden="true" is contradictory - role="img" exposes the element to assistive technologies while aria-hidden="true" hides it.

Since the icon is decorative and the semantic meaning should be conveyed through the parent component's aria-label, the icon should only have aria-hidden="true":

<svg
  className={ styles[ 'trend-indicator__icon' ] }
  viewBox="0 0 16 16"
  fill="none"
  aria-hidden="true"
>

Remove the role="img" attribute.

Suggested change
role="img"

Copilot uses AI. Check for mistakes.
aria-hidden="true"
>
<path
d={ isUp ? 'M8 13V3M4 7l4-4 4 4' : 'M8 3v10M4 9l4 4 4-4' }
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};

/**
* TrendIndicator displays a directional trend with a value.
* Used to show percentage changes or growth metrics.
*
* @param {TrendIndicatorProps} props - Component props
* @return {JSX.Element} The rendered trend indicator
*/
export function TrendIndicator( { direction, value, className, style }: TrendIndicatorProps ) {
return (
<span
className={ clsx( styles[ 'trend-indicator' ], className ) }
style={ { ...style, color: COLORS[ direction ] } }
>
<Icon direction={ direction } />
<span className={ styles[ 'trend-indicator__value' ] }>{ value }</span>
</span>
Comment on lines +45 to +51
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component lacks an aria-label or accessible text to convey the meaning of the trend to screen reader users. Users relying on assistive technologies would only hear the value (e.g., "+14%") without understanding whether it represents an increase, decrease, or neutral trend.

Consider adding an aria-label that describes the full meaning, such as:

<span
  className={ clsx( styles[ 'trend-indicator' ], className ) }
  style={ { ...style, color: COLORS[ direction ] } }
  aria-label={ `${ direction === 'up' ? 'Increase' : direction === 'down' ? 'Decrease' : 'No change' }: ${ value }` }
>

Alternatively, use a visually hidden text element to provide context alongside the visual indicator.

Copilot uses AI. Check for mistakes.
);
}
Comment on lines +1 to +53
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component should use internationalization (i18n) for the accessible label text. Other components in this package use the @wordpress/i18n library's __() function for translatable strings (see bar-chart.tsx, line-chart.tsx).

Example implementation:

import { __ } from '@wordpress/i18n';

// In the component:
const getDirectionLabel = ( direction: TrendDirection ): string => {
  switch ( direction ) {
    case 'up':
      return __( 'Increase', 'jetpack-charts' );
    case 'down':
      return __( 'Decrease', 'jetpack-charts' );
    case 'neutral':
      return __( 'No change', 'jetpack-charts' );
  }
};

This ensures the component works correctly for non-English users.

Copilot uses AI. Check for mistakes.
31 changes: 31 additions & 0 deletions projects/js-packages/charts/src/components/trend-indicator/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import type { CSSProperties } from 'react';

/**
* The direction of the trend
*/
export type TrendDirection = 'up' | 'down' | 'neutral';

/**
* Props for the TrendIndicator component
*/
export type TrendIndicatorProps = {
/**
* The direction of the trend (up, down, or neutral)
*/
direction: TrendDirection;

/**
* The value to display (e.g., "14%", "+$500", "2.5k")
*/
value: string | number;

/**
* Additional CSS class name
*/
className?: string;

/**
* Inline styles
*/
style?: CSSProperties;
};
2 changes: 2 additions & 0 deletions projects/js-packages/charts/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export { ConversionFunnelChart } from './components/conversion-funnel-chart';
export { BaseTooltip } from './components/tooltip';
export { Legend, useChartLegendItems } from './components/legend';
export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
export { TrendIndicator } from './components/trend-indicator';
export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';

// Themes
export { GlobalChartsProvider as ThemeProvider } from './providers';
Expand Down
Loading