Skip to content

Commit 7d82c11

Browse files
natakazakovanatakazakova
committed
rewrite example
1 parent 0641b7d commit 7d82c11

File tree

11 files changed

+348
-11
lines changed

11 files changed

+348
-11
lines changed

‎asp-net-core-server/App_Data/Dashboards/dashboard1.xml

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Dashboard>
3+
<Title Text="Sample Dashboard" />
4+
<DataSources>
5+
<SqlDataSource Name="SalesPerson" ComponentName="DataSource1" DataProcessingMode="Client">
6+
<Connection Name="NWindConnectionString" FromAppConfig="true" />
7+
<Query Type="SelectQuery" Name="SalesPerson">
8+
<Tables>
9+
<Table Name="SalesPerson" />
10+
</Tables>
11+
<Columns>
12+
<AllColumns Table="SalesPerson" />
13+
</Columns>
14+
</Query>
15+
<ConnectionOptions CloseConnection="true" />
16+
</SqlDataSource>
17+
</DataSources>
18+
<Items>
19+
<CustomItem ComponentName="customItemDashboardItem1" Name="Hello World Item 1" DataSource="DataSource1" DataMember="SalesPerson" CustomItemType="helloWorldItem">
20+
<CustomProperties>
21+
<customProperty>Hello World! You can input your text here.</customProperty>
22+
</CustomProperties>
23+
</CustomItem>
24+
<CustomItem ComponentName="customItemDashboardItem2" Name="Data Aware Item 1" DataSource="DataSource1" DataMember="SalesPerson" CustomItemType="dataAwareItem">
25+
<ColoringOptions UseGlobalColors="false" />
26+
<DataItems>
27+
<Dimension DataMember="ProductName" ColoringMode="Hue" DefaultId="DataItem0" />
28+
</DataItems>
29+
<SliceTables>
30+
<SliceTable Name="SliceTable1">
31+
<Dimensions>
32+
<Dimension DefaultId="DataItem0" />
33+
</Dimensions>
34+
</SliceTable>
35+
</SliceTables>
36+
<ColoringDimensions>
37+
<Dimension DefaultId="DataItem0" />
38+
</ColoringDimensions>
39+
<CustomMetadata>
40+
<dimensionValue ItemType="Dimension" DefaultId="DataItem0" />
41+
</CustomMetadata>
42+
</CustomItem>
43+
<CustomItem ComponentName="customItemDashboardItem3" Name="Funnel Chart 1" DataSource="DataSource1" DataMember="SalesPerson" CustomItemType="funnelChartCustomItem">
44+
<CustomProperties>
45+
<labelPositionProperty>Inside</labelPositionProperty>
46+
</CustomProperties>
47+
<InteractivityOptions MasterFilterMode="Single" />
48+
<DataItems>
49+
<Measure DataMember="ExtendedPrice" SummaryType="Count" DefaultId="DataItem0" />
50+
<Dimension DataMember="CategoryName" ColoringMode="Hue" DefaultId="DataItem1" />
51+
</DataItems>
52+
<SliceTables>
53+
<SliceTable Name="SliceTable1">
54+
<Dimensions>
55+
<Dimension DefaultId="DataItem1" />
56+
</Dimensions>
57+
<Measures>
58+
<Measure DefaultId="DataItem0" />
59+
</Measures>
60+
</SliceTable>
61+
</SliceTables>
62+
<InteractivityTargets>
63+
<Dimension DefaultId="DataItem1" />
64+
</InteractivityTargets>
65+
<ColoringDimensions>
66+
<Dimension DefaultId="DataItem1" />
67+
</ColoringDimensions>
68+
<CustomMetadata>
69+
<measureValue ItemType="Measure" DefaultId="DataItem0" />
70+
<dimensionValue ItemType="Dimension" DefaultId="DataItem1" />
71+
</CustomMetadata>
72+
</CustomItem>
73+
</Items>
74+
<LayoutTree>
75+
<LayoutGroup Weight="100">
76+
<LayoutGroup Orientation="Vertical" Weight="121.96376996743113">
77+
<LayoutItem DashboardItem="customItemDashboardItem2" Weight="165.41070082893745" />
78+
<LayoutItem DashboardItem="customItemDashboardItem1" Weight="121.96376996743113" />
79+
</LayoutGroup>
80+
<LayoutItem DashboardItem="customItemDashboardItem3" Weight="208.85763169044378" />
81+
</LayoutGroup>
82+
</LayoutTree>
83+
</Dashboard>

‎asp-net-core-server/App_Data/nwind.db

644 KB
Binary file not shown.

‎asp-net-core-server/AspNetCoreDashboardBackend.csproj

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
<?xml version="1.0" encoding="utf-8"?>
12
<Project Sdk="Microsoft.NET.Sdk.Web">
23
<PropertyGroup>
34
<TargetFramework>netcoreapp3.1</TargetFramework>
45
</PropertyGroup>
56
<ItemGroup>
6-
<PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="21.1.5" />
7+
<PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="21.1.3" />
8+
<PackageReference Include="System.Data.SQLite.Core" Version="1.0.112.2" />
79
</ItemGroup>
810
</Project>

‎asp-net-core-server/appsettings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
}
88
},
99
"ConnectionStrings": {
10-
"Customers": "file=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"
10+
"Customers": "file=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json",
11+
"NWindConnectionString": "XpoProvider=SQLite;Data Source=App_Data/nwind.db"
1112
},
1213
"AllowedHosts": "*"
1314
}

‎dashboard-react-app/src/App.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import './App.css';
33
import DashboardControl from 'devexpress-dashboard-react';
44
import {DashboardPanelExtension} from 'devexpress-dashboard/common';
55
import HelloWorldItem from './HelloWorldItem';
6+
import DataAwareItem from './DataAwareItem';
7+
import FunnelChartItem from './FunnelChartItem';
68

79
function onBeforeRender(e) {
810
var dashboardControl = e.component;
911
dashboardControl.registerExtension(new DashboardPanelExtension(dashboardControl));
1012
dashboardControl.registerExtension(new HelloWorldItem(dashboardControl));
13+
dashboardControl.registerExtension(new DataAwareItem(dashboardControl));
14+
dashboardControl.registerExtension(new FunnelChartItem(dashboardControl));
1115
}
1216

1317
function App() {

‎dashboard-react-app/src/DataAwareItem.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { CustomItemViewer, ResourceManager } from 'devexpress-dashboard/common'
2+
import { CustomItem } from 'devexpress-dashboard/model'
3+
import { FormItemTemplates } from 'devexpress-dashboard/designer'
4+
5+
var svgIcon = '<svg id="dataAwareItemIcon" viewBox="0 0 24 24"><path stroke="#ffffff" fill="#4842f4" d="M12 2 L2 22 L22 22 Z" /></svg>';
6+
var dataAwareItemMetaData = {
7+
bindings: [{
8+
propertyName: 'dimensionValue',
9+
dataItemType: 'Dimension',
10+
displayName: 'Dimension',
11+
enableColoring: true
12+
}],
13+
customProperties: [{
14+
owner: CustomItem,
15+
propertyName: 'backColorProperty',
16+
valueType: 'string',
17+
defaultValue: 'None'
18+
}],
19+
optionsPanelSections: [{
20+
title: 'Background',
21+
items: [{
22+
dataField: 'backColorProperty',
23+
label: { text: 'Backcolor' },
24+
template: FormItemTemplates.buttonGroup,
25+
editorOptions: {
26+
items: [{ text: 'None' }, { text: 'Red' }, { text: 'Blue' }]
27+
}
28+
}]
29+
}],
30+
icon: 'dataAwareItemIcon',
31+
title: 'Data Aware Item'
32+
};
33+
34+
class DataAwareItemViewer extends CustomItemViewer {
35+
constructor(model, $container, options) {
36+
super(model, $container, options);
37+
}
38+
renderContent(element, changeExisting) {
39+
while (element.firstChild)
40+
element.removeChild(element.firstChild);
41+
var clientData = this._getDataSource();
42+
clientData.forEach(function (item) {
43+
var div = document.createElement('div');
44+
div.style.color = item.color;
45+
div.innerText = item.dimensionDisplayText;
46+
element.appendChild(div);
47+
});
48+
element.style.background = this._getBackColorProperty();
49+
};
50+
51+
_getDataSource() {
52+
var clientData = [];
53+
this.iterateData(function (dataRow) {
54+
clientData.push({
55+
dimensionDisplayText: dataRow.getDisplayText('dimensionValue')[0] || "",
56+
color: dataRow.getColor()[0]
57+
});
58+
});
59+
return clientData;
60+
};
61+
62+
_getBackColorProperty() {
63+
switch (this.getPropertyValue('backColorProperty')) {
64+
case 'None': return "rgb(255,255,255)";
65+
case 'Red': return "rgb(255,220,200)";
66+
case 'Blue': return "rgb(135,206,235)";
67+
}
68+
};
69+
}
70+
class DataAwareItem {
71+
constructor(dashboardControl) {
72+
ResourceManager.registerIcon(svgIcon);
73+
this.name = "dataAwareItem";
74+
this.metaData = dataAwareItemMetaData;
75+
}
76+
77+
createViewerItem(model, $element, content) {
78+
return new DataAwareItemViewer(model, $element, content);
79+
}
80+
}
81+
82+
export default DataAwareItem;

‎dashboard-react-app/src/FunnelChartItem.js

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { Dashboard, CustomItem } from 'devexpress-dashboard/model'
2+
import { CustomItemViewer, ResourceManager } from 'devexpress-dashboard/common'
3+
import { FormItemTemplates } from 'devexpress-dashboard/designer'
4+
import dxFunnel from 'devextreme/viz/funnel'
5+
6+
var svgIcon = '<svg id="funnelChartItemIcon" viewBox="0 0 24 24"><path stroke="#ffffff" fill="#f442ae" d="M12 2 L2 22 L22 22 Z" /></svg>';
7+
var funnelChartItemMetaData = {
8+
bindings: [{
9+
propertyName: 'measureValue',
10+
dataItemType: 'Measure',
11+
displayName: 'Value'
12+
}, {
13+
propertyName: 'dimensionValue',
14+
dataItemType: 'Dimension',
15+
displayName: 'Argument',
16+
enableColoring: true,
17+
enableInteractivity: true
18+
}],
19+
interactivity: {
20+
filter: true
21+
},
22+
customProperties: [{
23+
ownerType: CustomItem,
24+
propertyName: 'labelPositionProperty',
25+
valueType: 'string',
26+
defaultValue: 'Inside'
27+
}],
28+
optionsPanelSections: [{
29+
title: 'Labels',
30+
items: [{
31+
dataField: 'labelPositionProperty',
32+
label: {
33+
text: 'Label Position'
34+
},
35+
template: FormItemTemplates.buttonGroup,
36+
editorOptions: {
37+
items: [{ text: 'Inside' }, { text: 'Outside' }]
38+
}
39+
}]
40+
}],
41+
icon: 'funnelChartItemIcon',
42+
title: 'Funnel Chart',
43+
index: 2
44+
};
45+
46+
class FunnelChartItemViewer extends CustomItemViewer {
47+
constructor(model, $container, options) {
48+
super(model, $container, options);
49+
this.dxFunnelWidget = null;
50+
this.dxFunnelWidgetSettings = undefined;
51+
}
52+
53+
_getDataSource() {
54+
var clientData = [];
55+
if (this.getBindingValue('measureValue').length > 0) {
56+
this.iterateData(function (dataRow) {
57+
clientData.push({
58+
measureValue: dataRow.getValue('measureValue')[0],
59+
dimensionValue: dataRow.getValue('dimensionValue')[0] || '',
60+
dimensionDisplayText: dataRow.getDisplayText('dimensionValue')[0],
61+
measureDisplayText: dataRow.getDisplayText('measureValue')[0],
62+
dimensionColor: dataRow.getColor('dimensionValue')[0],
63+
clientDataRow: dataRow
64+
});
65+
});
66+
}
67+
return clientData;
68+
};
69+
70+
_getDxFunnelWidgetSettings() {
71+
var _this = this;
72+
return {
73+
dataSource: this._getDataSource(),
74+
argumentField: "dimensionValue",
75+
valueField: "measureValue",
76+
colorField: "dimensionColor",
77+
selectionMode: "multiple",
78+
label: {
79+
customizeText: function (e) {
80+
return e.item.data.dimensionDisplayText + ': ' + e.item.data.measureDisplayText;
81+
},
82+
position: this.getPropertyValue('labelPositionProperty').toLowerCase()
83+
},
84+
onItemClick: function (e) {
85+
_this.setMasterFilter(e.item.data.clientDataRow);
86+
}
87+
};
88+
}
89+
90+
setSelection() {
91+
var _this = this;
92+
this.dxFunnelWidget.getAllItems().forEach(function (item) {
93+
item.select(_this.isSelected(item.data.clientDataRow));
94+
});
95+
}
96+
97+
clearSelection() {
98+
this.dxFunnelWidget.clearSelection();
99+
}
100+
101+
setSize(width, height) {
102+
Object.getPrototypeOf(FunnelChartItemViewer.prototype).setSize.call(this, width, height);
103+
this.dxFunnelWidget.render();
104+
}
105+
106+
renderContent(element, changeExisting) {
107+
if (!changeExisting) {
108+
109+
while (element.firstChild)
110+
element.removeChild(element.firstChild);
111+
112+
var div = document.createElement('div');
113+
div.style.width = "100%";
114+
div.style.height = "100%";
115+
element.appendChild(div);
116+
this.dxFunnelWidget = new dxFunnel(div, this._getDxFunnelWidgetSettings());
117+
} else {
118+
this.dxFunnelWidget.option(this._getDxFunnelWidgetSettings());
119+
}
120+
}
121+
}
122+
class FunnelChartItem {
123+
constructor(dashboardControl) {
124+
ResourceManager.registerIcon(svgIcon);
125+
this.name = "funnelChartCustomItem";
126+
this.metaData = funnelChartItemMetaData;
127+
}
128+
129+
createViewerItem(model, $element, content) {
130+
return new FunnelChartItemViewer(model, $element, content);
131+
}
132+
}
133+
134+
export default FunnelChartItem;

‎dashboard-react-app/src/HelloWorldItem.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { CustomItemViewer, ResourceManager } from 'devexpress-dashboard/common'
2+
import { CustomItem } from 'devexpress-dashboard/model'
23

34
var svgIcon = '<svg id="helloWorldItemIcon" viewBox="0 0 24 24"><path stroke="#42f48f" fill="#42f48f" d="M12 2 L2 22 L22 22 Z" /></svg>';
45
var helloWorldItemMetaData = {
56
customProperties: [{
6-
ownerType: 'CustomItem',
7+
ownerType: CustomItem,
78
propertyName: 'customProperty',
89
valueType: 'string',
910
defaultValue: 'Hello World!'
@@ -33,8 +34,7 @@ class HelloWorldItemViewer extends CustomItemViewer {
3334
}
3435
class HelloWorldItem {
3536
constructor(dashboardControl) {
36-
ResourceManager.registerIcon(svgIcon);
37-
37+
ResourceManager.registerIcon(svgIcon);
3838
this.name = "helloWorldItem";
3939
this.metaData = helloWorldItemMetaData;
4040
}

‎images/data-aware-item.png

21.6 KB
Loading

‎images/external-widget-item.png

29.1 KB
Loading

0 commit comments

Comments
 (0)