correct histogram binning options

Author: dmt0

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;

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 (
     <TraceAccordion
       canAdd
@@ -59,11 +63,26 @@ const GraphCreatePanel = (props, {localize: _}) => {
         options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
       />
       <HistogramInfoVertical>
-        {_('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 '
+        )}
+        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        {_(' panel. If Y values are omitted, the histogram function defaults to Count.')}
       </HistogramInfoVertical>
       <HistogramInfoHorizontal>
-        {_('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 '
+        )}
+        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        {_(' panel. If X values are omitted, the histogram function defaults to Count.')}
       </HistogramInfoHorizontal>
+      <Histogram2d>
+        {_(
+          '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 '
+        )}
+        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+        {_(' panel. If Z values are omitted, the histogram function defaults to Count.')}
+      </Histogram2d>
       <DataSelector label={_('I (Optional)')} attr="i" />
       <DataSelector label={_('J (Optional)')} attr="j" />
       <DataSelector label={_('K (Optional)')} attr="k" />
@@ -132,4 +151,5 @@ const GraphCreatePanel = (props, {localize: _}) => {
 export default GraphCreatePanel;
 GraphCreatePanel.contextTypes = {
   localize: PropTypes.func,
+  setPanel: PropTypes.func,
 };

src/default_panels/StyleTracesPanel.js

@@ -51,17 +51,20 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <NumericFraction label={_('Trace Opacity')} attr="opacity" />
     <MultiColorPicker label={_('Color')} attr="color" />
     <PieColorscalePicker label={_('Colors')} attr="marker.colors" />
-    <Dropdown
-      label={_('Histogram Normalization')}
-      options={[
-        {label: _('Number of Occurences'), value: ''},
-        {label: _('Percent'), value: 'percent'},
-        {label: _('Probability'), value: 'probability'},
-        {label: _('Density'), value: 'density'},
-        {label: _('Probability Density'), value: 'probability density'},
-      ]}
-      attr="histnorm"
-    />
+    <PlotlySection name={_('Values')}>
+      <BinningDropdown label={_('Histogram Function')} attr="histfunc" />
+      <Dropdown
+        label={_('Histogram Normalization')}
+        options={[
+          {label: _('Number of Occurences'), value: ''},
+          {label: _('Percent'), value: 'percent'},
+          {label: _('Probability'), value: 'probability'},
+          {label: _('Density'), value: 'density'},
+          {label: _('Probability Density'), value: 'probability density'},
+        ]}
+        attr="histnorm"
+      />
+    </PlotlySection>
     <PlotlySection name={_('Cumulative')}>
       <Radio
         label={_('Cumulative')}
@@ -139,7 +142,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Binning')}>
-      <BinningDropdown label={_('Binning Function')} attr="histfunc" />
       <Radio
         label={_('X Binning')}
         attr="autobinx"