Show column chart for categorical feature in data explorer (#1355)

* Show column chart for categorical feature in data explorer

* address comments

libs/dataset-explorer/src/lib/getDatasetBar.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IGenericChartProps, JointDataset } from "@responsible-ai/core-ui";
+import { IPlotlyProperty } from "@responsible-ai/mlchartlib";
+import _ from "lodash";
+
+interface IDatasetExplorerSeries {
+  name: string;
+  color?: any;
+  data: any[];
+}
+
+export function getDatasetBar(
+  jointData: JointDataset,
+  plotlyProps: IPlotlyProperty,
+  chartProps?: IGenericChartProps
+): IDatasetExplorerSeries[] {
+  const result: IDatasetExplorerSeries[] = [];
+  const groupedData = new Map<string, number[]>();
+  const customData = plotlyProps.data[0].customdata;
+  const xData = plotlyProps.data[0].x;
+  const xDataTypeCount =
+    chartProps?.xAxis.property &&
+    jointData.metaDict[chartProps.xAxis.property].sortedCategoricalValues
+      ?.length;
+
+  if (customData && xData) {
+    for (const [i, customDatum] of customData.entries()) {
+      const yValue = (customDatum as any).Y;
+      if (!groupedData[yValue]) {
+        groupedData[yValue] = new Array(xDataTypeCount).fill(0);
+      }
+      groupedData[yValue][xData[i]] += 1;
+    }
+  }
+
+  if (chartProps?.yAxis.property) {
+    jointData.metaDict[
+      chartProps.yAxis.property
+    ].sortedCategoricalValues?.forEach((value) => {
+      result.push({
+        data: groupedData[value],
+        name: value
+      });
+    });
+  }
+
+  return result;
+}

libs/dataset-explorer/src/lib/getDatasetBarOption.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IGenericChartProps, JointDataset } from "@responsible-ai/core-ui";
+import { IPlotlyProperty } from "@responsible-ai/mlchartlib";
+import _ from "lodash";
+
+import { getDatasetBar } from "./getDatasetBar";
+
+export function getDatasetBarOption(
+  jointData: JointDataset,
+  plotlyProps: IPlotlyProperty,
+  chartProps?: IGenericChartProps
+): any {
+  const series = getDatasetBar(jointData, plotlyProps, chartProps);
+  const xAxisProp = chartProps?.xAxis.property;
+
+  return {
+    chart: {
+      type: "column"
+    },
+    series,
+    xAxis: {
+      categories:
+        xAxisProp && jointData.metaDict[xAxisProp].sortedCategoricalValues
+    }
+  };
+}

libs/dataset-explorer/src/lib/getDatasetOption.ts

@@ -9,6 +9,7 @@ import {
 import { IPlotlyProperty } from "@responsible-ai/mlchartlib";
 import _ from "lodash";
 
+import { getDatasetBarOption } from "./getDatasetBarOption";
 import { getDatasetBoxOption } from "./getDatasetBoxOption";
 import { getDatasetScatterOption } from "./getDatasetScatterOption";
 
@@ -20,5 +21,13 @@ export function getDatasetOption(
   if (chartProps?.chartType === ChartTypes.Scatter) {
     return getDatasetScatterOption(jointData, plotlyProps, chartProps);
   }
+  const yAxisProp = chartProps?.yAxis.property;
+  if (
+    yAxisProp &&
+    (jointData.metaDict[yAxisProp].isCategorical ||
+      jointData.metaDict[yAxisProp].treatAsCategorical)
+  ) {
+    return getDatasetBarOption(jointData, plotlyProps, chartProps);
+  }
   return getDatasetBoxOption(plotlyProps);
 }