The components’ query prop can use either in-line metrics or pre-defined metrics.

For more information on the different types of metrics and their syntax, refer to the Types of Metrics documentation.

​
Query using in-line metrics

​
In-line sum metric

import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryBySum() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query by ad hoc sum metric.
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: {
      sum: {
        dataPool: { id: "<PROPEL_DATAPOOL_ID>" },
        measure: { columnName: "quantity" },
      },
    },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}

​
In-line custom metric

import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryByCustom() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query by ad hoc custom metric.
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: {
      custom: {
        dataPool: { id: "<PROPEL_DATAPOOL_ID>" },
        expression: "SUM(taco_total_price) / SUM(quantity)",
      },
    },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}

​
Query using predefined Metrics

​
Metric by ID

import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryById() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query param by id
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: { id: "<PROPEL_METRIC_ID>" },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
  });
  return <p>{data?.counter?.value}</p>;
}

​
Metric by name

import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryByName() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query param by name
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: { name: "Revenue" },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}

Was this page helpful?

LayoutLogging