@automattic/charts 0.8.0 → 0.8.2
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 +16 -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 +5 -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/index.ts +1 -4
- package/package.json +4 -5
- package/src/components/line-chart/line-chart.tsx +10 -12
- package/src/types.ts +6 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,20 @@ 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.8.2] - 2025-02-19
|
|
9
|
+
### Added
|
|
10
|
+
- Add yScale options support. [#41866]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
- Updated package dependencies. [#41578]
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
- Line chart: support custom tooltips [#41738]
|
|
17
|
+
|
|
18
|
+
## [0.8.1] - 2025-02-04
|
|
19
|
+
### Fixed
|
|
20
|
+
- Charts: fixed type exports [#41562]
|
|
21
|
+
|
|
8
22
|
## [0.8.0] - 2025-02-04
|
|
9
23
|
### Added
|
|
10
24
|
- Charts: add additional testing for library [#41449]
|
|
@@ -105,6 +119,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
105
119
|
- Fixed lints following ESLint rule changes for TS [#40584]
|
|
106
120
|
- Fixing a bug in Chart storybook data. [#40640]
|
|
107
121
|
|
|
122
|
+
[0.8.2]: https://github.com/Automattic/charts/compare/v0.8.1...v0.8.2
|
|
123
|
+
[0.8.1]: https://github.com/Automattic/charts/compare/v0.8.0...v0.8.1
|
|
108
124
|
[0.8.0]: https://github.com/Automattic/charts/compare/v0.7.1...v0.8.0
|
|
109
125
|
[0.7.1]: https://github.com/Automattic/charts/compare/v0.7.0...v0.7.1
|
|
110
126
|
[0.7.0]: https://github.com/Automattic/charts/compare/v0.6.0...v0.7.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")
|
|
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"),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;
|
|
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":["
|
|
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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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { Orientation } from '@visx/axis';
|
|
3
3
|
import { ScaleType, scaleOrdinal } from '@visx/scale';
|
|
4
4
|
import { LineStyles } from '@visx/xychart';
|
|
5
|
-
import { CSSProperties,
|
|
5
|
+
import { CSSProperties, ReactNode, ComponentType, FC } from 'react';
|
|
6
|
+
import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
|
|
6
7
|
|
|
7
8
|
type ValueOf<T> = T[keyof T];
|
|
8
9
|
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
@@ -139,6 +140,8 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
|
|
|
139
140
|
yScale?: {
|
|
140
141
|
type?: ScaleType;
|
|
141
142
|
zero?: boolean;
|
|
143
|
+
domain?: [number, number];
|
|
144
|
+
range?: [number, number];
|
|
142
145
|
};
|
|
143
146
|
xScale?: {
|
|
144
147
|
type?: ScaleType;
|
|
@@ -157,6 +160,7 @@ declare const _default$3: (props: Optional<BarChartProps, "height" | "width" | "
|
|
|
157
160
|
interface LineChartProps extends BaseChartProps<SeriesData[]> {
|
|
158
161
|
withGradientFill: boolean;
|
|
159
162
|
smoothing?: boolean;
|
|
163
|
+
renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
|
|
160
164
|
}
|
|
161
165
|
declare const _default$2: (props: Optional<LineChartProps, "height" | "width" | "size">) => react_jsx_runtime.JSX.Element;
|
|
162
166
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
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};
|
|
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":["
|
|
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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"}
|
package/index.ts
CHANGED
|
@@ -10,10 +10,7 @@ export { Legend } from './src/components/legend';
|
|
|
10
10
|
|
|
11
11
|
// Providers
|
|
12
12
|
export { ThemeProvider } from './src/providers/theme';
|
|
13
|
+
export { defaultTheme, jetpackTheme, wooTheme } from './src/providers/theme/themes';
|
|
13
14
|
|
|
14
15
|
// Hooks
|
|
15
16
|
export { default as useChartMouseHandler } from './src/hooks/use-chart-mouse-handler';
|
|
16
|
-
|
|
17
|
-
// Types
|
|
18
|
-
export type * from './src/types';
|
|
19
|
-
export type { BaseTooltipProps } from './src/components/tooltip';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/charts",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
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": {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"main": "./dist/cjs/index.js",
|
|
30
30
|
"module": "./dist/mjs/index.js",
|
|
31
|
-
"types": "./dist/
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
32
|
"sideEffects": [
|
|
33
33
|
"*.css",
|
|
34
34
|
"*.scss"
|
|
@@ -80,14 +80,13 @@
|
|
|
80
80
|
"@rollup/plugin-typescript": "12.1.0",
|
|
81
81
|
"@storybook/blocks": "8.4.7",
|
|
82
82
|
"@storybook/react": "8.4.7",
|
|
83
|
-
"@testing-library/dom": "^
|
|
83
|
+
"@testing-library/dom": "^10.0.0",
|
|
84
84
|
"@testing-library/jest-dom": "^6.0.0",
|
|
85
|
-
"@testing-library/react": "^
|
|
85
|
+
"@testing-library/react": "^16.0.0",
|
|
86
86
|
"@testing-library/user-event": "^14.4.3",
|
|
87
87
|
"@types/jest": "^29.0.0",
|
|
88
88
|
"@types/react": "18.3.18",
|
|
89
89
|
"@types/react-dom": "18.3.5",
|
|
90
|
-
"@types/testing-library__jest-dom": "^5.14.9",
|
|
91
90
|
"@wordpress/babel-plugin-import-jsx-pragma": "5.17.0",
|
|
92
91
|
"@wordpress/element": "6.17.0",
|
|
93
92
|
"babel-jest": "^29.7.0",
|
|
@@ -8,8 +8,9 @@ import {
|
|
|
8
8
|
Tooltip,
|
|
9
9
|
buildChartTheme,
|
|
10
10
|
} from '@visx/xychart';
|
|
11
|
+
import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
|
|
11
12
|
import clsx from 'clsx';
|
|
12
|
-
import { FC, useMemo } from 'react';
|
|
13
|
+
import { FC, ReactNode, useMemo } from 'react';
|
|
13
14
|
import { useChartTheme } from '../../providers/theme/theme-provider';
|
|
14
15
|
import { Legend } from '../legend';
|
|
15
16
|
import { withResponsive } from '../shared/with-responsive';
|
|
@@ -19,27 +20,23 @@ import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
|
|
|
19
20
|
interface LineChartProps extends BaseChartProps< SeriesData[] > {
|
|
20
21
|
withGradientFill: boolean;
|
|
21
22
|
smoothing?: boolean;
|
|
23
|
+
renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
type TooltipData = {
|
|
25
|
-
date: Date;
|
|
26
|
-
[ key: string ]: number | Date;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
26
|
type TooltipDatum = {
|
|
30
27
|
key: string;
|
|
31
28
|
value: number;
|
|
32
29
|
};
|
|
33
30
|
|
|
34
|
-
const
|
|
31
|
+
const renderDefaultTooltip = ( {
|
|
35
32
|
tooltipData,
|
|
36
33
|
}: {
|
|
37
34
|
tooltipData?: {
|
|
38
35
|
nearestDatum?: {
|
|
39
|
-
datum:
|
|
36
|
+
datum: DataPointDate;
|
|
40
37
|
key: string;
|
|
41
38
|
};
|
|
42
|
-
datumByKey?: { [ key: string ]: { datum:
|
|
39
|
+
datumByKey?: { [ key: string ]: { datum: DataPointDate } };
|
|
43
40
|
};
|
|
44
41
|
} ) => {
|
|
45
42
|
const nearestDatum = tooltipData?.nearestDatum?.datum;
|
|
@@ -55,7 +52,7 @@ const renderTooltip = ( {
|
|
|
55
52
|
return (
|
|
56
53
|
<div className={ styles[ 'line-chart__tooltip' ] }>
|
|
57
54
|
<div className={ styles[ 'line-chart__tooltip-date' ] }>
|
|
58
|
-
{ nearestDatum.date
|
|
55
|
+
{ nearestDatum.date?.toLocaleDateString() }
|
|
59
56
|
</div>
|
|
60
57
|
{ tooltipPoints.map( point => (
|
|
61
58
|
<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>
|
|
@@ -103,6 +100,7 @@ const LineChart: FC< LineChartProps > = ( {
|
|
|
103
100
|
legendOrientation = 'horizontal',
|
|
104
101
|
withGradientFill = false,
|
|
105
102
|
smoothing = true,
|
|
103
|
+
renderTooltip = renderDefaultTooltip,
|
|
106
104
|
options = {},
|
|
107
105
|
} ) => {
|
|
108
106
|
const providerTheme = useChartTheme();
|
|
@@ -143,8 +141,8 @@ const LineChart: FC< LineChartProps > = ( {
|
|
|
143
141
|
} ) );
|
|
144
142
|
|
|
145
143
|
const accessors = {
|
|
146
|
-
xAccessor: ( d: DataPointDate ) => d
|
|
147
|
-
yAccessor: ( d: DataPointDate ) => d
|
|
144
|
+
xAccessor: ( d: DataPointDate ) => d?.date,
|
|
145
|
+
yAccessor: ( d: DataPointDate ) => d?.value,
|
|
148
146
|
};
|
|
149
147
|
|
|
150
148
|
return (
|
package/src/types.ts
CHANGED
|
@@ -143,7 +143,12 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
|
|
|
143
143
|
* More options for the chart.
|
|
144
144
|
*/
|
|
145
145
|
options?: {
|
|
146
|
-
yScale?: {
|
|
146
|
+
yScale?: {
|
|
147
|
+
type?: ScaleType;
|
|
148
|
+
zero?: boolean;
|
|
149
|
+
domain?: [ number, number ];
|
|
150
|
+
range?: [ number, number ];
|
|
151
|
+
};
|
|
147
152
|
xScale?: { type?: ScaleType };
|
|
148
153
|
axis?: {
|
|
149
154
|
x?: AxisOptions;
|