Merge pull request #331 from plotly/axes-for-all

Axes for all

Author: VeraZab

README.md

@@ -148,6 +148,7 @@ Simple component that takes in props and renders.
 * `<TraceAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to traces via `connectTraceToPlot()`.
 * `<LayoutPanel />`: `<Panel />` whose children are connected to the `layout` figure key
 * `<TraceRequiredPanel />`: `<LayoutPanel />` renders `<PanelEmpty />` if no trace data is set
+* `<AxisRequiredPanel />`: `<Panel />` renders `<PanelEmpty />` if no axis in `_fullLayout._subplots`
 * `<AnnotationAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to annotations via `connectAnnotationToLayout()`. For use in a `<LayoutPanel />`.
 * `<ShapeAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to shapes via `connectShapeToLayout()`. For use in a `<LayoutPanel />`.
 * `<ImageAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to images via `connectImageToLayout()`. For use in a `<LayoutPanel />`.

src/components/containers/AxisRequiredPanel.js

@@ -0,0 +1,51 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import PanelEmpty from './PanelEmpty';
+import Panel from './Panel';
+
+class AxisRequiredPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasAxis: true,
+    };
+  }
+
+  checkAxisExistence() {
+    const hasSubplot =
+      Object.keys(this.context.fullContainer._subplots).filter(
+        type =>
+          !['cartesian', 'mapbox'].includes(type) &&
+          this.context.fullContainer._subplots[type].length > 0
+      ).length > 0;
+    if (!hasSubplot) {
+      this.setState({hasAxis: false});
+    }
+  }
+
+  componentWillReceiveProps() {
+    this.checkAxisExistence();
+  }
+
+  componentDidMount() {
+    this.checkAxisExistence();
+  }
+
+  render() {
+    if (this.state.hasAxis) {
+      return <Panel>{this.props.children}</Panel>;
+    }
+    return <PanelEmpty heading={this.props.emptyPanelHeader} />;
+  }
+}
+
+AxisRequiredPanel.propTypes = {
+  children: PropTypes.node,
+  emptyPanelHeader: PropTypes.string,
+};
+
+AxisRequiredPanel.contextTypes = {
+  fullContainer: PropTypes.object,
+};
+
+export default AxisRequiredPanel;

src/components/containers/PanelEmpty.js

@@ -1,17 +1,13 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ChartLineIcon} from 'plotly-icons';
-import {bem, localize} from 'lib';
+import {bem} from 'lib';
 
 class PanelEmpty extends Component {
   render() {
-    const {
-      children,
-      localize: _,
-      heading = _("Looks like there aren't any traces defined yet."),
-      message = _("Go to the 'Create' tab to define traces."),
-      icon: Icon,
-    } = this.props;
+    const {children, icon: Icon} = this.props;
+    const heading = this.props.heading || '';
+    const message = this.props.message || '';
 
     return (
       <div className={bem('panel', 'empty')}>
@@ -38,4 +34,4 @@ PanelEmpty.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
-export default localize(PanelEmpty);
+export default PanelEmpty;

src/components/containers/TraceRequiredPanel.js

@@ -1,7 +1,8 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import PanelEmpty from './PanelEmpty';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import {LayoutPanel} from './derived';
+import {localize} from 'lib';
 
 class TraceRequiredPanel extends Component {
   constructor(props) {
@@ -36,14 +37,17 @@ class TraceRequiredPanel extends Component {
   }
 
   render() {
-    const {children, ...rest} = this.props;
+    const {localize: _, children, ...rest} = this.props;
     const {hasTraces} = this.state;
 
     if (this.props.visible) {
       return hasTraces ? (
         <LayoutPanel {...rest}>{children}</LayoutPanel>
       ) : (
-        <PanelEmpty />
+        <PanelEmpty
+          heading={_("Looks like there aren't any traces defined yet.")}
+          message={_("Go to the 'Create' tab to define traces.")}
+        />
       );
     }
     return null;
@@ -52,6 +56,7 @@ class TraceRequiredPanel extends Component {
 
 TraceRequiredPanel.propTypes = {
   children: PropTypes.node,
+  localize: PropTypes.func,
   visible: PropTypes.bool,
 };
 
@@ -63,4 +68,4 @@ TraceRequiredPanel.contextTypes = {
   fullData: PropTypes.array,
 };
 
-export default TraceRequiredPanel;
+export default localize(TraceRequiredPanel);

src/components/containers/index.js

@@ -2,6 +2,7 @@ import AnnotationAccordion from './AnnotationAccordion';
 import ShapeAccordion from './ShapeAccordion';
 import ImageAccordion from './ImageAccordion';
 import AxesFold from './AxesFold';
+import AxisRequiredPanel from './AxisRequiredPanel';
 import Fold from './Fold';
 import MenuPanel from './MenuPanel';
 import Panel from './Panel';
@@ -14,6 +15,7 @@ import SingleSidebarItem from './SingleSidebarItem';
 
 export {
   AnnotationAccordion,
+  AxisRequiredPanel,
   ShapeAccordion,
   ImageAccordion,
   MenuPanel,

src/components/index.js

@@ -36,6 +36,7 @@ import {
   ShapeAccordion,
   ImageAccordion,
   AxesFold,
+  AxisRequiredPanel,
   Fold,
   LayoutPanel,
   MenuPanel,
@@ -63,6 +64,7 @@ export {
   AxesFold,
   AxesRange,
   AxesSelector,
+  AxisRequiredPanel,
   Button,
   CanvasSize,
   ColorPicker,