Documentation

Class: Line

Description: The Line component is a React component responsible for rendering a line chart using the @nivo/line library. It displays the value of a specific metric across time, along with its change from the previous data point.

Methods

Method: Line

Description: The Line component function renders a line chart based on provided data. It calculates the sum of the metric, the percentage change from the previous data point, and formats the data into a suitable structure for the ResponsiveLine component.

Parameters:

  • data (Array): An array of data points, each containing a period and the metric value for that period.
  • metric (String): The name of the metric to be displayed on the chart.
  • label (String): The label or title for the line chart.

Returns:

  • JSX.Element: The rendered line chart component.

Example:

import Line from './Line';

const data = [
    { period: '2023-01-01', sales: 100 },
    { period: '2023-02-01', sales: 120 },
    { period: '2023-03-01', sales: 110 },
];

<Line data={data} metric="sales" label="Sales" />

Considerations:

  • The data array should be sorted by period.
  • The data array must have at least two entries for the percentage change to be calculated.
  • The getMonthYear helper function from ../../utils/Helpers is used to format the tooltip date.
  • The ResponsiveLine component from @nivo/line is used to render the line chart.
  • The classNames library is used to apply dynamic CSS classes based on the percentage change value.

Potential Pitfalls:

  • The data array may be empty or have less than two data points, resulting in a chart with no data or an undefined percentage change.
  • The metric provided may not exist in the data array.
  • The getMonthYear helper function may not be available or may not return the desired date format.