Skip to content

Commit 776e335

Browse files
GoodDayForSurfGoodDayForSurf
committed
fix TS in Schedulers demos set Vue demos
1 parent b2be014 commit 776e335

33 files changed

Lines changed: 183 additions & 160 deletions

File tree

‎apps/demos/Demos/Pagination/Overview/Vue/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { computed, ref } from 'vue';
4242
import DxPagination from 'devextreme-vue/pagination';
4343
import { employees } from './data.ts';
4444
45-
const getPageEmployees = (pageIndex, pageSize) => {
45+
const getPageEmployees = (pageIndex: number, pageSize: number) => {
4646
return employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
4747
}
4848

‎apps/demos/Demos/PivotGrid/ChartIntegration/Vue/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import { sales } from './data.ts';
4545
4646
const grid = ref<DxPivotGrid>();
4747
const chart = ref<DxChart>();
48-
const dataSource = {
48+
const dataSource: Record<string, any> = {
4949
fields: [{
5050
caption: 'Region',
5151
width: 120,
@@ -78,7 +78,7 @@ const dataSource = {
7878
}],
7979
store: sales,
8080
};
81-
const customizeTooltip = ({ seriesName, originalValue }) => {
81+
const customizeTooltip = ({ seriesName, originalValue }: Record<string, any>) => {
8282
const valueText = (seriesName.indexOf('Total') !== -1)
8383
? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(originalValue)
8484
: originalValue;

‎apps/demos/Demos/PivotGrid/Customization/Vue/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ import DxPivotGrid, {
4747
DxFieldChooser,
4848
type DxPivotGridTypes,
4949
} from 'devextreme-vue/pivot-grid';
50+
import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
5051
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
51-
import DxCheckBox from 'devextreme-vue/check-box';
5252
import { sales } from './data.ts';
5353
5454
const showTotalsPrior = ref<DxPivotGridTypes.PivotGridTotalDisplayMode>('none');
@@ -91,13 +91,13 @@ const dataSource = new PivotGridDataSource({
9191
store: sales,
9292
});
9393
94-
function onShowTotalsPriorChanged(data) {
94+
function onShowTotalsPriorChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
9595
showTotalsPrior.value = data.value ? 'both' : 'none';
9696
}
97-
function onDataFieldAreaChanged(data) {
97+
function onDataFieldAreaChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
9898
dataFieldArea.value = data.value ? 'row' : 'column';
9999
}
100-
function onRowHeaderLayoutChanged(data) {
100+
function onRowHeaderLayoutChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
101101
rowHeaderLayout.value = data.value ? 'tree' : 'standard';
102102
}
103103
</script>

‎apps/demos/Demos/PivotGrid/DrillDown/Vue/App.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,16 +81,16 @@ const dataSource = new PivotGridDataSource({
8181
store: sales,
8282
});
8383
const dataGridRef = ref();
84-
const drillDownDataSource = ref<DataSource>(null);
84+
const drillDownDataSource = ref<DataSource>();
8585
const popupTitle = ref('');
8686
const popupVisible = ref(false);
8787
88-
function onCellClick(e: DxPivotGridTypes.CellClickEvent) {
89-
if (e.area === 'data') {
90-
const pivotGridDataSource = e.component.getDataSource();
91-
const rowPathLength = e.cell.rowPath.length;
92-
const rowPathName = e.cell.rowPath[rowPathLength - 1];
93-
drillDownDataSource.value = pivotGridDataSource.createDrillDownDataSource(e.cell);
88+
function onCellClick({ area, cell, component }: DxPivotGridTypes.CellClickEvent) {
89+
if (area === 'data' && cell?.rowPath) {
90+
const pivotGridDataSource = component.getDataSource();
91+
const rowPathLength = cell.rowPath.length;
92+
const rowPathName = cell.rowPath[rowPathLength - 1];
93+
drillDownDataSource.value = pivotGridDataSource.createDrillDownDataSource(cell);
9494
popupTitle.value = `${
9595
rowPathName || 'Total'
9696
} Drill Down Data`;

‎apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { Workbook } from 'devextreme-exceljs-fork';
2727
// Our demo infrastructure requires us to use 'file-saver-es'.
2828
// We recommend that you use the official 'file-saver' package in your applications.
2929
import { saveAs } from 'file-saver-es';
30-
import { exportPivotGrid } from 'devextreme/excel_exporter';
30+
import { exportPivotGrid, type PivotGridCell } from 'devextreme-vue/common/export/excel';
3131
import { sales } from './data.ts';
3232
3333
interface ConditionalAppearance {
@@ -69,8 +69,8 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
6969
exportPivotGrid({
7070
component: e.component,
7171
worksheet,
72-
customizeCell: ({ pivotCell, excelCell }) => {
73-
if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
72+
customizeCell: ({ pivotCell, excelCell }: { pivotCell?: PivotGridCell, excelCell?: any }) => {
73+
if (pivotCell && (isDataCell(pivotCell) || isTotalCell(pivotCell))) {
7474
const appearance = getConditionalAppearance(pivotCell);
7575
Object.assign(excelCell, getExcelCellFormat(appearance));
7676
}
@@ -90,15 +90,15 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
9090
});
9191
}
9292
function onCellPrepared({ cell, cellElement }: DxPivotGridTypes.CellPreparedEvent) {
93-
if (isDataCell(cell) || isTotalCell(cell)) {
93+
if (cell && cellElement && (isDataCell(cell) || isTotalCell(cell))) {
9494
const appearance = getConditionalAppearance(cell);
9595
Object.assign(cellElement.style, getCssStyles(appearance));
9696
}
9797
}
98-
function isDataCell(cell) {
98+
function isDataCell(cell: DxPivotGridTypes.Cell) {
9999
return (cell.rowType === 'D' && cell.columnType === 'D');
100100
}
101-
function isTotalCell(cell) {
101+
function isTotalCell(cell: DxPivotGridTypes.Cell) {
102102
return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
103103
}
104104
function getExcelCellFormat({ fill, font, bold = false }: ConditionalAppearance) {
@@ -114,7 +114,7 @@ function getCssStyles({ fill, font, bold = false }: ConditionalAppearance) {
114114
'font-weight': bold ? 'bold' : undefined,
115115
};
116116
}
117-
function getConditionalAppearance(cell): ConditionalAppearance {
117+
function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppearance {
118118
if (isTotalCell(cell)) {
119119
return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
120120
}

‎apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,9 @@ import { ref } from 'vue';
6666
import DxPivotGrid, {
6767
DxFieldChooser,
6868
DxFieldPanel,
69+
type DxPivotGridTypes,
6970
} from 'devextreme-vue/pivot-grid';
70-
import DxCheckBox from 'devextreme-vue/check-box';
71+
import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
7172
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
7273
import { sales } from './data.ts';
7374
@@ -86,7 +87,7 @@ const gridDataSource = new PivotGridDataSource({
8687
dataField: 'city',
8788
width: 150,
8889
area: 'row',
89-
selector(data) {
90+
selector(data: Record<string, unknown>) {
9091
return `${data.city} (${data.country})`;
9192
},
9293
}, {
@@ -103,36 +104,34 @@ const gridDataSource = new PivotGridDataSource({
103104
store: sales,
104105
});
105106
106-
function OnShowColumnFieldsChanged(e) {
107+
function OnShowColumnFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
107108
showColumnFields.value = e.value;
108109
}
109-
function OnShowDataFieldsChanged(e) {
110+
function OnShowDataFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
110111
showDataFields.value = e.value;
111112
}
112-
function OnShowFilterFieldsChanged(e) {
113+
function OnShowFilterFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
113114
showFilterFields.value = e.value;
114115
}
115-
function OnShowRowFieldsChanged(e) {
116+
function OnShowRowFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
116117
showRowFields.value = e.value;
117118
}
118-
function onContextMenuPreparing(e) {
119+
function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
119120
const dataSource = e.component.getDataSource();
120-
const sourceField = e.field;
121+
const sourceField: Record<string, any> | undefined = e.field;
121122
122123
if (sourceField) {
123124
if (!sourceField.groupName || sourceField.groupIndex === 0) {
124-
e.items.push({
125+
e.items?.push({
125126
text: 'Hide field',
126127
onItemClick() {
127128
let fieldIndex: number;
128129
129-
if (sourceField.groupName) {
130-
fieldIndex = dataSource
131-
.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
132-
.index;
133-
} else {
134-
fieldIndex = sourceField.index;
135-
}
130+
const dataSourceField: Record<string, any> = sourceField.groupName
131+
? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
132+
: sourceField
133+
134+
fieldIndex = dataSourceField.index;
136135
137136
dataSource.field(fieldIndex, {
138137
area: null,
@@ -143,7 +142,7 @@ function onContextMenuPreparing(e) {
143142
}
144143
145144
if (sourceField.dataType === 'number') {
146-
const setSummaryType = function(args) {
145+
const setSummaryType = function(args: Record<string, any>) {
147146
dataSource.field(sourceField.index, {
148147
summaryType: args.itemData.value,
149148
});
@@ -152,7 +151,7 @@ function onContextMenuPreparing(e) {
152151
};
153152
const menuItems: Record<string, any>[] = [];
154153
155-
e.items.push({ text: 'Summary Type', items: menuItems });
154+
e.items?.push({ text: 'Summary Type', items: menuItems });
156155
157156
['Sum', 'Avg', 'Min', 'Max'].forEach((summaryType) => {
158157
const summaryTypeValue = summaryType.toLowerCase();
@@ -161,7 +160,7 @@ function onContextMenuPreparing(e) {
161160
text: summaryType,
162161
value: summaryType.toLowerCase(),
163162
onItemClick: setSummaryType,
164-
selected: e.field.summaryType === summaryTypeValue,
163+
selected: e.field?.summaryType === summaryTypeValue,
165164
});
166165
});
167166
}

‎apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {
4040
DxSelectBox,
4141
} from 'devextreme-vue/select-box';
4242
43-
const dataSource = {
43+
const dataSource: Record<string, any> = {
4444
fields: [
4545
{ dataField: '[Product].[Category]', area: 'row' },
4646
{

‎apps/demos/Demos/PivotGrid/Overview/Vue/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const dataSource = new PivotGridDataSource({
7676
store: sales,
7777
});
7878
79-
const customizeTooltip = function({ seriesName, originalValue }) {
79+
const customizeTooltip = function({ seriesName, originalValue }: Record<string, any>) {
8080
const valueText = currencyFormatter.format(originalValue);
8181
return {
8282
html: `${seriesName} | Total<div class='currency'>${valueText}</div>`,

‎apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const dataSource = new PivotGridDataSource({
3737
dataField: 'city',
3838
width: 150,
3939
area: 'row',
40-
selector(data) {
40+
selector(data: Record<string, unknown>) {
4141
return `${data.city} (${data.country})`;
4242
},
4343
},

‎apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const dataSource = new PivotGridDataSource({
113113
enabled: true,
114114
},
115115
},
116-
selector(data) {
116+
selector(data: Record<string, unknown>) {
117117
return `${data.city} (${data.country})`;
118118
},
119119
}, {

0 commit comments

Comments
 (0)