mirror of
https://github.com/hanzo-apps/dataroom.git
synced 2026-10-30 14:47:36 +00:00
Marc SeitzandHanzo Dev
3bfc4df4e2
The tooltip was using router.query.id (dataroom ID) instead of the actual document ID, and versionNumber was NaN. Pass documentId through BarChartComponent data so the tooltip resolves the correct thumbnail. Add rate limiting (150 req/min per user) to the get-thumbnail endpoint. Co-authored-by: Hanzo Dev <[email protected]>
126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { BarChart } from "@tremor/react";
|
|
|
|
import CustomTooltip from "./bar-chart-tooltip";
|
|
import {
|
|
type Data,
|
|
type SumData,
|
|
type TransformedData,
|
|
getColors,
|
|
timeFormatter,
|
|
} from "./utils";
|
|
|
|
const renameDummyDurationKey = (data: Data[]): TransformedData[] => {
|
|
return data.reduce((acc, { pageNumber, data }) => {
|
|
const transformedItem: Partial<TransformedData> = { pageNumber };
|
|
|
|
data.forEach(({ versionNumber, avg_duration }) => {
|
|
transformedItem[`Example time spent per page`] = avg_duration;
|
|
});
|
|
|
|
acc.push(transformedItem as TransformedData);
|
|
return acc;
|
|
}, [] as TransformedData[]);
|
|
};
|
|
|
|
const renameSumDurationKey = (
|
|
data: SumData[],
|
|
versionNumber?: number,
|
|
documentId?: string,
|
|
) => {
|
|
return data.map((item) => {
|
|
return {
|
|
...item,
|
|
"Time spent per page": item.sum_duration,
|
|
sum_duration: undefined,
|
|
versionNumber: versionNumber ?? 1,
|
|
documentId: documentId,
|
|
};
|
|
});
|
|
};
|
|
|
|
// Transform data
|
|
const transformData = (data: Data[]): TransformedData[] => {
|
|
return data.reduce((acc, { pageNumber, data }) => {
|
|
const transformedItem: Partial<TransformedData> = { pageNumber };
|
|
|
|
data.forEach(({ versionNumber, avg_duration }) => {
|
|
transformedItem[`Version ${versionNumber}`] = avg_duration;
|
|
});
|
|
|
|
acc.push(transformedItem as TransformedData);
|
|
return acc;
|
|
}, [] as TransformedData[]);
|
|
};
|
|
|
|
const getVersionNumbers = (data: TransformedData[]) => {
|
|
return [
|
|
...new Set(
|
|
data.flatMap((item) =>
|
|
Object.keys(item).filter((key) => key !== "pageNumber"),
|
|
),
|
|
),
|
|
];
|
|
};
|
|
|
|
export default function BarChartComponent({
|
|
data,
|
|
isSum = false,
|
|
isDummy = false,
|
|
versionNumber,
|
|
documentId,
|
|
}: {
|
|
data: any;
|
|
isSum?: boolean;
|
|
isDummy?: boolean;
|
|
versionNumber?: number;
|
|
documentId?: string;
|
|
}) {
|
|
const [, setValue] = useState<any>(null);
|
|
|
|
if (isSum) {
|
|
const renamedData = renameSumDurationKey(data, versionNumber, documentId);
|
|
|
|
return (
|
|
<BarChart
|
|
className="mt-6 rounded-tremor-small"
|
|
data={renamedData}
|
|
index="pageNumber"
|
|
categories={["Time spent per page"]}
|
|
colors={["emerald"]}
|
|
valueFormatter={timeFormatter}
|
|
yAxisWidth={50}
|
|
showGridLines={false}
|
|
onValueChange={(v) => setValue(v)}
|
|
customTooltip={isDummy ? undefined : CustomTooltip}
|
|
/>
|
|
);
|
|
}
|
|
|
|
let renamedData = transformData(data);
|
|
let versionNumbers = getVersionNumbers(renamedData);
|
|
let colors = getColors(versionNumbers);
|
|
|
|
if (isDummy) {
|
|
colors = ["gray-300"];
|
|
renamedData = renameDummyDurationKey(data);
|
|
versionNumbers = getVersionNumbers(renamedData);
|
|
}
|
|
|
|
return (
|
|
<BarChart
|
|
className="mt-6 rounded-tremor-small"
|
|
data={renamedData}
|
|
index="pageNumber"
|
|
categories={versionNumbers}
|
|
colors={colors}
|
|
valueFormatter={timeFormatter}
|
|
yAxisWidth={50}
|
|
showGridLines={false}
|
|
onValueChange={(v) => setValue(v)}
|
|
customTooltip={isDummy ? undefined : CustomTooltip}
|
|
/>
|
|
);
|
|
}
|