change(ui): update rage click picker and styles

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx

@@ -4,7 +4,6 @@ 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({
@@ -30,14 +29,12 @@ function ClickMapCard({
         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 })
+            fetchInsights({ ...insightsFilters, url, startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
         }
-    }, [visitedEvents])
+    }, [visitedEvents, metricStore.clickMapFilter])
 
     if (!metricStore.instance.data.mobsUrl || insights.size === 0) {
         return (

frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Checkbox} from "UI";
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+function ClickMapRagePicker() {
+    const { metricStore } = useStore();
+
+    const onToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+        metricStore.setClickMaps(e.target.checked)
+    }
+
+    React.useEffect(() => {
+        return () => {
+            metricStore.setClickMaps(false)
+        }
+    }, [])
+
+    return (
+        <div className="mr-4 flex items-center cursor-pointer">
+            <Checkbox
+                onChange={onToggle}
+                label="Include rage clicks"
+            />
+        </div>
+    );
+}
+
+export default observer(ClickMapRagePicker);

frontend/app/components/Dashboard/components/ClickMapRagePicker/index.ts

@@ -0,0 +1 @@
+export { default } from './ClickMapRagePicker'

frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx

@@ -73,7 +73,6 @@ function WidgetForm(props: Props) {
       }
       if (value === CLICKMAP) {
         obj['viewType'] = 'chart';
-        obj['metricValue'] = 'clicks'
         if (metric.series[0].filter.filters.length < 1) {
             metric.series[0].filter.addFilter({
                 ...clickmapFilter,
@@ -99,7 +98,9 @@ function WidgetForm(props: Props) {
         if (parseInt(dashboardId) > 0) {
           history.replace(withSiteId(dashboardMetricDetails(dashboardId, metric.metricId), siteId));
           const dashboard = dashboardStore.getDashboard(parseInt(dashboardId));
-          dashboardStore.addWidgetToDashboard(dashboard, [metric.metricId]);
+          if (dashboard) {
+            dashboardStore.addWidgetToDashboard(dashboard, [metric.metricId]);
+          }
         } else {
           history.replace(withSiteId(metricDetails(metric.metricId), siteId));
         }
@@ -178,18 +179,6 @@ 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>
 

frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx

@@ -6,8 +6,9 @@ import { SegmentSelection, Button, Icon } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { FilterKey } from 'Types/filter/filterType';
 import WidgetDateRange from '../WidgetDateRange/WidgetDateRange';
-// import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
+import ClickMapRagePicker from "Components/Dashboard/components/ClickMapRagePicker";
 import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal';
+import { CLICKMAP, TABLE, TIMESERIES } from "App/constants/card";
 
 interface Props {
     className?: string;
@@ -19,8 +20,8 @@ function WidgetPreview(props: Props) {
     const { metricStore, dashboardStore } = useStore();
     const dashboards = dashboardStore.dashboards;
     const metric: any = metricStore.instance;
-    const isTimeSeries = metric.metricType === 'timeseries';
-    const isTable = metric.metricType === 'table';
+    const isTimeSeries = metric.metricType === TIMESERIES;
+    const isTable = metric.metricType === TABLE;
     const drillDownFilter = dashboardStore.drillDownFilter;
     const disableVisualization = metric.metricOf === FilterKey.SESSIONS || metric.metricOf === FilterKey.ERRORS;
     // const period = dashboardStore.drillDownPeriod;
@@ -85,6 +86,9 @@ function WidgetPreview(props: Props) {
                         </>
                     )}
                     <div className="mx-4" />
+                    {metric.metricType === CLICKMAP ? (
+                        <ClickMapRagePicker />
+                    ) : null}
                     <WidgetDateRange />
                     {/* add to dashboard */}
                     {metric.exists() && (

frontend/app/mstore/metricStore.ts

@@ -19,6 +19,7 @@ export default class MetricStore {
   sessionsPage: number = 1;
   sessionsPageSize: number = 10;
   listView?: boolean = false
+  clickMapFilter: boolean = false
 
   clickMapSearch = ''
   clickMapLabel = ''
@@ -41,6 +42,10 @@ export default class MetricStore {
     this[key] = value;
   }
 
+  setClickMaps(val: boolean) {
+    this.clickMapFilter = val
+  }
+
   changeClickMapSearch(val: string, label: string) {
     this.clickMapSearch = val
     this.clickMapLabel = label

frontend/app/player/web/addons/TargetMarker.ts

@@ -36,7 +36,7 @@ export interface State {
 
 
 export default class TargetMarker {
-  private clickMapOverlay: HTMLDivElement
+  private clickMapOverlay: HTMLDivElement | null = null
   private clickContainers: HTMLDivElement[] = []
   private smallClicks: HTMLDivElement[] = []
   private onMarkerClick: (selector: string, innerText: string) => void
@@ -137,7 +137,7 @@ export default class TargetMarker {
   }
 
 
-  injectTargets(selections: { selector: string, count: number }[] | null) {
+  injectTargets(selections: { selector: string, count: number, clickRage?: boolean }[] | null) {
     if (selections) {
       const totalCount = selections.reduce((a, b) => {
         return a + b.count
@@ -169,13 +169,13 @@ export default class TargetMarker {
         const containerId = `clickmap-bubble-${i}`
         bubbleContainer.id = containerId
         this.clickContainers.push(bubbleContainer)
-        Object.assign(bubbleContainer.style, clickmapStyles.bubbleContainer({ top, left }))
+        Object.assign(bubbleContainer.style, clickmapStyles.bubbleContainer({ top, left, height }))
 
         const border = document.createElement("div")
         Object.assign(border.style, clickmapStyles.highlight({ width, height, top, left }))
 
         const smallClicksBubble = document.createElement("div")
-        smallClicksBubble.innerHTML = '' + s.count
+        smallClicksBubble.innerHTML = `${s.count}`
         const smallClicksId =  containerId + '-small'
         smallClicksBubble.id = smallClicksId
         this.smallClicks.push(smallClicksBubble)
@@ -211,14 +211,14 @@ export default class TargetMarker {
           })
         }
 
-        Object.assign(smallClicksBubble.style, clickmapStyles.clicks)
+        Object.assign(smallClicksBubble.style, clickmapStyles.clicks({ top, height, isRage: s.clickRage }))
 
         border.appendChild(smallClicksBubble)
         overlay.appendChild(bubbleContainer)
         overlay.appendChild(border)
       });
 
-      this.screen.getParentElement().appendChild(overlay)
+      this.screen.getParentElement()?.appendChild(overlay)
     } else {
       this.store.update({ markedTargets: null });
       this.clickMapOverlay?.remove()

frontend/app/player/web/addons/clickmapStyles.ts

@@ -4,8 +4,8 @@ export const clickmapStyles = {
     position: 'absolute',
     top: '0px',
     left: '0px',
-    width: width,
-    height: height,
+    width,
+    height,
     background: 'rgba(0,0,0, 0.15)',
     zIndex: 9 * 10e3,
     transformOrigin: 'left top',
@@ -14,18 +14,19 @@ export const clickmapStyles = {
     fontSize: '16px',
     fontWeight: '600',
   },
-  bubbleContainer: ({ top, left }: { top: number; left: number }) => ({
+  bubbleContainer: ({ top, left, height }: { top: number; left: number, height: number }) => ({
     position: 'absolute',
-    top: top + 'px',
-    left: left + 'px',
+    top: top > 20 ? top + 'px' : height + 2 + 'px',
+    left: `${left}px`,
     padding: '10px',
     borderRadius: '6px',
     background: 'white',
     border: '1px solid rgba(0, 0, 0, 0.12)',
     boxShadow: '0px 2px 10px 2px rgba(0,0,0,0.5)',
-    transform: `translate(-25%, -110%)`,
+    transform:  top > 20 ? 'translate(-25%, -110%)' : 'translate(-25%, 0%)',
     textAlign: 'center',
     visibility: 'hidden',
+    zIndex: 2,
   }),
   highlight: ({
     width,
@@ -38,22 +39,23 @@ export const clickmapStyles = {
     top: number;
     left: number;
   }) => ({
-    width: width + 'px',
-    height: height + 'px',
+    width: `${width}px`,
+    height: `${height}px`,
     border: '2px dotted red',
     cursor: 'pointer',
-    top: top + 'px',
-    left: left + 'px',
+    top: `${top}px`,
+    left: `${left}px`,
     position: 'absolute',
   }),
-  clicks: {
-    top: 0,
+  clicks: ({ top, height, isRage }: { top: number; height: number, isRage?: boolean }) => ({
+    top: top > 20 ? 0 : `${height}px`,
     left: 0,
     position: 'absolute',
     borderRadius: '999px',
     padding: '6px',
-    background: 'white',
+    background: isRage ? 'red' : 'white',
+    color: isRage ? 'white' : 'black',
     lineHeight: '0.5',
     transform: 'translate(-70%, -70%)',
-  },
+  }),
 };