!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="80bbc8c8-45a9-5a18-832e-8cbd6d139c08")}catch(e){}}();
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3167],{93167:(e,t,a)=>{"use strict";a.r(t),a.d(t,{LargeAnalyticsGraph:()=>f,SmallAnalyticsGraph:()=>x,useGraphPath:()=>w});var r=a(9479),i=a(17223),l=a(48972),n=a(51621),s=a(72303),c=a(9414),o=a(66058),h=a(12669),g=a(49901),u=a(83844),p=a(58804),d=a.n(p);let m="A chart showing two lines that represent views and clicks of a website. The user can move their cursor along the axis to see their current value, and the percentage gain from the last time period.";function x(e){let{className:t}=e,a=w("M1 159L33.4638 144.928L65.3478 135.28L97.2319 128.02L129.116 84.1158L161 104.116L192.884 84.1158L224.768 55.3921L266.652 24.8907L298.5 19.5L331 1",{min:1500,max:7e3,width:332,height:161,defaultNormX:.75}),l=w("M1 91L33.4638 82.9843L65.3478 83.1848L97.2319 84.7456L129.116 59.7368H161L192.884 59.7368L224.768 35.9702L266.652 32.8365L298.536 8.14891L331 1",{min:1e3,max:3500,width:332,height:161,defaultNormX:.75});return(0,r.jsx)("div",{className:(0,u.$)(d().container,t),children:(0,r.jsxs)("div",{"aria-label":m,className:(0,u.$)(d().graph,d().small),role:"img",children:[(0,r.jsx)("div",{className:d().lines,children:[5,4,3,2,1].map(e=>"".concat(e,",000")).map((e,t)=>(0,r.jsx)(y,{index:t,number:e},e))}),(0,r.jsx)(i.P.div,{animate:{opacity:1},"aria-hidden":!0,className:d().line,initial:{opacity:0},style:{translateX:a.left}}),(0,r.jsxs)("svg",{"aria-hidden":!0,className:d().graph1,fill:"none",ref:a.ref,viewBox:"0 0 332 161",children:[(0,r.jsx)("path",{d:a.path,stroke:"url(#small-blue)",strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),(0,r.jsx)(v,{color:"var(--blue)",id:"small-blue"}),(0,r.jsx)(_,{color:"var(--blue)",small:!0,x:a.x,y:a.y})]}),(0,r.jsxs)("svg",{className:d().graph2,fill:"none",ref:l.ref,viewBox:"0 0 332 92",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:l.path,stroke:"url(#small-teal)",strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),(0,r.jsx)(v,{color:"var(--teal)",id:"small-teal"}),(0,r.jsx)(_,{color:"var(--teal)",small:!0,x:l.x,y:l.y})]}),(0,r.jsxs)(i.P.div,{animate:{opacity:1},"aria-hidden":!0,className:d().tooltip,initial:{opacity:0},style:{top:l.top,left:a.left,transform:"translateX(calc(-100% - 12.5px))"},children:[(0,r.jsx)(L,{badgeVariant:"blue-subtle",label:"Views",percent:a.yValue.get().percentIncrease,value:a.yValue.get().value}),(0,r.jsx)(L,{badgeVariant:"teal-subtle",label:"Clicks",percent:l.yValue.get().percentIncrease,value:l.yValue.get().value})]})]})})}function f(e){let{variant:t,className:a}=e,n=(0,s.useRef)(null),c=(0,s.useRef)(null),o=(0,s.useRef)(null),h="marketing-page"===t,g=w("M0 312H42.6087L85.2174 280.966H127.065L168.913 264.511L210.761 280.966L252.609 250.469L294.457 197.476L336.304 168.979H378.152L420 198.976H461.848L503.696 168.979H545.543L587.391 113.486H629.239L671.087 57.493L712.935 30.4964H754.783L797.391 1H840",{min:1500,max:7e3,width:840,height:313,clampX:[40,840]}),p=w("M0 147H42.6087L85.2174 135.965H127.065L168.913 127.467L210.761 117.469L252.609 126.967L294.457 117.469L336.304 88.9769L378.152 108.972L420 88.9769L461.848 108.972L503.696 68.9822H545.543L587.391 91.4757H629.239L671.087 47.4878L712.935 30.4923H754.783L797.391 1H840",{min:1e3,max:3500,width:840,height:148,clampX:[40,840]}),x=(0,l.G)(g.x,()=>(g.top.get()+p.top.get())/2);return(0,l.G)(g.x,()=>{if(!c.current||!n.current||!o.current)return;let e=c.current.getBoundingClientRect();o.current.style.width="".concat(e.width+12.5,"px"),o.current.style.height="".concat(e.height,"px");let t=o.current.getBoundingClientRect(),a=n.current.getBoundingClientRect();t.right>a.right&&(c.current.style.transform="translateX(calc(-100% - 12.5px))"),t.right<a.right&&(c.current.style.transform="translateX(12.5px)")}),(0,r.jsx)("div",{className:(0,u.$)(d().container,a),ref:n,children:(0,r.jsxs)("div",{"aria-label":m,className:(0,u.$)(d().graph,d().large),onMouseEnter:()=>{g.setActive(!0),p.setActive(!0)},onMouseLeave:()=>{g.setActive(!1),p.setActive(!1)},role:"img",children:[(0,r.jsx)("div",{className:d().lines,children:[7,6,5,4,3,2,1].map(e=>"".concat(e,",000")).map((e,t)=>(0,r.jsx)(y,{index:t,noLeftFade:h,number:e},e))}),(0,r.jsx)(i.P.div,{animate:{opacity:1},"aria-hidden":!0,className:d().line,initial:{opacity:0},style:{translateX:g.left}}),(0,r.jsxs)("svg",{"aria-hidden":!0,className:d().graph1,fill:"none",ref:g.ref,viewBox:"0 0 840 320",children:[(0,r.jsx)("path",{d:g.path,stroke:"url(#large-blue)",strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),(0,r.jsx)(v,{color:"var(--blue)",id:"large-blue"}),(0,r.jsx)(_,{color:"var(--blue)",x:g.x,y:g.y})]}),(0,r.jsxs)("svg",{className:d().graph2,fill:"none",ref:p.ref,viewBox:"0 0 840 148",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:p.path,stroke:"url(#large-teal)",strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),(0,r.jsx)(v,{color:"var(--teal)",id:"large-teal"}),(0,r.jsx)(_,{color:"var(--teal)",x:p.x,y:p.y})]}),(0,r.jsxs)(i.P.div,{animate:{opacity:1},"aria-hidden":!0,className:d().tooltip,initial:{opacity:0},ref:c,style:{top:x,left:g.left},children:[(0,r.jsx)(L,{badgeVariant:"blue-subtle",label:"Views",percent:g.yValue.get().percentIncrease,value:g.yValue.get().value}),(0,r.jsx)(L,{badgeVariant:"teal-subtle",label:"Clicks",percent:p.yValue.get().percentIncrease,value:p.yValue.get().value})]}),(0,r.jsx)(i.P.div,{"aria-hidden":!0,className:d().ghostTip,ref:o,style:{top:x,left:g.left}})]})})}function v(e){let{id:t,color:a}=e;return(0,r.jsx)("defs",{children:(0,r.jsxs)("linearGradient",{id:t,children:[(0,r.jsx)("stop",{offset:"5%",stopColor:a,stopOpacity:"0"}),(0,r.jsx)("stop",{offset:"40%",stopColor:a})]})})}function y(e){let{number:t,index:a,noLeftFade:i}=e;return(0,r.jsxs)(h.B,{align:"center",className:d().graphLineRow,"data-fade":i||a>2?"right":"left",direction:"row",gap:2,children:[(0,r.jsx)("span",{className:d().graphLineNumber,children:t}),(0,r.jsx)("div",{className:d().graphLine})]})}function L(e){let{label:t,value:a,percent:i,badgeVariant:l}=e;return(0,r.jsxs)(h.B,{align:"center",direction:"row",gap:{sm:3,md:5},children:[(0,r.jsx)(g.E,{as:"div",color:"gray-900",lineHeight:16,size:13,weight:400,children:t}),(0,r.jsxs)(h.B,{align:"center",direction:"row",gap:2,children:[(0,r.jsx)(g.E,{as:"div",className:d().number,color:"gray-1000",lineHeight:24,size:14,weight:600,children:a}),(0,r.jsxs)(o.E,{className:d().badge,variant:l,children:["+",i,"%"]})]})]})}function _(e){let{x:t,y:a,color:l,small:n}=e,s=n?6:8;return(0,r.jsxs)("g",{children:[(0,r.jsx)(i.P.circle,{animate:{opacity:1},cx:t,cy:a,fill:"var(--ds-background-100)",initial:{opacity:0},r:s-1,stroke:"var(--ds-gray-alpha-400)",vectorEffect:"non-scaling-size"}),(0,r.jsx)(i.P.circle,{animate:{opacity:1},cx:t,cy:a,fill:l,initial:{opacity:0},r:s/2,vectorEffect:"non-scaling-size"})]})}function w(e,t){let[a,r]=(0,s.useState)(!1),[i,o]=(0,s.useState)({x:0,y:0}),[h,g]=(0,s.useState)(0),u=(0,s.useRef)(null),p=function(e){let t=(0,c.parseSVG)(e),a=0,r=0;return t.map(e=>(e.y&&(a=e.y),e.x&&(r=e.x),[r,a]))}(e),d=(0,n.z)(500,{stiffness:400,damping:100}),m=(0,l.G)(d,e=>(function(e,t){let a=e.length,r=Math.floor(t*(a-1));if(r===a-1)return e[a-1][1];if(t<0||t>1)return 0;let[,i]=e[r],[,l]=e[r+1];return i+(t*(a-1)-r)*(l-i)})(p,e/t.width)),x=(0,l.G)(d,e=>{if(!u.current)return 0;let a=u.current.getBoundingClientRect();return e/t.width*a.width}),f=(0,l.G)(m,e=>{if(!u.current)return 0;let a=u.current.getBoundingClientRect();return e/t.height*a.height}),v=(0,l.G)(m,e=>{let a=1-e/t.height,r=(a*(t.max-t.min)+t.min).toFixed(0);return Number(r)!==h&&g(Number(r)),{value:r,percentIncrease:(80*a+10).toFixed(0)}});function y(){var e;let a=t.width*(null!==(e=t.defaultNormX)&&void 0!==e?e:.65);o({x:0,y:0}),d.set(a)}let L=e=>{if(!u.current)return;let a=u.current.getBoundingClientRect(),r=(e.clientX-a.left)/a.width*t.width,i=(e.clientY-a.top)/a.height*t.height;r<0||r>t.width||t.clampX&&(r<t.clampX[0]||r>t.clampX[1])||(o({x:r,y:i}),d.set(r))};return(0,s.useEffect)(()=>{let e=()=>{y(),r(!1)};return y(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,s.useEffect)(()=>{if(a)return window.addEventListener("mousemove",L),()=>{window.removeEventListener("mousemove",L)}},[a]),{ref:u,mouse:i,x:d,y:m,left:x,top:f,yValue:v,path:e,setActive:e=>r(e)}}},58804:e=>{e.exports={graph:"analytics-graph_graph___GEgf",large:"analytics-graph_large__NxbZe",small:"analytics-graph_small__asZdz",container:"analytics-graph_container__T8Rmr",lines:"analytics-graph_lines__5N_lt",graphLineNumber:"analytics-graph_graphLineNumber__Q9ZsE",graphLineRow:"analytics-graph_graphLineRow__0DAME",graphLine:"analytics-graph_graphLine__HN3x_",graph1:"analytics-graph_graph1__gH7D6",graph2:"analytics-graph_graph2__0tCmN",tooltip:"analytics-graph_tooltip__wRjzI",ghostTip:"analytics-graph_ghostTip__kc5xT",number:"analytics-graph_number__1c0cs",badge:"analytics-graph_badge__b_wql",line:"analytics-graph_line__gJ6qe",cheapLargeGraph:"analytics-graph_cheapLargeGraph__qqMhY"}}}]);
//# debugId=80bbc8c8-45a9-5a18-832e-8cbd6d139c08