@automattic/charts 0.8.4 → 0.10.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.10.0] - 2025-03-17
+### Changed
+- Bar chart: align options with line chart [#42448]
+- Update package dependencies. [#42163]
+- Update package dependencies. [#42384]
+
+## [0.9.0] - 2025-03-02
+### Added
+- Expose event handling for line chart [#42168]
+
 ## [0.8.4] - 2025-02-27
 ### Fixed
 - Line chart: no need for min x tick num [#42087]
@@ -128,6 +138,8 @@ 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.10.0]: https://github.com/Automattic/charts/compare/v0.9.0...v0.10.0
+[0.9.0]: https://github.com/Automattic/charts/compare/v0.8.4...v0.9.0
 [0.8.4]: https://github.com/Automattic/charts/compare/v0.8.3...v0.8.4
 [0.8.3]: https://github.com/Automattic/charts/compare/v0.8.2...v0.8.3
 [0.8.2]: https://github.com/Automattic/charts/compare/v0.8.1...v0.8.2

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),a=require("@visx/axis"),t=require("@visx/event"),i=require("@visx/group"),r=require("@visx/scale"),o=require("@visx/shape"),l=require("@visx/tooltip"),s=require("clsx"),n=require("react"),d=require("../../providers/theme/theme-provider.js"),c=require("../grid-control/grid-control.js"),h=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=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"}),v=a=>a?e.jsxs("div",{className:x["bar-chart__tooltip"],children:[e.jsx("div",{className:x["bar-chart__tooltip-header"],children:a.yLabel}),e.jsxs("div",{className:x["bar-chart__tooltip-row"],children:[e.jsxs("span",{className:x["bar-chart__tooltip-label"],children:[a.xLabel,":"]}),e.jsx("span",{className:x["bar-chart__tooltip-value"],children:a.value})]})]}):null;var b=p.withResponsive((({data:p,width:b,height:g=400,className:j,margin:q={top:20,right:20,bottom:40,left:40},withTooltips:N=!1,showLegend:w=!1,legendOrientation:L="horizontal",gridVisibility:_="x",renderTooltip:f=v,options:T={}})=>{const y=d.useChartTheme(),{tooltipOpen:B,tooltipLeft:k,tooltipTop:M,tooltipData:S,hideTooltip:D,showTooltip:A}=l.useTooltip(),C=T.axis?.x?.tickFormat??m;delete T.axis?.x?.tickFormat;const F=n.useCallback(((e,a,i,r,o)=>{const l=t.localPoint(e);l&&A({tooltipData:{value:a,xLabel:i,yLabel:r,seriesIndex:o},tooltipLeft:l.x,tooltipTop:l.y-10})}),[A]),G=(e=>e?.length?e.some((e=>e.data.some((e=>null===e.value||void 0===e.value||isNaN(e.value)||!e.label&&(!e.date||isNaN(e.date.getTime()))))))?"Invalid data":null:"No data available")(p);if(G)return e.jsx("div",{className:s("bar-chart",x["bar-chart"]),children:G});const I=q,O=b-I.left-I.right,V=g-I.top-I.bottom,$=p[0].data?.map((e=>e?.label||C(e?.date))),z=r.scaleBand({range:[0,O],domain:$,padding:.2}),P=r.scaleBand({range:[0,z.bandwidth()],domain:p.map(((e,a)=>a.toString())),padding:.1}),R=r.scaleLinear({range:[V,0],domain:[0,Math.max(...p.map((e=>Math.max(...e.data.map((e=>e?.value||0))))))]}),E=p.map(((e,a)=>({label:e.label,value:"",color:e.options?.stroke||y.colors[a%y.colors.length]})));return e.jsxs("div",{className:s("bar-chart",x["bar-chart"],j),"data-testid":"bar-chart",role:"img","aria-label":"bar chart",children:[e.jsx("svg",{width:b,height:g,children:e.jsxs(i.Group,{left:I.left,top:I.top,children:[e.jsx(c,{width:O,height:V,xScale:z,yScale:R,gridVisibility:_}),p.map(((a,t)=>e.jsx(i.Group,{children:a.data.map((i=>{const r=i?.label||C(i?.date),l=z(r);if(void 0===l)return null;const s=P.bandwidth(),n=l+(P(t.toString())??0),d=a.options?.stroke||y.colors[t%y.colors.length];return e.jsx(o.Bar,{x:n,y:R(i.value),width:s,height:V-(R(i.value)??0),fill:d,onMouseMove:N?e=>F(e,i.value,r,a.label,t):void 0,onMouseLeave:N?D:void 0},`bar-${t}-${r}`)}))},t))),e.jsx(a.AxisLeft,{scale:R}),e.jsx(a.AxisBottom,{scale:z,top:V})]})}),N&&B&&S&&e.jsx(u.BaseTooltip,{top:M||0,left:k||0,children:f(S)}),w&&e.jsx(h.BaseLegend,{items:E,orientation:L,className:x["bar-chart__legend"]})]})}));module.exports=b;
 //# 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","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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"}
+{"version":3,"file":"bar-chart.js","sources":["/@automattic/charts/../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["formatDateTick","timestamp","Date","toLocaleDateString","undefined","month","day","renderDefaultTooltip","tooltipData","_jsxs","className","styles","children","_jsx","yLabel","jsxs","xLabel","value","withResponsive","data","width","height","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","gridVisibility","renderTooltip","options","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","hideTooltip","showTooltip","useTooltip","tickFormat","axis","x","handleMouseMove","useCallback","event","seriesIndex","coords","localPoint","y","error","length","some","series","d","isNaN","label","date","getTime","validateData","clsx","margins","xMax","yMax","labels","map","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","legendItems","group","index","color","stroke","colors","role","Group","GridControl","xPos","barWidth","barX","barColor","Bar","fill","onMouseMove","onMouseLeave","jsx","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","BaseLegend","items","orientation"],"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/curve"),a=require("@visx/gradient"),i=require("@visx/xychart");require("@visx/xychart/lib/components/Tooltip");var r=require("clsx"),o=require("react"),s=require("../../providers/theme/theme-provider.js"),l=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)))]})},m=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var u=n.withResponsive((({data:n,width:u,height:h,className:p,margin:v,withTooltips:x=!0,showLegend:g=!1,legendOrientation:j="horizontal",withGradientFill:y=!1,smoothing:T=!0,renderTooltip:b=d,options:N={}})=>{const q=s.useChartTheme(),k=o.useId(),w=o.useMemo((()=>n.map((e=>({...e,data:e.data.sort(((e,t)=>e.date.getTime()-t.date.getTime()))})))),[n]),_=o.useMemo((()=>{const e=w?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({...q,colors:[...e,...q.colors]})}),[q,w]);v=o.useMemo((()=>{let e={};return"right"===N.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===N.axis?.x?.orientation&&(e={...e,top:20,bottom:10}),{...e,...v}}),[v,N]);const f=o.useMemo((()=>Math.min(w[0]?.data.length,Math.ceil(u/100))),[w,u]),A=(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")(w);if(A)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:A});const S=w.map(((e,t)=>({label:e.label,value:"",color:q.colors[t%q.colors.length]}))),D={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:_,width:u,height:h,margin:{top:10,right:0,bottom:20,left:40,...v},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:f,tickFormat:m,...N?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...N?.axis?.y}),w.map(((r,o)=>{const s=r.options?.stroke??_.colors[o%_.colors.length];return e.jsxs("g",{children:[y&&e.jsx(a.LinearGradient,{id:`area-gradient-${k}-${o+1}`,from:s,fromOpacity:.4,toOpacity:.1,to:_.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:r?.label,data:r.data,...D,fill:y?`url(#area-gradient-${k}-${o+1})`:void 0,renderLine:!0,curve:T?t.curveCatmullRom:t.curveLinear},r?.label)]},r?.label||o)})),x&&e.jsx(i.Tooltip,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:b})]}),g&&e.jsx(l.BaseLegend,{items:S,orientation:j,className:c["line-chart-legend"]})]})}));module.exports=u;
+"use strict";var e=require("react/jsx-runtime"),t=require("@visx/curve"),a=require("@visx/gradient"),i=require("@visx/xychart");require("@visx/xychart/lib/components/Tooltip");var r=require("clsx"),o=require("react"),n=require("../../providers/theme/theme-provider.js"),s=require("../legend/base-legend.js"),l=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)))]})},m=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var u=l.withResponsive((({data:l,width:u,height:h,className:p,margin:v,withTooltips:x=!0,showLegend:g=!1,legendOrientation:j="horizontal",withGradientFill:y=!1,smoothing:T=!0,renderTooltip:b=d,options:N={},onPointerDown:w,onPointerUp:q,onPointerMove:k,onPointerOut:D})=>{const _=n.useChartTheme(),f=o.useId(),A=o.useMemo((()=>l.map((e=>({...e,data:e.data.sort(((e,t)=>e.date.getTime()-t.date.getTime()))})))),[l]),M=o.useMemo((()=>{const e=A?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({..._,colors:[...e,..._.colors]})}),[_,A]);v=o.useMemo((()=>{let e={};return"right"===N.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===N.axis?.x?.orientation&&(e={...e,top:20,bottom:10}),{...e,...v}}),[v,N]);const P=o.useMemo((()=>Math.min(A[0]?.data.length,Math.ceil(u/100))),[A,u]),S=(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")(A);if(S)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:S});const L=A.map(((e,t)=>({label:e.label,value:"",color:_.colors[t%_.colors.length]}))),O={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:M,width:u,height:h,margin:{top:10,right:0,bottom:20,left:40,...v},xScale:{type:"time",...N?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...N?.yScale},onPointerDown:w,onPointerUp:q,onPointerMove:k,onPointerOut:D,pointerEventsDataKey:"nearest",children:[e.jsx(i.AnimatedGrid,{columns:!1,numTicks:4}),e.jsx(i.AnimatedAxis,{orientation:"bottom",numTicks:P,tickFormat:m,...N?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...N?.axis?.y}),A.map(((r,o)=>{const n=r.options?.stroke??M.colors[o%M.colors.length];return e.jsxs("g",{children:[y&&e.jsx(a.LinearGradient,{id:`area-gradient-${f}-${o+1}`,from:n,fromOpacity:.4,toOpacity:.1,to:M.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:r?.label,data:r.data,...O,fill:y?`url(#area-gradient-${f}-${o+1})`:void 0,renderLine:!0,curve:T?t.curveCatmullRom:t.curveLinear},r?.label)]},r?.label||o)})),x&&e.jsx(i.Tooltip,{detectBounds:!0,snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:b})]}),g&&e.jsx(s.BaseLegend,{items:L,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":["renderDefaultTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","timestamp","Date","undefined","month","day","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","smoothing","renderTooltip","options","providerTheme","useChartTheme","chartId","useId","dataSorted","useMemo","series","getTime","theme","seriesColors","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","xNumTicks","Math","min","length","ceil","error","some","isNaN","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","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveCatmullRom","curveLinear","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":["renderDefaultTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","timestamp","Date","undefined","month","day","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","smoothing","renderTooltip","options","onPointerDown","onPointerUp","onPointerMove","onPointerOut","providerTheme","useChartTheme","chartId","useId","dataSorted","useMemo","series","getTime","theme","seriesColors","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","xNumTicks","Math","min","length","ceil","error","some","isNaN","validateData","clsx","legendItems","group","index","label","color","accessors","xAccessor","d","yAccessor","role","XYChart","xScale","type","yScale","nice","zero","pointerEventsDataKey","jsx","AnimatedGrid","columns","numTicks","AnimatedAxis","tickFormat","seriesData","LinearGradient","id","from","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveCatmullRom","curveLinear","Tooltip","detectBounds","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","BaseLegend","items"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,8 +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, ReactNode, ComponentType, FC } from 'react';
+import { LineStyles, EventHandlerParams } from '@visx/xychart';
+import { CSSProperties, PointerEvent, ReactNode, ComponentType, FC } from 'react';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 
 type ValueOf<T> = T[keyof T];
@@ -118,6 +118,22 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
         bottom?: number;
         left?: number;
     };
+    /**
+     * Callback function for pointer down event
+     */
+    onPointerDown?: (event: EventHandlerParams<object>) => void;
+    /**
+     * Callback function for pointer down event
+     */
+    onPointerUp?: (event: EventHandlerParams<object>) => void;
+    /**
+     * Callback function for pointer down event
+     */
+    onPointerMove?: (event: EventHandlerParams<object>) => void;
+    /**
+     * Callback function for pointer up event
+     */
+    onPointerOut?: (event: PointerEvent<Element>) => void;
     /**
      * Whether to show tooltips on hover. False by default.
      */
@@ -154,7 +170,14 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
     };
 };
 
+type BarChartTooltipData = {
+    value: number;
+    xLabel: string;
+    yLabel: string;
+    seriesIndex: number;
+};
 interface BarChartProps extends BaseChartProps<SeriesData[]> {
+    renderTooltip?: (params: BarChartTooltipData) => ReactNode;
 }
 declare const _default$3: (props: Optional<BarChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
 

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

@@ -1,2 +1,2 @@
-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};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{AxisLeft as o,AxisBottom as e}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 n}from"@visx/shape";import{useTooltip as d}from"@visx/tooltip";import m from"clsx";import{useCallback as p}from"react";import{useChartTheme as c}from"../../providers/theme/theme-provider.js";import h 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=t=>new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric"}),x=o=>o?a("div",{className:f["bar-chart__tooltip"],children:[t("div",{className:f["bar-chart__tooltip-header"],children:o.yLabel}),a("div",{className:f["bar-chart__tooltip-row"],children:[a("span",{className:f["bar-chart__tooltip-label"],children:[o.xLabel,":"]}),t("span",{className:f["bar-chart__tooltip-value"],children:o.value})]})]}):null;var N=b((({data:b,width:N,height:w=400,className:_,margin:L={top:20,right:20,bottom:40,left:40},withTooltips:y=!1,showLegend:j=!1,legendOrientation:T="horizontal",gridVisibility:M="x",renderTooltip:S=x,options:k={}})=>{const D=c(),{tooltipOpen:F,tooltipLeft:I,tooltipTop:O,tooltipData:V,hideTooltip:$,showTooltip:z}=d(),q=k.axis?.x?.tickFormat??u;delete k.axis?.x?.tickFormat;const A=p(((t,a,o,e,r)=>{const l=i(t);l&&z({tooltipData:{value:a,xLabel:o,yLabel:e,seriesIndex:r},tooltipLeft:l.x,tooltipTop:l.y-10})}),[z]),B=(t=>t?.length?t.some((t=>t.data.some((t=>null===t.value||void 0===t.value||isNaN(t.value)||!t.label&&(!t.date||isNaN(t.date.getTime()))))))?"Invalid data":null:"No data available")(b);if(B)return t("div",{className:m("bar-chart",f["bar-chart"]),children:B});const C=L,E=N-C.left-C.right,G=w-C.top-C.bottom,H=b[0].data?.map((t=>t?.label||q(t?.date))),J=l({range:[0,E],domain:H,padding:.2}),K=l({range:[0,J.bandwidth()],domain:b.map(((t,a)=>a.toString())),padding:.1}),P=s({range:[G,0],domain:[0,Math.max(...b.map((t=>Math.max(...t.data.map((t=>t?.value||0))))))]}),Q=b.map(((t,a)=>({label:t.label,value:"",color:t.options?.stroke||D.colors[a%D.colors.length]})));return a("div",{className:m("bar-chart",f["bar-chart"],_),"data-testid":"bar-chart",role:"img","aria-label":"bar chart",children:[t("svg",{width:N,height:w,children:a(r,{left:C.left,top:C.top,children:[t(h,{width:E,height:G,xScale:J,yScale:P,gridVisibility:M}),b.map(((a,o)=>t(r,{children:a.data.map((e=>{const i=e?.label||q(e?.date),r=J(i);if(void 0===r)return null;const l=K.bandwidth(),s=r+(K(o.toString())??0),d=a.options?.stroke||D.colors[o%D.colors.length];return t(n,{x:s,y:P(e.value),width:l,height:G-(P(e.value)??0),fill:d,onMouseMove:y?t=>A(t,e.value,i,a.label,o):void 0,onMouseLeave:y?$:void 0},`bar-${o}-${i}`)}))},o))),t(o,{scale:P}),t(e,{scale:J,top:G})]})}),y&&F&&V&&t(g,{top:O||0,left:I||0,children:S(V)}),j&&t(v,{items:Q,orientation:T,className:f["bar-chart__legend"]})]})}));export{N 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","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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"}
+{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/bar-chart/bar-chart.tsx"],"sourcesContent":[null],"names":["formatDateTick","timestamp","Date","toLocaleDateString","undefined","month","day","renderDefaultTooltip","tooltipData","_jsxs","className","styles","children","_jsx","yLabel","xLabel","value","barChart","withResponsive","data","width","height","margin","top","right","bottom","left","withTooltips","showLegend","legendOrientation","gridVisibility","renderTooltip","options","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","hideTooltip","showTooltip","useTooltip","tickFormat","axis","x","handleMouseMove","useCallback","event","seriesIndex","coords","localPoint","y","error","length","some","series","d","isNaN","label","date","getTime","validateData","clsx","margins","xMax","yMax","labels","map","xScale","scaleBand","range","domain","padding","innerScale","bandwidth","_","i","toString","yScale","scaleLinear","Math","max","legendItems","group","index","color","stroke","colors","role","Group","GridControl","xPos","barWidth","barX","barColor","Bar","fill","onMouseMove","onMouseLeave","AxisLeft","scale","AxisBottom","BaseTooltip","Legend","items","orientation"],"mappings":"isBA2BA,MAAMA,EAAmBC,GACX,IAAIC,KAAMD,GACXE,wBAAoBC,EAAW,CAC1CC,MAAO,QACPC,IAAK,YAKDC,EAAyBC,GACvBA,EAGNC,EAAK,MAAA,CAAAC,UAAYC,EAAQ,sBAAsBC,SAAA,CAC9CC,EAAK,MAAA,CAAAH,UAAYC,EAAQ,6BAA6BC,SAAKJ,EAAYM,SACvEL,EAAA,MAAA,CAAKC,UAAYC,EAAQ,oCACxBF,EAAM,OAAA,CAAAC,UAAYC,EAAQ,4BAA4BC,SAAA,CAAKJ,EAAYO,OAAM,OAC7EF,EAAA,OAAA,CAAMH,UAAYC,EAAQ,4BAAiCC,SAAAJ,EAAYQ,cAP9C,KAmL7B,IAAeC,EAAAC,GApJuB,EACrCC,OACAC,QACAC,SAAS,IACTX,YACAY,SAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACjDC,gBAAe,EACfC,cAAa,EACbC,oBAAoB,aACpBC,iBAAiB,IACjBC,gBAAgBxB,EAChByB,UAAU,CAAE,MAEZ,MAAMC,EAAQC,KACRC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,EAAU7B,YAAEA,EAAW8B,YAAEA,EAAWC,YAAEA,GACvEC,IACKC,EAAaT,EAAQU,MAAMC,GAAGF,YAAczC,SAC3CgC,EAAQU,MAAMC,GAAGF,WAExB,MAAMG,EAAkBC,GACvB,CACCC,EACA9B,EACAD,EACAD,EACAiC,KAEA,MAAMC,EAASC,EAAYH,GACpBE,GACPT,EAAa,CACZ/B,YAAa,CAAEQ,QAAOD,SAAQD,SAAQiC,eACtCX,YAAaY,EAAOL,EACpBN,WAAYW,EAAOE,EAAI,IACrB,GAEJ,CAAEX,IAIGY,EAxDc,CAAEhC,GACfA,GAAMiC,OAEUjC,EAAKkC,MAAMC,GACjCA,EAAOnC,KAAKkC,MACXE,GACa,OAAZA,EAAEvC,YACUZ,IAAZmD,EAAEvC,OACFwC,MAAOD,EAAEvC,SACLuC,EAAEE,SAAaF,EAAEG,MAAQF,MAAOD,EAAEG,KAAKC,gBAIjB,eACtB,KAbsB,oBAuDfC,CAAczC,GAC5B,GAAKgC,EACJ,OAAOtC,EAAK,MAAA,CAAAH,UAAYmD,EAAM,YAAalD,EAAQ,cAAoBC,SAAAuC,IAGxE,MAAMW,EAAUxC,EACVyC,EAAO3C,EAAQ0C,EAAQpC,KAAOoC,EAAQtC,MACtCwC,EAAO3C,EAASyC,EAAQvC,IAAMuC,EAAQrC,OAGtCwC,EAAS9C,EAAM,GAAIA,MAAM+C,KAAKX,GAC5BA,GAAGE,OAAShB,EAAYc,GAAGG,QAI7BS,EAASC,EAAqB,CACnCC,MAAO,CAAE,EAAGN,GACZO,OAAQL,EACRM,QAAS,KAGJC,EAAaJ,EAAW,CAC7BC,MAAO,CAAE,EAAGF,EAAOM,aACnBH,OAAQnD,EAAK+C,KAAK,CAAEQ,EAAGC,IAAOA,EAAEC,aAChCL,QAAS,KAGJM,EAASC,EAAuB,CACrCT,MAAO,CAAEL,EAAM,GACfM,OAAQ,CACP,EACAS,KAAKC,OAAQ7D,EAAK+C,KAAKZ,GAAUyB,KAAKC,OAAQ1B,EAAOnC,KAAK+C,KAAKX,GAAKA,GAAGvC,OAAS,WAK5EiE,EAAc9D,EAAK+C,KAAK,CAAEgB,EAAOC,KAAa,CACnD1B,MAAOyB,EAAMzB,MACbzC,MAAO,GACPoE,MAAOF,EAAMlD,SAASqD,QAAUpD,EAAMqD,OAAQH,EAAQlD,EAAMqD,OAAOlC,YAGpE,OACC3C,SACCC,UAAYmD,EAAM,YAAalD,EAAQ,aAAeD,GAAW,cACrD,YACZ6E,KAAK,MAAK,aACC,YAEX3E,SAAA,CAAAC,EAAA,MAAA,CAAKO,MAAQA,EAAQC,OAASA,EAC7BT,SAAAH,EAAC+E,EAAM,CAAA9D,KAAOoC,EAAQpC,KAAOH,IAAMuC,EAAQvC,cAC1CV,EAAC4E,GACArE,MAAQ2C,EACR1C,OAAS2C,EACTG,OAASA,EACTU,OAASA,EACT/C,eAAiBA,IAEhBX,EAAK+C,KAAK,CAAEZ,EAAQP,IACrBlC,EAAC2E,EAAK,CAAA5E,SACH0C,EAAOnC,KAAK+C,KAAKX,IAClB,MAAMxC,EAASwC,GAAGE,OAAShB,EAAYc,GAAGG,MACpCgC,EAAOvB,EAAQpD,GACrB,QAAcX,IAATsF,EAAqB,OAAO,KAEjC,MAAMC,EAAWnB,EAAWC,YACtBmB,EAAOF,GAASlB,EAAYzB,EAAY6B,aAAgB,GACxDiB,EACLvC,EAAOtB,SAASqD,QAAUpD,EAAMqD,OAAQvC,EAAcd,EAAMqD,OAAOlC,QAIpE,OACCvC,EAACiF,EAAG,CAEHnD,EAAIiD,EACJ1C,EAAI2B,EAAQtB,EAAEvC,OACdI,MAAQuE,EACRtE,OAAS2C,GAASa,EAAQtB,EAAEvC,QAAW,GACvC+E,KAAOF,EACPG,YAAcrE,EAXamB,GAC5BF,EAAiBE,EAAOS,EAAEvC,MAAOD,EAAQuC,EAAOG,MAAOV,QAUJ3C,EAClD6F,aAAetE,EAAeW,OAAclC,GAPtC,OAAQ2C,KAAiBhC,IAS/B,KAxBSgC,KA4BdlC,EAACqF,EAAQ,CAACC,MAAQtB,IAClBhE,EAACuF,EAAW,CAAAD,MAAQhC,EAAS5C,IAAMyC,SAInCrC,GAAgBQ,GAAe3B,GAChCK,EAACwF,GAAY9E,IAAMc,GAAc,EAAIX,KAAOU,GAAe,EAACxB,SACzDmB,EAAevB,KAIjBoB,GACDf,EAACyF,EAAM,CACNC,MAAQtB,EACRuB,YAAc3E,EACdnB,UAAYC,EAAQ,yBAItB"}

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{curveCatmullRom as a,curveLinear as o}from"@visx/curve";import{LinearGradient as i}from"@visx/gradient";import{buildChartTheme as r,XYChart as l,AnimatedGrid as n,AnimatedAxis as s,AnimatedAreaSeries as c,Tooltip as m}from"@visx/xychart";import"@visx/xychart/lib/components/Tooltip";import d from"clsx";import{useId as h,useMemo as p}from"react";import{useChartTheme as u}from"../../providers/theme/theme-provider.js";import{BaseLegend as v}from"../legend/base-legend.js";import{withResponsive as g}from"../shared/with-responsive.js";import f from"./line-chart.module.scss.js";const y=({tooltipData:a})=>{const o=a?.nearestDatum?.datum;if(!o)return null;const i=Object.entries(a?.datumByKey||{}).map((([t,{datum:e}])=>({key:t,value:e.value}))).sort(((t,e)=>e.value-t.value));return e("div",{className:f["line-chart__tooltip"],children:[t("div",{className:f["line-chart__tooltip-date"],children:o.date?.toLocaleDateString()}),i.map((a=>e("div",{className:f["line-chart__tooltip-row"],children:[e("span",{className:f["line-chart__tooltip-label"],children:[a.key,":"]}),t("span",{className:f["line-chart__tooltip-value"],children:a.value})]},a.key)))]})},x=t=>new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric"});var b=g((({data:g,width:b,height:N,className:T,margin:k,withTooltips:_=!0,showLegend:w=!1,legendOrientation:D="horizontal",withGradientFill:S=!1,smoothing:j=!0,renderTooltip:L=y,options:O={}})=>{const $=u(),z=h(),A=p((()=>g.map((t=>({...t,data:t.data.sort(((t,e)=>t.date.getTime()-e.date.getTime()))})))),[g]),B=p((()=>{const t=A?.map((t=>t.options?.stroke??"")).filter(Boolean)??[];return r({...$,colors:[...t,...$.colors]})}),[$,A]);k=p((()=>{let t={};return"right"===O.axis?.y?.orientation&&(t={...t,right:40,left:0}),"top"===O.axis?.x?.orientation&&(t={...t,top:20,bottom:10}),{...t,...k}}),[k,O]);const F=p((()=>Math.min(A[0]?.data.length,Math.ceil(b/100))),[A,b]),G=(t=>t?.length?t.some((t=>t.data.some((t=>isNaN(t.value)||null===t.value||void 0===t.value||isNaN(t.date.getTime())))))?"Invalid data":null:"No data available")(A);if(G)return t("div",{className:d("line-chart",f["line-chart"]),children:G});const K=A.map(((t,e)=>({label:t.label,value:"",color:$.colors[e%$.colors.length]}))),M={xAccessor:t=>t?.date,yAccessor:t=>t?.value};return e("div",{className:d("line-chart",f["line-chart"],T),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[e(l,{theme:B,width:b,height:N,margin:{top:10,right:0,bottom:20,left:40,...k},xScale:{type:"time",...O?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...O?.yScale},children:[t(n,{columns:!1,numTicks:4}),t(s,{orientation:"bottom",numTicks:F,tickFormat:x,...O?.axis?.x}),t(s,{orientation:"left",numTicks:4,...O?.axis?.y}),A.map(((r,l)=>{const n=r.options?.stroke??B.colors[l%B.colors.length];return e("g",{children:[S&&t(i,{id:`area-gradient-${z}-${l+1}`,from:n,fromOpacity:.4,toOpacity:.1,to:B.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),t(c,{dataKey:r?.label,data:r.data,...M,fill:S?`url(#area-gradient-${z}-${l+1})`:void 0,renderLine:!0,curve:j?a:o},r?.label)]},r?.label||l)})),_&&t(m,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:L})]}),w&&t(v,{items:K,orientation:D,className:f["line-chart-legend"]})]})}));export{b as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{curveCatmullRom as o,curveLinear as a}from"@visx/curve";import{LinearGradient as i}from"@visx/gradient";import{buildChartTheme as r,XYChart as n,AnimatedGrid as l,AnimatedAxis as s,AnimatedAreaSeries as c,Tooltip as m}from"@visx/xychart";import"@visx/xychart/lib/components/Tooltip";import d from"clsx";import{useId as h,useMemo as p}from"react";import{useChartTheme as u}from"../../providers/theme/theme-provider.js";import{BaseLegend as v}from"../legend/base-legend.js";import{withResponsive as g}from"../shared/with-responsive.js";import f from"./line-chart.module.scss.js";const y=({tooltipData:o})=>{const a=o?.nearestDatum?.datum;if(!a)return null;const i=Object.entries(o?.datumByKey||{}).map((([t,{datum:e}])=>({key:t,value:e.value}))).sort(((t,e)=>e.value-t.value));return e("div",{className:f["line-chart__tooltip"],children:[t("div",{className:f["line-chart__tooltip-date"],children:a.date?.toLocaleDateString()}),i.map((o=>e("div",{className:f["line-chart__tooltip-row"],children:[e("span",{className:f["line-chart__tooltip-label"],children:[o.key,":"]}),t("span",{className:f["line-chart__tooltip-value"],children:o.value})]},o.key)))]})},x=t=>new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric"});var b=g((({data:g,width:b,height:N,className:T,margin:w,withTooltips:k=!0,showLegend:D=!1,legendOrientation:_="horizontal",withGradientFill:P=!1,smoothing:S=!0,renderTooltip:j=y,options:O={},onPointerDown:L,onPointerUp:M,onPointerMove:$,onPointerOut:B})=>{const K=u(),z=h(),A=p((()=>g.map((t=>({...t,data:t.data.sort(((t,e)=>t.date.getTime()-e.date.getTime()))})))),[g]),F=p((()=>{const t=A?.map((t=>t.options?.stroke??"")).filter(Boolean)??[];return r({...K,colors:[...t,...K.colors]})}),[K,A]);w=p((()=>{let t={};return"right"===O.axis?.y?.orientation&&(t={...t,right:40,left:0}),"top"===O.axis?.x?.orientation&&(t={...t,top:20,bottom:10}),{...t,...w}}),[w,O]);const G=p((()=>Math.min(A[0]?.data.length,Math.ceil(b/100))),[A,b]),U=(t=>t?.length?t.some((t=>t.data.some((t=>isNaN(t.value)||null===t.value||void 0===t.value||isNaN(t.date.getTime())))))?"Invalid data":null:"No data available")(A);if(U)return t("div",{className:d("line-chart",f["line-chart"]),children:U});const C=A.map(((t,e)=>({label:t.label,value:"",color:K.colors[e%K.colors.length]}))),E={xAccessor:t=>t?.date,yAccessor:t=>t?.value};return e("div",{className:d("line-chart",f["line-chart"],T),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[e(n,{theme:F,width:b,height:N,margin:{top:10,right:0,bottom:20,left:40,...w},xScale:{type:"time",...O?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...O?.yScale},onPointerDown:L,onPointerUp:M,onPointerMove:$,onPointerOut:B,pointerEventsDataKey:"nearest",children:[t(l,{columns:!1,numTicks:4}),t(s,{orientation:"bottom",numTicks:G,tickFormat:x,...O?.axis?.x}),t(s,{orientation:"left",numTicks:4,...O?.axis?.y}),A.map(((r,n)=>{const l=r.options?.stroke??F.colors[n%F.colors.length];return e("g",{children:[P&&t(i,{id:`area-gradient-${z}-${n+1}`,from:l,fromOpacity:.4,toOpacity:.1,to:F.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),t(c,{dataKey:r?.label,data:r.data,...E,fill:P?`url(#area-gradient-${z}-${n+1})`:void 0,renderLine:!0,curve:S?o:a},r?.label)]},r?.label||n)})),k&&t(m,{detectBounds:!0,snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:j})]}),D&&t(v,{items:C,orientation:_,className:f["line-chart-legend"]})]})}));export{b 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":["renderDefaultTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","timestamp","Date","undefined","month","day","lineChart","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","smoothing","renderTooltip","options","providerTheme","useChartTheme","chartId","useId","dataSorted","useMemo","series","getTime","theme","seriesColors","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","xNumTicks","Math","min","length","ceil","error","some","isNaN","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","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveCatmullRom","curveLinear","Tooltip","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"0nBAmBA,MAaMA,EAAuB,EAC5BC,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,MAAMC,uBAEpBhB,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,EAAmBC,GACX,IAAIC,KAAMD,GACXH,wBAAoBK,EAAW,CAC1CC,MAAO,QACPC,IAAK,YAwKP,IAAeC,EAAAC,GAnJyB,EACvCC,OACAC,QACAC,SACAjB,YACAkB,SACAC,gBAAe,EACfC,cAAa,EACbC,oBAAoB,aACpBC,oBAAmB,EACnBC,aAAY,EACZC,gBAAgBvC,EAChBwC,UAAU,CAAA,MAEV,MAAMC,EAAgBC,IAChBC,EAAUC,IAEVC,EAAaC,GAClB,IACChB,EAAKtB,KAAKuC,IAAY,IAClBA,EACHjB,KAAMiB,EAAOjB,KAAKnB,MAAM,CAAEC,EAAGC,IAAOD,EAAEO,KAAK6B,UAAYnC,EAAEM,KAAK6B,iBAEhE,CAAElB,IAGGmB,EAAQH,GAAS,KACtB,MAAMI,EACLL,GAAYrC,KAAKuC,GAAUA,EAAOP,SAASW,QAAU,KAAKC,OAAQC,UAAa,GAChF,OAAOC,EAAiB,IACpBb,EACHc,OAAQ,IAAKL,KAAiBT,EAAcc,SAC1C,GACD,CAAEd,EAAeI,IAEpBZ,EAASa,GAAS,KAGjB,IAAIU,EAAgB,CAAA,EAQpB,MAPsC,UAAjChB,EAAQiB,MAAMC,GAAGC,cACrBH,EAAgB,IAAKA,EAAeI,MAAO,GAAIC,KAAM,IAEhB,QAAjCrB,EAAQiB,MAAMK,GAAGH,cACrBH,EAAgB,IAAKA,EAAeO,IAAK,GAAIC,OAAQ,KAG/C,IAAKR,KAAkBvB,EAAQ,GACpC,CAAEA,EAAQO,IAEb,MAAMyB,EAAYnB,GACjB,IAAMoB,KAAKC,IAAKtB,EAAY,IAAKf,KAAKsC,OAAQF,KAAKG,KAAMtC,EA5HtC,OA6HnB,CAAEc,EAAYd,IAGTuC,EAvEc,CAAExC,GACfA,GAAMsC,OAEUtC,EAAKyC,MAAMxB,GACjCA,EAAOjB,KAAKyC,MACXlD,GACCmD,MAAOnD,EAAMX,QACG,OAAhBW,EAAMX,YACUe,IAAhBJ,EAAMX,OACN8D,MAAOnD,EAAMF,KAAK6B,eAIQ,eACtB,KAbsB,oBAsEfyB,CAAc5B,GAC5B,GAAKyB,EACJ,OAAOpD,EAAK,MAAA,CAAAH,UAAY2D,EAAM,aAAc1D,EAAQ,eAAqBC,SAAAqD,IAI1E,MAAMK,EAAc9B,EAAWrC,KAAK,CAAEoE,EAAOC,KAAa,CACzDC,MAAOF,EAAME,MACbpE,MAAO,GACPqE,MAAOtC,EAAcc,OAAQsB,EAAQpC,EAAcc,OAAOa,YAGrDY,EAAY,CACjBC,UAAaC,GAAsBA,GAAG/D,KACtCgE,UAAaD,GAAsBA,GAAGxE,OAGvC,OACCI,EAAA,MAAA,CACCC,UAAY2D,EAAM,aAAc1D,EAAQ,cAAgBD,GAAW,cACvD,aACZqE,KAAK,MAAK,aACC,aAAYnE,SAAA,CAEvBH,EAACuE,EACA,CAAApC,MAAQA,EACRlB,MAAQA,EACRC,OAASA,EACTC,OAAS,CAAE8B,IAAK,GAAIH,MAAO,EAAGI,OAAQ,GAAIH,KAAM,MAAO5B,GAEvDqD,OAAS,CAAEC,KAAM,UAAW/C,GAAS8C,QACrCE,OAAS,CAAED,KAAM,SAAUE,MAAM,EAAMC,MAAM,KAAUlD,GAASgD,QAEhEvE,SAAA,CAAAC,EAACyE,EAAa,CAAAC,SAAU,EAAQC,SAAW,IAC3C3E,EAAC4E,GACAnC,YAAY,SACZkC,SAAW5B,EACX8B,WAAazE,KACRkB,GAASiB,MAAMK,IAErB5C,EAAC4E,EAAa,CAAAnC,YAAY,OAAOkC,SAAW,KAASrD,GAASiB,MAAMC,IAElEb,EAAWrC,KAAK,CAAEwF,EAAYnB,KAC/B,MAAM1B,EAAS6C,EAAWxD,SAASW,QAAUF,EAAMM,OAAQsB,EAAQ5B,EAAMM,OAAOa,QAChF,OACCtD,EACG,IAAA,CAAAG,SAAA,CAAAoB,GACDnB,EAAC+E,EAAc,CACdC,GAAK,iBAAkBvD,KAAakC,EAAQ,IAC5CsB,KAAOhD,EACPiD,YAAc,GACdC,UAAY,GACZC,GAAKrD,EAAMsD,mBACNP,EAAWxD,SAASgE,SACb,cAAA,kBAGdtF,EAACuF,EAEA,CAAAC,QAAUV,GAAYlB,MACtBhD,KAAOkE,EAAWlE,QACbkD,EACL2B,KACCtE,EAAmB,sBAAuBM,KAAakC,EAAQ,UAAQpD,EAExEmF,YAAa,EACbC,MAAQvE,EAAYwE,EAAkBC,GARhCf,GAAYlB,SAbXkB,GAAYlB,OAASD,EAwB7B,IAGD3C,GACDhB,EAAC8F,GACAC,qBAAmB,EACnBC,qBACA,EAAAC,oBACA5E,cAAgBA,OAKjBJ,GACDjB,EAACkG,EACA,CAAAC,MAAQ1C,EACRhB,YAAcvB,EACdrB,UAAYC,EAAQ,yBAItB"}
+{"version":3,"file":"line-chart.js","sources":["../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["renderDefaultTooltip","tooltipData","nearestDatum","datum","tooltipPoints","Object","entries","datumByKey","map","key","value","sort","a","b","_jsxs","className","styles","children","_jsx","date","toLocaleDateString","point","formatDateTick","timestamp","Date","undefined","month","day","lineChart","withResponsive","data","width","height","margin","withTooltips","showLegend","legendOrientation","withGradientFill","smoothing","renderTooltip","options","onPointerDown","onPointerUp","onPointerMove","onPointerOut","providerTheme","useChartTheme","chartId","useId","dataSorted","useMemo","series","getTime","theme","seriesColors","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","xNumTicks","Math","min","length","ceil","error","some","isNaN","validateData","clsx","legendItems","group","index","label","color","accessors","xAccessor","d","yAccessor","role","XYChart","xScale","type","yScale","nice","zero","pointerEventsDataKey","AnimatedGrid","columns","numTicks","AnimatedAxis","tickFormat","seriesData","LinearGradient","id","from","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","curveCatmullRom","curveLinear","Tooltip","detectBounds","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.8.4",
+	"version": "0.10.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -46,7 +46,7 @@
 		"./style.css": "./dist/mjs/style.css"
 	},
 	"dependencies": {
-		"@babel/runtime": "7.26.0",
+		"@babel/runtime": "7.26.10",
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
 		"@visx/curve": "3.12.0",
@@ -87,8 +87,8 @@
 		"@types/jest": "^29.0.0",
 		"@types/react": "18.3.18",
 		"@types/react-dom": "18.3.5",
-		"@wordpress/babel-plugin-import-jsx-pragma": "5.17.0",
-		"@wordpress/element": "6.17.0",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.19.0",
+		"@wordpress/element": "6.19.0",
 		"babel-jest": "^29.7.0",
 		"babel-loader": "9.1.2",
 		"clean-webpack-plugin": "^4.0.0",

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

@@ -5,7 +5,7 @@ import { scaleBand, scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
-import { FC, useCallback, type MouseEvent } from 'react';
+import { FC, useCallback, type MouseEvent, ReactNode } from 'react';
 import { useChartTheme } from '../../providers/theme';
 import { GridControl } from '../grid-control';
 import { Legend } from '../legend';
@@ -21,22 +21,69 @@ type BarChartTooltipData = {
 	seriesIndex: number;
 };
 
-interface BarChartProps extends BaseChartProps< SeriesData[] > {}
+interface BarChartProps extends BaseChartProps< SeriesData[] > {
+	renderTooltip?: ( params: BarChartTooltipData ) => ReactNode;
+}
+
+const formatDateTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.toLocaleDateString( undefined, {
+		month: 'short',
+		day: 'numeric',
+	} );
+};
+
+// Default tooltip renderer
+const renderDefaultTooltip = ( tooltipData: BarChartTooltipData ) => {
+	if ( ! tooltipData ) return null;
+
+	return (
+		<div className={ styles[ 'bar-chart__tooltip' ] }>
+			<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ tooltipData.yLabel }</div>
+			<div className={ styles[ 'bar-chart__tooltip-row' ] }>
+				<span className={ styles[ 'bar-chart__tooltip-label' ] }>{ tooltipData.xLabel }:</span>
+				<span className={ styles[ 'bar-chart__tooltip-value' ] }>{ tooltipData.value }</span>
+			</div>
+		</div>
+	);
+};
+
+// Validation function similar to LineChart
+const validateData = ( data: SeriesData[] ) => {
+	if ( ! data?.length ) return 'No data available';
+
+	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() ) ) )
+		)
+	);
+
+	if ( hasInvalidData ) return 'Invalid data';
+	return null;
+};
 
 const BarChart: FC< BarChartProps > = ( {
 	data,
+	width,
+	height = 400,
+	className,
 	margin = { top: 20, right: 20, bottom: 40, left: 40 },
 	withTooltips = false,
 	showLegend = false,
 	legendOrientation = 'horizontal',
-	className,
 	gridVisibility = 'x',
-	width,
-	height = 400,
+	renderTooltip = renderDefaultTooltip,
+	options = {},
 } ) => {
 	const theme = useChartTheme();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< BarChartTooltipData >();
+	const tickFormat = options.axis?.x?.tickFormat ?? formatDateTick;
+	delete options.axis?.x?.tickFormat;
 
 	const handleMouseMove = useCallback(
 		(
@@ -57,25 +104,10 @@ const BarChart: FC< BarChartProps > = ( {
 		[ showTooltip ]
 	);
 
-	// Check for empty data
-	if ( ! data?.length ) {
-		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>;
+	// Validate data using the same pattern as LineChart
+	const error = validateData( data );
+	if ( error ) {
+		return <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;
 	}
 
 	const margins = margin;
@@ -83,7 +115,9 @@ const BarChart: FC< BarChartProps > = ( {
 	const yMax = height - margins.top - margins.bottom;
 
 	// Get labels for x-axis from the first series (assuming all series have same labels)
-	const labels = data[ 0 ].data?.map( d => d?.label || '' );
+	const labels = data[ 0 ].data?.map( d => {
+		return d?.label || tickFormat( d?.date );
+	} );
 
 	// Create scales
 	const xScale = scaleBand< string >( {
@@ -110,7 +144,7 @@ const BarChart: FC< BarChartProps > = ( {
 	const legendItems = data.map( ( group, index ) => ( {
 		label: group.label, // Label for each unique group
 		value: '', // Empty string since we don't want to show a specific value
-		color: theme.colors[ index % theme.colors.length ],
+		color: group.options?.stroke || theme.colors[ index % theme.colors.length ],
 	} ) );
 
 	return (
@@ -132,23 +166,25 @@ const BarChart: FC< BarChartProps > = ( {
 					{ data.map( ( series, seriesIndex ) => (
 						<Group key={ seriesIndex }>
 							{ series.data.map( d => {
-								const xPos = xScale( d?.label || '' );
+								const xLabel = d?.label || tickFormat( d?.date );
+								const xPos = xScale( xLabel );
 								if ( xPos === undefined ) return null;
 
 								const barWidth = innerScale.bandwidth();
 								const barX = xPos + ( innerScale( seriesIndex.toString() ) ?? 0 );
-
+								const barColor =
+									series.options?.stroke || theme.colors[ seriesIndex % theme.colors.length ];
 								const handleBarMouseMove = ( event: MouseEvent< SVGRectElement > ) =>
-									handleMouseMove( event, d.value, d?.label || '', series.label, seriesIndex );
+									handleMouseMove( event, d.value, xLabel, series.label, seriesIndex );
 
 								return (
 									<Bar
-										key={ `bar-${ seriesIndex }-${ d.label }` }
+										key={ `bar-${ seriesIndex }-${ xLabel }` }
 										x={ barX }
 										y={ yScale( d.value ) }
 										width={ barWidth }
 										height={ yMax - ( yScale( d.value ) ?? 0 ) }
-										fill={ theme.colors[ seriesIndex % theme.colors.length ] }
+										fill={ barColor }
 										onMouseMove={ withTooltips ? handleBarMouseMove : undefined }
 										onMouseLeave={ withTooltips ? hideTooltip : undefined }
 									/>
@@ -163,12 +199,7 @@ const BarChart: FC< BarChartProps > = ( {
 
 			{ withTooltips && tooltipOpen && tooltipData && (
 				<BaseTooltip top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-					<div>
-						<div>{ tooltipData.yLabel }</div>
-						<div>
-							{ tooltipData.xLabel }: { tooltipData.value }
-						</div>
-					</div>
+					{ renderTooltip( tooltipData ) }
 				</BaseTooltip>
 			) }
 
@@ -183,5 +214,4 @@ const BarChart: FC< BarChartProps > = ( {
 	);
 };
 
-BarChart.displayName = 'BarChart';
 export default withResponsive< BarChartProps >( BarChart );

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

@@ -104,6 +104,10 @@ const LineChart: FC< LineChartProps > = ( {
 	smoothing = true,
 	renderTooltip = renderDefaultTooltip,
 	options = {},
+	onPointerDown = undefined,
+	onPointerUp = undefined,
+	onPointerMove = undefined,
+	onPointerOut = undefined,
 } ) => {
 	const providerTheme = useChartTheme();
 	const chartId = useId(); // Ensure unique ids for gradient fill.
@@ -177,6 +181,11 @@ const LineChart: FC< LineChartProps > = ( {
 				// xScale and yScale could be set in Axis as well, but they are `scale` props there.
 				xScale={ { type: 'time', ...options?.xScale } }
 				yScale={ { type: 'linear', nice: true, zero: false, ...options?.yScale } }
+				onPointerDown={ onPointerDown }
+				onPointerUp={ onPointerUp }
+				onPointerMove={ onPointerMove }
+				onPointerOut={ onPointerOut }
+				pointerEventsDataKey="nearest"
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
 				<AnimatedAxis
@@ -219,6 +228,7 @@ const LineChart: FC< LineChartProps > = ( {
 
 				{ withTooltips && (
 					<Tooltip
+						detectBounds
 						snapTooltipToDatumX
 						snapTooltipToDatumY
 						showSeriesGlyphs

package/src/types.ts

@@ -1,7 +1,7 @@
 import { Orientation } from '@visx/axis';
 import { ScaleType } from '@visx/scale';
-import { LineStyles } from '@visx/xychart';
-import type { CSSProperties } from 'react';
+import { EventHandlerParams, LineStyles } from '@visx/xychart';
+import type { CSSProperties, PointerEvent } from 'react';
 
 type ValueOf< T > = T[ keyof T ];
 
@@ -125,6 +125,22 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 		bottom?: number;
 		left?: number;
 	};
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerDown?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerUp?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerMove?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer up event
+	 */
+	onPointerOut?: ( event: PointerEvent< Element > ) => void;
 	/**
 	 * Whether to show tooltips on hover. False by default.
 	 */