Skip to content

Commit 7672c21

Browse files
Update custom items to ES6 syntax
1 parent 536fc90 commit 7672c21

12 files changed

+666
-660
lines changed

CS/AspNetCoreCustomItem/AspNetCoreCustomItemGallery.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<TargetFramework>net5.0</TargetFramework>
55
</PropertyGroup>
66
<ItemGroup>
7-
<PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="22.1.3" />
7+
<PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="22.1.4" />
88
<PackageReference Include="System.Data.SQLite.Core" Version="1.0.112.2" />
99
<PackageReference Include="BuildBundlerMinifier" Version="3.2.447" />
1010
<PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="2.1.76" /></ItemGroup>

CS/AspNetCoreCustomItem/Pages/_Layout.cshtml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
dashboardControl.registerExtension(new WebPageCustomItem(dashboardControl));
1919
dashboardControl.registerExtension(new GanttCustomItem(dashboardControl));
2020
dashboardControl.registerExtension(new TreeViewCustomItem(dashboardControl));
21+
dashboardControl.registerExtension(new FunnelD3CustomItem(dashboardControl));
2122
}
2223
</script>
2324
</head>

CS/AspNetCoreCustomItem/bundleconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
2828
"node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
2929
"node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js",
30-
"node_modules/d3-funnel/dist/js/d3-funnel.min.js"
30+
"node_modules/d3-funnel/dist/d3-funnel.min.js"
3131
],
3232
"minify": {
3333
"enabled": false

CS/AspNetCoreCustomItem/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6-
"@devexpress/analytics-core": "^22.1.3",
7-
"d3-funnel": "^2.1.1",
8-
"devexpress-dashboard": "^22.1.3",
6+
"@devexpress/analytics-core": "^22.1.4",
7+
"d3-funnel": "^1.2.2",
8+
"devexpress-dashboard": "^22.1.4",
99
"devexpress-gantt": "3.1.23",
10-
"devextreme": "^22.1.3",
10+
"devextreme": "^22.1.4",
1111
"jquery-ui-dist": "^1.12.1"
1212
}
1313
}

CS/AspNetCoreCustomItem/wwwroot/js/FunnelD3.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
const Dashboard = DevExpress.Dashboard;
33
const Designer = DevExpress.Dashboard.Designer;
44
const Model = DevExpress.Dashboard.Model;
5-
const D3Funnel = D3Funnel;
65

76
const FUNNEL_D3_EXTENSION_NAME = 'FunnelD3';
87
const svgIcon = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="' + FUNNEL_D3_EXTENSION_NAME + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><polygon class="dx_green" points="2,1 22,1 16,8 8,8 "/><polygon class="dx_blue" points="8,9 16,9 14,15 10,15 "/><polygon class="dx_red" points="10,16 14,16 13,23 11,23 "/></svg>';
@@ -121,7 +120,7 @@
121120
}
122121

123122
renderContent(element, changeExisting) {
124-
let htmlElement = element;
123+
let htmlElement= element instanceof $ ? element.get(0): element;
125124

126125
var data = this._getDataSource();
127126
if (!this._ensureFunnelLibrary(htmlElement))
@@ -159,11 +158,11 @@
159158
this._update(this._getDataSource());
160159
}
161160
allowExportSingleItem() {
162-
return !this._isIEBrowser();
161+
return true;
163162
}
164163
getExportInfo() {
165164
return {
166-
image: this._isIEBrowser() ? '' : this._getImageBase64()
165+
image: this._getImageBase64()
167166
};
168167
}
169168
_getFunnelSizeOptions() {
@@ -224,7 +223,7 @@
224223
var obj = this.funnelSettings.data[index][0];
225224
return obj.data && this.isSelected(obj.data) ? getSelectionColor(obj.color) : obj.color;
226225
},
227-
type: (this.getPropertyValue('FillType')).toLowerCase()
226+
type: this.getPropertyValue('FillType').toLowerCase()
228227
}
229228
},
230229
label: {
@@ -264,7 +263,7 @@
264263
this.funnelSettings.data = data;
265264
}
266265
if (!!options) {
267-
this.funnelSettings.options = { ...this.funnelSettings.options, ...options };
266+
$.extend(true, this.funnelSettings.options, options);
268267
}
269268
if (!!this.funnelViewer) {
270269
this.funnelViewer.draw(this.funnelSettings.data, this.funnelSettings.options);
@@ -288,19 +287,20 @@
288287
canvasContext && canvasContext.drawImage(this.exportingImage, 0, 0);
289288
return canvas.toDataURL().replace('data:image/png;base64,', '');
290289
}
291-
_isIEBrowser() {
292-
return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0;
293-
}
294290
}
295291

296-
function FunnelD3Item(dashboardControl) {
297-
dashboardControl.registerIcon(svgIcon);
298-
this.name = FUNNEL_D3_EXTENSION_NAME;
299-
this.metaData = funnelMeta;
300-
this.createViewerItem = function (model, $element, content) {
301-
return new FunnelD3ItemViewer(model, $element, content);
292+
class FunnelD3Item {
293+
name = FUNNEL_D3_EXTENSION_NAME;
294+
metaData = funnelMeta;
295+
296+
constructor(dashboardControl) {
297+
dashboardControl.registerIcon(svgIcon);
302298
}
303-
};
299+
300+
createViewerItem(model, element, content) {
301+
return new FunnelD3ItemViewer(model, element, content);
302+
}
303+
}
304304

305305
return FunnelD3Item;
306306
})();

CS/AspNetCoreCustomItem/wwwroot/js/GanttItem.js

Lines changed: 91 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -44,114 +44,115 @@
4444
index: 0
4545
};
4646

47-
function GanttItemViewer(model, $container, options) {
48-
Dashboard.CustomItemViewer.call(this, model, $container, options);
49-
this.dxGanttWidget = null;
50-
}
47+
class GanttItemViewer extends DevExpress.Dashboard.CustomItemViewer {
48+
constructor(model, $container, options) {
49+
super(model, $container, options);
50+
this.dxGanttWidget = null;
51+
}
5152

52-
GanttItemViewer.prototype = Object.create(Dashboard.CustomItemViewer.prototype);
53-
GanttItemViewer.prototype.constructor = GanttItemViewer;
54-
55-
GanttItemViewer.prototype._getDataSource = function () {
56-
var data = [];
57-
var datesValid = true;
58-
59-
this.iterateData(function (dataRow) {
60-
data.push({
61-
id: dataRow.getValue('ID')[0],
62-
parentId: dataRow.getValue('ParentID')[0],
63-
title: dataRow.getValue('Text')[0],
64-
start: dataRow.getValue('StartDate')[0],
65-
end: dataRow.getValue('FinishDate')[0],
66-
clientDataRow: dataRow
53+
_getDataSource() {
54+
var data = [];
55+
var datesValid = true;
56+
57+
this.iterateData(function (dataRow) {
58+
data.push({
59+
id: dataRow.getValue('ID')[0],
60+
parentId: dataRow.getValue('ParentID')[0],
61+
title: dataRow.getValue('Text')[0],
62+
start: dataRow.getValue('StartDate')[0],
63+
end: dataRow.getValue('FinishDate')[0],
64+
clientDataRow: dataRow
65+
});
66+
67+
var currentItem = data[data.length - 1];
68+
69+
if ((currentItem.start && !(currentItem.start instanceof Date)) || (currentItem.end && !(currentItem.end instanceof Date)))
70+
datesValid = false;
6771
});
6872

69-
var currentItem = data[data.length - 1];
70-
71-
if ((currentItem.start && !(currentItem.start instanceof Date)) || (currentItem.end && !(currentItem.end instanceof Date)))
72-
datesValid = false;
73-
});
73+
if (!datesValid) {
74+
DevExpress.ui.notify("Gantt: 'Start Date' or 'Finish Date' is not a Date object.", "warning", 3000);
75+
return [];
76+
}
7477

75-
if (!datesValid) {
76-
DevExpress.ui.notify("Gantt: 'Start Date' or 'Finish Date' is not a Date object.", "warning", 3000);
77-
return [];
78+
return data;
7879
}
7980

80-
return data;
81-
};
82-
83-
GanttItemViewer.prototype._getDxGanttWidgetSettings = function () {
84-
var _this = this;
85-
return {
86-
rootValue: -1,
87-
tasks: {
88-
dataSource: this._getDataSource()
89-
},
90-
columns: [{
91-
dataField: "title",
92-
caption: "Subject",
93-
width: 300,
94-
}, {
95-
dataField: "start",
96-
caption: "Start Date"
97-
}, {
98-
dataField: "end",
99-
caption: "End Date"
100-
}],
101-
onTaskClick: function (e) {
102-
var tasks = e.component.option("tasks.dataSource");
103-
var clickedTask = tasks.filter(item => item.id === e.key)[0];
104-
105-
_this.setMasterFilter(clickedTask.clientDataRow);
106-
},
107-
scaleType: "days",
108-
taskListWidth: 500,
109-
};
110-
};
81+
_getDxGanttWidgetSettings() {
82+
var _this = this;
83+
return {
84+
rootValue: -1,
85+
tasks: {
86+
dataSource: this._getDataSource()
87+
},
88+
columns: [{
89+
dataField: "title",
90+
caption: "Subject",
91+
width: 300,
92+
}, {
93+
dataField: "start",
94+
caption: "Start Date"
95+
}, {
96+
dataField: "end",
97+
caption: "End Date"
98+
}],
99+
onTaskClick: function (e) {
100+
var tasks = e.component.option("tasks.dataSource");
101+
var clickedTask = tasks.filter(item => item.id === e.key)[0];
102+
103+
_this.setMasterFilter(clickedTask.clientDataRow);
104+
},
105+
scaleType: "days",
106+
taskListWidth: 500,
107+
};
108+
}
111109

112-
GanttItemViewer.prototype.setSelection = function (values) {
113-
Object.getPrototypeOf(GanttItemViewer.prototype).setSelection.call(this, values);
110+
setSelection(values) {
111+
super.setSelection(values);
114112

115-
var _this = this;
116-
var tasks = _this.dxGanttWidget.option("tasks.dataSource");
113+
var _this = this;
114+
var tasks = _this.dxGanttWidget.option("tasks.dataSource");
117115

118-
tasks.forEach(function (item) {
119-
if (_this.isSelected(item.clientDataRow))
120-
_this.dxGanttWidget.option("selectedRowKey", item.id);
121-
});
122-
};
116+
tasks.forEach(function (item) {
117+
if (_this.isSelected(item.clientDataRow))
118+
_this.dxGanttWidget.option("selectedRowKey", item.id);
119+
});
120+
}
123121

124-
GanttItemViewer.prototype.clearSelection = function () {
125-
Object.getPrototypeOf(GanttItemViewer.prototype).clearSelection.call(this);
126-
this.dxGanttWidget.option("selectedRowKey", null);
127-
};
122+
clearSelection() {
123+
super.clearSelection();
124+
this.dxGanttWidget.option("selectedRowKey", null);
125+
}
128126

129-
GanttItemViewer.prototype.setSize = function (width, height) {
130-
Object.getPrototypeOf(GanttItemViewer.prototype).setSize.call(this, width, height);
131-
this.dxGanttWidget.repaint();
132-
};
127+
setSize(width, height) {
128+
super.setSize(width, height);
129+
this.dxGanttWidget.repaint();
130+
}
133131

134-
GanttItemViewer.prototype.renderContent = function ($element, changeExisting) {
135-
if (!changeExisting) {
136-
var element = $element.jquery ? $element[0] : $element;
132+
renderContent($element, changeExisting) {
133+
if (!changeExisting) {
134+
var element = $element.jquery ? $element[0] : $element;
137135

138-
while (element.firstChild)
139-
element.removeChild(element.firstChild);
136+
while (element.firstChild)
137+
element.removeChild(element.firstChild);
140138

141-
this.dxGanttWidget = new DevExpress.ui.dxGantt(element, this._getDxGanttWidgetSettings());
142-
} else {
143-
this.dxGanttWidget.option(this._getDxGanttWidgetSettings());
139+
this.dxGanttWidget = new DevExpress.ui.dxGantt(element, this._getDxGanttWidgetSettings());
140+
} else {
141+
this.dxGanttWidget.option(this._getDxGanttWidgetSettings());
142+
}
144143
}
145-
};
144+
}
146145

147-
function GanttItem(dashboardControl) {
148-
dashboardControl.registerIcon(svgIcon);
149-
this.name = GANTT_EXTENSION_NAME;
150-
this.metaData = ganttItemMetadata;
151-
this.createViewerItem = function (model, $element, content) {
146+
class GanttItem{
147+
constructor(dashboardControl) {
148+
dashboardControl.registerIcon(svgIcon);
149+
this.name = GANTT_EXTENSION_NAME;
150+
this.metaData = ganttItemMetadata;
151+
}
152+
createViewerItem(model, $element, content) {
152153
return new GanttItemViewer(model, $element, content);
153154
}
154-
};
155+
}
155156

156157
return GanttItem;
157158
})();

0 commit comments

Comments
 (0)