https://www.trulia.com/17769559/_next/static/chunks/rental-market-…ds.chunk.app-trulia-web.51cc1c0637ef4a40.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[660],{56935:(e,t,a)=>{a.d(t,{A:()=>u});var r=a(37876),s=a(14232),l=a(31134),n=a(81047);a(69736);var o=a(39149),i=a.n(o),d=a(30533),c=a(2014);n.t1.register(n.PP,n.kc,n.FN,n.No,n.hE,n.m_,n.s$,n.UA);let m=(0,c.AH)({display:"flex",justifyContent:"flex-start",gap:"s",paddingTop:"s",paddingLeft:"l"}),h=(0,c.AH)({display:"flex",alignItems:"center",gap:"xs",fontSize:"body"}),p={width:"12px",height:"6px",flexShrink:0};function u({lines:e,yAxisFormatter:t}){let[a,n]=(0,s.useState)(!1),o=(0,s.useCallback)(i()(()=>{n(!0),setTimeout(()=>n(!1),50)},100),[]);(0,s.useEffect)(()=>(window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}),[o]);let x=(0,s.useMemo)(()=>({datasets:e.map(e=>({label:e.label,data:e.data.map(e=>({x:e.xValue,y:e.priceValue,formattedDate:e.formattedDate,formattedPrice:e.formattedPriceValue})),borderColor:e.color,backgroundColor:e.color,borderDash:e.dashed?[6,5]:void 0,tension:.4,borderWidth:2,pointRadius:0,pointHoverRadius:4,pointHoverBackgroundColor:e.color,clip:{left:5,right:5,top:0,bottom:0}}))}),[e]),g=(0,s.useMemo)(()=>{let t=e.flatMap(e=>e.data.map(e=>e.xValue));return 0===t.length?null:{min:Math.min(...t),max:Math.max(...t)}},[e]),f=(0,s.useMemo)(()=>({responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{mode:"index",intersect:!1,backgroundColor:"white",titleColor:"#000",bodyColor:"#000",bodyFont:{size:16},bodySpacing:14,borderColor:(0,d.VxO)("grey","ultra"),borderWidth:1,padding:14,boxPadding:6,cornerRadius:8,caretSize:4,caretPadding:8,displayColors:!0,usePointStyle:!1,callbacks:{title:()=>"",label:e=>{let t=e.raw;return`${t.formattedDate} ${t.formattedPrice}`}}}},interaction:{mode:"index",intersect:!1},scales:{x:{type:"time",min:g?.min,max:g?.max,time:{unit:"month",displayFormats:{month:"MMM"}},ticks:{maxTicksLimit:12,font:{size:16}},grid:{display:!1}},y:{beginAtZero:!1,type:"linear",grace:"1",ticks:{callback:e=>t(e),count:5,font:{size:16}},grid:{color:(0,d.VxO)("grey","mercury")}}}}),[t,g]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:(0,c.AH)({position:"relative",width:"100%"}),children:(0,r.jsx)("div",{className:(0,c.AH)({overflow:"hidden",width:"100%",position:"relative",height:"200px"}),children:(0,r.jsx)(l.N1,{data:x,options:f,"data-testid":"rental-chart",redraw:a})})}),(0,r.jsx)("div",{className:m,children:e.map(e=>(0,r.jsxs)("div",{className:h,children:[(0,r.jsx)("div",{className:(0,c.AH)(p),style:e.dashed?{backgroundImage:`linear-gradient(to right, ${e.color} 0 6px, transparent 6px 11px)`,backgroundRepeat:"repeat-x",backgroundSize:"11px 6px"}:{backgroundColor:e.color}}),(0,r.jsx)("span",{children:e.label})]},e.label))})]})}},73186:(e,t,a)=>{a.r(t),a.d(t,{default:()=>J});var r=a(37876),s=a(14232),l=a(31167),n=a(30533),o=a(2014),i=a(27041),d=a(56935);let c=(0,n.VxO)("primary"),m=(0,n.VxO)("secondary"),h=[1,5,10],p=(0,o.AH)({marginBottom:"s"}),u=(0,o.AH)({color:"okay",fontWeight:"bold"}),x=(0,o.AH)({color:"error",fontWeight:"bold"}),g=(0,o.AH)({display:"flex",alignItems:"center",justifyContent:"center",minH:"200px"}),f=(0,o.AH)({display:"inline-flex",gap:"xxs",borderRadius:"9999px",border:"1px solid {colors.grey.100}",padding:"xxxs",marginBottom:"s"}),b=o.AH.raw({background:"none",border:"none",borderRadius:"9999px",paddingX:"s",paddingY:"xxs",fontSize:"body",cursor:"pointer",color:"primary.dark"}),y=(0,o.AH)({...b,backgroundColor:"primary.dark",color:"white",fontWeight:"bold"}),j=(0,o.AH)(b),k=e=>new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0}).format(e),w=(e,t)=>e.filter(e=>e?.priceValue!=null&&e?.date!=null).map(e=>({xValue:new Date(e.date).getTime(),formattedDate:e.formattedDate??"",formattedPriceValue:e.formattedPriceValue??"",priceValue:e.priceValue??0})).filter(e=>!Number.isNaN(e.xValue)&&e.xValue>=t),A=function({data:e,propertyTypeLabel:t}){let{t:a}

1=(0,i.s)(),[l,o]=(0,s.useState)(10),b=e?.homeDataPoints,A=e?.marketDataPoints,T=(0,s.useMemo)(()=>{let e=[...b??[],...A??[]].filter(e=>e?.date!=null);if(!e.length)return[];let r=Math.max(...e.map(e=>new Date(e.date).getTime())),s=new Date(new Date(r).setFullYear(new Date(r).getFullYear()-l)).getTime(),n=[],o=w(A??[],s);o.length&&n.push({data:o,color:c,label:a("homeDetails.rentalMarketTrends.history.marketLine",{type:t})});let i=w(b??[],s);return i.length&&n.push({data:i,color:m,label:a("homeDetails.rentalMarketTrends.history.homeLine"),dashed:!0}),n},[b,A,l,t,a]);if(!T.length)return(0,r.jsx)("div",{className:g,children:(0,r.jsx)(n.EYj,{size:"small",color:"lowlight",children:a("homeDetails.rentalMarketTrends.history.noData")})});let D=e?.percentChangeSummaryPrefix,M=e?.percentChangeSummaryHighlight,C=(e?.percentChange??0)>=0;return(0,r.jsxs)(r.Fragment,{children:[M&&(0,r.jsxs)(n.EYj,{size:"body",className:p,children:[D?`${D} `:"",(0,r.jsx)("span",{className:C?u:x,children:M})]}),(0,r.jsx)("div",{className:f,role:"group","aria-label":a("homeDetails.rentalMarketTrends.ariaLabels.rangeSelector"),children:h.map(e=>(0,r.jsx)("button",{type:"button","aria-pressed":e===l,className:e===l?y:j,onClick:()=>o(e),children:1===e?a("homeDetails.rentalMarketTrends.history.rangeOneYear"):a("homeDetails.rentalMarketTrends.history.rangeYears",{count:e})},e))}),(0,r.jsx)(d.A,{lines:T,yAxisFormatter:k})]})},T=(0,o.AH)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"s",borderRadius:"m",border:"1px solid {colors.grey.100}",backgroundColor:"grey.50",padding:"s",marginBottom:"m"}),D=(0,o.AH)({display:"flex",flexDirection:"column",flexGrow:1}),M=(0,o.AH)({fontSize:"title",fontWeight:"bold",lineHeight:"1.2"}),C=(0,o.AH)({background:"none",border:"none",padding:"0",cursor:"pointer",textDecoration:"underline",color:"primary.dark",fontSize:"body",whiteSpace:"nowrap",flexShrink:0}),v=function({estimatedRent:e}){let{t}=(0,i.s)(),a=(0,s.useRef)(null),l=(0,s.useRef)((0,n.FtM)(n.m_M)).current,o=e?.formattedPrice;return o?(0,r.jsxs)("div",{className:T,children:[(0,r.jsx)(n.Gdi,{width:32,height:32}),(0,r.jsxs)("div",{className:D,children:[(0,r.jsx)(n.EYj,{size:"body",color:"lowlight",children:t("homeDetails.rentalMarketTrends.rentEstimate.label")}),(0,r.jsx)("span",{className:M,children:o})]}),(0,r.jsx)("button",{ref:a,type:"button",className:C,onClick:l.show,onMouseEnter:l.show,onMouseLeave:l.hide,onFocus:l.show,onBlur:l.hide,children:t("homeDetails.rentalMarketTrends.rentEstimate.howWeCalculate")}),(0,r.jsx)(l,{placement:"bottom",expand:"left",targetRef:a,children:(0,r.jsx)(n.Yqy,{all:"xs",children:(0,r.jsx)(n.EYj,{size:"small",children:t("homeDetails.rentalMarketTrends.rentEstimate.methodology")})})})]}):null};var H=a(54445);let N=[H.n$.All,H.n$.Studio,H.n$.One,H.n$.Two,H.n$.Three,H.n$.Four],S={[H.n$.All]:"allBeds",[H.n$.Studio]:"studio",[H.n$.One]:"oneBed",[H.n$.Two]:"twoBeds",[H.n$.Three]:"threeBeds",[H.n$.Four]:"fourBeds"},L=[H.RL.Houses,H.RL.Townhomes,H.RL.ApartmentsAndCondos],$={[H.RL.All]:"allTypes",[H.RL.Houses]:"houses",[H.RL.Townhomes]:"townhomes",[H.RL.ApartmentsAndCondos]:"apartmentsCondos"},z=(0,o.AH)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"xs",marginBottom:"s"}),R=(0,o.AH)({width:"1px",alignSelf:"stretch",backgroundColor:"grey.100",marginX:"xxs"}),Y=function({selectedBedrooms:e,selectedPropertyType:t,onBedroomsChange:a,onPropertyTypeChange:s}){let{t:l}=(0,i.s)(),o=N.map(e=>({value:e,label:l(`homeDetails.rentalMarketTrends.filters.${S[e]}`)}));return(0,r.jsxs)("div",{className:z,children:[(0,r.jsx)(n.l6P,{css:{width:"140px"},value:e,onChange:e=>{let t=N.find(t=>String(t)===e.target.value);t&&a(t)},options:o,"aria-label":l("homeDetails.rentalMarketTrends.ariaLabels.bedrooms")}),(0,r.jsx)("div",{className:R,"aria-hidden":"true"}),L.map(e=>{let a=e===t,o=l(`homeDetails.rentalMarketTrends.filters.${$[e]}`);return a?(0,r.jsx)(n.jnt,{type:"button",flat:!0,"aria-pressed":!0,onClick:()=>s(e),children:o},e):(0,r.jsx)(n.tA,{type:"button","aria-pressed":!1,onClick:()=>s(e),children:o},e)})]})};var P=a(96029);let V=(0,o.AH)({marginY:"l",marginX:"0"}),B=(0,o.AH)({display:"inline-block",marginTop:"s"}),E="snapshot",F="priceHistory",W=(0,o.AH)({display:"grid",gridTemplateColumns:"1fr 1fr",gap:"xs"}),I=(0,o.AH)({fontSize:"body",color:"grey.osloGray",marginBottom:"xxxs"}),O=(0,o.AH)({display:"flex",flexDirection:"column",alignItems:"flex-start",ga

1p:"xxs",lg:{flexDirection:"row",alignItems:"center",flexWrap:"wrap"}}),U=(0,o.AH)({display:"flex",alignItems:"center",gap:"xxs"}),_=(0,o.AH)({fontSize:"subHeader",fontWeight:"bold",lineHeight:"1.2"}),K=o.AH.raw({backgroundColor:"primary.light",color:"okay",fontSize:"caption",fontWeight:"bold"}),q=o.AH.raw({backgroundColor:"tertiary.light",color:"error",fontSize:"caption",fontWeight:"bold"}),Z=o.AH.raw({position:"relative",top:"2px"});function G({label:e,momLabel:t,metric:a}){let s=a?.moMChangeDirection==="up",l=a?.formattedMoMChange!=null&&a?.moMChangeDirection!=="neutral"&&a?.formattedMoMChange!=="0.0%";return(0,r.jsxs)(n.azJ,{css:{borderRadius:"m",padding:"s",border:"1px solid {colors.grey.100}"},children:[(0,r.jsx)("div",{className:I,children:e}),(0,r.jsxs)("div",{className:O,children:[(0,r.jsx)("span",{className:_,children:a?.formattedValue??"—"}),l&&(0,r.jsxs)("div",{className:U,children:[(0,r.jsxs)(n.vwO,{compact:!0,css:s?K:q,children:[s?(0,r.jsx)(n.Kpk,{width:16,height:16,color:s?"okay":"alert",css:Z}):(0,r.jsx)(n.ZLN,{width:16,height:16,color:s?"okay":"alert",css:Z})," ",(0,r.jsx)(n.EYj,{size:"small",children:a?.formattedMoMChange})]}),(0,r.jsx)(n.EYj,{size:"small",color:"lowlight",children:t})]})]})]})}function X({snapshot:e,t}){let{averageRent:a,availableListings:s}=e,l=t("homeDetails.rentalMarketTrends.snapshot.mom");return(0,r.jsxs)("div",{className:W,children:[(0,r.jsx)(G,{label:t("homeDetails.rentalMarketTrends.snapshot.avgRent"),momLabel:l,metric:a}),(0,r.jsx)(G,{label:t("homeDetails.rentalMarketTrends.snapshot.availableListings"),momLabel:l,metric:s})]})}let J=function({snapshotData:e,avgPriceHistoryData:t,estimatedRent:a,homeUrl:o,bedroomsFormatted:d,propertyTypeValue:c,cityName:m,stateCode:h}){let{t:p}

1=(0,i.s)(),[u,x]=(0,s.useState)(E),[g,f]=(0,s.useState)(()=>(function(e){if(!e)return H.n$.All;if(/studio/i.test(e))return H.n$.Studio;let t=parseInt(e,10);return Number.isNaN(t)?H.n$.All:t<=0?H.n$.Studio:1===t?H.n$.One:2===t?H.n$.Two:3===t?H.n$.Three:H.n$.Four})(d)),[b,y]=(0,s.useState)(()=>(function(e){switch(e){case H.wY.Townhouse:return H.RL.Townhomes;case H.wY.Condo:case H.wY.Apartment:case H.wY.Loft:case H.wY.Coop:case H.wY.Tic:return H.RL.ApartmentsAndCondos;default:return H.RL.Houses}})(c)),[j,k]=(0,s.useState)(!1),w=(0,s.useDeferredValue)(g),T=(0,s.useDeferredValue)(b),{data:D,previousData:M}=(0,l.I)(P.S,{variables:{url:o,numberOfBedrooms:w,propertyType:T},skip:!j||!o}),C=D?.homeDetailsByUrl??M?.homeDetailsByUrl??null,N=j?C?.rentalMarketSnapshot??e:e,S=j?C?.rentalAvgPriceHistory??t:t,L=(0,s.useMemo)(()=>p(`homeDetails.rentalMarketTrends.filters.${$[T]}`),[p,T]);if(!N)return null;let z=N.sectionTitle??p("homeDetails.rentalMarketTrends.heading"),R=S?.lastUpdated,W=[{id:E,text:p("homeDetails.rentalMarketTrends.tabs.snapshot"),active:u===E},{id:F,text:p("homeDetails.rentalMarketTrends.tabs.priceHistory"),active:u===F}];return(0,r.jsxs)("div",{className:V,children:[(0,r.jsx)(n.DZT,{as:"h2",size:"subHeader",children:z}),R&&(0,r.jsx)(n.Yqy,{b:"xs",children:(0,r.jsx)(n.EYj,{size:"small",color:"lowlight",children:p("homeDetails.rentalMarketTrends.lastUpdated",{date:R})})}),(0,r.jsx)(v,{estimatedRent:a}),(0,r.jsx)(Y,{selectedBedrooms:g,selectedPropertyType:b,onBedroomsChange:e=>{f(e),k(!0)},onPropertyTypeChange:e=>{y(e),k(!0)}}),(0,r.jsxs)(n.ozo,{"aria-label":p("homeDetails.rentalMarketTrends.tabsAriaLabel"),items:W,onChange:x,children:[(0,r.jsx)(n.KpK,{id:E,children:(0,r.jsx)(n.Yqy,{all:"s",children:(0,r.jsx)(X,{snapshot:N,t:p})})}),(0,r.jsx)(n.KpK,{id:F,children:(0,r.jsx)(n.Yqy,{all:"s",children:(0,r.jsx)(A,{data:S,propertyTypeLabel:L})})})]}),N.cityTrendsPageUrl&&m&&h&&(0,r.jsx)(n.MzZ,{href:N.cityTrendsPageUrl,className:B,children:p("homeDetails.rentalMarketTrends.cityTrendsLink",{city:m.toLowerCase().split(/\s+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" "),state:h})})]})}}}]);