@automattic/charts 0.10.1 → 0.11.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/dist/cjs/components/line-chart/line-chart.js +1 -1
- package/dist/cjs/components/line-chart/line-chart.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/mjs/components/line-chart/line-chart.js +1 -1
- package/dist/mjs/components/line-chart/line-chart.js.map +1 -1
- package/package.json +5 -5
- package/src/components/grid-control/grid-control.module.scss +1 -0
- package/src/components/legend/legend.module.scss +1 -0
- package/src/components/line-chart/line-chart.module.scss +1 -1
- package/src/components/line-chart/line-chart.tsx +32 -2
- package/src/components/tooltip/base-tooltip.module.scss +1 -1
- package/src/index.ts +3 -0
- package/webpack.config.cjs +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,36 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.11.4] - 2025-04-10
|
|
9
|
+
### Changed
|
|
10
|
+
- Internal updates.
|
|
11
|
+
|
|
12
|
+
## [0.11.3] - 2025-04-10
|
|
13
|
+
### Changed
|
|
14
|
+
- Internal updates.
|
|
15
|
+
|
|
16
|
+
## [0.11.2] - 2025-04-10
|
|
17
|
+
### Changed
|
|
18
|
+
- Internal updates.
|
|
19
|
+
|
|
20
|
+
## [0.11.1] - 2025-04-10
|
|
21
|
+
### Added
|
|
22
|
+
- Export DataPoint, DataPointDate and SeriesData types [#42981]
|
|
23
|
+
|
|
24
|
+
### Changed
|
|
25
|
+
- Code: First pass of style coding standards. [#42734]
|
|
26
|
+
- Update package dependencies. [#42762]
|
|
27
|
+
- Update package dependencies. [#42809]
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
- Code: Update stylesheets to use hex instead of named colors. [#42920]
|
|
31
|
+
- Code: Update stylesheets to use WordPress font styles. [#42928]
|
|
32
|
+
- Fixed TS type checking in the monorepo [#42817]
|
|
33
|
+
|
|
34
|
+
## [0.11.0] - 2025-03-26
|
|
35
|
+
### Added
|
|
36
|
+
- Chart library: adds new curve smoothing option to linechart [#42281]
|
|
37
|
+
|
|
8
38
|
## [0.10.1] - 2025-03-18
|
|
9
39
|
### Added
|
|
10
40
|
- Introduce Theme seriesLineStyles property [#42530]
|
|
@@ -149,6 +179,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
149
179
|
- Fixed lints following ESLint rule changes for TS [#40584]
|
|
150
180
|
- Fixing a bug in Chart storybook data. [#40640]
|
|
151
181
|
|
|
182
|
+
[0.11.4]: https://github.com/Automattic/charts/compare/v0.11.3...v0.11.4
|
|
183
|
+
[0.11.3]: https://github.com/Automattic/charts/compare/v0.11.2...v0.11.3
|
|
184
|
+
[0.11.2]: https://github.com/Automattic/charts/compare/v0.11.1...v0.11.2
|
|
185
|
+
[0.11.1]: https://github.com/Automattic/charts/compare/v0.11.0...v0.11.1
|
|
186
|
+
[0.11.0]: https://github.com/Automattic/charts/compare/v0.10.1...v0.11.0
|
|
152
187
|
[0.10.1]: https://github.com/Automattic/charts/compare/v0.10.0...v0.10.1
|
|
153
188
|
[0.10.0]: https://github.com/Automattic/charts/compare/v0.9.0...v0.10.0
|
|
154
189
|
[0.9.0]: https://github.com/Automattic/charts/compare/v0.8.4...v0.9.0
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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
|
|
1
|
+
"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=(e,a)=>{if(!e)return a?t.curveCatmullRom:t.curveLinear;switch(e){case"smooth":return t.curveCatmullRom;case"monotone":return t.curveMonotoneX;default:return t.curveLinear}},u=({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 h=l.withResponsive((({data:t,width:l,height:h,className:p,margin:v,withTooltips:x=!0,showLegend:g=!1,legendOrientation:y="horizontal",withGradientFill:j=!1,smoothing:T=!0,curveType:b="linear",renderTooltip:N=u,options:w={},onPointerDown:f,onPointerUp:q,onPointerMove:k,onPointerOut:D})=>{const L=n.useChartTheme(),S=o.useId(),_=o.useMemo((()=>t.map((e=>({...e,data:e.data.sort(((e,t)=>e.date.getTime()-t.date.getTime()))})))),[t]),A=o.useMemo((()=>{const e=_?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return i.buildChartTheme({...L,colors:[...e,...L.colors]})}),[L,_]);v=o.useMemo((()=>{let e={};return"right"===w.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===w.axis?.x?.orientation&&(e={...e,top:20,bottom:10}),{...e,...v}}),[v,w]);const M=o.useMemo((()=>Math.min(_[0]?.data.length,Math.ceil(l/100))),[_,l]),P=(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")(_);if(P)return e.jsx("div",{className:r("line-chart",c["line-chart"]),children:P});const C=_.map(((e,t)=>({label:e.label,value:"",color:L.colors[t%L.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:A,width:l,height:h,margin:{top:10,right:0,bottom:20,left:40,...v},xScale:{type:"time",...w?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...w?.yScale},onPointerDown:f,onPointerUp:q,onPointerMove:k,onPointerOut:D,pointerEventsDataKey:"nearest",children:[e.jsx(i.AnimatedGrid,{columns:!1,numTicks:4}),e.jsx(i.AnimatedAxis,{orientation:"bottom",numTicks:M,tickFormat:m,...w?.axis?.x}),e.jsx(i.AnimatedAxis,{orientation:"left",numTicks:4,...w?.axis?.y}),_.map(((t,r)=>{const o=t.options?.stroke??A.colors[r%A.colors.length],n=L?.seriesLineStyles?.[r%L.seriesLineStyles.length]||{};return e.jsxs("g",{children:[j&&e.jsx(a.LinearGradient,{id:`area-gradient-${S}-${r+1}`,from:o,fromOpacity:.4,toOpacity:.1,to:A.backgroundColor,...t.options?.gradient,"data-testid":"line-gradient"}),e.jsx(i.AnimatedAreaSeries,{dataKey:t?.label,data:t.data,...O,fill:j?`url(#area-gradient-${S}-${r+1})`:void 0,renderLine:!0,curve:d(b,T),lineProps:n},t?.label)]},t?.label||r)})),x&&e.jsx(i.Tooltip,{detectBounds:!0,snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:N})]}),g&&e.jsx(s.BaseLegend,{items:C,orientation:y,className:c["line-chart-legend"]})]})}));module.exports=h;
|
|
2
2
|
//# sourceMappingURL=line-chart.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"version":3,"file":"line-chart.js","sources":["/@automattic/charts/../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["getCurveType","type","smoothing","curveCatmullRom","curveLinear","curveMonotoneX","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","curveType","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","yScale","nice","zero","pointerEventsDataKey","jsx","AnimatedGrid","columns","numTicks","AnimatedAxis","tickFormat","seriesData","lineProps","seriesLineStyles","LinearGradient","id","from","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","Tooltip","detectBounds","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","BaseLegend","items"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -183,9 +183,11 @@ interface BarChartProps extends BaseChartProps<SeriesData[]> {
|
|
|
183
183
|
}
|
|
184
184
|
declare const _default$3: (props: Optional<BarChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
|
|
185
185
|
|
|
186
|
+
type CurveType = 'smooth' | 'linear' | 'monotone';
|
|
186
187
|
interface LineChartProps extends BaseChartProps<SeriesData[]> {
|
|
187
188
|
withGradientFill: boolean;
|
|
188
189
|
smoothing?: boolean;
|
|
190
|
+
curveType?: CurveType;
|
|
189
191
|
renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
|
|
190
192
|
}
|
|
191
193
|
declare const _default$2: (props: Optional<LineChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
|
|
@@ -354,4 +356,4 @@ type UseChartMouseHandlerReturn = {
|
|
|
354
356
|
*/
|
|
355
357
|
declare const useChartMouseHandler: ({ withTooltips, }: UseChartMouseHandlerProps) => UseChartMouseHandlerReturn;
|
|
356
358
|
|
|
357
|
-
export { _default$3 as BarChart, BaseTooltip, BaseLegend as Legend, _default$2 as LineChart, _default$1 as PieChart, _default as PieSemiCircleChart, ThemeProvider, defaultTheme, jetpackTheme, useChartMouseHandler, wooTheme };
|
|
359
|
+
export { _default$3 as BarChart, BaseTooltip, type DataPoint, type DataPointDate, BaseLegend as Legend, _default$2 as LineChart, _default$1 as PieChart, _default as PieSemiCircleChart, type SeriesData, ThemeProvider, defaultTheme, jetpackTheme, useChartMouseHandler, wooTheme };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{curveCatmullRom as o,curveLinear as a}from"@visx/curve";import{LinearGradient as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{curveCatmullRom as o,curveLinear as a,curveMonotoneX as i}from"@visx/curve";import{LinearGradient as r}from"@visx/gradient";import{buildChartTheme as n,XYChart as l,AnimatedGrid as s,AnimatedAxis as c,AnimatedAreaSeries as m,Tooltip as d}from"@visx/xychart";import"@visx/xychart/lib/components/Tooltip";import h from"clsx";import{useId as p,useMemo as u}from"react";import{useChartTheme as v}from"../../providers/theme/theme-provider.js";import{BaseLegend as g}from"../legend/base-legend.js";import{withResponsive as y}from"../shared/with-responsive.js";import f from"./line-chart.module.scss.js";const x=(e,t)=>{if(!e)return t?o:a;switch(e){case"smooth":return o;case"monotone":return i;default:return a}},b=({tooltipData:o})=>{const a=o?.nearestDatum?.datum;if(!a)return null;const i=Object.entries(o?.datumByKey||{}).map((([e,{datum:t}])=>({key:e,value:t.value}))).sort(((e,t)=>t.value-e.value));return t("div",{className:f["line-chart__tooltip"],children:[e("div",{className:f["line-chart__tooltip-date"],children:a.date?.toLocaleDateString()}),i.map((o=>t("div",{className:f["line-chart__tooltip-row"],children:[t("span",{className:f["line-chart__tooltip-label"],children:[o.key,":"]}),e("span",{className:f["line-chart__tooltip-value"],children:o.value})]},o.key)))]})},T=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"});var N=y((({data:o,width:a,height:i,className:y,margin:N,withTooltips:w=!0,showLegend:k=!1,legendOrientation:D="horizontal",withGradientFill:_=!1,smoothing:P=!0,curveType:S="linear",renderTooltip:j=b,options:L={},onPointerDown:O,onPointerUp:M,onPointerMove:$,onPointerOut:B})=>{const K=v(),z=p(),A=u((()=>o.map((e=>({...e,data:e.data.sort(((e,t)=>e.date.getTime()-t.date.getTime()))})))),[o]),F=u((()=>{const e=A?.map((e=>e.options?.stroke??"")).filter(Boolean)??[];return n({...K,colors:[...e,...K.colors]})}),[K,A]);N=u((()=>{let e={};return"right"===L.axis?.y?.orientation&&(e={...e,right:40,left:0}),"top"===L.axis?.x?.orientation&&(e={...e,top:20,bottom:10}),{...e,...N}}),[N,L]);const G=u((()=>Math.min(A[0]?.data.length,Math.ceil(a/100))),[A,a]),U=(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(U)return e("div",{className:h("line-chart",f["line-chart"]),children:U});const C=A.map(((e,t)=>({label:e.label,value:"",color:K.colors[t%K.colors.length]}))),E={xAccessor:e=>e?.date,yAccessor:e=>e?.value};return t("div",{className:h("line-chart",f["line-chart"],y),"data-testid":"line-chart",role:"img","aria-label":"line chart",children:[t(l,{theme:F,width:a,height:i,margin:{top:10,right:0,bottom:20,left:40,...N},xScale:{type:"time",...L?.xScale},yScale:{type:"linear",nice:!0,zero:!1,...L?.yScale},onPointerDown:O,onPointerUp:M,onPointerMove:$,onPointerOut:B,pointerEventsDataKey:"nearest",children:[e(s,{columns:!1,numTicks:4}),e(c,{orientation:"bottom",numTicks:G,tickFormat:T,...L?.axis?.x}),e(c,{orientation:"left",numTicks:4,...L?.axis?.y}),A.map(((o,a)=>{const i=o.options?.stroke??F.colors[a%F.colors.length],n=K?.seriesLineStyles?.[a%K.seriesLineStyles.length]||{};return t("g",{children:[_&&e(r,{id:`area-gradient-${z}-${a+1}`,from:i,fromOpacity:.4,toOpacity:.1,to:F.backgroundColor,...o.options?.gradient,"data-testid":"line-gradient"}),e(m,{dataKey:o?.label,data:o.data,...E,fill:_?`url(#area-gradient-${z}-${a+1})`:void 0,renderLine:!0,curve:x(S,P),lineProps:n},o?.label)]},o?.label||a)})),w&&e(d,{detectBounds:!0,snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:j})]}),k&&e(g,{items:C,orientation:D,className:f["line-chart-legend"]})]})}));export{N as default};
|
|
2
2
|
//# sourceMappingURL=line-chart.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"version":3,"file":"line-chart.js","sources":["../../../../src/components/line-chart/line-chart.tsx"],"sourcesContent":[null],"names":["getCurveType","type","smoothing","curveCatmullRom","curveLinear","curveMonotoneX","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","curveType","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","yScale","nice","zero","pointerEventsDataKey","AnimatedGrid","columns","numTicks","AnimatedAxis","tickFormat","seriesData","lineProps","seriesLineStyles","LinearGradient","id","from","fromOpacity","toOpacity","to","backgroundColor","gradient","AnimatedAreaSeries","dataKey","fill","renderLine","curve","Tooltip","detectBounds","snapTooltipToDatumX","snapTooltipToDatumY","showSeriesGlyphs","Legend","items"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.4",
|
|
4
4
|
"description": "Display charts within Automattic products.",
|
|
5
5
|
"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"storybook": "cd ../storybook && pnpm run storybook:dev",
|
|
21
21
|
"compile-ts": "tsc --pretty",
|
|
22
22
|
"clean-build": "rm -rf dist/",
|
|
23
|
+
"typecheck": "tsc --noEmit",
|
|
23
24
|
"build": "pnpm run build:prod",
|
|
24
25
|
"build:prod": "pnpm run clean && rollup -c --environment NODE_ENV:production",
|
|
25
26
|
"build:dev": "rollup -c --environment NODE_ENV:development",
|
|
@@ -87,11 +88,10 @@
|
|
|
87
88
|
"@types/jest": "^29.0.0",
|
|
88
89
|
"@types/react": "18.3.18",
|
|
89
90
|
"@types/react-dom": "18.3.5",
|
|
90
|
-
"@wordpress/babel-plugin-import-jsx-pragma": "5.
|
|
91
|
-
"@wordpress/element": "6.
|
|
91
|
+
"@wordpress/babel-plugin-import-jsx-pragma": "5.21.0",
|
|
92
|
+
"@wordpress/element": "6.21.0",
|
|
92
93
|
"babel-jest": "^29.7.0",
|
|
93
94
|
"babel-loader": "9.1.2",
|
|
94
|
-
"clean-webpack-plugin": "^4.0.0",
|
|
95
95
|
"css-loader": "^6.7.0",
|
|
96
96
|
"fork-ts-checker-webpack-plugin": "9.0.2",
|
|
97
97
|
"jest": "29.7.0",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"sass-loader": "^13.0.0",
|
|
113
113
|
"storybook": "8.6.7",
|
|
114
114
|
"tsconfig-paths-webpack-plugin": "4.2.0",
|
|
115
|
-
"typescript": "5.
|
|
115
|
+
"typescript": "5.8.2",
|
|
116
116
|
"webpack": "^5.88.0",
|
|
117
117
|
"webpack-cli": "^6.0.0"
|
|
118
118
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { curveCatmullRom, curveLinear } from '@visx/curve';
|
|
1
|
+
import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
|
|
2
2
|
import { LinearGradient } from '@visx/gradient';
|
|
3
3
|
import {
|
|
4
4
|
XYChart,
|
|
@@ -17,11 +17,40 @@ import { withResponsive } from '../shared/with-responsive';
|
|
|
17
17
|
import styles from './line-chart.module.scss';
|
|
18
18
|
import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
|
|
19
19
|
|
|
20
|
+
type CurveType = 'smooth' | 'linear' | 'monotone';
|
|
21
|
+
|
|
20
22
|
const X_TICK_WIDTH = 100;
|
|
21
23
|
|
|
24
|
+
/**
|
|
25
|
+
* Determines the curve type for the line chart based on the provided type and smoothing parameters
|
|
26
|
+
*
|
|
27
|
+
* @param {CurveType} type - The explicit curve type to use
|
|
28
|
+
* @param {boolean} smoothing - Legacy smoothing parameter
|
|
29
|
+
* @return The curve function to use for the line
|
|
30
|
+
*/
|
|
31
|
+
const getCurveType = ( type?: CurveType, smoothing?: boolean ) => {
|
|
32
|
+
// If no type specified, use legacy smoothing behavior
|
|
33
|
+
if ( ! type ) {
|
|
34
|
+
return smoothing ? curveCatmullRom : curveLinear;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Handle explicit curve types
|
|
38
|
+
switch ( type ) {
|
|
39
|
+
case 'smooth':
|
|
40
|
+
return curveCatmullRom;
|
|
41
|
+
case 'monotone':
|
|
42
|
+
return curveMonotoneX;
|
|
43
|
+
case 'linear':
|
|
44
|
+
return curveLinear;
|
|
45
|
+
default:
|
|
46
|
+
return curveLinear;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
22
50
|
interface LineChartProps extends BaseChartProps< SeriesData[] > {
|
|
23
51
|
withGradientFill: boolean;
|
|
24
52
|
smoothing?: boolean;
|
|
53
|
+
curveType?: CurveType;
|
|
25
54
|
renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
|
|
26
55
|
}
|
|
27
56
|
|
|
@@ -102,6 +131,7 @@ const LineChart: FC< LineChartProps > = ( {
|
|
|
102
131
|
legendOrientation = 'horizontal',
|
|
103
132
|
withGradientFill = false,
|
|
104
133
|
smoothing = true,
|
|
134
|
+
curveType = 'linear',
|
|
105
135
|
renderTooltip = renderDefaultTooltip,
|
|
106
136
|
options = {},
|
|
107
137
|
onPointerDown = undefined,
|
|
@@ -223,7 +253,7 @@ const LineChart: FC< LineChartProps > = ( {
|
|
|
223
253
|
withGradientFill ? `url(#area-gradient-${ chartId }-${ index + 1 })` : undefined
|
|
224
254
|
}
|
|
225
255
|
renderLine={ true }
|
|
226
|
-
curve={
|
|
256
|
+
curve={ getCurveType( curveType, smoothing ) }
|
|
227
257
|
lineProps={ lineProps }
|
|
228
258
|
/>
|
|
229
259
|
</g>
|
package/src/index.ts
CHANGED
|
@@ -14,3 +14,6 @@ export { defaultTheme, jetpackTheme, wooTheme } from './providers/theme/themes';
|
|
|
14
14
|
|
|
15
15
|
// Hooks
|
|
16
16
|
export { default as useChartMouseHandler } from './hooks/use-chart-mouse-handler';
|
|
17
|
+
|
|
18
|
+
// Types
|
|
19
|
+
export type { DataPoint, DataPointDate, SeriesData } from './types';
|
package/webpack.config.cjs
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
const path = require( 'path' );
|
|
2
|
-
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
|
|
3
2
|
const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
|
|
4
3
|
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
|
|
5
4
|
const TsconfigPathsPlugin = require( 'tsconfig-paths-webpack-plugin' );
|
|
@@ -62,7 +61,6 @@ const getCommonConfig = isESM => ( {
|
|
|
62
61
|
'@babel/runtime',
|
|
63
62
|
],
|
|
64
63
|
plugins: [
|
|
65
|
-
new CleanWebpackPlugin(),
|
|
66
64
|
new MiniCssExtractPlugin( {
|
|
67
65
|
filename: pathData => {
|
|
68
66
|
const name = pathData.chunk.name;
|