Updated insights report rendering.

This commit is contained in:
Mike Cao 2023-08-07 23:02:38 -07:00
parent c4bbcf37b7
commit 85c593416a
6 changed files with 64 additions and 55 deletions

View file

@ -1,29 +1,42 @@
import { useContext } from 'react';
import { useContext, useEffect, useState } from 'react';
import { GridTable, GridColumn } from 'react-basics';
import { useFormat, useMessages } from 'hooks';
import { ReportContext } from '../Report';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
export function InsightsTable() {
const [fields, setFields] = useState();
const { report } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { groups = [] } = report?.parameters || {};
const { formatValue } = useFormat();
useEffect(
() => {
setFields(report?.parameters?.fields);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[report?.data],
);
if (!fields) {
return <EmptyPlaceholder />;
}
return (
<GridTable data={report?.data || []}>
{groups.map(({ name, label }) => {
{fields.map(({ name, label }) => {
return (
<GridColumn key={name} name={name} label={label}>
{row => formatValue(row[name], name)}
</GridColumn>
);
})}
<GridColumn name="views" label={formatMessage(labels.views)} width="100px">
{row => row.views.toLocaleString()}
</GridColumn>
<GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px">
{row => row.visitors.toLocaleString()}
</GridColumn>
<GridColumn name="views" label={formatMessage(labels.views)} width="100px">
{row => row.views.toLocaleString()}
</GridColumn>
</GridTable>
);
}