@automattic/jetpack-components 0.45.5 → 0.45.6

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 CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.45.6] - 2023-12-11
6
+ ### Fixed
7
+ - Fixed resizing of the performance history graph. [#34185]
8
+
5
9
  ## [0.45.5] - 2023-12-06
6
10
  ### Changed
7
11
  - Updated package dependencies. [#34416]
@@ -894,6 +898,7 @@
894
898
  ### Changed
895
899
  - Update node version requirement to 14.16.1
896
900
 
901
+ [0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6
897
902
  [0.45.5]: https://github.com/Automattic/jetpack-components/compare/0.45.4...0.45.5
898
903
  [0.45.4]: https://github.com/Automattic/jetpack-components/compare/0.45.3...0.45.4
899
904
  [0.45.3]: https://github.com/Automattic/jetpack-components/compare/0.45.2...0.45.3
@@ -14,4 +14,9 @@
14
14
  }
15
15
  }
16
16
 
17
+ }
18
+
19
+ .boost-uplot-container {
20
+ display: grid;
21
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
17
22
  }
@@ -94,6 +94,8 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
94
94
  const uplot = useRef< uPlot | null >( null );
95
95
  const uplotContainer = useRef( null );
96
96
 
97
+ const width = uplotContainer.current?.clientWidth || DEFAULT_DIMENSIONS.width;
98
+
97
99
  let lastDesktopScore = 0;
98
100
  let lastMobileScore = 0;
99
101
 
@@ -107,7 +109,8 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
107
109
  const options: uPlot.Options = useMemo( () => {
108
110
  const defaultOptions: uPlot.Options = {
109
111
  class: 'boost-score-graph',
110
- ...DEFAULT_DIMENSIONS,
112
+ height: DEFAULT_DIMENSIONS.height,
113
+ width: width,
111
114
  tzDate: ts => uPlot.tzDate( new Date( ts * 1e3 ), 'Etc/UTC' ),
112
115
  fmtDate: ( chartDateStringTemplate: string ) => {
113
116
  return date => getDateFormat( chartDateStringTemplate, date, getUserLocale() );
@@ -178,7 +181,7 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
178
181
  return {
179
182
  ...defaultOptions,
180
183
  };
181
- }, [ lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
184
+ }, [ width, lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
182
185
 
183
186
  useResize( uplot, uplotContainer );
184
187
  const onCreate = useCallback( chart => {
@@ -186,7 +189,7 @@ export default function UplotLineChart( { range, periods }: UplotChartProps ) {
186
189
  }, [] );
187
190
 
188
191
  return (
189
- <div ref={ uplotContainer }>
192
+ <div ref={ uplotContainer } className="boost-uplot-container">
190
193
  <UplotReact data={ data } onCreate={ onCreate } options={ options } />
191
194
  </div>
192
195
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.45.5",
3
+ "version": "0.45.6",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",