Function MetricCatalogProvider

The MetricCatalogProvider component and useMetricCatalog hook provide convenient access to the app-level metricCatalog instance. It relies on React context, so make sure that MetricCatalogProvider is a parent of the component that calls useMetricCatalog.

The best way to do this in Next.js applications is to wrap the page component in _app.tsx.

Example

// _app.tsx
import { metricCatalog } from "../../../common/metrics"

// ...
<ThemeProvider theme={theme}>
  <MetricCatalogProvider metricCatalog={metricCatalog}>
    <Component {...pageProps} />
  </MetricCatalog>
</ThemeProvider>

Any component that wants to use the metric catalog will usually need to have one or more metrics (or metric IDs) and regions as props, and then use the useMetricCatalog hook to fetch the data.

Example

interface MetricAwareProps {
  region: Region;
  metrics: Metric[];
};

const MetricAware = ({ region, metrics }: MetricAwareProps) => {
   const metricCatalog = useMetricCatalog();
   const { data, error } = useDataForMetrics(region, metrics);
  // ...render component

Returns

React.ContextProvider with the given metricCatalog