Skip to content

Commit 97dc78c

Browse files
anna-shakhovaanna-shakhova
authored
PivotGrid: fix ts issues in demos in strict mode (#32053)
1 parent ec8eb14 commit 97dc78c

File tree

33 files changed

+298
-262
lines changed

33 files changed

+298
-262
lines changed

‎apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
import React, { useEffect, useRef } from 'react';
22

33
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
4-
54
import Chart, {
65
AdaptiveLayout,
76
CommonSeriesSettings,
87
Size,
98
Tooltip,
10-
ChartRef,
119
} from 'devextreme-react/chart';
12-
13-
import PivotGrid, {
14-
FieldChooser,
15-
PivotGridRef,
16-
} from 'devextreme-react/pivot-grid';
10+
import type { ChartRef, ChartTypes } from 'devextreme-react/chart';
11+
import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
12+
import type { PivotGridRef } from 'devextreme-react/pivot-grid';
1713

1814
import { sales } from './data.ts';
1915

20-
const customizeTooltip = (args) => {
16+
const customizeTooltip = (args: ChartTypes.CommonPointInfo) => {
2117
const valueText = (args.seriesName.indexOf('Total') !== -1)
22-
? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue)
18+
? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue as number)
2319
: args.originalValue;
2420

2521
return {
@@ -33,14 +29,14 @@ const App = () => {
3329
const pivotGridRef = useRef<PivotGridRef>(null);
3430

3531
useEffect(() => {
36-
pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
32+
pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
3733
dataFieldsDisplayMode: 'splitPanes',
3834
alternateDataFields: false,
3935
});
4036
}, []);
4137

4238
return (
43-
<React.Fragment>
39+
<>
4440
<Chart ref={chartRef}>
4541
<Size height={320} />
4642
<Tooltip enabled={true} customizeTooltip={customizeTooltip} />
@@ -62,7 +58,7 @@ const App = () => {
6258
>
6359
<FieldChooser enabled={true} height={400} />
6460
</PivotGrid>
65-
</React.Fragment>
61+
</>
6662
);
6763
};
6864

‎apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ const App = () => {
2121
const chartRef = useRef(null);
2222
const pivotGridRef = useRef(null);
2323
useEffect(() => {
24-
pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
24+
pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
2525
dataFieldsDisplayMode: 'splitPanes',
2626
alternateDataFields: false,
2727
});
2828
}, []);
2929
return (
30-
<React.Fragment>
30+
<>
3131
<Chart ref={chartRef}>
3232
<Size height={320} />
3333
<Tooltip
@@ -55,7 +55,7 @@ const App = () => {
5555
height={400}
5656
/>
5757
</PivotGrid>
58-
</React.Fragment>
58+
</>
5959
);
6060
};
6161
const dataSource = new PivotGridDataSource({

‎apps/demos/Demos/PivotGrid/Customization/React/App.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import React, { useState } from 'react';
2+
23
import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
34
import CheckBox from 'devextreme-react/check-box';
5+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
46
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
7+
58
import { sales } from './data.ts';
69

10+
type CheckBoxValue = CheckBoxTypes.Properties['value'];
11+
712
const App = () => {
8-
const [showTotalsPrior, setShowTotalsPrior] = useState(false);
9-
const [dataFieldArea, setDataFieldArea] = useState(false);
10-
const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
13+
const [showTotalsPrior, setShowTotalsPrior] = useState<CheckBoxValue>(false);
14+
const [dataFieldArea, setDataFieldArea] = useState<CheckBoxValue>(false);
15+
const [rowHeaderLayout, setRowHeaderLayout] = useState<CheckBoxValue>(true);
1116

1217
return (
13-
<React.Fragment>
18+
<>
1419
<PivotGrid
1520
id="sales"
1621
showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -52,7 +57,7 @@ const App = () => {
5257
/>
5358
</div>
5459
</div>
55-
</React.Fragment>
60+
</>
5661
);
5762
};
5863

‎apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const App = () => {
99
const [dataFieldArea, setDataFieldArea] = useState(false);
1010
const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
1111
return (
12-
<React.Fragment>
12+
<>
1313
<PivotGrid
1414
id="sales"
1515
showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -51,7 +51,7 @@ const App = () => {
5151
/>
5252
</div>
5353
</div>
54-
</React.Fragment>
54+
</>
5555
);
5656
};
5757
const dataSource = new PivotGridDataSource({

‎apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useCallback, useRef, useState } from 'react';
2+
23
import {
34
PivotGrid,
45
FieldChooser,
56
type PivotGridTypes,
67
} from 'devextreme-react/pivot-grid';
7-
import { DataGrid, Column, DataGridRef } from 'devextreme-react/data-grid';
8+
import { DataGrid, Column } from 'devextreme-react/data-grid';
9+
import type { DataGridRef } from 'devextreme-react/data-grid';
810
import { Popup } from 'devextreme-react/popup';
911
import { DataSource } from 'devextreme-react/common/data';
1012
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
@@ -13,15 +15,15 @@ import { sales } from './data.ts';
1315

1416
const App = () => {
1517
const [popupTitle, setPopupTitle] = useState('');
16-
const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource>(null);
18+
const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | null>(null);
1719
const [popupVisible, setPopupVisible] = useState(false);
1820
const dataGridRef = useRef<DataGridRef>(null);
1921

2022
const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
21-
if (e.area === 'data') {
23+
if (e.area === 'data' && e.cell) {
2224
const pivotGridDataSource = e.component.getDataSource();
23-
const rowPathLength = e.cell.rowPath.length;
24-
const rowPathName = e.cell.rowPath[rowPathLength - 1];
25+
const rowPathLength = e.cell.rowPath?.length ?? 0;
26+
const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
2527

2628
setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
2729
setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
@@ -30,7 +32,7 @@ const App = () => {
3032
}, []);
3133

3234
return (
33-
<React.Fragment>
35+
<>
3436
<PivotGrid
3537
id="sales"
3638
allowSortingBySummary={true}
@@ -49,7 +51,7 @@ const App = () => {
4951
height={400}
5052
title={popupTitle}
5153
onHiding={() => setPopupVisible(false)}
52-
onShown={() => dataGridRef.current.instance().updateDimensions()}
54+
onShown={() => dataGridRef.current?.instance().updateDimensions()}
5355
showCloseButton={true}
5456
>
5557
<DataGrid
@@ -64,7 +66,7 @@ const App = () => {
6466
<Column dataField="date" dataType="date" />
6567
</DataGrid>
6668
</Popup>
67-
</React.Fragment>
69+
</>
6870
);
6971
};
7072

‎apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ const App = () => {
1111
const [popupVisible, setPopupVisible] = useState(false);
1212
const dataGridRef = useRef(null);
1313
const onCellClick = useCallback((e) => {
14-
if (e.area === 'data') {
14+
if (e.area === 'data' && e.cell) {
1515
const pivotGridDataSource = e.component.getDataSource();
16-
const rowPathLength = e.cell.rowPath.length;
17-
const rowPathName = e.cell.rowPath[rowPathLength - 1];
16+
const rowPathLength = e.cell.rowPath?.length ?? 0;
17+
const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
1818
setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
1919
setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
2020
setPopupVisible(true);
2121
}
2222
}, []);
2323
return (
24-
<React.Fragment>
24+
<>
2525
<PivotGrid
2626
id="sales"
2727
allowSortingBySummary={true}
@@ -40,7 +40,7 @@ const App = () => {
4040
height={400}
4141
title={popupTitle}
4242
onHiding={() => setPopupVisible(false)}
43-
onShown={() => dataGridRef.current.instance().updateDimensions()}
43+
onShown={() => dataGridRef.current?.instance().updateDimensions()}
4444
showCloseButton={true}
4545
>
4646
<DataGrid
@@ -62,7 +62,7 @@ const App = () => {
6262
/>
6363
</DataGrid>
6464
</Popup>
65-
</React.Fragment>
65+
</>
6666
);
6767
};
6868
const dataSource = new PivotGridDataSource({

‎apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { saveAs } from 'file-saver-es';
1111
// Our demo infrastructure requires us to use 'file-saver-es'.
1212
// We recommend that you use the official 'file-saver' package in your applications.
1313
import { exportPivotGrid } from 'devextreme/excel_exporter';
14+
import type { PivotGridCell, ExcelExportPivotGridProps } from 'devextreme/excel_exporter';
15+
1416
import { sales } from './data.ts';
1517

1618
interface ConditionalAppearance {
@@ -19,6 +21,8 @@ interface ConditionalAppearance {
1921
bold?: boolean,
2022
}
2123

24+
type CustomizeCellOptions = Parameters<Required<ExcelExportPivotGridProps>['customizeCell']>[0];
25+
2226
const dataSource = new PivotGridDataSource({
2327
fields: [{
2428
caption: 'Region',
@@ -45,9 +49,13 @@ const dataSource = new PivotGridDataSource({
4549
store: sales,
4650
});
4751

48-
const isDataCell = (cell) => cell.rowType === 'D' && cell.columnType === 'D';
52+
const isDataCell = (cell: PivotGridCell) => cell.rowType === 'D' && cell.columnType === 'D';
4953

50-
const isTotalCell = (cell) => (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
54+
const isTotalCell = (cell: PivotGridCell) => (
55+
cell.type === 'T' || cell.type === 'GT'
56+
|| cell.rowType === 'T' || cell.rowType === 'GT'
57+
|| cell.columnType === 'T' || cell.columnType === 'GT'
58+
);
5159

5260
const getExcelCellFormat = ({ fill, font, bold }: ConditionalAppearance) =>
5361
({
@@ -62,7 +70,7 @@ const getCssStyles = ({ fill, font, bold }: ConditionalAppearance) =>
6270
'font-weight': bold ? 'bold' : undefined,
6371
});
6472

65-
const getConditionalAppearance = (cell): ConditionalAppearance => {
73+
const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance => {
6674
if (isTotalCell(cell)) {
6775
return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
6876
}
@@ -83,19 +91,21 @@ const onExporting = (e: PivotGridTypes.ExportingEvent) => {
8391
exportPivotGrid({
8492
component: e.component,
8593
worksheet,
86-
customizeCell: ({ pivotCell, excelCell }) => {
87-
if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
88-
const appearance = getConditionalAppearance(pivotCell);
89-
Object.assign(excelCell, getExcelCellFormat(appearance));
90-
}
94+
customizeCell: ({ pivotCell, excelCell }: CustomizeCellOptions) => {
95+
if (pivotCell && excelCell) {
96+
if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
97+
const appearance = getConditionalAppearance(pivotCell);
98+
Object.assign(excelCell, getExcelCellFormat(appearance));
99+
}
91100

92-
const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
93-
excelCell.border = {
94-
bottom: borderStyle,
95-
left: borderStyle,
96-
right: borderStyle,
97-
top: borderStyle,
98-
};
101+
const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
102+
excelCell.border = {
103+
bottom: borderStyle,
104+
left: borderStyle,
105+
right: borderStyle,
106+
top: borderStyle,
107+
};
108+
}
99109
},
100110
}).then(() => {
101111
workbook.xlsx.writeBuffer().then((buffer) => {

‎apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,17 +75,19 @@ const onExporting = (e) => {
7575
component: e.component,
7676
worksheet,
7777
customizeCell: ({ pivotCell, excelCell }) => {
78-
if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
79-
const appearance = getConditionalAppearance(pivotCell);
80-
Object.assign(excelCell, getExcelCellFormat(appearance));
78+
if (pivotCell && excelCell) {
79+
if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
80+
const appearance = getConditionalAppearance(pivotCell);
81+
Object.assign(excelCell, getExcelCellFormat(appearance));
82+
}
83+
const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
84+
excelCell.border = {
85+
bottom: borderStyle,
86+
left: borderStyle,
87+
right: borderStyle,
88+
top: borderStyle,
89+
};
8190
}
82-
const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
83-
excelCell.border = {
84-
bottom: borderStyle,
85-
left: borderStyle,
86-
right: borderStyle,
87-
top: borderStyle,
88-
};
8991
},
9092
}).then(() => {
9193
workbook.xlsx.writeBuffer().then((buffer) => {

0 commit comments

Comments
 (0)