Pie chart 2way sync (opensearch-project#1029)

* mode bug fixed code: added, 2 way changes testing: in progress Signed-off-by: Ramneet Chopra <[email protected]> * pie two sync done Signed-off-by: Ramneet Chopra <[email protected]> * yarn test Signed-off-by: Ramneet Chopra <[email protected]> * pr feedback Signed-off-by: Ramneet Chopra <[email protected]> * spaces added in between lines Signed-off-by: Ramneet Chopra <[email protected]> * usememo removed from xlables Signed-off-by: Ramneet Chopra <[email protected]> Signed-off-by: Ramneet Chopra <[email protected]> Signed-off-by: Koustubh Karmalkar <[email protected]>
Koustubh5585 · Sep 27, 2022 · a7ac9a2 · a7ac9a2
1 parent 47dfcba
commit a7ac9a2
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 135 deletions.
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -120,7 +120,16 @@ export const AGGREGATION_OPTIONS = [
 ];
 
 // numeric fields type for metrics
-export const numericalTypes = ['float', 'double', 'bigint', 'long', 'octet', 'short', 'byte', 'integer'];
+export const numericalTypes = [
+  'float',
+  'double',
+  'bigint',
+  'long',
+  'octet',
+  'short',
+  'byte',
+  'integer',
+];
 // Data table constants
 export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
 export const GRID_PAGE_RANGE_DISPLAY = 5;
@@ -136,19 +145,31 @@ export const HEADER_HEIGHT = 35;
 
 // gauge chart default parameters
 export interface DefaultGaugeChartParametersProps {
-  GaugeTitleSize: number,
-  DisplayDefaultGauges: number,
-  OrientationDefault: string,
-  TickLength: number, 
-  LegendPlacement: string,
-  ThresholdsMaxLimit: number
-};
+  GaugeTitleSize: number;
+  DisplayDefaultGauges: number;
+  OrientationDefault: string;
+  TickLength: number;
+  LegendPlacement: string;
+  ThresholdsMaxLimit: number;
+}
 
 export const DefaultGaugeChartParameters: DefaultGaugeChartParametersProps = {
   GaugeTitleSize: 14,
   DisplayDefaultGauges: 1,
   OrientationDefault: 'h',
   TickLength: 5,
   LegendPlacement: 'center',
-  ThresholdsMaxLimit: 1
+  ThresholdsMaxLimit: 1,
+};
+
+// pie chart default parameters
+export const PLOTLY_PIE_COLUMN_NUMBER = 2;
+export const PIE_XAXIS_GAP = 0.2;
+export const PIE_YAXIS_GAP = 0.1;
+export interface DefaultPieChartParametersProps {
+  DefaultMode: string;
 }
+
+export const DefaultPieChartParameters: DefaultPieChartParametersProps = {
+  DefaultMode: 'pie',
+};
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -322,3 +322,7 @@ export interface DataConfigPanelProps {
   visualizations: IVisualizationContainerProps;
   qm?: QueryManager;
 }
+export interface GetTooltipHoverInfoType {
+  tooltipMode: string;
+  tooltipText: string;
+}
diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1422,25 +1422,25 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "name": "Chart styles",
                             "schemas": Array [
                               Object {
-                                "component": null,
-                                "defaultState": Array [
-                                  Object {
-                                    "label": "Pie",
-                                    "modeId": "pie",
-                                    "name": "Pie",
-                                  },
-                                ],
+                                "component": [Function],
+                                "eleType": "buttons",
                                 "isSingleSelection": true,
                                 "mapTo": "mode",
                                 "name": "Mode",
                                 "props": Object {
-                                  "dropdownList": Array [
+                                  "defaultSelections": Array [
                                     Object {
-                                      "modeId": "pie",
+                                      "id": "pie",
+                                      "name": "Pie",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "pie",
                                       "name": "Pie",
                                     },
                                     Object {
-                                      "modeId": "donut",
+                                      "id": "donut",
                                       "name": "Donut",
                                     },
                                   ],
@@ -1493,12 +1493,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   "id": "pie",
                   "label": "Pie",
                   "legendposition": "v",
+                  "mode": "pie",
                   "name": "pie",
-                  "selection": Object {
-                    "dataLoss": "nothing",
-                  },
                   "seriesaxis": "yaxis",
-                  "showlegend": true,
+                  "showlegend": "show",
                   "type": "pie",
                   "visconfig": Object {
                     "config": Object {

diff --git a/dashboards-observability/public/components/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx
@@ -8,7 +8,11 @@ import { uniqueId } from 'lodash';
 import React from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import { IExplorerFields, IField } from '../../../../common/types/explorer';
+import {
+  IExplorerFields,
+  IField,
+  GetTooltipHoverInfoType,
+} from '../../../../common/types/explorer';
 import { DocViewRow, IDocType } from '../explorer/events_views';
 import { HttpStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
@@ -121,8 +125,8 @@ export const populateDataGrid = (
           </table>
         )}
         {explorerFields?.queriedFields &&
-          explorerFields?.queriedFields?.length > 0 &&
-          explorerFields.selectedFields?.length === 0 ? null : (
+        explorerFields?.queriedFields?.length > 0 &&
+        explorerFields.selectedFields?.length === 0 ? null : (
           <table className="osd-table table" data-test-subj="docTable">
             <thead>{header2}</thead>
             <tbody>{body2}</tbody>
@@ -354,3 +358,13 @@ export const fetchConfigObject = (editor: string, propsOptions: any) => {
       return null;
   }
 };
+
+export const getTooltipHoverInfo = ({ tooltipMode, tooltipText }: GetTooltipHoverInfoType) => {
+  if (tooltipMode === 'hidden') {
+    return 'none';
+  }
+  if (tooltipText === undefined) {
+    return 'all';
+  }
+  return tooltipText;
+};
diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
@@ -4,81 +4,81 @@
  */
 
 import React, { useMemo } from 'react';
-import { take, isEmpty } from 'lodash';
+import { isEmpty, find } from 'lodash';
 import { Plt } from '../../plotly/plot';
-import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
 import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import { getTooltipHoverInfo } from '../../../event_analytics/utils/utils';
+import { ConfigListEntry } from '../../../../../common/types/explorer';
+import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
+import {
+  PLOTLY_PIE_COLUMN_NUMBER,
+  PIE_YAXIS_GAP,
+  PIE_XAXIS_GAP,
+} from '../../../../../common/constants/explorer';
 
 export const Pie = ({ visualizations, layout, config }: any) => {
   const { vis } = visualizations;
   const {
     data,
     metadata: { fields },
   } = visualizations.data.rawVizData;
-  const { defaultAxes } = visualizations.data;
-  const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
-  const xaxis = dataConfig?.dimensions ? dataConfig.dimensions.filter((item) => item.label) : [];
-  const yaxis = dataConfig?.metrics ? dataConfig.metrics.filter((item) => item.label) : [];
-  const type = dataConfig?.chartStyles?.mode ? dataConfig?.chartStyles?.mode[0]?.modeId : 'pie';
-  const lastIndex = fields.length - 1;
-  const colorTheme = dataConfig?.chartStyles?.colorTheme
-    ? dataConfig?.chartStyles?.colorTheme
-    : { name: DEFAULT_PALETTE };
-  const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : vis.showlegend;
-  const legendPosition = dataConfig?.legend?.position || vis.legendposition;
-  const legendSize = dataConfig?.legend?.size || vis.legendSize;
-  const labelSize = dataConfig?.chartStyles?.labelSize || vis.labelSize;
-  const tooltipMode =
-    dataConfig?.tooltipOptions?.tooltipMode !== undefined
-      ? dataConfig.tooltipOptions.tooltipMode
-      : 'show';
-  const tooltipText =
-    dataConfig?.tooltipOptions?.tooltipText !== undefined
-      ? dataConfig.tooltipOptions.tooltipText
-      : 'all';
-
-  if (isEmpty(xaxis) || isEmpty(yaxis))
-    return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;
+  const {
+    dataConfig: {
+      chartStyles = {},
+      dimensions = [],
+      metrics = [],
+      span = {},
+      legend = {},
+      panelOptions = {},
+      tooltipOptions = {},
+    },
+    layoutConfig = {},
+  } = visualizations?.data?.userConfigs;
+  const type = chartStyles.mode || vis.mode;
+  const colorTheme = chartStyles.colorTheme ? chartStyles.colorTheme : { name: DEFAULT_PALETTE };
+  const showLegend = legend.showLegend === 'hidden' ? false : vis.showlegend;
+  const legendSize = legend.size || vis.legendSize;
+  const labelSize = chartStyles.labelSize || vis.labelSize;
+  const title = panelOptions.title || layoutConfig.layout?.title || '';
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
 
-  let valueSeries;
-  if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
-    valueSeries = [...yaxis];
+  /**
+   * determine x axis
+   */
+  let xaxes: ConfigListEntry[];
+  if (span && span.time_field && timestampField) {
+    xaxes = [timestampField, ...dimensions];
   } else {
-    valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+    xaxes = dimensions;
+  }
+
+  if (isEmpty(xaxes) || isEmpty(metrics)) {
+    return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;
   }
 
   const invertHex = (hex: string) =>
     (Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase();
 
-  const createLegendLabels = (dimLabels: string[], xaxisLables: string[]) => {
-    return dimLabels.map((label: string, index: number) => {
-      return [xaxisLables[index], label].join(',');
-    });
-  };
-
-  const labelsOfXAxis = useMemo(() => {
-    let legendLabels = [];
-    if (xaxis.length > 0) {
-      let dimLabelsArray = data[xaxis[0].label];
-      for (let i = 0; i < xaxis.length - 1; i++) {
-        dimLabelsArray = createLegendLabels(dimLabelsArray, data[xaxis[i + 1].label]);
-      }
-      legendLabels = dimLabelsArray;
-    } else {
-      legendLabels = data[fields[lastIndex].name];
+  const labelsOfXAxis = xaxes.reduce((prev, cur) => {
+    if (data[cur.name]) {
+      if (prev.length === 0) return data[cur.name].flat();
+      return prev.map(
+        (item: string | number, index: number) => `${item}, ${data[cur.name][index]}`
+      );
     }
-    return legendLabels;
-  }, [xaxis, data, fields, createLegendLabels]);
+  }, []);
 
   const hexColor = invertHex(colorTheme);
+
   const pies = useMemo(
     () =>
-      valueSeries.map((field: any, index: number) => {
+      metrics.map((field: any, index: number) => {
+        const fieldName = field.alias ? field.alias : `${field.aggregation}(${field.name})`;
         const marker =
           colorTheme.name !== DEFAULT_PALETTE
             ? {
                 marker: {
-                  colors: [...Array(data[field.name].length).fill(colorTheme.childColor)],
+                  colors: [...Array(data[fieldName].length).fill(colorTheme.childColor)],
                   line: {
                     color: hexColor,
                     width: 1,
@@ -88,57 +88,55 @@ export const Pie = ({ visualizations, layout, config }: any) => {
             : undefined;
         return {
           labels: labelsOfXAxis,
-          values: data[field.label],
+          values: data[fieldName],
           type: 'pie',
-          name: field.name,
+          name: fieldName,
           hole: type === 'pie' ? 0 : 0.5,
-          text: field.name,
+          text: fieldName,
           textinfo: 'percent',
-          hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+          hoverinfo: getTooltipHoverInfo({
+            tooltipMode: tooltipOptions.tooltipMode,
+            tooltipText: tooltipOptions.tooltipText,
+          }),
           automargin: true,
           textposition: 'outside',
+          title: { text: fieldName },
           domain: {
-            row: Math.floor(index / 3),
-            column: index % 3,
+            row: Math.floor(index / PLOTLY_PIE_COLUMN_NUMBER),
+            column: index % PLOTLY_PIE_COLUMN_NUMBER,
           },
           ...marker,
           outsidetextfont: {
             size: labelSize,
           },
         };
       }),
-    [valueSeries, valueSeries, data, labelSize, labelsOfXAxis, colorTheme]
+    [metrics, data, labelSize, labelsOfXAxis, colorTheme]
   );
 
-  const isAtleastOneFullRow = Math.floor(valueSeries.length / 3) > 0;
-
-  const mergedLayout = useMemo(
-    () => ({
+  const mergedLayout = useMemo(() => {
+    const isAtleastOneFullRow = Math.floor(metrics.length / PLOTLY_PIE_COLUMN_NUMBER) > 0;
+    return {
       grid: {
-        rows: Math.floor(valueSeries.length / 3) + 1,
-        columns: isAtleastOneFullRow ? 3 : valueSeries.length,
+        xgap: PIE_XAXIS_GAP,
+        ygap: PIE_YAXIS_GAP,
+        rows: Math.floor(metrics.length / PLOTLY_PIE_COLUMN_NUMBER) + 1,
+        columns: isAtleastOneFullRow ? PLOTLY_PIE_COLUMN_NUMBER : metrics.length,
+        pattern: 'independent',
       },
       ...layout,
       ...(layoutConfig.layout && layoutConfig.layout),
-      title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
+      title,
       legend: {
         ...layout.legend,
-        orientation: legendPosition,
-        font: { size: legendSize },
+        orientation: legend.position || vis.legendposition,
+        ...(legendSize && {
+          font: { size: legendSize },
+        }),
       },
       showlegend: showLegend,
-    }),
-    [
-      valueSeries,
-      isAtleastOneFullRow,
-      layoutConfig.layout,
-      dataConfig?.panelOptions?.title,
-      layoutConfig.layout?.title,
-      layout.legend,
-      legendPosition,
-      legendSize,
-    ]
-  );
+    };
+  }, [metrics, layoutConfig.layout, title, layout.legend]);
 
   const mergedConfigs = useMemo(
     () => ({