jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: metric type selector for head

Browse source
This commit is contained in:
nick-delirium 2024-12-12 12:54:22 +01:00
parent e9ec4a7c9b
commit 197504caa7
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
6 changed files with 86 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/app/components/Dashboard/components/MetricTypeSelector.tsx Normal file
View file

@ -0,0 +1,52 @@
import React from 'react';
import { Segmented } from 'antd';
import { LineChart, AlignStartVertical } from 'lucide-react';
import { Icon } from 'UI'; //dashboards/user-journey , dashboards/heatmap-2, signpost-split
import {
TIMESERIES,
FUNNEL,
USER_PATH,
HEATMAP,
RETENTION,
} from 'App/constants/card';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
const types = [
{
icon: <LineChart width={16} />,
value: TIMESERIES,
},
{
icon: <AlignStartVertical width={16} />,
value: FUNNEL,
},
{
icon: <Icon name={'dashboards/user-journey'} color={'inherit'} size={16} />,
value: USER_PATH,
},
{
icon: <Icon name={'dashboards/heatmap-2'} color={'inherit'} size={16} />,
value: HEATMAP,
},
{
icon: <Icon name={'signpost-split'} color={'inherit'} size={16} />,
value: RETENTION,
},
];
function MetricTypeSelector() {
const { metricStore } = useStore();
const metric = metricStore.instance;
const onChange = (type: string) => {
metricStore.changeType(type);
};
const selected = types.find((i) => i.value === metric.metricType) || types[0];
return (
<Segmented onChange={onChange} options={types} value={selected.value} />
);
}
export default observer(MetricTypeSelector);

3
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -501,6 +501,7 @@ function WidgetChart(props: Props) {
}
}
console.log('Unknown metric type', metricType, viewType);
return <div>Unknown metric type</div>;
};
@ -509,7 +510,7 @@ function WidgetChart(props: Props) {
<Loader loading={loading} style={{ height: `240px` }}>
<div
style={{
minHeight: 240,
minHeight: props.isPreview ? undefined : 240,
paddingTop:
props.isPreview && metric.metricType === TIMESERIES
? '1.5rem'

16
frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
View file

@ -14,8 +14,8 @@ interface Props {
}
function MetricTypeDropdown(props: Props) {
const { metricStore, userStore } = useStore();
const isEnterprise = userStore.isEnterprise;
const metric: any = metricStore.instance;
const isEnterprise = userStore.isEnterprise;
const options = React.useMemo(() => {
return DROPDOWN_OPTIONS.map((option: any) => {
@ -26,18 +26,6 @@ function MetricTypeDropdown(props: Props) {
});
}, []);
React.useEffect(() => {
const queryCardType = props.query.get('type');
if (queryCardType && options.length > 0 && metric.metricType) {
const type: Option = options.find((i) => i.value === queryCardType) as Option;
if (type.disabled) {
return;
}
setTimeout(() => onChange(type.value), 0);
}
// setTimeout(() => onChange(USER_PATH), 0);
}, []);
const onChange = (type: string) => {
metricStore.changeType(type);
};
@ -51,7 +39,7 @@ function MetricTypeDropdown(props: Props) {
value={
DROPDOWN_OPTIONS.find((i: any) => i.value === metric.metricType) || DROPDOWN_OPTIONS[0]
}
onChange={props.onSelect}
onChange={({ value }) => onChange(value.value)}
components={{
SingleValue: ({ children, ...props }: any) => {
const {

15
frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
View file

@ -2,10 +2,13 @@ import React from 'react';
import cn from 'classnames';
import WidgetName from 'Components/Dashboard/components/WidgetName';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import { observer } from 'mobx-react-lite';
import AddToDashboardButton from 'Components/Dashboard/components/AddToDashboardButton';
import { Button, Space } from 'antd';
import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMenu';
import { Link } from 'lucide-react'
import copy from 'copy-to-clipboard';
import MetricTypeSelector from "../MetricTypeSelector";
interface Props {
onClick?: () => void;
@ -14,8 +17,12 @@ interface Props {
function WidgetViewHeader({ onClick, onSave }: Props) {
const { metricStore } = useStore();
const widget = useObserver(() => metricStore.instance);
const widget = metricStore.instance;
const copyUrl = () => {
const url = window.location.href;
copy(url)
}
return (
<div
className={cn(
@ -32,6 +39,8 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
</h1>
<Space>
<AddToDashboardButton metricId={widget.metricId} />
<MetricTypeSelector />
<Button onClick={copyUrl} icon={<Link size={16} strokeWidth={1} />}></Button>
<Button
type="primary"
onClick={onSave}
@ -46,4 +55,4 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
);
}
export default WidgetViewHeader;
export default observer(WidgetViewHeader);

2
frontend/app/components/shared/Filters/FilterList/FilterList.tsx
View file

@ -177,7 +177,7 @@ export const EventsList = observer((props: Props) => {
const eventsNum = filters.filter((i: any) => i.isEvent).length;
return (
<div
className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter overflow-hidden'}
className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
style={{
borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
borderBottomRightRadius: props.mergeDown ? 0 : undefined,

34
frontend/app/constants/card.ts
View file

@ -19,7 +19,7 @@ export const FUNNEL = 'funnel';
export const ERRORS = 'errors';
export const USER_PATH = 'pathAnalysis';
export const RETENTION = 'retention';
export const INSIGHTS = 'insights';
export const INSIGHTS = 'insights'; // SaaS and EE
export const PERFORMANCE = 'performance';
export interface Option {
@ -51,22 +51,22 @@ export const TYPES: CardType[] = [
slug: HEATMAP,
subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
},
{
title: 'Table',
icon: 'list-alt',
description: 'Create custom tables of users, sessions, errors, issues and more.',
slug: TABLE,
subTypes: [
{ title: 'Users', slug: FilterKey.USERID, description: '' },
{ title: 'Sessions', slug: FilterKey.SESSIONS, description: '' },
{ title: 'JS Errors', slug: FilterKey.ERRORS, description: '' },
{ title: 'Issues', slug: FilterKey.ISSUE, description: '' },
{ title: 'Browser', slug: FilterKey.USER_BROWSER, description: '' },
{ title: 'Devices', slug: FilterKey.USER_DEVICE, description: '' },
{ title: 'Countries', slug: FilterKey.USER_COUNTRY, description: '' },
{ title: 'URLs', slug: FilterKey.LOCATION, description: '' },
],
},
// {
// title: 'Table',
// icon: 'list-alt',
// description: 'Create custom tables of users, sessions, errors, issues and more.',
// slug: TABLE,
// subTypes: [
// { title: 'Users', slug: FilterKey.USERID, description: '' },
// { title: 'Sessions', slug: FilterKey.SESSIONS, description: '' },
// { title: 'JS Errors', slug: FilterKey.ERRORS, description: '' },
// { title: 'Issues', slug: FilterKey.ISSUE, description: '' },
// { title: 'Browser', slug: FilterKey.USER_BROWSER, description: '' },
// { title: 'Devices', slug: FilterKey.USER_DEVICE, description: '' },
// { title: 'Countries', slug: FilterKey.USER_COUNTRY, description: '' },
// { title: 'URLs', slug: FilterKey.LOCATION, description: '' },
// ],
// },
{
title: 'Funnel',
icon: 'funnel',