Documentation

Class: Pie

Description: The Pie component is a React component that renders a pie chart using the @nivo/pie library. It takes in data and configuration options to visualize a distribution of values.

Example:

import Pie from './Pie';

const data = [
  { field: 'apples', quantity: 10 },
  { field: 'oranges', quantity: 20 },
  { field: 'bananas', quantity: 15 },
];

<Pie 
  data={data} 
  field="field" 
  quantity="quantity" 
  label="Fruit Distribution"
  context="Number of fruits"
/>

Methods

Method: Pie

Description: Constructs a Pie chart component.

Parameters:

  • data (Array<Object>): An array of objects representing the data to be visualized. Each object should contain a field key with the field label, and a quantity key representing the value for that field.
    • Default: data?.length (number of items in the data array)
  • field (string): The key in the data objects that represents the field label.
  • quantity (string): The key in the data objects that represents the value associated with the field.
  • label (string): The title of the pie chart.
  • context (string): A brief description of the data being visualized, e.g., "Number of fruits".
  • margin (number): The margin around the chart, expressed as a number in pixels.
    • Default: 80
  • skipAngle (number): The angle below which data points are grouped into an "Others" category.
    • Default: 0 (no grouping)
  • arcLabels (boolean): Whether to display labels on the pie chart slices.
    • Default: true
  • duotone (boolean): Whether to use a duotone color scheme for the pie chart.
    • Default: false
  • prefix (boolean): Whether to prepend the value to the label of each slice.
    • Default: true
  • className (string): An additional CSS class name to apply to the pie chart component.

Returns:

  • JSX.Element: The rendered Pie chart component.

Throws:

  • None

==========

Helper Functions:

Function: _find

Description: Searches for an item with a specific ID within an array of objects.

Parameters:

  • slices (Array<Object>): The array of objects to search.
  • id (string): The ID to search for.

Returns:

  • number: The index of the found item in the array, or -1 if not found.

Throws:

  • None

Function: _contribution

Description: Calculates the contribution of a value to the total, expressed as a percentage with one decimal place.

Parameters:

  • value (number): The individual value.
  • total (number): The total value.

Returns:

  • string: The percentage contribution formatted as a string.

Throws:

  • None

Function: _coalesce

Description: Combines small values into an "Others" category.

Parameters:

  • slices (Array<Object>): The array of objects representing pie chart slices.
  • value (number): The value to be added.
  • label (string): The label for the "Others" category.

Returns:

  • void

Throws:

  • None

Function: _slices

Description: Processes the data into slices for the pie chart, grouping small values into an "Others" category if needed.

Parameters:

  • data (Array<Object>): The data array to process.
  • keyField (string): The key in the data objects that represents the field label.
  • valueField (string): The key in the data objects that represents the value associated with the field.
  • unique (Set): A set of unique field labels.
  • skipAngle (number): The angle below which data points are grouped into an "Others" category.
  • othersLabel (string): The label for the "Others" category.
    • Default: "Others"

Returns:

  • Array<Object>: An array of objects representing pie chart slices, suitable for the ResponsivePie component.

Throws:

  • None