Allow TextPosition component to be a data array

Author: VeraZab

src/components/fields/TextPosition.js

@@ -0,0 +1,105 @@
+import Dropdown from './Dropdown';
+import RadioBlocks from '../widgets/RadioBlocks';
+import Field from './Field';
+import PropTypes from 'prop-types';
+import React, {Component, Fragment} from 'react';
+import {connectToContainer} from 'lib';
+import Info from './Info';
+import DataSelector from './DataSelector';
+
+export class UnconnectedTextPosition extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      posType: typeof props.fullValue === 'string' ? 'simple' : 'custom',
+    };
+  }
+
+  render() {
+    const _ = this.context.localize;
+    const radioOptions = [
+      {label: _('All'), value: 'simple'},
+      {label: _('Custom'), value: 'custom'},
+    ];
+    const control =
+      this.state.posType === 'simple' ? (
+        <Fragment>
+          <Info>
+            {_(
+              'This will position all text values on the plot according to the selected position.'
+            )}
+          </Info>
+          <Dropdown options={this.props.options} attr="textposition" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <Info>
+            <div>
+              {_(
+                'This will position text values individually, according to the provided data positions array. '
+              )}
+            </div>
+          </Info>
+          <DataSelector attr="textposition" />
+          <Info>
+            <div>{_('("Top", "Middle", "Bottom") + ("Left", "Center", "Right")')}</div>
+          </Info>
+        </Fragment>
+      );
+
+    return (
+      <Field {...this.props}>
+        <RadioBlocks
+          options={radioOptions}
+          activeOption={this.state.posType}
+          onOptionChange={value => {
+            this.setState({posType: value});
+            if (value === 'simple') {
+              this.props.updatePlot('middle center');
+            } else {
+              this.props.updateContainer({textpositionsrc: null});
+            }
+          }}
+        />
+        {control}
+      </Field>
+    );
+  }
+}
+
+UnconnectedTextPosition.propTypes = {
+  ...Field.propTypes,
+  options: PropTypes.array,
+  fullValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+};
+
+UnconnectedTextPosition.contextTypes = {
+  localize: PropTypes.func,
+};
+
+export default connectToContainer(UnconnectedTextPosition, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+    let options = [
+      {label: _('Top Left'), value: 'top left'},
+      {label: _('Top Center'), value: 'top center'},
+      {label: _('Top Right'), value: 'top right'},
+      {label: _('Middle Left'), value: 'middle left'},
+      {label: _('Middle Center'), value: 'middle center'},
+      {label: _('Middle Right'), value: 'middle right'},
+      {label: _('Bottom Left'), value: 'bottom left'},
+      {label: _('Bottom Center'), value: 'bottom center'},
+      {label: _('Bottom Right'), value: 'bottom right'},
+    ];
+    if (context.container.type === 'pie' || context.container.type === 'bar') {
+      options = [
+        {label: _('Inside'), value: 'inside'},
+        {label: _('Outside'), value: 'outside'},
+        {label: _('Auto'), value: 'auto'},
+        {label: _('None'), value: 'none'},
+      ];
+    }
+    plotProps.options = options;
+    plotProps.clearable = false;
+  },
+});

src/components/fields/derived.js

@@ -494,33 +494,6 @@ function computeAxesRefOptions(axes, propsAttr) {
   return options;
 }
 
-export const TextPosition = connectToContainer(UnconnectedDropdown, {
-  modifyPlotProps: (props, context, plotProps) => {
-    const {localize: _} = context;
-    let options = [
-      {label: _('Top Left'), value: 'top left'},
-      {label: _('Top Center'), value: 'top center'},
-      {label: _('Top Right'), value: 'top right'},
-      {label: _('Middle Left'), value: 'middle left'},
-      {label: _('Middle Center'), value: 'middle center'},
-      {label: _('Middle Right'), value: 'middle right'},
-      {label: _('Bottom Left'), value: 'bottom left'},
-      {label: _('Bottom Center'), value: 'bottom center'},
-      {label: _('Bottom Right'), value: 'bottom right'},
-    ];
-    if (context.container.type === 'pie' || context.container.type === 'bar') {
-      options = [
-        {label: _('Inside'), value: 'inside'},
-        {label: _('Outside'), value: 'outside'},
-        {label: _('Auto'), value: 'auto'},
-        {label: _('None'), value: 'none'},
-      ];
-    }
-    plotProps.options = options;
-    plotProps.clearable = false;
-  },
-});
-
 export const TextInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;

src/components/fields/index.js

@@ -34,6 +34,7 @@ import RectanglePositioner from './RectanglePositioner';
 import LocationSelector from './LocationSelector';
 import AxisInterval from './AxisInterval';
 import DateTimePicker from './DateTimePicker';
+import TextPosition from './TextPosition';
 
 import {
   AnnotationArrowRef,
@@ -57,7 +58,6 @@ import {
   TraceOrientation,
   AxisOverlayDropdown,
   AxisSide,
-  TextPosition,
   ShowInLegend,
   HoveronDropdown,
   HovermodeDropdown,