rebase dev
This commit is contained in:
Shekar Siri
parent
4fdf2915aa
commit
e647d6fb6b
7 changed files with 142 additions and 159 deletions
|
|
@ -47,10 +47,6 @@ function DashboardsView({ history, siteId }: { history: any; siteId: string }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="text-base text-disabled-text flex items-center px-6">
|
||||
<Icon name="info-circle-fill" className="mr-2" size={16} />A dashboard is a custom
|
||||
visualization using your OpenReplay data.
|
||||
</div> */}
|
||||
<DashboardList />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -131,38 +131,17 @@ function DashboardView(props: Props) {
|
|||
}
|
||||
onDoubleClick={() => onEdit(true)}
|
||||
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
|
||||
actionButton={
|
||||
// <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
|
||||
<Popover
|
||||
// open={showTooltip}
|
||||
// interactive
|
||||
// useContext
|
||||
// @ts-ignore
|
||||
// theme="nopadding"
|
||||
// hideDelay={0}
|
||||
// duration={0}
|
||||
// distance={20}
|
||||
placement="left"
|
||||
render={() => showTooltip && (
|
||||
<div style={{ padding: 0 }}>
|
||||
<AddMetricContainer
|
||||
onAction={() => setShowTooltip(false)}
|
||||
isPopup
|
||||
siteId={siteId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Button variant="primary" onClick={() => setShowTooltip(true)}>
|
||||
Add Metric
|
||||
</Button>
|
||||
</Popover>
|
||||
// </OutsideClickDetectingDiv>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
|
||||
<div className="flex items-center flex-shrink-0 justify-end" style={{ width: '300px' }}>
|
||||
<Button variant="primary" onClick={() => setShowTooltip(true)} icon="plus">
|
||||
Add Card
|
||||
</Button>
|
||||
<div className="mx-4"></div>
|
||||
<div
|
||||
className="flex items-center flex-shrink-0 justify-end"
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
<SelectDateRange
|
||||
style={{ width: '300px' }}
|
||||
period={period}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import { toJS } from 'mobx';
|
||||
import { useStore } from 'App/mstore';
|
||||
import WidgetWrapper from '../WidgetWrapper';
|
||||
import { NoContent, Loader, Icon } from 'UI';
|
||||
import { useObserver } from 'mobx-react-lite';
|
||||
import AddMetricContainer from './AddMetricContainer';
|
||||
import Widget from 'App/mstore/types/widget';
|
||||
import MetricTypeList from '../MetricTypeList';
|
||||
|
||||
interface Props {
|
||||
siteId: string;
|
||||
|
|
@ -38,12 +38,21 @@ function DashboardWidgetGrid(props: Props) {
|
|||
<NoContent
|
||||
show={list.length === 0}
|
||||
icon="no-metrics-chart"
|
||||
title={<EmptyDashboardGrid />}
|
||||
// subtext={
|
||||
// <div className="w-4/5 m-auto mt-4">
|
||||
// <AddMetricContainer siteId={siteId} />
|
||||
// </div>
|
||||
// }
|
||||
title={
|
||||
<div className="bg-white rounded">
|
||||
<div className="border-b p-5">
|
||||
<div className="text-2xl font-normal color-gray-darkest">
|
||||
There are no cards in this dashboard
|
||||
</div>
|
||||
<div className="text-base font-normal">
|
||||
Try the most commonly used metrics or graphs to begin.
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 p-8 gap-2">
|
||||
<MetricTypeList />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>{smallWidgets.length > 0 ? (
|
||||
<>
|
||||
|
|
@ -105,122 +114,3 @@ function DashboardWidgetGrid(props: Props) {
|
|||
}
|
||||
|
||||
export default DashboardWidgetGrid;
|
||||
|
||||
interface MetricType {
|
||||
title: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
}
|
||||
const METRIC_TYPES: MetricType[] = [
|
||||
{
|
||||
title: 'Add From Library',
|
||||
icon: 'grid',
|
||||
description: 'Select a pre existing card from card library',
|
||||
slug: 'library',
|
||||
},
|
||||
{
|
||||
title: 'Timeseries',
|
||||
icon: 'graph-up',
|
||||
description: 'Trend of sessions count in over the time.',
|
||||
slug: 'timeseries',
|
||||
},
|
||||
{
|
||||
title: 'Table',
|
||||
icon: 'list-alt',
|
||||
description: 'See list of Users, Sessions, Errors, Issues, etc.,',
|
||||
slug: 'table'
|
||||
},
|
||||
{
|
||||
title: 'Funnel',
|
||||
icon: 'funnel',
|
||||
description: 'Uncover the issues impacting user journeys.',
|
||||
slug: 'funnel'
|
||||
},
|
||||
{
|
||||
title: 'Errors Tracking',
|
||||
icon: 'exclamation-circle',
|
||||
description: 'Discover user journeys between 2 points.',
|
||||
slug: 'errors'
|
||||
},
|
||||
{
|
||||
title: 'Performance Monitoring',
|
||||
icon: 'speedometer2',
|
||||
description: 'Retention graph of users / features over a period of time.',
|
||||
slug: 'performance'
|
||||
},
|
||||
{
|
||||
title: 'Resource Monitoring',
|
||||
icon: 'files',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'resource-monitoring'
|
||||
},
|
||||
{
|
||||
title: 'Web Vitals',
|
||||
icon: 'activity',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'web-vitals'
|
||||
},
|
||||
{
|
||||
title: 'User Path',
|
||||
icon: 'signpost-split',
|
||||
description: 'Discover user journeys between 2 points.',
|
||||
slug: 'user-path'
|
||||
},
|
||||
{
|
||||
title: 'Retention',
|
||||
icon: 'arrow-repeat',
|
||||
description: 'Retension graph of users / features over a period of time.',
|
||||
slug: 'retention'
|
||||
},
|
||||
{
|
||||
title: 'Feature Adoption',
|
||||
icon: 'card-checklist',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'feature-adoption'
|
||||
},
|
||||
];
|
||||
|
||||
function MetricTypeItem({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start hover:bg-active-blue p-4 cursor-pointer">
|
||||
<div className="pr-4 pt-1">
|
||||
<Icon name={icon} size="20" />
|
||||
</div>
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<div className="text-base color-gray-darkest">{title}</div>
|
||||
<div className="text-xs">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyDashboardGrid() {
|
||||
return (
|
||||
<div className="bg-white rounded">
|
||||
<div className="border-b p-4">
|
||||
<div className="text-lg font-medium color-gray-darkest">
|
||||
There are no cards in this dashboard
|
||||
</div>
|
||||
<div className="text-sm">Try the most commonly used metrics or graphs to begin.</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 p-8 gap-2">
|
||||
{METRIC_TYPES.map((metric: MetricType) => (
|
||||
<MetricTypeItem
|
||||
icon={metric.icon}
|
||||
title={metric.title}
|
||||
description={metric.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { IconNames } from 'App/components/ui/SVG';
|
||||
import React from 'react';
|
||||
import { Icon } from 'UI';
|
||||
|
||||
export interface MetricType {
|
||||
title: string;
|
||||
icon: IconNames;
|
||||
description: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
metric: MetricType;
|
||||
}
|
||||
|
||||
function MetricTypeItem(props: Props) {
|
||||
const {
|
||||
metric: { title, icon, description, slug },
|
||||
} = props;
|
||||
return (
|
||||
<div className="flex items-start p-4 hover:bg-active-blue cursor-pointer group hover-color-teal">
|
||||
<div className="pr-4 pt-1">
|
||||
<Icon name={icon} size="20" />
|
||||
</div>
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<div className="text-base group-hover:color-teal">{title}</div>
|
||||
<div className="text-xs">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MetricTypeItem;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './MetricTypeItem';
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React from 'react';
|
||||
import MetricTypeItem, { MetricType } from '../MetricTypeItem/MetricTypeItem';
|
||||
|
||||
const METRIC_TYPES: MetricType[] = [
|
||||
{
|
||||
title: 'Add From Library',
|
||||
icon: 'grid',
|
||||
description: 'Select a pre existing card from card library',
|
||||
slug: 'library',
|
||||
},
|
||||
{
|
||||
title: 'Timeseries',
|
||||
icon: 'graph-up',
|
||||
description: 'Trend of sessions count in over the time.',
|
||||
slug: 'timeseries',
|
||||
},
|
||||
{
|
||||
title: 'Table',
|
||||
icon: 'list-alt',
|
||||
description: 'See list of Users, Sessions, Errors, Issues, etc.,',
|
||||
slug: 'table',
|
||||
},
|
||||
{
|
||||
title: 'Funnel',
|
||||
icon: 'funnel',
|
||||
description: 'Uncover the issues impacting user journeys.',
|
||||
slug: 'funnel',
|
||||
},
|
||||
{
|
||||
title: 'Errors Tracking',
|
||||
icon: 'exclamation-circle',
|
||||
description: 'Discover user journeys between 2 points.',
|
||||
slug: 'errors',
|
||||
},
|
||||
{
|
||||
title: 'Performance Monitoring',
|
||||
icon: 'speedometer2',
|
||||
description: 'Retention graph of users / features over a period of time.',
|
||||
slug: 'performance',
|
||||
},
|
||||
{
|
||||
title: 'Resource Monitoring',
|
||||
icon: 'files',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'resource-monitoring',
|
||||
},
|
||||
{
|
||||
title: 'Web Vitals',
|
||||
icon: 'activity',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'web-vitals',
|
||||
},
|
||||
{
|
||||
title: 'User Path',
|
||||
icon: 'signpost-split',
|
||||
description: 'Discover user journeys between 2 points.',
|
||||
slug: 'user-path',
|
||||
},
|
||||
{
|
||||
title: 'Retention',
|
||||
icon: 'arrow-repeat',
|
||||
description: 'Retension graph of users / features over a period of time.',
|
||||
slug: 'retention',
|
||||
},
|
||||
{
|
||||
title: 'Feature Adoption',
|
||||
icon: 'card-checklist',
|
||||
description: 'Find the adoption of your all features in your app.',
|
||||
slug: 'feature-adoption',
|
||||
},
|
||||
];
|
||||
|
||||
function MetricTypeList() {
|
||||
return (
|
||||
<>
|
||||
{METRIC_TYPES.map((metric: MetricType) => (
|
||||
<MetricTypeItem metric={metric} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MetricTypeList;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './MetricTypeList';
|
||||
Loading…
Add table
Reference in a new issue