diff --git a/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx new file mode 100644 index 000000000..63f296cb0 --- /dev/null +++ b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import {List, Progress, Typography} from "antd"; +import cn from "classnames"; + +interface Props { + list: any; + selected: any; + onClickHandler: (event: any, data: any) => void; +} + +function CardSessionsByList({list, selected, onClickHandler}: Props) { + return ( + ( + onClickHandler(e, row)} + style={{ + borderBottom: '1px dotted rgba(0, 0, 0, 0.05)', + padding: '4px 10px', + lineHeight: '1px' + }} + className={cn('rounded hover:bg-active-blue cursor-pointer', selected === row.name ? 'bg-active-blue' : '')} + > + +
+ {row.name} + {row.sessionCount} +
+ + + + )} + /> + + )} + /> + ); +} + +export default CardSessionsByList; diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index 10fa154bd..b7a086d0c 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -1,9 +1,11 @@ import React from 'react'; -import {List, Typography} from 'antd'; +import {Button, Space} from 'antd'; import {filtersMap} from 'Types/filter/newFilter'; import {Icon} from 'UI'; -import {Progress, Empty} from 'antd'; -import cn from "classnames"; +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; @@ -15,6 +17,8 @@ interface Props { function SessionsBy(props: Props) { const {metric = {}, data = {values: []}, onClick = () => null, isTemplate} = props; const [selected, setSelected] = React.useState(null); + const total = data.values.length + const {openModal, closeModal} = useModal(); const onClickHandler = (event: any, data: any) => { const filters = Array(); @@ -34,8 +38,19 @@ function SessionsBy(props: Props) { onClick(filters); } + const showMore = () => { + openModal( + { + closeModal(); + onClickHandler(null, item) + }} selected={selected}/>, { + title: metric.name, + width: 600, + }) + } + return ( -
+
{data.values && data.values.length === 0 ? ( ) : ( - ( - onClickHandler(e, row)} - // actions={[row.sessionCount]} - style={{borderBottom: '1px dotted rgba(0, 0, 0, 0.05)', padding: '6px 0'}} - className={cn('hover:bg-active-blue cursor-pointer', selected === row.name ? 'bg-gray-100' : '')} - > - - {row.name} - {row.sessionCount} -
- )} - description={ - - } - /> - {/*
{row.value}
*/} - +
+ + {total > 3 && ( +
+ +
)} - /> +
)}
); diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx index eda89c46f..2300ddeb2 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component.tsx @@ -1,5 +1,6 @@ import ExCard from '../ExCard' import React from 'react' +import CardSessionsByList from "Components/Dashboard/Widgets/CardSessionsByList"; function ByComponent({title, rows, lineWidth, onCard, type}: { title: string @@ -13,6 +14,11 @@ function ByComponent({title, rows, lineWidth, onCard, type}: { type: string lineWidth: number }) { + const _rows = rows.map((r) => ({ + ...r, + name: r.label, + sessionCount: r.value, + })).slice(0, 4) return (
- {rows.map((r) => ( -
-
{r.icon}
-
{r.label}
-
-
-
-
-
{r.value}
-
- ))} + null}/> + + {/*{rows.map((r) => (*/} + {/* */} + {/*
{r.icon}
*/} + {/*
{r.label}
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
{r.value}
*/} + {/*
*/} + {/*))}*/}
) diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx index ed17b8217..ae48e05af 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx @@ -15,6 +15,7 @@ const NewDashboardModal: React.FC = ({ isAddingFromLibrary = false, }) => { const [step, setStep] = React.useState(0); + const [selectedCategory, setSelectedCategory] = React.useState('product-analytics'); useEffect(() => { return () => { @@ -28,6 +29,8 @@ const NewDashboardModal: React.FC = ({
{step === 0 && setStep(step + 1)} isLibrary={isAddingFromLibrary}/>} {step === 1 && setStep(0)}/>} diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index 72ca572e2..6483f9a44 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -9,11 +9,12 @@ interface SelectCardProps { onClose: (refresh?: boolean) => void; onCard: () => void; isLibrary?: boolean; + selected?: string; + setSelectedCategory?: React.Dispatch>; } const SelectCard: React.FC = (props: SelectCardProps) => { - const {onCard, isLibrary = false} = props; - const [selected, setSelected] = React.useState('product-analytics'); + const {onCard, isLibrary = false, selected, setSelectedCategory} = props; const [selectedCards, setSelectedCards] = React.useState([]); const {metricStore, dashboardStore} = useStore(); const dashboardId = window.location.pathname.split('/')[3]; @@ -83,7 +84,7 @@ const SelectCard: React.FC = (props: SelectCardProps) => { )} - {!isLibrary && } + {!isLibrary && } {isLibrary ? : } @@ -111,15 +112,17 @@ const SelectCard: React.FC = (props: SelectCardProps) => { // ); interface CategorySelectorProps { - setSelected: React.Dispatch>; + setSelected?: React.Dispatch>; + selected?: string; } -const CategorySelector: React.FC = ({setSelected}) => ( +const CategorySelector: React.FC = ({setSelected, selected}) => ( ({ label:
-
+