Skip to content

Commit

Permalink
Fix - Chart - Load data on demand (DevExpress#3106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivanblinov2k17
ivanblinov2k17 committed Jan 26, 2024
1 parent aa37f6f commit 17272c5
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 127 deletions.
122 changes: 61 additions & 61 deletions JSDemos/Demos/Charts/LoadDataOnDemand/React/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useState } from 'react';
import DataSource from 'devextreme/data/data_source';
import {
Chart,
Expand Down Expand Up @@ -36,72 +36,16 @@ function App() {
endValue: new Date(2017, 3, 15),
});

const uploadDataByVisualRange = useCallback((component) => {
const dataSource = component.getDataSource();
const storage = dataSource.items();
const ajaxArgs = {
startVisible: getDateString(visualRange.startValue),
endVisible: getDateString(visualRange.endValue),
startBound: getDateString(storage.length ? storage[0].date : null),
endBound: getDateString(
storage.length ? storage[storage.length - 1].date : null,
),
};

if (
ajaxArgs.startVisible !== ajaxArgs.startBound
&& ajaxArgs.endVisible !== ajaxArgs.endBound
&& !packetsLock
) {
packetsLock += 1;
component.showLoadingIndicator();

getDataFrame(ajaxArgs)
.then((dataFrame) => {
packetsLock -= 1;

const componentStorage = dataSource.store();

dataFrame
.map((i) => ({
date: new Date(i.Date),
minTemp: i.MinTemp,
maxTemp: i.MaxTemp,
}))
.forEach((item) => componentStorage.insert(item));

dataSource.reload();

onVisualRangeChanged(component);
})
.catch(() => {
packetsLock -= 1;
dataSource.reload();
});
}
}, [visualRange]);

const onVisualRangeChanged = useCallback((component) => {
const items = component.getDataSource().items();
if (
!items.length
|| items[0].date - visualRange.startValue.getTime() >= HALFDAY
|| visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
) {
uploadDataByVisualRange(component);
}
}, [visualRange, uploadDataByVisualRange]);

const handleChange = useCallback((e: ChartTypes.OptionChangedEvent) => {
const handleChange = (e: ChartTypes.OptionChangedEvent) => {
if (e.fullName === 'argumentAxis.visualRange') {
const stateStart = visualRange.startValue;
const currentStart = e.value.startValue;
if (stateStart.valueOf() !== currentStart.valueOf()) {
setVisualRange(e.value);
}
onVisualRangeChanged(e.component);
onVisualRangeChanged(e.value, e.component);
}
}, [setVisualRange, visualRange, onVisualRangeChanged]);
};

return (
<Chart
Expand All @@ -119,7 +63,7 @@ function App() {
wholeRange={wholeRange}
/>
<ValueAxis name="temperature" allowDecimals={false}>
<Title text='Temperature, °C'>
<Title text='Temperature, &deg;C'>
<Font color="#ff950c" />
</Title>
<Label>
Expand All @@ -143,6 +87,62 @@ function App() {
);
}

const uploadDataByVisualRange = (visualRange, component) => {
const dataSource = component.getDataSource();
const storage = dataSource.items();
const ajaxArgs = {
startVisible: getDateString(visualRange.startValue),
endVisible: getDateString(visualRange.endValue),
startBound: getDateString(storage.length ? storage[0].date : null),
endBound: getDateString(
storage.length ? storage[storage.length - 1].date : null,
),
};

if (
ajaxArgs.startVisible !== ajaxArgs.startBound
&& ajaxArgs.endVisible !== ajaxArgs.endBound
&& !packetsLock
) {
packetsLock += 1;
component.showLoadingIndicator();

getDataFrame(ajaxArgs)
.then((dataFrame) => {
packetsLock -= 1;

const componentStorage = dataSource.store();

dataFrame
.map((i) => ({
date: new Date(i.Date),
minTemp: i.MinTemp,
maxTemp: i.MaxTemp,
}))
.forEach((item) => componentStorage.insert(item));

dataSource.reload();

onVisualRangeChanged(visualRange, component);
})
.catch(() => {
packetsLock -= 1;
dataSource.reload();
});
}
};

const onVisualRangeChanged = (visualRange, component) => {
const items = component.getDataSource().items();
if (
!items.length
|| items[0].date - visualRange.startValue.getTime() >= HALFDAY
|| visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
) {
uploadDataByVisualRange(visualRange, component);
}
};

function getDataFrame(args) {
let params = '?';

Expand Down
123 changes: 57 additions & 66 deletions JSDemos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useState } from 'react';
import DataSource from 'devextreme/data/data_source';
import {
Chart,
Expand Down Expand Up @@ -31,71 +31,16 @@ function App() {
startValue: new Date(2017, 3, 1),
endValue: new Date(2017, 3, 15),
});
const uploadDataByVisualRange = useCallback(
(component) => {
const dataSource = component.getDataSource();
const storage = dataSource.items();
const ajaxArgs = {
startVisible: getDateString(visualRange.startValue),
endVisible: getDateString(visualRange.endValue),
startBound: getDateString(storage.length ? storage[0].date : null),
endBound: getDateString(storage.length ? storage[storage.length - 1].date : null),
};
if (
ajaxArgs.startVisible !== ajaxArgs.startBound
&& ajaxArgs.endVisible !== ajaxArgs.endBound
&& !packetsLock
) {
packetsLock += 1;
component.showLoadingIndicator();
getDataFrame(ajaxArgs)
.then((dataFrame) => {
packetsLock -= 1;
const componentStorage = dataSource.store();
dataFrame
.map((i) => ({
date: new Date(i.Date),
minTemp: i.MinTemp,
maxTemp: i.MaxTemp,
}))
.forEach((item) => componentStorage.insert(item));
dataSource.reload();
onVisualRangeChanged(component);
})
.catch(() => {
packetsLock -= 1;
dataSource.reload();
});
const handleChange = (e) => {
if (e.fullName === 'argumentAxis.visualRange') {
const stateStart = visualRange.startValue;
const currentStart = e.value.startValue;
if (stateStart.valueOf() !== currentStart.valueOf()) {
setVisualRange(e.value);
}
},
[visualRange],
);
const onVisualRangeChanged = useCallback(
(component) => {
const items = component.getDataSource().items();
if (
!items.length
|| items[0].date - visualRange.startValue.getTime() >= HALFDAY
|| visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
) {
uploadDataByVisualRange(component);
}
},
[visualRange, uploadDataByVisualRange],
);
const handleChange = useCallback(
(e) => {
if (e.fullName === 'argumentAxis.visualRange') {
const stateStart = visualRange.startValue;
const currentStart = e.value.startValue;
if (stateStart.valueOf() !== currentStart.valueOf()) {
setVisualRange(e.value);
}
onVisualRangeChanged(e.component);
}
},
[setVisualRange, visualRange, onVisualRangeChanged],
);
onVisualRangeChanged(e.value, e.component);
}
};
return (
<Chart
id="chart"
Expand All @@ -115,7 +60,7 @@ function App() {
name="temperature"
allowDecimals={false}
>
<Title text="Temperature, °C">
<Title text="Temperature, &deg;C">
<Font color="#ff950c" />
</Title>
<Label>
Expand All @@ -138,6 +83,52 @@ function App() {
</Chart>
);
}
const uploadDataByVisualRange = (visualRange, component) => {
const dataSource = component.getDataSource();
const storage = dataSource.items();
const ajaxArgs = {
startVisible: getDateString(visualRange.startValue),
endVisible: getDateString(visualRange.endValue),
startBound: getDateString(storage.length ? storage[0].date : null),
endBound: getDateString(storage.length ? storage[storage.length - 1].date : null),
};
if (
ajaxArgs.startVisible !== ajaxArgs.startBound
&& ajaxArgs.endVisible !== ajaxArgs.endBound
&& !packetsLock
) {
packetsLock += 1;
component.showLoadingIndicator();
getDataFrame(ajaxArgs)
.then((dataFrame) => {
packetsLock -= 1;
const componentStorage = dataSource.store();
dataFrame
.map((i) => ({
date: new Date(i.Date),
minTemp: i.MinTemp,
maxTemp: i.MaxTemp,
}))
.forEach((item) => componentStorage.insert(item));
dataSource.reload();
onVisualRangeChanged(visualRange, component);
})
.catch(() => {
packetsLock -= 1;
dataSource.reload();
});
}
};
const onVisualRangeChanged = (visualRange, component) => {
const items = component.getDataSource().items();
if (
!items.length
|| items[0].date - visualRange.startValue.getTime() >= HALFDAY
|| visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
) {
uploadDataByVisualRange(visualRange, component);
}
};
function getDataFrame(args) {
let params = '?';
params += `startVisible=${args.startVisible}
Expand Down

0 comments on commit 17272c5

Please sign in to comment.