{"version":3,"file":"BarChart.C19aNOTj.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/xBelh60OeWyOOyeii3FQ/gqQiJACo1AfOKxCxi0ym/BarChart.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";import{createPortal}from\"react-dom\";const defaultData=[{month:\"Jan\",desktop:12400,mobile:8200},{month:\"Feb\",desktop:18900,mobile:12400},{month:\"Mar\",desktop:22100,mobile:15800},{month:\"Apr\",desktop:26500,mobile:18200},{month:\"May\",desktop:31200,mobile:22900},{month:\"Jun\",desktop:38400,mobile:28100}];function BarChart(props){const{data=\"\",showGrid=true,showXAxis=true,showYAxis=false,showTooltip=true,showLegend=true,barRadius=4,barGap=8,animateOnLoad=true,primaryBarColor=\"#18181b\",secondaryBarColor=\"#a1a1aa\",gridColor=\"#e4e4e7\",axisColor=\"#71717a\",textColor=\"#3f3f46\",backgroundColor=\"#ffffff\",tooltipBg=\"#ffffff\",tooltipBorder=\"#e4e4e7\",primaryLabel=\"Revenue\",secondaryLabel=\"New Users\"}=props;const[portalContainer,setPortalContainer]=useState(null);const[hoveredBar,setHoveredBar]=useState(null);useEffect(()=>{setPortalContainer(document.body);},[]);let chartData=defaultData;try{if(data&&data.trim()){chartData=JSON.parse(data);}}catch(e){chartData=defaultData;}const svgWidth=500;const svgHeight=280;const padding={top:20,right:20,bottom:30,left:showYAxis?45:15};const chartAreaWidth=svgWidth-padding.left-padding.right;const chartAreaHeight=svgHeight-padding.top-padding.bottom;const maxValue=Math.max(...chartData.flatMap(d=>[d.desktop,d.mobile]));const roundedMax=Math.ceil(maxValue/1e4)*1e4;const gridLines=5;const gridValues=Array.from({length:gridLines},(_,i)=>roundedMax/(gridLines-1)*i);const groupWidth=chartAreaWidth/chartData.length;const barWidth=(groupWidth-barGap*3)/2;const handleMouseEnter=(e,item,type)=>{if(!showTooltip)return;const rect=e.currentTarget.getBoundingClientRect();setHoveredBar({x:rect.left+rect.width/2,y:rect.top-8,data:item,type});};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",backgroundColor:backgroundColor,borderRadius:12,padding:20,boxSizing:\"border-box\",border:`1px solid ${gridColor}`,fontFamily:\"system-ui, -apple-system, sans-serif\",position:\"relative\",display:\"flex\",flexDirection:\"column\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{flex:1,minHeight:0,position:\"relative\"},children:/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",viewBox:`0 0 ${svgWidth} ${svgHeight}`,preserveAspectRatio:\"xMidYMid meet\",children:[showGrid&&gridValues.map((value,i)=>{const y=padding.top+(roundedMax-value)/roundedMax*chartAreaHeight;return /*#__PURE__*/_jsx(\"line\",{x1:padding.left,y1:y,x2:svgWidth-padding.right,y2:y,stroke:gridColor,strokeDasharray:\"4 4\",strokeWidth:1},`grid-${i}`);}),showYAxis&&gridValues.map((value,i)=>{const y=padding.top+(roundedMax-value)/roundedMax*chartAreaHeight;return /*#__PURE__*/_jsx(\"text\",{x:padding.left-8,y:y+4,textAnchor:\"end\",fill:axisColor,fontSize:11,children:value.toLocaleString()},`yaxis-${i}`);}),chartData.map((item,index)=>{const groupX=padding.left+index*groupWidth;const barX=groupX+(groupWidth-barWidth*2-barGap)/2;const desktopHeight=item.desktop/roundedMax*chartAreaHeight;const mobileHeight=item.mobile/roundedMax*chartAreaHeight;const baseY=padding.top+chartAreaHeight;return /*#__PURE__*/_jsxs(\"g\",{children:[/*#__PURE__*/_jsx(motion.rect,{x:barX,width:barWidth,fill:primaryBarColor,rx:barRadius,initial:animateOnLoad?{height:0,y:baseY}:{height:desktopHeight,y:baseY-desktopHeight},animate:{height:desktopHeight,y:baseY-desktopHeight},transition:{duration:.6,delay:index*.08,ease:[.34,1.56,.64,1]},style:{cursor:showTooltip?\"pointer\":\"default\"},onMouseEnter:e=>handleMouseEnter(e,item,\"desktop\"),onMouseLeave:()=>setHoveredBar(null)}),/*#__PURE__*/_jsx(motion.rect,{x:barX+barWidth+barGap,width:barWidth,fill:secondaryBarColor,rx:barRadius,initial:animateOnLoad?{height:0,y:baseY}:{height:mobileHeight,y:baseY-mobileHeight},animate:{height:mobileHeight,y:baseY-mobileHeight},transition:{duration:.6,delay:index*.08+.04,ease:[.34,1.56,.64,1]},style:{cursor:showTooltip?\"pointer\":\"default\"},onMouseEnter:e=>handleMouseEnter(e,item,\"mobile\"),onMouseLeave:()=>setHoveredBar(null)}),showXAxis&&/*#__PURE__*/_jsx(\"text\",{x:groupX+groupWidth/2,y:baseY+18,textAnchor:\"middle\",fill:axisColor,fontSize:12,children:item.month})]},`bar-group-${index}`);})]})}),showLegend&&/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"center\",gap:24,paddingTop:12,flexShrink:0},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:8},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:12,height:12,borderRadius:2,backgroundColor:primaryBarColor}}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:13,color:textColor,fontWeight:500},children:primaryLabel})]}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:8},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:12,height:12,borderRadius:2,backgroundColor:secondaryBarColor}}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:13,color:textColor,fontWeight:500},children:secondaryLabel})]})]}),portalContainer&&hoveredBar&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(motion.div,{initial:{opacity:0,y:4},animate:{opacity:1,y:0},transition:{duration:.15},style:{position:\"fixed\",left:hoveredBar.x,top:hoveredBar.y,transform:\"translate(-50%, -100%)\",backgroundColor:tooltipBg,border:`1px solid ${tooltipBorder}`,borderRadius:8,padding:\"8px 12px\",boxShadow:\"0 4px 12px rgba(0,0,0,0.15)\",pointerEvents:\"none\",zIndex:9999,whiteSpace:\"nowrap\",fontFamily:\"system-ui, -apple-system, sans-serif\"},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:\"0 0 4px\",fontWeight:600,fontSize:12,color:\"#09090b\"},children:hoveredBar.data.month}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:6},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:8,height:8,borderRadius:2,backgroundColor:hoveredBar.type===\"desktop\"?primaryBarColor:secondaryBarColor}}),/*#__PURE__*/_jsxs(\"span\",{style:{fontSize:11,color:textColor},children:[hoveredBar.type===\"desktop\"?primaryLabel:secondaryLabel,\":\",\" \",hoveredBar.type===\"desktop\"?hoveredBar.data.desktop.toLocaleString():hoveredBar.data.mobile.toLocaleString()]})]})]}),portalContainer)]});}export default BarChart;addPropertyControls(BarChart,{data:{type:ControlType.String,title:\"Data (JSON)\",defaultValue:\"\",displayTextArea:true},animateOnLoad:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true},showGrid:{type:ControlType.Boolean,title:\"Show Grid\",defaultValue:true},showXAxis:{type:ControlType.Boolean,title:\"Show X Axis\",defaultValue:true},showYAxis:{type:ControlType.Boolean,title:\"Show Y Axis\",defaultValue:false},showTooltip:{type:ControlType.Boolean,title:\"Show Tooltip\",defaultValue:true},showLegend:{type:ControlType.Boolean,title:\"Show Legend\",defaultValue:true},barRadius:{type:ControlType.Number,title:\"Bar Radius\",min:0,max:12,defaultValue:4},barGap:{type:ControlType.Number,title:\"Bar Gap\",min:0,max:20,defaultValue:8},primaryLabel:{type:ControlType.String,title:\"Primary Label\",defaultValue:\"Revenue\"},secondaryLabel:{type:ControlType.String,title:\"Secondary Label\",defaultValue:\"New Users\"},primaryBarColor:{type:ControlType.Color,title:\"Primary Bar\",defaultValue:\"#18181b\"},secondaryBarColor:{type:ControlType.Color,title:\"Secondary Bar\",defaultValue:\"#a1a1aa\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#ffffff\"},gridColor:{type:ControlType.Color,title:\"Grid / Border\",defaultValue:\"#e4e4e7\"},axisColor:{type:ControlType.Color,title:\"Axis Text\",defaultValue:\"#71717a\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#3f3f46\"},tooltipBg:{type:ControlType.Color,title:\"Tooltip Bg\",defaultValue:\"#ffffff\"},tooltipBorder:{type:ControlType.Color,title:\"Tooltip Border\",defaultValue:\"#e4e4e7\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BarChart\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BarChart.map"],"mappings":"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"}