Skip to content

Commit 1bef8b2

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #764 from plotly/refac_empty
extract PanelMessage for reuse
2 parents 6c93f36 + b4555b6 commit 1bef8b2

10 files changed

Lines changed: 101 additions & 85 deletions

File tree

‎src/components/containers/AnnotationAccordion.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PlotlyFold from './PlotlyFold';
22
import TraceRequiredPanel from './TraceRequiredPanel';
3+
import {PanelMessage} from './PanelEmpty';
34
import PropTypes from 'prop-types';
45
import React, {Component} from 'react';
56
import {connectAnnotationToLayout} from 'lib';
@@ -46,17 +47,14 @@ class AnnotationAccordion extends Component {
4647
{content ? (
4748
content
4849
) : (
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>
50+
<PanelMessage heading={_('Call out your data.')}>
51+
<p>
52+
{_(
53+
'Annotations are text and arrows you can use to point out specific parts of your figure.'
54+
)}
55+
</p>
56+
<p>{_('Click on the + button above to add an annotation.')}</p>
57+
</PanelMessage>
6058
)}
6159
</TraceRequiredPanel>
6260
);

‎src/components/containers/ImageAccordion.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import TraceRequiredPanel from './TraceRequiredPanel';
33
import PropTypes from 'prop-types';
44
import React, {Component} from 'react';
55
import {connectImageToLayout} from 'lib';
6+
import {PanelMessage} from './PanelEmpty';
67

78
const ImageFold = connectImageToLayout(PlotlyFold);
89

@@ -51,17 +52,14 @@ class ImageAccordion extends Component {
5152
{content ? (
5253
content
5354
) : (
54-
<div className="panel__empty__message">
55-
<div className="panel__empty__message__heading">{_('Logos, watermarks and more.')}</div>
56-
<div className="panel__empty__message__content">
57-
<p>
58-
{_(
59-
'Embed images in your figure to make the data more readable or to brand your content.'
60-
)}
61-
</p>
62-
<p>{_('Click on the + button above to add an image.')}</p>
63-
</div>
64-
</div>
55+
<PanelMessage heading={_('Logos, watermarks and more.')}>
56+
<p>
57+
{_(
58+
'Embed images in your figure to make the data more readable or to brand your content.'
59+
)}
60+
</p>
61+
<p>{_('Click on the + button above to add an image.')}</p>
62+
</PanelMessage>
6563
)}
6664
</TraceRequiredPanel>
6765
);

‎src/components/containers/PanelEmpty.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,40 @@ import React, {Component} from 'react';
33
import {ChartLineIcon} from 'plotly-icons';
44
import {bem} from 'lib';
55

6-
class PanelEmpty extends Component {
6+
export class PanelMessage extends Component {
77
render() {
88
const {children, icon: Icon} = this.props;
99
const heading = this.props.heading || '';
1010

11+
return (
12+
<div className="panel__empty__message">
13+
{Boolean(Icon) && (
14+
<div className="panel__empty__message__icon">
15+
<Icon />
16+
</div>
17+
)}
18+
{Boolean(heading) && <div className="panel__empty__message__heading">{heading}</div>}
19+
<div className="panel__empty__message__content">{children}</div>
20+
</div>
21+
);
22+
}
23+
}
24+
25+
PanelMessage.defaultProps = {
26+
icon: ChartLineIcon,
27+
};
28+
29+
PanelMessage.propTypes = {
30+
heading: PropTypes.string,
31+
children: PropTypes.node,
32+
icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
33+
};
34+
35+
class PanelEmpty extends Component {
36+
render() {
1137
return (
1238
<div className={bem('panel', 'empty')}>
13-
<div className="panel__empty__message">
14-
<div className="panel__empty__message__icon">{Icon ? <Icon /> : <ChartLineIcon />}</div>
15-
<div className="panel__empty__message__heading">{heading}</div>
16-
<div className="panel__empty__message__content">{children}</div>
17-
</div>
39+
<PanelMessage {...this.props} />
1840
</div>
1941
);
2042
}

‎src/components/containers/ShapeAccordion.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
44
import React, {Component} from 'react';
55
import {connectShapeToLayout} from 'lib';
66
import {COLORS} from 'lib/constants';
7+
import {PanelMessage} from './PanelEmpty';
78

89
const ShapeFold = connectShapeToLayout(PlotlyFold);
910

@@ -51,19 +52,14 @@ class ShapeAccordion extends Component {
5152
{content ? (
5253
content
5354
) : (
54-
<div className="panel__empty__message">
55-
<div className="panel__empty__message__heading">
56-
{_('Lines, Rectangles and Ellipses.')}
57-
</div>
58-
<div className="panel__empty__message__content">
59-
<p>
60-
{_(
61-
'Add shapes to a figure to highlight points or periods in time, thresholds, or areas of interest.'
62-
)}
63-
</p>
64-
<p>{_('Click on the + button above to add a shape.')}</p>
65-
</div>
66-
</div>
55+
<PanelMessage heading={_('Lines, Rectangles and Ellipses.')}>
56+
<p>
57+
{_(
58+
'Add shapes to a figure to highlight points or periods in time, thresholds, or areas of interest.'
59+
)}
60+
</p>
61+
<p>{_('Click on the + button above to add a shape.')}</p>
62+
</PanelMessage>
6763
)}
6864
</TraceRequiredPanel>
6965
);

‎src/components/containers/TraceAccordion.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {EDITOR_ACTIONS} from 'lib/constants';
77
import {connectTraceToPlot, plotlyTraceToCustomTrace} from 'lib';
88
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
99
import {traceTypes} from 'lib/traceTypes';
10+
import {PanelMessage} from './PanelEmpty';
1011

1112
const TraceFold = connectTraceToPlot(PlotlyFold);
1213

@@ -114,20 +115,17 @@ class TraceAccordion extends Component {
114115
renderTracePanelHelp() {
115116
const _ = this.context.localize;
116117
return (
117-
<div className="panel__empty__message">
118-
<div className="panel__empty__message__heading">Trace your data.</div>
119-
<div className="panel__empty__message__content">
120-
<p>
121-
{_('Traces of various types like bar and line are the building blocks of your figure.')}
122-
</p>
123-
<p>
124-
{_(
125-
'You can add as many as you like, mixing and matching types and arranging them into subplots.'
126-
)}
127-
</p>
128-
<p>{_('Click on the + button above to add a trace.')}</p>
129-
</div>
130-
</div>
118+
<PanelMessage heading={_('Trace your data.')}>
119+
<p>
120+
{_('Traces of various types like bar and line are the building blocks of your figure.')}
121+
</p>
122+
<p>
123+
{_(
124+
'You can add as many as you like, mixing and matching types and arranging them into subplots.'
125+
)}
126+
</p>
127+
<p>{_('Click on the + button above to add a trace.')}</p>
128+
</PanelMessage>
131129
);
132130
}
133131

‎src/components/containers/TransformAccordion.js‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PlotlyPanel from './PlotlyPanel';
33
import PropTypes from 'prop-types';
44
import React, {Component} from 'react';
55
import {connectTransformToTrace} from 'lib';
6+
import {PanelMessage} from './PanelEmpty';
67

78
const TransformFold = connectTransformToTrace(PlotlyFold);
89

@@ -99,35 +100,33 @@ class TransformAccordion extends Component {
99100
{content ? (
100101
content
101102
) : (
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>
103+
<PanelMessage icon={null}>
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>
129127
</div>
130-
</div>
128+
<p>{_('Click on the + button above to add a transform.')}</p>
129+
</PanelMessage>
131130
)}
132131
</PlotlyPanel>
133132
);

‎src/components/containers/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import PlotlyFold, {Fold} from './PlotlyFold';
99
import MenuPanel from './MenuPanel';
1010
import PlotlyPanel, {Panel} from './PlotlyPanel';
1111
import PlotlySection, {Section} from './PlotlySection';
12-
import PanelEmpty from './PanelEmpty';
12+
import PanelEmpty, {PanelMessage} from './PanelEmpty';
1313
import SubplotAccordion from './SubplotAccordion';
1414
import TraceAccordion from './TraceAccordion';
1515
import TransformAccordion from './TransformAccordion';
@@ -47,4 +47,5 @@ export {
4747
TraceTypeSection,
4848
Modal,
4949
ModalProvider,
50+
PanelMessage,
5051
};

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ import {
8383
TraceRequiredPanel,
8484
SingleSidebarItem,
8585
TraceTypeSection,
86+
PanelMessage,
8687
} from './containers';
8788

8889
import {Button} from './widgets';
@@ -91,6 +92,7 @@ import PanelMenuWrapper from './PanelMenuWrapper';
9192

9293
export {
9394
TickFormat,
95+
PanelMessage,
9496
AnnotationAccordion,
9597
AxisAnchorDropdown,
9698
AxisOverlayDropdown,

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
NTicks,
3737
DTicks,
3838
AxesSelector,
39+
PanelMessage,
3940
Button,
4041
ColorPicker,
4142
ColorwayPicker,
@@ -109,6 +110,7 @@ export {
109110
AxesSelector,
110111
Button,
111112
ColorPicker,
113+
PanelMessage,
112114
ColorwayPicker,
113115
ColorscalePicker,
114116
PieColorscalePicker,

‎src/styles/components/containers/_panel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
display: flex;
6666
&__message {
6767
text-align: center;
68-
padding-top: calc(var(--spacing-base-unit) * 2);
6968
&__icon {
69+
padding-top: calc(var(--spacing-base-unit) * 2);
7070
margin-bottom: var(--spacing-half-unit);
7171
opacity: 0.5;
7272
svg {

0 commit comments

Comments
 (0)