Skip to content

Commit 03e69a9

Browse files
bpostlethwaitebpostlethwaite
authored
Merge pull request #47 from plotly/TestSectionVisibility
Test section visibility
2 parents 6deb3b3 + 4b6346e commit 03e69a9

File tree

130 files changed

+2800
-7949
lines changed

Some content is hidden

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

130 files changed

+2800
-7949
lines changed

‎README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,28 @@ To build the dist version:
2727
$ npm run prepublish
2828
```
2929

30+
## Developer notes
31+
A PlotlyEditor widgets is composed of 3 layers:
32+
33+
### Layer 1: Base Component
34+
```
35+
<PlotlyEditor>
36+
```
37+
38+
### Layer 2: Container Components:
39+
One or more nested Container Components with one and only one connected by a connect<Container>ToPlot function (connectLayoutToPlot, connectTraceToPlot).
40+
```
41+
<Panel>, <Section>, <Fold>
42+
```
43+
44+
### Layer 3: Attribute Widgets
45+
Each connected by a `connectContainerToPlot` function
46+
<Numeric>, <ColorPicker>, <Radio> and remaining UI Controls
47+
```
48+
49+
Data flows via `context` downward and is augmented with additional information at each layer boundary.
50+
The Base Components aggregate references to the graphDiv objects (data, fullData, layout...), grid Data sources, locale, update functions etc. One of the Container Components uses its knowledge about which container to target (traces, layout, ...) to generate fewer but more specific containers and updaters which are passed down the hierarchy. The Attribute widgets are higher-order wrappers around dumb UI controls. The higher-order wrapper uses the container contexts and specific attributes information to provide specific plot update functions and other behaviours for the inner UI control.
51+
3052
## See also
3153
3254
- [plotlyjs-react](https://github.com/plotly/plotlyjs-react)

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,9 @@
7676
"dependencies": {
7777
"fast-isnumeric": "^1.1.1",
7878
"object-assign": "^4.1.1",
79+
"plotly.js": "^1.31.0",
7980
"prop-types": "^15.5.10",
8081
"react-color": "^2.13.8",
81-
"tinycolor2": "^1.4.1",
82-
"plotly.js": "^1.31.0"
82+
"tinycolor2": "^1.4.1"
8383
}
8484
}

‎src/DefaultEditor.js

Lines changed: 155 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
1-
import ColorPicker from './components/Color';
2-
import Dropdown from './components/Dropdown';
3-
import DataSelector from './components/DataSelector';
4-
import TraceSelector from './components/TraceSelector';
5-
import Flaglist from './components/Flaglist';
6-
import Numeric from './components/Numeric';
7-
import Panel from './components/Panel';
8-
import PanelMenuWrapper from './components/PanelMenuWrapper';
9-
import PropTypes from 'prop-types';
10-
import Radio from './components/Radio';
111
import React, {Component} from 'react';
12-
import Section from './components/Section';
13-
import TraceAccordion from './components/TraceAccordion';
14-
import {localize} from './lib';
2+
import PropTypes from 'prop-types';
3+
import {
4+
SubPanel,
5+
ColorPicker,
6+
DataSelector,
7+
Dropdown,
8+
Flaglist,
9+
Fold,
10+
Info,
11+
Numeric,
12+
Panel,
13+
PanelMenuWrapper,
14+
Radio,
15+
Section,
16+
TraceAccordion,
17+
TraceSelector,
18+
} from './components';
19+
import {DEFAULT_FONTS} from './constants';
20+
import {localize, connectLayoutToPlot} from './lib';
21+
22+
const LayoutPanel = connectLayoutToPlot(Panel);
1523

1624
class DefaultEditor extends Component {
1725
constructor(props, context) {
1826
super(props, context);
1927

2028
const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
21-
const traceTypes = Object.keys(context.plotSchema.traces);
29+
30+
// Filter out Polar "area" type (it is fairly broken and we want to present
31+
// scatter with fill as an "area" chart type for convenience.
32+
const traceTypes = Object.keys(context.plotSchema.traces).filter(
33+
t => t !== 'area'
34+
);
35+
2236
const labels = traceTypes.map(capitalize);
2337
this.traceOptions = traceTypes.map((t, i) => ({
2438
label: labels[i],
@@ -39,7 +53,7 @@ class DefaultEditor extends Component {
3953

4054
return (
4155
<PanelMenuWrapper>
42-
<Panel section="Graph" name="Create">
56+
<Panel group="Graph" name="Create">
4357
<TraceAccordion canAdd>
4458
<TraceSelector
4559
label="Plot Type"
@@ -91,19 +105,13 @@ class DefaultEditor extends Component {
91105
</TraceAccordion>
92106
</Panel>
93107

94-
<Panel section="Style" name="Traces">
108+
<Panel group="Style" name="Traces">
95109
<TraceAccordion>
96-
<Section heading={_('Trace')}>
97-
<Numeric
98-
label={_('Opacity')}
99-
min={0}
100-
max={1}
101-
step={0.1}
102-
attr="opacity"
103-
/>
110+
<Section name={_('Trace')}>
111+
<Numeric label={_('Opacity')} step={0.1} attr="opacity" />
104112
</Section>
105113

106-
<Section heading={_('Display')}>
114+
<Section name={_('Display')}>
107115
<Flaglist
108116
attr="mode"
109117
options={[
@@ -113,7 +121,7 @@ class DefaultEditor extends Component {
113121
/>
114122
</Section>
115123

116-
<Section heading={_('Filled Area')}>
124+
<Section name={_('Filled Area')}>
117125
<Dropdown
118126
label="Fill to"
119127
attr="fill"
@@ -130,47 +138,150 @@ class DefaultEditor extends Component {
130138
<ColorPicker label={_('Color')} attr="fillcolor" />
131139
</Section>
132140

133-
<Section heading={_('Points')}>
141+
<Section name={_('Points')}>
134142
<Numeric
135143
label={_('Marker Opacity')}
136-
min={0}
137-
max={1}
138144
step={0.1}
139145
attr="marker.opacity"
140146
/>
141147

142148
<ColorPicker label={_('Marker Color')} attr="marker.color" />
143149

144-
<Numeric label={_('Size')} min={0} attr="marker.size" />
150+
<Numeric label={_('Size')} attr="marker.size" />
145151

146-
<Numeric
147-
label={_('Line width')}
148-
min={0}
149-
attr="marker.line.width"
150-
/>
152+
<Numeric label={_('Line width')} attr="marker.line.width" />
151153
</Section>
152154

153-
<Section heading={_('Lines')}>
154-
<Numeric
155-
label={_('Width')}
156-
min={0}
157-
step={1.0}
158-
attr="line.width"
159-
/>
155+
<Section name={_('Lines')}>
156+
<Numeric label={_('Width')} step={1.0} attr="line.width" />
160157

161158
<ColorPicker label={_('Line color')} attr="line.color" />
162159

163160
<Radio
164161
label={_('Connect Gaps')}
165162
attr="connectgaps"
166163
options={[
167-
{value: true, label: 'Connect'},
168-
{value: false, label: 'Blank'},
164+
{label: _('Connect'), value: true},
165+
{label: _('Blank'), value: false},
169166
]}
170167
/>
171168
</Section>
172169
</TraceAccordion>
173170
</Panel>
171+
172+
<LayoutPanel group="Style" name={_('Layout')}>
173+
<Fold name={_('Canvas')}>
174+
<Numeric
175+
label={_('Fixed Width')}
176+
step={1}
177+
attr="width"
178+
postfix="px"
179+
/>
180+
</Fold>
181+
</LayoutPanel>
182+
183+
<LayoutPanel group="Style" name={_('Legend')}>
184+
<Fold hideHeader>
185+
<Section name={_('Legend')}>
186+
<Radio
187+
attr="showlegend"
188+
options={[
189+
{label: _('Show'), value: true},
190+
{label: _('Hide'), value: false},
191+
]}
192+
/>
193+
</Section>
194+
<Section name={_('Text')}>
195+
<Dropdown
196+
label={_('Typeface')}
197+
attr="legend.font.family"
198+
clearable={false}
199+
options={[...DEFAULT_FONTS]}
200+
/>
201+
<Numeric
202+
label={_('Size')}
203+
step={1}
204+
attr="legend.font.size"
205+
postfix="px"
206+
/>
207+
<ColorPicker label={_('Color')} attr="legend.font.color" />
208+
</Section>
209+
<Section name={_('Legend Box')}>
210+
<Numeric
211+
label={_('Border Width')}
212+
step={1}
213+
attr="legend.borderwidth"
214+
postfix="px"
215+
/>
216+
<ColorPicker
217+
label={_('Border Color')}
218+
attr="legend.bordercolor"
219+
/>
220+
<ColorPicker
221+
label={_('Background Color')}
222+
attr="legend.bgcolor"
223+
/>
224+
</Section>
225+
<Section name={_('Positioning')}>
226+
<SubPanel>
227+
<Section name={_('Anchor Point')}>
228+
<Info>
229+
{_(
230+
'The positioning inputs are relative to the ' +
231+
'anchor points on the text box'
232+
)}
233+
</Info>
234+
<Radio
235+
attr="legend.xanchor"
236+
options={[
237+
{label: _('Left'), value: 'left'},
238+
{label: _('Center'), value: 'center'},
239+
{label: _('Right'), value: 'right'},
240+
]}
241+
/>
242+
<Radio
243+
attr="legend.yanchor"
244+
options={[
245+
{label: _('Top'), value: 'top'},
246+
{label: _('Middle'), value: 'middle'},
247+
{label: _('Bottom'), value: 'bottom'},
248+
]}
249+
/>
250+
</Section>
251+
</SubPanel>
252+
<Numeric
253+
label={_('X Position')}
254+
step={0.01}
255+
attr="legend.x"
256+
postfix="px"
257+
/>
258+
<Numeric
259+
label={_('Y Position')}
260+
step={0.01}
261+
attr="legend.y"
262+
postfix="px"
263+
/>
264+
</Section>
265+
<Section name={_('Orientation')}>
266+
<Radio
267+
attr="legend.orientation"
268+
options={[
269+
{label: _('Vertical'), value: 'v'},
270+
{label: _('Horizontal'), value: 'h'},
271+
]}
272+
/>
273+
</Section>
274+
<Section name={_('Trace Order')}>
275+
<Radio
276+
attr="legend.traceorder"
277+
options={[
278+
{label: _('Normal'), value: 'normal'},
279+
{label: _('Reversed'), value: 'reversed'},
280+
]}
281+
/>
282+
</Section>
283+
</Fold>
284+
</LayoutPanel>
174285
</PanelMenuWrapper>
175286
);
176287
}

0 commit comments

Comments
 (0)