diff --git a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx index 1b29c0090..735c38158 100644 --- a/frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx +++ b/frontend/app/components/Session_/PageInsightsPanel/components/SelectorCard/SelectorCard.tsx @@ -19,7 +19,7 @@ export default function SelectorCard({ index = 1, target, showContent } : Props) { showContent && (
-
{target.count} Clicks 12%
+
{target.count} Clicks - {target.percent}%
TOTAL CLICKS
) } diff --git a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts index 763f3732c..e5b3c400c 100644 --- a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts +++ b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts @@ -17,7 +17,8 @@ export interface MarkedTarget { selector: string, count: number, index: number, - active?: boolean + active?: boolean, + percent: number } export interface State extends SuperState { @@ -99,7 +100,10 @@ export default class StatedScreen extends Screen { setMarkedTargets(selections: { selector: string, count: number }[] | null) { if (selections) { - const targets: MarkedTarget[] = []; + const targets: MarkedTarget[] = []; + const totalCount = selections.reduce((a, b) => { + return a + b.count + }, 0); selections.forEach((s, index) => { const el = this.getElementBySelector(s.selector); if (!el) return; @@ -107,6 +111,7 @@ export default class StatedScreen extends Screen { ...s, el, index, + percent: Math.round((s.count * totalCount) / 100), boundingRect: this.calculateRelativeBoundingRect(el), }) });