Skip to content

Commit 4731e74

Browse files
pharret31pharret31
authored
Chart: update ServerSideDataProcessing demo to use NetCore endpoint (DevExpress#31131)
1 parent e5ffbb9 commit 4731e74

File tree

15 files changed

+229
-128
lines changed

15 files changed

+229
-128
lines changed

‎apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.ts‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -77,20 +77,12 @@ export class AppComponent {
7777

7878
uploadDataByVisualRange() {
7979
const dataSource = this.component.instance.getDataSource();
80-
const storage = dataSource.items();
81-
const bounded = !!storage.length;
8280
const ajaxArgs = {
8381
startVisible: this.getDateString(this._visualRange.startValue as Date),
8482
endVisible: this.getDateString(this._visualRange.endValue as Date),
85-
startBound: this.getDateString(bounded ? storage[0].date : null),
86-
endBound: this.getDateString(bounded ? storage[storage.length - 1].date : null),
8783
};
8884

89-
if (
90-
ajaxArgs.startVisible !== ajaxArgs.startBound
91-
&& ajaxArgs.endVisible !== ajaxArgs.endBound
92-
&& !this.packetsLock
93-
) {
85+
if (!this.packetsLock) {
9486
this.packetsLock += 1;
9587
this.component.instance.showLoadingIndicator();
9688

@@ -121,12 +113,10 @@ export class AppComponent {
121113

122114
getDataFrame(args: Record<string, string>) {
123115
const params = `startVisible=${args.startVisible}`
124-
+ `&endVisible=${args.endVisible}`
125-
+ `&startBound=${args.startBound}`
126-
+ `&endBound=${args.endBound}`;
116+
+ `&endVisible=${args.endVisible}`;
127117

128118
return lastValueFrom(
129-
this.httpClient.get(`https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData?${params}`),
119+
this.httpClient.get(`https://js.devexpress.com/Demos/NetCore/api/TemperatureData?${params}`),
130120
);
131121
}
132122

‎apps/demos/Demos/Charts/LoadDataOnDemand/React/App.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -89,21 +89,12 @@ function App() {
8989

9090
const uploadDataByVisualRange = (visualRange, component) => {
9191
const dataSource = component.getDataSource();
92-
const storage = dataSource.items();
9392
const ajaxArgs = {
9493
startVisible: getDateString(visualRange.startValue),
9594
endVisible: getDateString(visualRange.endValue),
96-
startBound: getDateString(storage.length ? storage[0].date : null),
97-
endBound: getDateString(
98-
storage.length ? storage[storage.length - 1].date : null,
99-
),
10095
};
10196

102-
if (
103-
ajaxArgs.startVisible !== ajaxArgs.startBound
104-
&& ajaxArgs.endVisible !== ajaxArgs.endBound
105-
&& !packetsLock
106-
) {
97+
if (!packetsLock) {
10798
packetsLock += 1;
10899
component.showLoadingIndicator();
109100

@@ -147,12 +138,10 @@ function getDataFrame(args) {
147138
let params = '?';
148139

149140
params += `startVisible=${args.startVisible}
150-
&endVisible=${args.endVisible}
151-
&startBound=${args.startBound}
152-
&endBound=${args.endBound}`;
141+
&endVisible=${args.endVisible}`;
153142

154143
return fetch(
155-
`https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData${params}`,
144+
`https://js.devexpress.com/Demos/NetCore/api/TemperatureData${params}`,
156145
).then((response) => response.json());
157146
}
158147

‎apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -85,18 +85,11 @@ function App() {
8585
}
8686
const uploadDataByVisualRange = (visualRange, component) => {
8787
const dataSource = component.getDataSource();
88-
const storage = dataSource.items();
8988
const ajaxArgs = {
9089
startVisible: getDateString(visualRange.startValue),
9190
endVisible: getDateString(visualRange.endValue),
92-
startBound: getDateString(storage.length ? storage[0].date : null),
93-
endBound: getDateString(storage.length ? storage[storage.length - 1].date : null),
9491
};
95-
if (
96-
ajaxArgs.startVisible !== ajaxArgs.startBound &&
97-
ajaxArgs.endVisible !== ajaxArgs.endBound &&
98-
!packetsLock
99-
) {
92+
if (!packetsLock) {
10093
packetsLock += 1;
10194
component.showLoadingIndicator();
10295
getDataFrame(ajaxArgs)
@@ -132,10 +125,8 @@ const onVisualRangeChanged = (visualRange, component) => {
132125
function getDataFrame(args) {
133126
let params = '?';
134127
params += `startVisible=${args.startVisible}
135-
&endVisible=${args.endVisible}
136-
&startBound=${args.startBound}
137-
&endBound=${args.endBound}`;
138-
return fetch(`https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData${params}`).then(
128+
&endVisible=${args.endVisible}`;
129+
return fetch(`https://js.devexpress.com/Demos/NetCore/api/TemperatureData${params}`).then(
139130
(response) => response.json(),
140131
);
141132
}

‎apps/demos/Demos/Charts/LoadDataOnDemand/Vue/App.vue‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -102,17 +102,12 @@ function onVisualRangeChanged() {
102102
}
103103
function uploadDataByVisualRange({ startValue, endValue }, component) {
104104
const dataSource = component.getDataSource();
105-
const storage = dataSource.items();
106105
const ajaxArgs = {
107106
startVisible: getDateString(startValue),
108107
endVisible: getDateString(endValue),
109-
startBound: getDateString(storage.length ? storage[0].date : null),
110-
endBound: getDateString(storage.length
111-
? storage[storage.length - 1].date : null),
112108
};
113109
114-
if (ajaxArgs.startVisible !== ajaxArgs.startBound
115-
&& ajaxArgs.endVisible !== ajaxArgs.endBound && !packetsLock) {
110+
if (!packetsLock) {
116111
packetsLock += 1;
117112
component.showLoadingIndicator();
118113
@@ -144,11 +139,9 @@ function getDataFrame(args) {
144139
let params = '?';
145140
146141
params += `startVisible=${args.startVisible}
147-
&endVisible=${args.endVisible}
148-
&startBound=${args.startBound}
149-
&endBound=${args.endBound}`;
142+
&endVisible=${args.endVisible}`;
150143
151-
return fetch(`https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData${params}`)
144+
return fetch(`https://js.devexpress.com/Demos/NetCore/api/TemperatureData${params}`)
152145
.then((response) => response.json());
153146
}
154147
function getDateString(dateTime) {

‎apps/demos/Demos/Charts/LoadDataOnDemand/jQuery/index.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,12 @@ $(() => {
7979

8080
function uploadDataByVisualRange(visualRange, component) {
8181
const dataSource = component.getDataSource();
82-
const storage = dataSource.items();
8382
const ajaxArgs = {
8483
startVisible: getDateString(visualRange.startValue),
8584
endVisible: getDateString(visualRange.endValue),
86-
startBound: getDateString(storage.length ? storage[0].date : null),
87-
endBound: getDateString(storage.length
88-
? storage[storage.length - 1].date : null),
8985
};
9086

91-
if (ajaxArgs.startVisible !== ajaxArgs.startBound
92-
&& ajaxArgs.endVisible !== ajaxArgs.endBound && !packetsLock) {
87+
if (!packetsLock) {
9388
packetsLock += 1;
9489
component.showLoadingIndicator();
9590
getDataFrame(ajaxArgs)
@@ -115,7 +110,7 @@ $(() => {
115110
function getDataFrame(args) {
116111
const deferred = $.Deferred();
117112
$.ajax({
118-
url: 'https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData',
113+
url: 'https://js.devexpress.com/Demos/NetCore/api/TemperatureData',
119114
dataType: 'json',
120115
data: args,
121116
success(result) {

‎apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div id="chart-demo">
22
<dx-chart
33
[dataSource]="chartDataSource"
4-
title="Temperature in Seattle , 2017"
4+
title="Temperature in Seattle, 2017"
55
[valueAxis]="{
66
valueType: 'numeric',
77
grid: {
@@ -14,7 +14,7 @@
1414
>
1515
<dxo-size [height]="420"></dxo-size>
1616
<dxi-series
17-
argumentField="Number"
17+
argumentField="Date"
1818
valueField="Temperature"
1919
type="spline"
2020
></dxi-series>
@@ -34,6 +34,7 @@
3434
></dxo-tooltip>
3535
<dxo-argument-axis type="discrete">
3636
<dxo-grid [visible]="true" [opacity]="0.5"></dxo-grid>
37+
<dxo-label [customizeText]="customizeArgumentAxisText"></dxo-label>
3738
</dxo-argument-axis>
3839
<dxo-loading-indicator [enabled]="true"></dxo-loading-indicator>
3940
</dx-chart>
@@ -44,7 +45,7 @@
4445
[items]="months"
4546
[width]="150"
4647
[inputAttr]="{ 'aria-label': 'Month' }"
47-
[value]="1"
48+
[value]="selectedMonth"
4849
valueExpr="id"
4950
displayExpr="name"
5051
(onValueChanged)="onValueChanged($event)"

‎apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.ts‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,50 @@ if (window && window.config?.packageConfigPaths) {
2424
providers: [Service],
2525
})
2626
export class AppComponent {
27+
private year: number = 2017;
28+
2729
months: Month[];
2830

31+
selectedMonth: number;
32+
2933
chartDataSource: DataSource;
3034

35+
private startOfMonthStr = (month) => `${month}/01/${this.year}`;
36+
37+
private endOfMonthStr = (month) => {
38+
const nextMonth = (month === 12) ? 1 : month + 1;
39+
const nextYear = (month === 12) ? this.year + 1 : this.year;
40+
41+
const lastDay = new Date(nextYear, nextMonth - 1, 0).getDate();
42+
43+
return `${month}/${lastDay}/${this.year}`;
44+
};
45+
3146
constructor(service: Service) {
3247
this.months = service.getMonths();
48+
this.selectedMonth = 1;
3349
this.chartDataSource = new DataSource({
34-
store: {
35-
type: 'odata',
36-
version: 2,
37-
url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/WeatherItems',
50+
key: 'Date',
51+
load: () => {
52+
const startVisible = this.startOfMonthStr(this.selectedMonth);
53+
const endVisible = this.endOfMonthStr(this.selectedMonth);
54+
const url = 'https://js.devexpress.com/Demos/NetCore/api/TemperatureData'
55+
+ `?startVisible=${encodeURIComponent(startVisible)}`
56+
+ `&endVisible=${encodeURIComponent(endVisible)}`
57+
+ `&startBound=${encodeURIComponent(startVisible)}`
58+
+ `&endBound=${encodeURIComponent(endVisible)}`;
59+
60+
return fetch(url)
61+
.then((r) => {
62+
if (!r.ok) throw new Error(`Network response fails: ${r.status}`);
63+
return r.json();
64+
})
65+
.then((arr) => arr.map((item) => ({
66+
...item,
67+
Temperature: (item.MinTemp + item.MaxTemp) / 2,
68+
Date: new Date(item.Date),
69+
})));
3870
},
39-
postProcess: (results) => results[0].DayItems,
40-
expand: 'DayItems',
41-
filter: ['Id', '=', 1],
4271
paginate: false,
4372
});
4473
}
@@ -53,8 +82,12 @@ export class AppComponent {
5382
return `${arg.valueText}&#176C`;
5483
}
5584

85+
customizeArgumentAxisText(arg) {
86+
return new Date(arg.value).getDate();
87+
}
88+
5689
onValueChanged(data) {
57-
this.chartDataSource.filter(['Id', '=', data.value]);
90+
this.selectedMonth = data.value;
5891
this.chartDataSource.load();
5992
}
6093
}

‎apps/demos/Demos/Charts/ServerSideDataProcessing/React/App.tsx‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,57 @@ import Chart, {
1818
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
1919
import { months, monthLabel } from './data.ts';
2020

21+
const year = 2017;
22+
let selectedMonth = 1;
23+
24+
const startOfMonthStr = (month: number): string => `${month}/01/${year}`;
25+
const endOfMonthStr = (month: number): string => {
26+
const nextMonth = (month === 12) ? 1 : month + 1;
27+
const nextYear = (month === 12) ? year + 1 : year;
28+
29+
const lastDay = new Date(nextYear, nextMonth - 1, 0).getDate();
30+
31+
return `${month}/${lastDay}/${year}`;
32+
};
33+
2134
const chartDataSource = new DataSource({
22-
store: {
23-
type: 'odata',
24-
version: 2,
25-
url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/WeatherItems',
26-
},
27-
postProcess(results) {
28-
return results[0].DayItems;
35+
key: 'Date',
36+
load: () => {
37+
const startVisible = startOfMonthStr(selectedMonth);
38+
const endVisible = endOfMonthStr(selectedMonth);
39+
const url = 'https://js.devexpress.com/Demos/NetCore/api/TemperatureData'
40+
+ `?startVisible=${encodeURIComponent(startVisible)}`
41+
+ `&endVisible=${encodeURIComponent(endVisible)}`
42+
+ `&startBound=${encodeURIComponent(startVisible)}`
43+
+ `&endBound=${encodeURIComponent(endVisible)}`;
44+
45+
return fetch(url)
46+
.then((r) => {
47+
if (!r.ok) throw new Error(`Network response fails: ${r.status}`);
48+
return r.json();
49+
})
50+
.then((arr) => arr.map((item) => ({
51+
...item,
52+
Temperature: (item.MinTemp + item.MaxTemp) / 2,
53+
Date: new Date(item.Date),
54+
})));
2955
},
30-
expand: 'DayItems',
31-
filter: ['Id', '=', 1],
3256
paginate: false,
3357
});
3458

3559
function onValueChanged(data: SelectBoxTypes.ValueChangedEvent) {
36-
chartDataSource.filter(['Id', '=', data.value]);
60+
selectedMonth = data.value;
3761
chartDataSource.load();
3862
}
3963

4064
function customizeLabel(e: { valueText: string; }) {
4165
return `${e.valueText}${'&#176C'}`;
4266
}
4367

68+
function customizeArgumentAxisLabel(e: { value: string | number | Date, valueText: string; }) {
69+
return new Date(e.value).getDate().toString();
70+
}
71+
4472
function customizeTooltip(arg: { valueText: string; }) {
4573
return {
4674
text: `${arg.valueText}${'&#176C'}`,
@@ -50,19 +78,20 @@ function customizeTooltip(arg: { valueText: string; }) {
5078
function App() {
5179
return (
5280
<div id="chart-demo">
53-
<Chart title="Temperature in Seattle , 2017" dataSource={chartDataSource}>
81+
<Chart title={`Temperature in Seattle, ${year}`} dataSource={chartDataSource}>
5482
<Size height={420} />
5583
<ValueAxis valueType="numeric">
5684
<Grid opacity={0.2} />
5785
<Label customizeText={customizeLabel} />
5886
</ValueAxis>
5987
<ArgumentAxis type="discrete">
6088
<Grid visible={true} opacity={0.5} />
89+
<Label customizeText={customizeArgumentAxisLabel} />
6190
</ArgumentAxis>
6291
<CommonPaneSettings>
6392
<Border visible={true} width={2} top={false} right={false} />
6493
</CommonPaneSettings>
65-
<Series argumentField="Number" valueField="Temperature" type="spline" />
94+
<Series argumentField="Date" valueField="Temperature" type="spline" />
6695
<Legend visible={false} />
6796
<Export enabled={true} />
6897
<Tooltip enabled={true} customizeTooltip={customizeTooltip} />
@@ -78,7 +107,7 @@ function App() {
78107
inputAttr={monthLabel}
79108
displayExpr="name"
80109
items={months}
81-
defaultValue={1}
110+
defaultValue={selectedMonth}
82111
onValueChanged={onValueChanged}
83112
/>
84113
</div>

0 commit comments

Comments
 (0)