d604f9920b
* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
88 lines
3 KiB
TypeScript
88 lines
3 KiB
TypeScript
import React from 'react';
|
|
import {Button, Space} from 'antd';
|
|
import {filtersMap} from 'Types/filter/newFilter';
|
|
import {Icon} from 'UI';
|
|
import {Empty} from 'antd';
|
|
import {ArrowRight} from "lucide-react";
|
|
import CardSessionsByList from "Components/Dashboard/Widgets/CardSessionsByList";
|
|
import {useModal} from "Components/ModalContext";
|
|
|
|
interface Props {
|
|
metric?: any;
|
|
data: any;
|
|
onClick?: (filters: any) => void;
|
|
isTemplate?: boolean;
|
|
}
|
|
|
|
function SessionsBy(props: Props) {
|
|
const {metric = {}, data = {values: []}, onClick = () => null, isTemplate} = props;
|
|
const [selected, setSelected] = React.useState<any>(null);
|
|
const total = data.values.length
|
|
const {openModal, closeModal} = useModal();
|
|
|
|
const onClickHandler = (event: any, data: any) => {
|
|
const filters = Array<any>();
|
|
let filter = {...filtersMap[metric.metricOf]};
|
|
filter.value = [data.name];
|
|
filter.type = filter.key;
|
|
delete filter.key;
|
|
delete filter.operatorOptions;
|
|
delete filter.category;
|
|
delete filter.icon;
|
|
delete filter.label;
|
|
delete filter.options;
|
|
|
|
setSelected(data.name)
|
|
|
|
filters.push(filter);
|
|
onClick(filters);
|
|
}
|
|
|
|
const showMore = () => {
|
|
openModal(
|
|
<CardSessionsByList list={data.values} onClickHandler={(e, item) => {
|
|
closeModal();
|
|
onClickHandler(null, item)
|
|
}} selected={selected}/>, {
|
|
title: metric.name,
|
|
width: 600,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{data.values && data.values.length === 0 ? (
|
|
<Empty
|
|
image={null}
|
|
style={{minHeight: 220}}
|
|
className="flex flex-col items-center justify-center"
|
|
imageStyle={{height: 60}}
|
|
description={
|
|
<div className="flex items-center justify-center">
|
|
<Icon name="info-circle" className="mr-2" size="18"/>
|
|
No data for the selected time period
|
|
</div>
|
|
}
|
|
/>
|
|
) : (
|
|
<div className="flex flex-col justify-between w-full" style={{height: 220}}>
|
|
<CardSessionsByList list={data.values.slice(0, 3)}
|
|
selected={selected}
|
|
onClickHandler={onClickHandler}/>
|
|
{total > 3 && (
|
|
<div className="flex">
|
|
<Button type="link" onClick={showMore}>
|
|
<Space>
|
|
{total - 3} more
|
|
<ArrowRight size={16}/>
|
|
</Space>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SessionsBy;
|