Skip to content

Commit f633d09

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #728 from plotly/tweaksn
Helpful text
2 parents e8d90c6 + 68084be commit f633d09

File tree

8 files changed

+161
-33
lines changed

8 files changed

+161
-33
lines changed

‎src/DefaultEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ class DefaultEditor extends Component {
7676
{this.hasTransforms() && (
7777
<GraphTransformsPanel group={_('Structure')} name={_('Transforms')} />
7878
)}
79+
<StyleLayoutPanel group={_('Style')} name={_('General')} />
7980
<StyleTracesPanel group={_('Style')} name={_('Traces')} />
80-
<StyleLayoutPanel group={_('Style')} name={_('Layout')} />
8181
{this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
8282
<StyleLegendPanel group={_('Style')} name={_('Legend')} />
8383
{this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}

‎src/components/containers/AnnotationAccordion.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,21 @@ class AnnotationAccordion extends Component {
4343

4444
return (
4545
<TraceRequiredPanel addAction={canAdd ? addAction : null}>
46-
{content ? content : null}
46+
{content ? (
47+
content
48+
) : (
49+
<div className="panel__empty__message">
50+
<div className="panel__empty__message__heading">{_('Call out your data.')}</div>
51+
<div className="panel__empty__message__content">
52+
<p>
53+
{_(
54+
'Annotations are text and arrows you can use to point out specific parts of your figure.'
55+
)}
56+
</p>
57+
<p>{_('Click on the + button above to add an annotation.')}</p>
58+
</div>
59+
</div>
60+
)}
4761
</TraceRequiredPanel>
4862
);
4963
}

‎src/components/containers/ImageAccordion.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,21 @@ class ImageAccordion extends Component {
4949

5050
return (
5151
<TraceRequiredPanel addAction={canAdd ? addAction : null}>
52-
{content ? content : null}
52+
{content ? (
53+
content
54+
) : (
55+
<div className="panel__empty__message">
56+
<div className="panel__empty__message__heading">{_('Logos, watermarks and more.')}</div>
57+
<div className="panel__empty__message__content">
58+
<p>
59+
{_(
60+
'Embed images in your figure to make the data more readable or to brand your content.'
61+
)}
62+
</p>
63+
<p>{_('Click on the + button above to add an image.')}</p>
64+
</div>
65+
</div>
66+
)}
5367
</TraceRequiredPanel>
5468
);
5569
}

‎src/components/containers/ShapeAccordion.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,23 @@ class ShapeAccordion extends Component {
4949

5050
return (
5151
<TraceRequiredPanel addAction={canAdd ? addAction : null}>
52-
{content ? content : null}
52+
{content ? (
53+
content
54+
) : (
55+
<div className="panel__empty__message">
56+
<div className="panel__empty__message__heading">
57+
{_('Lines, Rectangles and Ellipses.')}
58+
</div>
59+
<div className="panel__empty__message__content">
60+
<p>
61+
{_(
62+
'Add shapes to a figure to highlight points or periods in time, thresholds, or areas of interest.'
63+
)}
64+
</p>
65+
<p>{_('Click on the + button above to add a shape.')}</p>
66+
</div>
67+
</div>
68+
)}
5369
</TraceRequiredPanel>
5470
);
5571
}

‎src/components/containers/TraceAccordion.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,31 @@ class TraceAccordion extends Component {
110110
}
111111
},
112112
};
113-
114-
return <PlotlyPanel addAction={addAction}>{this.renderTraceFolds()}</PlotlyPanel>;
113+
const content = this.renderTraceFolds();
114+
return (
115+
<PlotlyPanel addAction={addAction}>
116+
{content.length ? (
117+
content
118+
) : (
119+
<div className="panel__empty__message">
120+
<div className="panel__empty__message__heading">Trace your data.</div>
121+
<div className="panel__empty__message__content">
122+
<p>
123+
{_(
124+
'Traces of various types like bar and line are the building blocks of your figure.'
125+
)}
126+
</p>
127+
<p>
128+
{_(
129+
'You can add as many as you like, mixing and matching types and arranging them into subplots.'
130+
)}
131+
</p>
132+
<p>{_('Click on the + button above to add a trace.')}</p>
133+
</div>
134+
</div>
135+
)}
136+
</PlotlyPanel>
137+
);
115138
}
116139

117140
if (canGroup) {

‎src/components/containers/TransformAccordion.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,43 @@ class TransformAccordion extends Component {
9494
}),
9595
};
9696

97-
return <PlotlyPanel addAction={addAction}>{content ? content : null}</PlotlyPanel>;
97+
return (
98+
<PlotlyPanel addAction={addAction}>
99+
{content ? (
100+
content
101+
) : (
102+
<div className="panel__empty__message" style={{paddingTop: 0}}>
103+
<div className="panel__empty__message__content">
104+
<div style={{textAlign: 'left'}}>
105+
<p>
106+
<strong>{_('Filter')}</strong>{' '}
107+
{_(' transforms allow you to filter data out from a trace.')}
108+
</p>
109+
<p>
110+
<strong>{_('Split')}</strong>{' '}
111+
{_(
112+
' transforms allow you to create multiple traces from one source trace, so as to style them differently.'
113+
)}
114+
</p>
115+
<p>
116+
<strong>{_('Aggregate')}</strong>{' '}
117+
{_(
118+
' transforms allow you to summarize a trace using an aggregate function like "average" or "minimum".'
119+
)}
120+
</p>
121+
<p>
122+
<strong>{_('Sort')}</strong>{' '}
123+
{_(
124+
' transforms allow you to sort a trace, so as to control marker overlay or line connection order.'
125+
)}
126+
</p>
127+
</div>
128+
<p>{_('Click on the + button above to add a transform.')}</p>
129+
</div>
130+
</div>
131+
)}
132+
</PlotlyPanel>
133+
);
98134
}
99135
}
100136

‎src/default_panels/StyleLayoutPanel.js‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,53 +16,78 @@ import {
1616

1717
const StyleLayoutPanel = (props, {localize: _}) => (
1818
<TraceRequiredPanel>
19-
<PlotlyFold name={_('Canvas')}>
20-
<VisibilitySelect
21-
attr="autosize"
22-
label={_('Size')}
23-
options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
24-
showOn={false}
25-
defaultOpt={true}
26-
>
27-
<Numeric label={_('Fixed Width')} attr="width" units="px" />
28-
<Numeric label={_('Fixed height')} attr="height" units="px" />
29-
</VisibilitySelect>
19+
<PlotlyFold name={_('Defaults')}>
3020
<ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
3121
<ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
3222
<ColorwayPicker label={_('Base Colors')} attr="colorway" />
33-
<HovermodeDropdown label={_('Hover Interaction')} attr="hovermode" />
23+
<FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
24+
<Numeric label={_('Font Size')} attr="font.size" units="px" />
25+
<ColorPicker label={_('Font Color')} attr="font.color" />
3426
<Dropdown
35-
label={_('Drag Interaction')}
36-
attr="dragmode"
27+
label={_('Number format')}
28+
attr="separators"
3729
options={[
38-
{label: _('Orbit'), value: 'orbit'},
39-
{label: _('Turntable'), value: 'turntable'},
40-
{label: _('Zoom'), value: 'zoom'},
41-
{label: _('Pan'), value: 'pan'},
30+
{label: _('1,234.56'), value: '.,'},
31+
{label: _('1 234.56'), value: ', '},
32+
{label: _('1 234,56'), value: ', '},
33+
{label: _('1.234,56'), value: ',.'},
4234
]}
4335
clearable={false}
4436
/>
4537
</PlotlyFold>
46-
<PlotlyFold name={_('Title and Fonts')}>
38+
39+
<PlotlyFold name={_('Title')}>
4740
<PlotlySection name={_('Title')} attr="title">
4841
<TextEditor attr="title" />
4942
<FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
5043
<Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
5144
<ColorPicker label={_('Font Color')} attr="titlefont.color" />
5245
</PlotlySection>
53-
<PlotlySection name={_('Global Font')}>
54-
<FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
55-
<Numeric label={_('Font Size')} attr="font.size" units="px" />
56-
<ColorPicker label={_('Font Color')} attr="font.color" />
57-
</PlotlySection>
5846
</PlotlyFold>
59-
<PlotlyFold name={_('Margins and Padding')}>
47+
<PlotlyFold name={_('Layout')}>
48+
<VisibilitySelect
49+
attr="autosize"
50+
label={_('Size')}
51+
options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
52+
showOn={false}
53+
defaultOpt={true}
54+
>
55+
<Numeric label={_('Fixed Width')} attr="width" units="px" />
56+
<Numeric label={_('Fixed height')} attr="height" units="px" />
57+
</VisibilitySelect>
6058
<Numeric label={_('Top')} attr="margin.t" units="px" />
6159
<Numeric label={_('Bottom')} attr="margin.b" units="px" />
6260
<Numeric label={_('Left')} attr="margin.l" units="px" />
6361
<Numeric label={_('Right')} attr="margin.r" units="px" />
6462
<Numeric label={_('Padding')} attr="margin.pad" units="px" />
6563
</PlotlyFold>
64+
<PlotlyFold name={_('Interaction')}>
65+
<HovermodeDropdown label={_('Hover Interaction')} attr="hovermode" />
66+
<Dropdown
67+
label={_('Drag Interaction')}
68+
attr="dragmode"
69+
options={[
70+
{label: _('Zoom'), value: 'zoom'},
71+
{label: _('Select'), value: 'select'},
72+
{label: _('Pan'), value: 'pan'},
73+
{label: _('Lasso'), value: 'lasso'},
74+
{label: _('Orbit'), value: 'orbit'},
75+
{label: _('Turntable'), value: 'turntable'},
76+
]}
77+
clearable={false}
78+
/>
79+
<Dropdown
80+
label={_('Select Direction')}
81+
attr="selectdirection"
82+
options={[
83+
{label: _('Any'), value: 'any'},
84+
{label: _('Horizontal'), value: 'h'},
85+
{label: _('Vertical'), value: 'v'},
86+
{label: _('Diagonal'), value: 'd'},
87+
]}
88+
clearable={false}
89+
/>
90+
</PlotlyFold>
6691
</TraceRequiredPanel>
6792
);
6893

‎src/styles/components/sidebar/_main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
text-transform: capitalize;
104104
background-color: var(--sidebar-item-background-base);
105105
padding: 10px;
106-
padding-left: 16px;
106+
padding-left: 18px;
107107
padding-right: var(--spacing-quarter-unit);
108108
text-align: left;
109109
border-bottom: var(--border-light);

0 commit comments

Comments
 (0)