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

change(ui): some more changes to chec clickmap, clickrage subtype

Browse source
This commit is contained in:
sylenien 2022-12-23 11:22:18 +01:00
parent 857ae565ae
commit ec2aabf877
7 changed files with 75 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
View file

@ -4,9 +4,18 @@ import { observer } from 'mobx-react-lite'
import WebPlayer from 'App/components/Session/WebPlayer'
import { connect } from 'react-redux'
import { setCustomSession } from 'App/duck/sessions'
import Period, { LAST_30_DAYS } from "Types/app/period";
import { fetchInsights } from 'Duck/sessions';
function ClickMapCard({ setCustomSession, visitedEvents }: any) {
const { metricStore } = useStore();
function ClickMapCard({
setCustomSession,
visitedEvents,
insights,
fetchInsights,
insightsFilters,
host,
}: any) {
const { metricStore, dashboardStore } = useStore();
const onMarkerClick = (s: string, innerText: string) => {
metricStore.changeClickMapSearch(s, innerText)
}
@ -15,9 +24,26 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
if (metricStore.instance.data.mobsUrl) {
setCustomSession(metricStore.instance.data)
}
}, [metricStore.instance.data.mobsUrl])
}, [metricStore.instance])
if (!metricStore.instance.data?.mobsUrl) return <div className="py-2">No Data for selected period or URL.</div>
React.useEffect(() => {
if (visitedEvents.length) {
const urlOptions = visitedEvents.map(({ url, host }: any) => ({ label: url, value: url, host }))
const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
// @ts-ignore
// const { startDate, endDate, rangeValue } = Period({ rangeName: LAST_30_DAYS }).toJSON()
const rangeValue = dashboardStore.drillDownPeriod.rangeValue
const startDate = dashboardStore.drillDownPeriod.start
const endDate = dashboardStore.drillDownPeriod.end
fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue })
}
}, [visitedEvents])
if (!metricStore.instance.data.mobsUrl || insights.size === 0) {
return (
<div className="py-2">No Data for selected period or URL.</div>
)
}
if (!visitedEvents || !visitedEvents.length) {
return <div className="py-2">Loading session</div>
}
@ -28,6 +54,7 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
return evt
})
const jumpTimestamp = (jumpToEvent.timestamp - metricStore.instance.data.startTs) + jumpToEvent.domBuildingTime
return (
<div id="clickmap-render">
<WebPlayer
@ -41,6 +68,12 @@ function ClickMapCard({ setCustomSession, visitedEvents }: any) {
}
export default connect(
(state: any) => ({ visitedEvents: state.getIn(['sessions', 'visitedEvents']) }),
{ setCustomSession })
(state: any) => ({
insightsFilters: state.getIn(['sessions', 'insightFilters']),
visitedEvents: state.getIn(['sessions', 'visitedEvents']),
insights: state.getIn(['sessions', 'insights']),
host: state.getIn(['sessions', 'host']),
}),
{ setCustomSession, fetchInsights }
)
(observer(ClickMapCard))

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

@ -90,7 +90,7 @@ function WidgetChart(props: Props) {
const timestmaps = drillDownPeriod.toTimestamps();
const payload = isWidget ? { ...params } : { ...metricParams, ...timestmaps, ...metric.toJson() };
debounceRequest(metric, payload, isWidget, !isWidget ? drillDownPeriod : period);
}, [drillDownPeriod, period, depsString, _metric.page, metric.metricType, metric.metricOf, metric.viewType]);
}, [drillDownPeriod, period, depsString, _metric.page, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue]);
const renderChart = () => {

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

@ -41,6 +41,7 @@ function WidgetForm(props: Props) {
const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1);
const writeOption = ({ value, name }: any) => {
console.log(name, value)
value = Array.isArray(value) ? value : value.value;
const obj: any = { [name]: value };
@ -67,9 +68,12 @@ function WidgetForm(props: Props) {
obj['metricOf'] = tableOptions[0].value;
obj['viewType'] = 'table';
}
if (metric.metricType === CLICKMAP && value !== CLICKMAP) {
metric.series[0].filter.removeFilter(0)
}
if (value === CLICKMAP) {
obj['viewType'] = 'chart';
obj['metricValue'] = 'clicks'
if (metric.series[0].filter.filters.length < 1) {
metric.series[0].filter.addFilter({
...clickmapFilter,
@ -90,7 +94,7 @@ function WidgetForm(props: Props) {
console.error(e)
}
}
metricStore.save(metric, dashboardId).then((metric: any) => {
metricStore.save(metric).then((metric: any) => {
if (wasCreating) {
if (parseInt(dashboardId) > 0) {
history.replace(withSiteId(dashboardMetricDetails(dashboardId, metric.metricId), siteId));
@ -173,6 +177,19 @@ function WidgetForm(props: Props) {
/>
</>
)}
{metric.metricType === CLICKMAP && (
<>
<span className="mx-3">showing</span>
<Select
name="metricValue"
options={[{ value: 'clicks', label: 'Clicks' }, { value: 'rage_clicks', label: 'Click Rages' }]}
defaultValue={metric.metricValue}
onChange={writeOption}
/>
</>
)}
</div>
</div>

18
frontend/app/components/Session/WebPlayer.tsx
View file

@ -12,8 +12,6 @@ import ReadNote from '../Session_/Player/Controls/components/ReadNote';
import { fetchList as fetchMembers } from 'Duck/member';
import PlayerContent from './PlayerContent';
import { IPlayerContext, PlayerContext, defaultContextValue } from './playerContext';
import { fetchInsights } from 'Duck/sessions';
import Period, { LAST_30_DAYS } from 'Types/app/period';
import { observer } from 'mobx-react-lite';
const TABS = {
@ -31,10 +29,6 @@ function WebPlayer(props: any) {
fetchList,
customSession,
isClickmap,
fetchInsights,
host,
visitedEvents,
insightsFilters,
insights,
jumpTimestamp,
onMarkerClick,
@ -46,13 +40,7 @@ function WebPlayer(props: any) {
const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
useEffect(() => {
if (isClickmap) {
const urlOptions = visitedEvents.map(({ url, host }: any) => ({ label: url, value: url, host }))
const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
// @ts-ignore
const { startDate, endDate, rangeValue } = new Period({ rangeName: LAST_30_DAYS })
fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue })
} else {
if (!isClickmap) {
fetchList('issues');
}
const usedSession = isClickmap && customSession ? customSession : session;
@ -94,6 +82,7 @@ function WebPlayer(props: any) {
contextValue.player.jump(jumpTimestamp)
contextValue.player.pause()
contextValue.player.scaleFullPage()
console.log(jumpTimestamp, insights)
setTimeout(() => { contextValue.player.showClickmap(insights) }, 250)
}, 500)
}
@ -160,8 +149,6 @@ function WebPlayer(props: any) {
export default connect(
(state: any) => ({
session: state.getIn(['sessions', 'current']),
insightsFilters: state.getIn(['sessions', 'insightFilters']),
host: state.getIn(['sessions', 'host']),
insights: state.getIn(['sessions', 'insights']),
visitedEvents: state.getIn(['sessions', 'visitedEvents']),
fullscreen: state.getIn(['components', 'player', 'fullscreen']),
@ -173,6 +160,5 @@ export default connect(
closeBottomBlock,
fetchList,
fetchMembers,
fetchInsights,
}
)(withLocationHandlers()(observer(WebPlayer)));

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

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useEffect } from 'react';
import FilterItem from '../FilterItem';
import { SegmentSelection, Tooltip } from 'UI';
import { List } from 'immutable';

20
frontend/app/player/web/Screen/Screen.ts
View file

@ -221,7 +221,7 @@ export default class Screen {
scaleFullPage() {
if (!this.parentElement) return;
const { height: boxHeight, width: boxWidth } = this.parentElement.getBoundingClientRect();
const { width: boxWidth } = this.parentElement.getBoundingClientRect();
const { height, width } = this.document.body.getBoundingClientRect();
this.overlay.remove()
@ -232,13 +232,17 @@ export default class Screen {
this.scaleRatio = Math.round(this.scaleRatio * 1e3) / 1e3;
}
this.screen.style.transform = `scale(${this.scaleRatio})`;
this.screen.style.width = width + 'px';
this.screen.style.height = height + 'px';
this.screen.style.top = '0';
this.screen.style.left = '0';
this.iframe.style.width = width + 'px';
this.iframe.style.height = height + 'px';
Object.assign(this.screen.style, {
top: '0',
left: '0',
height: height + 'px',
width: width + 'px',
transform: `scale(${this.scaleRatio})`,
})
Object.assign(this.iframe.style, {
width: width + 'px',
height: height + 'px',
})
}
}

2
frontend/app/types/filter/filterType.ts
View file

@ -275,5 +275,5 @@ export enum FilterKey {
RESOURCE_FETCH_TIME = 'resourceFetchTime',
SLOWEST_RESOURCES = 'slowestResources',
CLICKMAP_URL = 'clickMapUrl'
CLICKMAP_URL = 'clickMapUrl',
}