forked from github/plane
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { observer } from "mobx-react-lite";
|
|
import { Control, Controller, UseFormSetValue } from "react-hook-form";
|
|
|
|
// mobx store
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// components
|
|
import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
|
|
// types
|
|
import { IAnalyticsParams } from "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 router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
|
|
const { project: projectStore } = useMobxStore();
|
|
|
|
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
|
|
|
|
return (
|
|
<div
|
|
className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
|
|
fullScreen ? "lg:grid-cols-4 md:py-5" : ""
|
|
}`}
|
|
>
|
|
{!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} projects={projectsList ?? 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>
|
|
);
|
|
});
|