(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[83407],{81625:(e,s,r)=>{"use strict";r.d(s,{A:()=>a});var t=r(87687),n=r(52751);let a=function(e){let{gridGap:s,lineWidth:r,gridColor:a="var(--color-gray-500)",gridOpacity:o=.3,children:i,ref:l,...c}=e,p=n.useId().replace(/:/g,""),d="".concat(p,"-grid");return(0,t.jsxs)("svg",{...c,ref:l,children:[(0,t.jsx)("defs",{children:(0,t.jsx)("pattern",{id:d,width:s,height:s,patternUnits:"userSpaceOnUse",children:(0,t.jsx)("path",{d:"\n            M ".concat(s," 0 L ").concat(s," ").concat(s,"\n            M 0 ").concat(s," L ").concat(s," ").concat(s,"\n          "),fill:"none",stroke:a,strokeWidth:r})})}),(0,t.jsx)("rect",{width:"100%",height:"100%",fill:"url(#".concat(d,")"),fillOpacity:o}),i]})}},24616:(e,s,r)=>{"use strict";r.d(s,{Ay:()=>d,K1:()=>a});var t=r(87687),n=r(31928);let a=228,o=(0,n.I)("div")({name:"BlockWrapper",class:"bba74ff",propsAsIs:!1}),i=(0,n.I)("div")({name:"BackgroundLayer",class:"by3bjmz",propsAsIs:!1}),l=(0,n.I)("div")({name:"Block",class:"b7i16se",propsAsIs:!1}),c=(0,n.I)("div")({name:"Track",class:"tx8tqis",propsAsIs:!1}),p=(0,n.I)(l)({name:"GhostBlock",class:"g5ze39b",propsAsIs:!0}),d=function(e){let{style:s,blockAs:r="div",...n}=e;return(0,t.jsxs)(o,{...n,children:[(0,t.jsxs)(i,{children:[(0,t.jsx)(p,{}),(0,t.jsx)(c,{}),(0,t.jsx)(p,{})]}),(0,t.jsx)(l,{as:r,style:s})]})};r(16782)},83407:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>L});var t=r(87687),n=r(52751),a=r(31928),o=r(53740),i=r(68852),l=r(42591),c=r(42558),p=r(24616),d=r(81625);let u=e=>{if("number"==typeof e)return e/100;let[s,r]=e.split(" ");return"".concat((0,i.GB)(Number(s)/100,3)," ").concat(r)},f=(0,a.I)("div")({name:"Wrapper",class:"w1ebswux",propsAsIs:!1}),m=function(e){let{headroom:s,hoveredPoint:r,rawPoint:n}=e,a=(0,i.S8)(r.y,0,100+s,0,100);return(0,t.jsx)(f,{draggable:!1,style:{top:a+"%",left:r.x+"%"},children:u(n)})};r(3315);let h=(0,a.I)("div")({name:"OuterWrapper",class:"ofp8f94",propsAsIs:!1}),x=(0,a.I)("div")({name:"Wrapper",class:"w1efxmrq",propsAsIs:!1}),b=(0,a.I)("div")({name:"GraphWrapper",class:"gdka0kd",propsAsIs:!1}),j=(0,a.I)(d.A)({name:"Graph",class:"gy1ntfi",propsAsIs:!0}),y=(0,a.I)("circle")({name:"PointCircle",class:"p145ttq",propsAsIs:!0}),g=(0,a.I)("div")({name:"AxisLabel",class:"ae5dzmz",propsAsIs:!1}),w=(0,a.I)(g)({name:"YLabel",class:"y1a8ofjd",propsAsIs:!0}),I=(0,a.I)(g)({name:"XLabel",class:"x133gyof",propsAsIs:!0});r(32434);let v=(0,a.I)(l.Ay)({name:"Wrapper",class:"w17ja9mc",propsAsIs:!0}),k=(0,a.I)(function(e){let{points:s,setPoints:r,headroom:a,drawingEnabled:o,includeHoverTooltip:l,...c}=e,[p,d]=n.useState(!1),[u,f]=n.useState(null),g=n.useRef(null);n.useEffect(()=>{if(p)return window.addEventListener("pointermove",e),window.addEventListener("pointerup",s),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",s)};function e(e){if(!p||!g.current)return;let s=g.current.getBoundingClientRect(),t=(e.clientX-s.left)/s.width*100,n=(e.clientY-s.top)/s.height*k,o=Math.round(t/(100/(v-1))),l=Math.max(0,Math.min(v-1,o));r(e=>{let s=[...e],r=(0,i.qE)(k-n,0,100+a);if("number"==typeof s[l])s[l]=r;else throw Error("Drawing only works with numbered points, not strings.");return s})}function s(){o&&d(!1)}},[p,r]);let v=s.length,k=100+a,A=s.map((e,s)=>{if("number"==typeof e){let r=(0,i.GB)(e,2);return{x:(0,i.S8)(s,0,v-1,0,100),y:k-r}}{let[s,r]=e.split(" ");return{x:Number(r.replace("%","")),y:k-Number(s)}}}),q=A.map(e=>"".concat(e.x,",").concat(e.y)).join(" "),z=n.useCallback(()=>{o&&d(!0)},[o]);return(0,t.jsxs)(h,{"data-can-be-annotated":!1,children:[(0,t.jsx)(w,{children:(0,t.jsx)("span",{children:"— Progress —"})}),(0,t.jsx)(I,{children:(0,t.jsx)("span",{children:"— Time —"})}),(0,t.jsx)(x,{...c,children:(0,t.jsxs)(b,{children:[(0,t.jsxs)(j,{ref:g,viewBox:"0 0 100 ".concat(k),gridGap:10,lineWidth:1,gridColor:"var(--color-gray-300)","data-drawing-enabled":o,onPointerDown:z,children:[(0,t.jsx)("rect",{x:"0",y:"0",width:"100",height:k,rx:1,stroke:"var(--color-gray-300)",strokeWidth:.2,fill:"none"}),a>0&&(0,t.jsx)("line",{x1:"0",y1:a,x2:"100",y2:a,stroke:"var(--color-gray-300)"}),(0,t.jsx)("polyline",{points:q,stroke:"white",strokeWidth:1,fill:"none"}),A.map((e,s)=>{let{x:r,y:n}=e,a=u===s,o=null!==u&&u!==s;return(0,t.jsx)(y,{cx:r,cy:n,r:a?3:1.5,fill:"var(--wham-primary-500)",stroke:"var(--color-background)",strokeWidth:.5,"data-is-hovered":a,"data-is-another-point-hovered":o,style:{"--index":s}},s)}),l&&A.map((e,s)=>{let{x:r,y:n}=e;return(0,t.jsx)("circle",{cx:r,cy:n,r:5,fill:"transparent",onMouseEnter:()=>{l&&f(s)},onMouseLeave:()=>{l&&f(null)}},s)})]}),null!==u&&(0,t.jsx)(m,{headroom:a,hoveredPoint:A[u],rawPoint:s[u]},u)]})})]})})({name:"StyledLinearGraph",class:"s8qbp66",propsAsIs:!0}),A=(0,a.I)("div")({name:"HorizontalRule",class:"h1hja5fy",propsAsIs:!1}),q=(0,a.I)("div")({name:"BlockWrapper",class:"b74tgwq",propsAsIs:!1}),z=(0,a.I)(c.A)({name:"ActionButton",class:"a1yrjyvg",propsAsIs:!0}),L=function(e){let{initialPoints:s,headroom:r=0,duration:a=500,justTheGraph:l=!1,drawingEnabled:c=!1,includeHoverTooltip:d=!1}=e,[u,f]=n.useState(()=>s.map(e=>"number"==typeof e?(0,i.GB)(e,2):e)),[m,h]=n.useState("left"),x="linear(".concat(u.map(e=>{if("number"==typeof e)return e/100;{let[s,r]=e.split(" ");return"".concat(Number(s)/100," ").concat(r)}}).join(","),")"),b={transform:"translateX(".concat("left"===m?0:p.K1,"px)"),transition:"transform ".concat(a,"ms ").concat(x)};return(0,t.jsxs)(v,{colorMode:"dark",children:[(0,t.jsx)(k,{points:u,setPoints:f,headroom:r,drawingEnabled:c,includeHoverTooltip:d}),!l&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(q,{children:(0,t.jsx)(p.Ay,{style:b})}),(0,t.jsx)(A,{}),(0,t.jsx)(z,{Icon:o.A,onClick:()=>h("left"===m?"right":"left"),children:"Run Animation"})]})]})};r(18181)},16782:e=>{e.exports={bba74ff:"bba74ff",by3bjmz:"by3bjmz",b7i16se:"b7i16se",tx8tqis:"tx8tqis",g5ze39b:"g5ze39b"}},18181:e=>{e.exports={w17ja9mc:"w17ja9mc",b1btlj5u:"b1btlj5u",s8qbp66:"s8qbp66",h1hja5fy:"h1hja5fy",b74tgwq:"b74tgwq",a1yrjyvg:"a1yrjyvg"}},32434:e=>{e.exports={ofp8f94:"ofp8f94",w1efxmrq:"w1efxmrq",gdka0kd:"gdka0kd",gy1ntfi:"gy1ntfi",p145ttq:"p145ttq",ae5dzmz:"ae5dzmz",y1a8ofjd:"y1a8ofjd",x133gyof:"x133gyof"}},3315:e=>{e.exports={w1ebswux:"w1ebswux",fadeFromTransparent:"fadeFromTransparent"}}}]);
//# sourceMappingURL=83407.fb4715e60cbdb700.js.map