From 6be409913ca0b5a95e5016d2b50ce45553926812 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 19 Jul 2018 13:05:12 -0400 Subject: [PATCH 1/5] use standard names for axes components --- .../fields/{AxisCreator.js => AxesCreator.js} | 18 +++++++++--------- src/components/fields/index.js | 4 ++-- src/components/index.js | 4 ++-- src/default_panels/GraphCreatePanel.js | 4 ++-- 4 files changed, 15 insertions(+), 15 deletions(-) rename src/components/fields/{AxisCreator.js => AxesCreator.js} (92%) diff --git a/src/components/fields/AxisCreator.js b/src/components/fields/AxesCreator.js similarity index 92% rename from src/components/fields/AxisCreator.js rename to src/components/fields/AxesCreator.js index 8dcd8ef6d..73f128780 100644 --- a/src/components/fields/AxisCreator.js +++ b/src/components/fields/AxesCreator.js @@ -12,7 +12,7 @@ import { axisIdToAxisName, } from 'lib'; -class UnconnectedNewAxisCreator extends Component { +class UnconnectedAxisCreator extends Component { canAddAxis() { const currentAxisId = this.props.fullContainer[this.props.attr]; const currentTraceIndex = this.props.fullContainer.index; @@ -104,7 +104,7 @@ class UnconnectedNewAxisCreator extends Component { } } -UnconnectedNewAxisCreator.propTypes = { +UnconnectedAxisCreator.propTypes = { attr: PropTypes.string, label: PropTypes.string, options: PropTypes.array, @@ -114,16 +114,16 @@ UnconnectedNewAxisCreator.propTypes = { updateContainer: PropTypes.func, }; -UnconnectedNewAxisCreator.contextTypes = { +UnconnectedAxisCreator.contextTypes = { fullLayout: PropTypes.object, data: PropTypes.array, fullData: PropTypes.array, onUpdate: PropTypes.func, }; -const ConnectedNewAxisCreator = connectToContainer(UnconnectedNewAxisCreator); +const AxisCreator = connectToContainer(UnconnectedAxisCreator); -class AxisCreator extends Component { +class UnconnectedAxesCreator extends Component { render() { const isFirstTraceOfType = this.context.data.filter(d => d.type === this.props.container.type) @@ -148,7 +148,7 @@ class AxisCreator extends Component { if (axisType === 'cartesian') { ['xaxis', 'yaxis'].forEach((type, index) => { controls.push( - { const {data} = context; const {fullContainer} = plotProps; diff --git a/src/components/fields/index.js b/src/components/fields/index.js index f94a0d5f7..7fff47297 100644 --- a/src/components/fields/index.js +++ b/src/components/fields/index.js @@ -16,7 +16,7 @@ import Text from './Text'; import SymbolSelector from './SymbolSelector'; import TraceSelector from './TraceSelector'; import ErrorBars from './ErrorBars'; -import AxisCreator from './AxisCreator'; +import AxesCreator from './AxesCreator'; import UpdateMenuButtons from './UpdateMenuButtons'; import {FilterOperation, FilterValue} from './FilterOperation'; import MarkerSize from './MarkerSize'; @@ -83,7 +83,7 @@ export { TextEditor, TraceOrientation, TraceSelector, - AxisCreator, + AxesCreator, AxisOverlayDropdown, AxisSide, UpdateMenuButtons, diff --git a/src/components/index.js b/src/components/index.js index 669b7653a..a96fa4b73 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -35,7 +35,7 @@ import { Text, Radio, RangesliderVisible, - AxisCreator, + AxesCreator, SymbolSelector, TextEditor, TraceOrientation, @@ -130,7 +130,7 @@ export { PlotlySection, Section, SingleSidebarItem, - AxisCreator, + AxesCreator, SymbolSelector, TextEditor, TraceAccordion, diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js index e9aa3423b..ec61456f8 100644 --- a/src/default_panels/GraphCreatePanel.js +++ b/src/default_panels/GraphCreatePanel.js @@ -7,7 +7,7 @@ import { Radio, PlotlySection, LayoutSection, - AxisCreator, + AxesCreator, TraceAccordion, TraceSelector, TextEditor, @@ -107,7 +107,7 @@ const GraphCreatePanel = (props, {localize: _}) => { - + From 344f7337a7c28ccd6a6597e69324a8d0dfa5e3d5 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 19 Jul 2018 13:05:39 -0400 Subject: [PATCH 2/5] fix axes names during creation --- src/lib/getAllAxes.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/lib/getAllAxes.js b/src/lib/getAllAxes.js index 0cd73f465..119fd5df3 100644 --- a/src/lib/getAllAxes.js +++ b/src/lib/getAllAxes.js @@ -75,14 +75,16 @@ function getSubplotNumber(axis) { const splitSubplot = axis._subplot ? axis._subplot.split(axis._axisGroup) : []; - return splitSubplot[1] ? Number(splitSubplot[1]) : 0; + return splitSubplot[1] + ? Number(splitSubplot[1]) + : axis._name.split('axis')[1]; } export function getAxisTitle(axis) { const axisType = capitalize(axis._name.split('axis')[0]); - const subplotNb = getSubplotNumber(axis); + const subplotNb = getSubplotNumber(axis) || 1; return axis._input && axis._input.title ? striptags(`${axisType}: ${axis._input.title}`) - : striptags(`${axisType} ${subplotNb === 0 ? 1 : subplotNb}`); + : striptags(`${axisType} ${subplotNb}`); } From 51375d70ae6a758e0662ee6e3cf4a940a063af5b Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 19 Jul 2018 13:46:07 -0400 Subject: [PATCH 3/5] fix axes names in axes panel --- src/components/fields/AxesSelector.js | 53 ++++++++++++++++----------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js index 98b5bceb4..febc38f6c 100644 --- a/src/components/fields/AxesSelector.js +++ b/src/components/fields/AxesSelector.js @@ -16,36 +16,45 @@ class AxesSelector extends Component { } render() { - const {axesTargetHandler, axesTarget, localize: _} = this.context; + const { + axesTargetHandler, + axesTarget, + fullLayout, + localize: _, + } = this.context; const {axesOptions} = this.props; const maxOptions = axesOptions.length > 4; // eslint-disable-line - if (maxOptions) { - return ( - - { - if (option.value !== 'allaxes') { - return { + const multipleSublots = + fullLayout && + fullLayout._subplots && + Object.values(fullLayout._subplots).some(s => s.length > 1); + + const options = multipleSublots + ? axesOptions.map( + option => + option.value === 'allaxes' + ? option + : { label: option.title, value: option.value, - }; - } - - return option; - })} - value={axesTarget} - onChange={axesTargetHandler} - clearable={false} - /> - - ); - } + } + ) + : axesOptions; - return ( + return maxOptions ? ( + + + + ) : ( From 6c3b4d16a616bd22f58d9d9f3fa491c0fd74b9c7 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 19 Jul 2018 15:56:54 -0400 Subject: [PATCH 4/5] add None as option for Overlay in axes panel --- src/components/fields/derived.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js index c8977e94e..37901b01a 100644 --- a/src/components/fields/derived.js +++ b/src/components/fields/derived.js @@ -47,6 +47,7 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, { export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, { modifyPlotProps: (props, context, plotProps) => { + const {localize: _} = context; let options = []; if ( plotProps.fullContainer && @@ -72,13 +73,15 @@ export const AxisOverlayDropdown = connectToContainer(UnconnectedDropdown, { }); } + options.unshift({label: _('None'), value: false}); + // filter out the current axisID, can't overlay over itself plotProps.options = options.filter( option => context.fullContainer && context.fullContainer._id !== option.value ); - plotProps.clearable = true; + plotProps.clearable = false; }, }); From c093fcbde26f89e0487284ddba123a2737b00147 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Thu, 19 Jul 2018 16:36:16 -0400 Subject: [PATCH 5/5] show dropdown if axes have names that don't fit into radio button --- src/components/fields/AxesSelector.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js index febc38f6c..fa3134d99 100644 --- a/src/components/fields/AxesSelector.js +++ b/src/components/fields/AxesSelector.js @@ -23,6 +23,7 @@ class AxesSelector extends Component { localize: _, } = this.context; const {axesOptions} = this.props; + const maxCharsThatFitInRadio = 27; const maxOptions = axesOptions.length > 4; // eslint-disable-line const multipleSublots = @@ -42,7 +43,12 @@ class AxesSelector extends Component { ) : axesOptions; - return maxOptions ? ( + const totalCharsInOptions = + (options && + options.map(o => o.label).reduce((acc, o) => acc + o.length, 0)) || + 0; + + return maxOptions || totalCharsInOptions >= maxCharsThatFitInRadio ? (