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>
  );
}
GitHubExample

​
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.