diff --git a/package.json b/package.json index 15fcf3b81..e7e764fb3 100644 --- a/package.json +++ b/package.json @@ -13,25 +13,25 @@ "draft-js-import-html": "^1.2.1", "draft-js-utils": "^1.2.0", "fast-isnumeric": "^1.1.1", - "immutability-helper": "^2.6.4", + "immutability-helper": "^2.7.1", "plotly-icons": "latest", "plotly.js": "1.40.1", "prop-types": "^15.5.10", "raf": "^3.4.0", "react-color": "^2.13.8", "react-colorscales": "0.6.1", - "react-dropzone": "^4.2.9", + "react-dropzone": "^5.0.1", "react-plotly.js": "^2.2.0", "react-rangeslider": "^2.2.0", "react-resizable-rotatable-draggable": "^0.1.8", - "react-select": "^1.2.0", + "react-select": "^1.3.0", "react-tabs": "^2.2.1", "styled-components": "^3.3.3", "tinycolor2": "^1.4.1" }, "devDependencies": { "@percy/react": "^0.4.3", - "autoprefixer": "^7.2.3", + "autoprefixer": "^9.1.3", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-eslint": "^8.0.2", @@ -43,36 +43,36 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-traverse": "^6.26.0", - "css-loader": "^0.28.9", - "cssnano": "^3.10.0", + "css-loader": "^1.0.0", + "cssnano": "^4.1.0", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.4", - "eslint": "^4.12.1", - "eslint-config-prettier": "^2.7.0", + "eslint": "^5.4.0", + "eslint-config-prettier": "^3.0.1", "eslint-plugin-import": "^2.8.0", "eslint-plugin-react": "^7.4.0", "eslint-plugin-react-percy": "^0.2.1", "fs": "^0.0.1-security", "gl": "^4.0.4", "glob": "^7.1.2", - "jest": "^21.2.1", - "jest-cli": "^22.0.4", + "jest": "^23.5.0", + "jest-cli": "^23.5.0", "mkdirp": "^0.5.1", "node-sass": "^4.7.2", - "postcss": "^6.0.14", - "postcss-combine-duplicated-selectors": "^3.1.4", - "postcss-custom-properties": "^6.2.0", + "postcss": "^7.0.2", + "postcss-combine-duplicated-selectors": "^6.0.2", + "postcss-custom-properties": "^7.0.0", "postcss-remove-root": "^0.0.2", - "prettier": "1.12.1", + "prettier": "1.14.2", "react": "^16.0.0", - "react-ace": "^5.9.0", + "react-ace": "^6.1.4", "react-dom": "^16.0.0", "react-hot-loader": "^4.0.0-beta.21", "react-inspector": "^2.2.2", "react-test-renderer": "^16.2.0", "rimraf": "2.6.2", - "sass-loader": "^6.0.6", - "style-loader": "^0.19.1", + "sass-loader": "^7.1.0", + "style-loader": "^0.23.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1" }, diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js index 332062afe..baeb5ae1e 100644 --- a/src/components/fields/derived.js +++ b/src/components/fields/derived.js @@ -127,22 +127,19 @@ export const BinningNumeric = connectToContainer(UnconnectedNumeric, { export const BinningDropdown = connectToContainer(UnconnectedDropdown, { modifyPlotProps: (props, context, plotProps) => { const {localize: _} = context; - plotProps.options = - plotProps.fullContainer.orientation === 'v' - ? [ - {label: _('Count X'), value: 'count'}, - {label: _('Sum Y'), value: 'sum'}, - {label: _('Average Y'), value: 'avg'}, - {label: _('Minimum Y'), value: 'min'}, - {label: _('Maximum Y'), value: 'max'}, - ] - : [ - {label: _('Count Y'), value: 'count'}, - {label: _('Sum X'), value: 'sum'}, - {label: _('Average X'), value: 'avg'}, - {label: _('Minimum X'), value: 'min'}, - {label: _('Maximum X'), value: 'max'}, - ]; + const axis = + plotProps.fullContainer.type === 'histogram2d' + ? 'Z' + : plotProps.fullContainer.orientation === 'v' + ? 'Y' + : 'X'; + plotProps.options = [ + {label: _('Count ') + axis, value: 'count'}, + {label: _('Sum ') + axis, value: 'sum'}, + {label: _('Average ') + axis, value: 'avg'}, + {label: _('Minimum ') + axis, value: 'min'}, + {label: _('Maximum ') + axis, value: 'max'}, + ]; }, }); @@ -169,6 +166,13 @@ export const HistogramInfoHorizontal = connectToContainer(Info, { }, }); +export const Histogram2d = connectToContainer(Info, { + modifyPlotProps: (props, context, plotProps) => { + plotProps.isVisible = context.fullContainer.type === 'histogram2d'; + return plotProps; + }, +}); + export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, { modifyPlotProps: (props, context, plotProps) => { const {fullContainer} = plotProps; @@ -219,12 +223,12 @@ const numericFractionModifyPlotProps = (props, context, plotProps) => { const min = (attrMeta && attrMeta.min) || 0; const max = (attrMeta && attrMeta.max) || 1; if (isNumeric(fullValue)) { - plotProps.fullValue = Math.round(100 * (fullValue - min) / (max - min)); + plotProps.fullValue = Math.round((100 * (fullValue - min)) / (max - min)); } plotProps.updatePlot = v => { if (isNumeric(v)) { - updatePlot(v / 100 * (max - min) + min); + updatePlot((v / 100) * (max - min) + min); } else { updatePlot(v); } diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js index b571fefef..8aff07d7a 100644 --- a/src/default_panels/GraphCreatePanel.js +++ b/src/default_panels/GraphCreatePanel.js @@ -12,9 +12,13 @@ import { TraceTypeSection, LocationSelector, } from '../components'; -import {HistogramInfoVertical, HistogramInfoHorizontal} from '../components/fields/derived'; +import { + HistogramInfoVertical, + HistogramInfoHorizontal, + Histogram2d, +} from '../components/fields/derived'; -const GraphCreatePanel = (props, {localize: _}) => { +const GraphCreatePanel = (props, {localize: _, setPanel}) => { return ( { options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]} /> - {_('Note: in vertical orientation, X values are used for bins and Y values for weights.')} + {_( + 'Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the ' + )} + setPanel('Style', 'Traces')}>{_('Traces')} + {_(' panel. If Y values are omitted, the histogram function defaults to Count.')} - {_('Note: in horizontal orientation, Y Values are used for bins and X values for weights.')} + {_( + 'Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the ' + )} + setPanel('Style', 'Traces')}>{_('Traces')} + {_(' panel. If X values are omitted, the histogram function defaults to Count.')} + + {_( + 'Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the ' + )} + setPanel('Style', 'Traces')}>{_('Traces')} + {_(' panel. If Z values are omitted, the histogram function defaults to Count.')} + @@ -132,4 +151,5 @@ const GraphCreatePanel = (props, {localize: _}) => { export default GraphCreatePanel; GraphCreatePanel.contextTypes = { localize: PropTypes.func, + setPanel: PropTypes.func, }; diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js index 9984fb717..981351f65 100644 --- a/src/default_panels/StyleTracesPanel.js +++ b/src/default_panels/StyleTracesPanel.js @@ -51,17 +51,20 @@ const StyleTracesPanel = (props, {localize: _}) => ( - + + + + ( /> -