@automattic/charts 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.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]
+
 ## [0.8.3] - 2025-02-25
 ### Changed
 - Set options as optional for series [#42047]
@@ -124,6 +132,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.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
 [0.8.1]: https://github.com/Automattic/charts/compare/v0.8.0...v0.8.1

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:x,withTooltips:v=!0,showLegend:g=!1,legendOrientation:j="horizontal",withGradientFill:y=!1,smoothing:T=!0,renderTooltip:b=d,options:N={}})=>{const q=s.useChartTheme(),f=o.useId(),k=o.useMemo((()=>n.map((e=>({...e,data:e.data.sort(((e,t)=>e.date.getTime()-t.date.getTime()))})))),[n]),w=o.useMemo((()=>{const e=k?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({...q,colors:[...e,...q.colors]})}),[q,k]);x=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,...x}}),[x,N]);const _=o.useMemo((()=>Math.max(Math.floor(Math.min(k[0]?.data.length,u/60)),5)),[k,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")(k);if(A)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:A});const S=k.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:w,width:u,height:h,margin:{top:10,right:0,bottom:20,left:40,...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:_,tickFormat:m,...N?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...N?.axis?.y}),k.map(((r,o)=>{const s=r.options?.stroke??w.colors[o%w.colors.length];return e.jsxs("g",{children:[y&&e.jsx(a.LinearGradient,{id:`area-gradient-${f}-${o+1}`,from:s,fromOpacity:.4,toOpacity:.1,to:w.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:r?.label,data:r.data,...D,fill:y?`url(#area-gradient-${f}-${o+1})`:void 0,renderLine:!0,curve:T?t.curveCatmullRom:t.curveLinear},r?.label)]},r?.label||o)})),v&&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","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","max","floor","min","length","error","some","isNaN","validateData","clsx","legendItems","group","index","label","color","accessors","xAccessor","d","yAccessor","role","XYChart","xScale","type","yScale","nice","zero","jsx","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":"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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.
      */

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 x=({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)))]})},y=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=x,options:O={}})=>{const $=u(),M=h(),z=p((()=>g.map((t=>({...t,data:t.data.sort(((t,e)=>t.date.getTime()-e.date.getTime()))})))),[g]),A=p((()=>{const t=z?.map((t=>t.options?.stroke??"")).filter(Boolean)??[];return r({...$,colors:[...t,...$.colors]})}),[$,z]);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 B=p((()=>Math.max(Math.floor(Math.min(z[0]?.data.length,b/60)),5)),[z,b]),F=(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")(z);if(F)return t("div",{className:d("line-chart",f["line-chart"]),children:F});const G=z.map(((t,e)=>({label:t.label,value:"",color:$.colors[e%$.colors.length]}))),K={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:A,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:B,tickFormat:y,...O?.axis?.x}),t(s,{orientation:"left",numTicks:4,...O?.axis?.y}),z.map(((r,l)=>{const n=r.options?.stroke??A.colors[l%A.colors.length];return e("g",{children:[S&&t(i,{id:`area-gradient-${M}-${l+1}`,from:n,fromOpacity:.4,toOpacity:.1,to:A.backgroundColor,...r.options?.gradient,"data-testid":"line-gradient"}),t(c,{dataKey:r?.label,data:r.data,...K,fill:S?`url(#area-gradient-${M}-${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:G,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","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","max","floor","min","length","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":"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"}
+{"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.3",
+	"version": "0.9.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

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

@@ -17,7 +17,7 @@ import { withResponsive } from '../shared/with-responsive';
 import styles from './line-chart.module.scss';
 import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
 
-const X_TICK_WIDTH = 60;
+const X_TICK_WIDTH = 100;
 
 interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	withGradientFill: boolean;
@@ -66,8 +66,8 @@ const renderDefaultTooltip = ( {
 	);
 };
 
-const formatDateTick = ( value: number ) => {
-	const date = new Date( value );
+const formatDateTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
 	return date.toLocaleDateString( undefined, {
 		month: 'short',
 		day: 'numeric',
@@ -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.
@@ -141,8 +145,7 @@ const LineChart: FC< LineChartProps > = ( {
 	}, [ margin, options ] );
 
 	const xNumTicks = useMemo(
-		() =>
-			Math.max( Math.floor( Math.min( dataSorted[ 0 ]?.data.length, width / X_TICK_WIDTH ) ), 5 ),
+		() => Math.min( dataSorted[ 0 ]?.data.length, Math.ceil( width / X_TICK_WIDTH ) ),
 		[ dataSorted, width ]
 	);
 
@@ -175,8 +178,14 @@ const LineChart: FC< LineChartProps > = ( {
 				width={ width }
 				height={ height }
 				margin={ { top: 10, right: 0, bottom: 20, left: 40, ...margin } }
+				// 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.
 	 */