Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useCallback, useState } from 'react';
import Chart, {
CommonSeriesSettings,
Series,
Aggregation,
Point,
ArgumentAxis,
ValueAxis,
Title,
Font,
Legend,
Label,
Tooltip,
IAggregationProps,
} from 'devextreme-react/chart';
import CheckBox from 'devextreme-react/check-box';
import SelectBox from 'devextreme-react/select-box';
import {
weatherData, aggregationFunctions, aggregationIntervals, functionLabel, intervalLabel,
} from './data.ts';
const customizeTooltip = (pointInfo) => {
const { aggregationInfo } = pointInfo.point;
const start: Date = aggregationInfo && aggregationInfo.intervalStart;
const end: Date = aggregationInfo && aggregationInfo.intervalEnd;
const handlers = {
'Average temperature': (arg: { argument: Date; value: number; }) => ({
text: `${(!aggregationInfo
? `Date: ${arg.argument.toDateString()}`
: `Interval: ${start.toDateString()} - ${end.toDateString()}`)
}<br/>Temperature: ${arg.value.toFixed(2)} °C`,
}),
'Temperature range': (arg: { rangeValue1: number; rangeValue2: number; }) => ({
text: `Interval: ${start.toDateString()
} - ${end.toDateString()
}<br/>Temperature range: ${arg.rangeValue1
} - ${arg.rangeValue2} °C`,
}),
Precipitation: (arg: { argument: Date; valueText: string; }) => ({
text: `Date: ${arg.argument.toDateString()
}<br/>Precipitation: ${arg.valueText} mm`,
}),
};
return handlers[pointInfo.seriesName](pointInfo);
};
function App() {
const [useAggregation, setUseAggregation] = useState(true);
const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func);
const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval);
const updateAggregationUsage = useCallback(({ value }) => {
setUseAggregation(value);
}, [setUseAggregation]);
const updateInterval = useCallback(({ value }) => {
setCurrentInterval(value);
}, [setCurrentInterval]);
const updateMethod = useCallback(({ value }) => {
setCurrentFunction(value);
}, [setCurrentFunction]);
const calculateRangeArea = useCallback<IAggregationProps['calculate']>((aggregationInfo) => {
if (!aggregationInfo.data.length) {
return null;
}
const temp = aggregationInfo.data.map((item: { temp: number; }) => item.temp);
return {
date: new Date((aggregationInfo.intervalStart.valueOf()
+ aggregationInfo.intervalEnd.valueOf()) / 2),
maxTemp: Math.max.apply(null, temp),
minTemp: Math.min.apply(null, temp),
};
}, []);
return (
<div id="chart-demo">
<Chart
id="chart"
dataSource={weatherData}
>
<CommonSeriesSettings argumentField="date" />
<Series
axis="precipitation"
color="#03a9f4"
type="bar"
valueField="precipitation"
name="Precipitation"
/>
<Series
axis="temperature"
color="#ffc0bb"
type="rangearea"
rangeValue1Field="minTemp"
rangeValue2Field="maxTemp"
name="Temperature range"
>
<Aggregation
enabled={useAggregation}
calculate={calculateRangeArea}
method="custom"
/>
</Series>
<Series
axis="temperature"
color="#e91e63"
valueField="temp"
name="Average temperature"
>
<Point size={7} />
<Aggregation
enabled={useAggregation}
method={currentFunction}
/>
</Series>
<ArgumentAxis
aggregationInterval={currentInterval}
valueMarginsEnabled={false}
argumentType="datetime"
/>
<ValueAxis name="temperature">
<Title text="Temperature, °C">
<Font color="#e91e63" />
</Title>
<Label>
<Font color="#e91e63" />
</Label>
</ValueAxis>
<ValueAxis
name="precipitation"
position="right"
>
<Title text="Precipitation, mm">
<Font color="#03a9f4" />
</Title>
<Label>
<Font color="#03a9f4" />
</Label>
</ValueAxis>
<Legend visible={false} />
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
/>
<Title text="Weather in Las Vegas, NV (2017)" />
</Chart>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
value={useAggregation}
onValueChanged={updateAggregationUsage}
text="Aggregation enabled"
/>
</div>
<div className="option">
<span>Interval:</span>
<SelectBox
dataSource={aggregationIntervals}
value={currentInterval}
inputAttr={intervalLabel}
onValueChanged={updateInterval}
displayExpr="displayName"
valueExpr="interval"
/>
</div>
<div className="option">
<span>Method:</span>
<SelectBox
dataSource={aggregationFunctions}
inputAttr={functionLabel}
value={currentFunction}
onValueChanged={updateMethod}
displayExpr="displayName"
valueExpr="func"
/>
</div>
</div>
</div>
);
}
export default App;
import React, { useCallback, useState } from 'react';
import Chart, {
CommonSeriesSettings,
Series,
Aggregation,
Point,
ArgumentAxis,
ValueAxis,
Title,
Font,
Legend,
Label,
Tooltip,
} from 'devextreme-react/chart';
import CheckBox from 'devextreme-react/check-box';
import SelectBox from 'devextreme-react/select-box';
import {
weatherData,
aggregationFunctions,
aggregationIntervals,
functionLabel,
intervalLabel,
} from './data.js';
const customizeTooltip = (pointInfo) => {
const { aggregationInfo } = pointInfo.point;
const start = aggregationInfo && aggregationInfo.intervalStart;
const end = aggregationInfo && aggregationInfo.intervalEnd;
const handlers = {
'Average temperature': (arg) => ({
text: `${
!aggregationInfo
? `Date: ${arg.argument.toDateString()}`
: `Interval: ${start.toDateString()} - ${end.toDateString()}`
}<br/>Temperature: ${arg.value.toFixed(2)} °C`,
}),
'Temperature range': (arg) => ({
text: `Interval: ${start.toDateString()} - ${end.toDateString()}<br/>Temperature range: ${
arg.rangeValue1
} - ${arg.rangeValue2} °C`,
}),
Precipitation: (arg) => ({
text: `Date: ${arg.argument.toDateString()}<br/>Precipitation: ${arg.valueText} mm`,
}),
};
return handlers[pointInfo.seriesName](pointInfo);
};
function App() {
const [useAggregation, setUseAggregation] = useState(true);
const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func);
const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval);
const updateAggregationUsage = useCallback(
({ value }) => {
setUseAggregation(value);
},
[setUseAggregation],
);
const updateInterval = useCallback(
({ value }) => {
setCurrentInterval(value);
},
[setCurrentInterval],
);
const updateMethod = useCallback(
({ value }) => {
setCurrentFunction(value);
},
[setCurrentFunction],
);
const calculateRangeArea = useCallback((aggregationInfo) => {
if (!aggregationInfo.data.length) {
return null;
}
const temp = aggregationInfo.data.map((item) => item.temp);
return {
date: new Date(
(aggregationInfo.intervalStart.valueOf() + aggregationInfo.intervalEnd.valueOf()) / 2,
),
maxTemp: Math.max.apply(null, temp),
minTemp: Math.min.apply(null, temp),
};
}, []);
return (
<div id="chart-demo">
<Chart
id="chart"
dataSource={weatherData}
>
<CommonSeriesSettings argumentField="date" />
<Series
axis="precipitation"
color="#03a9f4"
type="bar"
valueField="precipitation"
name="Precipitation"
/>
<Series
axis="temperature"
color="#ffc0bb"
type="rangearea"
rangeValue1Field="minTemp"
rangeValue2Field="maxTemp"
name="Temperature range"
>
<Aggregation
enabled={useAggregation}
calculate={calculateRangeArea}
method="custom"
/>
</Series>
<Series
axis="temperature"
color="#e91e63"
valueField="temp"
name="Average temperature"
>
<Point size={7} />
<Aggregation
enabled={useAggregation}
method={currentFunction}
/>
</Series>
<ArgumentAxis
aggregationInterval={currentInterval}
valueMarginsEnabled={false}
argumentType="datetime"
/>
<ValueAxis name="temperature">
<Title text="Temperature, °C">
<Font color="#e91e63" />
</Title>
<Label>
<Font color="#e91e63" />
</Label>
</ValueAxis>
<ValueAxis
name="precipitation"
position="right"
>
<Title text="Precipitation, mm">
<Font color="#03a9f4" />
</Title>
<Label>
<Font color="#03a9f4" />
</Label>
</ValueAxis>
<Legend visible={false} />
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
/>
<Title text="Weather in Las Vegas, NV (2017)" />
</Chart>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
value={useAggregation}
onValueChanged={updateAggregationUsage}
text="Aggregation enabled"
/>
</div>
<div className="option">
<span>Interval:</span>
<SelectBox
dataSource={aggregationIntervals}
value={currentInterval}
inputAttr={intervalLabel}
onValueChanged={updateInterval}
displayExpr="displayName"
valueExpr="interval"
/>
</div>
<div className="option">
<span>Method:</span>
<SelectBox
dataSource={aggregationFunctions}
inputAttr={functionLabel}
value={currentFunction}
onValueChanged={updateMethod}
displayExpr="displayName"
valueExpr="func"
/>
</div>
</div>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import { IAggregationProps, IArgumentAxisProps } from 'devextreme-react/chart';
export const aggregationIntervals: {
displayName: string,
interval: IArgumentAxisProps['aggregationInterval'],
}[] = [
{ displayName: 'One week', interval: 'week' },
{ displayName: 'Two weeks', interval: { weeks: 2 } },
{ displayName: 'Month', interval: 'month' },
];
export const aggregationFunctions: {
displayName: string,
func: IAggregationProps['method'],
}[] = [
{ displayName: 'Average', func: 'avg' },
{ displayName: 'Minimum', func: 'min' },
{ displayName: 'Maximum', func: 'max' },
];
export const weatherData = [{
date: '2017-01-01',
temp: 9.5,
precipitation: 0.1,
},
{
date: '2017-01-02',
temp: 8,
precipitation: 0.4,
},
{
date: '2017-01-03',
temp: 7.5,
precipitation: 0.2,
},
{
date: '2017-01-04',
temp: 8.5,
precipitation: 0.1,
},
{
date: '2017-01-05',
temp: 10,
precipitation: 0.3,
},
{
date: '2017-01-06',
temp: 3,
precipitation: 0,
},
{
date: '2017-01-07',
temp: 5,
precipitation: 0.3,
},
{
date: '2017-01-08',
temp: 9.5,
precipitation: 0,
},
{
date: '2017-01-09',
temp: 11,
precipitation: 0.5,
},
{
date: '2017-01-10',
temp: 8,
precipitation: 0,
},
{
date: '2017-01-11',
temp: 11.5,
precipitation: 0.3,
},
{
date: '2017-01-12',
temp: 9.5,
precipitation: 2.1,
},
{
date: '2017-01-13',
temp: 11.5,
precipitation: 3.5,
},
{
date: '2017-01-14',
temp: 11,
precipitation: 0.1,
},
{
date: '2017-01-15',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-01-16',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-01-17',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-01-18',
temp: 8,
precipitation: 0.1,
},
{
date: '2017-01-19',
temp: 8.5,
precipitation: 1.3,
},
{
date: '2017-01-20',
temp: 5.5,
precipitation: 5.3,
},
{
date: '2017-01-21',
temp: 9,
precipitation: 0.1,
},
{
date: '2017-01-22',
temp: 6,
precipitation: 16.6,
},
{
date: '2017-01-23',
temp: 8.5,
precipitation: 5.5,
},
{
date: '2017-01-24',
temp: 6.5,
precipitation: 1.3,
},
{
date: '2017-01-25',
temp: 4.5,
precipitation: 0,
},
{
date: '2017-01-26',
temp: 5.5,
precipitation: 0,
},
{
date: '2017-01-27',
temp: 3,
precipitation: 0,
},
{
date: '2017-01-28',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-01-29',
temp: 8,
precipitation: 0,
},
{
date: '2017-01-30',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-01-31',
temp: 13,
precipitation: 0,
},
{
date: '2017-02-01',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-02-02',
temp: 12,
precipitation: 0,
},
{
date: '2017-02-03',
temp: 13,
precipitation: 0.2,
},
{
date: '2017-02-04',
temp: 10,
precipitation: 0,
},
{
date: '2017-02-05',
temp: 11.5,
precipitation: 0,
},
{
date: '2017-02-06',
temp: 11.5,
precipitation: 0.1,
},
{
date: '2017-02-07',
temp: 12.5,
precipitation: 0.5,
},
{
date: '2017-02-08',
temp: 13,
precipitation: 0,
},
{
date: '2017-02-09',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-02-10',
temp: 16.5,
precipitation: 0.1,
},
{
date: '2017-02-11',
temp: 14.5,
precipitation: 0.8,
},
{
date: '2017-02-12',
temp: 13.5,
precipitation: 0.1,
},
{
date: '2017-02-13',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-02-14',
temp: 12,
precipitation: 0,
},
{
date: '2017-02-15',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-02-16',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-02-17',
temp: 12.5,
precipitation: 4.5,
},
{
date: '2017-02-18',
temp: 10,
precipitation: 14.4,
},
{
date: '2017-02-19',
temp: 13.5,
precipitation: 0.5,
},
{
date: '2017-02-20',
temp: 14,
precipitation: 0.6,
},
{
date: '2017-02-21',
temp: 15,
precipitation: 0,
},
{
date: '2017-02-22',
temp: 11,
precipitation: 0,
},
{
date: '2017-02-23',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-02-24',
temp: 6,
precipitation: 0,
},
{
date: '2017-02-25',
temp: 7,
precipitation: 0,
},
{
date: '2017-02-26',
temp: 8,
precipitation: 0,
},
{
date: '2017-02-27',
temp: 8.5,
precipitation: 0.1,
},
{
date: '2017-02-28',
temp: 10,
precipitation: 0,
},
{
date: '2017-03-01',
temp: 9,
precipitation: 0,
},
{
date: '2017-03-02',
temp: 11,
precipitation: 0,
},
{
date: '2017-03-03',
temp: 15,
precipitation: 0,
},
{
date: '2017-03-04',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-03-05',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-03-06',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-03-07',
temp: 11,
precipitation: 0,
},
{
date: '2017-03-08',
temp: 16,
precipitation: 0,
},
{
date: '2017-03-09',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-03-10',
temp: 20,
precipitation: 0,
},
{
date: '2017-03-11',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-03-12',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-03-13',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-03-14',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-15',
temp: 23,
precipitation: 0,
},
{
date: '2017-03-16',
temp: 23,
precipitation: 0,
},
{
date: '2017-03-17',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-03-18',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-19',
temp: 24,
precipitation: 0,
},
{
date: '2017-03-20',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-21',
temp: 22,
precipitation: 0,
},
{
date: '2017-03-22',
temp: 18.5,
precipitation: 4,
},
{
date: '2017-03-23',
temp: 15,
precipitation: 2.4,
},
{
date: '2017-03-24',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-03-25',
temp: 19,
precipitation: 0,
},
{
date: '2017-03-26',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-03-27',
temp: 18,
precipitation: 0,
},
{
date: '2017-03-28',
temp: 17,
precipitation: 0,
},
{
date: '2017-03-29',
temp: 21,
precipitation: 0,
},
{
date: '2017-03-30',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-03-31',
temp: 16.5,
precipitation: 0.2,
},
{
date: '2017-04-01',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-02',
temp: 20,
precipitation: 0,
},
{
date: '2017-04-03',
temp: 18,
precipitation: 0,
},
{
date: '2017-04-04',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-04-05',
temp: 17,
precipitation: 0,
},
{
date: '2017-04-06',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-07',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-08',
temp: 19,
precipitation: 0.2,
},
{
date: '2017-04-09',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-04-10',
temp: 17,
precipitation: 0,
},
{
date: '2017-04-11',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-04-12',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-13',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-14',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-15',
temp: 21,
precipitation: 0,
},
{
date: '2017-04-16',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-04-17',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-18',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-19',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-20',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-21',
temp: 20,
precipitation: 0,
},
{
date: '2017-04-22',
temp: 23,
precipitation: 0,
},
{
date: '2017-04-23',
temp: 26,
precipitation: 0,
},
{
date: '2017-04-24',
temp: 25,
precipitation: 0,
},
{
date: '2017-04-25',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-26',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-04-27',
temp: 23,
precipitation: 0,
},
{
date: '2017-04-28',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-29',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-04-30',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-05-01',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-02',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-03',
temp: 25.5,
precipitation: 0,
},
{
date: '2017-05-04',
temp: 28,
precipitation: 0,
},
{
date: '2017-05-05',
temp: 28.5,
precipitation: 0,
},
{
date: '2017-05-06',
temp: 27,
precipitation: 0.4,
},
{
date: '2017-05-07',
temp: 17,
precipitation: 0.1,
},
{
date: '2017-05-08',
temp: 17,
precipitation: 0,
},
{
date: '2017-05-09',
temp: 20,
precipitation: 1.7,
},
{
date: '2017-05-10',
temp: 19.5,
precipitation: 0.3,
},
{
date: '2017-05-11',
temp: 23,
precipitation: 0,
},
{
date: '2017-05-12',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-13',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-05-14',
temp: 23,
precipitation: 0,
},
{
date: '2017-05-15',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-05-16',
temp: 20,
precipitation: 0,
},
{
date: '2017-05-17',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-05-18',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-05-19',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-05-20',
temp: 24,
precipitation: 0,
},
{
date: '2017-05-21',
temp: 27.5,
precipitation: 0,
},
{
date: '2017-05-22',
temp: 29,
precipitation: 0,
},
{
date: '2017-05-23',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-05-24',
temp: 31,
precipitation: 0,
},
{
date: '2017-05-25',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-05-26',
temp: 27,
precipitation: 0,
},
{
date: '2017-05-27',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-28',
temp: 29,
precipitation: 0,
},
{
date: '2017-05-29',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-05-30',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-05-31',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-06-01',
temp: 28,
precipitation: 0,
},
{
date: '2017-06-02',
temp: 30,
precipitation: 0,
},
{
date: '2017-06-03',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-06-04',
temp: 32,
precipitation: 0,
},
{
date: '2017-06-05',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-06',
temp: 33,
precipitation: 0,
},
{
date: '2017-06-07',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-06-08',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-09',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-10',
temp: 29,
precipitation: 0,
},
{
date: '2017-06-11',
temp: 26,
precipitation: 0,
},
{
date: '2017-06-12',
temp: 21,
precipitation: 0,
},
{
date: '2017-06-13',
temp: 25,
precipitation: 0,
},
{
date: '2017-06-14',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-06-15',
temp: 32,
precipitation: 0,
},
{
date: '2017-06-16',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-06-17',
temp: 36,
precipitation: 0,
},
{
date: '2017-06-18',
temp: 36,
precipitation: 0,
},
{
date: '2017-06-19',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-20',
temp: 39,
precipitation: 0,
},
{
date: '2017-06-21',
temp: 38,
precipitation: 0,
},
{
date: '2017-06-22',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-23',
temp: 37,
precipitation: 0,
},
{
date: '2017-06-24',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-25',
temp: 37,
precipitation: 0,
},
{
date: '2017-06-26',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-06-27',
temp: 34,
precipitation: 0,
},
{
date: '2017-06-28',
temp: 34,
precipitation: 0,
},
{
date: '2017-06-29',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-30',
temp: 35,
precipitation: 0,
},
{
date: '2017-07-01',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-07-02',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-07-03',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-04',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-05',
temp: 39,
precipitation: 0,
},
{
date: '2017-07-06',
temp: 39.5,
precipitation: 0,
},
{
date: '2017-07-07',
temp: 40,
precipitation: 0,
},
{
date: '2017-07-08',
temp: 39,
precipitation: 0,
},
{
date: '2017-07-09',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-10',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-11',
temp: 36.5,
precipitation: 0.1,
},
{
date: '2017-07-12',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-13',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-14',
temp: 39.5,
precipitation: 0,
},
{
date: '2017-07-15',
temp: 40,
precipitation: 0,
},
{
date: '2017-07-16',
temp: 38.5,
precipitation: 0,
},
{
date: '2017-07-17',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-18',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-19',
temp: 34,
precipitation: 0.4,
},
{
date: '2017-07-20',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-07-21',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-22',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-23',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-24',
temp: 34,
precipitation: 0.1,
},
{
date: '2017-07-25',
temp: 34,
precipitation: 0,
},
{
date: '2017-07-26',
temp: 33.5,
precipitation: 0.2,
},
{
date: '2017-07-27',
temp: 36,
precipitation: 0,
},
{
date: '2017-07-28',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-29',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-30',
temp: 37.5,
precipitation: 0.1,
},
{
date: '2017-07-31',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-01',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-02',
temp: 35.5,
precipitation: 0.1,
},
{
date: '2017-08-03',
temp: 33.5,
precipitation: 0.9,
},
{
date: '2017-08-04',
temp: 32,
precipitation: 0.1,
},
{
date: '2017-08-05',
temp: 33.5,
precipitation: 0.1,
},
{
date: '2017-08-06',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-07',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-08',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-08-09',
temp: 36,
precipitation: 0,
},
{
date: '2017-08-10',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-08-11',
temp: 35,
precipitation: 0,
},
{
date: '2017-08-12',
temp: 35.5,
precipitation: 0.1,
},
{
date: '2017-08-13',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-14',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-08-15',
temp: 30,
precipitation: 0,
},
{
date: '2017-08-16',
temp: 31,
precipitation: 0,
},
{
date: '2017-08-17',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-18',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-08-19',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-20',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-21',
temp: 32,
precipitation: 0,
},
{
date: '2017-08-22',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-08-23',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-24',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-25',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-26',
temp: 36,
precipitation: 0,
},
{
date: '2017-08-27',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-28',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-29',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-08-30',
temp: 36,
precipitation: 0.3,
},
{
date: '2017-08-31',
temp: 33.5,
precipitation: 0.3,
},
{
date: '2017-09-01',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-09-02',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-09-03',
temp: 34,
precipitation: 0.1,
},
{
date: '2017-09-04',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-09-05',
temp: 33,
precipitation: 0,
},
{
date: '2017-09-06',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-07',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-08',
temp: 28,
precipitation: 1.7,
},
{
date: '2017-09-09',
temp: 23,
precipitation: 7.6,
},
{
date: '2017-09-10',
temp: 29,
precipitation: 0,
},
{
date: '2017-09-11',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-12',
temp: 31,
precipitation: 0,
},
{
date: '2017-09-13',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-09-14',
temp: 26,
precipitation: 0,
},
{
date: '2017-09-15',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-09-16',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-17',
temp: 25,
precipitation: 0,
},
{
date: '2017-09-18',
temp: 26.5,
precipitation: 0,
},
{
date: '2017-09-19',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-20',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-21',
temp: 20,
precipitation: 0,
},
{
date: '2017-09-22',
temp: 17,
precipitation: 0,
},
{
date: '2017-09-23',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-09-24',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-09-25',
temp: 18,
precipitation: 0,
},
{
date: '2017-09-26',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-09-27',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-09-28',
temp: 22,
precipitation: 0,
},
{
date: '2017-09-29',
temp: 24,
precipitation: 0,
},
{
date: '2017-09-30',
temp: 25,
precipitation: 0,
},
{
date: '2017-10-01',
temp: 23,
precipitation: 0,
},
{
date: '2017-10-02',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-03',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-10-04',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-10-05',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-06',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-07',
temp: 23,
precipitation: 0,
},
{
date: '2017-10-08',
temp: 24,
precipitation: 0,
},
{
date: '2017-10-09',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-10-10',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-11',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-12',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-13',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-14',
temp: 17,
precipitation: 0,
},
{
date: '2017-10-15',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-16',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-10-17',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-18',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-19',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-10-20',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-21',
temp: 15,
precipitation: 0,
},
{
date: '2017-10-22',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-23',
temp: 22,
precipitation: 0,
},
{
date: '2017-10-24',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-10-25',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-26',
temp: 22,
precipitation: 0,
},
{
date: '2017-10-27',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-28',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-29',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-30',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-31',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-11-01',
temp: 18,
precipitation: 0,
},
{
date: '2017-11-02',
temp: 15,
precipitation: 0,
},
{
date: '2017-11-03',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-04',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-05',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-11-06',
temp: 12,
precipitation: 0,
},
{
date: '2017-11-07',
temp: 14,
precipitation: 0,
},
{
date: '2017-11-08',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-09',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-10',
temp: 16,
precipitation: 0,
},
{
date: '2017-11-11',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-12',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-13',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-14',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-15',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-16',
temp: 15,
precipitation: 0,
},
{
date: '2017-11-17',
temp: 17,
precipitation: 0,
},
{
date: '2017-11-18',
temp: 8.5,
precipitation: 0,
},
{
date: '2017-11-19',
temp: 11,
precipitation: 0,
},
{
date: '2017-11-20',
temp: 12,
precipitation: 0,
},
{
date: '2017-11-21',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-11-22',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-23',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-24',
temp: 18,
precipitation: 0,
},
{
date: '2017-11-25',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-26',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-11-27',
temp: 13,
precipitation: 0,
},
{
date: '2017-11-28',
temp: 10,
precipitation: 0,
},
{
date: '2017-11-29',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-11-30',
temp: 11.5,
precipitation: 0,
},
{
date: '2017-12-01',
temp: 14,
precipitation: 0,
},
{
date: '2017-12-02',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-03',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-04',
temp: 4.5,
precipitation: 0,
},
{
date: '2017-12-05',
temp: 5,
precipitation: 0,
},
{
date: '2017-12-06',
temp: 7,
precipitation: 0,
},
{
date: '2017-12-07',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-12-08',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-09',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-10',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-11',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-12-12',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-13',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-12-14',
temp: 9,
precipitation: 0,
},
{
date: '2017-12-15',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-16',
temp: 8,
precipitation: 0,
},
{
date: '2017-12-17',
temp: 6,
precipitation: 0,
},
{
date: '2017-12-18',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-12-19',
temp: 9.5,
precipitation: 0,
},
{
date: '2017-12-20',
temp: 8.5,
precipitation: 0,
},
{
date: '2017-12-21',
temp: 3,
precipitation: 0,
},
{
date: '2017-12-22',
temp: 4,
precipitation: 0,
},
{
date: '2017-12-23',
temp: 6,
precipitation: 0,
},
{
date: '2017-12-24',
temp: 8,
precipitation: 0,
},
{
date: '2017-12-25',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-26',
temp: 11,
precipitation: 0,
},
{
date: '2017-12-27',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-28',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-29',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-30',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-31',
temp: 11,
precipitation: 0,
}];
export const intervalLabel = { 'aria-label': 'Interval' };
export const functionLabel = { 'aria-label': 'Function' };
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.13/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const aggregationIntervals = [
{ displayName: 'One week', interval: 'week' },
{ displayName: 'Two weeks', interval: { weeks: 2 } },
{ displayName: 'Month', interval: 'month' },
];
export const aggregationFunctions = [
{ displayName: 'Average', func: 'avg' },
{ displayName: 'Minimum', func: 'min' },
{ displayName: 'Maximum', func: 'max' },
];
export const weatherData = [
{
date: '2017-01-01',
temp: 9.5,
precipitation: 0.1,
},
{
date: '2017-01-02',
temp: 8,
precipitation: 0.4,
},
{
date: '2017-01-03',
temp: 7.5,
precipitation: 0.2,
},
{
date: '2017-01-04',
temp: 8.5,
precipitation: 0.1,
},
{
date: '2017-01-05',
temp: 10,
precipitation: 0.3,
},
{
date: '2017-01-06',
temp: 3,
precipitation: 0,
},
{
date: '2017-01-07',
temp: 5,
precipitation: 0.3,
},
{
date: '2017-01-08',
temp: 9.5,
precipitation: 0,
},
{
date: '2017-01-09',
temp: 11,
precipitation: 0.5,
},
{
date: '2017-01-10',
temp: 8,
precipitation: 0,
},
{
date: '2017-01-11',
temp: 11.5,
precipitation: 0.3,
},
{
date: '2017-01-12',
temp: 9.5,
precipitation: 2.1,
},
{
date: '2017-01-13',
temp: 11.5,
precipitation: 3.5,
},
{
date: '2017-01-14',
temp: 11,
precipitation: 0.1,
},
{
date: '2017-01-15',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-01-16',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-01-17',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-01-18',
temp: 8,
precipitation: 0.1,
},
{
date: '2017-01-19',
temp: 8.5,
precipitation: 1.3,
},
{
date: '2017-01-20',
temp: 5.5,
precipitation: 5.3,
},
{
date: '2017-01-21',
temp: 9,
precipitation: 0.1,
},
{
date: '2017-01-22',
temp: 6,
precipitation: 16.6,
},
{
date: '2017-01-23',
temp: 8.5,
precipitation: 5.5,
},
{
date: '2017-01-24',
temp: 6.5,
precipitation: 1.3,
},
{
date: '2017-01-25',
temp: 4.5,
precipitation: 0,
},
{
date: '2017-01-26',
temp: 5.5,
precipitation: 0,
},
{
date: '2017-01-27',
temp: 3,
precipitation: 0,
},
{
date: '2017-01-28',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-01-29',
temp: 8,
precipitation: 0,
},
{
date: '2017-01-30',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-01-31',
temp: 13,
precipitation: 0,
},
{
date: '2017-02-01',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-02-02',
temp: 12,
precipitation: 0,
},
{
date: '2017-02-03',
temp: 13,
precipitation: 0.2,
},
{
date: '2017-02-04',
temp: 10,
precipitation: 0,
},
{
date: '2017-02-05',
temp: 11.5,
precipitation: 0,
},
{
date: '2017-02-06',
temp: 11.5,
precipitation: 0.1,
},
{
date: '2017-02-07',
temp: 12.5,
precipitation: 0.5,
},
{
date: '2017-02-08',
temp: 13,
precipitation: 0,
},
{
date: '2017-02-09',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-02-10',
temp: 16.5,
precipitation: 0.1,
},
{
date: '2017-02-11',
temp: 14.5,
precipitation: 0.8,
},
{
date: '2017-02-12',
temp: 13.5,
precipitation: 0.1,
},
{
date: '2017-02-13',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-02-14',
temp: 12,
precipitation: 0,
},
{
date: '2017-02-15',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-02-16',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-02-17',
temp: 12.5,
precipitation: 4.5,
},
{
date: '2017-02-18',
temp: 10,
precipitation: 14.4,
},
{
date: '2017-02-19',
temp: 13.5,
precipitation: 0.5,
},
{
date: '2017-02-20',
temp: 14,
precipitation: 0.6,
},
{
date: '2017-02-21',
temp: 15,
precipitation: 0,
},
{
date: '2017-02-22',
temp: 11,
precipitation: 0,
},
{
date: '2017-02-23',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-02-24',
temp: 6,
precipitation: 0,
},
{
date: '2017-02-25',
temp: 7,
precipitation: 0,
},
{
date: '2017-02-26',
temp: 8,
precipitation: 0,
},
{
date: '2017-02-27',
temp: 8.5,
precipitation: 0.1,
},
{
date: '2017-02-28',
temp: 10,
precipitation: 0,
},
{
date: '2017-03-01',
temp: 9,
precipitation: 0,
},
{
date: '2017-03-02',
temp: 11,
precipitation: 0,
},
{
date: '2017-03-03',
temp: 15,
precipitation: 0,
},
{
date: '2017-03-04',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-03-05',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-03-06',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-03-07',
temp: 11,
precipitation: 0,
},
{
date: '2017-03-08',
temp: 16,
precipitation: 0,
},
{
date: '2017-03-09',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-03-10',
temp: 20,
precipitation: 0,
},
{
date: '2017-03-11',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-03-12',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-03-13',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-03-14',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-15',
temp: 23,
precipitation: 0,
},
{
date: '2017-03-16',
temp: 23,
precipitation: 0,
},
{
date: '2017-03-17',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-03-18',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-19',
temp: 24,
precipitation: 0,
},
{
date: '2017-03-20',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-03-21',
temp: 22,
precipitation: 0,
},
{
date: '2017-03-22',
temp: 18.5,
precipitation: 4,
},
{
date: '2017-03-23',
temp: 15,
precipitation: 2.4,
},
{
date: '2017-03-24',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-03-25',
temp: 19,
precipitation: 0,
},
{
date: '2017-03-26',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-03-27',
temp: 18,
precipitation: 0,
},
{
date: '2017-03-28',
temp: 17,
precipitation: 0,
},
{
date: '2017-03-29',
temp: 21,
precipitation: 0,
},
{
date: '2017-03-30',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-03-31',
temp: 16.5,
precipitation: 0.2,
},
{
date: '2017-04-01',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-02',
temp: 20,
precipitation: 0,
},
{
date: '2017-04-03',
temp: 18,
precipitation: 0,
},
{
date: '2017-04-04',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-04-05',
temp: 17,
precipitation: 0,
},
{
date: '2017-04-06',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-07',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-08',
temp: 19,
precipitation: 0.2,
},
{
date: '2017-04-09',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-04-10',
temp: 17,
precipitation: 0,
},
{
date: '2017-04-11',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-04-12',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-13',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-14',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-15',
temp: 21,
precipitation: 0,
},
{
date: '2017-04-16',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-04-17',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-18',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-19',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-04-20',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-21',
temp: 20,
precipitation: 0,
},
{
date: '2017-04-22',
temp: 23,
precipitation: 0,
},
{
date: '2017-04-23',
temp: 26,
precipitation: 0,
},
{
date: '2017-04-24',
temp: 25,
precipitation: 0,
},
{
date: '2017-04-25',
temp: 22,
precipitation: 0,
},
{
date: '2017-04-26',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-04-27',
temp: 23,
precipitation: 0,
},
{
date: '2017-04-28',
temp: 19,
precipitation: 0,
},
{
date: '2017-04-29',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-04-30',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-05-01',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-02',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-03',
temp: 25.5,
precipitation: 0,
},
{
date: '2017-05-04',
temp: 28,
precipitation: 0,
},
{
date: '2017-05-05',
temp: 28.5,
precipitation: 0,
},
{
date: '2017-05-06',
temp: 27,
precipitation: 0.4,
},
{
date: '2017-05-07',
temp: 17,
precipitation: 0.1,
},
{
date: '2017-05-08',
temp: 17,
precipitation: 0,
},
{
date: '2017-05-09',
temp: 20,
precipitation: 1.7,
},
{
date: '2017-05-10',
temp: 19.5,
precipitation: 0.3,
},
{
date: '2017-05-11',
temp: 23,
precipitation: 0,
},
{
date: '2017-05-12',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-13',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-05-14',
temp: 23,
precipitation: 0,
},
{
date: '2017-05-15',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-05-16',
temp: 20,
precipitation: 0,
},
{
date: '2017-05-17',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-05-18',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-05-19',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-05-20',
temp: 24,
precipitation: 0,
},
{
date: '2017-05-21',
temp: 27.5,
precipitation: 0,
},
{
date: '2017-05-22',
temp: 29,
precipitation: 0,
},
{
date: '2017-05-23',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-05-24',
temp: 31,
precipitation: 0,
},
{
date: '2017-05-25',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-05-26',
temp: 27,
precipitation: 0,
},
{
date: '2017-05-27',
temp: 26,
precipitation: 0,
},
{
date: '2017-05-28',
temp: 29,
precipitation: 0,
},
{
date: '2017-05-29',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-05-30',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-05-31',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-06-01',
temp: 28,
precipitation: 0,
},
{
date: '2017-06-02',
temp: 30,
precipitation: 0,
},
{
date: '2017-06-03',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-06-04',
temp: 32,
precipitation: 0,
},
{
date: '2017-06-05',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-06',
temp: 33,
precipitation: 0,
},
{
date: '2017-06-07',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-06-08',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-09',
temp: 31.5,
precipitation: 0,
},
{
date: '2017-06-10',
temp: 29,
precipitation: 0,
},
{
date: '2017-06-11',
temp: 26,
precipitation: 0,
},
{
date: '2017-06-12',
temp: 21,
precipitation: 0,
},
{
date: '2017-06-13',
temp: 25,
precipitation: 0,
},
{
date: '2017-06-14',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-06-15',
temp: 32,
precipitation: 0,
},
{
date: '2017-06-16',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-06-17',
temp: 36,
precipitation: 0,
},
{
date: '2017-06-18',
temp: 36,
precipitation: 0,
},
{
date: '2017-06-19',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-20',
temp: 39,
precipitation: 0,
},
{
date: '2017-06-21',
temp: 38,
precipitation: 0,
},
{
date: '2017-06-22',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-23',
temp: 37,
precipitation: 0,
},
{
date: '2017-06-24',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-25',
temp: 37,
precipitation: 0,
},
{
date: '2017-06-26',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-06-27',
temp: 34,
precipitation: 0,
},
{
date: '2017-06-28',
temp: 34,
precipitation: 0,
},
{
date: '2017-06-29',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-06-30',
temp: 35,
precipitation: 0,
},
{
date: '2017-07-01',
temp: 37.5,
precipitation: 0,
},
{
date: '2017-07-02',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-07-03',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-04',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-05',
temp: 39,
precipitation: 0,
},
{
date: '2017-07-06',
temp: 39.5,
precipitation: 0,
},
{
date: '2017-07-07',
temp: 40,
precipitation: 0,
},
{
date: '2017-07-08',
temp: 39,
precipitation: 0,
},
{
date: '2017-07-09',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-10',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-11',
temp: 36.5,
precipitation: 0.1,
},
{
date: '2017-07-12',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-13',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-14',
temp: 39.5,
precipitation: 0,
},
{
date: '2017-07-15',
temp: 40,
precipitation: 0,
},
{
date: '2017-07-16',
temp: 38.5,
precipitation: 0,
},
{
date: '2017-07-17',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-18',
temp: 37,
precipitation: 0,
},
{
date: '2017-07-19',
temp: 34,
precipitation: 0.4,
},
{
date: '2017-07-20',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-07-21',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-22',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-23',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-24',
temp: 34,
precipitation: 0.1,
},
{
date: '2017-07-25',
temp: 34,
precipitation: 0,
},
{
date: '2017-07-26',
temp: 33.5,
precipitation: 0.2,
},
{
date: '2017-07-27',
temp: 36,
precipitation: 0,
},
{
date: '2017-07-28',
temp: 38,
precipitation: 0,
},
{
date: '2017-07-29',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-07-30',
temp: 37.5,
precipitation: 0.1,
},
{
date: '2017-07-31',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-01',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-02',
temp: 35.5,
precipitation: 0.1,
},
{
date: '2017-08-03',
temp: 33.5,
precipitation: 0.9,
},
{
date: '2017-08-04',
temp: 32,
precipitation: 0.1,
},
{
date: '2017-08-05',
temp: 33.5,
precipitation: 0.1,
},
{
date: '2017-08-06',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-07',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-08',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-08-09',
temp: 36,
precipitation: 0,
},
{
date: '2017-08-10',
temp: 35.5,
precipitation: 0,
},
{
date: '2017-08-11',
temp: 35,
precipitation: 0,
},
{
date: '2017-08-12',
temp: 35.5,
precipitation: 0.1,
},
{
date: '2017-08-13',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-14',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-08-15',
temp: 30,
precipitation: 0,
},
{
date: '2017-08-16',
temp: 31,
precipitation: 0,
},
{
date: '2017-08-17',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-18',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-08-19',
temp: 34,
precipitation: 0,
},
{
date: '2017-08-20',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-21',
temp: 32,
precipitation: 0,
},
{
date: '2017-08-22',
temp: 32.5,
precipitation: 0,
},
{
date: '2017-08-23',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-24',
temp: 33,
precipitation: 0,
},
{
date: '2017-08-25',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-08-26',
temp: 36,
precipitation: 0,
},
{
date: '2017-08-27',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-28',
temp: 37,
precipitation: 0,
},
{
date: '2017-08-29',
temp: 36.5,
precipitation: 0,
},
{
date: '2017-08-30',
temp: 36,
precipitation: 0.3,
},
{
date: '2017-08-31',
temp: 33.5,
precipitation: 0.3,
},
{
date: '2017-09-01',
temp: 33.5,
precipitation: 0,
},
{
date: '2017-09-02',
temp: 34.5,
precipitation: 0,
},
{
date: '2017-09-03',
temp: 34,
precipitation: 0.1,
},
{
date: '2017-09-04',
temp: 29.5,
precipitation: 0,
},
{
date: '2017-09-05',
temp: 33,
precipitation: 0,
},
{
date: '2017-09-06',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-07',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-08',
temp: 28,
precipitation: 1.7,
},
{
date: '2017-09-09',
temp: 23,
precipitation: 7.6,
},
{
date: '2017-09-10',
temp: 29,
precipitation: 0,
},
{
date: '2017-09-11',
temp: 32,
precipitation: 0,
},
{
date: '2017-09-12',
temp: 31,
precipitation: 0,
},
{
date: '2017-09-13',
temp: 30.5,
precipitation: 0,
},
{
date: '2017-09-14',
temp: 26,
precipitation: 0,
},
{
date: '2017-09-15',
temp: 23.5,
precipitation: 0,
},
{
date: '2017-09-16',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-17',
temp: 25,
precipitation: 0,
},
{
date: '2017-09-18',
temp: 26.5,
precipitation: 0,
},
{
date: '2017-09-19',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-20',
temp: 24.5,
precipitation: 0,
},
{
date: '2017-09-21',
temp: 20,
precipitation: 0,
},
{
date: '2017-09-22',
temp: 17,
precipitation: 0,
},
{
date: '2017-09-23',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-09-24',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-09-25',
temp: 18,
precipitation: 0,
},
{
date: '2017-09-26',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-09-27',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-09-28',
temp: 22,
precipitation: 0,
},
{
date: '2017-09-29',
temp: 24,
precipitation: 0,
},
{
date: '2017-09-30',
temp: 25,
precipitation: 0,
},
{
date: '2017-10-01',
temp: 23,
precipitation: 0,
},
{
date: '2017-10-02',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-03',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-10-04',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-10-05',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-06',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-07',
temp: 23,
precipitation: 0,
},
{
date: '2017-10-08',
temp: 24,
precipitation: 0,
},
{
date: '2017-10-09',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-10-10',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-11',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-12',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-13',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-14',
temp: 17,
precipitation: 0,
},
{
date: '2017-10-15',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-16',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-10-17',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-18',
temp: 21.5,
precipitation: 0,
},
{
date: '2017-10-19',
temp: 22.5,
precipitation: 0,
},
{
date: '2017-10-20',
temp: 18,
precipitation: 0,
},
{
date: '2017-10-21',
temp: 15,
precipitation: 0,
},
{
date: '2017-10-22',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-23',
temp: 22,
precipitation: 0,
},
{
date: '2017-10-24',
temp: 20.5,
precipitation: 0,
},
{
date: '2017-10-25',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-26',
temp: 22,
precipitation: 0,
},
{
date: '2017-10-27',
temp: 20,
precipitation: 0,
},
{
date: '2017-10-28',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-29',
temp: 21,
precipitation: 0,
},
{
date: '2017-10-30',
temp: 19.5,
precipitation: 0,
},
{
date: '2017-10-31',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-11-01',
temp: 18,
precipitation: 0,
},
{
date: '2017-11-02',
temp: 15,
precipitation: 0,
},
{
date: '2017-11-03',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-04',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-05',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-11-06',
temp: 12,
precipitation: 0,
},
{
date: '2017-11-07',
temp: 14,
precipitation: 0,
},
{
date: '2017-11-08',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-09',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-10',
temp: 16,
precipitation: 0,
},
{
date: '2017-11-11',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-12',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-13',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-14',
temp: 14.5,
precipitation: 0,
},
{
date: '2017-11-15',
temp: 16.5,
precipitation: 0,
},
{
date: '2017-11-16',
temp: 15,
precipitation: 0,
},
{
date: '2017-11-17',
temp: 17,
precipitation: 0,
},
{
date: '2017-11-18',
temp: 8.5,
precipitation: 0,
},
{
date: '2017-11-19',
temp: 11,
precipitation: 0,
},
{
date: '2017-11-20',
temp: 12,
precipitation: 0,
},
{
date: '2017-11-21',
temp: 15.5,
precipitation: 0,
},
{
date: '2017-11-22',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-23',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-24',
temp: 18,
precipitation: 0,
},
{
date: '2017-11-25',
temp: 18.5,
precipitation: 0,
},
{
date: '2017-11-26',
temp: 17.5,
precipitation: 0,
},
{
date: '2017-11-27',
temp: 13,
precipitation: 0,
},
{
date: '2017-11-28',
temp: 10,
precipitation: 0,
},
{
date: '2017-11-29',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-11-30',
temp: 11.5,
precipitation: 0,
},
{
date: '2017-12-01',
temp: 14,
precipitation: 0,
},
{
date: '2017-12-02',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-03',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-04',
temp: 4.5,
precipitation: 0,
},
{
date: '2017-12-05',
temp: 5,
precipitation: 0,
},
{
date: '2017-12-06',
temp: 7,
precipitation: 0,
},
{
date: '2017-12-07',
temp: 6.5,
precipitation: 0,
},
{
date: '2017-12-08',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-09',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-10',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-11',
temp: 10.5,
precipitation: 0,
},
{
date: '2017-12-12',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-13',
temp: 12.5,
precipitation: 0,
},
{
date: '2017-12-14',
temp: 9,
precipitation: 0,
},
{
date: '2017-12-15',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-16',
temp: 8,
precipitation: 0,
},
{
date: '2017-12-17',
temp: 6,
precipitation: 0,
},
{
date: '2017-12-18',
temp: 7.5,
precipitation: 0,
},
{
date: '2017-12-19',
temp: 9.5,
precipitation: 0,
},
{
date: '2017-12-20',
temp: 8.5,
precipitation: 0,
},
{
date: '2017-12-21',
temp: 3,
precipitation: 0,
},
{
date: '2017-12-22',
temp: 4,
precipitation: 0,
},
{
date: '2017-12-23',
temp: 6,
precipitation: 0,
},
{
date: '2017-12-24',
temp: 8,
precipitation: 0,
},
{
date: '2017-12-25',
temp: 10,
precipitation: 0,
},
{
date: '2017-12-26',
temp: 11,
precipitation: 0,
},
{
date: '2017-12-27',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-28',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-29',
temp: 13.5,
precipitation: 0,
},
{
date: '2017-12-30',
temp: 12,
precipitation: 0,
},
{
date: '2017-12-31',
temp: 11,
precipitation: 0,
},
];
export const intervalLabel = { 'aria-label': 'Interval' };
export const functionLabel = { 'aria-label': 'Function' };
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#chart-demo {
height: 700px;
}
#chart {
height: 500px;
margin: 0 0 15px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
width: 50px;
display: inline-block;
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}