Skip to content

Commit 98313ec

Browse files
dmt0dmt0
authored
Merge pull request #713 from plotly/histogram-options
Histogram options
2 parents bb12ed5 + f75c013 commit 98313ec

File tree

4 files changed

+77
-51
lines changed

4 files changed

+77
-51
lines changed

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@
1313
"draft-js-import-html": "^1.2.1",
1414
"draft-js-utils": "^1.2.0",
1515
"fast-isnumeric": "^1.1.1",
16-
"immutability-helper": "^2.6.4",
16+
"immutability-helper": "^2.7.1",
1717
"plotly-icons": "latest",
1818
"plotly.js": "1.40.1",
1919
"prop-types": "^15.5.10",
2020
"raf": "^3.4.0",
2121
"react-color": "^2.13.8",
2222
"react-colorscales": "0.6.1",
23-
"react-dropzone": "^4.2.9",
23+
"react-dropzone": "^5.0.1",
2424
"react-plotly.js": "^2.2.0",
2525
"react-rangeslider": "^2.2.0",
2626
"react-resizable-rotatable-draggable": "^0.1.8",
27-
"react-select": "^1.2.0",
27+
"react-select": "^1.3.0",
2828
"react-tabs": "^2.2.1",
2929
"styled-components": "^3.3.3",
3030
"tinycolor2": "^1.4.1"
3131
},
3232
"devDependencies": {
3333
"@percy/react": "^0.4.3",
34-
"autoprefixer": "^7.2.3",
34+
"autoprefixer": "^9.1.3",
3535
"babel-cli": "^6.26.0",
3636
"babel-core": "^6.26.0",
3737
"babel-eslint": "^8.0.2",
@@ -43,36 +43,36 @@
4343
"babel-preset-react": "^6.24.1",
4444
"babel-preset-stage-2": "^6.24.1",
4545
"babel-traverse": "^6.26.0",
46-
"css-loader": "^0.28.9",
47-
"cssnano": "^3.10.0",
46+
"css-loader": "^1.0.0",
47+
"cssnano": "^4.1.0",
4848
"enzyme": "^3.1.0",
4949
"enzyme-adapter-react-16": "^1.0.4",
50-
"eslint": "^4.12.1",
51-
"eslint-config-prettier": "^2.7.0",
50+
"eslint": "^5.4.0",
51+
"eslint-config-prettier": "^3.0.1",
5252
"eslint-plugin-import": "^2.8.0",
5353
"eslint-plugin-react": "^7.4.0",
5454
"eslint-plugin-react-percy": "^0.2.1",
5555
"fs": "^0.0.1-security",
5656
"gl": "^4.0.4",
5757
"glob": "^7.1.2",
58-
"jest": "^21.2.1",
59-
"jest-cli": "^22.0.4",
58+
"jest": "^23.5.0",
59+
"jest-cli": "^23.5.0",
6060
"mkdirp": "^0.5.1",
6161
"node-sass": "^4.7.2",
62-
"postcss": "^6.0.14",
63-
"postcss-combine-duplicated-selectors": "^3.1.4",
64-
"postcss-custom-properties": "^6.2.0",
62+
"postcss": "^7.0.2",
63+
"postcss-combine-duplicated-selectors": "^6.0.2",
64+
"postcss-custom-properties": "^7.0.0",
6565
"postcss-remove-root": "^0.0.2",
66-
"prettier": "1.12.1",
66+
"prettier": "1.14.2",
6767
"react": "^16.0.0",
68-
"react-ace": "^5.9.0",
68+
"react-ace": "^6.1.4",
6969
"react-dom": "^16.0.0",
7070
"react-hot-loader": "^4.0.0-beta.21",
7171
"react-inspector": "^2.2.2",
7272
"react-test-renderer": "^16.2.0",
7373
"rimraf": "2.6.2",
74-
"sass-loader": "^6.0.6",
75-
"style-loader": "^0.19.1",
74+
"sass-loader": "^7.1.0",
75+
"style-loader": "^0.23.0",
7676
"webpack": "^3.10.0",
7777
"webpack-dev-server": "^2.11.1"
7878
},

‎src/components/fields/derived.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -127,22 +127,19 @@ export const BinningNumeric = connectToContainer(UnconnectedNumeric, {
127127
export const BinningDropdown = connectToContainer(UnconnectedDropdown, {
128128
modifyPlotProps: (props, context, plotProps) => {
129129
const {localize: _} = context;
130-
plotProps.options =
131-
plotProps.fullContainer.orientation === 'v'
132-
? [
133-
{label: _('Count X'), value: 'count'},
134-
{label: _('Sum Y'), value: 'sum'},
135-
{label: _('Average Y'), value: 'avg'},
136-
{label: _('Minimum Y'), value: 'min'},
137-
{label: _('Maximum Y'), value: 'max'},
138-
]
139-
: [
140-
{label: _('Count Y'), value: 'count'},
141-
{label: _('Sum X'), value: 'sum'},
142-
{label: _('Average X'), value: 'avg'},
143-
{label: _('Minimum X'), value: 'min'},
144-
{label: _('Maximum X'), value: 'max'},
145-
];
130+
const axis =
131+
plotProps.fullContainer.type === 'histogram2d'
132+
? 'Z'
133+
: plotProps.fullContainer.orientation === 'v'
134+
? 'Y'
135+
: 'X';
136+
plotProps.options = [
137+
{label: _('Count ') + axis, value: 'count'},
138+
{label: _('Sum ') + axis, value: 'sum'},
139+
{label: _('Average ') + axis, value: 'avg'},
140+
{label: _('Minimum ') + axis, value: 'min'},
141+
{label: _('Maximum ') + axis, value: 'max'},
142+
];
146143
},
147144
});
148145

@@ -169,6 +166,13 @@ export const HistogramInfoHorizontal = connectToContainer(Info, {
169166
},
170167
});
171168

169+
export const Histogram2d = connectToContainer(Info, {
170+
modifyPlotProps: (props, context, plotProps) => {
171+
plotProps.isVisible = context.fullContainer.type === 'histogram2d';
172+
return plotProps;
173+
},
174+
});
175+
172176
export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, {
173177
modifyPlotProps: (props, context, plotProps) => {
174178
const {fullContainer} = plotProps;
@@ -219,12 +223,12 @@ const numericFractionModifyPlotProps = (props, context, plotProps) => {
219223
const min = (attrMeta && attrMeta.min) || 0;
220224
const max = (attrMeta && attrMeta.max) || 1;
221225
if (isNumeric(fullValue)) {
222-
plotProps.fullValue = Math.round(100 * (fullValue - min) / (max - min));
226+
plotProps.fullValue = Math.round((100 * (fullValue - min)) / (max - min));
223227
}
224228

225229
plotProps.updatePlot = v => {
226230
if (isNumeric(v)) {
227-
updatePlot(v / 100 * (max - min) + min);
231+
updatePlot((v / 100) * (max - min) + min);
228232
} else {
229233
updatePlot(v);
230234
}

‎src/default_panels/GraphCreatePanel.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ import {
1212
TraceTypeSection,
1313
LocationSelector,
1414
} from '../components';
15-
import {HistogramInfoVertical, HistogramInfoHorizontal} from '../components/fields/derived';
15+
import {
16+
HistogramInfoVertical,
17+
HistogramInfoHorizontal,
18+
Histogram2d,
19+
} from '../components/fields/derived';
1620

17-
const GraphCreatePanel = (props, {localize: _}) => {
21+
const GraphCreatePanel = (props, {localize: _, setPanel}) => {
1822
return (
1923
<TraceAccordion
2024
canAdd
@@ -59,11 +63,26 @@ const GraphCreatePanel = (props, {localize: _}) => {
5963
options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
6064
/>
6165
<HistogramInfoVertical>
62-
{_('Note: in vertical orientation, X values are used for bins and Y values for weights.')}
66+
{_(
67+
'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 '
68+
)}
69+
<a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
70+
{_(' panel. If Y values are omitted, the histogram function defaults to Count.')}
6371
</HistogramInfoVertical>
6472
<HistogramInfoHorizontal>
65-
{_('Note: in horizontal orientation, Y Values are used for bins and X values for weights.')}
73+
{_(
74+
'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 '
75+
)}
76+
<a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
77+
{_(' panel. If X values are omitted, the histogram function defaults to Count.')}
6678
</HistogramInfoHorizontal>
79+
<Histogram2d>
80+
{_(
81+
'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 '
82+
)}
83+
<a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
84+
{_(' panel. If Z values are omitted, the histogram function defaults to Count.')}
85+
</Histogram2d>
6786
<DataSelector label={_('I (Optional)')} attr="i" />
6887
<DataSelector label={_('J (Optional)')} attr="j" />
6988
<DataSelector label={_('K (Optional)')} attr="k" />
@@ -132,4 +151,5 @@ const GraphCreatePanel = (props, {localize: _}) => {
132151
export default GraphCreatePanel;
133152
GraphCreatePanel.contextTypes = {
134153
localize: PropTypes.func,
154+
setPanel: PropTypes.func,
135155
};

‎src/default_panels/StyleTracesPanel.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,20 @@ const StyleTracesPanel = (props, {localize: _}) => (
5151
<NumericFraction label={_('Trace Opacity')} attr="opacity" />
5252
<MultiColorPicker label={_('Color')} attr="color" />
5353
<PieColorscalePicker label={_('Colors')} attr="marker.colors" />
54-
<Dropdown
55-
label={_('Histogram Normalization')}
56-
options={[
57-
{label: _('Number of Occurences'), value: ''},
58-
{label: _('Percent'), value: 'percent'},
59-
{label: _('Probability'), value: 'probability'},
60-
{label: _('Density'), value: 'density'},
61-
{label: _('Probability Density'), value: 'probability density'},
62-
]}
63-
attr="histnorm"
64-
/>
54+
<PlotlySection name={_('Values')}>
55+
<BinningDropdown label={_('Histogram Function')} attr="histfunc" />
56+
<Dropdown
57+
label={_('Histogram Normalization')}
58+
options={[
59+
{label: _('Number of Occurences'), value: ''},
60+
{label: _('Percent'), value: 'percent'},
61+
{label: _('Probability'), value: 'probability'},
62+
{label: _('Density'), value: 'density'},
63+
{label: _('Probability Density'), value: 'probability density'},
64+
]}
65+
attr="histnorm"
66+
/>
67+
</PlotlySection>
6568
<PlotlySection name={_('Cumulative')}>
6669
<Radio
6770
label={_('Cumulative')}
@@ -139,7 +142,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
139142
/>
140143
</PlotlySection>
141144
<PlotlySection name={_('Binning')}>
142-
<BinningDropdown label={_('Binning Function')} attr="histfunc" />
143145
<Radio
144146
label={_('X Binning')}
145147
attr="autobinx"

0 commit comments

Comments
 (0)