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

fix ui: rename clickmap -> heatmap

Browse source
This commit is contained in:
nick-delirium 2024-07-03 10:44:49 +02:00
parent b2147a9fb7
commit 9e1bce8207
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
13 changed files with 39 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
View file

@ -4,14 +4,14 @@ import {ArrowLeft, ArrowRight} from "lucide-react";
import CardBuilder from "Components/Dashboard/components/WidgetForm/CardBuilder";
import {useHistory} from "react-router";
import {useStore} from "App/mstore";
import {CLICKMAP} from "App/constants/card";
import { HEATMAP } from "App/constants/card";
import {renderClickmapThumbnail} from "Components/Dashboard/components/WidgetForm/renderMap";
import WidgetPreview from "Components/Dashboard/components/WidgetPreview/WidgetPreview";
const getTitleByType = (type: string) => {
switch (type) {
case CLICKMAP:
return 'Clickmap';
case HEATMAP:
return 'Heatmap';
default:
return 'Trend Single';
}
@ -48,7 +48,7 @@ function CreateCard(props: Props) {
}
const createCard = async () => {
const isClickMap = metric.metricType === CLICKMAP;
const isClickMap = metric.metricType === HEATMAP;
if (isClickMap) {
try {
metric.thumbnail = await renderClickmapThumbnail();

6
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -8,7 +8,7 @@ import BySystem from './Examples/SessionsBy/BySystem';
import ByCountry from './Examples/SessionsBy/ByCountry';
import ByUrl from './Examples/SessionsBy/ByUrl';
import {
CLICKMAP,
HEATMAP,
ERRORS,
FUNNEL,
INSIGHTS,
@ -103,8 +103,8 @@ export const CARD_LIST: CardType[] = [
},
{
title: 'Heatmaps',
key: CLICKMAP,
cardType: CLICKMAP,
key: HEATMAP,
cardType: HEATMAP,
metricOf: 'sessionCount',
category: CARD_CATEGORIES[0].key,
example: HeatmapsExample

2
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -25,6 +25,7 @@ function MetricTypeIcon({ type }: any) {
setCard(t);
}, [type]);
console.log(type, TYPES)
return (
<Tooltip title={<div className="capitalize">{card.title}</div>}>
<div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
@ -81,6 +82,7 @@ function MetricListItem(props: Props) {
toast.error('Failed to rename card');
}}
console.log(metric)
return (
<>
<Modal open={isEdit} onClose={() => setIsEdit(false)}>

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

@ -16,7 +16,7 @@ import {FilterKey} from 'Types/filter/filterType';
import {
TIMESERIES,
TABLE,
CLICKMAP,
HEATMAP,
FUNNEL,
ERRORS,
PERFORMANCE,
@ -206,7 +206,7 @@ function WidgetChart(props: Props) {
);
}
}
if (metricType === CLICKMAP) {
if (metricType === HEATMAP) {
if (!props.isPreview) {
return (
<div style={{height: '229px', overflow: 'hidden', marginBottom: '10px'}}>

12
frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
View file

@ -15,7 +15,7 @@ import {eventKeys} from 'App/types/filter/newFilter';
import {renderClickmapThumbnail} from './renderMap';
import FilterItem from 'Shared/Filters/FilterItem';
import {
TIMESERIES, TABLE, CLICKMAP, FUNNEL, ERRORS, RESOURCE_MONITORING,
TIMESERIES, TABLE, HEATMAP, FUNNEL, ERRORS, RESOURCE_MONITORING,
PERFORMANCE, WEB_VITALS, INSIGHTS, USER_PATH, RETENTION
} from 'App/constants/card';
import {useParams} from 'react-router-dom';
@ -159,8 +159,8 @@ const PathAnalysisFilter = observer(({metric}: any) => (
const SeriesList = observer(() => {
const {metricStore, dashboardStore, aiFiltersStore} = useStore();
const metric = metricStore.instance;
const excludeFilterKeys = [CLICKMAP, USER_PATH].includes(metric.metricType) ? eventKeys : [];
const hasSeries = ![TABLE, FUNNEL, CLICKMAP, INSIGHTS, USER_PATH, RETENTION].includes(metric.metricType);
const excludeFilterKeys = [HEATMAP, USER_PATH].includes(metric.metricType) ? eventKeys : [];
const hasSeries = ![TABLE, FUNNEL, HEATMAP, INSIGHTS, USER_PATH, RETENTION].includes(metric.metricType);
const canAddSeries = metric.series.length < 3;
return (
@ -171,10 +171,10 @@ const SeriesList = observer(() => {
<div className='mb-2' key={series.name}>
<FilterSeries
canExclude={metric.metricType === USER_PATH}
supportsEmpty={![CLICKMAP, USER_PATH].includes(metric.metricType)}
supportsEmpty={![HEATMAP, USER_PATH].includes(metric.metricType)}
excludeFilterKeys={excludeFilterKeys}
observeChanges={() => metric.updateKey('hasChanged', true)}
hideHeader={[TABLE, CLICKMAP, INSIGHTS, USER_PATH, FUNNEL].includes(metric.metricType)}
hideHeader={[TABLE, HEATMAP, INSIGHTS, USER_PATH, FUNNEL].includes(metric.metricType)}
seriesIndex={index}
series={series}
onRemoveSeries={() => metric.removeSeries(index)}
@ -251,7 +251,7 @@ const CardBuilder = observer((props: CardBuilderProps) => {
const onSave = useCallback(async () => {
const wasCreating = !metric.exists();
if (metric.metricType === CLICKMAP) {
if (metric.metricType === HEATMAP) {
try {
metric.thumbnail = await renderClickmapThumbnail();
} catch (e) {

4
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -13,7 +13,7 @@ import MetricSubtypeDropdown from './components/MetricSubtypeDropdown';
import {
TIMESERIES,
TABLE,
CLICKMAP,
HEATMAP,
FUNNEL,
ERRORS,
RESOURCE_MONITORING,
@ -52,7 +52,7 @@ function WidgetForm(props: Props) {
const timeseriesOptions = metricOf.filter((i) => i.type === 'timeseries');
const tableOptions = metricOf.filter((i) => i.type === 'table');
const isTable = metric.metricType === TABLE;
const isClickmap = metric.metricType === CLICKMAP;
const isClickmap = metric.metricType === HEATMAP;
const isFunnel = metric.metricType === FUNNEL;
const isInsights = metric.metricType === INSIGHTS;
const isPathAnalysis = metric.metricType === USER_PATH;

6
frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
View file

@ -3,7 +3,7 @@ import { Card, Space, Typography, Button, Alert } from 'antd';
import { useStore } from 'App/mstore';
import { eventKeys } from 'Types/filter/newFilter';
import {
CLICKMAP,
HEATMAP,
ERRORS,
FUNNEL,
INSIGHTS,
@ -28,7 +28,7 @@ function WidgetFormNew() {
const eventsLength = metric.series[0].filter.filters.filter((i: any) => i && i.isEvent).length;
const filtersLength = metric.series[0].filter.filters.filter((i: any) => i && !i.isEvent).length;
const isClickMap = metric.metricType === CLICKMAP;
const isClickMap = metric.metricType === HEATMAP;
const isPathAnalysis = metric.metricType === USER_PATH;
const excludeFilterKeys = isClickMap || isPathAnalysis ? eventKeys : [];
const hasFilters = filtersLength > 0 || eventsLength > 0;
@ -67,7 +67,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
// const timeseriesOptions = metricOf.filter((i) => i.type === 'timeseries');
// const tableOptions = metricOf.filter((i) => i.type === 'table');
const isTable = metric.metricType === TABLE;
const isClickMap = metric.metricType === CLICKMAP;
const isClickMap = metric.metricType === HEATMAP;
const isFunnel = metric.metricType === FUNNEL;
const isInsights = metric.metricType === INSIGHTS;
const isPathAnalysis = metric.metricType === USER_PATH;

4
frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
View file

@ -8,7 +8,7 @@ import {observer} from 'mobx-react-lite';
// import WidgetDateRange from '../WidgetDateRange/WidgetDateRange';
import ClickMapRagePicker from "Components/Dashboard/components/ClickMapRagePicker";
// import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal';
import {CLICKMAP, TABLE, TIMESERIES, RETENTION, USER_PATH} from 'App/constants/card';
import {HEATMAP, TABLE, TIMESERIES, RETENTION, USER_PATH} from 'App/constants/card';
import {Space, Switch} from 'antd';
// import AddToDashboardButton from "Components/Dashboard/components/AddToDashboardButton";
@ -115,7 +115,7 @@ function WidgetPreview(props: Props) {
{/*)}*/}
<div className="mx-4"/>
{metric.metricType === CLICKMAP ? (
{metric.metricType === HEATMAP ? (
<ClickMapRagePicker/>
) : null}

6
frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
View file

@ -10,7 +10,7 @@ import { debounce } from 'App/utils';
import useIsMounted from 'App/hooks/useIsMounted';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import { numberWithCommas } from 'App/utils';
import { CLICKMAP } from 'App/constants/card';
import { HEATMAP } from 'App/constants/card';
import { connect } from 'react-redux';
interface Props {
@ -67,7 +67,7 @@ function WidgetSessions(props: Props) {
const depsString = JSON.stringify(widget.series);
const loadData = () => {
if (widget.metricType === CLICKMAP && metricStore.clickMapSearch) {
if (widget.metricType === HEATMAP && metricStore.clickMapSearch) {
const clickFilter = {
value: [metricStore.clickMapSearch],
type: 'CLICK',
@ -128,7 +128,7 @@ function WidgetSessions(props: Props) {
<div className='flex items-center gap-4'>
{hasFilters && <Button variant='text-primary' onClick={clearFilters}>Clear Filters</Button>}
{widget.metricType !== 'table' && widget.metricType !== CLICKMAP && (
{widget.metricType !== 'table' && widget.metricType !== HEATMAP && (
<div className='flex items-center ml-6'>
<span className='mr-2 color-gray-medium'>Filter by Series</span>
<Select options={seriesOptions} defaultValue={'all'} onChange={writeOption} plain />

6
frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
View file

@ -13,7 +13,7 @@ import AnimatedSVG, {ICONS} from 'Shared/AnimatedSVG/AnimatedSVG';
import {
TIMESERIES,
TABLE,
CLICKMAP,
HEATMAP,
FUNNEL,
INSIGHTS,
USER_PATH,
@ -52,7 +52,7 @@ function WidgetView(props: Props) {
const [metricNotFound, setMetricNotFound] = useState(false);
const history = useHistory();
const [initialInstance, setInitialInstance] = useState();
const isClickMap = widget.metricType === CLICKMAP;
const isClickMap = widget.metricType === HEATMAP;
React.useEffect(() => {
if (metricId && metricId !== 'create') {
@ -155,7 +155,7 @@ function WidgetView(props: Props) {
{widget.metricOf !== FilterKey.SESSIONS && widget.metricOf !== FilterKey.ERRORS && (
<>
{(widget.metricType === TABLE || widget.metricType === TIMESERIES || widget.metricType === CLICKMAP || widget.metricType === INSIGHTS) &&
{(widget.metricType === TABLE || widget.metricType === TIMESERIES || widget.metricType === HEATMAP || widget.metricType === INSIGHTS) &&
<WidgetSessions/>}
{widget.metricType === FUNNEL && <FunnelIssues/>}
</>

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

@ -14,7 +14,7 @@ export interface CardType {
export const LIBRARY = 'library';
export const TIMESERIES = 'timeseries';
export const TABLE = 'table';
export const CLICKMAP = 'clickMap';
export const HEATMAP = 'heatMap';
export const FUNNEL = 'funnel';
export const ERRORS = 'errors';
export const PERFORMANCE = 'performance';
@ -48,10 +48,10 @@ export const TYPES: CardType[] = [
subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
},
{
title: 'Clickmap',
title: 'Heatmap',
icon: 'puzzle-piece',
description: 'See where users click and where they get frustrated.',
slug: CLICKMAP,
slug: HEATMAP,
subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
},
{

8
frontend/app/mstore/metricStore.ts
View file

@ -12,7 +12,7 @@ import {
PERFORMANCE,
WEB_VITALS,
INSIGHTS,
CLICKMAP,
HEATMAP,
USER_PATH,
RETENTION
} from 'App/constants/card';
@ -159,7 +159,7 @@ export default class MetricStore {
value === RESOURCE_MONITORING ||
value === PERFORMANCE ||
value === WEB_VITALS ||
value === CLICKMAP
value === HEATMAP
) {
obj['viewType'] = 'chart';
}
@ -185,9 +185,9 @@ export default class MetricStore {
// obj['startType'] = 'start';
}
if (value === CLICKMAP) {
if (value === HEATMAP) {
obj.series = obj.series.slice(0, 1);
if (this.instance.metricType !== CLICKMAP) {
if (this.instance.metricType !== HEATMAP) {
obj.series[0].filter.removeFilter(0);
}

4
frontend/app/services/MetricService.ts
View file

@ -1,6 +1,6 @@
import Widget from 'App/mstore/types/widget';
import APIClient from 'App/api_client';
import { CLICKMAP, USER_PATH } from 'App/constants/card';
import { HEATMAP, USER_PATH } from 'App/constants/card';
export default class MetricService {
private client: APIClient;
@ -74,7 +74,7 @@ export default class MetricService {
async getMetricChartData(metric: Widget, data: any, isSaved: boolean = false): Promise<any> {
if (
metric.metricType === CLICKMAP
metric.metricType === HEATMAP
&& document.location.pathname.split('/').pop() === 'metrics'
&& (document.location.pathname.indexOf('dashboard') !== -1 && document.location.pathname.indexOf('metric') === -1)
) {