@automattic/charts 0.8.2 → 0.8.4

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.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]
+- Update package dependencies. [#41955]
+
 ## [0.8.2] - 2025-02-19
 ### Added
 - Add yScale options support. [#41866]
@@ -119,6 +128,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.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
 [0.8.0]: https://github.com/Automattic/charts/compare/v0.7.1...v0.8.0

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"),s=require("react"),o=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)))]})},h=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var m=n.withResponsive((({data:n,width:m,height:u,className:p,margin:v,withTooltips:x=!0,showLegend:g=!1,legendOrientation:j="horizontal",withGradientFill:y=!1,smoothing:b=!0,renderTooltip:T=d,options:N={}})=>{const q=o.useChartTheme(),w=s.useMemo((()=>{const e=n?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({...q,colors:[...e,...q.colors]})}),[q,n]);v=s.useMemo((()=>{let e={};return"right"===N.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===N.axis?.x?.orientation&&(e={...e,top:40,bottom:0}),{...e,...v}}),[v,N]);const _=(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(_)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:_});const k=n.map(((e,t)=>({label:e.label,value:"",color:q.colors[t%q.colors.length]}))),A={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:m,height:u,margin:{top:0,right:0,bottom:0,left:0,...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:5,tickFormat:h,...N?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...N?.axis?.y}),n.map(((r,s)=>{const o=r.options?.stroke??w.colors[s%w.colors.length];return e.jsxs("g",{children:[y&&e.jsx(a.LinearGradient,{id:`area-gradient-${s+1}`,from:o,to:"white",toOpacity:.1,...r.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:r?.label,data:r.data,...A,fill:y?`url(#area-gradient-${s+1})`:void 0,renderLine:!0,curve:b?t.curveCatmullRom:t.curveLinear},r?.label)]},r?.label||s)})),x&&e.jsx(i.Tooltip,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:T})]}),g&&e.jsx(l.BaseLegend,{items:k,orientation:j,className:c["line-chart-legend"]})]})}));module.exports=m;
+"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;
 //# 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","theme","useMemo","seriesColors","series","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","error","length","some","isNaN","getTime","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","to","toOpacity","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","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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"}

package/dist/index.d.ts

@@ -21,10 +21,11 @@ type SeriesData = {
     group?: string;
     label: string;
     data: DataPointDate[] | DataPoint[];
-    options: {
+    options?: {
         gradient?: {
             from: string;
             to: string;
+            fromOpacity?: number;
             toOpacity?: number;
         };
         stroke?: string;

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{useMemo as h}from"react";import{useChartTheme as p}from"../../providers/theme/theme-provider.js";import{BaseLegend as u}from"../legend/base-legend.js";import{withResponsive as v}from"../shared/with-responsive.js";import g from"./line-chart.module.scss.js";const f=({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:g["line-chart__tooltip"],children:[t("div",{className:g["line-chart__tooltip-date"],children:o.date?.toLocaleDateString()}),i.map((a=>e("div",{className:g["line-chart__tooltip-row"],children:[e("span",{className:g["line-chart__tooltip-label"],children:[a.key,":"]}),t("span",{className:g["line-chart__tooltip-value"],children:a.value})]},a.key)))]})},x=t=>new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric"});var y=v((({data:v,width:y,height:b,className:N,margin:T,withTooltips:w=!0,showLegend:_=!1,legendOrientation:k="horizontal",withGradientFill:D=!1,smoothing:S=!0,renderTooltip:j=f,options:L={}})=>{const O=p(),z=h((()=>{const t=v?.map((t=>t.options?.stroke??"")).filter(Boolean)??[];return r({...O,colors:[...t,...O.colors]})}),[O,v]);T=h((()=>{let t={};return"right"===L.axis?.y?.orientation&&(t={...t,right:40,left:0}),"top"===L.axis?.x?.orientation&&(t={...t,top:40,bottom:0}),{...t,...T}}),[T,L]);const A=(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")(v);if(A)return t("div",{className:d("line-chart",g["line-chart"]),children:A});const B=v.map(((t,e)=>({label:t.label,value:"",color:O.colors[e%O.colors.length]}))),F={xAccessor:t=>t?.date,yAccessor:t=>t?.value};return e("div",{className:d("line-chart",g["line-chart"],N),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[e(l,{theme:z,width:y,height:b,margin:{top:0,right:0,bottom:0,left:0,...T},xScale:{type:"time",...L?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...L?.yScale},children:[t(n,{columns:!1,numTicks:4}),t(s,{orientation:"bottom",numTicks:5,tickFormat:x,...L?.axis?.x}),t(s,{orientation:"left",numTicks:4,...L?.axis?.y}),v.map(((r,l)=>{const n=r.options?.stroke??z.colors[l%z.colors.length];return e("g",{children:[D&&t(i,{id:`area-gradient-${l+1}`,from:n,to:"white",toOpacity:.1,...r.options?.gradient,"data-testid":"line-gradient"}),t(c,{dataKey:r?.label,data:r.data,...F,fill:D?`url(#area-gradient-${l+1})`:void 0,renderLine:!0,curve:S?a:o},r?.label)]},r?.label||l)})),w&&t(m,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:j})]}),_&&t(u,{items:B,orientation:k,className:g["line-chart-legend"]})]})}));export{y as default};
+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};
 //# 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","theme","useMemo","seriesColors","series","stroke","filter","Boolean","buildChartTheme","colors","defaultMargin","axis","y","orientation","right","left","x","top","bottom","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","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","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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -78,8 +78,8 @@
 		"@rollup/plugin-node-resolve": "15.3.0",
 		"@rollup/plugin-terser": "0.4.3",
 		"@rollup/plugin-typescript": "12.1.0",
-		"@storybook/blocks": "8.4.7",
-		"@storybook/react": "8.4.7",
+		"@storybook/blocks": "8.5.8",
+		"@storybook/react": "8.5.8",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -110,7 +110,7 @@
 		"sass": "1.64.1",
 		"sass-embedded": "1.83.0",
 		"sass-loader": "^13.0.0",
-		"storybook": "8.4.7",
+		"storybook": "8.5.8",
 		"tsconfig-paths-webpack-plugin": "4.2.0",
 		"typescript": "5.7.2",
 		"webpack": "^5.88.0",

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

@@ -10,13 +10,15 @@ import {
 } from '@visx/xychart';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import clsx from 'clsx';
-import { FC, ReactNode, useMemo } from 'react';
+import { FC, ReactNode, useId, useMemo } from 'react';
 import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import { withResponsive } from '../shared/with-responsive';
 import styles from './line-chart.module.scss';
 import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
 
+const X_TICK_WIDTH = 100;
+
 interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	withGradientFill: boolean;
 	smoothing?: boolean;
@@ -64,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,15 +106,25 @@ const LineChart: FC< LineChartProps > = ( {
 	options = {},
 } ) => {
 	const providerTheme = useChartTheme();
+	const chartId = useId(); // Ensure unique ids for gradient fill.
+
+	const dataSorted = useMemo(
+		() =>
+			data.map( series => ( {
+				...series,
+				data: series.data.sort( ( a, b ) => a.date.getTime() - b.date.getTime() ),
+			} ) ),
+		[ data ]
+	);
 
 	const theme = useMemo( () => {
 		const seriesColors =
-			data?.map( series => series.options?.stroke ?? '' ).filter( Boolean ) ?? [];
+			dataSorted?.map( series => series.options?.stroke ?? '' ).filter( Boolean ) ?? [];
 		return buildChartTheme( {
 			...providerTheme,
 			colors: [ ...seriesColors, ...providerTheme.colors ],
 		} );
-	}, [ providerTheme, data ] );
+	}, [ providerTheme, dataSorted ] );
 
 	margin = useMemo( () => {
 		// Auto-margin unless specified to make room for axis labels.
@@ -122,19 +134,24 @@ const LineChart: FC< LineChartProps > = ( {
 			defaultMargin = { ...defaultMargin, right: 40, left: 0 };
 		}
 		if ( options.axis?.x?.orientation === 'top' ) {
-			defaultMargin = { ...defaultMargin, top: 40, bottom: 0 };
+			defaultMargin = { ...defaultMargin, top: 20, bottom: 10 };
 		}
 		// Merge default margin with user-specified margin.
 		return { ...defaultMargin, ...margin };
 	}, [ margin, options ] );
 
-	const error = validateData( data );
+	const xNumTicks = useMemo(
+		() => Math.min( dataSorted[ 0 ]?.data.length, Math.ceil( width / X_TICK_WIDTH ) ),
+		[ dataSorted, width ]
+	);
+
+	const error = validateData( dataSorted );
 	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
-	const legendItems = data.map( ( group, index ) => ( {
+	const legendItems = dataSorted.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: providerTheme.colors[ index % providerTheme.colors.length ],
@@ -156,29 +173,31 @@ const LineChart: FC< LineChartProps > = ( {
 				theme={ theme }
 				width={ width }
 				height={ height }
-				margin={ { top: 0, right: 0, bottom: 0, left: 0, ...margin } }
+				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 } }
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
 				<AnimatedAxis
 					orientation="bottom"
-					numTicks={ 5 }
+					numTicks={ xNumTicks }
 					tickFormat={ formatDateTick }
 					{ ...options?.axis?.x }
 				/>
 				<AnimatedAxis orientation="left" numTicks={ 4 } { ...options?.axis?.y } />
 
-				{ data.map( ( seriesData, index ) => {
+				{ dataSorted.map( ( seriesData, index ) => {
 					const stroke = seriesData.options?.stroke ?? theme.colors[ index % theme.colors.length ];
 					return (
 						<g key={ seriesData?.label || index }>
 							{ withGradientFill && (
 								<LinearGradient
-									id={ `area-gradient-${ index + 1 }` }
+									id={ `area-gradient-${ chartId }-${ index + 1 }` }
 									from={ stroke }
-									to="white"
+									fromOpacity={ 0.4 }
 									toOpacity={ 0.1 }
+									to={ theme.backgroundColor }
 									{ ...seriesData.options?.gradient }
 									data-testid="line-gradient"
 								/>
@@ -188,7 +207,9 @@ const LineChart: FC< LineChartProps > = ( {
 								dataKey={ seriesData?.label }
 								data={ seriesData.data as DataPointDate[] }
 								{ ...accessors }
-								fill={ withGradientFill ? `url(#area-gradient-${ index + 1 })` : undefined }
+								fill={
+									withGradientFill ? `url(#area-gradient-${ chartId }-${ index + 1 })` : undefined
+								}
 								renderLine={ true }
 								curve={ smoothing ? curveCatmullRom : curveLinear }
 							/>

package/src/types.ts

@@ -24,7 +24,10 @@ export type SeriesData = {
 	group?: string;
 	label: string;
 	data: DataPointDate[] | DataPoint[];
-	options: { gradient?: { from: string; to: string; toOpacity?: number }; stroke?: string };
+	options?: {
+		gradient?: { from: string; to: string; fromOpacity?: number; toOpacity?: number };
+		stroke?: string;
+	};
 };
 
 export type MultipleDataPointsDate = {