QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-09-11 14:36:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

mobile handling

Browse Source
This commit is contained in:
Zewed 2024-04-09 20:03:50 +02:00
parent 0b98276b03
commit d50815ff50
1 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/app/studio/BrainsTabs/components/Analytics/Analytics.tsx
View File

@ -18,8 +18,10 @@ import { formatMinimalBrainsToSelectComponentInput } from "@/app/chat/[chatId]/c
import { Range } from "@/lib/api/analytics/types";
import { useAnalytics } from "@/lib/api/analytics/useAnalyticsApi";
import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
import { MessageInfoBox } from "@/lib/components/ui/MessageInfoBox/MessageInfoBox";
import { SingleSelector } from "@/lib/components/ui/SingleSelector/SingleSelector";
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
import { useDevice } from "@/lib/hooks/useDevice";
import styles from "./Analytics.module.scss";
@ -35,6 +37,7 @@ ChartJS.register(
);
export const Analytics = (): JSX.Element => {
const { isMobile } = useDevice();
const { getBrainsUsages } = useAnalytics();
const { allBrains } = useBrainContext();
const [chartData, setChartData] = useState({
@ -125,42 +128,50 @@ export const Analytics = (): JSX.Element => {
return (
<div className={styles.analytics_wrapper}>
{chartData.labels.length ? (
<>
<div className={styles.selectors_wrapper}>
<div className={styles.selector}>
<SingleSelector
iconName="calendar"
options={graphRangeOptions}
onChange={(option) => handleGraphRangeChange(option)}
selectedOption={selectedGraphRangeOption}
placeholder="Select range"
/>
</div>
<div className={styles.selector}>
<SingleSelector
iconName="brain"
options={brainsWithUploadRights}
onChange={(brainId) => setSelectedBrainId(brainId)}
onBackClick={() => setSelectedBrainId(null)}
selectedOption={
selectedBrainId
? {
value: selectedBrainId,
label: allBrains.find(
(brain) => brain.id === selectedBrainId
)?.name as string,
}
: undefined
}
placeholder="Select specific brain"
/>
</div>
</div>
<Line data={chartData} options={options} />
</>
{!isMobile ? (
<div>
{chartData.labels.length ? (
<>
<div className={styles.selectors_wrapper}>
<div className={styles.selector}>
<SingleSelector
iconName="calendar"
options={graphRangeOptions}
onChange={(option) => handleGraphRangeChange(option)}
selectedOption={selectedGraphRangeOption}
placeholder="Select range"
/>
</div>
<div className={styles.selector}>
<SingleSelector
iconName="brain"
options={brainsWithUploadRights}
onChange={(brainId) => setSelectedBrainId(brainId)}
onBackClick={() => setSelectedBrainId(null)}
selectedOption={
selectedBrainId
? {
value: selectedBrainId,
label: allBrains.find(
(brain) => brain.id === selectedBrainId
)?.name as string,
}
: undefined
}
placeholder="Select specific brain"
/>
</div>
</div>
<Line data={chartData} options={options} />
</>
) : (
<LoaderIcon size="big" color="accent" />
)}
</div>
) : (
<LoaderIcon size="big" color="accent" />
<MessageInfoBox type="warning">
This feature is not available on small screens
</MessageInfoBox>
)}
</div>
);