Skip to content

Commit 958b77a

Browse files
bmarkovbmarkov
committed
updated demos to react functional components
1 parent 29b06b5 commit 958b77a

File tree

127 files changed

+11081
-16952
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

127 files changed

+11081
-16952
lines changed

‎demos/chart/100-stacked-area-series/src/App.jsx‎

Lines changed: 85 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,96 @@
11
import 'smart-webcomponents-react/source/styles/smart.default.css';
22
import './App.css';
3-
import React from "react";
4-
import ReactDOM from 'react-dom/client';
3+
import React, { useState, useEffect, useMemo } from 'react';
54
import { Chart } from 'smart-webcomponents-react/chart';
65

7-
class App extends React.Component {
8-
sampleData = JSON.parse('[{"Date":"10/1/2017","Referral":"1391","SearchPaid":"1158","SearchNonPaid":"1201","uid":0},{"Date":"10/2/2017","Referral":"1379","SearchPaid":"1439","SearchNonPaid":"1015","uid":1},{"Date":"10/3/2017","Referral":"1026","SearchPaid":"1288","SearchNonPaid":"1282","uid":2},{"Date":"10/4/2017","Referral":"1497","SearchPaid":"1063","SearchNonPaid":"1089","uid":3},{"Date":"10/5/2017","Referral":"1153","SearchPaid":"1107","SearchNonPaid":"1051","uid":4},{"Date":"10/6/2017","Referral":"1367","SearchPaid":"1351","SearchNonPaid":"1037","uid":5},{"Date":"10/7/2017","Referral":"1243","SearchPaid":"1079","SearchNonPaid":"1139","uid":6},{"Date":"10/8/2017","Referral":"1445","SearchPaid":"1187","SearchNonPaid":"1174","uid":7},{"Date":"10/9/2017","Referral":"1495","SearchPaid":"1095","SearchNonPaid":"1192","uid":8},{"Date":"10/10/2017","Referral":"1031","SearchPaid":"1441","SearchNonPaid":"1277","uid":9},{"Date":"10/11/2017","Referral":"1061","SearchPaid":"1312","SearchNonPaid":"1122","uid":10},{"Date":"10/12/2017","Referral":"1231","SearchPaid":"1382","SearchNonPaid":"1437","uid":11},{"Date":"10/13/2017","Referral":"1069","SearchPaid":"1018","SearchNonPaid":"1180","uid":12},{"Date":"10/14/2017","Referral":"1309","SearchPaid":"1358","SearchNonPaid":"1425","uid":13},{"Date":"10/15/2017","Referral":"1161","SearchPaid":"1376","SearchNonPaid":"1017","uid":14},{"Date":"10/16/2017","Referral":"1250","SearchPaid":"1401","SearchNonPaid":"1198","uid":15},{"Date":"10/17/2017","Referral":"1235","SearchPaid":"1341","SearchNonPaid":"1114","uid":16},{"Date":"10/18/2017","Referral":"1345","SearchPaid":"1089","SearchNonPaid":"1158","uid":17},{"Date":"10/19/2017","Referral":"1487","SearchPaid":"1110","SearchNonPaid":"1382","uid":18},{"Date":"10/20/2017","Referral":"1308","SearchPaid":"1165","SearchNonPaid":"1453","uid":19},{"Date":"10/21/2017","Referral":"1326","SearchPaid":"1058","SearchNonPaid":"1140","uid":20},{"Date":"10/22/2017","Referral":"1021","SearchPaid":"1176","SearchNonPaid":"1085","uid":21},{"Date":"10/23/2017","Referral":"1219","SearchPaid":"1190","SearchNonPaid":"1233","uid":22},{"Date":"10/24/2017","Referral":"1345","SearchPaid":"1057","SearchNonPaid":"1300","uid":23},{"Date":"10/25/2017","Referral":"1283","SearchPaid":"1491","SearchNonPaid":"1273","uid":24},{"Date":"10/26/2017","Referral":"1435","SearchPaid":"1483","SearchNonPaid":"1298","uid":25},{"Date":"10/27/2017","Referral":"1097","SearchPaid":"1102","SearchNonPaid":"1022","uid":26},{"Date":"10/28/2017","Referral":"1222","SearchPaid":"1218","SearchNonPaid":"1485","uid":27},{"Date":"10/29/2017","Referral":"1270","SearchPaid":"1108","SearchNonPaid":"1180","uid":28},{"Date":"10/30/2017","Referral":"1339","SearchPaid":"1372","SearchNonPaid":"1499","uid":29},{"Date":"10/31/2017","Referral":"1435","SearchPaid":"1181","SearchNonPaid":"1235","uid":30}]');
6+
const App = () => {
7+
const [data, setData] = useState([]);
98

10-
monthFormatter = new Intl.DateTimeFormat('en', {
11-
month: 'short'
12-
});
9+
const rawData = JSON.parse(`[
10+
{"Date":"10/1/2017","Referral":"1391","SearchPaid":"1158","SearchNonPaid":"1201"},
11+
{"Date":"10/2/2017","Referral":"1379","SearchPaid":"1439","SearchNonPaid":"1015"},
12+
{"Date":"10/3/2017","Referral":"1026","SearchPaid":"1288","SearchNonPaid":"1282"},
13+
{"Date":"10/4/2017","Referral":"1497","SearchPaid":"1063","SearchNonPaid":"1089"},
14+
{"Date":"10/5/2017","Referral":"1153","SearchPaid":"1107","SearchNonPaid":"1051"},
15+
{"Date":"10/6/2017","Referral":"1367","SearchPaid":"1351","SearchNonPaid":"1037"},
16+
{"Date":"10/7/2017","Referral":"1243","SearchPaid":"1079","SearchNonPaid":"1139"},
17+
{"Date":"10/8/2017","Referral":"1445","SearchPaid":"1187","SearchNonPaid":"1174"},
18+
{"Date":"10/9/2017","Referral":"1495","SearchPaid":"1095","SearchNonPaid":"1192"},
19+
{"Date":"10/10/2017","Referral":"1031","SearchPaid":"1441","SearchNonPaid":"1277"},
20+
{"Date":"10/11/2017","Referral":"1061","SearchPaid":"1312","SearchNonPaid":"1122"},
21+
{"Date":"10/12/2017","Referral":"1231","SearchPaid":"1382","SearchNonPaid":"1437"},
22+
{"Date":"10/13/2017","Referral":"1069","SearchPaid":"1018","SearchNonPaid":"1180"},
23+
{"Date":"10/14/2017","Referral":"1309","SearchPaid":"1358","SearchNonPaid":"1425"},
24+
{"Date":"10/15/2017","Referral":"1161","SearchPaid":"1376","SearchNonPaid":"1017"},
25+
{"Date":"10/16/2017","Referral":"1250","SearchPaid":"1401","SearchNonPaid":"1198"},
26+
{"Date":"10/17/2017","Referral":"1235","SearchPaid":"1341","SearchNonPaid":"1114"},
27+
{"Date":"10/18/2017","Referral":"1345","SearchPaid":"1089","SearchNonPaid":"1158"},
28+
{"Date":"10/19/2017","Referral":"1487","SearchPaid":"1110","SearchNonPaid":"1382"},
29+
{"Date":"10/20/2017","Referral":"1308","SearchPaid":"1165","SearchNonPaid":"1453"},
30+
{"Date":"10/21/2017","Referral":"1326","SearchPaid":"1058","SearchNonPaid":"1140"},
31+
{"Date":"10/22/2017","Referral":"1021","SearchPaid":"1176","SearchNonPaid":"1085"},
32+
{"Date":"10/23/2017","Referral":"1219","SearchPaid":"1190","SearchNonPaid":"1233"},
33+
{"Date":"10/24/2017","Referral":"1345","SearchPaid":"1057","SearchNonPaid":"1300"},
34+
{"Date":"10/25/2017","Referral":"1283","SearchPaid":"1491","SearchNonPaid":"1273"},
35+
{"Date":"10/26/2017","Referral":"1435","SearchPaid":"1483","SearchNonPaid":"1298"},
36+
{"Date":"10/27/2017","Referral":"1097","SearchPaid":"1102","SearchNonPaid":"1022"},
37+
{"Date":"10/28/2017","Referral":"1222","SearchPaid":"1218","SearchNonPaid":"1485"},
38+
{"Date":"10/29/2017","Referral":"1270","SearchPaid":"1108","SearchNonPaid":"1180"},
39+
{"Date":"10/30/2017","Referral":"1339","SearchPaid":"1372","SearchNonPaid":"1499"},
40+
{"Date":"10/31/2017","Referral":"1435","SearchPaid":"1181","SearchNonPaid":"1235"}
41+
]`);
1342

14-
caption = 'Web Traffic Analysis';
15-
description = 'Unique monthly site visitors (percentage stacked)';
16-
showLegend = true;
17-
padding = {
18-
left: 10,
19-
top: 5,
20-
right: 10,
21-
bottom: 5
22-
};
23-
titlePadding = {
24-
left: 90,
25-
top: 0,
26-
right: 0,
27-
bottom: 10
28-
};
29-
dataSource = this.sampleData;
30-
xAxis = {
31-
type: 'date',
32-
baseUnit: 'day',
33-
dataField: 'Date',
34-
valuesOnTicks: true,
35-
labels: {
36-
formatFunction: function (value) {
37-
return value.getDate();
38-
}
39-
},
40-
gridLines: {
41-
visible: false
42-
},
43-
toolTipFormatFunction: (value) => {
44-
return value.getDate() + '-' + this.monthFormatter.format(value) + '-' + value.getFullYear();
45-
}
46-
};
47-
valueAxis = {
48-
title: {
49-
text: 'Daily visitors'
50-
},
51-
labels: {
52-
horizontalAlignment: 'right'
53-
}
54-
};
55-
colorScheme = 'scheme32';
56-
seriesGroups = [{
57-
type: 'stackedarea100',
58-
series: [{
59-
dataField: 'SearchNonPaid',
60-
displayText: 'Organic Search Traffic'
61-
},
62-
{
63-
dataField: 'SearchPaid',
64-
displayText: 'Paid Search Traffic'
65-
},
66-
{
67-
dataField: 'Referral',
68-
displayText: 'Referral Traffic'
69-
}
70-
]
71-
}];
43+
useEffect(() => {
44+
const parsedData = rawData.map(entry => ({
45+
...entry,
46+
Date: new Date(entry.Date),
47+
Referral: parseInt(entry.Referral),
48+
SearchPaid: parseInt(entry.SearchPaid),
49+
SearchNonPaid: parseInt(entry.SearchNonPaid)
50+
}));
51+
setData(parsedData);
52+
}, []);
7253

73-
init() {
74-
75-
}
76-
77-
componentDidMount() {
78-
79-
}
80-
81-
render() {
82-
return (
83-
<div>
84-
<Chart id="chart"
85-
caption={this.caption}
86-
description={this.description}
87-
showLegend={this.showLegend}
88-
padding={this.padding}
89-
titlePadding={this.titlePadding}
90-
dataSource={this.dataSource}
91-
xAxis={this.xAxis}
92-
valueAxis={this.valueAxis}
93-
colorScheme={this.colorScheme}
94-
seriesGroups={this.seriesGroups}></Chart>
95-
</div>
96-
);
97-
}
98-
}
54+
const monthFormatter = useMemo(() => new Intl.DateTimeFormat('en', { month: 'short' }), []);
9955

56+
const chartProps = {
57+
caption: 'Web Traffic Analysis',
58+
description: 'Unique monthly site visitors (percentage stacked)',
59+
showLegend: true,
60+
padding: { left: 10, top: 5, right: 10, bottom: 5 },
61+
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
62+
colorScheme: 'scheme32',
63+
xAxis: {
64+
type: 'date',
65+
baseUnit: 'day',
66+
dataField: 'Date',
67+
valuesOnTicks: true,
68+
labels: {
69+
formatFunction: value => value.getDate()
70+
},
71+
gridLines: { visible: false },
72+
toolTipFormatFunction: value =>
73+
`${value.getDate()}-${monthFormatter.format(value)}-${value.getFullYear()}`
74+
},
75+
valueAxis: {
76+
title: { text: 'Daily visitors' },
77+
labels: { horizontalAlignment: 'right' }
78+
},
79+
seriesGroups: [{
80+
type: 'stackedarea100',
81+
series: [
82+
{ dataField: 'SearchNonPaid', displayText: 'Organic Search Traffic' },
83+
{ dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
84+
{ dataField: 'Referral', displayText: 'Referral Traffic' }
85+
]
86+
}]
87+
};
10088

89+
return (
90+
<div>
91+
<Chart id="chart" dataSource={data} {...chartProps} />
92+
</div>
93+
);
94+
};
10195

10296
export default App;

‎demos/chart/100-stacked-column-series/src/App.jsx‎

Lines changed: 54 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,60 @@
11
import 'smart-webcomponents-react/source/styles/smart.default.css';
22
import './App.css';
3-
import React from "react";
4-
import ReactDOM from 'react-dom/client';
3+
import React from 'react';
54
import { Chart } from 'smart-webcomponents-react/chart';
65

7-
class App extends React.Component {
8-
sampleData = [{
9-
Day: 'Monday',
10-
Running: 30,
11-
Swimming: 0,
12-
Cycling: 25
13-
},
14-
{
15-
Day: 'Tuesday',
16-
Running: 25,
17-
Swimming: 25,
18-
Cycling: 0
19-
},
20-
{
21-
Day: 'Wednesday',
22-
Running: 30,
23-
Swimming: 0,
24-
Cycling: 25
25-
},
26-
{
27-
Day: 'Thursday',
28-
Running: 35,
29-
Swimming: 25,
30-
Cycling: 45
31-
},
32-
{
33-
Day: 'Friday',
34-
Running: 0,
35-
Swimming: 20,
36-
Cycling: 25
37-
},
38-
{
39-
Day: 'Saturday',
40-
Running: 30,
41-
Swimming: 0,
42-
Cycling: 30
43-
},
44-
{
45-
Day: 'Sunday',
46-
Running: 60,
47-
Swimming: 45,
48-
Cycling: 0
49-
}
50-
];
51-
52-
caption = 'Fitness & exercise weekly scorecard';
53-
description = 'Time spent in vigorous exercise by activity';
54-
showLegend = true;
55-
padding = {
56-
left: 5,
57-
top: 5,
58-
right: 5,
59-
bottom: 5
60-
};
61-
titlePadding = {
62-
left: 90,
63-
top: 0,
64-
right: 0,
65-
bottom: 10
66-
};
67-
dataSource = this.sampleData;
68-
xAxis = {
69-
dataField: 'Day',
70-
tickMarks: {
71-
visible: true,
72-
unitInterval: 1,
73-
color: '#BCBCBC'
74-
},
75-
gridLines: {
76-
visible: true,
77-
unitInterval: 1,
78-
color: '#BCBCBC'
79-
},
80-
axisSize: 'auto'
81-
};
82-
valueAxis = {
83-
unitInterval: 10,
84-
title: {
85-
text: 'Time in minutes'
86-
},
87-
tickMarks: {
88-
color: '#BCBCBC'
89-
},
90-
gridLines: {
91-
color: '#BCBCBC'
92-
},
93-
labels: {
94-
horizontalAlignment: 'right',
95-
formatSettings: {
96-
sufix: '%'
97-
}
98-
},
99-
};
100-
colorScheme = 'scheme05';
101-
seriesGroups = [{
102-
type: 'stackedcolumn100',
103-
columnsGapPercent: 100,
104-
seriesGapPercent: 5,
105-
series: [{
106-
dataField: 'Running',
107-
displayText: 'Running'
108-
},
109-
{
110-
dataField: 'Swimming',
111-
displayText: 'Swimming'
112-
},
113-
{
114-
dataField: 'Cycling',
115-
displayText: 'Cycling'
116-
}
117-
]
118-
}];
119-
120-
init() {
121-
122-
}
123-
124-
125-
componentDidMount() {
126-
127-
}
128-
129-
render() {
130-
return (
131-
<div>
132-
<Chart id="chart"
133-
caption={this.caption}
134-
description={this.description}
135-
showLegend={this.showLegend}
136-
padding={this.padding}
137-
titlePadding={this.titlePadding}
138-
dataSource={this.dataSource}
139-
xAxis={this.xAxis}
140-
valueAxis={this.valueAxis}
141-
colorScheme={this.colorScheme}
142-
seriesGroups={this.seriesGroups}></Chart>
143-
</div>
144-
);
145-
}
146-
}
147-
148-
6+
const App = () => {
7+
const sampleData = [
8+
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
9+
{ Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
10+
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
11+
{ Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
12+
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
13+
{ Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
14+
{ Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
15+
];
16+
17+
const chartProps = {
18+
caption: 'Fitness & exercise weekly scorecard',
19+
description: 'Time spent in vigorous exercise by activity',
20+
showLegend: true,
21+
padding: { left: 5, top: 5, right: 5, bottom: 5 },
22+
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
23+
dataSource: sampleData,
24+
xAxis: {
25+
dataField: 'Day',
26+
tickMarks: { visible: true, unitInterval: 1, color: '#BCBCBC' },
27+
gridLines: { visible: true, unitInterval: 1, color: '#BCBCBC' },
28+
axisSize: 'auto'
29+
},
30+
valueAxis: {
31+
unitInterval: 10,
32+
title: { text: 'Time in minutes' },
33+
tickMarks: { color: '#BCBCBC' },
34+
gridLines: { color: '#BCBCBC' },
35+
labels: {
36+
horizontalAlignment: 'right',
37+
formatSettings: { suffix: '%' }
38+
}
39+
},
40+
colorScheme: 'scheme05',
41+
seriesGroups: [{
42+
type: 'stackedcolumn100',
43+
columnsGapPercent: 100,
44+
seriesGapPercent: 5,
45+
series: [
46+
{ dataField: 'Running', displayText: 'Running' },
47+
{ dataField: 'Swimming', displayText: 'Swimming' },
48+
{ dataField: 'Cycling', displayText: 'Cycling' }
49+
]
50+
}]
51+
};
52+
53+
return (
54+
<div>
55+
<Chart id="chart" {...chartProps} />
56+
</div>
57+
);
58+
};
14959

15060
export default App;

0 commit comments

Comments
 (0)