plane/web/components/analytics/custom-analytics/select-bar.tsx
2024-02-09 15:52:25 +05:30

83 lines
2.5 KiB
TypeScript

import { observer } from "mobx-react-lite";
import { Control, Controller, UseFormSetValue } from "react-hook-form";
// hooks
import { useProject } from "hooks/store";
// components
import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
// types
import { IAnalyticsParams } from "@plane/types";
type Props = {
control: Control<IAnalyticsParams, any>;
setValue: UseFormSetValue<IAnalyticsParams>;
params: IAnalyticsParams;
fullScreen: boolean;
isProjectLevel: boolean;
};
export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
const { control, setValue, params, fullScreen, isProjectLevel } = props;
const { workspaceProjectIds: workspaceProjectIds } = useProject();
return (
<div
className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"} ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""
}`}
>
{!isProjectLevel && (
<div>
<h6 className="text-xs text-custom-text-200">Project</h6>
<Controller
name="project"
control={control}
render={({ field: { value, onChange } }) => (
<SelectProject
value={value ?? undefined}
onChange={onChange}
projectIds={workspaceProjectIds ?? undefined}
/>
)}
/>
</div>
)}
<div>
<h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
<Controller
name="y_axis"
control={control}
render={({ field: { value, onChange } }) => <SelectYAxis value={value} onChange={onChange} />}
/>
</div>
<div>
<h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
<Controller
name="x_axis"
control={control}
render={({ field: { value, onChange } }) => (
<SelectXAxis
value={value}
onChange={(val: string) => {
if (params.segment === val) setValue("segment", null);
onChange(val);
}}
params={params}
/>
)}
/>
</div>
<div>
<h6 className="text-xs text-custom-text-200">Group</h6>
<Controller
name="segment"
control={control}
render={({ field: { value, onChange } }) => (
<SelectSegment value={value} onChange={onChange} params={params} />
)}
/>
</div>
</div>
);
});