Querying Metrics

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

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

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

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