Query the Leaderboard API from frontend applications.
Use Access Policies and multi-tenant JWT tokens to control access to your data.
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useLeaderboard, RelativeTimeRange } from "@propeldata/ui-kit";

const queryClient = new QueryClient();

function UseLeaderboard() {
  const { data } = useLeaderboard({
    metric: {
      count: { dataPool: { name: "TacoSoft Demo Data" } },
    },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
    dimensions: [{
      columnName: 'restaurant_name',
    }],
  });

  return (
    <pre>
      {JSON.stringify(data?.leaderboard?.rows, null, 2)}
    </pre>
  );
}

export default function UseSqlExample() {
  return (
    <QueryClientProvider client={queryClient}>
      <UseLeaderboard />
    </QueryClientProvider>
  );
}

Props API

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.
dimensions
DimensionInput[]
One or many Dimensions to group the Metric values by. Typically, Dimensions in a leaderboard are what you want to compare and rank.
timeZone
string
Indicates specific time zone region
timeRange
TimeRangeInput
Specify the time range for a time series, counter, or leaderboard Metric query
metric
string | DeepPartial<MetricInput>
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
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.