@automattic/charts 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] - 2025-01-31
+### Added
+- Automatic margin for axis labels [#41325]
+- Charts: adds tests and fixes to bar chart component [#41296]
+- Charts: adds tests for line chart component [#41174]
+- Line chart: draw x-axis and ticks [#41346]
+- Line chart: use natural curve [#41293]
+- Y axis non-zero start for line chart [#41291]
+
+### Changed
+- Introduce `children` PieChart property [#41289]
+- Only use area line for line chart [#41292]
+- Updated package dependencies. [#41286]
+
 ## [0.6.0] - 2025-01-23
 ### Changed
 - size props renamed to width for semi circle chart [#41270]
@@ -75,6 +89,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.7.0]: https://github.com/Automattic/charts/compare/v0.6.0...v0.7.0
 [0.6.0]: https://github.com/Automattic/charts/compare/v0.5.0...v0.6.0
 [0.5.0]: https://github.com/Automattic/charts/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/Automattic/charts/compare/v0.3.0...v0.4.0

package/dist/cjs/components/bar-chart/bar-chart.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@visx/axis"),i=require("@visx/event"),a=require("@visx/group"),r=require("@visx/scale"),l=require("@visx/shape"),o=require("@visx/tooltip"),s=require("clsx"),n=require("react"),d=require("../../providers/theme/theme-provider.js"),h=require("../grid-control/grid-control.js"),c=require("../legend/base-legend.js"),p=require("../shared/with-responsive.js"),u=require("../tooltip/base-tooltip.js"),x=require("./bar-chart.module.scss.js");const m=({data:p,margin:m={top:20,right:20,bottom:40,left:40},withTooltips:v=!1,showLegend:g=!1,legendOrientation:b="horizontal",className:j,gridVisibility:q="x",width:f,height:w=400})=>{const y=d.useChartTheme(),{tooltipOpen:L,tooltipLeft:T,tooltipTop:B,tooltipData:M,hideTooltip:N,showTooltip:C}=o.useTooltip(),S=n.useCallback(((e,t,a,r,l)=>{const o=i.localPoint(e);o&&C({tooltipData:{value:t,xLabel:a,yLabel:r,seriesIndex:l},tooltipLeft:o.x,tooltipTop:o.y-10})}),[C]),k=n.useCallback((()=>{N()}),[N]);if(!p?.length)return e.jsx("div",{className:s("bar-chart-empty",x["bat-chart-empty"]),children:"Empty..."});const A=m,D=f-A.left-A.right,G=w-A.top-A.bottom,O=p[0].data?.map((e=>e?.label||"")),V=r.scaleBand({range:[0,D],domain:O,padding:.2}),$=r.scaleBand({range:[0,V.bandwidth()],domain:p.map(((e,t)=>t.toString())),padding:.1}),z=r.scaleLinear({range:[G,0],domain:[0,Math.max(...p.map((e=>Math.max(...e.data.map((e=>e?.value||0))))))]}),E=p.map(((e,t)=>({label:e.label,value:"",color:y.colors[t%y.colors.length]})));return e.jsxs("div",{className:s("bar-chart",j,x["bar-chart"]),children:[e.jsx("svg",{width:f,height:w,children:e.jsxs(a.Group,{left:A.left,top:A.top,children:[e.jsx(h,{width:D,height:G,xScale:V,yScale:z,gridVisibility:q}),p.map(((t,i)=>e.jsx(a.Group,{children:t.data.map((a=>{const r=V(a?.label||"");if(void 0===r)return null;const o=$.bandwidth(),s=r+($(i.toString())??0);return e.jsx(l.Bar,{x:s,y:z(a.value),width:o,height:G-(z(a.value)??0),fill:y.colors[i%y.colors.length],onMouseMove:v?e=>S(e,a.value,a?.label||"",t.label,i):void 0,onMouseLeave:v?k:void 0},`bar-${i}-${a.label}`)}))},i))),e.jsx(t.AxisLeft,{scale:z}),e.jsx(t.AxisBottom,{scale:V,top:G})]})}),v&&L&&M&&e.jsx(u.BaseTooltip,{top:B||0,left:T||0,children:e.jsxs("div",{children:[e.jsx("div",{children:M.yLabel}),e.jsxs("div",{children:[M.xLabel,": ",M.value]})]})}),g&&e.jsx(c.BaseLegend,{items:E,orientation:b,className:x["bar-chart-legend"]})]})};m.displayName="BarChart";var v=p.withResponsive(m);module.exports=v;
+"use strict";var e=require("react/jsx-runtime"),a=require("@visx/axis"),t=require("@visx/event"),i=require("@visx/group"),r=require("@visx/scale"),l=require("@visx/shape"),o=require("@visx/tooltip"),s=require("clsx"),d=require("react"),n=require("../../providers/theme/theme-provider.js"),h=require("../grid-control/grid-control.js"),c=require("../legend/base-legend.js"),p=require("../shared/with-responsive.js"),u=require("../tooltip/base-tooltip.js"),v=require("./bar-chart.module.scss.js");const x=({data:p,margin:x={top:20,right:20,bottom:40,left:40},withTooltips:m=!1,showLegend:b=!1,legendOrientation:g="horizontal",className:j,gridVisibility:q="x",width:f,height:w=400})=>{const L=n.useChartTheme(),{tooltipOpen:N,tooltipLeft:y,tooltipTop:T,tooltipData:B,hideTooltip:M,showTooltip:S}=o.useTooltip(),C=d.useCallback(((e,a,i,r,l)=>{const o=t.localPoint(e);o&&S({tooltipData:{value:a,xLabel:i,yLabel:r,seriesIndex:l},tooltipLeft:o.x,tooltipTop:o.y-10})}),[S]);if(!p?.length)return e.jsx("div",{className:s(v["bar-chart-empty"]),children:"No data available"});if(p.some((e=>e.data.some((e=>null===e.value||void 0===e.value||isNaN(e.value)||!e.label||e.date&&isNaN(e.date.getTime()))))))return e.jsx("div",{className:s(v["bar-chart-error"]),children:"Invalid data"});const A=x,D=f-A.left-A.right,G=w-A.top-A.bottom,I=p[0].data?.map((e=>e?.label||"")),O=r.scaleBand({range:[0,D],domain:I,padding:.2}),V=r.scaleBand({range:[0,O.bandwidth()],domain:p.map(((e,a)=>a.toString())),padding:.1}),$=r.scaleLinear({range:[G,0],domain:[0,Math.max(...p.map((e=>Math.max(...e.data.map((e=>e?.value||0))))))]}),_=p.map(((e,a)=>({label:e.label,value:"",color:L.colors[a%L.colors.length]})));return e.jsxs("div",{className:s("bar-chart",v["bar-chart"],j),"data-testid":"bar-chart",role:"img","aria-label":"bar chart",children:[e.jsx("svg",{width:f,height:w,children:e.jsxs(i.Group,{left:A.left,top:A.top,children:[e.jsx(h,{width:D,height:G,xScale:O,yScale:$,gridVisibility:q}),p.map(((a,t)=>e.jsx(i.Group,{children:a.data.map((i=>{const r=O(i?.label||"");if(void 0===r)return null;const o=V.bandwidth(),s=r+(V(t.toString())??0);return e.jsx(l.Bar,{x:s,y:$(i.value),width:o,height:G-($(i.value)??0),fill:L.colors[t%L.colors.length],onMouseMove:m?e=>C(e,i.value,i?.label||"",a.label,t):void 0,onMouseLeave:m?M:void 0},`bar-${t}-${i.label}`)}))},t))),e.jsx(a.AxisLeft,{scale:$}),e.jsx(a.AxisBottom,{scale:O,top:G})]})}),m&&N&&B&&e.jsx(u.BaseTooltip,{top:T||0,left:y||0,children:e.jsxs("div",{children:[e.jsx("div",{children:B.yLabel}),e.jsxs("div",{children:[B.xLabel,": ",B.value]})]})}),b&&e.jsx(c.BaseLegend,{items:_,orientation:g,className:v["bar-chart__legend"]})]})};x.displayName="BarChart";var m=p.withResponsive(x);module.exports=m;
 //# sourceMappingURL=bar-chart.js.map

package/dist/cjs/components/bar-chart/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","sources":["/@automattic/charts/../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["BarChart","data","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","className","gridVisibility","width","height","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","handleMouseMove","useCallback","event","value","xLabel","yLabel","seriesIndex","coords","localPoint","x","y","handleMouseLeave","length","_jsx","clsx","styles","margins","xMax","yMax","labels","map","d","label","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","series","legendItems","group","index","color","colors","_jsxs","jsxs","children","Group","GridControl","jsx","xPos","undefined","barWidth","barX","Bar","fill","onMouseMove","onMouseLeave","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","BaseLegend","items","orientation","displayName","withResponsive"],"mappings":"8eAyBA,MAAMA,EAAgC,EACrCC,OACAC,SAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACjDC,gBAAe,EACfC,cAAa,EACbC,oBAAoB,aACpBC,YACAC,iBAAiB,IACjBC,QACAC,SAAS,QAET,MAAMC,EAAQC,EAAAA,iBACRC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,EAAUC,YAAEA,EAAWC,YAAEA,EAAWC,YAAEA,GACvEC,EAAAA,aAEKC,EAAkBC,EAAAA,aACvB,CACCC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAASC,aAAYN,GACpBK,GAEPT,EAAa,CACZF,YAAa,CAAEO,QAAOC,SAAQC,SAAQC,eACtCZ,YAAaa,EAAOE,EACpBd,WAAYY,EAAOG,EAAI,IACrB,GAEJ,CAAEZ,IAGGa,EAAmBV,EAAAA,aAAa,KACrCJ,GAAa,GACX,CAAEA,IAEL,IAAOnB,GAAMkC,OACZ,OAAOC,MAAK,MAAA,CAAA1B,UAAY2B,EAAM,kBAAmBC,EAAQ,0CAG1D,MAAMC,EAAUrC,EACVsC,EAAO5B,EAAQ2B,EAAQjC,KAAOiC,EAAQnC,MACtCqC,EAAO5B,EAAS0B,EAAQpC,IAAMoC,EAAQlC,OAGtCqC,EAASzC,EAAM,GAAIA,MAAM0C,KAAKC,GAAKA,GAAGC,OAAS,KAG/CC,EAASC,EAAAA,UAAqB,CACnCC,MAAO,CAAE,EAAGR,GACZS,OAAQP,EACRQ,QAAS,KAGJC,EAAaJ,EAAAA,UAAW,CAC7BC,MAAO,CAAE,EAAGF,EAAOM,aACnBH,OAAQhD,EAAK0C,KAAK,CAAEU,EAAGC,IAAOA,EAAEC,aAChCL,QAAS,KAGJM,EAASC,EAAAA,YAAuB,CACrCT,MAAO,CAAEP,EAAM,GACfQ,OAAQ,CACP,EACAS,KAAKC,OAAQ1D,EAAK0C,KAAKiB,GAAUF,KAAKC,OAAQC,EAAO3D,KAAK0C,KAAKC,GAAKA,GAAGlB,OAAS,WAK5EmC,EAAc5D,EAAK0C,KAAK,CAAEmB,EAAOC,KAAa,CACnDlB,MAAOiB,EAAMjB,MACbnB,MAAO,GACPsC,MAAOlD,EAAMmD,OAAQF,EAAQjD,EAAMmD,OAAO9B,YAG3C,OACC+B,EAAKC,KAAA,MAAA,CAAAzD,UAAY2B,EAAM,YAAa3B,EAAW4B,EAAQ,cACtD8B,SAAA,CAAAhC,EAAAA,IAAA,MAAA,CAAKxB,MAAQA,EAAQC,OAASA,EAAMuD,SACnCF,OAACG,QAAK,CAAC/D,KAAOiC,EAAQjC,KAAOH,IAAMoC,EAAQpC,IAAGiE,SAAA,CAC7ChC,EAAAA,IAACkC,EAAW,CACX1D,MAAQ4B,EACR3B,OAAS4B,EACTK,OAASA,EACTU,OAASA,EACT7C,eAAiBA,IAEhBV,EAAK0C,KAAK,CAAEiB,EAAQ/B,IACrBO,EAAAmC,IAACF,QACE,CAAAD,SAAAR,EAAO3D,KAAK0C,KAAKC,IAClB,MAAM4B,EAAO1B,EAAQF,GAAGC,OAAS,IACjC,QAAc4B,IAATD,EAAqB,OAAO,KAEjC,MAAME,EAAWvB,EAAWC,YACtBuB,EAAOH,GAASrB,EAAYtB,EAAY0B,aAAgB,GAK9D,OACCnB,EAACmC,IAAAK,EAAGA,KAEH5C,EAAI2C,EACJ1C,EAAIuB,EAAQZ,EAAElB,OACdd,MAAQ8D,EACR7D,OAAS4B,GAASe,EAAQZ,EAAElB,QAAW,GACvCmD,KAAO/D,EAAMmD,OAAQpC,EAAcf,EAAMmD,OAAO9B,QAChD2C,YAAcvE,EAXakB,GAC5BF,EAAiBE,EAAOmB,EAAElB,MAAOkB,GAAGC,OAAS,GAAIe,EAAOf,MAAOhB,QAUZ4C,EAClDM,aAAexE,EAAe2B,OAAmBuC,GAP3C,OAAQ5C,KAAiBe,EAAEC,QASjC,KAtBShB,KA0BdO,MAAC4C,EAAQA,SAAA,CAACC,MAAQzB,IAClBpB,EAAAmC,IAACW,aAAW,CAAAD,MAAQnC,EAAS3C,IAAMsC,SAInClC,GAAgBS,GAAeG,GAChCiB,EAAAA,IAAC+C,EAAAA,YAAY,CAAAhF,IAAMe,GAAc,EAAIZ,KAAOW,GAAe,WAC1DiD,EACCC,KAAA,MAAA,CAAAC,SAAA,CAAAhC,EAAAA,IAAA,MAAA,CAAAgC,SAAOjD,EAAYS,SACnBsC,EAAAC,KAAA,MAAA,CAAAC,SAAA,CACGjD,EAAYQ,YAAYR,EAAYO,cAMxClB,GACD4B,EAAAmC,IAACa,EAAMC,WACN,CAAAC,MAAQzB,EACR0B,YAAc9E,EACdC,UAAY4B,EAAQ,wBAItB,EAGHtC,EAASwF,YAAc,WACvB,IAAeC,EAAAA,EAAAA,eAAiCzF"}
+{"version":3,"file":"bar-chart.js","sources":["/@automattic/charts/../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["BarChart","data","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","className","gridVisibility","width","height","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","handleMouseMove","useCallback","event","value","xLabel","yLabel","seriesIndex","coords","localPoint","x","y","length","_jsx","clsx","styles","children","some","series","d","undefined","isNaN","label","date","getTime","margins","xMax","yMax","labels","map","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","legendItems","group","index","color","colors","_jsxs","role","jsxs","Group","GridControl","xPos","barWidth","barX","jsx","Bar","fill","onMouseMove","onMouseLeave","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","BaseLegend","items","orientation","displayName","withResponsive"],"mappings":"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"}

package/dist/cjs/components/line-chart/line-chart.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@visx/gradient"),r=require("@visx/xychart"),a=require("clsx");require("react");var i=require("../../providers/theme/theme-provider.js"),s=require("../legend/base-legend.js"),o=require("../shared/with-responsive.js"),l=require("./line-chart.module.scss.js");const n=({tooltipData:t})=>{const r=t?.nearestDatum?.datum;if(!r)return null;const a=Object.entries(t?.datumByKey||{}).map((([e,{datum:t}])=>({key:e,value:t.value}))).sort(((e,t)=>t.value-e.value));return e.jsxs("div",{className:l["line-chart__tooltip"],children:[e.jsx("div",{className:l["line-chart__tooltip-date"],children:r.date.toLocaleDateString()}),a.map((t=>e.jsxs("div",{className:l["line-chart__tooltip-row"],children:[e.jsxs("span",{className:l["line-chart__tooltip-label"],children:[t.key,":"]}),e.jsx("span",{className:l["line-chart__tooltip-value"],children:t.value})]},t.key)))]})},c=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var d=o.withResponsive((({data:o,width:d,height:h,margin:m={top:20,right:20,bottom:40,left:40},className:u,withTooltips:p=!0,showLegend:g=!1,legendOrientation:x="horizontal",withGradientFill:j=!1,options:v={}})=>{const y=i.useChartTheme();if(!o?.length)return e.jsx("div",{className:a("line-chart-empty",l["line-chart-empty"]),children:"Empty..."});const k=o.map(((e,t)=>({label:e.label,value:"",color:y.colors[t%y.colors.length]}))),b={xAccessor:e=>e.date,yAccessor:e=>e.value},T=r.buildChartTheme({backgroundColor:y.backgroundColor,colors:y.colors,gridStyles:y.gridStyles,tickLength:y?.tickLength||0,gridColor:y?.gridColor||"",gridColorDark:y?.gridColorDark||""});return e.jsxs("div",{className:a("line-chart",l["line-chart"],u),children:[e.jsxs(r.XYChart,{theme:T,width:d,height:h,margin:m,xScale:{type:"time"},yScale:{type:"linear",nice:!0},children:[e.jsx(r.AnimatedGrid,{columns:!1,numTicks:4}),e.jsx(r.AnimatedAxis,{orientation:"bottom",numTicks:5,tickFormat:c,...v?.axis?.x}),e.jsx(r.AnimatedAxis,{orientation:"left",numTicks:4,...v?.axis?.y}),o.map(((a,i)=>{const s=a.options?.stroke??T.colors[i%T.colors.length];return e.jsxs(e.Fragment,{children:[e.jsx(t.LinearGradient,{id:`area-gradient-${i+1}`,from:s,to:"white",toOpacity:.1,...a.options?.gradient}),e.jsx(r.AnimatedLineSeries,{dataKey:a?.label,data:a.data,...b,stroke:s,strokeWidth:2},a?.label),j&&e.jsx(r.AnimatedAreaSeries,{dataKey:a?.label,data:a.data,...b,stroke:s,strokeWidth:0,fill:`url(#area-gradient-${i+1})`,renderLine:!1},a?.label)]})})),p&&e.jsx(r.Tooltip,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:n})]}),g&&e.jsx(s.BaseLegend,{items:k,orientation:x,className:l["line-chart-legend"]})]})}));module.exports=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("@visx/curve"),a=require("@visx/gradient"),i=require("@visx/xychart"),r=require("clsx"),s=require("react"),l=require("../../providers/theme/theme-provider.js"),o=require("../legend/base-legend.js"),n=require("../shared/with-responsive.js"),c=require("./line-chart.module.scss.js");const d=({tooltipData:t})=>{const a=t?.nearestDatum?.datum;if(!a)return null;const i=Object.entries(t?.datumByKey||{}).map((([e,{datum:t}])=>({key:e,value:t.value}))).sort(((e,t)=>t.value-e.value));return e.jsxs("div",{className:c["line-chart__tooltip"],children:[e.jsx("div",{className:c["line-chart__tooltip-date"],children:a.date.toLocaleDateString()}),i.map((t=>e.jsxs("div",{className:c["line-chart__tooltip-row"],children:[e.jsxs("span",{className:c["line-chart__tooltip-label"],children:[t.key,":"]}),e.jsx("span",{className:c["line-chart__tooltip-value"],children:t.value})]},t.key)))]})},h=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var u=n.withResponsive((({data:n,width:u,height:m,className:p,margin:x,withTooltips:v=!0,showLegend:g=!1,legendOrientation:j="horizontal",withGradientFill:y=!1,options:N={}})=>{const b=l.useChartTheme(),T=s.useMemo((()=>{const e=n?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({...b,colors:[...e,...b.colors]})}),[b,n]);x=s.useMemo((()=>{let e={top:0,right:0,bottom:40,left:40};return"right"===N.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===N.axis?.x?.orientation&&(e={...e,top:40,bottom:0}),{...e,...x}}),[x,N]);const w=(e=>e?.length?e.some((e=>e.data.some((e=>isNaN(e.value)||null===e.value||void 0===e.value||isNaN(e.date.getTime())))))?"Invalid data":null:"No data available")(n);if(w)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:w});const q=n.map(((e,t)=>({label:e.label,value:"",color:b.colors[t%b.colors.length]}))),_={xAccessor:e=>e.date,yAccessor:e=>e.value};return e.jsxs("div",{className:r("line-chart",c["line-chart"],p),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[e.jsxs(i.XYChart,{theme:T,width:u,height:m,margin:x,xScale:{type:"time",...N?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...N?.yScale},children:[e.jsx(i.AnimatedGrid,{columns:!1,numTicks:4}),e.jsx(i.AnimatedAxis,{orientation:"bottom",numTicks:5,tickFormat:h,...N?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...N?.axis?.y}),n.map(((r,s)=>{const l=r.options?.stroke??T.colors[s%T.colors.length];return e.jsxs("g",{children:[y&&e.jsx(a.LinearGradient,{id:`area-gradient-${s+1}`,from:l,to:"white",toOpacity:.1,...r.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:r?.label,data:r.data,..._,fill:y?`url(#area-gradient-${s+1})`:void 0,renderLine:!0,curve:t.curveNatural},r?.label)]},r?.label||s)})),v&&e.jsx(i.Tooltip,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:d})]}),g&&e.jsx(o.BaseLegend,{items:q,orientation:j,className:c["line-chart-legend"]})]})}));module.exports=u;
 //# sourceMappingURL=line-chart.js.map

package/dist/cjs/components/line-chart/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","sources":["/@automattic/charts/../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["renderTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","Date","undefined","month","day","withResponsive","data","width","height","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","withGradientFill","options","providerTheme","useChartTheme","length","clsx","legendItems","group","index","label","color","colors","accessors","xAccessor","d","yAccessor","theme","buildChartTheme","backgroundColor","gridStyles","tickLength","gridColor","gridColorDark","XYChart","xScale","type","yScale","nice","jsx","AnimatedGrid","columns","numTicks","AnimatedAxis","orientation","tickFormat","axis","x","y","seriesData","stroke","_Fragment","LinearGradient","id","from","to","toOpacity","gradient","AnimatedLineSeries","dataKey","strokeWidth","AnimatedAreaSeries","fill","renderLine","Tooltip","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"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"}
+{"version":3,"file":"line-chart.js","sources":["/@automattic/charts/../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["renderTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","Date","undefined","month","day","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","options","providerTheme","useChartTheme","theme","useMemo","seriesColors","series","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","top","right","bottom","left","axis","y","orientation","x","error","length","some","isNaN","getTime","validateData","clsx","legendItems","group","index","label","color","accessors","xAccessor","d","yAccessor","role","XYChart","xScale","type","yScale","nice","zero","AnimatedGrid","columns","numTicks","jsx","AnimatedAxis","tickFormat","seriesData","LinearGradient","id","from","to","toOpacity","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveNatural","Tooltip","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"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"}

package/dist/cjs/components/pie-chart/pie-chart.js

@@ -1,2 +1,2 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),a=require("@visx/group"),s=require("@visx/shape"),r=require("clsx");require("react");var t=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,children:q=null})=>{const M=i.useChartTheme(),{onMouseMove:b,onMouseLeave:w,tooltipOpen:N,tooltipData:T,tooltipLeft:V,tooltipTop:A}=t({withTooltips:u}),{isValid:B,message:L}=(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(!B)return e.jsx("div",{className:r("pie-chart",c["pie-chart"],h),children:e.jsx("div",{className:c["error-message"],children:L})});const R=v,k=v,y=Math.min(R,k)/2,C=R/2,S=k/2,I=j*(2*Math.PI/n.length),P=y-x,$=P*(1-g),z=(P-$)/2,O=f?Math.min(f*P,z):0,D=n.map(((e,a)=>({...e,index:a}))),E={value:e=>e.value,fill:e=>e?.color||M.colors[e.index]},G=n.map(((e,a)=>({label:e.label,value:e.value.toString(),color:M.colors[a%M.colors.length]})));return e.jsxs("div",{className:r("pie-chart",c["pie-chart"],h),children:[e.jsx("svg",{viewBox:`0 0 ${v} ${v}`,preserveAspectRatio:"xMidYMid meet",width:v,height:v,children:e.jsxs(a.Group,{top:S,left:C,children:[e.jsx(s.Pie,{data:D,pieValue:E.value,outerRadius:P,innerRadius:$,padAngle:I,cornerRadius:O,children:a=>a.arcs.map(((s,r)=>{const[t,i]=a.path.centroid(s),o=s.endAngle-s.startAngle>=.25,n=e=>b(e,s.data),d={d:a.path(s)||"",fill:E.fill(s.data)};return u&&(d.onMouseMove=n,d.onMouseLeave=w),e.jsxs("g",{children:[e.jsx("path",{...d}),o&&e.jsx("text",{x:t,y:i,dy:".33em",fill:M.labelBackgroundColor||l.defaultTheme.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:s.data.label})]},`arc-${r}`)}))}),q]})}),p&&e.jsx(o.BaseLegend,{items:G,orientation:m,className:c["pie-chart-legend"]}),u&&N&&T&&e.jsx(d.BaseTooltip,{data:T,top:A||0,left:V||0,style:{transform:"translate(-50%, -100%)"}})]})};u.displayName="PieChart";var h=n.withResponsive(u);module.exports=h;
 //# sourceMappingURL=pie-chart.js.map

package/dist/cjs/components/pie-chart/pie-chart.js.map

@@ -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,OAAK,MAAA,CAAA1D,UAAYgC,EAAM,YAAaC,EAAQ,aAAejC,aAC1D8B,EACCC,IAAA,MAAA,CAAA4B,QAAU,OAAQxD,KAAUA,IAC5ByD,oBAAoB,gBACpBzB,MAAQhC,EACRiC,OAASjC,WAET2B,MAAC+B,EAAAA,MAAM,CAAAC,IAAMtB,EAAUuB,KAAOxB,EAC7BL,SAAAJ,EAAAC,IAACiC,MAAG,CACHlE,KAAOiD,EACPkB,SAAWd,EAAU5B,MACrBoB,YAAcA,EACdC,YAAcA,EACdH,SAAWA,EACXK,aAAeA,EAEbZ,SAAAgC,GACMA,EAAIC,KAAKnB,KAAK,CAAEoB,EAAKlB,KAC3B,MAAQmB,EAAWC,GAAcJ,EAAIK,KAAKC,SAAUJ,GAC9CK,EAAmBL,EAAIM,SAAWN,EAAIO,YAAc,IACpDC,EAAoBC,GACzBnE,EAAamE,EAAOT,EAAItE,MAEnBgF,EAAwC,CAC7C7B,EAAGiB,EAAIK,KAAMH,IAAS,GACtBhB,KAAMD,EAAUC,KAAMgB,EAAItE,OAQ3B,OALKC,IACJ+E,EAAUpE,YAAckE,EACxBE,EAAUnE,aAAeA,GAIzB+C,EACCqB,KAAA,IAAA,CAAA7C,SAAA,CAAAJ,EAAAA,IAAA,OAAA,IAAWgD,IACTL,GACD3C,MACC,OAAA,CAAAkD,EAAIX,EACJY,EAAIX,EACJY,GAAG,QACH9B,KACC5C,EAAc2E,sBAAwBC,EAAAA,aAAaD,qBAEpDE,SAAW,GACXC,WAAW,SACXC,cAAc,OAEZrD,SAAAkC,EAAItE,KAAK0D,UAdL,OAAQN,IAkBhB,UAOLjD,GACD6B,EAAAA,IAAC0D,EAAAA,WAAM,CACNC,MAAQlC,EACRmC,YAAcxF,EACdF,UAAYiC,EAAQ,sBAIpBlC,GAAgBa,GAAeC,GAChCiB,MAAC6D,EAAWA,YAAA,CACX7F,KAAOe,EACPiD,IAAM/C,GAAc,EACpBgD,KAAOjD,GAAe,EACtB8E,MAAQ,CACPC,UAAW,8BAKd,EAGHhG,EAASiG,YAAc,WACvB,IAAeC,EAAAA,EAAAA,eAAiClG"}
+{"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","children","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","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","BaseLegend","items","orientation","BaseTooltip","style","transform","displayName","withResponsive"],"mappings":"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"}

package/dist/cjs/providers/theme/themes.js

@@ -1,2 +1,2 @@
-"use strict";exports.defaultTheme={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#787C82",strokeWidth:1},tickLength:0,gridColor:"",gridColorDark:""};
+"use strict";exports.defaultTheme={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#DCDCDE",strokeWidth:1},tickLength:4,gridColor:"",gridColorDark:"",xTickLineStyles:{stroke:"black"},xAxisLineStyles:{stroke:"#DCDCDE",strokeWidth:1}};
 //# sourceMappingURL=themes.js.map

package/dist/cjs/providers/theme/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["/@automattic/charts/../../../../src/providers/theme/themes.ts"],"sourcesContent":[null],"names":["backgroundColor","labelBackgroundColor","colors","gridStyles","stroke","strokeWidth","tickLength","gridColor","gridColorDark"],"mappings":"kCAKiC,CAChCA,gBAAiB,UACjBC,qBAAsB,UACtBC,OAAQ,CAAE,UAAW,UAAW,UAAW,UAAW,WACtDC,WAAY,CACXC,OAAQ,UACRC,YAAa,GAEdC,WAAY,EACZC,UAAW,GACXC,cAAe"}
+{"version":3,"file":"themes.js","sources":["/@automattic/charts/../../../../src/providers/theme/themes.ts"],"sourcesContent":[null],"names":["backgroundColor","labelBackgroundColor","colors","gridStyles","stroke","strokeWidth","tickLength","gridColor","gridColorDark","xTickLineStyles","xAxisLineStyles"],"mappings":"kCAKiC,CAChCA,gBAAiB,UACjBC,qBAAsB,UACtBC,OAAQ,CAAE,UAAW,UAAW,UAAW,UAAW,WACtDC,WAAY,CACXC,OAAQ,UACRC,YAAa,GAEdC,WAAY,EACZC,UAAW,GACXC,cAAe,GACfC,gBAAiB,CAAEL,OAAQ,SAC3BM,gBAAiB,CAAEN,OAAQ,UAAWC,YAAa"}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Orientation } from '@visx/axis';
+import { ScaleType, scaleOrdinal } from '@visx/scale';
+import { LineStyles } from '@visx/xychart';
 import { CSSProperties, ComponentType, ReactNode, FC } from 'react';
-import { scaleOrdinal } from '@visx/scale';
 
 type ValueOf<T> = T[keyof T];
 declare type OrientationType = ValueOf<typeof Orientation>;
@@ -11,8 +12,8 @@ type DataPoint = {
 };
 type DataPointDate = {
     date: Date;
+    value: number | null;
     label?: string;
-    value: number;
 };
 type SeriesData = {
     group?: string;
@@ -67,6 +68,10 @@ type ChartTheme = {
     gridColor: string;
     /** Color of the grid lines in dark mode */
     gridColorDark: string;
+    /** Styles for x-axis tick lines */
+    xTickLineStyles?: LineStyles;
+    /** Styles for x-axis line */
+    xAxisLineStyles?: LineStyles;
 };
 declare type AxisOptions = {
     orientation?: OrientationType;
@@ -125,6 +130,13 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
      * More options for the chart.
      */
     options?: {
+        yScale?: {
+            type?: ScaleType;
+            zero?: boolean;
+        };
+        xScale?: {
+            type?: ScaleType;
+        };
         axis?: {
             x?: AxisOptions;
             y?: AxisOptions;
@@ -134,7 +146,7 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
 
 interface BarChartProps extends BaseChartProps<SeriesData[]> {
 }
-declare const _default$3: (props: Omit<BarChartProps, "width" | "height" | "size">) => react_jsx_runtime.JSX.Element;
+declare const _default$3: (props: Omit<BarChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
 
 interface LineChartProps extends BaseChartProps<SeriesData[]> {
     margin?: {
@@ -145,7 +157,7 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
     };
     withGradientFill: boolean;
 }
-declare const _default$2: (props: Omit<LineChartProps, "width" | "height" | "size">) => react_jsx_runtime.JSX.Element;
+declare const _default$2: (props: Omit<LineChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
 
 type OmitBaseChartProps = Omit<BaseChartProps<DataPointPercentage[]>, 'width' | 'height'>;
 interface PieChartProps extends OmitBaseChartProps {
@@ -177,8 +189,12 @@ interface PieChartProps extends OmitBaseChartProps {
      * A value between 0 and 1, where 0 means no corner radius.
      */
     cornerScale?: number;
+    /**
+     * Use the children prop to render additional elements on the chart.
+     */
+    children?: React.ReactNode;
 }
-declare const _default$1: (props: Omit<PieChartProps, "width" | "height" | "size">) => react_jsx_runtime.JSX.Element;
+declare const _default$1: (props: Omit<PieChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
 
 interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]> {
     /**
@@ -203,7 +219,7 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
      */
     clockwise?: boolean;
 }
-declare const _default: (props: Omit<PieSemiCircleChartProps, "width" | "height" | "size">) => react_jsx_runtime.JSX.Element;
+declare const _default: (props: Omit<PieSemiCircleChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
 
 type TooltipData = {
     label: string;

package/dist/mjs/components/bar-chart/bar-chart.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{AxisLeft as e,AxisBottom as i}from"@visx/axis";import{localPoint as a}from"@visx/event";import{Group as r}from"@visx/group";import{scaleBand as l,scaleLinear as s}from"@visx/scale";import{Bar as m}from"@visx/shape";import{useTooltip as p}from"@visx/tooltip";import n from"clsx";import{useCallback as d}from"react";import{useChartTheme as h}from"../../providers/theme/theme-provider.js";import c from"../grid-control/grid-control.js";import{BaseLegend as v}from"../legend/base-legend.js";import{withResponsive as g}from"../shared/with-responsive.js";import{BaseTooltip as b}from"../tooltip/base-tooltip.js";import f from"./bar-chart.module.scss.js";const x=({data:g,margin:x={top:20,right:20,bottom:40,left:40},withTooltips:u=!1,showLegend:y=!1,legendOrientation:w="horizontal",className:L,gridVisibility:j="x",width:M,height:N=400})=>{const T=h(),{tooltipOpen:S,tooltipLeft:D,tooltipTop:O,tooltipData:V,hideTooltip:$,showTooltip:z}=p(),B=d(((t,o,e,i,r)=>{const l=a(t);l&&z({tooltipData:{value:o,xLabel:e,yLabel:i,seriesIndex:r},tooltipLeft:l.x,tooltipTop:l.y-10})}),[z]),C=d((()=>{$()}),[$]);if(!g?.length)return t("div",{className:n("bar-chart-empty",f["bat-chart-empty"]),children:"Empty..."});const E=x,I=M-E.left-E.right,k=N-E.top-E.bottom,q=g[0].data?.map((t=>t?.label||"")),A=l({range:[0,I],domain:q,padding:.2}),F=l({range:[0,A.bandwidth()],domain:g.map(((t,o)=>o.toString())),padding:.1}),G=s({range:[k,0],domain:[0,Math.max(...g.map((t=>Math.max(...t.data.map((t=>t?.value||0))))))]}),H=g.map(((t,o)=>({label:t.label,value:"",color:T.colors[o%T.colors.length]})));return o("div",{className:n("bar-chart",L,f["bar-chart"]),children:[t("svg",{width:M,height:N,children:o(r,{left:E.left,top:E.top,children:[t(c,{width:I,height:k,xScale:A,yScale:G,gridVisibility:j}),g.map(((o,e)=>t(r,{children:o.data.map((i=>{const a=A(i?.label||"");if(void 0===a)return null;const r=F.bandwidth(),l=a+(F(e.toString())??0);return t(m,{x:l,y:G(i.value),width:r,height:k-(G(i.value)??0),fill:T.colors[e%T.colors.length],onMouseMove:u?t=>B(t,i.value,i?.label||"",o.label,e):void 0,onMouseLeave:u?C:void 0},`bar-${e}-${i.label}`)}))},e))),t(e,{scale:G}),t(i,{scale:A,top:k})]})}),u&&S&&V&&t(b,{top:O||0,left:D||0,children:o("div",{children:[t("div",{children:V.yLabel}),o("div",{children:[V.xLabel,": ",V.value]})]})}),y&&t(v,{items:H,orientation:w,className:f["bar-chart-legend"]})]})};x.displayName="BarChart";var u=g(x);export{u as default};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{AxisLeft as e,AxisBottom as o}from"@visx/axis";import{localPoint as i}from"@visx/event";import{Group as r}from"@visx/group";import{scaleBand as l,scaleLinear as s}from"@visx/scale";import{Bar as d}from"@visx/shape";import{useTooltip as m}from"@visx/tooltip";import n from"clsx";import{useCallback as p}from"react";import{useChartTheme as h}from"../../providers/theme/theme-provider.js";import c from"../grid-control/grid-control.js";import{BaseLegend as v}from"../legend/base-legend.js";import{withResponsive as b}from"../shared/with-responsive.js";import{BaseTooltip as g}from"../tooltip/base-tooltip.js";import f from"./bar-chart.module.scss.js";const u=({data:b,margin:u={top:20,right:20,bottom:40,left:40},withTooltips:x=!1,showLegend:N=!1,legendOrientation:w="horizontal",className:y,gridVisibility:L="x",width:j,height:T=400})=>{const M=h(),{tooltipOpen:S,tooltipLeft:D,tooltipTop:I,tooltipData:O,hideTooltip:V,showTooltip:$}=m(),_=p(((t,a,e,o,r)=>{const l=i(t);l&&$({tooltipData:{value:a,xLabel:e,yLabel:o,seriesIndex:r},tooltipLeft:l.x,tooltipTop:l.y-10})}),[$]);if(!b?.length)return t("div",{className:n(f["bar-chart-empty"]),children:"No data available"});if(b.some((t=>t.data.some((t=>null===t.value||void 0===t.value||isNaN(t.value)||!t.label||t.date&&isNaN(t.date.getTime()))))))return t("div",{className:n(f["bar-chart-error"]),children:"Invalid data"});const z=u,B=j-z.left-z.right,C=T-z.top-z.bottom,k=b[0].data?.map((t=>t?.label||"")),q=l({range:[0,B],domain:k,padding:.2}),A=l({range:[0,q.bandwidth()],domain:b.map(((t,a)=>a.toString())),padding:.1}),E=s({range:[C,0],domain:[0,Math.max(...b.map((t=>Math.max(...t.data.map((t=>t?.value||0))))))]}),F=b.map(((t,a)=>({label:t.label,value:"",color:M.colors[a%M.colors.length]})));return a("div",{className:n("bar-chart",f["bar-chart"],y),"data-testid":"bar-chart",role:"img","aria-label":"bar chart",children:[t("svg",{width:j,height:T,children:a(r,{left:z.left,top:z.top,children:[t(c,{width:B,height:C,xScale:q,yScale:E,gridVisibility:L}),b.map(((a,e)=>t(r,{children:a.data.map((o=>{const i=q(o?.label||"");if(void 0===i)return null;const r=A.bandwidth(),l=i+(A(e.toString())??0);return t(d,{x:l,y:E(o.value),width:r,height:C-(E(o.value)??0),fill:M.colors[e%M.colors.length],onMouseMove:x?t=>_(t,o.value,o?.label||"",a.label,e):void 0,onMouseLeave:x?V:void 0},`bar-${e}-${o.label}`)}))},e))),t(e,{scale:E}),t(o,{scale:q,top:C})]})}),x&&S&&O&&t(g,{top:I||0,left:D||0,children:a("div",{children:[t("div",{children:O.yLabel}),a("div",{children:[O.xLabel,": ",O.value]})]})}),N&&t(v,{items:F,orientation:w,className:f["bar-chart__legend"]})]})};u.displayName="BarChart";var x=b(u);export{x as default};
 //# sourceMappingURL=bar-chart.js.map

package/dist/mjs/components/bar-chart/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["BarChart","data","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","className","gridVisibility","width","height","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","handleMouseMove","useCallback","event","value","xLabel","yLabel","seriesIndex","coords","localPoint","x","y","handleMouseLeave","length","_jsx","clsx","styles","margins","xMax","yMax","labels","map","d","label","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","series","legendItems","group","index","color","colors","_jsxs","children","Group","GridControl","xPos","undefined","barWidth","barX","Bar","fill","onMouseMove","onMouseLeave","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","items","orientation","displayName","barChart","withResponsive"],"mappings":"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"}
+{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["BarChart","data","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","className","gridVisibility","width","height","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","handleMouseMove","useCallback","event","value","xLabel","yLabel","seriesIndex","coords","localPoint","x","y","length","_jsx","clsx","styles","children","some","series","d","undefined","isNaN","label","date","getTime","margins","xMax","yMax","labels","map","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","legendItems","group","index","color","colors","_jsxs","role","Group","GridControl","xPos","barWidth","barX","Bar","fill","onMouseMove","onMouseLeave","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","items","orientation","displayName","barChart","withResponsive"],"mappings":"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"}

package/dist/mjs/components/line-chart/line-chart.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import{LinearGradient as r}from"@visx/gradient";import{buildChartTheme as a,XYChart as i,AnimatedGrid as l,AnimatedAxis as n,AnimatedLineSeries as s,AnimatedAreaSeries as c,Tooltip as d}from"@visx/xychart";import m from"clsx";import"react";import{useChartTheme as h}from"../../providers/theme/theme-provider.js";import{BaseLegend as p}from"../legend/base-legend.js";import{withResponsive as u}from"../shared/with-responsive.js";import g from"./line-chart.module.scss.js";const y=({tooltipData:o})=>{const r=o?.nearestDatum?.datum;if(!r)return null;const a=Object.entries(o?.datumByKey||{}).map((([t,{datum:e}])=>({key:t,value:e.value}))).sort(((t,e)=>e.value-t.value));return e("div",{className:g["line-chart__tooltip"],children:[t("div",{className:g["line-chart__tooltip-date"],children:r.date.toLocaleDateString()}),a.map((o=>e("div",{className:g["line-chart__tooltip-row"],children:[e("span",{className:g["line-chart__tooltip-label"],children:[o.key,":"]}),t("span",{className:g["line-chart__tooltip-value"],children:o.value})]},o.key)))]})},v=t=>new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric"});var k=u((({data:u,width:k,height:f,margin:b={top:20,right:20,bottom:40,left:40},className:x,withTooltips:w=!0,showLegend:_=!1,legendOrientation:D="horizontal",withGradientFill:N=!1,options:T={}})=>{const S=h();if(!u?.length)return t("div",{className:m("line-chart-empty",g["line-chart-empty"]),children:"Empty..."});const j=u.map(((t,e)=>({label:t.label,value:"",color:S.colors[e%S.colors.length]}))),C={xAccessor:t=>t.date,yAccessor:t=>t.value},L=a({backgroundColor:S.backgroundColor,colors:S.colors,gridStyles:S.gridStyles,tickLength:S?.tickLength||0,gridColor:S?.gridColor||"",gridColorDark:S?.gridColorDark||""});return e("div",{className:m("line-chart",g["line-chart"],x),children:[e(i,{theme:L,width:k,height:f,margin:b,xScale:{type:"time"},yScale:{type:"linear",nice:!0},children:[t(l,{columns:!1,numTicks:4}),t(n,{orientation:"bottom",numTicks:5,tickFormat:v,...T?.axis?.x}),t(n,{orientation:"left",numTicks:4,...T?.axis?.y}),u.map(((a,i)=>{const l=a.options?.stroke??L.colors[i%L.colors.length];return e(o,{children:[t(r,{id:`area-gradient-${i+1}`,from:l,to:"white",toOpacity:.1,...a.options?.gradient}),t(s,{dataKey:a?.label,data:a.data,...C,stroke:l,strokeWidth:2},a?.label),N&&t(c,{dataKey:a?.label,data:a.data,...C,stroke:l,strokeWidth:0,fill:`url(#area-gradient-${i+1})`,renderLine:!1},a?.label)]})})),w&&t(d,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:y})]}),_&&t(p,{items:j,orientation:D,className:g["line-chart-legend"]})]})}));export{k as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{curveNatural as a}from"@visx/curve";import{LinearGradient as i}from"@visx/gradient";import{buildChartTheme as o,XYChart as r,AnimatedGrid as l,AnimatedAxis as n,AnimatedAreaSeries as s,Tooltip as c}from"@visx/xychart";import m from"clsx";import{useMemo as d}from"react";import{useChartTheme as h}from"../../providers/theme/theme-provider.js";import{BaseLegend as p}from"../legend/base-legend.js";import{withResponsive as u}from"../shared/with-responsive.js";import v from"./line-chart.module.scss.js";const g=({tooltipData:a})=>{const i=a?.nearestDatum?.datum;if(!i)return null;const o=Object.entries(a?.datumByKey||{}).map((([e,{datum:t}])=>({key:e,value:t.value}))).sort(((e,t)=>t.value-e.value));return t("div",{className:v["line-chart__tooltip"],children:[e("div",{className:v["line-chart__tooltip-date"],children:i.date.toLocaleDateString()}),o.map((a=>t("div",{className:v["line-chart__tooltip-row"],children:[t("span",{className:v["line-chart__tooltip-label"],children:[a.key,":"]}),e("span",{className:v["line-chart__tooltip-value"],children:a.value})]},a.key)))]})},f=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var y=u((({data:u,width:y,height:x,className:N,margin:b,withTooltips:w=!0,showLegend:T=!1,legendOrientation:_="horizontal",withGradientFill:k=!1,options:D={}})=>{const S=h(),j=d((()=>{const e=u?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return o({...S,colors:[...e,...S.colors]})}),[S,u]);b=d((()=>{let e={top:0,right:0,bottom:40,left:40};return"right"===D.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===D.axis?.x?.orientation&&(e={...e,top:40,bottom:0}),{...e,...b}}),[b,D]);const L=(e=>e?.length?e.some((e=>e.data.some((e=>isNaN(e.value)||null===e.value||void 0===e.value||isNaN(e.date.getTime())))))?"Invalid data":null:"No data available")(u);if(L)return e("div",{className:m("line-chart",v["line-chart"]),children:L});const O=u.map(((e,t)=>({label:e.label,value:"",color:S.colors[t%S.colors.length]}))),z={xAccessor:e=>e.date,yAccessor:e=>e.value};return t("div",{className:m("line-chart",v["line-chart"],N),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[t(r,{theme:j,width:y,height:x,margin:b,xScale:{type:"time",...D?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...D?.yScale},children:[e(l,{columns:!1,numTicks:4}),e(n,{orientation:"bottom",numTicks:5,tickFormat:f,...D?.axis?.x}),e(n,{orientation:"left",numTicks:4,...D?.axis?.y}),u.map(((o,r)=>{const l=o.options?.stroke??j.colors[r%j.colors.length];return t("g",{children:[k&&e(i,{id:`area-gradient-${r+1}`,from:l,to:"white",toOpacity:.1,...o.options?.gradient,"data-testid":"line-gradient"}),e(s,{dataKey:o?.label,data:o.data,...z,fill:k?`url(#area-gradient-${r+1})`:void 0,renderLine:!0,curve:a},o?.label)]},o?.label||r)})),w&&e(c,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:g})]}),T&&e(p,{items:O,orientation:_,className:v["line-chart-legend"]})]})}));export{y as default};
 //# sourceMappingURL=line-chart.js.map

package/dist/mjs/components/line-chart/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","sources":["../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["renderTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","Date","undefined","month","day","lineChart","withResponsive","data","width","height","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","withGradientFill","options","providerTheme","useChartTheme","length","clsx","legendItems","group","index","label","color","colors","accessors","xAccessor","d","yAccessor","theme","buildChartTheme","backgroundColor","gridStyles","tickLength","gridColor","gridColorDark","XYChart","xScale","type","yScale","nice","AnimatedGrid","columns","numTicks","AnimatedAxis","orientation","tickFormat","axis","x","y","seriesData","stroke","_Fragment","LinearGradient","id","from","to","toOpacity","gradient","AnimatedLineSeries","dataKey","strokeWidth","AnimatedAreaSeries","fill","renderLine","Tooltip","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"uhBAiCA,MAAMA,EAAgB,EACrBC,kBAUA,MAAMC,EAAeD,GAAaC,cAAcC,MAChD,IAAOD,EAAe,OAAO,KAE7B,MAAME,EAAgCC,OAAOC,QAASL,GAAaM,YAAc,CAAA,GAC/EC,KAAK,EAAIC,GAAON,aAAiB,CACjCM,MACAC,MAAOP,EAAMO,UAEbC,MAAM,CAAEC,EAAGC,IAAOA,EAAEH,MAAQE,EAAEF,QAEhC,OACCI,EAAK,MAAA,CAAAC,UAAYC,EAAQ,uBACxBC,SAAA,CAAAC,EAAA,MAAA,CAAKH,UAAYC,EAAQ,4BACtBC,SAAAf,EAAaiB,KAAKC,uBAEnBhB,EAAcI,KAAKa,GACpBP,EAAA,MAAA,CAAuBC,UAAYC,EAAQ,2BAC1CC,SAAA,CAAAH,EAAA,OAAA,CAAMC,UAAYC,EAAQ,6BAA6BC,SAAA,CAAKI,EAAMZ,IAAa,OAC/ES,UAAMH,UAAYC,EAAQ,6BAA6BC,SAAKI,EAAMX,UAFxDW,EAAMZ,SAMlB,EAGGa,EAAmBZ,GACX,IAAIa,KAAMb,GACXU,wBAAoBI,EAAW,CAC1CC,MAAO,QACPC,IAAK,YA2HP,IAAeC,EAAAC,GAvHyB,EACvCC,OACAC,QACAC,SACAC,SAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACjDrB,YACAsB,gBAAe,EACfC,cAAa,EACbC,oBAAoB,aACpBC,oBAAmB,EACnBC,UAAU,CAAE,MAEZ,MAAMC,EAAgBC,IAEtB,IAAOd,GAAMe,OACZ,OACC1B,EAAA,MAAA,CAAKH,UAAY8B,EAAM,mBAAoB7B,EAAQ,qBAAsBC,SAAA,aAK3E,MAAM6B,EAAcjB,EAAKrB,KAAK,CAAEuC,EAAOC,KAAa,CACnDC,MAAOF,EAAME,MACbvC,MAAO,GACPwC,MAAOR,EAAcS,OAAQH,EAAQN,EAAcS,OAAOP,YAGrDQ,EAAY,CACjBC,UAAaC,GAAsBA,EAAEnC,KACrCoC,UAAaD,GAAsBA,EAAE5C,OAGhC8C,EAAQC,EAAiB,CAC9BC,gBAAiBhB,EAAcgB,gBAC/BP,OAAQT,EAAcS,OACtBQ,WAAYjB,EAAciB,WAC1BC,WAAYlB,GAAekB,YAAc,EACzCC,UAAWnB,GAAemB,WAAa,GACvCC,cAAepB,GAAeoB,eAAiB,KAGhD,OACChD,EAAK,MAAA,CAAAC,UAAY8B,EAAM,aAAc7B,EAAQ,cAAgBD,GAAWE,SAAA,CACvEH,EAACiD,EACA,CAAAP,MAAQA,EACR1B,MAAQA,EACRC,OAASA,EACTC,OAASA,EACTgC,OAAS,CAAEC,KAAM,QACjBC,OAAS,CAAED,KAAM,SAAUE,MAAM,GAEjClD,SAAA,CAAAC,EAACkD,EAAY,CAACC,SAAU,EAAQC,SAAW,IAC3CpD,EAACqD,EACA,CAAAC,YAAY,SACZF,SAAW,EACXG,WAAanD,KACRmB,GAASiC,MAAMC,IAErBzD,EAACqD,EAAa,CAAAC,YAAY,OAAOF,SAAW,KAAS7B,GAASiC,MAAME,IAElE/C,EAAKrB,KAAK,CAAEqE,EAAY7B,KACzB,MAAM8B,EAASD,EAAWpC,SAASqC,QAAUtB,EAAML,OAAQH,EAAQQ,EAAML,OAAOP,QAEhF,OACC9B,EACCiE,EAAA,CAAA9D,SAAA,CAAAC,EAAC8D,EAAc,CACdC,GAAK,iBAAkBjC,EAAQ,IAC/BkC,KAAOJ,EACPK,GAAG,QACHC,UAAY,MACPP,EAAWpC,SAAS4C,WAE1BnE,EAACoE,EAEA,CAAAC,QAAUV,GAAY5B,MACtBpB,KAAOgD,EAAWhD,QACbuB,EACL0B,OAASA,EACTU,YAAc,GALRX,GAAY5B,OASjBT,GACDtB,EAACuE,EAAkB,CAElBF,QAAUV,GAAY5B,MACtBpB,KAAOgD,EAAWhD,QACbuB,EACL0B,OAASA,EACTU,YAAc,EACdE,KAAO,sBAAuB1C,EAAQ,KACtC2C,YAAa,GAPPd,GAAY5B,SAWpB,IAGDZ,GACDnB,EAAC0E,GACAC,qBAAmB,EACnBC,qBACA,EAAAC,oBACA/F,cAAgBA,OAKjBsC,GACDpB,EAAC8E,EACA,CAAAC,MAAQnD,EACR0B,YAAcjC,EACdxB,UAAYC,EAAQ,yBAItB"}
+{"version":3,"file":"line-chart.js","sources":["../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["renderTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","Date","undefined","month","day","lineChart","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","options","providerTheme","useChartTheme","theme","useMemo","seriesColors","series","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","top","right","bottom","left","axis","y","orientation","x","error","length","some","isNaN","getTime","validateData","clsx","legendItems","group","index","label","color","accessors","xAccessor","d","yAccessor","role","XYChart","xScale","type","yScale","nice","zero","AnimatedGrid","columns","numTicks","AnimatedAxis","tickFormat","seriesData","LinearGradient","id","from","to","toOpacity","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveNatural","Tooltip","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"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"}

package/dist/mjs/components/pie-chart/pie-chart.js

@@ -1,2 +1,2 @@
-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};
+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 l}from"../../providers/theme/theme-provider.js";import{defaultTheme as s}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,children:j=null})=>{const N=l(),{onMouseMove:w,onMouseLeave:V,tooltipOpen:A,tooltipData:k,tooltipLeft:y,tooltipTop:L}=i({withTooltips:c}),{isValid:R,message:S}=(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(!R)return e("div",{className:r("pie-chart",m["pie-chart"],h),children:e("div",{className:m["error-message"],children:S})});const B=v,C=v,I=Math.min(B,C)/2,T=B/2,$=C/2,z=x*(2*Math.PI/d.length),O=I-M,P=O*(1-f),q=(O-P)/2,D=b?Math.min(b*O,q):0,E=d.map(((e,a)=>({...e,index:a}))),Y={value:e=>e.value,fill:e=>e?.color||N.colors[e.index]},F=d.map(((e,a)=>({label:e.label,value:e.value.toString(),color:N.colors[a%N.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:a(t,{top:$,left:T,children:[e(o,{data:E,pieValue:Y.value,outerRadius:O,innerRadius:P,padAngle:z,cornerRadius:D,children:t=>t.arcs.map(((o,r)=>{const[i,l]=t.path.centroid(o),n=o.endAngle-o.startAngle>=.25,d=e=>w(e,o.data),p={d:t.path(o)||"",fill:Y.fill(o.data)};return c&&(p.onMouseMove=d,p.onMouseLeave=V),a("g",{children:[e("path",{...p}),n&&e("text",{x:i,y:l,dy:".33em",fill:N.labelBackgroundColor||s.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:o.data.label})]},`arc-${r}`)}))}),j]})}),u&&e(n,{items:F,orientation:g,className:m["pie-chart-legend"]}),c&&A&&k&&e(p,{data:k,top:L||0,left:y||0,style:{transform:"translate(-50%, -100%)"}})]})};c.displayName="PieChart";var h=d(c);export{h as default};
 //# sourceMappingURL=pie-chart.js.map

package/dist/mjs/components/pie-chart/pie-chart.js.map

@@ -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":"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"}
+{"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","children","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","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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"}

package/dist/mjs/providers/theme/themes.js

@@ -1,2 +1,2 @@
-const F={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#787C82",strokeWidth:1},tickLength:0,gridColor:"",gridColorDark:""};export{F as defaultTheme};
+const o={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#DCDCDE",strokeWidth:1},tickLength:4,gridColor:"",gridColorDark:"",xTickLineStyles:{stroke:"black"},xAxisLineStyles:{stroke:"#DCDCDE",strokeWidth:1}};export{o as defaultTheme};
 //# sourceMappingURL=themes.js.map

package/dist/mjs/providers/theme/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/providers/theme/themes.ts"],"sourcesContent":[null],"names":["defaultTheme","backgroundColor","labelBackgroundColor","colors","gridStyles","stroke","strokeWidth","tickLength","gridColor","gridColorDark"],"mappings":"AAKA,MAAMA,EAA2B,CAChCC,gBAAiB,UACjBC,qBAAsB,UACtBC,OAAQ,CAAE,UAAW,UAAW,UAAW,UAAW,WACtDC,WAAY,CACXC,OAAQ,UACRC,YAAa,GAEdC,WAAY,EACZC,UAAW,GACXC,cAAe"}
+{"version":3,"file":"themes.js","sources":["../../../../src/providers/theme/themes.ts"],"sourcesContent":[null],"names":["defaultTheme","backgroundColor","labelBackgroundColor","colors","gridStyles","stroke","strokeWidth","tickLength","gridColor","gridColorDark","xTickLineStyles","xAxisLineStyles"],"mappings":"AAKA,MAAMA,EAA2B,CAChCC,gBAAiB,UACjBC,qBAAsB,UACtBC,OAAQ,CAAE,UAAW,UAAW,UAAW,UAAW,WACtDC,WAAY,CACXC,OAAQ,UACRC,YAAa,GAEdC,WAAY,EACZC,UAAW,GACXC,cAAe,GACfC,gBAAiB,CAAEL,OAAQ,SAC3BM,gBAAiB,CAAEN,OAAQ,UAAWC,YAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -49,6 +49,7 @@
 		"@babel/runtime": "7.26.0",
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
+		"@visx/curve": "3.12.0",
 		"@visx/event": "^3.8.0",
 		"@visx/gradient": "3.12.0",
 		"@visx/grid": "^3.12.0",
@@ -64,11 +65,14 @@
 		"tslib": "2.5.0"
 	},
 	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.26.0",
+		"@babel/plugin-transform-react-jsx": "7.25.9",
 		"@babel/plugin-transform-runtime": "7.25.9",
 		"@babel/preset-env": "7.26.0",
 		"@babel/preset-react": "7.26.3",
 		"@babel/preset-typescript": "7.26.0",
+		"@jest/globals": "^29.0.0",
 		"@rollup/plugin-commonjs": "26.0.1",
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-node-resolve": "15.3.0",
@@ -76,8 +80,15 @@
 		"@rollup/plugin-typescript": "12.1.0",
 		"@storybook/blocks": "8.4.7",
 		"@storybook/react": "8.4.7",
+		"@testing-library/jest-dom": "^6.0.0",
+		"@testing-library/react": "^14.0.0",
+		"@types/jest": "^29.0.0",
 		"@types/react": "18.3.18",
 		"@types/react-dom": "18.3.5",
+		"@types/testing-library__jest-dom": "^5.14.9",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.14.0",
+		"@wordpress/element": "6.14.0",
+		"babel-jest": "^29.7.0",
 		"babel-loader": "9.1.2",
 		"clean-webpack-plugin": "^4.0.0",
 		"css-loader": "^6.7.0",
@@ -102,17 +113,7 @@
 		"tsconfig-paths-webpack-plugin": "4.2.0",
 		"typescript": "5.7.2",
 		"webpack": "^5.88.0",
-		"webpack-cli": "^5.1.0",
-		"@testing-library/react": "^14.0.0",
-		"@testing-library/jest-dom": "^6.0.0",
-		"@types/jest": "^29.0.0",
-		"@types/testing-library__jest-dom": "^5.14.9",
-		"@jest/globals": "^29.0.0",
-		"babel-jest": "^29.7.0",
-		"@automattic/jetpack-webpack-config": "workspace:*",
-		"@wordpress/babel-plugin-import-jsx-pragma": "5.14.0",
-		"@wordpress/element": "6.14.0",
-		"@babel/plugin-transform-react-jsx": "7.25.9"
+		"webpack-cli": "^6.0.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0 || ^18.0.0",

package/src/components/bar-chart/bar-chart.tsx

@@ -48,7 +48,6 @@ const BarChart: FC< BarChartProps > = ( {
 		) => {
 			const coords = localPoint( event );
 			if ( ! coords ) return;
-
 			showTooltip( {
 				tooltipData: { value, xLabel, yLabel, seriesIndex },
 				tooltipLeft: coords.x,
@@ -58,12 +57,25 @@ const BarChart: FC< BarChartProps > = ( {
 		[ showTooltip ]
 	);
 
-	const handleMouseLeave = useCallback( () => {
-		hideTooltip();
-	}, [ hideTooltip ] );
-
+	// Check for empty data
 	if ( ! data?.length ) {
-		return <div className={ clsx( 'bar-chart-empty', styles[ 'bat-chart-empty' ] ) }>Empty...</div>;
+		return <div className={ clsx( styles[ 'bar-chart-empty' ] ) }>No data available</div>;
+	}
+
+	// Add date validation to hasInvalidData check
+	const hasInvalidData = data.some( series =>
+		series.data.some(
+			d =>
+				d.value === null ||
+				d.value === undefined ||
+				isNaN( d.value ) ||
+				! d.label ||
+				( d.date && isNaN( d.date.getTime() ) ) // Add date validation
+		)
+	);
+
+	if ( hasInvalidData ) {
+		return <div className={ clsx( styles[ 'bar-chart-error' ] ) }>Invalid data</div>;
 	}
 
 	const margins = margin;
@@ -102,7 +114,12 @@ const BarChart: FC< BarChartProps > = ( {
 	} ) );
 
 	return (
-		<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>
+		<div
+			className={ clsx( 'bar-chart', styles[ 'bar-chart' ], className ) }
+			data-testid="bar-chart"
+			role="img"
+			aria-label="bar chart"
+		>
 			<svg width={ width } height={ height }>
 				<Group left={ margins.left } top={ margins.top }>
 					<GridControl
@@ -133,7 +150,7 @@ const BarChart: FC< BarChartProps > = ( {
 										height={ yMax - ( yScale( d.value ) ?? 0 ) }
 										fill={ theme.colors[ seriesIndex % theme.colors.length ] }
 										onMouseMove={ withTooltips ? handleBarMouseMove : undefined }
-										onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+										onMouseLeave={ withTooltips ? hideTooltip : undefined }
 									/>
 								);
 							} ) }
@@ -159,7 +176,7 @@ const BarChart: FC< BarChartProps > = ( {
 				<Legend
 					items={ legendItems }
 					orientation={ legendOrientation }
-					className={ styles[ 'bar-chart-legend' ] }
+					className={ styles[ 'bar-chart__legend' ] }
 				/>
 			) }
 		</div>

package/src/components/line-chart/line-chart.tsx

@@ -1,7 +1,7 @@
+import { curveNatural } from '@visx/curve';
 import { LinearGradient } from '@visx/gradient';
 import {
 	XYChart,
-	AnimatedLineSeries,
 	AnimatedAreaSeries,
 	AnimatedAxis,
 	AnimatedGrid,
@@ -9,7 +9,7 @@ import {
 	buildChartTheme,
 } from '@visx/xychart';
 import clsx from 'clsx';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import { withResponsive } from '../shared/with-responsive';
@@ -75,12 +75,29 @@ const formatDateTick = ( value: number ) => {
 	} );
 };
 
+const validateData = ( data: SeriesData[] ) => {
+	if ( ! data?.length ) return 'No data available';
+
+	const hasInvalidData = data.some( series =>
+		series.data.some(
+			point =>
+				isNaN( point.value as number ) ||
+				point.value === null ||
+				point.value === undefined ||
+				isNaN( point.date.getTime() )
+		)
+	);
+
+	if ( hasInvalidData ) return 'Invalid data';
+	return null;
+};
+
 const LineChart: FC< LineChartProps > = ( {
 	data,
 	width,
 	height,
-	margin = { top: 20, right: 20, bottom: 40, left: 40 },
 	className,
+	margin,
 	withTooltips = true,
 	showLegend = false,
 	legendOrientation = 'horizontal',
@@ -89,10 +106,32 @@ const LineChart: FC< LineChartProps > = ( {
 } ) => {
 	const providerTheme = useChartTheme();
 
-	if ( ! data?.length ) {
-		return (
-			<div className={ clsx( 'line-chart-empty', styles[ 'line-chart-empty' ] ) }>Empty...</div>
-		);
+	const theme = useMemo( () => {
+		const seriesColors =
+			data?.map( series => series.options?.stroke ?? '' ).filter( Boolean ) ?? [];
+		return buildChartTheme( {
+			...providerTheme,
+			colors: [ ...seriesColors, ...providerTheme.colors ],
+		} );
+	}, [ providerTheme, data ] );
+
+	margin = useMemo( () => {
+		// Auto-margin unless specified to make room for axis labels.
+		// Default margin is for bottom and left axis labels.
+		let defaultMargin = { top: 0, right: 0, bottom: 40, left: 40 };
+		if ( options.axis?.y?.orientation === 'right' ) {
+			defaultMargin = { ...defaultMargin, right: 40, left: 0 };
+		}
+		if ( options.axis?.x?.orientation === 'top' ) {
+			defaultMargin = { ...defaultMargin, top: 40, bottom: 0 };
+		}
+		// Merge default margin with user-specified margin.
+		return { ...defaultMargin, ...margin };
+	}, [ margin, options ] );
+
+	const error = validateData( data );
+	if ( error ) {
+		return <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;
 	}
 
 	// Create legend items from group labels, this iterates over groups rather than data points
@@ -107,24 +146,20 @@ const LineChart: FC< LineChartProps > = ( {
 		yAccessor: ( d: DataPointDate ) => d.value,
 	};
 
-	const theme = buildChartTheme( {
-		backgroundColor: providerTheme.backgroundColor,
-		colors: providerTheme.colors,
-		gridStyles: providerTheme.gridStyles,
-		tickLength: providerTheme?.tickLength || 0,
-		gridColor: providerTheme?.gridColor || '',
-		gridColorDark: providerTheme?.gridColorDark || '',
-	} );
-
 	return (
-		<div className={ clsx( 'line-chart', styles[ 'line-chart' ], className ) }>
+		<div
+			className={ clsx( 'line-chart', styles[ 'line-chart' ], className ) }
+			data-testid="line-chart"
+			role="img"
+			aria-label="line chart"
+		>
 			<XYChart
 				theme={ theme }
 				width={ width }
 				height={ height }
 				margin={ margin }
-				xScale={ { type: 'time' } }
-				yScale={ { type: 'linear', nice: true } }
+				xScale={ { type: 'time', ...options?.xScale } }
+				yScale={ { type: 'linear', nice: true, zero: false, ...options?.yScale } }
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
 				<AnimatedAxis
@@ -137,39 +172,28 @@ const LineChart: FC< LineChartProps > = ( {
 
 				{ data.map( ( seriesData, index ) => {
 					const stroke = seriesData.options?.stroke ?? theme.colors[ index % theme.colors.length ];
-
 					return (
-						<>
-							<LinearGradient
-								id={ `area-gradient-${ index + 1 }` }
-								from={ stroke }
-								to="white"
-								toOpacity={ 0.1 }
-								{ ...seriesData.options?.gradient }
-							/>
-							<AnimatedLineSeries
+						<g key={ seriesData?.label || index }>
+							{ withGradientFill && (
+								<LinearGradient
+									id={ `area-gradient-${ index + 1 }` }
+									from={ stroke }
+									to="white"
+									toOpacity={ 0.1 }
+									{ ...seriesData.options?.gradient }
+									data-testid="line-gradient"
+								/>
+							) }
+							<AnimatedAreaSeries
 								key={ seriesData?.label }
 								dataKey={ seriesData?.label }
-								data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
+								data={ seriesData.data as DataPointDate[] }
 								{ ...accessors }
-								stroke={ stroke }
-								strokeWidth={ 2 }
+								fill={ withGradientFill ? `url(#area-gradient-${ index + 1 })` : undefined }
+								renderLine={ true }
+								curve={ curveNatural }
 							/>
-							{ /** Theoretically the area series should work without the line series; however it outlines the area with borders, which isn't ideal. */ }
-							{ /** TODO: Investigate whehter we could leverage area series alone. */ }
-							{ withGradientFill && (
-								<AnimatedAreaSeries
-									key={ seriesData?.label }
-									dataKey={ seriesData?.label }
-									data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
-									{ ...accessors }
-									stroke={ stroke }
-									strokeWidth={ 0 }
-									fill={ `url(#area-gradient-${ index + 1 })` }
-									renderLine={ false }
-								/>
-							) }
-						</>
+						</g>
 					);
 				} ) }
 

package/src/components/pie-chart/pie-chart.tsx

@@ -48,6 +48,11 @@ interface PieChartProps extends OmitBaseChartProps {
 	 * A value between 0 and 1, where 0 means no corner radius.
 	 */
 	cornerScale?: number;
+
+	/**
+	 * Use the children prop to render additional elements on the chart.
+	 */
+	children?: React.ReactNode;
 }
 
 /**
@@ -93,6 +98,7 @@ const PieChart = ( {
 	padding = 20,
 	gapScale = 0,
 	cornerScale = 0,
+	children = null,
 }: PieChartProps ) => {
 	const providerTheme = useChartTheme();
 	const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =
@@ -206,6 +212,8 @@ const PieChart = ( {
 							} );
 						} }
 					</Pie>
+
+					{ children }
 				</Group>
 			</svg>
 

package/src/providers/theme/themes.ts

@@ -8,12 +8,14 @@ const defaultTheme: ChartTheme = {
 	labelBackgroundColor: '#FFFFFF', // label background color
 	colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],
 	gridStyles: {
-		stroke: '#787C82',
+		stroke: '#DCDCDE',
 		strokeWidth: 1,
 	},
-	tickLength: 0,
+	tickLength: 4,
 	gridColor: '',
 	gridColorDark: '',
+	xTickLineStyles: { stroke: 'black' },
+	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
 };
 
 /**
@@ -24,12 +26,14 @@ const jetpackTheme: ChartTheme = {
 	labelBackgroundColor: '#FFFFFF', // label background color
 	colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],
 	gridStyles: {
-		stroke: '#787C82',
+		stroke: '#DCDCDE',
 		strokeWidth: 1,
 	},
-	tickLength: 0,
+	tickLength: 4,
 	gridColor: '',
 	gridColorDark: '',
+	xTickLineStyles: { stroke: 'black' },
+	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
 };
 
 /**
@@ -43,9 +47,11 @@ const wooTheme: ChartTheme = {
 		stroke: '#787C82',
 		strokeWidth: 1,
 	},
-	tickLength: 0,
+	tickLength: 4,
 	gridColor: '',
 	gridColorDark: '',
+	xTickLineStyles: { stroke: 'black' },
+	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
 };
 
 export { defaultTheme, jetpackTheme, wooTheme };

package/src/types.ts

@@ -1,4 +1,6 @@
 import { Orientation } from '@visx/axis';
+import { ScaleType } from '@visx/scale';
+import { LineStyles } from '@visx/xychart';
 import type { CSSProperties } from 'react';
 
 type ValueOf< T > = T[ keyof T ];
@@ -12,8 +14,8 @@ export type DataPoint = {
 
 export type DataPointDate = {
 	date: Date;
+	value: number | null;
 	label?: string;
-	value: number;
 };
 
 export type SeriesData = {
@@ -69,6 +71,10 @@ export type ChartTheme = {
 	gridColor: string;
 	/** Color of the grid lines in dark mode */
 	gridColorDark: string;
+	/** Styles for x-axis tick lines */
+	xTickLineStyles?: LineStyles;
+	/** Styles for x-axis line */
+	xAxisLineStyles?: LineStyles;
 };
 
 declare type AxisOptions = {
@@ -130,6 +136,8 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 	 * More options for the chart.
 	 */
 	options?: {
+		yScale?: { type?: ScaleType; zero?: boolean };
+		xScale?: { type?: ScaleType };
 		axis?: {
 			x?: AxisOptions;
 			y?: AxisOptions;

package/global.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="jest" />
-
-declare global {
-	const describe: jest.Describe;
-	const test: jest.It;
-	const expect: jest.Expect;
-	const it: jest.It;
-	const beforeAll: jest.Lifecycle;
-	const afterAll: jest.Lifecycle;
-	const beforeEach: jest.Lifecycle;
-	const afterEach: jest.Lifecycle;
-}
-
-export {};

package/src/components/pie-chart/__tests__/pie-chart.test.tsx

@@ -1,59 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../providers/theme';
-import PieChart from '../pie-chart';
-
-describe( 'PieChart', () => {
-	const defaultProps = {
-		size: 500,
-		data: [
-			{ label: 'A', percentage: 50, value: 50 },
-			{ label: 'B', percentage: 50, value: 50 },
-		],
-	};
-
-	const renderWithTheme = ( props = {} ) => {
-		return render(
-			<ThemeProvider>
-				<PieChart { ...defaultProps } { ...props } />
-			</ThemeProvider>
-		);
-	};
-
-	describe( 'Data Validation', () => {
-		test( 'validates total percentage equals 100', () => {
-			renderWithTheme( {
-				data: [
-					{ label: 'A', percentage: 60, value: 60 },
-					{ label: 'B', percentage: 50, value: 50 },
-				],
-			} );
-			expect( screen.getByText( /invalid percentage total/i ) ).toBeInTheDocument();
-		} );
-
-		test( 'handles negative values', () => {
-			renderWithTheme( {
-				data: [
-					{ label: 'A', percentage: -30, value: -30 },
-					{ label: 'B', percentage: 130, value: 130 },
-				],
-			} );
-			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
-		} );
-
-		test( 'handles empty data array', () => {
-			renderWithTheme( { data: [] } );
-			expect( screen.getByText( /no data available/i ) ).toBeInTheDocument();
-		} );
-
-		test( 'handles single data point', () => {
-			renderWithTheme( {
-				data: [ { label: 'A', percentage: 100, value: 100 } ],
-			} );
-			expect( screen.getByText( 'A' ) ).toBeInTheDocument();
-		} );
-	} );
-} );