Skip to content

Commit 2ece31c

Browse files
Sorokin-OlegSorokin-Oleg
committed
[dev] Fixed Pivot samples.
1 parent 98c0a2a commit 2ece31c

23 files changed

+356
-18737
lines changed

‎.storybook/preview.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@
77

88
# DHTMLX Pivot + React
99

10+
### Development server
11+
12+
To run the app in the development mode, run `npm storybook` in the project directory.
13+
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
14+
15+
## Useful links
16+
17+
- [Online documentation](https://docs.dhtmlx.com/pivot/index.html)
18+
- [Support forum](https://forum.dhtmlx.com/c/widgets/pivot)
19+
1020
## Follow us
1121

1222
Star our GitHub repo :star:

‎package-lock.json‎

Lines changed: 0 additions & 18157 deletions
This file was deleted.

‎package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
{
22
"name": "react-pivot-demo",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"homepage": "https://github.com/DHTMLX/react-pivot-demo",
55
"private": true,
66
"dependencies": {
77
"@mdi/font": "^5.3.45",
8-
"@testing-library/jest-dom": "^4.2.4",
9-
"@testing-library/react": "^9.5.0",
10-
"@testing-library/user-event": "^7.2.1",
118
"from-cdn": "^1.0.1",
129
"gh-pages": "^3.1.0",
1310
"prettier": "^2.0.5",

‎src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/App.test.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/components/pivot/PivotCustomFormattingCdn.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,30 @@ import data from "../../dataset.json";
55
const fields = {
66
rows: ["form", "name"],
77
columns: ["year"],
8-
values: [{id: "oil", method: "count"}, {id: "gdp", method: "sum"}],
8+
values: [
9+
{ id: "oil", method: "count" },
10+
{ id: "gdp", method: "sum" },
11+
],
912
};
1013

1114
const fieldList = [
12-
{id: "name", label: "Name"},
13-
{id: "year", label: "Year"},
14-
{id: "continent", label: "Continent"},
15-
{id: "form", label: "Form"},
15+
{ id: "name", label: "Name" },
16+
{ id: "year", label: "Year" },
17+
{ id: "continent", label: "Continent" },
18+
{ id: "form", label: "Form" },
1619
{
17-
id: "gdp", label: "GDP", cellTemplate: function(val) {
20+
id: "gdp",
21+
label: "GDP",
22+
cellTemplate: function (val) {
1823
return "€ " + val;
1924
},
2025
},
21-
{id: "oil", label: "Oil"},
22-
{id: "balance", label: "Balance" },
23-
{id: "when", label: "When", type: "date", format: "%d/%m/%Y"},
26+
{ id: "oil", label: "Oil" },
27+
{ id: "balance", label: "Balance" },
28+
{ id: "when", label: "When", type: "date", format: "%d/%m/%Y" },
2429
];
2530

26-
const customFormat = function(cellValue, method) {
31+
const customFormat = function (cellValue, method) {
2732
if (method === "count") {
2833
return cellValue;
2934
}
@@ -38,10 +43,7 @@ class PivotCustomFormattingCdn extends Component {
3843
constructor(props) {
3944
super(props);
4045

41-
this.ready = fromCDN([
42-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js",
43-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css",
44-
]);
46+
this.ready = fromCDN(["https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js", "https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css"]);
4547
}
4648

4749
componentDidMount() {
@@ -52,7 +54,7 @@ class PivotCustomFormattingCdn extends Component {
5254
fields,
5355
fieldList,
5456
customFormat,
55-
layout
57+
layout,
5658
});
5759
});
5860
}
@@ -62,9 +64,7 @@ class PivotCustomFormattingCdn extends Component {
6264
}
6365

6466
render() {
65-
return (
66-
<div className="dhx_sample-container__widget" id="pivot"></div>
67-
);
67+
return <div className="dhx_sample-container__widget" id="pivot"></div>;
6868
}
6969
}
7070

‎src/components/pivot/PivotCustomMarkCdn.js‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import data from "../../dataset.json";
44

55
const fields = {
66
rows: ["form", "year"],
7-
columns: [{"id": "when", "group": "dateByQuarter"}],
8-
values: [{id: "oil", method: "max"}, {id: "oil", method: "min"}],
7+
columns: [{ id: "when", group: "dateByQuarter" }],
8+
values: [
9+
{ id: "oil", method: "max" },
10+
{ id: "oil", method: "min" },
11+
],
912
};
1013

11-
const mark = function(cell, columnData, row, column) {
14+
const mark = function (cell, columnData, _row, column) {
1215
if (column.method === "max") {
1316
var max = Math.max.apply(null, columnData);
1417
if (max === parseFloat(cell)) {
@@ -23,24 +26,21 @@ const mark = function(cell, columnData, row, column) {
2326
};
2427

2528
const fieldList = [
26-
{id: "name", label: "Name"},
27-
{id: "year", label: "Year"},
28-
{id: "continent", label: "Continent"},
29-
{id: "form", label: "Form"},
30-
{id: "gdp", label: "GDP"},
31-
{id: "oil", label: "Oil"},
32-
{id: "balance", label: "Balance"},
33-
{id: "when", label: "When", type: "date", format: "%d/%m/%Y"},
29+
{ id: "name", label: "Name" },
30+
{ id: "year", label: "Year" },
31+
{ id: "continent", label: "Continent" },
32+
{ id: "form", label: "Form" },
33+
{ id: "gdp", label: "GDP" },
34+
{ id: "oil", label: "Oil" },
35+
{ id: "balance", label: "Balance" },
36+
{ id: "when", label: "When", type: "date", format: "%d/%m/%Y" },
3437
];
3538

3639
class PivotCustomMarkCdn extends Component {
3740
constructor(props) {
3841
super(props);
3942

40-
this.ready = fromCDN([
41-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js",
42-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css",
43-
]);
43+
this.ready = fromCDN(["https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js", "https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css"]);
4444
}
4545

4646
componentDidMount() {
@@ -50,7 +50,7 @@ class PivotCustomMarkCdn extends Component {
5050
data,
5151
fields,
5252
fieldList,
53-
mark
53+
mark,
5454
});
5555
});
5656
}
@@ -60,9 +60,7 @@ class PivotCustomMarkCdn extends Component {
6060
}
6161

6262
render() {
63-
return (
64-
<div className="dhx_sample-container__widget custom_mark" id="pivot"></div>
65-
);
63+
return <div className="dhx_sample-container__widget" id="pivot"></div>;
6664
}
6765
}
6866

‎src/components/pivot/PivotEventsCdn.js‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,21 @@ import data from "../../dataset.json";
55
const fields = {
66
rows: ["form", "name"],
77
columns: ["year"],
8-
values: [{id: "oil", method: "count"}, {id: "oil", method: "sum"}],
8+
values: [
9+
{ id: "oil", method: "count" },
10+
{ id: "oil", method: "sum" },
11+
],
912
};
1013

1114
const fieldList = [
12-
{id: "name", label: "Name"},
13-
{id: "year", label: "Year"},
14-
{id: "continent", label: "Continent"},
15-
{id: "form", label: "Form"},
16-
{id: "gdp", label: "GDP"},
17-
{id: "oil", label: "Oil"},
18-
{id: "balance", label: "Balance"},
19-
{id: "when", label: "When", type: "date", format: "%d/%m/%Y"},
15+
{ id: "name", label: "Name" },
16+
{ id: "year", label: "Year" },
17+
{ id: "continent", label: "Continent" },
18+
{ id: "form", label: "Form" },
19+
{ id: "gdp", label: "GDP" },
20+
{ id: "oil", label: "Oil" },
21+
{ id: "balance", label: "Balance" },
22+
{ id: "when", label: "When", type: "date", format: "%d/%m/%Y" },
2023
];
2124

2225
const layout = {
@@ -30,13 +33,10 @@ class PivotEventsCdn extends Component {
3033
super(props);
3134
this.state = {
3235
isEmpty: true,
33-
events: []
34-
};
36+
events: [],
37+
};
3538

36-
this.ready = fromCDN([
37-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js",
38-
"https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css",
39-
]);
39+
this.ready = fromCDN(["https://cdn.dhtmlx.com/pivot/pro/edge/pivot.js", "https://cdn.dhtmlx.com/pivot/pro/edge/pivot.css"]);
4040
}
4141

4242
componentDidMount() {
@@ -46,11 +46,11 @@ class PivotEventsCdn extends Component {
4646
data,
4747
fields,
4848
fieldList,
49-
layout
49+
layout,
5050
});
5151

5252
this.pivot.events.on("fieldClick", (e, id, type) => {
53-
const event = [{id: Math.random(), name: "fieldClick", value: `${JSON.stringify(e)}, ${id}, ${type}`}];
53+
const event = [{ id: Math.random(), name: "fieldClick", value: `${JSON.stringify(e)}, ${id}, ${type}` }];
5454
this.setState(state => {
5555
const events = state.events.concat(event);
5656
return {
@@ -60,7 +60,7 @@ class PivotEventsCdn extends Component {
6060
});
6161
});
6262
this.pivot.events.on("applyButtonClick", () => {
63-
const event = [{id: Math.random(), name: "applyButtonClick", value: ""}];
63+
const event = [{ id: Math.random(), name: "applyButtonClick", value: "" }];
6464
this.setState(state => {
6565
const events = state.events.concat(event);
6666
return {
@@ -70,7 +70,7 @@ class PivotEventsCdn extends Component {
7070
});
7171
});
7272
this.pivot.events.on("change", () => {
73-
const event = [{id: Math.random(), name: "change", value: ""}];
73+
const event = [{ id: Math.random(), name: "change", value: "" }];
7474
this.setState(state => {
7575
const events = state.events.concat(event);
7676
return {
@@ -80,7 +80,7 @@ class PivotEventsCdn extends Component {
8080
});
8181
});
8282
this.pivot.events.on("filterApply", (field, settings) => {
83-
const event = [{id: Math.random(), name: "filterApply", value: `${field}, ${JSON.stringify(settings)}`}];
83+
const event = [{ id: Math.random(), name: "filterApply", value: `${field}, ${JSON.stringify(settings)}` }];
8484
this.setState(state => {
8585
const events = state.events.concat(event);
8686
return {
@@ -99,28 +99,36 @@ class PivotEventsCdn extends Component {
9999
clearAll() {
100100
this.setState(state => ({
101101
events: [],
102-
isEmpty: true
102+
isEmpty: true,
103103
}));
104104
}
105105

106106
render() {
107107
const isEmpty = this.state.isEmpty;
108108
return (
109-
<div className="dhx-container_inner events">
110-
<div className="dhx_sample-container__widget" id="pivot"></div>
111-
<div className="dhx_sample-container__sidebar">
112-
<div className="events-list--element" style={isEmpty ? {} : { display: "none" }}>
113-
No events yet
114-
</div>
115-
<div className="events-list--element dhx_sample-event" style={isEmpty ? { display: "none" } : {}}>
116-
{this.state.events.map(item => (
117-
<p key={item.id}>{item.name}: {item.value}</p>
118-
))}
119-
</div>
120-
</div>
109+
<div className="dhx-container_inner">
121110
<section className="dhx_sample-controls">
122-
<button className="dhx_sample-btn dhx_sample-btn--flat" onClick={() => this.clearAll()}>Clear events</button>
111+
<button className="dhx_sample-btn dhx_sample-btn--flat" onClick={() => this.clearAll()}>
112+
Clear events
113+
</button>
123114
</section>
115+
<div className="dhx-events">
116+
<div className="dhx_sample-container__widget" id="pivot"></div>
117+
<div className="dhx_sample-container__sidebar">
118+
<div className="events-list--element" style={isEmpty ? {} : { display: "none" }}>
119+
No events yet
120+
</div>
121+
<div className="events-list events-list-wrapper" style={isEmpty ? { display: "none" } : {}}>
122+
{this.state.events.reverse().map(item => (
123+
<div className="events-list--element" style={isEmpty ? { display: "none" } : {}}>
124+
<p key={item.id}>
125+
{item.name}: {item.value}
126+
</p>
127+
</div>
128+
))}
129+
</div>
130+
</div>
131+
</div>
124132
</div>
125133
);
126134
}

0 commit comments

Comments
 (0)