Pie Chart

Show part-to-whole relationships.

Preview

Code

/pie-chart/page.tsx

import {
  PieChart,
  Container,
  RelativeTimeRange,
  Sort
} from "@propeldata/ui-kit";

export default async function PieChartExample() {
  return (
    <Container p="5">
      <PieChart
        query={{
          metric: {
            count: {
              dataPool: {
                name: "TacoSoft Demo Data",
              },
            },
          },
          timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
          rowLimit: 3,
          dimension: { columnName: "restaurant_name" },
          sort: Sort.Desc,

        }}
        chartProps={{
          hideTotal: true,
          legendPosition: "bottom",
        }}
      />
    </Container>
  );
}

GitHub

Storybook

Example

Props API

query · PieChartQueryProps

PieChart query props

Show PieChartQueryProps

rowLimit · number

The number of rows to be returned. It can be a number between 1 and 1,000

sort · Sort

The sort order of the rows. It can be ascending (ASC) or descending (DESC) order. Defaults to descending (DESC) order when not provided.

Show Sort

The available sort orders.

​

• ASC: Sort in ascending order.
• DESC: Sort in descending order.

dimensions · DimensionInput[]

Dimensions to group the Metric values by. Typically, Dimensions in a piechart is what you want to compare and rank.

Show DimensionInput

The fields for creating or modifying a Dimension.

columnName · String · required

The name of the column to create the Dimension from.

timeZone · string

Indicates specific time zone region

timeRange · TimeRangeInput

Specify the time range for a time series, counter, or leaderboard Metric query

Show TimeRangeInput

The fields required to specify the time range for a time series, counter, or leaderboard Metric query.

If no relative or absolute time ranges are provided, Propel defaults to an absolute time range beginning with the earliest record in the Metric’s Data Pool and ending with the latest record.

If both relative and absolute time ranges are provided, the relative time range will take precedence.

If a LAST_N relative time period is selected, an n ≥ 1 must be provided. If no n is provided or n < 1, a BAD_REQUEST error will be returned.

timestamp · String

The timestamp field to use when querying. Defaults to the timestamp configured on the Data Pool or Metric, if any. Set this to filter on an alternative timestamp field.

relative · RelativeTimeRange

The relative time period.

Show RelativeTimeRange

The Relative time ranges are based on the current date and time.

THIS - The current unit of time. For example, if today is June 8, 2022, and THIS_MONTH is selected, then data for June 2022 would be returned.

PREVIOUS - The previous unit of time. For example, if today is June 8, 2022, and PREVIOUS_MONTH is selected, then data for May 2022 would be returned. It excludes the current unit of time.

NEXT - The next unit of time. For example, if today is June 8, 2022, and NEXT_MONTH is selected, then data for July 2022 would be returned. It excludes the current unit of time.

LAST_N - The last n units of time, including the current one. For example, if today is June 8, 2022 and LAST_N_YEARS with n = 3 is selected, then data for 2020, 2021, and 2022 will be returned. It will include the current time period.

​

• THIS_HOUR: Starts at the zeroth minute of the current hour and continues for 60 minutes.
• TODAY: Starts at 12:00:00 AM of the current day and continues for 24 hours.
• THIS_WEEK: Starts on Monday, 12:00:00 AM of the current week and continues for seven days.
• THIS_MONTH: Starts at 12:00:00 AM on the first day of the current month and continues for the duration of the month.
• THIS_QUARTER: Starts at 12:00:00 AM on the first day of the current calendar quarter and continues for the duration of the quarter.
• THIS_YEAR: Starts on January 1st, 12:00:00 AM of the current year and continues for the duration of the year.
• PREVIOUS_HOUR: Starts at the zeroth minute of the previous hour and continues for 60 minutes.
• YESTERDAY: Starts at 12:00:00 AM on the day before the today and continues for 24 hours.
• PREVIOUS_WEEK: Starts on Monday, 12:00:00 AM, a week before the current week, and continues for seven days.
• PREVIOUS_MONTH: Starts at 12:00:00 AM on the first day of the month before the current month and continues for the duration of the month.
• PREVIOUS_QUARTER: Starts at 12:00:00 AM on the first day of the calendar quarter before the current quarter and continues for the duration of the quarter.
• PREVIOUS_YEAR: Starts on January 1st, 12:00:00 AM, the year before the current year, and continues for the duration of the year.
• NEXT_HOUR: Starts at the zeroth minute of the next hour and continues for 60 minutes.
• TOMORROW: ” Starts at 12:00:00 AM, the day after the current day, and continues for 24 hours.
• NEXT_WEEK: Starts on Monday, 12:00:00 AM, the week after the current week, and continues for the duration of the week.
• NEXT_MONTH: Starts at 12:00:00 AM on the first day of the next month and continues for the duration of the month.
• NEXT_QUARTER: Starts at 12:00:00 AM on the first day of the next calendar quarter and continues for the duration of the quarter.
• NEXT_YEAR: Starts on January 1st, 12:00:00 AM of the next year and continues for the duration of the year.
• LAST_N_MINUTES: Starts at the zeroth second n - 1 minute(s) before the current minute and continues through the current minute. It includes this minute.
• LAST_N_HOURS: Starts at the zeroth minute of the n - 1 hour(s) before the current hour, and continues through the current hour. It includes this hour.
• LAST_N_DAYS: Starts at 12:00:00 AM, n - 1 day(s) before the current day, and continues through the current day. It includes today.
• LAST_N_WEEKS: Starts on Monday, 12:00:00 AM, n - 1 week(s) before the current week, and continues through the current week. It includes this week.
• LAST_N_MONTHS: Starts at 12:00:00 AM on the first day of the month, n - 1 month(s) before the current month, and continues through the current month. It includes this month.
• LAST_N_QUARTERS: Starts at 12:00:00 AM on the first day of the calendar quarter n - 1 quarter(s) before the current quarter and continues through the current quarter. It includes this quarter.
• LAST_N_YEARS: Starts on January 1st, 12:00:00 AM of the year n - 1 year(s) before the current year and continues through the current year. It includes this year.
• LAST_15_MINUTES
• LAST_30_MINUTES
• LAST_HOUR
• LAST_4_HOURS
• LAST_12_HOURS
• LAST_24_HOURS
• LAST_7_DAYS
• LAST_30_DAYS
• LAST_90_DAYS
• LAST_3_MONTHS
• LAST_6_MONTHS
• LAST_YEAR
• LAST_2_YEARS
• LAST_5_YEARS

n · Int

The number of time units for the LAST_N relative periods.

start · DateTime

The optional start timestamp (inclusive). Defaults to the timestamp of the earliest record in the Data Pool.

stop · DateTime

The optional end timestamp (exclusive). Defaults to the timestamp of the latest record in the Data Pool.

metric

The metric prop allows you to specify which metric to query. You can query predefined metrics by passing their name or ID as a string, or you can query metrics on-the-fly by passing an inline metric definition to the prop.

filters · FilterInput[]

Filters that the chart will respond to

Show FilterInput

The fields of a filter.

You can construct more complex filters using and and or. For example, to construct a filter equivalent to

(value > 0 AND value <= 100) OR status = "confirmed"

you could write

{
  "column": "value",
  "operator": "GREATER_THAN",
  "value": "0",
  "and": [{
    "column": "value",
    "operator": "LESS_THAN_OR_EQUAL_TO",
    "value": "0"
  }],
  "or": [{
    "column": "status",
    "operator": "EQUALS",
    "value": "confirmed"
  }]
}

Note that and takes precedence over or.

column · String · required

The name of the column to filter on.

operator · FilterOperator · required

The operation to perform when comparing the column and filter values.

Show FilterOperator

The available Filter operators.

​

• EQUALS: Selects values that are equal to the specified value.
• NOT_EQUALS: Selects values that are not equal to the specified value.
• GREATER_THAN: Selects values that are greater than the specified value.
• GREATER_THAN_OR_EQUAL_TO: Selects values that are greater or equal to the specified value.
• LESS_THAN: Selects values that are less than the specified value.
• LESS_THAN_OR_EQUAL_TO: Selects values that are less or equal to the specified value.
• IS_NULL: Selects values that are null. This operator does not accept a value.
• IS_NOT_NULL: Selects values that are not null. This operator does not accept a value.
• LIKE: Selects values that match the specified pattern.
• NOT_LIKE: “Selects values that do not match the specified pattern.

value · String

The value to compare the column to.

and · [FilterInput!]

Additional filters to AND with this one. AND takes precedence over OR.

or · [FilterInput!]

Additional filters to OR with this one. AND takes precedence over OR.

accessToken · string

Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the AccessTokenProvider instead:

refetchInterval · number

Interval in milliseconds for refetching the data

retry · boolean

Whether to retry on errors.

propelApiUrl · string

This prop allows you to override the URL for Propel’s GraphQL API. You shouldn’t need to set this unless you are testing.

enabled · boolean

When false, the component will not make any GraphQL requests, default is true.

Show Deprecated Fields

dimension · DimensionInput · deprecated

This prop is deprecated, use dimensions instead.

Show DimensionInput

The fields for creating or modifying a Dimension.

columnName · String · required

The name of the column to create the Dimension from.

variant · PieChartVariant

The variant the chart will respond to, can be either pie or doughnut.

Show PieChartVariant

PieChartVariant · "pie" | "doughnut"

loading · boolean

When true, shows a skeleton loader

timeZone · string

Time zone to use (for example, “America/Los_Angeles”, “Europe/Berlin”, or “UTC”). Defaults to the client’s local time zone

headers · string[]

If passed along with rows the component will ignore the built-in GraphQL operations.

rows · string[][]

If passed along with headers the component will ignore the built-in GraphQL operations.

chartProps · ChartProps

Optional props that are used to configure the chart component.

Show ChartProps

labelPosition · "axis" | "inside" | "top"

Sets the position of the labels

otherLabel · string

Sets the other label text

hideLegend · boolean

Hides the legend on chart if it is set the true

legendPosition · "top" | "bottom" | "left" | "right"

Sets the position of the legend

showValues · boolean

Shows the values on chart if it is set the true

hideTotal · boolean

Hides the total value on chart if it is set the true

totalPosition · "top" | "bottom"

Sets the position of the total value for Pie Chart

Show Deprecated Fields

chartColorPalette · string[] · deprecated

Sets the chart color palette

labelListClassName · string

Provides className to style label list of chart.

accentColors · (AccentColors | string)[]

A list of accent colors the PieChart component will use, those will be picked in order

otherColor · GrayColors | string

Color that will be used for other

showGroupByOther · boolean

If set to true, shows the other slice of the pie chart, defaults to true

chartConfigProps

An optional prop that provides access to the Chart.js API, allowing for further customization of chart settings.

Show Theme Provider Props

appearance · ThemeAppearances

The initial theme used as a base. It provides a default set of styling from which customizations can be applied.

Show ThemeAppearances

ThemeAppearances · "light" | "dark"

accentColor · AccentColors

The global theme accent color. This color is used to highlight elements

Show AccentColors

AccentColors · "amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "indigo" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "teal" | "tomato" | "violet" | "yellow"

grayColor · GrayColors

The global theme gray color. This color is used for text and background colors

Show GrayColors

GrayColors · "auto" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand"

radius · Radii

The global theme radius color. This color is used for border radius

Show Radii

Radii · "none" | "small" | "medium" | "large" | "full"

scaling · Scalings

The global theme scaling. This value is used to scale components

Show Scalings

Scalings · "90%" | "95%" | "100%" | "105%" | "110%"

panelBackground · PanelBackgrounds

The global theme panel background. This value is used to set the panel background

Show PanelBackgrounds

PanelBackgrounds · "solid" | "translucent"

Show Deprecated Fields

error · { title: string; body: string; } | null · deprecated

This type is deprecated, use errorFallbackProps and errorFallback instead