Adjust axis Side

Author: VeraZab

src/components/fields/derived.js

@@ -61,6 +61,40 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const AxisSide = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const _ = props.localize;
+    if (
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('y')
+    ) {
+      plotProps.options = [
+        {label: _('Left'), value: 'left'},
+        {label: _('Right'), value: 'right'},
+      ];
+      return;
+    }
+
+    if (
+      context.fullContainer._id &&
+      context.fullContainer._id.startsWith('x')
+    ) {
+      plotProps.options = [
+        {label: _('Bottom'), value: 'bottom'},
+        {label: _('Top'), value: 'top'},
+      ];
+      return;
+    }
+
+    plotProps.options = [
+      {label: _('Left'), value: 'left'},
+      {label: _('Right'), value: 'right'},
+      {label: _('Bottom'), value: 'bottom'},
+      {label: _('Top'), value: 'top'},
+    ];
+  },
+});
+
 export const CanvasSize = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer, updateContainer, container} = plotProps;

src/components/fields/index.js

@@ -33,6 +33,7 @@ import {
   LayoutNumericFractionInverse,
   TraceOrientation,
   AxisOverlayDropdown,
+  AxisSide,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './lineSelectors';
 
@@ -73,4 +74,5 @@ export {
   TraceSelector,
   AxisCreator,
   AxisOverlayDropdown,
+  AxisSide,
 };

src/components/index.js

@@ -3,6 +3,7 @@ import {
   AnnotationRef,
   AxisAnchorDropdown,
   AxisOverlayDropdown,
+  AxisSide,
   PositioningRef,
   ArrowSelector,
   AxesRange,
@@ -63,6 +64,7 @@ export {
   AnnotationAccordion,
   AxisAnchorDropdown,
   AxisOverlayDropdown,
+  AxisSide,
   ShapeAccordion,
   ImageAccordion,
   AnnotationArrowRef,

src/default_panels/StyleAxesPanel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   AxisAnchorDropdown,
   AxisOverlayDropdown,
+  AxisSide,
   AxesRange,
   ColorPicker,
   Dropdown,
@@ -47,16 +48,7 @@ const StyleAxesPanel = ({localize: _}) => (
             attr="overlaying"
             localize={_}
           />
-          <Radio
-            label={_('Side')}
-            attr="side"
-            options={[
-              {label: _('Bottom'), value: 'bottom'},
-              {label: _('Top'), value: 'top'},
-              {label: _('Left'), value: 'left'},
-              {label: _('Right'), value: 'right'},
-            ]}
-          />
+          <AxisSide label={_('Side')} attr="side" localize={_} />
         </Section>
       </AxesFold>