[TSVB] Disable enableHistogramMode prop when user selects non-stacked…

… bar (#74930)

* Remove enableHistogramMode prop from TSVB as it causes bugs with non-stacked bars

* Disable enableHistogramMode property to false only when thr user selects the nobn-stacked option

* small change to be more human readbale

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -31,7 +31,6 @@ import { MarkdownSimple } from '../../../../../../../plugins/kibana_react/public
 import { replaceVars } from '../../lib/replace_vars';
 import { getAxisLabelString } from '../../lib/get_axis_label_string';
 import { getInterval } from '../../lib/get_interval';
-import { areFieldsDifferent } from '../../lib/charts';
 import { createXaxisFormatter } from '../../lib/create_xaxis_formatter';
 import { STACKED_OPTIONS } from '../../../visualizations/constants';
 import { getCoreStart } from '../../../../services';
@@ -164,7 +163,6 @@ export class TimeseriesVisualization extends Component {
     const mainAxisGroupId = yAxisIdGenerator('main_group');
 
     const seriesModel = model.series.filter((s) => !s.hidden).map((s) => cloneDeep(s));
-    const enableHistogramMode = areFieldsDifferent('chart_type')(seriesModel);
     const firstSeries = seriesModel.find((s) => s.formatter && !s.separate_axis);
 
     const mainAxisScaleType = TimeseriesVisualization.getAxisScaleType(model);
@@ -243,7 +241,6 @@ export class TimeseriesVisualization extends Component {
           series={series}
           yAxis={yAxis}
           onBrush={onBrush}
-          enableHistogramMode={enableHistogramMode}
           backgroundColor={model.background_color}
           showGrid={Boolean(model.show_grid)}
           legend={Boolean(model.show_legend)}

src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js

@@ -67,7 +67,6 @@ export const TimeSeries = ({
   onBrush,
   xAxisFormatter,
   annotations,
-  enableHistogramMode,
 }) => {
   const chartRef = useRef();
   const updateCursor = (_, cursor) => {
@@ -181,6 +180,7 @@ export const TimeSeries = ({
         ) => {
           const stackAccessors = getStackAccessors(stack);
           const isPercentage = stack === STACKED_OPTIONS.PERCENT;
+          const isStacked = stack !== STACKED_OPTIONS.NONE;
           const key = `${id}-${label}`;
           // Only use color mapping if there is no color from the server
           const finalColor = color ?? colors.mappedColors.mapping[label];
@@ -201,7 +201,7 @@ export const TimeSeries = ({
                 xScaleType={xScaleType}
                 yScaleType={yScaleType}
                 timeZone={timeZone}
-                enableHistogramMode={enableHistogramMode}
+                enableHistogramMode={isStacked}
                 useDefaultGroupDomain={useDefaultGroupDomain}
                 sortIndex={sortIndex}
                 y1AccessorFormat={y1AccessorFormat}
@@ -227,7 +227,7 @@ export const TimeSeries = ({
                 xScaleType={xScaleType}
                 yScaleType={yScaleType}
                 timeZone={timeZone}
-                enableHistogramMode={enableHistogramMode}
+                enableHistogramMode={isStacked}
                 useDefaultGroupDomain={useDefaultGroupDomain}
                 sortIndex={sortIndex}
                 y1AccessorFormat={y1AccessorFormat}
@@ -283,5 +283,4 @@ TimeSeries.propTypes = {
   onBrush: PropTypes.func,
   xAxisFormatter: PropTypes.func,
   annotations: PropTypes.array,
-  enableHistogramMode: PropTypes.bool.isRequired,
 };