umami/components/metrics/QueryParametersTable.js

52 lines
1.5 KiB
JavaScript
Raw Normal View History

2022-08-08 10:26:20 +02:00
import { useState } from 'react';
2022-08-29 05:20:54 +02:00
import { safeDecodeURI } from 'next-basics';
import FilterButtons from 'components/common/FilterButtons';
2023-04-02 19:00:28 +02:00
import { emptyFilter, paramFilter } from 'lib/filters';
import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
2022-08-29 05:20:54 +02:00
import MetricsTable from './MetricsTable';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-04-01 07:01:36 +02:00
import styles from './QueryParametersTable.module.css';
2022-08-08 10:26:20 +02:00
const filters = {
2023-04-02 19:00:28 +02:00
[FILTER_RAW]: emptyFilter,
[FILTER_COMBINED]: paramFilter,
};
2022-08-08 10:26:20 +02:00
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2022-08-08 10:26:20 +02:00
const buttons = [
{
label: formatMessage(labels.filterCombined),
key: FILTER_COMBINED,
2022-08-08 10:26:20 +02:00
},
{ label: formatMessage(labels.filterRaw), key: FILTER_RAW },
2022-08-08 10:26:20 +02:00
];
return (
<>
{showFilters && <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />}
2022-08-08 10:26:20 +02:00
<MetricsTable
{...props}
title={formatMessage(labels.query)}
2022-08-08 10:26:20 +02:00
type="query"
metric={formatMessage(labels.views)}
2022-08-08 10:26:20 +02:00
websiteId={websiteId}
dataFilter={filters[filter]}
2022-08-08 10:26:20 +02:00
renderLabel={({ x, p, v }) =>
filter === FILTER_RAW ? (
x
) : (
2023-04-01 07:01:36 +02:00
<div className={styles.item}>
<div className={styles.param}>{safeDecodeURI(p)}</div>
<div className={styles.value}>{safeDecodeURI(v)}</div>
</div>
2022-08-08 10:26:20 +02:00
)
}
delay={0}
/>
</>
);
}