@automattic/charts 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/dist/cjs/components/pie-chart/pie-chart.js +1 -1
- package/dist/cjs/components/pie-chart/pie-chart.js.map +1 -1
- package/dist/cjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js +1 -1
- package/dist/cjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/mjs/components/pie-chart/pie-chart.js +1 -1
- package/dist/mjs/components/pie-chart/pie-chart.js.map +1 -1
- package/dist/mjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js +1 -1
- package/dist/mjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js.map +1 -1
- package/package.json +1 -1
- package/src/components/pie-chart/pie-chart.tsx +6 -1
- package/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.6.0] - 2025-01-23
|
|
9
|
+
### Changed
|
|
10
|
+
- size props renamed to width for semi circle chart [#41270]
|
|
11
|
+
|
|
8
12
|
## [0.5.0] - 2025-01-22
|
|
9
13
|
### Changed
|
|
10
14
|
- Simplify rollup config and remove a cjs import [#41266]
|
|
@@ -71,6 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
71
75
|
- Fixed lints following ESLint rule changes for TS [#40584]
|
|
72
76
|
- Fixing a bug in Chart storybook data. [#40640]
|
|
73
77
|
|
|
78
|
+
[0.6.0]: https://github.com/Automattic/charts/compare/v0.5.0...v0.6.0
|
|
74
79
|
[0.5.0]: https://github.com/Automattic/charts/compare/v0.4.0...v0.5.0
|
|
75
80
|
[0.4.0]: https://github.com/Automattic/charts/compare/v0.3.0...v0.4.0
|
|
76
81
|
[0.3.0]: https://github.com/Automattic/charts/compare/v0.2.3...v0.3.0
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),a=require("@visx/group"),s=require("@visx/shape"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),a=require("@visx/group"),s=require("@visx/shape"),t=require("clsx");require("react");var r=require("../../hooks/use-chart-mouse-handler.js"),i=require("../../providers/theme/theme-provider.js"),l=require("../../providers/theme/themes.js"),o=require("../legend/base-legend.js"),n=require("../shared/with-responsive.js"),d=require("../tooltip/base-tooltip.js"),c=require("./pie-chart.module.scss.js");const u=({data:n,withTooltips:u=!1,className:h,showLegend:p,legendOrientation:m,size:v,thickness:g=1,padding:x=20,gapScale:j=0,cornerScale:f=0})=>{const q=i.useChartTheme(),{onMouseMove:M,onMouseLeave:b,tooltipOpen:w,tooltipData:N,tooltipLeft:T,tooltipTop:V}=r({withTooltips:u}),{isValid:A,message:B}=(e=>{if(!e.length)return{isValid:!1,message:"No data available"};if(e.some((e=>e.percentage<0||e.value<0)))return{isValid:!1,message:"Invalid data: Negative values are not allowed"};const a=e.reduce(((e,a)=>e+a.percentage),0);return Math.abs(a-100)>.01?{isValid:!1,message:"Invalid percentage total: Must equal 100"}:{isValid:!0,message:""}})(n);if(!A)return e.jsx("div",{className:t("pie-chart",c["pie-chart"],h),children:e.jsx("div",{className:c["error-message"],children:B})});const L=v,R=v,k=Math.min(L,R)/2,y=L/2,C=R/2,S=j*(2*Math.PI/n.length),I=k-x,P=I*(1-g),$=(I-P)/2,z=f?Math.min(f*I,$):0,O=n.map(((e,a)=>({...e,index:a}))),D={value:e=>e.value,fill:e=>e?.color||q.colors[e.index]},E=n.map(((e,a)=>({label:e.label,value:e.value.toString(),color:q.colors[a%q.colors.length]})));return e.jsxs("div",{className:t("pie-chart",c["pie-chart"],h),children:[e.jsx("svg",{viewBox:`0 0 ${v} ${v}`,preserveAspectRatio:"xMidYMid meet",width:v,height:v,children:e.jsx(a.Group,{top:C,left:y,children:e.jsx(s.Pie,{data:O,pieValue:D.value,outerRadius:I,innerRadius:P,padAngle:S,cornerRadius:z,children:a=>a.arcs.map(((s,t)=>{const[r,i]=a.path.centroid(s),o=s.endAngle-s.startAngle>=.25,n=e=>M(e,s.data),d={d:a.path(s)||"",fill:D.fill(s.data)};return u&&(d.onMouseMove=n,d.onMouseLeave=b),e.jsxs("g",{children:[e.jsx("path",{...d}),o&&e.jsx("text",{x:r,y:i,dy:".33em",fill:q.labelBackgroundColor||l.defaultTheme.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:s.data.label})]},`arc-${t}`)}))})})}),p&&e.jsx(o.BaseLegend,{items:E,orientation:m,className:c["pie-chart-legend"]}),u&&w&&N&&e.jsx(d.BaseTooltip,{data:N,top:V||0,left:T||0,style:{transform:"translate(-50%, -100%)"}})]})};u.displayName="PieChart";var h=n.withResponsive(u);module.exports=h;
|
|
2
2
|
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.js","sources":["/@automattic/charts/../../../../src/components/pie-chart/pie-chart.tsx"],"sourcesContent":[null],"names":["PieChart","data","withTooltips","className","showLegend","legendOrientation","size","thickness","padding","gapScale","cornerScale","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","useChartMouseHandler","isValid","message","length","some","item","percentage","value","totalPercentage","reduce","sum","Math","abs","validateData","_jsx","jsx","clsx","styles","children","width","height","radius","min","centerX","centerY","padAngle","PI","outerRadius","innerRadius","maxCornerRadius","cornerRadius","dataWithIndex","map","d","index","accessors","fill","color","colors","legendItems","label","toString","_jsxs","viewBox","preserveAspectRatio","Group","top","left","Pie","pieValue","pie","arcs","arc","centroidX","centroidY","path","centroid","hasSpaceForLabel","endAngle","startAngle","handleMouseMove","event","pathProps","jsxs","x","y","dy","labelBackgroundColor","defaultTheme","fontSize","textAnchor","pointerEvents","Legend","items","orientation","BaseTooltip","style","transform","displayName","withResponsive"],"mappings":"+bAyDA,MA2BMA,EAAW,EAChBC,OACAC,gBAAe,EACfC,YACAC,aACAC,oBACAC,OACAC,YAAY,EACZC,UAAU,GACVC,WAAW,EACXC,cAAc,MAEd,MAAMC,EAAgBC,EAAAA,iBAChBC,YAAEA,EAAWC,aAAEA,EAAYC,YAAEA,EAAWC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,GACzEC,EAAsB,CACrBjB,kBAGIkB,QAAEA,EAAOC,QAAEA,GA7CG,CAAEpB,IACtB,IAAOA,EAAKqB,OACX,MAAO,CAAEF,SAAS,EAAOC,QAAS,qBAKnC,GAD0BpB,EAAKsB,MAAMC,GAAQA,EAAKC,WAAa,GAAKD,EAAKE,MAAQ,IAEhF,MAAO,CAAEN,SAAS,EAAOC,QAAS,iDAInC,MAAMM,EAAkB1B,EAAK2B,QAAQ,CAAEC,EAAKL,IAAUK,EAAML,EAAKC,YAAY,GAC7E,OAAKK,KAAKC,IAAKJ,EAAkB,KAAQ,IAEjC,CAAEP,SAAS,EAAOC,QAAS,4CAG5B,CAAED,SAAS,EAAMC,QAAS,GAAI,EA2BRW,CAAc/B,GAE3C,IAAOmB,EACN,OACCa,EAAAC,IAAA,MAAA,CAAK/B,UAAYgC,EAAM,YAAaC,EAAQ,aAAejC,GAAWkC,SACrEJ,MAAK,MAAA,CAAA9B,UAAYiC,EAAQ,iBAAiBC,SAAKhB,MAKlD,MAAMiB,EAAQhC,EACRiC,EAASjC,EAGTkC,EAASV,KAAKW,IAAKH,EAAOC,GAAW,EAGrCG,EAAUJ,EAAQ,EAClBK,EAAUJ,EAAS,EAGnBK,EAAWnC,GAAe,EAAIqB,KAAKe,GAAO5C,EAAKqB,QAE/CwB,EAAcN,EAAShC,EACvBuC,EAAcD,GAAgB,EAAIvC,GAElCyC,GAAoBF,EAAcC,GAAgB,EAClDE,EAAevC,EAAcoB,KAAKW,IAAK/B,EAAcoC,EAAaE,GAAoB,EAGtFE,EAAgBjD,EAAKkD,KAAK,CAAEC,EAAGC,KAAa,IAC9CD,EACHC,YAGKC,EAAY,CACjB5B,MAAS0B,GAA4BA,EAAE1B,MAEvC6B,KAAQH,GACPA,GAAGI,OAAS7C,EAAc8C,OAAQL,EAAEC,QAIhCK,EAAczD,EAAKkD,KAAK,CAAE3B,EAAM6B,KAAa,CAClDM,MAAOnC,EAAKmC,MACZjC,MAAOF,EAAKE,MAAMkC,WAClBJ,MAAO7C,EAAc8C,OAAQJ,EAAQ1C,EAAc8C,OAAOnC,YAG3D,OACCuC,
|
|
1
|
+
{"version":3,"file":"pie-chart.js","sources":["/@automattic/charts/../../../../src/components/pie-chart/pie-chart.tsx"],"sourcesContent":[null],"names":["PieChart","data","withTooltips","className","showLegend","legendOrientation","size","thickness","padding","gapScale","cornerScale","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","useChartMouseHandler","isValid","message","length","some","item","percentage","value","totalPercentage","reduce","sum","Math","abs","validateData","_jsx","jsx","clsx","styles","children","width","height","radius","min","centerX","centerY","padAngle","PI","outerRadius","innerRadius","maxCornerRadius","cornerRadius","dataWithIndex","map","d","index","accessors","fill","color","colors","legendItems","label","toString","_jsxs","viewBox","preserveAspectRatio","Group","top","left","Pie","pieValue","pie","arcs","arc","centroidX","centroidY","path","centroid","hasSpaceForLabel","endAngle","startAngle","handleMouseMove","event","pathProps","jsxs","x","y","dy","labelBackgroundColor","defaultTheme","fontSize","textAnchor","pointerEvents","Legend","items","orientation","BaseTooltip","style","transform","displayName","withResponsive"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("@visx/event"),l=require("@visx/group"),t=require("@visx/shape"),a=require("@visx/text"),s=require("@visx/tooltip"),r=require("clsx"),o=require("react"),c=require("../../providers/theme/theme-provider.js"),n=require("../legend/base-legend.js"),p=require("../shared/with-responsive.js"),u=require("../tooltip/base-tooltip.js"),d=require("./pie-semi-circle-chart.module.scss.js");const h=({data:p,width:h,label:v,note:x,className:m,withTooltips:j=!1,clockwise:g=!0,thickness:q=.4,showLegend:b,legendOrientation:T})=>{const w=c.useChartTheme(),{tooltipOpen:f,tooltipLeft:y,tooltipTop:A,tooltipData:M,hideTooltip:P,showTooltip:C}=s.useTooltip(),N=h/2,k=h/2,D=h/2,L=D*(1-q+.03),I=p.map(((e,i)=>({...e,index:i}))),R=g?-Math.PI/2:Math.PI/2,B=g?Math.PI/2:-Math.PI/2,S={value:e=>e.value,sort:(e,i)=>i.value-e.value,fill:e=>e.color||w.colors[e.index%w.colors.length]},G=o.useCallback(((e,l)=>{const t=i.localPoint(e);t&&C({tooltipData:l.data,tooltipLeft:t.x,tooltipTop:t.y-10})}),[C]),O=o.useCallback((()=>{P()}),[P]),$=o.useCallback((e=>i=>{G(i,e)}),[G]),V=p.map(((e,i)=>({label:e.label,value:e.valueDisplay||e.value.toString(),color:S.fill({...e,index:i})})));return e.jsxs("div",{className:r("pie-semi-circle-chart",d["pie-semi-circle-chart"],m),children:[e.jsx("svg",{viewBox:`0 0 ${h} ${k}`,width:h,height:k,children:e.jsxs(l.Group,{top:N,left:N,children:[e.jsx(t.Pie,{data:I,pieValue:S.value,outerRadius:D,innerRadius:L,cornerRadius:3,padAngle:.03,startAngle:R,endAngle:B,pieSort:S.sort,children:i=>i.arcs.map((l=>e.jsx("g",{onMouseMove:$(l),onMouseLeave:O,children:e.jsx("path",{d:i.path(l)||"",fill:S.fill(l.data)})},l.data.label)))}),e.jsxs(l.Group,{children:[e.jsx(a.Text,{textAnchor:"middle",verticalAnchor:"start",y:-40,className:d.label,children:v}),e.jsx(a.Text,{textAnchor:"middle",verticalAnchor:"start",y:-20,className:d.note,children:x})]})]})}),j&&f&&M&&e.jsx(u.BaseTooltip,{data:{label:M.label,value:M.value,valueDisplay:M.valueDisplay},top:A||0,left:y||0}),b&&e.jsx(n.BaseLegend,{items:V,orientation:T,className:d["pie-semi-circle-chart-legend"]})]})};h.displayName="PieSemiCircleChart";var v=p.withResponsive(h);module.exports=v;
|
|
2
2
|
//# sourceMappingURL=pie-semi-circle-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-semi-circle-chart.js","sources":["/@automattic/charts/../../../../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx"],"sourcesContent":[null],"names":["PieSemiCircleChart","data","
|
|
1
|
+
{"version":3,"file":"pie-semi-circle-chart.js","sources":["/@automattic/charts/../../../../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx"],"sourcesContent":[null],"names":["PieSemiCircleChart","data","width","label","note","className","withTooltips","clockwise","thickness","showLegend","legendOrientation","providerTheme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","centerX","height","radius","innerRadius","dataWithIndex","map","d","index","startAngle","Math","PI","endAngle","accessors","value","sort","a","b","fill","color","colors","length","handleMouseMove","useCallback","event","arc","coords","localPoint","x","y","handleMouseLeave","handleArcMouseMove","legendItems","item","valueDisplay","toString","_jsxs","jsxs","clsx","styles","_jsx","jsx","viewBox","Group","top","left","children","Pie","pieValue","outerRadius","cornerRadius","padAngle","pieSort","pie","arcs","onMouseMove","onMouseLeave","path","Text","textAnchor","verticalAnchor","BaseTooltip","Legend","items","orientation","displayName","withResponsive"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -182,9 +182,9 @@ declare const _default$1: (props: Omit<PieChartProps, "width" | "height" | "size
|
|
|
182
182
|
|
|
183
183
|
interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]> {
|
|
184
184
|
/**
|
|
185
|
-
*
|
|
185
|
+
* Width of the chart in pixels; height would be half of this value calculated automatically.
|
|
186
186
|
*/
|
|
187
|
-
|
|
187
|
+
width?: number;
|
|
188
188
|
/**
|
|
189
189
|
* Thickness of the pie chart. A value between 0 and 1
|
|
190
190
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Group as t}from"@visx/group";import{Pie as o}from"@visx/shape";import r from"clsx";import"react";import i from"../../hooks/use-chart-mouse-handler.js";import{useChartTheme as s}from"../../providers/theme/theme-provider.js";import{defaultTheme as l}from"../../providers/theme/themes.js";import{BaseLegend as n}from"../legend/base-legend.js";import{withResponsive as d}from"../shared/with-responsive.js";import{BaseTooltip as p}from"../tooltip/base-tooltip.js";import m from"./pie-chart.module.scss.js";const c=({data:d,withTooltips:c=!1,className:h,showLegend:u,legendOrientation:g,size:v,thickness:f=1,padding:M=20,gapScale:x=0,cornerScale:b=0})=>{const j=s(),{onMouseMove:N,onMouseLeave:w,tooltipOpen:V,tooltipData:A,tooltipLeft:k,tooltipTop:y}=i({withTooltips:c}),{isValid:L,message:R}=(e=>{if(!e.length)return{isValid:!1,message:"No data available"};if(e.some((e=>e.percentage<0||e.value<0)))return{isValid:!1,message:"Invalid data: Negative values are not allowed"};const a=e.reduce(((e,a)=>e+a.percentage),0);return Math.abs(a-100)>.01?{isValid:!1,message:"Invalid percentage total: Must equal 100"}:{isValid:!0,message:""}})(d);if(!L)return e("div",{className:r("pie-chart",m["pie-chart"],h),children:e("div",{className:m["error-message"],children:R})});const S=v,B=v,C=Math.min(S,B)/2,I=S/2,T=B/2,$=x*(2*Math.PI/d.length),z=C-M,O=z*(1-f),P=(z-O)/2,q=b?Math.min(b*z,P):0,D=d.map(((e,a)=>({...e,index:a}))),E={value:e=>e.value,fill:e=>e?.color||j.colors[e.index]},Y=d.map(((e,a)=>({label:e.label,value:e.value.toString(),color:j.colors[a%j.colors.length]})));return a("div",{className:r("pie-chart",m["pie-chart"],h),children:[e("svg",{viewBox:`0 0 ${v} ${v}`,preserveAspectRatio:"xMidYMid meet",children:e(t,{top:T,left:I,children:e(o,{data:D,pieValue:E.value,outerRadius:z,innerRadius:O,padAngle:$,cornerRadius:q,children:t=>t.arcs.map(((o,r)=>{const[i,s]=t.path.centroid(o),n=o.endAngle-o.startAngle>=.25,d=e=>N(e,o.data),p={d:t.path(o)||"",fill:E.fill(o.data)};return c&&(p.onMouseMove=d,p.onMouseLeave=w),a("g",{children:[e("path",{...p}),n&&e("text",{x:i,y:s,dy:".33em",fill:j.labelBackgroundColor||l.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:o.data.label})]},`arc-${r}`)}))})})}),u&&e(n,{items:Y,orientation:g,className:m["pie-chart-legend"]}),c&&V&&A&&e(p,{data:A,top:y||0,left:k||0,style:{transform:"translate(-50%, -100%)"}})]})};c.displayName="PieChart";var h=d(c);export{h as default};
|
|
1
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Group as t}from"@visx/group";import{Pie as o}from"@visx/shape";import r from"clsx";import"react";import i from"../../hooks/use-chart-mouse-handler.js";import{useChartTheme as s}from"../../providers/theme/theme-provider.js";import{defaultTheme as l}from"../../providers/theme/themes.js";import{BaseLegend as n}from"../legend/base-legend.js";import{withResponsive as d}from"../shared/with-responsive.js";import{BaseTooltip as p}from"../tooltip/base-tooltip.js";import m from"./pie-chart.module.scss.js";const c=({data:d,withTooltips:c=!1,className:h,showLegend:u,legendOrientation:g,size:v,thickness:f=1,padding:M=20,gapScale:x=0,cornerScale:b=0})=>{const j=s(),{onMouseMove:N,onMouseLeave:w,tooltipOpen:V,tooltipData:A,tooltipLeft:k,tooltipTop:y}=i({withTooltips:c}),{isValid:L,message:R}=(e=>{if(!e.length)return{isValid:!1,message:"No data available"};if(e.some((e=>e.percentage<0||e.value<0)))return{isValid:!1,message:"Invalid data: Negative values are not allowed"};const a=e.reduce(((e,a)=>e+a.percentage),0);return Math.abs(a-100)>.01?{isValid:!1,message:"Invalid percentage total: Must equal 100"}:{isValid:!0,message:""}})(d);if(!L)return e("div",{className:r("pie-chart",m["pie-chart"],h),children:e("div",{className:m["error-message"],children:R})});const S=v,B=v,C=Math.min(S,B)/2,I=S/2,T=B/2,$=x*(2*Math.PI/d.length),z=C-M,O=z*(1-f),P=(z-O)/2,q=b?Math.min(b*z,P):0,D=d.map(((e,a)=>({...e,index:a}))),E={value:e=>e.value,fill:e=>e?.color||j.colors[e.index]},Y=d.map(((e,a)=>({label:e.label,value:e.value.toString(),color:j.colors[a%j.colors.length]})));return a("div",{className:r("pie-chart",m["pie-chart"],h),children:[e("svg",{viewBox:`0 0 ${v} ${v}`,preserveAspectRatio:"xMidYMid meet",width:v,height:v,children:e(t,{top:T,left:I,children:e(o,{data:D,pieValue:E.value,outerRadius:z,innerRadius:O,padAngle:$,cornerRadius:q,children:t=>t.arcs.map(((o,r)=>{const[i,s]=t.path.centroid(o),n=o.endAngle-o.startAngle>=.25,d=e=>N(e,o.data),p={d:t.path(o)||"",fill:E.fill(o.data)};return c&&(p.onMouseMove=d,p.onMouseLeave=w),a("g",{children:[e("path",{...p}),n&&e("text",{x:i,y:s,dy:".33em",fill:j.labelBackgroundColor||l.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:o.data.label})]},`arc-${r}`)}))})})}),u&&e(n,{items:Y,orientation:g,className:m["pie-chart-legend"]}),c&&V&&A&&e(p,{data:A,top:y||0,left:k||0,style:{transform:"translate(-50%, -100%)"}})]})};c.displayName="PieChart";var h=d(c);export{h as default};
|
|
2
2
|
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.js","sources":["../../../../src/components/pie-chart/pie-chart.tsx"],"sourcesContent":[null],"names":["PieChart","data","withTooltips","className","showLegend","legendOrientation","size","thickness","padding","gapScale","cornerScale","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","useChartMouseHandler","isValid","message","length","some","item","percentage","value","totalPercentage","reduce","sum","Math","abs","validateData","_jsx","clsx","styles","children","width","height","radius","min","centerX","centerY","padAngle","PI","outerRadius","innerRadius","maxCornerRadius","cornerRadius","dataWithIndex","map","d","index","accessors","fill","color","colors","legendItems","label","toString","_jsxs","viewBox","preserveAspectRatio","Group","top","left","Pie","pieValue","pie","arcs","arc","centroidX","centroidY","path","centroid","hasSpaceForLabel","endAngle","startAngle","handleMouseMove","event","pathProps","x","y","dy","labelBackgroundColor","defaultTheme","fontSize","textAnchor","pointerEvents","Legend","items","orientation","BaseTooltip","style","transform","displayName","pieChart","withResponsive"],"mappings":"8iBAyDA,MA2BMA,EAAW,EAChBC,OACAC,gBAAe,EACfC,YACAC,aACAC,oBACAC,OACAC,YAAY,EACZC,UAAU,GACVC,WAAW,EACXC,cAAc,MAEd,MAAMC,EAAgBC,KAChBC,YAAEA,EAAWC,aAAEA,EAAYC,YAAEA,EAAWC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,GACzEC,EAAsB,CACrBjB,kBAGIkB,QAAEA,EAAOC,QAAEA,GA7CG,CAAEpB,IACtB,IAAOA,EAAKqB,OACX,MAAO,CAAEF,SAAS,EAAOC,QAAS,qBAKnC,GAD0BpB,EAAKsB,MAAMC,GAAQA,EAAKC,WAAa,GAAKD,EAAKE,MAAQ,IAEhF,MAAO,CAAEN,SAAS,EAAOC,QAAS,iDAInC,MAAMM,EAAkB1B,EAAK2B,QAAQ,CAAEC,EAAKL,IAAUK,EAAML,EAAKC,YAAY,GAC7E,OAAKK,KAAKC,IAAKJ,EAAkB,KAAQ,IAEjC,CAAEP,SAAS,EAAOC,QAAS,4CAG5B,CAAED,SAAS,EAAMC,QAAS,GAAI,EA2BRW,CAAc/B,GAE3C,IAAOmB,EACN,OACCa,EAAA,MAAA,CAAK9B,UAAY+B,EAAM,YAAaC,EAAQ,aAAehC,GAAWiC,SACrEH,EAAK,MAAA,CAAA9B,UAAYgC,EAAQ,iBAAiBC,SAAKf,MAKlD,MAAMgB,EAAQ/B,EACRgC,EAAShC,EAGTiC,EAAST,KAAKU,IAAKH,EAAOC,GAAW,EAGrCG,EAAUJ,EAAQ,EAClBK,EAAUJ,EAAS,EAGnBK,EAAWlC,GAAe,EAAIqB,KAAKc,GAAO3C,EAAKqB,QAE/CuB,EAAcN,EAAS/B,EACvBsC,EAAcD,GAAgB,EAAItC,GAElCwC,GAAoBF,EAAcC,GAAgB,EAClDE,EAAetC,EAAcoB,KAAKU,IAAK9B,EAAcmC,EAAaE,GAAoB,EAGtFE,EAAgBhD,EAAKiD,KAAK,CAAEC,EAAGC,KAAa,IAC9CD,EACHC,YAGKC,EAAY,CACjB3B,MAASyB,GAA4BA,EAAEzB,MAEvC4B,KAAQH,GACPA,GAAGI,OAAS5C,EAAc6C,OAAQL,EAAEC,QAIhCK,EAAcxD,EAAKiD,KAAK,CAAE1B,EAAM4B,KAAa,CAClDM,MAAOlC,EAAKkC,MACZhC,MAAOF,EAAKE,MAAMiC,WAClBJ,MAAO5C,EAAc6C,OAAQJ,EAAQzC,EAAc6C,OAAOlC,YAG3D,OACCsC,
|
|
1
|
+
{"version":3,"file":"pie-chart.js","sources":["../../../../src/components/pie-chart/pie-chart.tsx"],"sourcesContent":[null],"names":["PieChart","data","withTooltips","className","showLegend","legendOrientation","size","thickness","padding","gapScale","cornerScale","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","useChartMouseHandler","isValid","message","length","some","item","percentage","value","totalPercentage","reduce","sum","Math","abs","validateData","_jsx","clsx","styles","children","width","height","radius","min","centerX","centerY","padAngle","PI","outerRadius","innerRadius","maxCornerRadius","cornerRadius","dataWithIndex","map","d","index","accessors","fill","color","colors","legendItems","label","toString","_jsxs","viewBox","preserveAspectRatio","Group","top","left","Pie","pieValue","pie","arcs","arc","centroidX","centroidY","path","centroid","hasSpaceForLabel","endAngle","startAngle","handleMouseMove","event","pathProps","x","y","dy","labelBackgroundColor","defaultTheme","fontSize","textAnchor","pointerEvents","Legend","items","orientation","BaseTooltip","style","transform","displayName","pieChart","withResponsive"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{localPoint as o}from"@visx/event";import{Group as i}from"@visx/group";import{Pie as l}from"@visx/shape";import{Text as a}from"@visx/text";import{useTooltip as r}from"@visx/tooltip";import s from"clsx";import{useCallback as p}from"react";import{useChartTheme as c}from"../../providers/theme/theme-provider.js";import{BaseLegend as m}from"../legend/base-legend.js";import{withResponsive as n}from"../shared/with-responsive.js";import{BaseTooltip as d}from"../tooltip/base-tooltip.js";import h from"./pie-semi-circle-chart.module.scss.js";const v=({data:n,
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{localPoint as o}from"@visx/event";import{Group as i}from"@visx/group";import{Pie as l}from"@visx/shape";import{Text as a}from"@visx/text";import{useTooltip as r}from"@visx/tooltip";import s from"clsx";import{useCallback as p}from"react";import{useChartTheme as c}from"../../providers/theme/theme-provider.js";import{BaseLegend as m}from"../legend/base-legend.js";import{withResponsive as n}from"../shared/with-responsive.js";import{BaseTooltip as d}from"../tooltip/base-tooltip.js";import h from"./pie-semi-circle-chart.module.scss.js";const v=({data:n,width:v,label:u,note:f,className:x,withTooltips:g=!1,clockwise:b=!0,thickness:w=.4,showLegend:y,legendOrientation:A})=>{const M=c(),{tooltipOpen:j,tooltipLeft:N,tooltipTop:D,tooltipData:P,hideTooltip:T,showTooltip:I}=r(),L=v/2,R=v/2,S=v/2,k=S*(1-w+.03),C=n.map(((e,t)=>({...e,index:t}))),O=b?-Math.PI/2:Math.PI/2,$=b?Math.PI/2:-Math.PI/2,B={value:e=>e.value,sort:(e,t)=>t.value-e.value,fill:e=>e.color||M.colors[e.index%M.colors.length]},V=p(((e,t)=>{const i=o(e);i&&I({tooltipData:t.data,tooltipLeft:i.x,tooltipTop:i.y-10})}),[I]),q=p((()=>{T()}),[T]),z=p((e=>t=>{V(t,e)}),[V]),E=n.map(((e,t)=>({label:e.label,value:e.valueDisplay||e.value.toString(),color:B.fill({...e,index:t})})));return e("div",{className:s("pie-semi-circle-chart",h["pie-semi-circle-chart"],x),children:[t("svg",{viewBox:`0 0 ${v} ${R}`,width:v,height:R,children:e(i,{top:L,left:L,children:[t(l,{data:C,pieValue:B.value,outerRadius:S,innerRadius:k,cornerRadius:3,padAngle:.03,startAngle:O,endAngle:$,pieSort:B.sort,children:e=>e.arcs.map((o=>t("g",{onMouseMove:z(o),onMouseLeave:q,children:t("path",{d:e.path(o)||"",fill:B.fill(o.data)})},o.data.label)))}),e(i,{children:[t(a,{textAnchor:"middle",verticalAnchor:"start",y:-40,className:h.label,children:u}),t(a,{textAnchor:"middle",verticalAnchor:"start",y:-20,className:h.note,children:f})]})]})}),g&&j&&P&&t(d,{data:{label:P.label,value:P.value,valueDisplay:P.valueDisplay},top:D||0,left:N||0}),y&&t(m,{items:E,orientation:A,className:h["pie-semi-circle-chart-legend"]})]})};v.displayName="PieSemiCircleChart";var u=n(v);export{u as default};
|
|
2
2
|
//# sourceMappingURL=pie-semi-circle-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-semi-circle-chart.js","sources":["../../../../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx"],"sourcesContent":[null],"names":["PieSemiCircleChart","data","
|
|
1
|
+
{"version":3,"file":"pie-semi-circle-chart.js","sources":["../../../../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx"],"sourcesContent":[null],"names":["PieSemiCircleChart","data","width","label","note","className","withTooltips","clockwise","thickness","showLegend","legendOrientation","providerTheme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","centerX","height","radius","innerRadius","dataWithIndex","map","d","index","startAngle","Math","PI","endAngle","accessors","value","sort","a","b","fill","color","colors","length","handleMouseMove","useCallback","event","arc","coords","localPoint","x","y","handleMouseLeave","handleArcMouseMove","legendItems","item","valueDisplay","toString","_jsxs","clsx","styles","_jsx","viewBox","Group","top","left","children","Pie","pieValue","outerRadius","cornerRadius","padAngle","pieSort","pie","arcs","onMouseMove","onMouseLeave","path","Text","textAnchor","verticalAnchor","BaseTooltip","Legend","items","orientation","displayName","pieSemiCircleChart","withResponsive"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -151,7 +151,12 @@ const PieChart = ( {
|
|
|
151
151
|
|
|
152
152
|
return (
|
|
153
153
|
<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
|
|
154
|
-
<svg
|
|
154
|
+
<svg
|
|
155
|
+
viewBox={ `0 0 ${ size } ${ size }` }
|
|
156
|
+
preserveAspectRatio="xMidYMid meet"
|
|
157
|
+
width={ size }
|
|
158
|
+
height={ size }
|
|
159
|
+
>
|
|
155
160
|
<Group top={ centerY } left={ centerX }>
|
|
156
161
|
<Pie< DataPointPercentage & { index: number } >
|
|
157
162
|
data={ dataWithIndex }
|
|
@@ -15,9 +15,9 @@ import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
|
|
|
15
15
|
|
|
16
16
|
interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* Width of the chart in pixels; height would be half of this value calculated automatically.
|
|
19
19
|
*/
|
|
20
|
-
|
|
20
|
+
width?: number;
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
23
|
* Thickness of the pie chart. A value between 0 and 1
|
|
@@ -43,7 +43,7 @@ type ArcData = PieArcDatum< DataPointPercentage >;
|
|
|
43
43
|
|
|
44
44
|
const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
|
|
45
45
|
data,
|
|
46
|
-
|
|
46
|
+
width,
|
|
47
47
|
label,
|
|
48
48
|
note,
|
|
49
49
|
className,
|
|
@@ -57,9 +57,9 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
|
|
|
57
57
|
const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
|
|
58
58
|
useTooltip< DataPointPercentage >();
|
|
59
59
|
|
|
60
|
-
const centerX =
|
|
61
|
-
const height =
|
|
62
|
-
const radius =
|
|
60
|
+
const centerX = width / 2;
|
|
61
|
+
const height = width / 2;
|
|
62
|
+
const radius = width / 2;
|
|
63
63
|
const pad = 0.03;
|
|
64
64
|
const innerRadius = radius * ( 1 - thickness + pad );
|
|
65
65
|
|
|
@@ -120,7 +120,7 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
|
|
|
120
120
|
<div
|
|
121
121
|
className={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }
|
|
122
122
|
>
|
|
123
|
-
<svg viewBox={ `0 0 ${
|
|
123
|
+
<svg viewBox={ `0 0 ${ width } ${ height }` } width={ width } height={ height }>
|
|
124
124
|
{ /* Main chart group that contains both the pie and text elements */ }
|
|
125
125
|
<Group top={ centerX } left={ centerX }>
|
|
126
126
|
{ /* Pie chart */ }
|