From 042f6e630be2cbfe69604aa4af8b5999e3a7fd1f Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Mon, 17 Dec 2018 13:35:00 -0500 Subject: [PATCH 01/10] BinSize adjustments --- package.json | 2 +- src/EditorControls.js | 3 - src/components/fields/BinSize.js | 128 ++++++++++++++++++ src/components/fields/derived.js | 12 -- src/components/fields/index.js | 2 +- src/components/index.js | 2 + src/default_panels/StyleTracesPanel.js | 6 +- src/shame.js | 20 --- .../components/widgets/_numeric-input.scss | 4 + 9 files changed, 139 insertions(+), 40 deletions(-) create mode 100644 src/components/fields/BinSize.js diff --git a/package.json b/package.json index 396ded1c3..9caa81d33 100644 --- a/package.json +++ b/package.json @@ -125,4 +125,4 @@ "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css", "watch-test": "jest --watch" } -} \ No newline at end of file +} diff --git a/src/EditorControls.js b/src/EditorControls.js index c70b3fab8..9a5458886 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -11,7 +11,6 @@ import { shamefullyAdjustSplitStyleTargetContainers, shamefullyDeleteRelatedAnalysisTransforms, shamefullyAdjustSizeref, - shamefullyAdjustBinSize, } from './shame'; import {EDITOR_ACTIONS} from './lib/constants'; import isNumeric from 'fast-isnumeric'; @@ -83,8 +82,6 @@ class EditorControls extends Component { for (const attr in payload.update) { const traceIndex = payload.traceIndexes[i]; - shamefullyAdjustBinSize(graphDiv, payload, traceIndex); - const splitTraceGroup = payload.splitTraceGroup ? payload.splitTraceGroup.toString() : null; diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js new file mode 100644 index 000000000..eb15f7c7a --- /dev/null +++ b/src/components/fields/BinSize.js @@ -0,0 +1,128 @@ +import React, {Component} from 'react'; +import Field from './Field'; +import RadioBlocks from '../widgets/RadioBlocks'; +import NumericInput from '../widgets/NumericInput'; +import PropTypes from 'prop-types'; +import {connectToContainer} from 'lib'; +import {isDateTime} from 'plotly.js/src/lib'; +import {isJSDate} from 'plotly.js/src/lib/dates'; + +const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; // eslint-disable-line +const DAYS_IN_MONTH = 30; + +class UnconnectedBinSize extends Component { + constructor(props) { + super(props); + this.state = { + units: 'months', + }; + this.update = this.update.bind(this); + this.convertToMilliseconds = this.convertToMilliseconds.bind(this); + this.onUnitChange = this.onUnitChange.bind(this); + } + + convertToMilliseconds(value) { + if (this.state.units === 'months') { + let adjustedValue = value; + // eslint-disable-next-line + if (adjustedValue > 12) { + adjustedValue = 12; // eslint-disable-line + } + if (adjustedValue < 1) { + adjustedValue = 1; + } + return adjustedValue * MILLISECONDS_IN_DAY * DAYS_IN_MONTH; + } + + if (this.state.units === 'days') { + let adjustedValue = value; + // eslint-disable-next-line + if (adjustedValue > 366) { + adjustedValue = 366; // eslint-disable-line + } + if (adjustedValue < 1) { + adjustedValue = 1; + } + return adjustedValue * MILLISECONDS_IN_DAY; + } + + return value; + } + + update(value) { + this.props.updatePlot(this.convertToMilliseconds(value)); + } + + onUnitChange(value) { + const milliseconds = + value === 'months' && + typeof this.props.fullValue === 'string' && + this.props.fullValue[0] === 'M' + ? parseInt(this.props.fullValue.substring(1), 10) * DAYS_IN_MONTH * MILLISECONDS_IN_DAY + : this.props.fullValue; + + this.setState({units: value}); + this.props.updatePlot(milliseconds); + } + + getDisplayValue(value) { + const numberValue = + typeof value === 'string' && value[0] === 'M' ? parseInt(value.substring(1), 10) : value; + + if (this.state.units === 'months') { + return Math.round(numberValue / MILLISECONDS_IN_DAY / DAYS_IN_MONTH); + } + if (this.state.units === 'days') { + return Math.round(numberValue / MILLISECONDS_IN_DAY); + } + if (this.state.units === 'milliseconds') { + return numberValue; + } + return numberValue; + } + + render() { + const _ = this.context.localize; + const attrHead = this.props.attr.split('.')[0]; + const binStartValue = this.props.fullContainer[attrHead].start; + const BinStartIsDate = + typeof binStartValue === 'string' && (isDateTime(binStartValue) || isJSDate(binStartValue)); + + return BinStartIsDate ? ( + + +
+ + + ) : ( + + + + ); + } +} + +UnconnectedBinSize.contextTypes = { + localize: PropTypes.func, +}; + +UnconnectedBinSize.propTypes = { + fullValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + updatePlot: PropTypes.func, + attr: PropTypes.string, + fullContainer: PropTypes.object, +}; + +export default connectToContainer(UnconnectedBinSize); diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js index 188d365e4..bac55cb9a 100644 --- a/src/components/fields/derived.js +++ b/src/components/fields/derived.js @@ -699,15 +699,3 @@ export const HoverColor = connectToContainer(UnconnectedColorPicker, { return plotProps; }, }); - -export const BinSize = connectToContainer(UnconnectedNumeric, { - modifyPlotProps: (props, context, plotProps) => { - const {localize: _} = context; - if (typeof plotProps.fullValue === 'string' && plotProps.fullValue[0] === 'M') { - plotProps.fullValue = plotProps.fullValue.substring(1); - plotProps.min = 1; - plotProps.max = 12; - plotProps.units = parseInt(plotProps.fullValue, 10) === 1 ? _('Month') : _('Months'); - } - }, -}); diff --git a/src/components/fields/index.js b/src/components/fields/index.js index 880def307..9c2a26f8d 100644 --- a/src/components/fields/index.js +++ b/src/components/fields/index.js @@ -32,6 +32,7 @@ import DropdownCustom from './DropdownCustom'; import MultiColorPicker from './MultiColorPicker'; import RectanglePositioner from './RectanglePositioner'; import LocationSelector from './LocationSelector'; +import BinSize from './BinSize'; import { AnnotationArrowRef, AnnotationRef, @@ -58,7 +59,6 @@ import { HoveronDropdown, HovermodeDropdown, TickFormat, - BinSize, } from './derived'; import {LineDashSelector, LineShapeSelector} from './LineSelectors'; diff --git a/src/components/index.js b/src/components/index.js index 93c342ce9..17a33c501 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -60,6 +60,7 @@ import { HovermodeDropdown, TickFormat, NumericOrDate, + BinSize, } from './fields'; import { @@ -181,4 +182,5 @@ export { HoveronDropdown, HovermodeDropdown, NumericOrDate, + BinSize, }; diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js index d290e25bd..7972a4d49 100644 --- a/src/default_panels/StyleTracesPanel.js +++ b/src/default_panels/StyleTracesPanel.js @@ -34,6 +34,7 @@ import { VisibilitySelect, GroupCreator, NumericOrDate, + BinSize, } from '../components'; import { BinningDropdown, @@ -41,7 +42,6 @@ import { ShowInLegend, TextInfo, HoveronDropdown, - BinSize, } from '../components/fields/derived'; const StyleTracesPanel = (props, {localize: _}) => ( @@ -229,13 +229,13 @@ const StyleTracesPanel = (props, {localize: _}) => ( - + - + diff --git a/src/shame.js b/src/shame.js index 3bd7fb625..14b6fcecd 100644 --- a/src/shame.js +++ b/src/shame.js @@ -3,7 +3,6 @@ */ import {getFromId} from 'plotly.js/src/plots/cartesian/axis_ids'; import nestedProperty from 'plotly.js/src/lib/nested_property'; -import {isDateTime} from 'plotly.js/src/lib'; // Temporary fix for: // https://github.com/plotly/react-chart-editor/issues/103 @@ -213,22 +212,3 @@ export const shamefullyAdjustSizeref = (gd, {update}) => { update['marker.sizemode'] = 'area'; } }; - -export const shamefullyAdjustBinSize = (gd, {update}, traceIndexInDataArray) => { - const traceIndexInFullDataArray = gd._fullData.filter(t => t.index === traceIndexInDataArray)[0] - ._expandedIndex; - const binSizeAttrs = Object.keys(update).filter(attr => attr.includes('bins.size')); - - binSizeAttrs.forEach(attr => { - const attrHead = attr.split('.')[0]; - if ( - gd._fullData[traceIndexInFullDataArray] && - gd._fullData[traceIndexInFullDataArray][attrHead] && - gd._fullData[traceIndexInFullDataArray][attrHead].start && - isDateTime(gd._fullData[traceIndexInFullDataArray][attrHead].start) - ) { - const monthNum = update[attr]; - update[attr] = 'M' + monthNum; - } - }); -}; diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index bb17b2a6c..9c1226515 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -84,3 +84,7 @@ height: 13px !important; fill: var(--color-text-base) !important; } + +.binsize-milliseconds { + width: 50%; +} From 9ec23da6326ca5193e4e98822bd1a7a0230f03cc Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Mon, 17 Dec 2018 16:21:29 -0500 Subject: [PATCH 02/10] update enzyme and adapter --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9caa81d33..bf13bc8a3 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "babel-traverse": "^6.26.0", "css-loader": "^0.28.11", "cssnano": "^3.10.0", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16": "^1.0.4", + "enzyme": "3.8.0", + "enzyme-adapter-react-16": "1.7.1", "eslint": "^5.4.0", "eslint-config-prettier": "^3.0.1", "eslint-plugin-import": "^2.8.0", @@ -125,4 +125,4 @@ "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css", "watch-test": "jest --watch" } -} +} \ No newline at end of file From 737e6e91ca53d0cc03efd5ab5822ae928c94572c Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Mon, 17 Dec 2018 16:45:49 -0500 Subject: [PATCH 03/10] allow zero --- src/components/fields/BinSize.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index eb15f7c7a..43bf71f8b 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -28,8 +28,8 @@ class UnconnectedBinSize extends Component { if (adjustedValue > 12) { adjustedValue = 12; // eslint-disable-line } - if (adjustedValue < 1) { - adjustedValue = 1; + if (adjustedValue < 0) { + adjustedValue = 0; } return adjustedValue * MILLISECONDS_IN_DAY * DAYS_IN_MONTH; } @@ -40,8 +40,8 @@ class UnconnectedBinSize extends Component { if (adjustedValue > 366) { adjustedValue = 366; // eslint-disable-line } - if (adjustedValue < 1) { - adjustedValue = 1; + if (adjustedValue < 0) { + adjustedValue = 0; } return adjustedValue * MILLISECONDS_IN_DAY; } From 2ee3cdbeb1d6c42f0e796425c58df5d4914745e7 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Mon, 17 Dec 2018 17:17:30 -0500 Subject: [PATCH 04/10] simplify and keep months in 'M' format --- src/components/fields/BinSize.js | 63 +++++++++++++++----------------- 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index 43bf71f8b..8d3fca03a 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -11,19 +11,17 @@ const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; // eslint-disable-line const DAYS_IN_MONTH = 30; class UnconnectedBinSize extends Component { - constructor(props) { - super(props); + constructor() { + super(); this.state = { units: 'months', }; - this.update = this.update.bind(this); - this.convertToMilliseconds = this.convertToMilliseconds.bind(this); - this.onUnitChange = this.onUnitChange.bind(this); } - convertToMilliseconds(value) { + update(value) { + let adjustedValue = value; + if (this.state.units === 'months') { - let adjustedValue = value; // eslint-disable-next-line if (adjustedValue > 12) { adjustedValue = 12; // eslint-disable-line @@ -31,11 +29,10 @@ class UnconnectedBinSize extends Component { if (adjustedValue < 0) { adjustedValue = 0; } - return adjustedValue * MILLISECONDS_IN_DAY * DAYS_IN_MONTH; + adjustedValue = 'M' + adjustedValue; } if (this.state.units === 'days') { - let adjustedValue = value; // eslint-disable-next-line if (adjustedValue > 366) { adjustedValue = 366; // eslint-disable-line @@ -43,42 +40,39 @@ class UnconnectedBinSize extends Component { if (adjustedValue < 0) { adjustedValue = 0; } - return adjustedValue * MILLISECONDS_IN_DAY; + adjustedValue = adjustedValue * MILLISECONDS_IN_DAY; } - return value; - } - - update(value) { - this.props.updatePlot(this.convertToMilliseconds(value)); + this.props.updatePlot(adjustedValue); } onUnitChange(value) { - const milliseconds = - value === 'months' && - typeof this.props.fullValue === 'string' && - this.props.fullValue[0] === 'M' - ? parseInt(this.props.fullValue.substring(1), 10) * DAYS_IN_MONTH * MILLISECONDS_IN_DAY - : this.props.fullValue; + const isFullValueMonthFormat = + typeof this.props.fullValue === 'string' && this.props.fullValue[0] === 'M'; + + const milliseconds = isFullValueMonthFormat + ? parseInt(this.props.fullValue.substring(1), 10) * DAYS_IN_MONTH * MILLISECONDS_IN_DAY + : this.props.fullValue; this.setState({units: value}); - this.props.updatePlot(milliseconds); + if (value === 'months') { + this.props.updatePlot('M' + Math.round(milliseconds / MILLISECONDS_IN_DAY / DAYS_IN_MONTH)); + } else { + this.props.updatePlot(milliseconds); + } } getDisplayValue(value) { - const numberValue = - typeof value === 'string' && value[0] === 'M' ? parseInt(value.substring(1), 10) : value; - - if (this.state.units === 'months') { - return Math.round(numberValue / MILLISECONDS_IN_DAY / DAYS_IN_MONTH); + if (this.state.units === 'months' && typeof value === 'string' && value[0] === 'M') { + return parseInt(value.substring(1), 10); } if (this.state.units === 'days') { - return Math.round(numberValue / MILLISECONDS_IN_DAY); + return Math.round(value / MILLISECONDS_IN_DAY); } if (this.state.units === 'milliseconds') { - return numberValue; + return value; } - return numberValue; + return null; } render() { @@ -96,19 +90,22 @@ class UnconnectedBinSize extends Component { {value: 'days', label: _('Days')}, {value: 'milliseconds', label: _('Milliseconds')}, ]} - onOptionChange={this.onUnitChange} + onOptionChange={value => this.onUnitChange(value)} activeOption={this.state.units} />
this.update(value)} editableClassName="binsize-milliseconds" /> ) : ( - + this.props.updatePlot(value)} + /> ); } From d781e4da85161eedc796cd61c2fe5ddb9db72c17 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 18 Dec 2018 09:05:17 -0500 Subject: [PATCH 05/10] remove max value adjustments --- src/components/fields/BinSize.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index 8d3fca03a..28e63bd95 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -19,27 +19,13 @@ class UnconnectedBinSize extends Component { } update(value) { - let adjustedValue = value; + let adjustedValue = value < 0 ? 0 : value; if (this.state.units === 'months') { - // eslint-disable-next-line - if (adjustedValue > 12) { - adjustedValue = 12; // eslint-disable-line - } - if (adjustedValue < 0) { - adjustedValue = 0; - } adjustedValue = 'M' + adjustedValue; } if (this.state.units === 'days') { - // eslint-disable-next-line - if (adjustedValue > 366) { - adjustedValue = 366; // eslint-disable-line - } - if (adjustedValue < 0) { - adjustedValue = 0; - } adjustedValue = adjustedValue * MILLISECONDS_IN_DAY; } @@ -120,6 +106,7 @@ UnconnectedBinSize.propTypes = { updatePlot: PropTypes.func, attr: PropTypes.string, fullContainer: PropTypes.object, + ...Field.propTypes, }; export default connectToContainer(UnconnectedBinSize); From de522536a1dadb4f050212cb55a33572875e588c Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 18 Dec 2018 09:22:47 -0500 Subject: [PATCH 06/10] add minutes --- src/components/fields/BinSize.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index 28e63bd95..05f74c469 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -7,7 +7,8 @@ import {connectToContainer} from 'lib'; import {isDateTime} from 'plotly.js/src/lib'; import {isJSDate} from 'plotly.js/src/lib/dates'; -const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; // eslint-disable-line +const MILISECONDS_IN_MINUTE = 1000 * 60; +const MILLISECONDS_IN_DAY = MILISECONDS_IN_MINUTE * 60 * 24; // eslint-disable-line const DAYS_IN_MONTH = 30; class UnconnectedBinSize extends Component { @@ -29,6 +30,10 @@ class UnconnectedBinSize extends Component { adjustedValue = adjustedValue * MILLISECONDS_IN_DAY; } + if (this.state.units === 'minutes') { + adjustedValue = adjustedValue * MILISECONDS_IN_MINUTE; + } + this.props.updatePlot(adjustedValue); } @@ -55,6 +60,9 @@ class UnconnectedBinSize extends Component { if (this.state.units === 'days') { return Math.round(value / MILLISECONDS_IN_DAY); } + if (this.state.units === 'minutes') { + return Math.round(value / MILISECONDS_IN_MINUTE); + } if (this.state.units === 'milliseconds') { return value; } @@ -72,9 +80,10 @@ class UnconnectedBinSize extends Component { this.onUnitChange(value)} activeOption={this.state.units} From fc1a9888f26a16435576930c397dec776cb77262 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 18 Dec 2018 10:43:12 -0500 Subject: [PATCH 07/10] Added dropdown and seconds support --- src/components/fields/BinSize.js | 34 +++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index 05f74c469..19913ecb4 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -1,14 +1,15 @@ import React, {Component} from 'react'; import Field from './Field'; -import RadioBlocks from '../widgets/RadioBlocks'; +import Dropdown from '../widgets/Dropdown'; import NumericInput from '../widgets/NumericInput'; import PropTypes from 'prop-types'; import {connectToContainer} from 'lib'; import {isDateTime} from 'plotly.js/src/lib'; import {isJSDate} from 'plotly.js/src/lib/dates'; -const MILISECONDS_IN_MINUTE = 1000 * 60; -const MILLISECONDS_IN_DAY = MILISECONDS_IN_MINUTE * 60 * 24; // eslint-disable-line +const MILLISECONDS_IN_SECOND = 1000; +const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60; // eslint-disable-line +const MILLISECONDS_IN_DAY = MILLISECONDS_IN_MINUTE * 60 * 24; // eslint-disable-line const DAYS_IN_MONTH = 30; class UnconnectedBinSize extends Component { @@ -31,7 +32,11 @@ class UnconnectedBinSize extends Component { } if (this.state.units === 'minutes') { - adjustedValue = adjustedValue * MILISECONDS_IN_MINUTE; + adjustedValue = adjustedValue * MILLISECONDS_IN_MINUTE; + } + + if (this.state.seconds === 'seconds') { + adjustedValue = adjustedValue * MILLISECONDS_IN_SECOND; } this.props.updatePlot(adjustedValue); @@ -61,7 +66,10 @@ class UnconnectedBinSize extends Component { return Math.round(value / MILLISECONDS_IN_DAY); } if (this.state.units === 'minutes') { - return Math.round(value / MILISECONDS_IN_MINUTE); + return Math.round(value / MILLISECONDS_IN_MINUTE); + } + if (this.state.units === 'seconds') { + return Math.round(value / MILLISECONDS_IN_SECOND); } if (this.state.units === 'milliseconds') { return value; @@ -78,15 +86,17 @@ class UnconnectedBinSize extends Component { return BinStartIsDate ? ( - this.onUnitChange(value)} - activeOption={this.state.units} + clearable={false} + onChange={value => this.onUnitChange(value)} + value={this.state.units} />
Date: Tue, 18 Dec 2018 14:50:08 -0500 Subject: [PATCH 08/10] adjust initial unit --- src/components/fields/BinSize.js | 53 ++++++++++++++++++++++++++------ 1 file changed, 43 insertions(+), 10 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index 19913ecb4..feda4beab 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -12,11 +12,40 @@ const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60; // eslint-disable-li const MILLISECONDS_IN_DAY = MILLISECONDS_IN_MINUTE * 60 * 24; // eslint-disable-line const DAYS_IN_MONTH = 30; +function getSmallestUnit(milliseconds) { + const units = { + seconds: MILLISECONDS_IN_SECOND, + minutes: MILLISECONDS_IN_MINUTE, + days: MILLISECONDS_IN_DAY, + }; + + let smallestUnit = 'milliseconds'; + + ['seconds', 'minutes', 'days'].forEach(unit => { + if ( + milliseconds % units[unit] === 0 && + (smallestUnit === 'milliseconds' || + (smallestUnit !== 'milliseconds' && + milliseconds / units[smallestUnit] > milliseconds / units[unit])) + ) { + smallestUnit = unit; + } + }); + + return smallestUnit; +} + class UnconnectedBinSize extends Component { - constructor() { - super(); + constructor(props) { + super(props); + + const initialUnit = + props.fullValue && typeof props.fullValue === 'string' && props.fullValue[0] === 'M' + ? 'months' + : getSmallestUnit(props.fullValue); + this.state = { - units: 'months', + units: initialUnit, }; } @@ -35,7 +64,7 @@ class UnconnectedBinSize extends Component { adjustedValue = adjustedValue * MILLISECONDS_IN_MINUTE; } - if (this.state.seconds === 'seconds') { + if (this.state.units === 'seconds') { adjustedValue = adjustedValue * MILLISECONDS_IN_SECOND; } @@ -59,20 +88,24 @@ class UnconnectedBinSize extends Component { } getDisplayValue(value) { - if (this.state.units === 'months' && typeof value === 'string' && value[0] === 'M') { - return parseInt(value.substring(1), 10); + const numericValue = + typeof value === 'string' && value[0] === 'M' ? parseInt(value.substring(1), 10) : value; + + if (this.state.units === 'months') { + return numericValue; } + if (this.state.units === 'days') { - return Math.round(value / MILLISECONDS_IN_DAY); + return Math.round(numericValue / MILLISECONDS_IN_DAY); } if (this.state.units === 'minutes') { - return Math.round(value / MILLISECONDS_IN_MINUTE); + return Math.round(numericValue / MILLISECONDS_IN_MINUTE); } if (this.state.units === 'seconds') { - return Math.round(value / MILLISECONDS_IN_SECOND); + return Math.round(numericValue / MILLISECONDS_IN_SECOND); } if (this.state.units === 'milliseconds') { - return value; + return numericValue; } return null; } From 3fb5ead82a1a5f768deb4daecb0f747ae6a89487 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 18 Dec 2018 15:12:36 -0500 Subject: [PATCH 09/10] Add years into dropdown --- src/components/fields/BinSize.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/fields/BinSize.js b/src/components/fields/BinSize.js index feda4beab..f05143825 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/BinSize.js @@ -11,6 +11,7 @@ const MILLISECONDS_IN_SECOND = 1000; const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60; // eslint-disable-line const MILLISECONDS_IN_DAY = MILLISECONDS_IN_MINUTE * 60 * 24; // eslint-disable-line const DAYS_IN_MONTH = 30; +const MONTHS_IN_YEAR = 12; //eslint-disable-line function getSmallestUnit(milliseconds) { const units = { @@ -41,7 +42,9 @@ class UnconnectedBinSize extends Component { const initialUnit = props.fullValue && typeof props.fullValue === 'string' && props.fullValue[0] === 'M' - ? 'months' + ? parseInt(props.fullValue.substring(1), 10) % MONTHS_IN_YEAR === 0 + ? 'years' + : 'months' : getSmallestUnit(props.fullValue); this.state = { @@ -52,6 +55,10 @@ class UnconnectedBinSize extends Component { update(value) { let adjustedValue = value < 0 ? 0 : value; + if (this.state.units === 'years') { + adjustedValue = 'M' + adjustedValue * MONTHS_IN_YEAR; + } + if (this.state.units === 'months') { adjustedValue = 'M' + adjustedValue; } @@ -80,7 +87,8 @@ class UnconnectedBinSize extends Component { : this.props.fullValue; this.setState({units: value}); - if (value === 'months') { + + if (['years', 'months'].includes(value)) { this.props.updatePlot('M' + Math.round(milliseconds / MILLISECONDS_IN_DAY / DAYS_IN_MONTH)); } else { this.props.updatePlot(milliseconds); @@ -91,10 +99,12 @@ class UnconnectedBinSize extends Component { const numericValue = typeof value === 'string' && value[0] === 'M' ? parseInt(value.substring(1), 10) : value; + if (this.state.units === 'years') { + return numericValue / MONTHS_IN_YEAR; + } if (this.state.units === 'months') { return numericValue; } - if (this.state.units === 'days') { return Math.round(numericValue / MILLISECONDS_IN_DAY); } @@ -121,6 +131,7 @@ class UnconnectedBinSize extends Component { Date: Thu, 3 Jan 2019 11:32:17 -0500 Subject: [PATCH 10/10] Rename BinSize to AxisInterval --- src/components/fields/{BinSize.js => AxisInterval.js} | 10 +++++----- src/components/fields/index.js | 4 ++-- src/components/index.js | 4 ++-- src/default_panels/StyleTracesPanel.js | 6 +++--- src/styles/components/widgets/_numeric-input.scss | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) rename src/components/fields/{BinSize.js => AxisInterval.js} (95%) diff --git a/src/components/fields/BinSize.js b/src/components/fields/AxisInterval.js similarity index 95% rename from src/components/fields/BinSize.js rename to src/components/fields/AxisInterval.js index f05143825..cd460aa6a 100644 --- a/src/components/fields/BinSize.js +++ b/src/components/fields/AxisInterval.js @@ -36,7 +36,7 @@ function getSmallestUnit(milliseconds) { return smallestUnit; } -class UnconnectedBinSize extends Component { +class UnconnectedAxisInterval extends Component { constructor(props) { super(props); @@ -146,7 +146,7 @@ class UnconnectedBinSize extends Component { this.update(value)} - editableClassName="binsize-milliseconds" + editableClassName="AxisInterval-milliseconds" /> ) : ( @@ -160,11 +160,11 @@ class UnconnectedBinSize extends Component { } } -UnconnectedBinSize.contextTypes = { +UnconnectedAxisInterval.contextTypes = { localize: PropTypes.func, }; -UnconnectedBinSize.propTypes = { +UnconnectedAxisInterval.propTypes = { fullValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), updatePlot: PropTypes.func, attr: PropTypes.string, @@ -172,4 +172,4 @@ UnconnectedBinSize.propTypes = { ...Field.propTypes, }; -export default connectToContainer(UnconnectedBinSize); +export default connectToContainer(UnconnectedAxisInterval); diff --git a/src/components/fields/index.js b/src/components/fields/index.js index 9c2a26f8d..cfae37e96 100644 --- a/src/components/fields/index.js +++ b/src/components/fields/index.js @@ -32,7 +32,7 @@ import DropdownCustom from './DropdownCustom'; import MultiColorPicker from './MultiColorPicker'; import RectanglePositioner from './RectanglePositioner'; import LocationSelector from './LocationSelector'; -import BinSize from './BinSize'; +import AxisInterval from './AxisInterval'; import { AnnotationArrowRef, AnnotationRef, @@ -124,6 +124,6 @@ export { LocationSelector, HoveronDropdown, HovermodeDropdown, - BinSize, + AxisInterval, NumericOrDate, }; diff --git a/src/components/index.js b/src/components/index.js index 17a33c501..7109c5704 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -60,7 +60,7 @@ import { HovermodeDropdown, TickFormat, NumericOrDate, - BinSize, + AxisInterval, } from './fields'; import { @@ -182,5 +182,5 @@ export { HoveronDropdown, HovermodeDropdown, NumericOrDate, - BinSize, + AxisInterval, }; diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js index 7972a4d49..28e7c4fd5 100644 --- a/src/default_panels/StyleTracesPanel.js +++ b/src/default_panels/StyleTracesPanel.js @@ -34,7 +34,7 @@ import { VisibilitySelect, GroupCreator, NumericOrDate, - BinSize, + AxisInterval, } from '../components'; import { BinningDropdown, @@ -230,12 +230,12 @@ const StyleTracesPanel = (props, {localize: _}) => ( - + - + diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index 9c1226515..be383d268 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -85,6 +85,6 @@ fill: var(--color-text-base) !important; } -.binsize-milliseconds { +.AxisInterval-milliseconds { width: 50%; }