[Explore vis] Fix histogram missing bucket (opensearch-project#11298)

fix: histogram x-axis be displayed as category, refactor histogram with custom series so the x-axis can be properly
encoded as number

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>

---------

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: ruanyl

changelogs/fragments/11298.yml

@@ -0,0 +1,2 @@
+fix:
+- Histogram x-axis incorrectly have type 'category' ([#11298](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11298))

src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts

@@ -22,7 +22,6 @@ import { BarChartStyle } from './bar_vis_config';
 import { getColors, DEFAULT_GREY } from '../theme/default_colors';
 import { BaseChartStyle, PipelineFn, EChartsSpecState } from '../utils/echarts_spec';
 import { getSeriesDisplayName } from '../utils/series';
-import { HistogramChartStyle } from '../histogram/histogram_vis_config';
 
 export const inferTimeIntervals = (data: Array<Record<string, any>>, field: string | undefined) => {
   if (!data || data.length === 0 || !field) {
@@ -196,19 +195,11 @@ export const buildThresholdColorEncoding = (
   return colorLayer;
 };
 
-type Options =
-  | {
-      kind: 'bar';
-      styles: BarChartStyle;
-      categoryField: string;
-      seriesFields: string[] | ((headers?: string[]) => string[]);
-    }
-  | {
-      kind: 'histogram';
-      styles: HistogramChartStyle;
-      categoryField: string;
-      seriesFields: string[] | ((headers?: string[]) => string[]);
-    };
+interface Options {
+  styles: BarChartStyle;
+  categoryField: string;
+  seriesFields: string[] | ((headers?: string[]) => string[]);
+}
 
 /**
  * Create bar series configuration
@@ -226,23 +217,17 @@ export const createBarSeries = <T extends BaseChartStyle>(options: Options): Pip
     seriesFields = seriesFields(transformedData[0]);
   }
 
-  const thresholdLines =
-    options.kind === 'bar'
-      ? generateThresholdLines(options.styles?.thresholdOptions, options.styles?.switchAxes)
-      : generateThresholdLines(options.styles?.thresholdOptions);
+  const thresholdLines = generateThresholdLines(
+    options.styles?.thresholdOptions,
+    options.styles?.switchAxes
+  );
 
-  const encodeX =
-    options.kind === 'bar' ? adjustOppositeSymbol(options.styles?.switchAxes, 'x') : 'x';
-  const encodeY =
-    options.kind === 'bar' ? adjustOppositeSymbol(options.styles?.switchAxes, 'y') : 'y';
+  const encodeX = adjustOppositeSymbol(options.styles?.switchAxes, 'x');
+  const encodeY = adjustOppositeSymbol(options.styles?.switchAxes, 'y');
 
   let barWidth: string | undefined;
   if (styles.barSizeMode === 'manual') {
     barWidth = `${(styles.barWidth || 0.7) * 100}%`;
-  } else {
-    if (options.kind === 'histogram') {
-      barWidth = '99%';
-    }
   }
 
   const series = seriesFields.map((seriesField, index) => {
@@ -298,7 +283,6 @@ export const createFacetBarSeries = <T extends BaseChartStyle>({
   // facet into one chart
   if (!Array.isArray(transformedData?.[0]?.[0])) {
     const simpleBar = createBarSeries({
-      kind: 'bar',
       styles,
       categoryField,
       seriesFields,

src/plugins/explore/public/components/visualizations/bar/to_expression.ts

@@ -101,7 +101,7 @@ export const createBarSpec = (
       buildVisMap({
         seriesFields: (headers) => (headers ?? []).filter((h) => h !== categoryField),
       }),
-      createBarSeries({ kind: 'bar', styles, categoryField, seriesFields: [valueField] }),
+      createBarSeries({ styles, categoryField, seriesFields: [valueField] }),
       assembleSpec
     )({
       data: transformedData,
@@ -251,7 +251,6 @@ export const createTimeBarChart = (
         seriesFields: (headers) => (headers ?? []).filter((h) => h !== timeField),
       }),
       createBarSeries({
-        kind: 'bar',
         styles,
         categoryField: timeField,
         seriesFields: [valueField],
@@ -421,7 +420,6 @@ export const createGroupedTimeBarChart = (
         seriesFields: (headers) => (headers ?? []).filter((h) => h !== timeField),
       }),
       createBarSeries({
-        kind: 'bar',
         styles,
         categoryField: timeField,
         seriesFields(headers) {
@@ -787,7 +785,6 @@ export const createStackedBarSpec = (
         seriesFields: (headers) => (headers ?? []).filter((h) => h !== categoryField),
       }),
       createBarSeries({
-        kind: 'bar',
         styles,
         categoryField,
         seriesFields(headers) {
@@ -930,7 +927,7 @@ export const createDoubleNumericalBarChart = (
       buildVisMap({
         seriesFields: (headers) => (headers ?? []).filter((h) => h !== categoryField),
       }),
-      createBarSeries({ kind: 'bar', styles, categoryField, seriesFields: [valueField] }),
+      createBarSeries({ styles, categoryField, seriesFields: [valueField] }),
       assembleSpec
     )({
       data: transformedData,