Merge pull request #762 from plotly/piescale

Pie scale, tick format

Author: nicolaskruchten

package.json

@@ -19,7 +19,7 @@
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
-    "react-colorscales": "0.6.1",
+    "react-colorscales": "0.7.2",
     "react-dropzone": "^5.0.1",
     "react-plotly.js": "^2.2.0",
     "react-rangeslider": "^2.2.0",

src/components/fields/DropdownCustom.js

@@ -6,7 +6,7 @@ import Field from './Field';
 import DropdownWidget from '../widgets/Dropdown';
 import Text from './Text';
 
-class UnconnectedDropdownCustom extends Component {
+export class UnconnectedDropdownCustom extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -35,19 +35,20 @@ class UnconnectedDropdownCustom extends Component {
 
   setValue(value, custom = false) {
     this.value = value;
+    const customOpt = this.props.customOpt;
     this.setState({
-      custom: (custom || value === this.props.customOpt) && value !== '',
+      custom: (custom || value === customOpt) && value !== '',
     });
     this.props.updateContainer({
-      [this.props.attr]: value === this.props.customOpt && !custom ? 'custom' : value,
+      [this.props.attr]: value === customOpt && !custom ? customOpt : value,
     });
   }
 
   render() {
-    const {options, attr} = this.props;
+    const {options, attr, customOpt} = this.props;
     const value =
       (this.value === '' || !options.map(o => o.value).includes(this.value)) && this.state.custom
-        ? 'custom'
+        ? customOpt
         : this.value;
 
     return (

src/components/fields/derived.js

@@ -1,5 +1,6 @@
 import isNumeric from 'fast-isnumeric';
 import {UnconnectedDropdown} from './Dropdown';
+import {UnconnectedDropdownCustom} from './DropdownCustom';
 import {UnconnectedFlaglist} from './Flaglist';
 import {UnconnectedNumeric} from './Numeric';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
@@ -145,6 +146,25 @@ export const BinningDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const TickFormat = connectToContainer(UnconnectedDropdownCustom, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+    if (plotProps.fullContainer.type === 'date') {
+      plotProps.options = [
+        {label: _('Default'), value: ''},
+        {label: _('Advanced (d3-time-format)'), value: '%x'},
+      ];
+      plotProps.customOpt = '%x';
+    } else {
+      plotProps.options = [
+        {label: _('Simple'), value: ''},
+        {label: _('Advanced (d3-format)'), value: 's'},
+      ];
+      plotProps.customOpt = 's';
+    }
+  },
+});
+
 export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
   modifyPlotProps: (props, context, plotProps) => {
     plotProps.isVisible = context.fullLayout.showlegend;

src/components/fields/index.js

@@ -54,6 +54,7 @@ import {
   ShowInLegend,
   HoveronDropdown,
   HovermodeDropdown,
+  TickFormat,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './LineSelectors';
 
@@ -93,6 +94,7 @@ export {
   DualNumeric,
   AxisRangeValue,
   Text,
+  TickFormat,
   Radio,
   SymbolSelector,
   RangesliderVisible,

src/components/index.js

@@ -56,6 +56,7 @@ import {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  TickFormat,
 } from './fields';
 
 import {
@@ -89,6 +90,7 @@ import {Button} from './widgets';
 import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
+  TickFormat,
   AnnotationAccordion,
   AxisAnchorDropdown,
   AxisOverlayDropdown,

src/components/widgets/ColorscalePicker.js

@@ -31,7 +31,9 @@ class Scale extends Component {
     const {onColorscaleChange, selected} = this.props;
     const {selectedColorscaleType, showColorscalePicker} = this.state;
     const description = COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType];
-    const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.map(type => ({
+    const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.filter(
+      type => type !== 'custom'
+    ).map(type => ({
       label: type + ' scales',
       value: type,
     }));

src/default_panels/StyleAxesPanel.js

@@ -19,6 +19,7 @@ import {
   RangeSelectorAccordion,
   VisibilitySelect,
   DropdownCustom,
+  TickFormat,
 } from '../components';
 
 class StyleAxesPanel extends Component {
@@ -163,6 +164,12 @@ class StyleAxesPanel extends Component {
                 ]}
               />
 
+              <TickFormat
+                label={_('Label Format')}
+                attr="tickformat"
+                dafaultOpt=""
+                clearable={false}
+              />
               <Radio
                 label={_('Separate Thousands')}
                 attr="separatethousands"
@@ -181,6 +188,17 @@ class StyleAxesPanel extends Component {
                   {label: _('k/M/B'), value: 'B'},
                 ]}
               />
+              <Dropdown
+                label={_('Show Exponents')}
+                attr="showexponent"
+                clearable={false}
+                options={[
+                  {label: _('All'), value: 'all'},
+                  {label: _('First'), value: 'first'},
+                  {label: _('Last'), value: 'last'},
+                  {label: _('None'), value: 'none'},
+                ]}
+              />
 
               <DropdownCustom
                 label={_('Prefix')}

src/default_panels/StyleTracesPanel.js

@@ -540,7 +540,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Scaling')}>
-      <Numeric label={_('Bandwidth')} attr="bandwidth" />
+      <GroupCreator label={_('Scale Group')} prefix={_('Group')} attr="scalegroup" />
       <Radio
         label={_('Scale Mode')}
         attr="scalemode"
@@ -555,6 +555,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
           {label: _('Manual'), value: 'manual'},
         ]}
       />
+      <Numeric label={_('Bandwidth')} attr="bandwidth" />
       <Numeric label={_('Span')} attr="span" />
       <Radio
         attr="side"