Skip to content

Commit a2162a3

Browse files
AtishayMsftHotell
AtishayMsft
and
Hotell
authoredSep 11, 2024··
Update d3 dependency versions to 3.x.x and 4.x.x (#32463)
Co-authored-by: Martin Hochel <[email protected]>
1 parent ef85da4 commit a2162a3

File tree

12 files changed

+246
-242
lines changed

12 files changed

+246
-242
lines changed
 

‎change/@fluentui-react-charting-8ac4b02b-fec4-4dbe-a1d2-6e8163a73b4b.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Update d3 package dependencies to 3.x.y and 4.x.y",
4+
"packageName": "@fluentui/react-charting",
5+
"email": "98592573+AtishayMsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎package.json

+21-1
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,16 @@
120120
"@types/circular-dependency-plugin": "5.0.8",
121121
"@types/copy-webpack-plugin": "10.1.0",
122122
"@types/doctrine": "0.0.5",
123+
"@types/d3-array": "3.2.1",
124+
"@types/d3-axis": "3.0.6",
125+
"@types/d3-format": "3.0.4",
126+
"@types/d3-hierarchy": "3.1.7",
127+
"@types/d3-sankey": "0.12.4",
128+
"@types/d3-scale": "4.0.8",
129+
"@types/d3-selection": "3.0.10",
130+
"@types/d3-shape": "3.1.6",
131+
"@types/d3-time-format": "3.0.4",
132+
"@types/d3-time": "3.0.3",
123133
"@types/ejs": "3.1.2",
124134
"@types/enzyme": "3.10.7",
125135
"@types/eslint": "8.56.10",
@@ -196,6 +206,16 @@
196206
"doctoc": "2.0.1",
197207
"doctrine": "3.0.0",
198208
"dotparser": "1.1.1",
209+
"d3-array": "3.2.4",
210+
"d3-axis": "3.0.0",
211+
"d3-format": "3.1.0",
212+
"d3-hierarchy": "3.1.2",
213+
"d3-sankey": "0.12.3",
214+
"d3-scale": "4.0.2",
215+
"d3-selection": "3.0.0",
216+
"d3-shape": "3.2.0",
217+
"d3-time-format": "3.0.0",
218+
"d3-time": "3.1.0",
199219
"ejs": "3.1.10",
200220
"embla-carousel": "8.1.8",
201221
"embla-carousel-autoplay": "8.1.8",
@@ -278,7 +298,7 @@
278298
"react-is": "17.0.2",
279299
"react-shadow": "20.3.0",
280300
"react-test-renderer": "17.0.2",
281-
"react-vis": "1.11.7",
301+
"react-vis": "1.12.1",
282302
"react-window": "^1.8.6",
283303
"read-pkg-up": "7.0.1",
284304
"replace-in-file": "6.1.0",

‎packages/fluentui/docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"react-source-render": "4.0.0-1",
4646
"react-textarea-autosize": "7.0.4",
4747
"react-virtualized": "^9.21.1",
48-
"react-vis": "^1.11.6",
48+
"react-vis": "^1.12.1",
4949
"react-window": "^1.8.6",
5050
"semver": "^6.2.0"
5151
},

‎packages/react-charting/jest.config.js

+28-5
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,45 @@
11
const { createV8Config: createConfig } = require('@fluentui/scripts-jest');
2+
const { workspaceRoot } = require('@nx/devkit');
3+
const { relative, join } = require('node:path');
24

35
function getEsmOnlyPackagesToCjsMapping() {
46
/**
57
* relative path to jest cwd
68
*/
79
const prefix = `<rootDir>/`;
10+
11+
const workspaceRootNodeModules = prefix + join(relative(__dirname, workspaceRoot), 'node_modules');
12+
const createD3LibMappingToCommonJs = libraryName => {
13+
return workspaceRootNodeModules + `/${libraryName}/dist/${libraryName}.js`;
14+
};
15+
16+
const d3Libs = [
17+
'd3-scale',
18+
'd3-interpolate',
19+
'd3-color',
20+
'd3-shape',
21+
'd3-path',
22+
'd3-axis',
23+
'd3-array',
24+
'd3-time',
25+
'd3-hierarchy',
26+
'd3-selection',
27+
'd3-format',
28+
];
29+
830
/**
931
* map of packages that ship only as ESM. All our d3 dependencies are ES5 except d3-scale package.
1032
* We had to upgrade the d3-scale to an ESM only package because of a security vulnerability in older versions.
1133
* See https://github.com/d3/d3-scale/issues/269 and https://github.com/d3/d3-color/pull/100
1234
* The current version of jest does not support ESM only packages.
1335
* So we need to map these packages to their CommonJS versions.
36+
*
1437
*/
15-
const cjsPathsToEsmOnlyPackages = {
16-
'^d3-scale$': prefix + '../../node_modules/d3-scale/build/d3-scale.js',
17-
'^d3-shape$': prefix + 'node_modules/d3-shape/dist/d3-shape.js',
18-
'^d3-path$': prefix + 'node_modules/d3-path/dist/d3-path.js',
19-
};
38+
const cjsPathsToEsmOnlyPackages = d3Libs.reduce((acc, lib) => {
39+
acc[`^${lib}$`] = createD3LibMappingToCommonJs(lib);
40+
return acc;
41+
}, {});
42+
2043
return cjsPathsToEsmOnlyPackages;
2144
}
2245

‎packages/react-charting/package.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,27 @@
4242
"@fluentui/react-focus": "^8.9.13",
4343
"@fluentui/theme-samples": "^8.7.173",
4444
"@microsoft/load-themed-styles": "^1.10.26",
45-
"@types/d3-array": "^2.0.0",
46-
"@types/d3-axis": "^2.0.0",
47-
"@types/d3-format": "^2.0.0",
48-
"@types/d3-hierarchy": "^2.0.0",
45+
"@types/d3-array": "^3.0.0",
46+
"@types/d3-axis": "^3.0.0",
47+
"@types/d3-format": "^3.0.0",
48+
"@types/d3-hierarchy": "^3.0.0",
4949
"@types/d3-sankey": "^0.12.3",
5050
"@types/d3-scale": "^4.0.0",
51-
"@types/d3-selection": "^2.0.0",
51+
"@types/d3-selection": "^3.0.0",
5252
"@types/d3-shape": "^3.0.0",
5353
"@types/d3-time-format": "^3.0.0",
54-
"@types/d3-time": "^2.0.0",
54+
"@types/d3-time": "^3.0.0",
5555
"@fluentui/set-version": "^8.2.23",
56-
"d3-array": "^2.0.0",
57-
"d3-axis": "^2.0.0",
58-
"d3-format": "^2.0.0",
59-
"d3-hierarchy": "^2.0.0",
56+
"d3-array": "^3.0.0",
57+
"d3-axis": "^3.0.0",
58+
"d3-format": "^3.0.0",
59+
"d3-hierarchy": "^3.0.0",
6060
"d3-sankey": "^0.12.3",
6161
"d3-scale": "^4.0.0",
62-
"d3-selection": "^2.0.0",
62+
"d3-selection": "^3.0.0",
6363
"d3-shape": "^3.0.0",
6464
"d3-time-format": "^3.0.0",
65-
"d3-time": "^2.0.0",
65+
"d3-time": "^3.0.0",
6666
"tslib": "^2.1.0"
6767
},
6868
"peerDependencies": {

‎packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap

+25-25
Original file line numberDiff line numberDiff line change
@@ -150,15 +150,15 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
150150
cx={40}
151151
cy={115.625}
152152
data-is-focusable={true}
153-
fill="#ffffff"
153+
fill="red"
154154
id="circle2_0"
155155
key="circle2_0"
156156
onBlur={[Function]}
157157
onClick={[Function]}
158158
onFocus={[Function]}
159159
onMouseOut={[Function]}
160160
onMouseOver={[Function]}
161-
r={8}
161+
r={0}
162162
role="img"
163163
stroke="red"
164164
strokeWidth={3}
@@ -168,15 +168,15 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
168168
cx={-20}
169169
cy={20}
170170
data-is-focusable={true}
171-
fill="red"
171+
fill="#ffffff"
172172
id="circle2_1"
173173
key="circle2_1"
174174
onBlur={[Function]}
175175
onClick={[Function]}
176176
onFocus={[Function]}
177177
onMouseOut={[Function]}
178178
onMouseOver={[Function]}
179-
r={0}
179+
r={8}
180180
role="img"
181181
stroke="red"
182182
strokeWidth={3}
@@ -190,8 +190,8 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
190190
strokeDasharray={5.5}
191191
strokeWidth={1}
192192
visibility="visibility"
193-
x1={40}
194-
x2={40}
193+
x1={-20}
194+
x2={-20}
195195
y1={0}
196196
y2={310}
197197
/>
@@ -487,7 +487,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
487487
data-is-focusable={false}
488488
role="text"
489489
>
490-
20
490+
40
491491
</div>
492492
</div>
493493
<div
@@ -519,7 +519,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
519519
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
520520
forced-color-adjust: none;
521521
}
522-
id="0_50"
522+
id="0_80"
523523
>
524524
<div>
525525
<div
@@ -556,7 +556,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
556556
color: rgb(255, 255, 255);
557557
}
558558
>
559-
50
559+
80
560560
</div>
561561
</div>
562562
</div>
@@ -721,15 +721,15 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
721721
cx={40}
722722
cy={115.625}
723723
data-is-focusable={true}
724-
fill="#ffffff"
724+
fill="red"
725725
id="circle2_0"
726726
key="circle2_0"
727727
onBlur={[Function]}
728728
onClick={[Function]}
729729
onFocus={[Function]}
730730
onMouseOut={[Function]}
731731
onMouseOver={[Function]}
732-
r={8}
732+
r={0}
733733
role="img"
734734
stroke="red"
735735
strokeWidth={3}
@@ -739,15 +739,15 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
739739
cx={-20}
740740
cy={20}
741741
data-is-focusable={true}
742-
fill="red"
742+
fill="#ffffff"
743743
id="circle2_1"
744744
key="circle2_1"
745745
onBlur={[Function]}
746746
onClick={[Function]}
747747
onFocus={[Function]}
748748
onMouseOut={[Function]}
749749
onMouseOver={[Function]}
750-
r={0}
750+
r={8}
751751
role="img"
752752
stroke="red"
753753
strokeWidth={3}
@@ -761,8 +761,8 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
761761
strokeDasharray={5.5}
762762
strokeWidth={1}
763763
visibility="visibility"
764-
x1={40}
765-
x2={40}
764+
x1={-20}
765+
x2={-20}
766766
y1={0}
767767
y2={310}
768768
/>
@@ -1021,11 +1021,11 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
10211021
<div>
10221022
<pre>
10231023
{
1024-
"x": 20,
1024+
"x": 40,
10251025
"values": [
10261026
{
10271027
"legend": "metaData1",
1028-
"y": 50,
1028+
"y": 80,
10291029
"color": "red"
10301030
}
10311031
]
@@ -1189,15 +1189,15 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
11891189
cx={40}
11901190
cy={115.625}
11911191
data-is-focusable={true}
1192-
fill="#ffffff"
1192+
fill="red"
11931193
id="circle2_0"
11941194
key="circle2_0"
11951195
onBlur={[Function]}
11961196
onClick={[Function]}
11971197
onFocus={[Function]}
11981198
onMouseOut={[Function]}
11991199
onMouseOver={[Function]}
1200-
r={8}
1200+
r={0}
12011201
role="img"
12021202
stroke="red"
12031203
strokeWidth={3}
@@ -1207,15 +1207,15 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
12071207
cx={-20}
12081208
cy={20}
12091209
data-is-focusable={true}
1210-
fill="red"
1210+
fill="#ffffff"
12111211
id="circle2_1"
12121212
key="circle2_1"
12131213
onBlur={[Function]}
12141214
onClick={[Function]}
12151215
onFocus={[Function]}
12161216
onMouseOut={[Function]}
12171217
onMouseOver={[Function]}
1218-
r={0}
1218+
r={8}
12191219
role="img"
12201220
stroke="red"
12211221
strokeWidth={3}
@@ -1229,8 +1229,8 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
12291229
strokeDasharray={5.5}
12301230
strokeWidth={1}
12311231
visibility="visibility"
1232-
x1={40}
1233-
x2={40}
1232+
x1={-20}
1233+
x2={-20}
12341234
y1={0}
12351235
y2={310}
12361236
/>
@@ -1489,11 +1489,11 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
14891489
<div>
14901490
<pre>
14911491
{
1492-
"x": 20,
1492+
"x": 40,
14931493
"values": [
14941494
{
14951495
"legend": "metaData1",
1496-
"y": 50,
1496+
"y": 80,
14971497
"color": "red"
14981498
}
14991499
]

‎packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
6868
private chartContainer: HTMLDivElement;
6969
private legendContainer: HTMLDivElement;
7070
private minLegendContainerHeight: number = 32;
71-
private xAxisElement: SVGElement | null;
72-
private yAxisElement: SVGElement | null;
73-
private yAxisElementSecondary: SVGElement | null;
71+
private xAxisElement: SVGSVGElement | null;
72+
private yAxisElement: SVGSVGElement | null;
73+
private yAxisElementSecondary: SVGSVGElement | null;
7474
private margins: IMargins;
7575
private idForGraph: string;
7676
private idForDefaultTabbableElement: string;
@@ -497,7 +497,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
497497
{...svgProps}
498498
>
499499
<g
500-
ref={(e: SVGElement | null) => {
500+
ref={(e: SVGSVGElement | null) => {
501501
this.xAxisElement = e;
502502
}}
503503
id={`xAxisGElement${this.idForGraph}`}
@@ -522,7 +522,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
522522
/>
523523
)}
524524
<g
525-
ref={(e: SVGElement | null) => {
525+
ref={(e: SVGSVGElement | null) => {
526526
this.yAxisElement = e;
527527
}}
528528
id={`yAxisGElement${this.idForGraph}`}
@@ -536,7 +536,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
536536
{this.props.secondaryYScaleOptions && (
537537
<g>
538538
<g
539-
ref={(e: SVGElement | null) => {
539+
ref={(e: SVGSVGElement | null) => {
540540
this.yAxisElementSecondary = e;
541541
}}
542542
id={`yAxisGElementSecondary${this.idForGraph}`}

0 commit comments

Comments
 (0)