Skip to content

Commit 53fb42e

Browse files
dmt0dmt0
authored
Merge pull request #536 from plotly/move-transforms-to=main
Move group and filter transforms to main
2 parents c101d54 + 97ea7b4 commit 53fb42e

File tree

12 files changed

+177
-322
lines changed

12 files changed

+177
-322
lines changed

‎dev/App.js‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import brace from 'brace'; // eslint-disable-line no-unused-vars
77
import AceEditor from 'react-ace';
88
import Select from 'react-select';
99
import PlotlyEditor, {DefaultEditor, Panel} from '../src';
10-
import GraphTransformsPanel from '../src/default_panels/GraphTransformsPanelDev';
1110
import Inspector from 'react-inspector';
1211
import tips from './tips';
1312
import 'brace/mode/json';
@@ -43,38 +42,38 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
4342
const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
4443

4544
const traceTypesConfig = {
46-
traces: _ => ([
47-
{
48-
value: 'scattergl',
49-
icon: 'scatter',
50-
label: _('Scatter'),
51-
},
52-
{
53-
value: 'bar',
54-
label: _('Bar'),
55-
},
56-
{
57-
value: 'histogram',
58-
label: _('Histogram'),
59-
},
60-
{
61-
value: 'table',
62-
label: _('Table'),
63-
},
64-
{
65-
value: 'pie',
66-
label: _('Pie'),
67-
},
68-
{
69-
value: 'box',
70-
label: _('Box'),
71-
},
72-
{
73-
value: 'histogram2d',
74-
label: _('Histogram 2D'),
75-
},
76-
]),
77-
complex: true
45+
traces: _ => [
46+
{
47+
value: 'scattergl',
48+
icon: 'scatter',
49+
label: _('Scatter'),
50+
},
51+
{
52+
value: 'bar',
53+
label: _('Bar'),
54+
},
55+
{
56+
value: 'histogram',
57+
label: _('Histogram'),
58+
},
59+
{
60+
value: 'table',
61+
label: _('Table'),
62+
},
63+
{
64+
value: 'pie',
65+
label: _('Pie'),
66+
},
67+
{
68+
value: 'box',
69+
label: _('Box'),
70+
},
71+
{
72+
value: 'histogram2d',
73+
label: _('Histogram 2D'),
74+
},
75+
],
76+
complex: true,
7877
};
7978

8079
class App extends Component {
@@ -160,7 +159,6 @@ class App extends Component {
160159
// makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
161160
>
162161
<DefaultEditor>
163-
<GraphTransformsPanel group="Dev" name="Transforms" />
164162
<Panel group="Dev" name="JSON">
165163
<div className="mocks">
166164
<Select

‎dev/mocks.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
[
22
"/mocks/aggregate.json",
33
"/percy/panelTest.json",
4+
"/percy/histogram.json",
5+
"/percy/histogram2d.json",
46
"0.json",
57
"1.json",
68
"10.json",

‎dev/percy/histogram.json‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,9 @@
77
"x": [
88
1,
99
2,
10-
3,
11-
4,
12-
5,
13-
6
10+
3
1411
],
15-
"xsrc": "ints",
12+
"xsrc": "x1",
1613
"autobinx": true,
1714
"xbins": {
1815
"start": -0.5,
@@ -21,13 +18,10 @@
2118
},
2219
"y": [
2320
2,
24-
1,
2521
3,
26-
5,
27-
4,
28-
6
22+
4
2923
],
30-
"ysrc": "jagged ints",
24+
"ysrc": "y1",
3125
"error_x": {
3226
"visible": true,
3327
"symmetric": true

‎dev/percy/histogram2d.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
2,
1010
3
1111
],
12-
"xsrc": "ints",
12+
"xsrc": "x1",
1313
"y": [
14-
1,
1514
2,
16-
3
15+
3,
16+
4
1717
],
18-
"ysrc": "ints",
18+
"ysrc": "y1",
1919
"autobinx": false,
2020
"xbins": {
2121
"start": 0.5,

‎dev/percy/panelTest.json‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"transforms": [
1717
{
1818
"type": "aggregate",
19+
"enabled": true,
1920
"groups": [
2021
1,
2122
2,
@@ -101,7 +102,26 @@
101102
"color": "#1f77b4",
102103
"thickness": 2,
103104
"width": 4
104-
}
105+
},
106+
"transforms": [
107+
{
108+
"type": "groupby",
109+
"groupssrc": "ints",
110+
"groups": [],
111+
"enabled": true
112+
},
113+
{
114+
"enabled": true,
115+
"type": "filter",
116+
"target": "x",
117+
"targetsrc": "ints",
118+
"operation": "[]",
119+
"value": [
120+
"0",
121+
"1"
122+
]
123+
}
124+
]
105125
}
106126
],
107127
"layout": {

‎src/__percy__/panels.percy.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from 'react';
2-
import {TestEditor, plotly, setupGraphDiv} from 'lib/test-utils';
1+
import {TestEditor, setupGraphDiv, fixtures, plotly} from 'lib/test-utils';
32

43
import {PanelMenuWrapper} from '../components';
54

@@ -19,10 +18,25 @@ const panelsToTest = {
1918
histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
2019
};
2120

22-
const panelFixture = (Panel, group, name, data) => {
21+
window.URL.createObjectURL = function() {
22+
return null;
23+
};
24+
25+
const panelFixture = (Panel, group, name, figure) => {
26+
const gd = setupGraphDiv(figure);
27+
gd._context = plotly.setPlotConfig();
28+
gd._context.setBackground = () => {
29+
return null;
30+
};
31+
2332
return (
2433
<div className="plotly_editor">
25-
<TestEditor plotly={plotly} graphDiv={setupGraphDiv(data)}>
34+
<TestEditor
35+
plotly={plotly}
36+
graphDiv={gd}
37+
dataSources={fixtures.scatter().dataSources}
38+
dataSourceOptions={fixtures.scatter().dataSourceOptions}
39+
>
2640
<PanelMenuWrapper>
2741
<Panel group={group} name={name} />
2842
</PanelMenuWrapper>

‎src/components/containers/TransformAccordion.js‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ class TransformAccordion extends Component {
1414
fullContainer,
1515
fullContainer: {transforms = []},
1616
localize: _,
17+
container,
18+
dataSourceOptions,
1719
} = this.context;
1820
const {children} = this.props;
1921

@@ -23,7 +25,9 @@ class TransformAccordion extends Component {
2325
{label: _('Aggregate'), type: 'aggregate'},
2426
];
2527

26-
if (['scatter', 'bar', 'scattergl'].indexOf(fullContainer.type) === -1) {
28+
const transformableCharts = ['scatter', 'bar', 'scattergl'];
29+
30+
if (!transformableCharts.includes(fullContainer.type)) {
2731
return (
2832
<FoldEmpty
2933
icon={PlotScatterIcon}
@@ -32,39 +36,70 @@ class TransformAccordion extends Component {
3236
);
3337
}
3438

39+
const transformBy =
40+
container.transforms &&
41+
container.transforms.map(tr => {
42+
let foldNameSuffix = '';
43+
if (tr.groupssrc) {
44+
const groupssrc =
45+
dataSourceOptions &&
46+
dataSourceOptions.find(d => d.value === tr.groupssrc);
47+
foldNameSuffix = `: ${
48+
groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc
49+
}`;
50+
} else if (tr.targetsrc) {
51+
const targetsrc =
52+
dataSourceOptions &&
53+
dataSourceOptions.find(d => d.value === tr.targetsrc);
54+
foldNameSuffix = `: ${
55+
targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc
56+
}`;
57+
}
58+
return foldNameSuffix;
59+
});
60+
3561
const filteredTransforms = transforms.filter(({type}) => Boolean(type));
3662
const content =
3763
filteredTransforms.length &&
3864
filteredTransforms.map((tr, i) => (
3965
<TransformFold
4066
key={i}
4167
transformIndex={i}
42-
name={transformTypes.filter(({type}) => type === tr.type)[0].label}
68+
name={`${
69+
transformTypes.filter(({type}) => type === tr.type)[0].label
70+
}${transformBy[i]}`}
4371
canDelete={true}
4472
>
4573
{children}
4674
</TransformFold>
4775
));
4876

49-
const handlers = transformTypes.map(({label, type}) => {
50-
return {
51-
label,
52-
handler: context => {
53-
const {fullContainer, updateContainer} = context;
54-
if (updateContainer) {
55-
const transformIndex = Array.isArray(fullContainer.transforms)
56-
? fullContainer.transforms.length
57-
: 0;
58-
const key = `transforms[${transformIndex}]`;
59-
updateContainer({[key]: {type}});
60-
}
61-
},
62-
};
63-
});
64-
6577
const addAction = {
66-
label: _('Aggregation'),
67-
handler: handlers[2].handler,
78+
label: _('Transform'),
79+
handler: transformTypes.map(({label, type}) => {
80+
return {
81+
label,
82+
handler: context => {
83+
const {fullContainer, updateContainer} = context;
84+
if (updateContainer) {
85+
const transformIndex = Array.isArray(fullContainer.transforms)
86+
? fullContainer.transforms.length
87+
: 0;
88+
const key = `transforms[${transformIndex}]`;
89+
90+
const payload = {type};
91+
const firstDataSource = dataSourceOptions[0].value;
92+
if (type === 'filter') {
93+
payload.targetsrc = firstDataSource;
94+
} else {
95+
payload.groupssrc = firstDataSource;
96+
}
97+
98+
updateContainer({[key]: payload});
99+
}
100+
},
101+
};
102+
}),
68103
};
69104

70105
return (
@@ -78,6 +113,8 @@ class TransformAccordion extends Component {
78113
TransformAccordion.contextTypes = {
79114
fullContainer: PropTypes.object,
80115
localize: PropTypes.func,
116+
container: PropTypes.object,
117+
dataSourceOptions: PropTypes.array,
81118
};
82119

83120
TransformAccordion.propTypes = {

0 commit comments

Comments
 (0)