Add horizontal bar chart

viz-lib/src/components/visualizations/editor/createTabbedEditor.jsx

@@ -20,7 +20,9 @@ export function TabbedEditor({ tabs, options, data, onOptionsChange, ...restProp
   return (
     <Tabs animated={false} tabBarGutter={20}>
       {map(tabs, ({ key, title, component: Component }) => (
-        <Tabs.TabPane key={key} tab={<span data-test={`VisualizationEditor.Tabs.${key}`}>{title}</span>}>
+        <Tabs.TabPane
+          key={key}
+          tab={<span data-test={`VisualizationEditor.Tabs.${key}`}>{isFunction(title) ? title(options) : title}</span>}>
           <Component options={options} data={data} onOptionsChange={optionsChanged} {...restProps} />
         </Tabs.TabPane>
       ))}
@@ -33,7 +35,10 @@ TabbedEditor.propTypes = {
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func, // (options) => string
+      ]).isRequired,
       isAvailable: PropTypes.func, // (options) => boolean
       component: PropTypes.func.isRequired,
     })

viz-lib/src/visualizations/chart/Editor/ChartTypeSelect.jsx

@@ -1,9 +1,9 @@
-import { map } from "lodash";
+import { filter, includes, map } from "lodash";
 import React, { useMemo } from "react";
 import { Select } from "@/components/visualizations/editor";
 import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
 
-export default function ChartTypeSelect(props) {
+export default function ChartTypeSelect({ hiddenChartTypes, ...props }) {
   const chartTypes = useMemo(() => {
     const result = [
       { type: "line", name: "Line", icon: "line-chart" },
@@ -20,6 +20,10 @@ export default function ChartTypeSelect(props) {
       result.push({ type: "custom", name: "Custom", icon: "code" });
     }
 
+    if (hiddenChartTypes.length > 0) {
+      return filter(result, ({ type }) => !includes(hiddenChartTypes, type));
+    }
+
     return result;
   }, []);
 
@@ -34,3 +38,13 @@ export default function ChartTypeSelect(props) {
     </Select>
   );
 }
+
+ChartTypeSelect.defaultProps = {
+  hiddenChartTypes: [],
+};
+
+ChartTypeSelect.propTypes = {
+  hiddenChartTypes: PropTypes.arrayOf(
+    PropTypes.oneOf(["line", "area", "column", "pie", "scatter", "heatmap", "bubble", "box"])
+  ),
+};

viz-lib/src/visualizations/chart/Editor/ColumnMappingSelect.jsx

@@ -12,9 +12,17 @@ const MappingTypes = {
   zVal: { label: "Color Column" },
 };
 
-export default function ColumnMappingSelect({ value, availableColumns, type, onChange }) {
+const SwappedMappingTypes = {
+  ...MappingTypes,
+  x: { label: "Y Column" },
+  y: { label: "X Columns", multiple: true },
+};
+
+export default function ColumnMappingSelect({ value, availableColumns, type, onChange, areAxesSwapped }) {
   const options = sortBy(filter(uniq(flatten([availableColumns, value])), v => isString(v) && v !== ""));
-  const { label, multiple } = MappingTypes[type];
+
+  // this swaps the ui, as the data will be swapped on render
+  const { label, multiple } = !areAxesSwapped ? MappingTypes[type] : SwappedMappingTypes[type];
 
   return (
     <Section>

viz-lib/src/visualizations/chart/Editor/GeneralSettings.jsx

@@ -83,6 +83,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
     onOptionsChange({
       globalSeriesType,
       showDataLabels: globalSeriesType === "pie",
+      swappedAxes: false,
       seriesOptions: mapValues(options.seriesOptions, series => ({
         ...series,
         type: globalSeriesType,
@@ -106,6 +107,15 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
     }
   }
 
+  function handleAxesSwapping() {
+    // moves any item in the right Y axis to the left one
+    const seriesOptions = mapValues(options.seriesOptions, series => ({
+      ...series,
+      yAxis: 0,
+    }));
+    onOptionsChange({ swappedAxes: !options.swappedAxes, seriesOptions });
+  }
+
   return (
     <React.Fragment>
       <Section>
@@ -117,11 +127,24 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         />
       </Section>
 
+      {includes(["column", "line"], options.globalSeriesType) && (
+        <Section>
+          <Checkbox
+            data-test="Chart.SwappedAxes"
+            defaultChecked={options.swappedAxes}
+            checked={options.swappedAxes}
+            onChange={handleAxesSwapping}>
+            Horizontal Chart
+          </Checkbox>
+        </Section>
+      )}
+
       {map(mappedColumns, (value, type) => (
         <ColumnMappingSelect
           key={type}
           type={type}
           value={value}
+          areAxesSwapped={options.swappedAxes}
           availableColumns={unusedColumns}
           onChange={handleColumnMappingChange}
         />

viz-lib/src/visualizations/chart/Editor/GeneralSettings.test.js

@@ -194,4 +194,19 @@ describe("Visualizations -> Chart -> Editor -> General Settings", () => {
       expect(elementExists(el, "Chart.ColumnMapping.yError")).toBeTruthy();
     });
   });
+
+  test("Toggles horizontal bar chart", done => {
+    const el = mount(
+      {
+        globalSeriesType: "column",
+        series: {},
+      },
+      done
+    );
+
+    findByTestID(el, "Chart.SwappedAxes")
+      .last()
+      .find("input")
+      .simulate("change", { target: { checked: true } });
+  });
 });

viz-lib/src/visualizations/chart/Editor/SeriesSettings.jsx

@@ -39,23 +39,26 @@ function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOptio
   ];
 
   if (!includes(["pie", "heatmap"], options.globalSeriesType)) {
-    result.push({
-      title: "Y Axis",
-      dataIndex: "yAxis",
-      render: (unused, item) => (
-        <Radio.Group
-          className="series-settings-y-axis"
-          value={item.yAxis === 1 ? 1 : 0}
-          onChange={event => updateSeriesOption(item.key, "yAxis", event.target.value)}>
-          <Radio value={0} data-test={`Chart.Series.${item.key}.UseLeftAxis`}>
-            left
-          </Radio>
-          <Radio value={1} data-test={`Chart.Series.${item.key}.UseRightAxis`}>
-            right
-          </Radio>
-        </Radio.Group>
-      ),
-    });
+    if (!options.swappedAxes) {
+      result.push({
+        title: "Y Axis",
+        dataIndex: "yAxis",
+        render: (unused, item) => (
+          <Radio.Group
+            className="series-settings-y-axis"
+            value={item.yAxis === 1 ? 1 : 0}
+            onChange={event => updateSeriesOption(item.key, "yAxis", event.target.value)}>
+            <Radio value={0} data-test={`Chart.Series.${item.key}.UseLeftAxis`}>
+              left
+            </Radio>
+            <Radio value={1} data-test={`Chart.Series.${item.key}.UseRightAxis`}>
+              right
+            </Radio>
+          </Radio.Group>
+        ),
+      });
+    }
+
     result.push({
       title: "Type",
       dataIndex: "type",
@@ -64,6 +67,7 @@ function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOptio
           data-test={`Chart.Series.${item.key}.Type`}
           dropdownMatchSelectWidth={false}
           value={item.type}
+          hiddenChartTypes={["pie", "heatmap", "bubble", "box"]}
           onChange={value => updateSeriesOption(item.key, "type", value)}
         />
       ),

viz-lib/src/visualizations/chart/Editor/YAxisSettings.jsx

@@ -9,7 +9,7 @@ export default function YAxisSettings({ options, onOptionsChange }) {
 
   return (
     <React.Fragment>
-      <Section.Title>Left Y Axis</Section.Title>
+      <Section.Title>{!options.swappedAxes ? "Left Y Axis" : "X Axis"}</Section.Title>
 
       <Section>
         <AxisSettings
@@ -20,7 +20,7 @@ export default function YAxisSettings({ options, onOptionsChange }) {
         />
       </Section>
 
-      {options.globalSeriesType !== "heatmap" && (
+      {options.globalSeriesType !== "heatmap" && !options.swappedAxes && (
         <React.Fragment>
           <Section.Title>Right Y Axis</Section.Title>
 

viz-lib/src/visualizations/chart/Editor/__snapshots__/GeneralSettings.test.js.snap

@@ -18,6 +18,7 @@ Object {
     },
   },
   "showDataLabels": true,
+  "swappedAxes": false,
 }
 `;
 
@@ -43,6 +44,13 @@ Object {
 }
 `;
 
+exports[`Visualizations -> Chart -> Editor -> General Settings Toggles horizontal bar chart 1`] = `
+Object {
+  "seriesOptions": Object {},
+  "swappedAxes": true,
+}
+`;
+
 exports[`Visualizations -> Chart -> Editor -> General Settings Toggles legend 1`] = `
 Object {
   "legend": Object {

viz-lib/src/visualizations/chart/Editor/index.jsx

@@ -28,13 +28,13 @@ export default createTabbedEditor([
   },
   {
     key: "XAxis",
-    title: "X Axis",
+    title: ({ swappedAxes }) => (!swappedAxes ? "X Axis" : "Y Axis"),
     component: XAxisSettings,
     isAvailable: options => !isCustomChart(options) && !isPieChart(options),
   },
   {
     key: "YAxis",
-    title: "Y Axis",
+    title: ({ swappedAxes }) => (!swappedAxes ? "Y Axis" : "X Axis"),
     component: YAxisSettings,
     isAvailable: options => !isCustomChart(options) && !isPieChart(options),
   },

viz-lib/src/visualizations/chart/Renderer/initChart.js

@@ -1,6 +1,6 @@
 import { isArray, isObject, isString, isFunction, startsWith, reduce, merge, map, each } from "lodash";
 import resizeObserver from "@/services/resizeObserver";
-import { Plotly, prepareData, prepareLayout, updateData, updateYRanges, updateChartSize } from "../plotly";
+import { Plotly, prepareData, prepareLayout, updateData, updateAxes, updateChartSize } from "../plotly";
 
 function createErrorHandler(errorHandler) {
   return error => {
@@ -86,7 +86,7 @@ export default function initChart(container, options, data, additionalOptions, o
     .then(
       createSafeFunction(() =>
         updater
-          .append(updateYRanges(container, plotlyLayout, options))
+          .append(updateAxes(container, plotlyData, plotlyLayout, options))
           .append(updateChartSize(container, plotlyLayout, options))
           .process(container)
       )
@@ -100,7 +100,7 @@ export default function initChart(container, options, data, additionalOptions, o
             // We need to catch only changes of traces visibility to update stacking
             if (isArray(updates) && isObject(updates[0]) && updates[0].visible) {
               updateData(plotlyData, options);
-              updater.append(updateYRanges(container, plotlyLayout, options)).process(container);
+              updater.append(updateAxes(container, plotlyData, plotlyLayout, options)).process(container);
             }
           })
         );

viz-lib/src/visualizations/chart/plotly/index.js

@@ -8,7 +8,7 @@ import heatmap from "plotly.js/lib/heatmap";
 import prepareData from "./prepareData";
 import prepareLayout from "./prepareLayout";
 import updateData from "./updateData";
-import updateYRanges from "./updateYRanges";
+import updateAxes from "./updateAxes";
 import updateChartSize from "./updateChartSize";
 import { prepareCustomChartData, createCustomChartRenderer } from "./customChartUtils";
 
@@ -22,7 +22,7 @@ export {
   prepareData,
   prepareLayout,
   updateData,
-  updateYRanges,
+  updateAxes,
   updateChartSize,
   prepareCustomChartData,
   createCustomChartRenderer,

viz-lib/src/visualizations/chart/plotly/updateYRanges.js → viz-lib/src/visualizations/chart/plotly/updateAxes.js

@@ -1,4 +1,4 @@
-import { isObject, isNumber } from "lodash";
+import { isObject, isNumber, each } from "lodash";
 
 function calculateAxisRange(range, min, max) {
   return [isNumber(min) ? min : range[0], isNumber(max) ? max : range[1]];
@@ -40,7 +40,7 @@ function alignYAxesAtZero(axisA, axisB) {
   }
 }
 
-export default function updateYRanges(plotlyElement, layout, options) {
+export default function updateAxes(plotlyElement, seriesList, layout, options) {
   const updates = {};
   if (isObject(layout.yaxis)) {
     updates.yaxis = {
@@ -60,6 +60,7 @@ export default function updateYRanges(plotlyElement, layout, options) {
   return [
     updates,
     () => {
+      // Update Y Ranges
       if (isObject(layout.yaxis)) {
         const axisOptions = options.yAxis[0];
         const defaultRange = plotlyElement.layout.yaxis.range;
@@ -74,6 +75,28 @@ export default function updateYRanges(plotlyElement, layout, options) {
         updates.yaxis2.range = calculateAxisRange(defaultRange, axisOptions.rangeMin, axisOptions.rangeMax);
       }
 
+      // Swap Axes
+      if (options.swappedAxes) {
+        each(seriesList, series => {
+          series.orientation = "h";
+          const { x, y } = series;
+          series.x = y;
+          series.y = x;
+        });
+
+        const { xaxis } = layout;
+        const { yaxis, yaxis2 } = updates;
+
+        if (isObject(xaxis) && isObject(yaxis)) {
+          updates.xaxis = yaxis;
+          updates.yaxis = xaxis;
+        }
+        if (isObject(yaxis2)) {
+          updates.yaxis2 = null;
+        }
+      }
+
+      // Align Y axes
       if (options.alignYAxesAtZero && isObject(layout.yaxis) && isObject(layout.yaxis2)) {
         alignYAxesAtZero(updates.yaxis, updates.yaxis2);
       }