Merge pull request opensearch-project#22 from mrunal-z/enhancements/t…

…reemap-sort-sectors Enhancements/Treemap: Sort Sectors
ruchika-narang · Jul 11, 2022 · a907e53 · a907e53
2 parents 49c6693 + 388a4db
commit a907e53
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 15 deletions.
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
@@ -156,7 +156,8 @@ export interface DefaultChartStylesProps {
   FillOpacity: number,
   MarkerSize: number,
   ShowLegend: string,
-  LegendPosition: string
+  LegendPosition: string,
+  DefaultSortSectors: string,
 };
 
 export const DefaultChartStyles: DefaultChartStylesProps = {
@@ -166,7 +167,8 @@ export const DefaultChartStyles: DefaultChartStylesProps = {
   FillOpacity: 40,
   MarkerSize: 5,
   ShowLegend: 'show',
-  LegendPosition: 'v'
+  LegendPosition: 'v',
+  DefaultSortSectors: 'largest_to_smallest',
 }
 
 export const FILLOPACITY_DIV_FACTOR = 200; 
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
@@ -1692,6 +1692,37 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Colorscale",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
                           Object {
                             "editor": [Function],
                             "id": "treemap_options",
@@ -1740,6 +1771,30 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "isClearable": false,
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "buttons",
+                                "mapTo": "sort_sectors",
+                                "name": "Sort Sectors",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": undefined,
+                                      "name": "Largest to Smallest",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "largest_to_smallest",
+                                      "name": "Largest to Smallest",
+                                    },
+                                    Object {
+                                      "id": "random",
+                                      "name": "Random",
+                                    },
+                                  ],
+                                },
+                              },
                             ],
                           },
                           Object {

diff --git a/...xplorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx b/...xplorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
@@ -13,7 +13,7 @@ export const ConfigValueOptions = ({
   vizState,
   handleConfigChange,
   sectionName,
-  sectionId = 'valueOptions'
+  sectionId = 'valueOptions',
 }: any) => {
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
@@ -32,18 +32,38 @@ export const ConfigValueOptions = ({
   const dimensions = useMemo(() => {
     return schemas.map((schema, index) => {
       const DimensionComponent = schema.component || PanelItem;
-      const params = {
-        paddingTitle: schema.name,
-        advancedTitle: 'advancedTitle',
-        dropdownList:
-          schema?.options?.map((option) => ({ ...option })) ||
-          fields.map((item) => ({ ...item })),
-        onSelectChange: handleConfigurationChange(schema.mapTo),
-        isSingleSelection: schema.isSingleSelection,
-        selectedAxis: vizState[schema.mapTo] || schema?.defaultState,
+      let params = {
+        title: schema.name,
         vizState,
         ...schema.props,
       };
+
+      if (schema.eleType === 'buttons') {
+        params = {
+          legend: schema.name,
+          groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+            ...btn,
+            label: btn.name,
+          })),
+          idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+          handleButtonChange: handleConfigurationChange(schema.mapTo),
+          vizState,
+          ...schema.props,
+        };
+      } else {
+        params = {
+          paddingTitle: schema.name,
+          advancedTitle: 'advancedTitle',
+          dropdownList:
+            schema?.options?.map((option) => ({ ...option })) ||
+            fields.map((item) => ({ ...item })),
+          onSelectChange: handleConfigurationChange(schema.mapTo),
+          isSingleSelection: schema.isSingleSelection,
+          selectedAxis: vizState[schema.mapTo] || schema?.defaultState,
+          vizState,
+          ...schema.props,
+        };
+      }
       return (
         <>
           <DimensionComponent key={`viz-series-${index}`} {...params} />

diff --git a/...ity/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/...ity/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -511,6 +511,7 @@ exports[`Treemap component Renders treemap component 1`] = `
             "",
             "",
           ],
+          "sort": true,
           "textinfo": "label+value+percent parent+percent entry",
           "tiling": Object {
             "packing": undefined,
@@ -572,6 +573,7 @@ exports[`Treemap component Renders treemap component 1`] = `
               "",
               "",
             ],
+            "sort": true,
             "textinfo": "label+value+percent parent+percent entry",
             "tiling": Object {
               "packing": undefined,

diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
@@ -15,10 +15,14 @@ import {
   ConfigLegend,
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors';
+import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group';
+import { DefaultChartStyles } from '../../../../../common/constants/shared';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
 
+const { SortSectors } = DefaultChartStyles;
+
 export interface BarTypeParams {}
 
 export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
@@ -89,6 +93,19 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
                   isClearable: false,
                 },
               },
+              {
+                name: 'Sort Sectors',
+                component: ButtonGroupItem,
+                mapTo: 'sort_sectors',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Largest to Smallest', id: 'largest_to_smallest' },
+                    { name: 'Random', id: 'random' },
+                  ],
+                  defaultSelections: [{ name: 'Largest to Smallest', id: SortSectors }],
+                },
+              },
             ],
           },
           {

diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx
@@ -14,8 +14,11 @@ import {
   MULTI_COLOR_PALETTE,
   SINGLE_COLOR_PALETTE,
 } from '../../../../../common/constants/colors';
+import { DefaultChartStyles } from '../../../../../common/constants/shared';
 
 export const TreeMap = ({ visualizations, layout, config }: any) => {
+  const { DefaultSortSectors } = DefaultChartStyles;
+
   const {
     data,
     metadata: { fields },
@@ -52,11 +55,12 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
       ? dataConfig?.treemapOptions.tilingAlgorithm[0]
       : 'squarify';
 
+  const sortSectorsField = dataConfig?.treemapOptions?.sort_sectors || DefaultSortSectors;
   const showColorscale = dataConfig?.legend?.showLegend ?? 'show';
 
   const areParentFieldsInvalid =
-    new Set([...parentFields.map((x) => x.name)]).size !== parentFields.length ||
-    parentFields.some((x) => isEmpty(data[x.name]) || isEqual(childField.name, x.name));
+    new Set([...parentFields.map((field) => field.name)]).size !== parentFields.length ||
+    parentFields.some((field) => isEmpty(data[field.name]) || isEqual(childField.name, field.name));
 
   if (
     isEmpty(data[childField.name]) ||
@@ -103,7 +107,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
             const currentParentIndices = uniqueParents.map((parent) =>
               data[field.name].findIndex((index) => index === parent)
             );
-            const lastParents = currentParentIndices.map((x) => data[lastParentField.name][x]);
+            const lastParents = currentParentIndices.map((index) => data[lastParentField.name][index]);
             parentsArray = [...parentsArray, ...lastParents];
             valuesArray = [...valuesArray, ...Array(lastParents.length).fill(0)];
             colorsArray =
@@ -166,6 +170,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
           packing: tilingAlgorithm.value,
         },
         marker: markerColors,
+        sort: sortSectorsField === DefaultSortSectors,
       },
     ];