vendor: 10,854 bytes, line 1
1import{R as g,r as z,j as r}from"./main-BkpAS6Tt.js";import{C as A}from"./card-DoRMGzGn.js";import{C as P}from"./CodeDialog-0FrlQqch.js";import{c as H,F as jr,T as wr,f as Z,p as ar,z as $,L as J,h as _,a as Ar,S as Pr,A as Sr,H as kr,i as hr,I as V,s as sr,b as br,J as Rr,G as Dr,m as X,e as Lr,C as Nr,K as Tr,M as Q,N as dr,l as Kr,n as Or,o as S,q as T,r as K,O as or,P as Ir,B as Er,E as Fr}from"./chart-ob8-8xNE.js";import{P as _r,a as Vr}from"./PolarAngleAxis-Q_MhQBdG.js";import{Q as Mr}from"./isPlainObject-DJZKX-6g.js";import{a as er}from"./utils-4perknFd.js";import{S as $r,a as Br,b as Wr,c as Hr,e as Jr}from"./select-CTV8gp4j.js";import{B as qr}from"./BreadcrumbComp-DdXArMCY.js";import"./_commonjsHelpers-CE1G-McA.js";import"./iconify-BLAYqHQO.js";import"./index-DBgj5RxF.js";import"./index-BMnuVYbS.js";/* empty css */import"./tooltip-Ca_sQpWi.js";import"./index-DRcYnjBa.js";import"./index-CfThMl9f.js";import"./index-L0SKbviM.js";import"./index-Jo9Y0u8a.js";import"./index-BHinUB-C.js";import"./index-DfANd6nE.js";import"./index-Ddz03csu.js";import"./floating-ui.dom-D7G01c1r.js";import"./index-B_H36sPx.js";import"./index-DjxFjNHx.js";import"./index-C8UgGVIT.js";import"./index-BdQq_4o_.js";import"./index-DhQbCedW.js";import"./index-aJTH1M9Z.js";import"./tslib.es6-CmEaCU22.js";import"./index-D9jDtrFa.js";import"./chevron-down-ChXj5Bit.js";import"./createLucideIcon-DRlH1f4M.js";import"./check-DIOPK-zC.js";import"./CardBox-CY_4CfKs.js";var Y;function B(o){"@babel/helpers - typeof";return B=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},B(o)}function M(){return M=Object.assign?Object.assign.bind():function(o){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var t in i)Object.prototype.hasOwnProperty.call(i,t)&&(o[t]=i[t])}return o},M.apply(this,arguments)}function fr(o,e){var i=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);e&&(t=t.filter(function(a){return Object.getOwnPropertyDescriptor(o,a).enumerable})),i.push.apply(i,t)}return i}function h(o){for(var e=1;e<arguments.length;e++){var i=arguments[e]!=null?arguments[e]:{};e%2?fr(Object(i),!0).forEach(function(t){j(o,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):fr(Object(i)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(i,t))})}return o}function zr(o,e){if(!(o instanceof e))throw new TypeError("Cannot call a class as a function")}function vr(o,e){for(var i=0;i<e.length;i++){var t=e[i];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(o,Cr(t.key),t)}}function Gr(o,e,i){return e&&vr(o.prototype,e),i&&vr(o,i),Object.defineProperty(o,"prototype",{writable:!1}),o}function Ur(o,e,i){return e=rr(e),Qr(o,xr()?Reflect.construct(e,i||[],rr(o).constructor):e.apply(o,i))}function Qr(o,e){if(e&&(B(e)==="object"||typeof e=="function"))return e;if(e!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return Zr(o)}function Zr(o){if(o===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return o}function xr(){try{var o=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(xr=function(){return!!o})()}function rr(o){return rr=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(i){return i.__proto__||Object.getPrototypeOf(i)},rr(o)}function Xr(o,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");o.prototype=Object.create(e&&e.prototype,{constructor:{value:o,writable:!0,configurable:!0}}),Object.defineProperty(o,"prototype",{writable:!1}),e&&ir(o,e)}function ir(o,e){return ir=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,a){return t.__proto__=a,t},ir(o,e)}function j(o,e,i){return e=Cr(e),e in o?Object.defineProperty(o,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):o[e]=i,o}function Cr(o){var e=Yr(o,"string");return B(e)=="symbol"?e:e+""}function Yr(o,e){if(B(o)!="object"||!o)return o;var i=o[Symbol.toPrimitive];if(i!==void 0){var t=i.call(o,e);if(B(t)!="object")return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(o)}var d=(function(o){function e(i){var t;return zr(this,e),t=Ur(this,e,[i]),j(t,"pieRef",null),j(t,"sectorRefs",[]),j(t,"id",Rr("recharts-pie-")),j(t,"handleAnimationEnd",function(){var a=t.props.onAnimationEnd;t.setState({isAnimationFinished:!0}),H(a)&&a()}),j(t,"handleAnimationStart",function(){var a=t.props.onAnimationStart;t.setState({isAnimationFinished:!1}),H(a)&&a()}),t.state={isAnimationFinished:!i.isAnimationActive,prevIsAnimationActive:i.isAnimationActive,prevAnimationId:i.animationId,sectorToFocus:0},t}return Xr(e,o),Gr(e,[{key:"isActiveIndex",value:function(t){var a=this.props.activeIndex;return Array.isArray(a)?a.indexOf(t)!==-1:t===a}},{key:"hasActiveIndex",value:function(){var t=this.props.activeIndex;return Array.isArray(t)?t.length!==0:t||t===0}},{key:"renderLabels",value:function(t){var a=this.props.isAnimationActive;if(a&&!this.state.isAnimationFinished)return null;var s=this.props,l=s.label,f=s.labelLine,v=s.dataKey,n=s.valueKey,u=Z(this.props,!1),p=Z(l,!1),R=Z(f,!1),D=l&&l.offsetRadius||20,b=t.map(function(c,m){var x=(c.startAngle+c.endAngle)/2,C=ar(c.cx,c.cy,c.outerRadius+D,x),w=h(h(h(h({},u),c),{},{stroke:"none"},p),{},{index:m,textAnchor:e.getTextAnchor(C.x,c.cx)},C),E=h(h(h(h({},u),c),{},{fill:"none",stroke:c.fill},R),{},{index:m,points:[ar(c.cx,c.cy,c.outerRadius,x),C]}),L=v;return $(v)&&$(n)?L="value":$(v)&&(L=n),g.createElement(J,{key:"label-".concat(c.startAngle,"-").concat(c.endAngle,"-").concat(c.midAngle,"-").concat(m)},f&&e.renderLabelLineItem(f,E,"line"),e.renderLabelItem(l,w,_(c,L)))});return g.createElement(J,{className:"recharts-pie-labels"},b)}},{key:"renderSectorsStatically",value:function(t){var a=this,s=this.props,l=s.activeShape,f=s.blendStroke,v=s.inactiveShape;return t.map(function(n,u){if(n?.startAngle===0&&n?.endAngle===0&&t.length!==1)return null;var p=a.isActiveIndex(u),R=v&&a.hasActiveIndex()?v:null,D=p?l:R,b=h(h({},n),{},{stroke:f?n.fill:n.stroke,tabIndex:-1});return g.createElement(J,M({ref:function(m){m&&!a.sectorRefs.includes(m)&&a.sectorRefs.push(m)},tabIndex:-1,className:"recharts-pie-sector"},Ar(a.props,n,u),{key:"sector-".concat(n?.startAngle,"-").concat(n?.endAngle,"-").concat(n.midAngle,"-").concat(u)}),g.createElement(Pr,M({option:D,isActive:p,shapeType:"sector"},b)))})}},{key:"renderSectorsWithAnimation",value:function(){var t=this,a=this.props,s=a.sectors,l=a.isAnimationActive,f=a.animationBegin,v=a.animationDuration,n=a.animationEasing,u=a.animationId,p=this.state,R=p.prevSectors,D=p.prevIsAnimationActive;return g.createElement(Sr,{begin:f,duration:v,isActive:l,easing:n,from:{t:0},to:{t:1},key:"pie-".concat(u,"-").concat(D),onAnimationStart:this.handleAnimationStart,onAnimationEnd:this.handleAnimationEnd},function(b){var c=b.t,m=[],x=s&&s[0],C=x.startAngle;return s.forEach(function(w,E){var L=R&&R[E],I=E>0?kr(w,"paddingAngle",0):0;if(L){var W=hr(L.endAngle-L.startAngle,w.endAngle-w.startAngle),y=h(h({},w),{},{startAngle:C+I,endAngle:C+W(c)+I});m.push(y),C=y.endAngle}else{var F=w.endAngle,N=w.startAngle,G=hr(0,F-N),U=G(c),O=h(h({},w),{},{startAngle:C+I,endAngle:C+U+I});m.push(O),C=O.endAngle}}),g.createElement(J,null,t.renderSectorsStatically(m))})}},{key:"attachKeyboardHandlers",value:function(t){var a=this;t.onkeydown=function(s){if(!s.altKey)switch(s.key){case"ArrowLeft":{var l=++a.state.sectorToFocus%a.sectorRefs.length;a.sectorRefs[l].focus(),a.setState({sectorToFocus:l});break}case"ArrowRight":{var f=--a.state.sectorToFocus<0?a.sectorRefs.length-1:a.state.sectorToFocus%a.sectorRefs.length;a.sectorRefs[f].focus(),a.setState({sectorToFocus:f});break}case"Escape":{a.sectorRefs[a.state.sectorToFocus].blur(),a.setState({sectorToFocus:0});break}}}}},{key:"renderSectors",value:function(){var t=this.props,a=t.sectors,s=t.isAnimationActive,l=this.state.prevSectors;return s&&a&&a.length&&(!l||!Mr(l,a))?this.renderSectorsWithAnimation():this.renderSectorsStatically(a)}},{key:"componentDidMount",value:function(){this.pieRef&&this.attachKeyboardHandlers(this.pieRef)}},{key:"render",value:function(){var t=this,a=this.props,s=a.hide,l=a.sectors,f=a.className,v=a.label,n=a.cx,u=a.cy,p=a.innerRadius,R=a.outerRadius,D=a.isAnimationActive,b=this.state.isAnimationFinished;if(s||!l||!l.length||!V(n)||!V(u)||!V(p)||!V(R))return null;var c=er("recharts-pie",f);return g.createElement(J,{tabIndex:this.props.rootTabIndex,className:c,ref:function(x){t.pieRef=x}},this.renderSectors(),v&&this.renderLabels(l),sr.renderCallByParent(this.props,null,!1),(!D||b)&&br.renderCallByParent(this.props,l,!1))}}],[{key:"getDerivedStateFromProps",value:function(t,a){return a.prevIsAnimationActive!==t.isAnimationActive?{prevIsAnimationActive:t.isAnimationActive,prevAnimationId:t.animationId,curSectors:t.sectors,prevSectors:[],isAnimationFinished:!0}:t.isAnimationActive&&t.animationId!==a.prevAnimationId?{prevAnimationId:t.animationId,curSectors:t.sectors,prevSectors:a.curSectors,isAnimationFinished:!0}:t.sectors!==a.curSectors?{curSectors:t.sectors,isAnimationFinished:!0}:null}},{key:"getTextAnchor",value:function(t,a){return t>a?"start":t<a?"end":"middle"}},{key:"renderLabelLineItem",value:function(t,a,s){if(g.isValidElement(t))return g.cloneElement(t,a);if(H(t))return t(a);var l=er("recharts-pie-label-line",typeof t!="boolean"?t.className:"");return g.createElement(jr,M({},a,{key:s,type:"linear",className:l}))}},{key:"renderLabelItem",value:function(t,a,s){if(g.isValidElement(t))return g.cloneElement(t,a);var l=s;if(H(t)&&(l=t(a),g.isValidElement(l)))return l;var f=er("recharts-pie-label-text",typeof t!="boolean"&&!H(t)?t.className:"");return g.createElement(wr,M({},a,{alignmentBaseline:"middle",className:f}),l)}}])})(z.PureComponent);Y=d;j(d,"displayName","Pie");j(d,"defaultProps",{stroke:"#fff",fill:"#808080",legendType:"rect",cx:"50%",cy:"50%",startAngle:0,endAngle:360,innerRadius:0,outerRadius:"80%",paddingAngle:0,labelLine:!0,hide:!1,minAngle:0,isAnimationActive:!Dr.isSsr,animationBegin:400,animationDuration:1500,animationEasing:"ease",nameKey:"name",blendStroke:!1,rootTabIndex:0});j(d,"parseDeltaAngle",function(o,e){var i=X(e-o),t=Math.min(Math.abs(e-o),360);return i*t});j(d,"getRealPieData",function(o){var e=o.data,i=o.children,t=Z(o,!1),a=Lr(i,Nr);return e&&e.length?e.map(function(s,l){return h(h(h({payload:s},t),s),a&&a[l]&&a[l].props)}):a&&a.length?a.map(function(s){return h(h({},t),s.props)}):[]});j(d,"parseCoordinateOfPie",function(o,e){var i=e.top,t=e.left,a=e.width,s=e.he
1ight,l=Tr(a,s),f=t+Q(o.cx,a,a/2),v=i+Q(o.cy,s,s/2),n=Q(o.innerRadius,l,0),u=Q(o.outerRadius,l,l*.8),p=o.maxRadius||Math.sqrt(a*a+s*s)/2;return{cx:f,cy:v,innerRadius:n,outerRadius:u,maxRadius:p}});j(d,"getComposedData",function(o){var e=o.item,i=o.offset,t=e.type.defaultProps!==void 0?h(h({},e.type.defaultProps),e.props):e.props,a=Y.getRealPieData(t);if(!a||!a.length)return null;var s=t.cornerRadius,l=t.startAngle,f=t.endAngle,v=t.paddingAngle,n=t.dataKey,u=t.nameKey,p=t.valueKey,R=t.tooltipType,D=Math.abs(t.minAngle),b=Y.parseCoordinateOfPie(t,i),c=Y.parseDeltaAngle(l,f),m=Math.abs(c),x=n;$(n)&&$(p)?(dr(!1,`Use "dataKey" to specify the value of pie, 2 the props "valueKey" will be deprecated in 1.1.0`),x="value"):$(n)&&(dr(!1,`Use "dataKey" to specify the value of pie, 3 the props "valueKey" will be deprecated in 1.1.0`),x=p);var C=a.filter(function(y){return _(y,x,0)!==0}).length,w=(m>=360?C:C-1)*v,E=m-C*D-w,L=a.reduce(function(y,F){var N=_(F,x,0);return y+(V(N)?N:0)},0),I;if(L>0){var W;I=a.map(function(y,F){var N=_(y,x,0),G=_(y,u,F),U=(V(N)?N:0)/L,O;F?O=W.endAngle+X(c)*v*(N!==0?1:0):O=l;var lr=O+X(c)*((N!==0?D:0)+U*E),nr=(O+lr)/2,cr=(b.innerRadius+b.outerRadius)/2,gr=[{name:G,value:N,payload:y,dataKey:x,type:R}],yr=ar(b.cx,b.cy,cr,nr);return W=h(h(h({percent:U,cornerRadius:s,name:G,tooltipPayload:gr,midAngle:nr,middleRadius:cr,tooltipPosition:yr},y),b),{},{value:_(y,x),startAngle:O,endAngle:lr,payload:y,paddingAngle:X(c)*v}),W})}return h(h({},b),{},{sectors:I,data:a})});var k=Kr({chartName:"PieChart",GraphicalChild:d,validateTooltipEventTypes:["item"],defaultTooltipEventType:"item",legendContent:"children",axisComponents:[{axisType:"angleAxis",AxisComp:_r},{axisType:"radiusAxis",AxisComp:Vr}],formatAxisMap:Or,defaultProps:{layout:"centric",startAngle:0,endAngle:360,cx:"50%",cy:"50%",innerRadius:0,outerRadius:"80%"}});const re=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],ee={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function te(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:ee,children:r.jsxs(k,{children:[r.jsx(T,{content:r.jsx(K,{nameKey:"visitors",hideLabel:!0})}),r.jsx(d,{data:re,dataKey:"visitors",labelLine:!1,label:({payload:o,...e})=>r.jsx("text",{cx:e.cx,cy:e.cy,x:e.x,y:e.y,textAnchor:e.textAnchor,dominantBaseline:e.dominantBaseline,fill:"var(--color-primary)",children:o.visitors}),nameKey:"browser"})]})})})}const ae=`import { Pie, PieChart } from 'recharts'; 4 5import { 6 ChartConfig, 7 ChartContainer, 8 ChartTooltip, 9 ChartTooltipContent, 10} from 'src/components/ui/chart'; 11 12export const description = 'A pie chart with a custom label'; 13 14const chartData = [ 15 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 16 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 17 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 18 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 19 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 20]; 21 22const chartConfig = { 23 visitors: { 24 label: 'Visitors', 25 }, 26 chrome: { 27 label: 'Chrome', 28 color: 'var(--chart-1)', 29 }, 30 safari: { 31 label: 'Safari', 32 color: 'var(--chart-2)', 33 }, 34 firefox: { 35 label: 'Firefox', 36 color: 'var(--chart-3)', 37 }, 38 edge: { 39 label: 'Edge', 40 color: 'var(--chart-4)', 41 }, 42 other: { 43 label: 'Other', 44 color: 'var(--chart-5)', 45 }, 46} satisfies ChartConfig; 47 48export default function ChartPieLabelCustomCode() { 49 return ( 50 <> 51 <ChartContainer config={chartConfig}> 52 <PieChart> 53 <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} /> 54 <Pie 55 data={chartData} 56 dataKey="visitors"
57 labelLine={false} 58 label={({ payload, ...props }) => { 59 return ( 60 <text 61 cx={props.cx} 62 cy={props.cy} 63 x={props.x} 64 y={props.y} 65 textAnchor={props.textAnchor} 66 dominantBaseline={props.dominantBaseline} 67 fill="var(--color-primary)" 68 > 69 {payload.visitors} 70 </text> 71 ); 72 }} 73 nameKey="browser" 74 /> 75 </PieChart> 76 </ChartContainer> 77 </> 78 ); 79} 80`,oe=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Custom Label"}),r.jsx(te,{})]}),r.jsx(P,{children:ae})]})}),ie=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],se={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function le(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:se,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:ie,dataKey:"visitors",nameKey:"browser"})]})})})}const ne=`import { Pie, PieChart } from 'recharts'; 81 82import { 83 ChartConfig, 84 ChartContainer, 85 ChartTooltip, 86 ChartTooltipContent, 87} from 'src/components/ui/chart'; 88 89export const description = 'A simple pie chart'; 90 91const chartData = [ 92 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 93 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 94 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 95 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 96 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 97]; 98 99const chartConfig = { 100 visitors: { 101 label: 'Visitors', 102 }, 103 chrome: { 104 label: 'Chrome', 105 color: 'var(--chart-1)', 106 }, 107 safari: { 108 label: 'Safari', 109 color: 'var(--chart-2)', 110 }, 111 firefox: { 112 label: 'Firefox', 113 color: 'var(--chart-3)', 114 }, 115 edge: { 116 label: 'Edge', 117 color: 'var(--chart-4)', 118 }, 119 other: { 120 label: 'Other', 121 color: 'var(--chart-5)', 122 }, 123} satisfies ChartConfig; 124 125export default function ChartPieSimpleCode() { 126 return ( 127 <> 128 <ChartContainer config={chartConfig}> 129 <PieChart> 130 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 131 <Pie data={chartData} dataKey="visitors" nameKey="browser" /> 132 </PieChart> 133 </ChartContainer> 134 </> 135 ); 136} 137`,ce=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Default"}),r.jsx(le,{})]}),r.jsx(P,{children:ne})]})}),he=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],de={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function fe(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:de,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:he,dataKey:"visitors",nameKey:"browser",innerRadius:60})]})})})}const ve=`import { Pie, PieChart } from 'recharts'; 138 139import { 140 ChartConfig, 141 ChartContainer, 142 ChartTooltip, 143 ChartTooltipContent, 144} from 'src/components/ui/chart'; 145 146export const description = 'A donut chart'; 147 148const chartData = [ 149 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 150 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 151 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 152 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 153 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 154]; 155 156const chartConfig = { 157 visitors: { 158 label: 'Visitors', 159 }, 160 chrome: { 161 label: 'Chrome', 162 color: 'var(--chart-1)', 163 }, 164 safari: { 165 label: 'Safari', 166 color: 'var(--chart-2)', 167 }, 168 firefox: { 169 label: 'Firefox', 170 color: 'var(--chart-3)', 171 }, 172 edge: { 173 label: 'Edge', 174 color: 'var(--chart-4)', 175 }, 176 other: { 177 label: 'Other', 178 color: 'var(--chart-5)', 179 }, 180} satisfies ChartConfig; 181 182export default function ChartPieDonutCode() { 183 return ( 184 <> 185 <ChartContainer config={chartConfig}> 186 <PieChart> 187 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 188 <Pie data={chartData} dataKey="visitors" nameKey="browser" innerRadius={60} /> 189 </PieChart> 190 </ChartContainer> 191 </> 192 ); 193} 194`,me=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Donut"}),r.jsx(fe,{})]}),r.jsx(P,{children:ve})]})}),ue=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],pe={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function be(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:pe,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:ue,dataKey:"visitors",nameKey:"browser",innerRadius:60,strokeWidth:5,activeIndex:0,activeShape:({outerRadius:o=0,...e})=>r.jsx(or,{...e,outerRadius:o+10})})]})})})}const xe=`import { Pie, PieChart, Sector } from 'recharts'; 195import { PieSectorDataItem } from 'recharts/types/polar/Pie'; 196 197import { 198 ChartConfig, 199 ChartContainer, 200 ChartTooltip, 201 ChartTooltipContent, 202} from 'src/components/ui/chart'; 203 204export const description = 'A donut chart with an active sector'; 205 206const chartData = [ 207 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 208 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 209 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 210 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 211 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 212]; 213 214const chartConfig = { 215 visitors: { 216 label: 'Visitors', 217 }, 218 chrome: { 219 label: 'Chrome', 220 color: 'var(--chart-1)', 221 }, 222 safari: { 223 label: 'Safari', 224 color: 'var(--chart-2)', 225 }, 226 firefox: { 227 label: 'Firefox', 228 color: 'var(--chart-3)', 229 }, 230 edge: { 231 label: 'Edge', 232 color: 'var(--chart-4)', 233 }, 234 other: { 235 label: 'Other', 236 color: 'var(--chart-5)', 237 }, 238} satisfies ChartConfig; 239 240export default function ChartPieDonutActiveCode() { 241 return ( 242 <> 243 <ChartContainer config={chartConfig}> 244 <PieChart> 245 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 246 <Pie 247 data={chartData} 248 dataKey="visitors" 249 nameKey="browser" 250 innerRadius={60} 251 strokeWidth={5} 252 activeIndex={0} 253 activeShape={({ outerRadius = 0, ...props }
253: PieSectorDataItem) => ( 254 <Sector {...props} outerRadius={outerRadius + 10} /> 255 )} 256 /> 257 </PieChart> 258 </ChartContainer> 259 </> 260 ); 261} 262`,Ce=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Donut active"}),r.jsx(be,{})]}),r.jsx(P,{children:xe})]})}),mr=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:287,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:190,fill:"var(--color-info)"}],ge={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function ye(){const o=z.useMemo(()=>mr.reduce((e,i)=>e+i.visitors,0),[]);return r.jsx(r.Fragment,{children:r.jsx(S,{config:ge,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:mr,dataKey:"visitors",nameKey:"browser",innerRadius:60,strokeWidth:5,children:r.jsx(sr,{content:({viewBox:e})=>{if(e&&"cx"in e&&"cy"in e)return r.jsxs("text",{x:e.cx,y:e.cy,textAnchor:"middle",dominantBaseline:"middle",children:[r.jsx("tspan",{x:e.cx,y:e.cy,className:"fill-foreground text-3xl font-bold",children:o.toLocaleString()}),r.jsx("tspan",{x:e.cx,y:(e.cy||0)+24,className:"fill-link",children:"Visitors"})]})}})})]})})})}const je=`import * as React from 'react'; 263import { Label, Pie, PieChart } from 'recharts'; 264 265import { 266 ChartConfig, 267 ChartContainer, 268 ChartTooltip, 269 ChartTooltipContent, 270} from 'src/components/ui/chart'; 271 272export const description = 'A donut chart with text'; 273 274const chartData = [ 275 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 276 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 277 { browser: 'firefox', visitors: 287, fill: 'var(--color-warning)' }, 278 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 279 { browser: 'other', visitors: 190, fill: 'var(--color-info)' }, 280]; 281 282const chartConfig = { 283 visitors: { 284 label: 'Visitors', 285 }, 286 chrome: { 287 label: 'Chrome', 288 color: 'var(--chart-1)', 289 }, 290 safari: { 291 label: 'Safari', 292 color: 'var(--chart-2)', 293 }, 294 firefox: { 295 label: 'Firefox', 296 color: 'var(--chart-3)', 297 }, 298 edge: { 299 label: 'Edge', 300 color: 'var(--chart-4)', 301 }, 302 other: { 303 label: 'Other', 304 color: 'var(--chart-5)', 305 }, 306} satisfies ChartConfig; 307 308export default function ChartPieDonutTextCode() { 309 const totalVisitors = React.useMemo(() => { 310 return chartData.reduce((acc, curr) => acc + curr.visitors, 0); 311 }, []); 312 313 return ( 314 <> 315 <ChartContainer config={chartConfig}> 316 <PieChart> 317 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 318 <Pie 319 data={chartData} 320 dataKey="visitors" 321 nameKey="browser" 322 innerRadius={60} 323 strokeWidth={5} 324 > 325 <Label 326 content={({ viewBox }) => { 327 if (viewBox && 'cx' in viewBox && 'cy' in viewBox) { 328 return ( 329 <text 330 x={viewBox.cx} 331 y={viewBox.cy} 332 textAnchor="middle" 333 dominantBaseline="middle" 334 > 335 <tspan 336 x={viewBox.cx} 337 y={viewBox.cy} 338 className="fill-foreground text-3xl font-bold" 339 > 340 {totalVisitors.toLocaleString()} 341 </tspan> 342 <tspan 343 x={viewBox.cx} 344 y={(viewBox.cy || 0) + 24} 345 className="fill-link" 346 > 347 Visitors 348 </tspan> 349 </text> 350 ); 351 } 352 }} 353 /> 354 </Pie> 355 </PieChart> 356 </ChartContainer> 357 </> 358 ); 359} 360`,we=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Donut With Text"}),r.jsx(ye,{})]}),r.jsx(P,{children:je})]})}),q=[{month:"january",desktop:186,fill:"var(--color-primary)"},{month:"february",desktop:305,fill:"var(--color-secondary)"},{month:"march",desktop:237,fill:"var(--color-warning)"},{month:"april",desktop:173,fill:"var(--color-error)"},{month:"may",desktop:209,fill:"var(--color-info)"}],tr={visitors:{label:"Visitors"},desktop:{label:"Desktop"},mobile:{label:"Mobile"},january:{label:"January",color:"var(--chart-1)"},february:{label:"February",color:"var(--chart-2)"},march:{label:"March",color:"var(--chart-3)"},april:{label:"April",color:"var(--chart-4)"},may:{label:"May",color:"var(--chart-5)"}};function Ae(){const o="pie-interactive",[e,i]=z.useState(q[0].month),t=z.useMemo(()=>q.findIndex(s=>s.month===e),[e]),a=z.useMemo(()=>q.map(s=>s.month),[]);return r.jsxs(r.Fragment,{children:[r.jsx(Ir,{id:o,config:tr}),r.jsxs("div",{children:[r.jsxs($r,{value:e,onValueChange:i,children:[r.jsx(Br,{className:"sm:ml-auto max-w-32 rounded-lg pl-2.5","aria-label":"Select a value",children:r.jsx(Wr,{placeholder:"Select month"})}),r.jsx(Hr,{align:"end",className:"rounded-xl",children:a.map(s=>{const l=tr[s];return l?r.jsx(Jr,{value:s,className:"rounded-lg [&_span]:flex",children:r.jsxs("div",{className:"flex items-center gap-2 text-xs",children:[r.jsx("span",{className:"flex h-3 w-3 shrink-0 rounded-xs",style:{backgroundColor:`var(--color-${s})`}}),l?.label]})},s):null})})]}),r.jsx(S,{id:o,config:tr,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:q,dataKey:"desktop",nameKey:"month",innerRadius:60,strokeWidth:5,activeIndex:t,activeShape:({outerRadius:s=0,...l})=>r.jsxs("g",{children:[r.jsx(or,{...l,outerRadius:s+10}),r.jsx(or,{...l,outerRadius:s+25,innerRadius:s+12})]}),children:r.jsx(sr,{content:({viewBox:s})=>{if(s&&"cx"in s&&"cy"in s)return r.jsxs("text",{x:s.cx,y:s.cy,textAnchor:"middle",dominantBaseline:"middle",children:[r.jsx("tspan",{x:s.cx,y:s.cy,className:"fill-foreground text-3xl font-bold",children:q[t].desktop.toLocaleStr
360ing()}),r.jsx("tspan",{x:s.cx,y:(s.cy||0)+24,className:"fill-link",children:"Visitors"})]})}})})]})})]})]})}const Pe=`import * as React from 'react'; 361import { Label, Pie, PieChart, Sector } from 'recharts'; 362import { PieSectorDataItem } from 'recharts/types/polar/Pie'; 363 364import { 365 ChartConfig, 366 ChartContainer, 367 ChartStyle, 368 ChartTooltip, 369 ChartTooltipContent, 370} from 'src/components/ui/chart'; 371import { 372 Select, 373 SelectContent, 374 SelectItem, 375 SelectTrigger, 376 SelectValue, 377} from 'src/components/ui/select'; 378 379export const description = 'An interactive pie chart'; 380 381const desktopData = [ 382 { month: 'january', desktop: 186, fill: 'var(--color-primary)' }, 383 { month: 'february', desktop: 305, fill: 'var(--color-secondary)' }, 384 { month: 'march', desktop: 237, fill: 'var(--color-warning)' }, 385 { month: 'april', desktop: 173, fill: 'var(--color-error)' }, 386 { month: 'may', desktop: 209, fill: 'var(--color-info)' }, 387]; 388 389const chartConfig = { 390 visitors: { 391 label: 'Visitors', 392 }, 393 desktop: { 394 label: 'Desktop', 395 }, 396 mobile: { 397 label: 'Mobile', 398 }, 399 january: { 400 label: 'January', 401 color: 'var(--chart-1)', 402 }, 403 february: { 404 label: 'February', 405 color: 'var(--chart-2)', 406 }, 407 march: { 408 label: 'March', 409 color: 'var(--chart-3)', 410 }, 411 april: { 412 label: 'April', 413 color: 'var(--chart-4)', 414 }, 415 may: { 416 label: 'May', 417 color: 'var(--chart-5)', 418 }, 419} satisfies ChartConfig; 420 421export default function ChartPieInteractiveCode() { 422 const id = 'pie-interactive'; 423 const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month); 424 425 const activeIndex = React.useMemo( 426 () => desktopData.findIndex((item) => item.month === activeMonth), 427 [activeMonth], 428 ); 429 const months = React.useMemo(() => desktopData.map((item) => item.month), []); 430 431 return ( 432 <> 433 <ChartStyle id={id} config={chartConfig} /> 434 <div> 435 <Select value={activeMonth} onValueChange={setActiveMonth}> 436 <SelectTrigger 437 className="sm:ml-auto max-w-32 rounded-lg pl-2.5" 438 aria-label="Select a value" 439 > 440 <SelectValue placeholder="Select month" /> 441 </SelectTrigger> 442 <SelectContent align="end" className="rounded-xl"> 443 {months.map((key) => { 444 const config = chartConfig[key as keyof typeof chartConfig]; 445 446 if (!config) { 447 return null; 448 } 449 450 return ( 451 <SelectItem key={key} value={key} className="rounded-lg [&_span]:flex"> 452 <div className="flex items-center gap-2 text-xs"> 453 <span 454 className="flex h-3 w-3 shrink-0 rounded-xs" 455 style={{ 456 backgroundColor: \`var(--color-\${key})\`, 457 }} 458 /> 459 {config?.label} 460 </div> 461 </SelectItem> 462 ); 463 })} 464 </SelectContent> 465 </Select> 466 <ChartContainer id={id} config={chartConfig}> 467 <PieChart> 468 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 469 <Pie 470 data={desktopData} 471 dataKey="desktop" 472 nameKey="month" 473 innerRadius={60} 474 strokeWidth={5} 475 activeIndex={activeIndex} 476 activeShape={({ outerRadius = 0, ...props }: PieSectorDataItem) => ( 477 <g> 478 <Sector {...props} outerRadius={outerRadius + 10} /> 479 <Sector 480 {...props} 481 outerRadius={outerRadius + 25} 482 innerRadius={outerRadius + 12} 483 /> 484 </g> 485 )} 486 > 487 <Label 488 content={({ viewBox }) => { 489 if (viewBox && 'cx' in viewBox && 'cy' in viewBox) { 490 return ( 491 <text 492 x={viewBox.cx} 493 y={viewBox.cy} 494 textAnchor="middle" 495 dominantBaseline="middle" 496 > 497 <tspan 498 x={viewBox.cx} 499 y={viewBox.cy} 500 className="fill-foreground text-3xl font-bold" 501 > 502 {desktopData[activeIndex].desktop.toLocaleStr
502ing()} 503 </tspan> 504 <tspan 505 x={viewBox.cx} 506 y={(viewBox.cy || 0) + 24} 507 className="fill-link" 508 > 509 Visitors 510 </tspan> 511 </text> 512 ); 513 } 514 }} 515 /> 516 </Pie> 517 </PieChart> 518 </ChartContainer> 519 </div> 520 </> 521 ); 522} 523`,Se=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Interactive"}),r.jsx(Ae,{})]}),r.jsx(P,{children:Pe})]})}),ke=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],Re={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function De(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:Re,className:"[&_.recharts-pie-label-text]:fill-foreground",children:r.jsxs(k,{children:[r.jsx(T,{content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:ke,dataKey:"visitors",label:!0,nameKey:"browser"})]})})})}const Le=`import { Pie, PieChart } from 'recharts'; 524 525import { 526 ChartConfig, 527 ChartContainer, 528 ChartTooltip, 529 ChartTooltipContent, 530} from 'src/components/ui/chart'; 531 532export const description = 'A pie chart with a label'; 533 534const chartData = [ 535 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 536 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 537 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 538 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 539 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 540]; 541 542const chartConfig = { 543 visitors: { 544 label: 'Visitors', 545 }, 546 chrome: { 547 label: 'Chrome', 548 color: 'var(--chart-1)', 549 }, 550 safari: { 551 label: 'Safari', 552 color: 'var(--chart-2)', 553 }, 554 firefox: { 555 label: 'Firefox', 556 color: 'var(--chart-3)', 557 }, 558 edge: { 559 label: 'Edge', 560 color: 'var(--chart-4)', 561 }, 562 other: { 563 label: 'Other', 564 color: 'var(--chart-5)', 565 }, 566} satisfies ChartConfig; 567 568export default function ChartPieLabelCode() { 569 return ( 570 <> 571 <ChartContainer config={chartConfig} className="[&_.recharts-pie-label-text]:fill-foreground"> 572 <PieChart> 573 <ChartTooltip content={<ChartTooltipContent hideLabel />} /> 574 <Pie data={chartData} dataKey="visitors" label nameKey="browser" /> 575 </PieChart> 576 </ChartContainer> 577 </> 578 ); 579} 580`,Ne=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Label"}),r.jsx(De,{})]}),r.jsx(P,{children:Le})]})}),Te=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],ur={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function Ke(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:ur,className:"[&_.recharts-text]:fill-background",children:r.jsxs(k,{children:[r.jsx(T,{content:r.jsx(K,{nameKey:"visitors",hideLabel:!0})}),r.jsx(d,{data:Te,dataKey:"visitors",children:r.jsx(br,{dataKey:"browser",className:"fill-link",stroke:"none",fontSize:12,formatter:o=>ur[o]?.label})})]})})})}const Oe=`import { LabelList, Pie, PieChart } from 'recharts'; 581 582import { 583 ChartConfig, 584 ChartContainer, 585 ChartTooltip, 586 ChartTooltipContent, 587} from 'src/components/ui/chart'; 588 589export const description = 'A pie chart with a label list'; 590 591const chartData = [ 592 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 593 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 594 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 595 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 596 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 597]; 598 599const chartConfig = { 600 visitors: { 601 label: 'Visitors', 602 }, 603 chrome: { 604 label: 'Chrome', 605 color: 'var(--chart-1)', 606 }, 607 safari: { 608 label: 'Safari', 609 color: 'var(--chart-2)', 610 }, 611 firefox: { 612 label: 'Firefox', 613 color: 'var(--chart-3)', 614 }, 615 edge: { 616 label: 'Edge', 617 color: 'var(--chart-4)', 618 }, 619 other: { 620 label: 'Other', 621 color: 'var(--chart-5)', 622 }, 623} satisfies ChartConfig; 624 625export default function ChartPieLabelListCode() { 626 return ( 627 <> 628 <ChartContainer config={chartConfig} className="[&_.recharts-text]:fill-background"> 629 <PieChart> 630 <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} /> 631 <Pie data={chartData} dataKey="visitors"> 632 <LabelList 633 dataKey="browser" 634 className="fill-link" 635 stroke="none" 636 fontSize={12} 637 formatter={(value: keyof typeof chartConfig) => chartConfig[value]?.label} 638 /> 639 </Pie> 640 </PieChart> 641 </ChartContainer> 642 </> 643 ); 644} 645`,Ie=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Label List"}),r.jsx(Ke,{})]}),r.jsx(P,{children:Oe})]})}),Ee=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],Fe={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function _e(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:Fe,children:r.jsxs(k,{children:[r.jsx(d,{data:Ee,dataKey:"visitors"}),r.jsx(Er,{content:r.jsx(Fr,{nameKey:"browser"}),className:"-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"})]})})})}const Ve=`import { Pie, PieChart } from 'recharts'; 646 647import { 648 ChartConfig, 649 ChartContainer, 650 ChartLegend, 651 ChartLegendContent, 652} from 'src/components/ui/chart'; 653 654export const description = 'A pie chart with a legend'; 655 656const chartData = [ 657 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 658 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 659 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 660 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 661 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 662]; 663 664const chartConfig = { 665 visitors: { 666 label: 'Visitors', 667 }, 668 chrome: { 669 label: 'Chrome', 670 color: 'var(--chart-1)', 671 }, 672 safari: { 673 label: 'Safari', 674 color: 'var(--chart-2)', 675 }, 676 firefox: { 677 label: 'Firefox', 678 color: 'var(--chart-3)', 679 }, 680 edge: { 681 label: 'Edge', 682 color: 'var(--chart-4)', 683 }, 684 other: { 685 label: 'Other', 686 color: 'var(--chart-5)', 687 }, 688} satisfies ChartConfig; 689 690export default function ChartPieLegendCode() { 691 return ( 692 <> 693 <ChartContainer config={chartConfig}> 694 <PieChart> 695 <Pie data={chartData} dataKey="visitors" /> 696 <ChartLegend 697 content={<ChartLegendContent nameKey="browser" />} 698 className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center" 699 /> 700 </PieChart> 701 </ChartContainer> 702 </> 703 ); 704} 705`,Me=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Legend"}),r.jsx(_e,{})]}),r.jsx(P,{children:Ve})]})}),$e=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],Be={visitors:{label:"Visitors"},chrome:{label:"Chrome",color:"var(--chart-1)"},safari:{label:"Safari",color:"var(--chart-2)"},firefox:{label:"Firefox",color:"var(--chart-3)"},edge:{label:"Edge",color:"var(--chart-4)"},other:{label:"Other",color:"var(--chart-5)"}};function We(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:Be,children:r.jsxs(k,{children:[r.jsx(T,{cursor:!1,content:r.jsx(K,{hideLabel:!0})}),r.jsx(d,{data:$e,dataKey:"visitors",nameKey:"browser",stroke:"0"})]})})})}const He=`import { Pie, PieChart } from 'recharts'; 706 707import { 708 ChartConfig, 709 ChartContainer, 710 ChartTooltip, 711 ChartTooltipContent, 712} from 'src/components/ui/chart'; 713 714export const description = 'A pie chart with no separator'; 715 716const chartData = [ 717 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 718 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 719 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 720 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 721 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 722]; 723 724const chartConfig = { 725 visitors: { 726 label: 'Visitors', 727 }, 728 chrome: { 729 label: 'Chrome', 730 color: 'var(--chart-1)', 731 }, 732 safari: { 733 label: 'Safari', 734 color: 'var(--chart-2)', 735 }, 736 firefox: { 737 label: 'Firefox', 738 color: 'var(--chart-3)', 739 }, 740 edge: { 741 label: 'Edge', 742 color: 'var(--chart-4)', 743 }, 744 other: { 745 label: 'Other', 746 color: 'var(--chart-5)', 747 }, 748} satisfies ChartConfig; 749 750export default function ChartPieSeparatorNoneCode() { 751 return ( 752 <> 753 <ChartContainer config={chartConfig}> 754 <PieChart> 755 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 756 <Pie data={chartData} dataKey="visitors" nameKey="browser" stroke="0" /> 757 </PieChart> 758 </ChartContainer> 759 </> 760 ); 761} 762`,Je=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Separator None"}),r.jsx(We,{})]}),r.jsx(P,{children:He})]})}),qe=[{month:"january",desktop:186,fill:"var(--color-primary)"},{month:"february",desktop:305,fill:"var(--color-secondary)"},{month:"march",desktop:237,fill:"var(--color-warning)"},{month:"april",desktop:173,fill:"var(--color-error)"},{month:"may",desktop:209,fill:"var(--color-info)"}],ze=[{month:"january",mobile:80,fill:"var(--color-primary)"},{month:"february",mobile:200,fill:"var(--color-secondary)"},{month:"march",mobile:120,fill:"var(--color-warning)"},{month:"april",mobile:190,fill:"var(--color-error)"},{month:"may",mobile:130,fill:"var(--color-info)"}],pr={visitors:{label:"Visitors"},desktop:{label:"Desktop"},mobile:{label:"Mobile"},january:{label:"January",color:"var(--chart-1)"},february:{label:"February",color:"var(--chart-2)"},march:{label:"March",color:"var(--chart-3)"},april:{label:"April",color:"var(--chart-4)"},may:{label:"May",color:"var(--chart-5)"}};function Ge(){return r.jsx(r.Fragment,{children:r.jsx(S,{config:pr,children:r.jsxs(k,{children:[r.jsx(T,{content:r.jsx(K,{labelKey:"visitors",nameKey:"month",indicator:"line",labelFormatter:(o,e)=>pr[e?.[0].dataKey].label})}),r.jsx(d,{data:qe,dataKey:"desktop",outerRadius:60}),r.jsx(d,{data:ze,dataKey:"mobile",innerRadius:70,outerRadius:90})]})})})}const Ue=`import { Pie, PieChart } from 'recharts'; 763 764import { 765 ChartConfig, 766 ChartContainer, 767 ChartTooltip, 768 ChartTooltipContent, 769} from 'src/components/ui/chart'; 770 771export const description = 'A pie chart with stacked sections'; 772 773const desktopData = [ 774 { month: 'january', desktop: 186, fill: 'var(--color-primary)' }, 775 { month: 'february', desktop: 305, fill: 'var(--color-secondary)' }, 776 { month: 'march', desktop: 237, fill: 'var(--color-warning)' }, 777 { month: 'april', desktop: 173, fill: 'var(--color-error)' }, 778 { month: 'may', desktop: 209, fill: 'var(--color-info)' }, 779]; 780 781const mobileData = [ 782 { month: 'january', mobile: 80, fill: 'var(--color-primary)' }, 783 { month: 'february', mobile: 200, fill: 'var(--color-secondary)' }, 784 { month: 'march', mobile: 120, fill: 'var(--color-warning)' }, 785 { month: 'april', mobile: 190, fill: 'var(--color-error)' }, 786 { month: 'may', mobile: 130, fill: 'var(--color-info)' }, 787]; 788 789const chartConfig = { 790 visitors: { 791 label: 'Visitors', 792 }, 793 desktop: { 794 label: 'Desktop', 795 }, 796 mobile: { 797 label: 'Mobile', 798 }, 799 january: { 800 label: 'January', 801 color: 'var(--chart-1)', 802 }, 803 february: { 804 label: 'February', 805 color: 'var(--chart-2)', 806 }, 807 march: { 808 label: 'March', 809 color: 'var(--chart-3)', 810 }, 811 april: { 812 label: 'April', 813 color: 'var(--chart-4)', 814 }, 815 may: { 816 label: 'May', 817 color: 'var(--chart-5)', 818 }, 819} satisfies ChartConfig; 820 821export default function ChartPieStackedCode() { 822 return ( 823 <> 824 <ChartContainer config={chartConfig}> 825 <PieChart> 826 <ChartTooltip 827 content={ 828 <ChartTooltipContent 829 labelKey="visitors" 830 nameKey="month" 831 indicator="line" 832 labelFormatter={(_, payload) => { 833 return chartConfig[payload?.[0].dataKey as keyof typeof chartConfig].label; 834 }} 835 /> 836 } 837 /> 838 <Pie data={desktopData} dataKey="desktop" outerRadius={60} /> 839 <Pie data={mobileData} dataKey="mobile" innerRadius={70} outerRadius={90} /> 840 </PieChart> 841 </ChartContainer> 842 </> 843 ); 844} 845`,Qe=()=>r.jsx(A,{className:"p-0",children:r.jsxs("div",{children:[r.jsxs("div",{className:"p-6",children:[r.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Stacked"}),r.jsx(Ge,{})]}),r.jsx(P,{children:Ue})]})}),Ze=[{to:"/",title:"Home"},{to:"",title:"Shadcn Pie Chart"}];function Kt(){return r.jsxs(r.Fragment,{children:[r.jsx(qr,{title:"Shadcn Pie Chart",items:Ze}),r.jsxs("div",{className:"flex flex-col gap-6",children:[r.jsx("div",{children:r.jsx(ce,{})}),r.jsx("div",{children:r.jsx(Je,{})}),r.jsx("div",{children:r.jsx(Ne,{})}),r.jsx("div",{children:r.jsx(oe,{})}),r.jsx("div",{children:r.jsx(Ie,{})}),r.jsx("div",{children:r.jsx(Me,{})}),r.jsx("div",{children:r.jsx(me,{})}),r.jsx("div",{children:r.jsx(Ce,{})}),r.jsx("div",{children:r.jsx(we,{})}),r.jsx("div",{children:r.jsx(Qe,{})}),r.jsx("div",{children:r.jsx(Se,{})})]})]})}export{Kt as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.