horiz_bar commented changes implemented

Signed-off-by: Dipra Aich <[email protected]>
opensearch-project · Oct 11, 2022 · a425794 · a425794
1 parent c37b008
commit a425794
Show file tree

Hide file tree

Showing 14 changed files with 32 additions and 22 deletions.
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
@@ -188,3 +188,8 @@ export const SLIDER_STEP = 1;
 export const THRESHOLD_LINE_WIDTH = 3;
 export const THRESHOLD_LINE_OPACITY = 0.7;
 export const MAX_BUCKET_LENGTH = 16;
+
+export enum BarOrientation {
+  horizontal = 'h',
+  vertical = 'v',
+}
diff --git a/...orer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/...orer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
@@ -7,6 +7,7 @@ import React, { useMemo, useCallback, Fragment } from 'react';
 import { EuiAccordion, EuiSpacer } from '@elastic/eui';
 import { ButtonGroupItem } from './config_button_group';
 import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+import { BarOrientation } from '../../../../../../../../common/constants/shared';
 
 export const ConfigBarChartStyles = ({
   visualizations,
@@ -33,7 +34,7 @@ export const ConfigBarChartStyles = ({
 
   /* To update the schema options based on current style mode selection */
   const currentSchemas = useMemo(() => {
-    if (vizState?.orientation === 'h') {
+    if (vizState?.orientation === BarOrientation.horizontal) {
       return schemas.filter(
         (schema: IConfigPanelOptionSection) => schema.mapTo !== 'rotateBarLabels'
       );

diff --git a/...ponents/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx b/...ponents/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
+import { BarOrientation, LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
 import { Plt } from '../../../../visualizations/plotly/plot';
 
 export const CountDistribution = ({ countDistribution }: any) => {
@@ -27,7 +27,7 @@ export const CountDistribution = ({ countDistribution }: any) => {
       y: [...data[fields[0].name]],
       type: 'bar',
       name: fields[0],
-      orientation: 'v',
+      orientation: BarOrientation.vertical,
     },
   ];
 

diff --git a/...oards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx b/...oards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx
@@ -4,6 +4,7 @@
  */
 
 import { EuiFlexGrid, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import { BarOrientation } from '../../../../../../common/constants/shared';
 import React, { useMemo, useState } from 'react';
 import { Plt } from '../../../../visualizations/plotly/plot';
 
@@ -53,7 +54,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) {
         x: [plotParams.left],
         y: [0],
         type: 'bar',
-        orientation: 'h',
+        orientation: BarOrientation.horizontal,
         width: 1,
         marker: { color: 'rgba(0, 0, 0, 0)' },
         hoverinfo: 'none',
@@ -63,7 +64,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) {
         x: [plotParams.mid - plotParams.left],
         y: [0],
         type: 'bar',
-        orientation: 'h',
+        orientation: BarOrientation.horizontal,
         width: 1,
         marker: {
           color: plotParams.currPercentileFilter === '< 95th' ? '#fcfcfc' : '#ffffff',
@@ -82,7 +83,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) {
         x: [plotParams.right - plotParams.mid],
         y: [0],
         type: 'bar',
-        orientation: 'h',
+        orientation: BarOrientation.horizontal,
         width: 1,
         marker: {
           color: plotParams.currPercentileFilter === '>= 95th' ? '#aea4d1' : '#957ac9',

diff --git a/...rvability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx b/...rvability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
@@ -4,6 +4,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { BarOrientation } from '../../../../../../common/constants/shared';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { Plt } from '../../../../visualizations/plotly/plot';
@@ -56,7 +57,7 @@ export function ServiceMapScale(props: {
       {
         x: Array.from({ length: result.data.y.length }, () => 0),
         type: 'bar',
-        orientation: 'v',
+        orientation: BarOrientation.vertical,
         width: 0.4,
         hoverinfo: 'none',
         showlegend: false,

diff --git a/.../public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx b/.../public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
@@ -8,6 +8,7 @@ import { render } from '@testing-library/react';
 import { configure, mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { SpanDetailPanel } from '../span_detail_panel';
+import { BarOrientation } from '../../../../../../common/constants/shared';
 
 describe('Service breakdown panel component', () => {
   configure({ adapter: new Adapter() });
@@ -21,7 +22,7 @@ describe('Service breakdown panel component', () => {
           marker: { color: 'rgba(0, 0, 0, 0)' },
           width: 0.4,
           type: 'bar',
-          orientation: 'h',
+          orientation: BarOrientation.horizontal,
           hoverinfo: 'none',
           showlegend: false,
         },
@@ -34,7 +35,7 @@ describe('Service breakdown panel component', () => {
           marker: { color: '#7492e7' },
           width: 0.4,
           type: 'bar',
-          orientation: 'h',
+          orientation: BarOrientation.horizontal,
           hovertemplate: '%{x}<extra></extra>',
         },
       ] as Plotly.Data[],

diff --git a/...boards-observability/public/components/trace_analytics/requests/traces_request_handler.ts b/...boards-observability/public/components/trace_analytics/requests/traces_request_handler.ts
@@ -4,6 +4,7 @@
  */
 /* eslint-disable no-console */
 
+import { BarOrientation } from '../../../../common/constants/shared';
 import _ from 'lodash';
 import moment from 'moment';
 import { v1 as uuid } from 'uuid';
@@ -242,7 +243,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
         },
         width: 0.4,
         type: 'bar',
-        orientation: 'h',
+        orientation: BarOrientation.horizontal,
         hoverinfo: 'none',
         showlegend: false,
         spanId: hit._source.spanId,
@@ -258,7 +259,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
         },
         width: 0.4,
         type: 'bar',
-        orientation: 'h',
+        orientation: BarOrientation.horizontal,
         hovertemplate: '%{x}<extra></extra>',
         spanId: hit._source.spanId,
       }

diff --git a/...ability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/...ability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Bar component Renders bar component 1`] = `
+exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
 <Bar
   config={true}
   layout={

diff --git a/...lic/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/...lic/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Bar component Renders bar component 1`] = `
+exports[`Horizontal bar component Renders horizontal bar component 1`] = `
 <Bar
   config={true}
   layout={

diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx
@@ -13,10 +13,10 @@ import {
   TEST_VISUALIZATIONS_DATA
 } from '../../../../../test/event_analytics_constants';
 
-describe('Bar component', () => {
+describe('Veritcal Bar component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders bar component', async () => {
+  it('Renders veritcal bar component', async () => {
     const wrapper = mount(
       <Bar
         visualizations={TEST_VISUALIZATIONS_DATA}

diff --git a/...s-observability/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx b/...s-observability/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx
@@ -13,10 +13,10 @@ import {
   HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA,
 } from '../../../../../test/event_analytics_constants';
 
-describe('Bar component', () => {
+describe('Horizontal bar component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders bar component', async () => {
+  it('Renders horizontal bar component', async () => {
     const wrapper = mount(
       <Bar
         visualizations={HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA}

diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx
@@ -12,6 +12,7 @@ import {
   GROUPBY,
 } from '../../../../../common/constants/explorer';
 import {
+  BarOrientation,
   FILLOPACITY_DIV_FACTOR,
   LONG_CHART_COLOR,
   PLOTLY_COLOR,
@@ -54,7 +55,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
    * determine stylings
    */
   const barOrientation = dataConfig.chartStyles?.orientation || visMetaData.orientation;
-  const isVertical = barOrientation === 'v';
+  const isVertical = barOrientation === BarOrientation.vertical;
 
   const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || visMetaData.labelangle;
   const lineWidth = dataConfig?.chartStyles?.lineWidth || visMetaData.linewidth;

diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
@@ -17,7 +17,7 @@ import {
   ButtonGroupItem,
   ConfigAvailability,
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
-import { DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
+import { BarOrientation, DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
 import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
 import { VIS_CHART_TYPES } from '../../../../../common/constants/shared';
 import { DEFAULT_BAR_CHART_STYLES } from '../../../../../common/constants/explorer';
@@ -45,7 +45,7 @@ export const createBarTypeDefinition = (params: any) => ({
   icon: LensIconChartBar,
   categoryaxis: 'xaxis',
   seriesaxis: 'yaxis',
-  orientation: isHorizontalBar(params.type) ? 'h' : 'v',
+  orientation: isHorizontalBar(params.type) ? BarOrientation.horizontal : BarOrientation.vertical,
   mode: BarMode,
   labelangle: LabelAngle,
   linewidth: LineWidth,

diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
@@ -242,9 +242,8 @@ const getUserConfigs = (
 export const getVisTypeData = (vizId: string) => {
   if (SIMILAR_VIZ_TYPES.includes(vizId)) {
     return getVisType(vizId, { type: vizId });
-  } else {
-    return getVisType(vizId);
   }
+  return getVisType(vizId);
 };
 
 export const getVizContainerProps = ({