@automattic/jetpack-components 0.42.2 → 0.42.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/components/boost-score-graph/index.tsx +4 -2
  3. package/components/boost-score-graph/tooltip.tsx +45 -28
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.42.4] - 2023-09-19
6
+ - Minor internal updates.
7
+
8
+ ## [0.42.3] - 2023-09-13
9
+ ### Changed
10
+ - Updated package dependencies. [#33001]
11
+
5
12
  ## [0.42.2] - 2023-09-11
6
13
  ### Changed
7
14
  - Bump pkgs version [#32825]
@@ -813,6 +820,8 @@
813
820
  ### Changed
814
821
  - Update node version requirement to 14.16.1
815
822
 
823
+ [0.42.4]: https://github.com/Automattic/jetpack-components/compare/0.42.3...0.42.4
824
+ [0.42.3]: https://github.com/Automattic/jetpack-components/compare/0.42.2...0.42.3
816
825
  [0.42.2]: https://github.com/Automattic/jetpack-components/compare/0.42.1...0.42.2
817
826
  [0.42.1]: https://github.com/Automattic/jetpack-components/compare/0.42.0...0.42.1
818
827
  [0.42.0]: https://github.com/Automattic/jetpack-components/compare/0.41.2...0.42.0
package/components/boost-score-graph/index.tsx CHANGED
@@ -53,10 +53,12 @@ export const BoostScoreGraph: FunctionComponent< BoostScoreGraphProps > = ( {
53
53
  // @todo Remove this once we have a proper date range picker
54
54
  const dayBeforeEndDate = endDate - 24 * 60 * 60 * 1000;
55
55
  // Adjust the start date based on available data
56
- if ( periods.length > 0 ) {
56
+ if ( periods.length === 0 ) {
57
+ startDate = dayBeforeEndDate;
58
+ } else if ( periods.length === 1 ) {
57
59
  startDate = Math.min( periods[ 0 ].timestamp - 12 * 60 * 60 * 1000, dayBeforeEndDate );
58
60
  } else {
59
- startDate = dayBeforeEndDate;
61
+ startDate = Math.min( periods[ 0 ].timestamp, dayBeforeEndDate );
60
62
  }
61
63
 
62
64
  return (
package/components/boost-score-graph/tooltip.tsx CHANGED
@@ -22,6 +22,11 @@ export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) =>
22
22
  const scoreLetter = getScoreLetter( mobile_overall_score, desktop_overall_score );
23
23
  const date = dateI18n( 'F j, Y', new Date( period.timestamp ), false );
24
24
 
25
+ // If any of the key properties are missing, don't render the tooltip.
26
+ if ( ! scoreLetter || ! mobile_overall_score || ! desktop_overall_score || ! date ) {
27
+ return null;
28
+ }
29
+
25
30
  return (
26
31
  <div className="jb-score-tooltip">
27
32
  <div className="jb-score-tooltip__date">{ date }</div>
@@ -39,22 +44,28 @@ export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) =>
39
44
  }
40
45
  </div>
41
46
  </div>
42
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
43
- <div className="jb-score-tooltip__column">
44
- { __( 'Largest Contentful Paint', 'jetpack' ) }
47
+ { typeof desktop_lcp === 'number' && (
48
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
49
+ <div className="jb-score-tooltip__column">
50
+ { __( 'Largest Contentful Paint', 'jetpack' ) }
51
+ </div>
52
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_lcp ) }</div>
45
53
  </div>
46
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_lcp ) }</div>
47
- </div>
48
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
49
- <div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
50
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_tbt ) }</div>
51
- </div>
52
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
53
- <div className="jb-score-tooltip__column">
54
- { __( 'Cumulative Layout Shift', 'jetpack' ) }
54
+ ) }
55
+ { typeof desktop_tbt === 'number' && (
56
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
57
+ <div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
58
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_tbt ) }</div>
55
59
  </div>
56
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2f', desktop_cls ) }</div>
57
- </div>
60
+ ) }
61
+ { typeof desktop_cls === 'number' && (
62
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
63
+ <div className="jb-score-tooltip__column">
64
+ { __( 'Cumulative Layout Shift', 'jetpack' ) }
65
+ </div>
66
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2f', desktop_cls ) }</div>
67
+ </div>
68
+ ) }
58
69
  <hr />
59
70
  <div className="jb-score-tooltip__row">
60
71
  <div className="jb-score-tooltip__column">{ __( 'Mobile score', 'jetpack' ) }</div>
@@ -65,22 +76,28 @@ export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) =>
65
76
  }
66
77
  </div>
67
78
  </div>
68
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
69
- <div className="jb-score-tooltip__column">
70
- { __( 'Largest Contentful Paint', 'jetpack' ) }
79
+ { typeof mobile_lcp === 'number' && (
80
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
81
+ <div className="jb-score-tooltip__column">
82
+ { __( 'Largest Contentful Paint', 'jetpack' ) }
83
+ </div>
84
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_lcp ) }</div>
71
85
  </div>
72
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_lcp ) }</div>
73
- </div>
74
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
75
- <div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
76
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_tbt ) }</div>
77
- </div>
78
- <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
79
- <div className="jb-score-tooltip__column">
80
- { __( 'Cumulative Layout Shift', 'jetpack' ) }
86
+ ) }
87
+ { typeof mobile_tbt === 'number' && (
88
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
89
+ <div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
90
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_tbt ) }</div>
81
91
  </div>
82
- <div className="jb-score-tooltip__column">{ sprintf( '%0.2f', mobile_cls ) }</div>
83
- </div>
92
+ ) }
93
+ { typeof mobile_cls === 'number' && (
94
+ <div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
95
+ <div className="jb-score-tooltip__column">
96
+ { __( 'Cumulative Layout Shift', 'jetpack' ) }
97
+ </div>
98
+ <div className="jb-score-tooltip__column">{ sprintf( '%0.2f', mobile_cls ) }</div>
99
+ </div>
100
+ ) }
84
101
  <div className="jb-score-tooltip__pointer"></div>
85
102
  </div>
86
103
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.42.2",
3
+ "version": "0.42.4",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@automattic/format-currency": "1.0.1",
18
- "@automattic/jetpack-boost-score-api": "^0.1.10",
18
+ "@automattic/jetpack-boost-score-api": "^0.1.11",
19
19
  "@babel/runtime": "^7",
20
20
  "@wordpress/browserslist-config": "5.24.0",
21
21
  "@wordpress/components": "25.7.0",
@@ -34,8 +34,8 @@
34
34
  },
35
35
  "devDependencies": {
36
36
  "@automattic/jetpack-base-styles": "^0.6.9",
37
- "@babel/core": "7.22.11",
38
- "@babel/preset-react": "7.22.5",
37
+ "@babel/core": "7.22.17",
38
+ "@babel/preset-react": "7.22.15",
39
39
  "@jest/globals": "29.4.3",
40
40
  "@storybook/addon-actions": "7.1.0",
41
41
  "@storybook/blocks": "7.1.0",