From edbc7cb915a26fbbf590cb2f7e1445a50233a0e8 Mon Sep 17 00:00:00 2001
From: SivaprasadAluri <110654651+SivaprasadAluri@users.noreply.github.com>
Date: Tue, 25 Oct 2022 02:27:14 +0530
Subject: [PATCH] [BUG]: Visualizations not appearing in Operational Panels
 fixed (#1170)

* fixed the bug for operational panel visulaization and app analytics

Signed-off-by: SivaprasadAluri <sivaprasad_aluri@persistent.com>

* updated the code as per review comments

Signed-off-by: SivaprasadAluri <sivaprasad_aluri@persistent.com>

* updated the test sanpshot

Signed-off-by: SivaprasadAluri <sivaprasad_aluri@persistent.com>

Signed-off-by: SivaprasadAluri <sivaprasad_aluri@persistent.com>
---
 .../__snapshots__/utils.test.tsx.snap         | 4701 +++++++++++++----
 .../helpers/__tests__/utils.test.tsx          |   30 +-
 .../custom_panels/helpers/utils.tsx           |    6 +-
 .../test/panels_constants.tsx                 |   34 +
 4 files changed, 3682 insertions(+), 1089 deletions(-)

diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 04d638844..088898eaf 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -84,7 +84,9 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             ],
           },
           "indexFields": Object {},
-          "query": Object {},
+          "query": Object {
+            "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+          },
           "rawVizData": Object {
             "data": Object {
               "Carrier": Array [
@@ -133,7 +135,24 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             "size": 4,
             "status": 200,
           },
-          "userConfigs": Object {},
+          "userConfigs": Object {
+            "dataConfig": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                },
+              ],
+              "series": Array [
+                Object {
+                  "aggregation": "sum",
+                  "customLabel": "delays",
+                  "label": "FlightDelayMin",
+                  "name": "FlightDelayMin",
+                },
+              ],
+            },
+          },
         },
         "vis": Object {
           "barwidth": 0.97,
@@ -532,7 +551,9 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               ],
             },
             "indexFields": Object {},
-            "query": Object {},
+            "query": Object {
+              "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+            },
             "rawVizData": Object {
               "data": Object {
                 "Carrier": Array [
@@ -581,7 +602,24 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "size": 4,
               "status": 200,
             },
-            "userConfigs": Object {},
+            "userConfigs": Object {
+              "dataConfig": Object {
+                "dimensions": Array [
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                  },
+                ],
+                "series": Array [
+                  Object {
+                    "aggregation": "sum",
+                    "customLabel": "delays",
+                    "label": "FlightDelayMin",
+                    "name": "FlightDelayMin",
+                  },
+                ],
+              },
+            },
           },
           "vis": Object {
             "barwidth": 0.97,
@@ -987,7 +1025,9 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 ],
               },
               "indexFields": Object {},
-              "query": Object {},
+              "query": Object {
+                "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+              },
               "rawVizData": Object {
                 "data": Object {
                   "Carrier": Array [
@@ -1036,7 +1076,24 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "size": 4,
                 "status": 200,
               },
-              "userConfigs": Object {},
+              "userConfigs": Object {
+                "dataConfig": Object {
+                  "dimensions": Array [
+                    Object {
+                      "label": "Carrier",
+                      "name": "Carrier",
+                    },
+                  ],
+                  "series": Array [
+                    Object {
+                      "aggregation": "sum",
+                      "customLabel": "delays",
+                      "label": "FlightDelayMin",
+                      "name": "FlightDelayMin",
+                    },
+                  ],
+                },
+              },
             },
             "vis": Object {
               "barwidth": 0.97,
@@ -1353,83 +1410,172 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
           }
         }
       >
-        <EmptyPlaceholder
-          icon="visBarVerticalStacked"
+        <Plt
+          config={
+            Object {
+              "displaylogo": false,
+              "responsive": true,
+            }
+          }
+          data={
+            Array [
+              Object {
+                "hoverinfo": "all",
+                "marker": Object {
+                  "color": "rgba(60,161,199,0.2)",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "width": 2,
+                  },
+                },
+                "name": "delays",
+                "orientation": "v",
+                "type": "bar",
+                "x": Array [],
+                "y": undefined,
+              },
+            ]
+          }
+          layout={
+            Object {
+              "bargap": 0.30000000000000004,
+              "bargroupgap": 0.030000000000000027,
+              "barmode": "group",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "hovermode": "closest",
+              "legend": Object {
+                "orientation": "v",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "showlegend": true,
+              "title": "",
+              "xaxis": Object {
+                "automargin": true,
+                "tickangle": 0,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+              "yaxis": Object {
+                "automargin": true,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+            }
+          }
         >
-          <EuiText
-            className="lnsChart__empty"
-            color="subdued"
-            data-test-subj="vizWorkspace__noData"
-            size="xs"
-            textAlign="center"
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "all",
+                  "marker": Object {
+                    "color": "rgba(60,161,199,0.2)",
+                    "line": Object {
+                      "color": "#3CA1C7",
+                      "width": 2,
+                    },
+                  },
+                  "name": "delays",
+                  "orientation": "v",
+                  "type": "bar",
+                  "x": Array [],
+                  "y": undefined,
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "bargap": 0.30000000000000004,
+                "bargroupgap": 0.030000000000000027,
+                "barmode": "group",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "tickangle": 0,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
           >
             <div
-              className="euiText euiText--extraSmall lnsChart__empty"
-              data-test-subj="vizWorkspace__noData"
-            >
-              <EuiTextAlign
-                textAlign="center"
-              >
-                <div
-                  className="euiTextAlign euiTextAlign--center"
-                >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
-                  >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      <EuiIcon
-                        color="subdued"
-                        size="xxl"
-                        type="visBarVerticalStacked"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <EuiSpacer
-                        size="l"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--l"
-                        />
-                      </EuiSpacer>
-                      <p>
-                        <FormattedMessage
-                          defaultMessage="No results found"
-                          id="visualization_noData"
-                          values={Object {}}
-                        >
-                          <span>
-                            No results found
-                          </span>
-                        </FormattedMessage>
-                      </p>
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiTextAlign>
-            </div>
-          </EuiText>
-        </EmptyPlaceholder>
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
       </Bar>
     </VisualizationChart>
   </Visualization>
@@ -1524,7 +1670,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             ],
           },
           "indexFields": Object {},
-          "query": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+          },
           "rawVizData": Object {
             "data": Object {
               "Carrier": Array [
@@ -1573,7 +1721,36 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             "size": 4,
             "status": 200,
           },
-          "userConfigs": Object {},
+          "userConfigs": Object {
+            "dataConfig": Object {
+              "dimensions": Array [],
+              "series": Array [
+                Object {
+                  "aggregation": "avg",
+                  "customLabel": "",
+                  "label": "machine.ram",
+                  "name": "machine.ram",
+                },
+              ],
+              "span": Object {
+                "interval": "1",
+                "time_field": Array [
+                  Object {
+                    "label": "timestamp",
+                    "name": "timestamp",
+                    "type": "timestamp",
+                  },
+                ],
+                "unit": Array [
+                  Object {
+                    "label": "Day",
+                    "name": "Day",
+                    "value": "d",
+                  },
+                ],
+              },
+            },
+          },
         },
         "vis": Object {
           "category": "Visualizations",
@@ -2030,7 +2207,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               ],
             },
             "indexFields": Object {},
-            "query": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+            },
             "rawVizData": Object {
               "data": Object {
                 "Carrier": Array [
@@ -2079,7 +2258,36 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "size": 4,
               "status": 200,
             },
-            "userConfigs": Object {},
+            "userConfigs": Object {
+              "dataConfig": Object {
+                "dimensions": Array [],
+                "series": Array [
+                  Object {
+                    "aggregation": "avg",
+                    "customLabel": "",
+                    "label": "machine.ram",
+                    "name": "machine.ram",
+                  },
+                ],
+                "span": Object {
+                  "interval": "1",
+                  "time_field": Array [
+                    Object {
+                      "label": "timestamp",
+                      "name": "timestamp",
+                      "type": "timestamp",
+                    },
+                  ],
+                  "unit": Array [
+                    Object {
+                      "label": "Day",
+                      "name": "Day",
+                      "value": "d",
+                    },
+                  ],
+                },
+              },
+            },
           },
           "vis": Object {
             "category": "Visualizations",
@@ -2550,7 +2758,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 ],
               },
               "indexFields": Object {},
-              "query": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+              },
               "rawVizData": Object {
                 "data": Object {
                   "Carrier": Array [
@@ -2599,7 +2809,36 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "size": 4,
                 "status": 200,
               },
-              "userConfigs": Object {},
+              "userConfigs": Object {
+                "dataConfig": Object {
+                  "dimensions": Array [],
+                  "series": Array [
+                    Object {
+                      "aggregation": "avg",
+                      "customLabel": "",
+                      "label": "machine.ram",
+                      "name": "machine.ram",
+                    },
+                  ],
+                  "span": Object {
+                    "interval": "1",
+                    "time_field": Array [
+                      Object {
+                        "label": "timestamp",
+                        "name": "timestamp",
+                        "type": "timestamp",
+                      },
+                    ],
+                    "unit": Array [
+                      Object {
+                        "label": "Day",
+                        "name": "Day",
+                        "value": "d",
+                      },
+                    ],
+                  },
+                },
+              },
             },
             "vis": Object {
               "category": "Visualizations",
@@ -3137,7 +3376,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             ],
           },
           "indexFields": Object {},
-          "query": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs | stats count() by tags",
+          },
           "rawVizData": Object {
             "data": Object {
               "Carrier": Array [
@@ -3186,10 +3427,26 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             "size": 4,
             "status": 200,
           },
-          "userConfigs": Object {},
+          "userConfigs": Object {
+            "dataConfig": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                },
+              ],
+              "series": Array [
+                Object {
+                  "aggregation": "count",
+                  "customLabel": "",
+                  "label": "",
+                  "name": "",
+                },
+              ],
+            },
+          },
         },
         "vis": Object {
-          "barwidth": 0.97,
           "category": "Visualizations",
           "categoryaxis": "xaxis",
           "component": [Function],
@@ -3247,12 +3504,12 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                               "name": "All",
                             },
                             Object {
-                              "id": "x",
-                              "name": "Dimension",
+                              "id": "label",
+                              "name": "Label",
                             },
                             Object {
-                              "id": "y",
-                              "name": "Series",
+                              "id": "value",
+                              "name": "Value",
                             },
                           ],
                         },
@@ -3268,7 +3525,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                       Object {
                         "component": null,
                         "mapTo": "showLegend",
-                        "name": "Show legend",
+                        "name": "Show colorscale",
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
@@ -3288,159 +3545,333 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           ],
                         },
                       },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "treemap_options",
+                    "mapTo": "treemapOptions",
+                    "name": "Treemap",
+                    "schemas": Array [
                       Object {
                         "component": null,
-                        "mapTo": "position",
-                        "name": "Position",
-                        "props": Object {
-                          "defaultSelections": Array [
-                            Object {
-                              "id": "v",
-                              "name": "Right",
-                            },
-                          ],
-                          "options": Array [
-                            Object {
-                              "id": "v",
-                              "name": "Right",
-                            },
-                            Object {
-                              "id": "h",
-                              "name": "Bottom",
-                            },
-                          ],
+                        "defaultState": Array [
+                          Object {
+                            "label": "Squarify",
+                            "name": "Squarify",
+                            "value": "squarify",
+                          },
+                        ],
+                        "isSingleSelection": true,
+                        "mapTo": "tilingAlgorithm",
+                        "name": "Tiling algorithm",
+                        "options": Array [
+                          Object {
+                            "name": "Squarify",
+                            "value": "squarify",
+                          },
+                          Object {
+                            "name": "Binary",
+                            "value": "binary",
+                          },
+                          Object {
+                            "name": "Dice",
+                            "value": "dice",
+                          },
+                          Object {
+                            "name": "Slice",
+                            "value": "slice",
+                          },
+                          Object {
+                            "name": "Slice Dice",
+                            "value": "slice-dice",
+                          },
+                          Object {
+                            "name": "Dice Slice",
+                            "value": "dice-slice",
+                          },
+                        ],
+                        "props": Object {
+                          "isClearable": false,
                         },
                       },
-                      Object {
-                        "component": [Function],
-                        "eleType": "input",
-                        "mapTo": "legendSize",
-                        "name": "Legend size",
-                        "title": "Legend size",
-                      },
-                    ],
-                  },
-                  Object {
-                    "editor": [Function],
-                    "id": "chart_styles",
-                    "mapTo": "chartStyles",
-                    "name": "Chart styles",
-                    "schemas": Array [
                       Object {
                         "component": [Function],
                         "eleType": "buttons",
-                        "mapTo": "mode",
-                        "name": "Mode",
+                        "mapTo": "sort_sectors",
+                        "name": "Sort Sectors",
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "group",
-                              "name": "Group",
+                              "id": undefined,
+                              "name": "Largest to Smallest",
                             },
                           ],
                           "options": Array [
                             Object {
-                              "id": "group",
-                              "name": "Group",
-                            },
-                            Object {
-                              "id": "stack",
-                              "name": "Stack",
-                            },
-                          ],
-                        },
-                      },
-                      Object {
-                        "component": [Function],
-                        "eleType": "input",
-                        "mapTo": "labelSize",
-                        "name": "Label size",
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 0,
-                        "eleType": "slider",
-                        "mapTo": "rotateBarLabels",
-                        "name": "Rotate bar labels",
-                        "props": Object {
-                          "max": 90,
-                          "min": -90,
-                          "showTicks": true,
-                          "ticks": Array [
-                            Object {
-                              "label": "-90°",
-                              "value": -90,
-                            },
-                            Object {
-                              "label": "-45°",
-                              "value": -45,
-                            },
-                            Object {
-                              "label": "0°",
-                              "value": 0,
-                            },
-                            Object {
-                              "label": "45°",
-                              "value": 45,
+                              "id": "largest_to_smallest",
+                              "name": "Largest to Smallest",
                             },
                             Object {
-                              "label": "90°",
-                              "value": 90,
+                              "id": "random",
+                              "name": "Random",
                             },
                           ],
                         },
                       },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
                       Object {
                         "component": [Function],
-                        "defaultState": 0.7,
-                        "eleType": "slider",
-                        "mapTo": "groupWidth",
-                        "name": "Group width",
-                        "props": Object {
-                          "max": 1,
-                          "step": 0.01,
-                        },
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 0.97,
-                        "eleType": "slider",
-                        "mapTo": "barWidth",
-                        "name": "Bar width",
-                        "props": Object {
-                          "max": 1,
-                          "step": 0.01,
-                        },
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 2,
-                        "eleType": "slider",
-                        "mapTo": "lineWidth",
-                        "name": "Line width",
-                        "props": Object {
-                          "max": 10,
-                        },
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 40,
-                        "eleType": "slider",
-                        "mapTo": "fillOpacity",
-                        "name": "Fill opacity",
-                        "props": Object {
-                          "max": 100,
+                        "defaultState": Object {
+                          "name": "default",
                         },
+                        "eleType": "treemapColorPicker",
+                        "isSingleSelection": true,
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "options": Array [
+                          Object {
+                            "title": "Default",
+                            "type": "text",
+                            "value": "default",
+                          },
+                          Object {
+                            "title": "Single color",
+                            "type": "text",
+                            "value": "singleColor",
+                          },
+                          Object {
+                            "title": "Multicolored",
+                            "type": "text",
+                            "value": "multicolor",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#050aac",
+                              "#161cb2",
+                              "#2029ba",
+                              "#2835c2",
+                              "#303fca",
+                              "#384ad3",
+                              "#4054db",
+                              "#495ee2",
+                              "#5368e9",
+                              "#5f72ed",
+                              "#6b7df0",
+                              "#7887f0",
+                              "#8692f0",
+                              "#939cee",
+                              "#a0a6ec",
+                              "#adb1ea",
+                              "#b9bce7",
+                              "#c5c6e3",
+                              "#d1d1e0",
+                              "#dcdcdc",
+                            ],
+                            "title": "Blues",
+                            "type": "gradient",
+                            "value": "Blues",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#dcdcdc",
+                              "#e8d0c1",
+                              "#edc6ad",
+                              "#efbb9c",
+                              "#efb18e",
+                              "#eea782",
+                              "#eb9e77",
+                              "#e9946d",
+                              "#e68b64",
+                              "#e2815c",
+                              "#de7854",
+                              "#da6e4c",
+                              "#d56545",
+                              "#d15b3e",
+                              "#cc5138",
+                              "#c74632",
+                              "#c23b2c",
+                              "#bd2f26",
+                              "#b72021",
+                              "#b20a1c",
+                            ],
+                            "title": "Reds",
+                            "type": "gradient",
+                            "value": "Reds",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#00441b",
+                              "#014e1f",
+                              "#035825",
+                              "#09622a",
+                              "#116d31",
+                              "#1b7738",
+                              "#25823f",
+                              "#308c48",
+                              "#3c9650",
+                              "#49a15a",
+                              "#57ab64",
+                              "#66b56f",
+                              "#76bf7b",
+                              "#86c888",
+                              "#98d296",
+                              "#aadba6",
+                              "#bde4b8",
+                              "#d0ecca",
+                              "#e3f4df",
+                              "#f7fcf5",
+                            ],
+                            "title": "Greens",
+                            "type": "gradient",
+                            "value": "Greens",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#000000",
+                              "#121212",
+                              "#1d1d1d",
+                              "#272727",
+                              "#333333",
+                              "#3e3e3e",
+                              "#4a4a4a",
+                              "#575757",
+                              "#636363",
+                              "#707070",
+                              "#7e7e7e",
+                              "#8b8b8b",
+                              "#999999",
+                              "#a7a7a7",
+                              "#b5b5b5",
+                              "#c3c3c3",
+                              "#d2d2d2",
+                              "#e1e1e1",
+                              "#f0f0f0",
+                              "#ffffff",
+                            ],
+                            "title": "Greys",
+                            "type": "gradient",
+                            "value": "Greys",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#0000ff",
+                              "#3e00f7",
+                              "#5800ee",
+                              "#6c00e4",
+                              "#7c00db",
+                              "#8a00d1",
+                              "#9600c6",
+                              "#a200bb",
+                              "#ac00b0",
+                              "#b600a4",
+                              "#bf0098",
+                              "#c8008b",
+                              "#d0007e",
+                              "#d80071",
+                              "#df0062",
+                              "#e60054",
+                              "#ed0045",
+                              "#f30034",
+                              "#f90021",
+                              "#ff0000",
+                            ],
+                            "title": "Blue-Red",
+                            "type": "gradient",
+                            "value": "Bluered",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#050aac",
+                              "#2522b6",
+                              "#3835c0",
+                              "#4946c8",
+                              "#5957cf",
+                              "#6967d4",
+                              "#7978d7",
+                              "#8a89d7",
+                              "#9a9bd4",
+                              "#acaccd",
+                              "#df9b70",
+                              "#dd8e62",
+                              "#da8056",
+                              "#d6734c",
+                              "#d16542",
+                              "#cb583a",
+                              "#c54931",
+                              "#bf3a2a",
+                              "#b92723",
+                              "#b20a1c",
+                            ],
+                            "title": "Red-Blue",
+                            "type": "gradient",
+                            "value": "RdBu",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#800026",
+                              "#910126",
+                              "#a10526",
+                              "#b10e26",
+                              "#c01b26",
+                              "#cd2926",
+                              "#d83728",
+                              "#e2472a",
+                              "#ea572e",
+                              "#f16732",
+                              "#f67738",
+                              "#fa8740",
+                              "#fd9849",
+                              "#ffa753",
+                              "#ffb760",
+                              "#ffc76f",
+                              "#ffd681",
+                              "#ffe496",
+                              "#fff2af",
+                              "#ffffcc",
+                            ],
+                            "title": "Yellow-Orange-Red",
+                            "type": "gradient",
+                            "value": "YlOrRd",
+                          },
+                          Object {
+                            "palette": Array [
+                              "#081d58",
+                              "#11256a",
+                              "#182f79",
+                              "#1e3b86",
+                              "#234791",
+                              "#28539a",
+                              "#2e60a2",
+                              "#346da9",
+                              "#3b7aaf",
+                              "#4488b4",
+                              "#4f95b7",
+                              "#5ba2ba",
+                              "#6aafbc",
+                              "#7bbcbe",
+                              "#8dc8bf",
+                              "#a2d4c1",
+                              "#b7e0c4",
+                              "#ceebc9",
+                              "#e6f5d0",
+                              "#ffffd9",
+                            ],
+                            "title": "Yellow-Green-Blue",
+                            "type": "gradient",
+                            "value": "YlGnBu",
+                          },
+                        ],
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "color-theme",
-                    "mapTo": "colorTheme",
-                    "name": "Color theme",
-                    "schemas": Array [],
-                  },
                 ],
               },
               Object {
@@ -3450,33 +3881,20 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "mapTo": "layoutConfig",
                 "name": "Layout",
               },
-              Object {
-                "editor": [Function],
-                "id": "availability-panel",
-                "mapTo": "availabilityConfig",
-                "name": "Availability",
-              },
             ],
           },
-          "fillopacity": 40,
-          "fulllabel": "Horizontal bar",
-          "groupwidth": 0.7,
+          "fulllabel": "Tree map",
           "icon": [Function],
-          "icontype": "visBarHorizontalStacked",
-          "id": "horizontal_bar",
-          "label": "Horizontal bar",
-          "labelangle": 0,
-          "legendposition": "v",
-          "linewidth": 2,
-          "mode": "group",
-          "name": "horizontal_bar",
-          "orientation": "h",
+          "icontype": "heatmap",
+          "id": "tree_map",
+          "label": "Tree map",
+          "name": "tree_map",
+          "orientation": "v",
           "selection": Object {
             "dataLoss": "nothing",
           },
           "seriesaxis": "yaxis",
-          "showlegend": "show",
-          "type": "bar",
+          "type": "tree_map",
           "visconfig": Object {
             "config": Object {
               "displaylogo": false,
@@ -3585,7 +4003,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               ],
             },
             "indexFields": Object {},
-            "query": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs | stats count() by tags",
+            },
             "rawVizData": Object {
               "data": Object {
                 "Carrier": Array [
@@ -3634,10 +4054,26 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "size": 4,
               "status": 200,
             },
-            "userConfigs": Object {},
+            "userConfigs": Object {
+              "dataConfig": Object {
+                "dimensions": Array [
+                  Object {
+                    "label": "tags",
+                    "name": "tags",
+                  },
+                ],
+                "series": Array [
+                  Object {
+                    "aggregation": "count",
+                    "customLabel": "",
+                    "label": "",
+                    "name": "",
+                  },
+                ],
+              },
+            },
           },
           "vis": Object {
-            "barwidth": 0.97,
             "category": "Visualizations",
             "categoryaxis": "xaxis",
             "component": [Function],
@@ -3695,12 +4131,12 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                                 "name": "All",
                               },
                               Object {
-                                "id": "x",
-                                "name": "Dimension",
+                                "id": "label",
+                                "name": "Label",
                               },
                               Object {
-                                "id": "y",
-                                "name": "Series",
+                                "id": "value",
+                                "name": "Value",
                               },
                             ],
                           },
@@ -3716,7 +4152,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         Object {
                           "component": null,
                           "mapTo": "showLegend",
-                          "name": "Show legend",
+                          "name": "Show colorscale",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
@@ -3736,36 +4172,80 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                             ],
                           },
                         },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "treemap_options",
+                      "mapTo": "treemapOptions",
+                      "name": "Treemap",
+                      "schemas": Array [
                         Object {
                           "component": null,
-                          "mapTo": "position",
-                          "name": "Position",
+                          "defaultState": Array [
+                            Object {
+                              "label": "Squarify",
+                              "name": "Squarify",
+                              "value": "squarify",
+                            },
+                          ],
+                          "isSingleSelection": true,
+                          "mapTo": "tilingAlgorithm",
+                          "name": "Tiling algorithm",
+                          "options": Array [
+                            Object {
+                              "name": "Squarify",
+                              "value": "squarify",
+                            },
+                            Object {
+                              "name": "Binary",
+                              "value": "binary",
+                            },
+                            Object {
+                              "name": "Dice",
+                              "value": "dice",
+                            },
+                            Object {
+                              "name": "Slice",
+                              "value": "slice",
+                            },
+                            Object {
+                              "name": "Slice Dice",
+                              "value": "slice-dice",
+                            },
+                            Object {
+                              "name": "Dice Slice",
+                              "value": "dice-slice",
+                            },
+                          ],
+                          "props": Object {
+                            "isClearable": false,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "sort_sectors",
+                          "name": "Sort Sectors",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
-                                "name": "Right",
+                                "id": undefined,
+                                "name": "Largest to Smallest",
                               },
                             ],
                             "options": Array [
                               Object {
-                                "id": "v",
-                                "name": "Right",
+                                "id": "largest_to_smallest",
+                                "name": "Largest to Smallest",
                               },
                               Object {
-                                "id": "h",
-                                "name": "Bottom",
+                                "id": "random",
+                                "name": "Random",
                               },
                             ],
                           },
                         },
-                        Object {
-                          "component": [Function],
-                          "eleType": "input",
-                          "mapTo": "legendSize",
-                          "name": "Legend size",
-                          "title": "Legend size",
-                        },
                       ],
                     },
                     Object {
@@ -3776,119 +4256,249 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                       "schemas": Array [
                         Object {
                           "component": [Function],
-                          "eleType": "buttons",
-                          "mapTo": "mode",
-                          "name": "Mode",
-                          "props": Object {
-                            "defaultSelections": Array [
-                              Object {
-                                "id": "group",
-                                "name": "Group",
-                              },
-                            ],
-                            "options": Array [
-                              Object {
-                                "id": "group",
-                                "name": "Group",
-                              },
-                              Object {
-                                "id": "stack",
-                                "name": "Stack",
-                              },
-                            ],
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "eleType": "input",
-                          "mapTo": "labelSize",
-                          "name": "Label size",
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 0,
-                          "eleType": "slider",
-                          "mapTo": "rotateBarLabels",
-                          "name": "Rotate bar labels",
-                          "props": Object {
-                            "max": 90,
-                            "min": -90,
-                            "showTicks": true,
-                            "ticks": Array [
-                              Object {
-                                "label": "-90°",
-                                "value": -90,
-                              },
-                              Object {
-                                "label": "-45°",
-                                "value": -45,
-                              },
-                              Object {
-                                "label": "0°",
-                                "value": 0,
-                              },
-                              Object {
-                                "label": "45°",
-                                "value": 45,
-                              },
-                              Object {
-                                "label": "90°",
-                                "value": 90,
-                              },
-                            ],
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 0.7,
-                          "eleType": "slider",
-                          "mapTo": "groupWidth",
-                          "name": "Group width",
-                          "props": Object {
-                            "max": 1,
-                            "step": 0.01,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 0.97,
-                          "eleType": "slider",
-                          "mapTo": "barWidth",
-                          "name": "Bar width",
-                          "props": Object {
-                            "max": 1,
-                            "step": 0.01,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 2,
-                          "eleType": "slider",
-                          "mapTo": "lineWidth",
-                          "name": "Line width",
-                          "props": Object {
-                            "max": 10,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 40,
-                          "eleType": "slider",
-                          "mapTo": "fillOpacity",
-                          "name": "Fill opacity",
-                          "props": Object {
-                            "max": 100,
+                          "defaultState": Object {
+                            "name": "default",
                           },
+                          "eleType": "treemapColorPicker",
+                          "isSingleSelection": true,
+                          "mapTo": "colorTheme",
+                          "name": "Color theme",
+                          "options": Array [
+                            Object {
+                              "title": "Default",
+                              "type": "text",
+                              "value": "default",
+                            },
+                            Object {
+                              "title": "Single color",
+                              "type": "text",
+                              "value": "singleColor",
+                            },
+                            Object {
+                              "title": "Multicolored",
+                              "type": "text",
+                              "value": "multicolor",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#050aac",
+                                "#161cb2",
+                                "#2029ba",
+                                "#2835c2",
+                                "#303fca",
+                                "#384ad3",
+                                "#4054db",
+                                "#495ee2",
+                                "#5368e9",
+                                "#5f72ed",
+                                "#6b7df0",
+                                "#7887f0",
+                                "#8692f0",
+                                "#939cee",
+                                "#a0a6ec",
+                                "#adb1ea",
+                                "#b9bce7",
+                                "#c5c6e3",
+                                "#d1d1e0",
+                                "#dcdcdc",
+                              ],
+                              "title": "Blues",
+                              "type": "gradient",
+                              "value": "Blues",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#dcdcdc",
+                                "#e8d0c1",
+                                "#edc6ad",
+                                "#efbb9c",
+                                "#efb18e",
+                                "#eea782",
+                                "#eb9e77",
+                                "#e9946d",
+                                "#e68b64",
+                                "#e2815c",
+                                "#de7854",
+                                "#da6e4c",
+                                "#d56545",
+                                "#d15b3e",
+                                "#cc5138",
+                                "#c74632",
+                                "#c23b2c",
+                                "#bd2f26",
+                                "#b72021",
+                                "#b20a1c",
+                              ],
+                              "title": "Reds",
+                              "type": "gradient",
+                              "value": "Reds",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#00441b",
+                                "#014e1f",
+                                "#035825",
+                                "#09622a",
+                                "#116d31",
+                                "#1b7738",
+                                "#25823f",
+                                "#308c48",
+                                "#3c9650",
+                                "#49a15a",
+                                "#57ab64",
+                                "#66b56f",
+                                "#76bf7b",
+                                "#86c888",
+                                "#98d296",
+                                "#aadba6",
+                                "#bde4b8",
+                                "#d0ecca",
+                                "#e3f4df",
+                                "#f7fcf5",
+                              ],
+                              "title": "Greens",
+                              "type": "gradient",
+                              "value": "Greens",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#000000",
+                                "#121212",
+                                "#1d1d1d",
+                                "#272727",
+                                "#333333",
+                                "#3e3e3e",
+                                "#4a4a4a",
+                                "#575757",
+                                "#636363",
+                                "#707070",
+                                "#7e7e7e",
+                                "#8b8b8b",
+                                "#999999",
+                                "#a7a7a7",
+                                "#b5b5b5",
+                                "#c3c3c3",
+                                "#d2d2d2",
+                                "#e1e1e1",
+                                "#f0f0f0",
+                                "#ffffff",
+                              ],
+                              "title": "Greys",
+                              "type": "gradient",
+                              "value": "Greys",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#0000ff",
+                                "#3e00f7",
+                                "#5800ee",
+                                "#6c00e4",
+                                "#7c00db",
+                                "#8a00d1",
+                                "#9600c6",
+                                "#a200bb",
+                                "#ac00b0",
+                                "#b600a4",
+                                "#bf0098",
+                                "#c8008b",
+                                "#d0007e",
+                                "#d80071",
+                                "#df0062",
+                                "#e60054",
+                                "#ed0045",
+                                "#f30034",
+                                "#f90021",
+                                "#ff0000",
+                              ],
+                              "title": "Blue-Red",
+                              "type": "gradient",
+                              "value": "Bluered",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#050aac",
+                                "#2522b6",
+                                "#3835c0",
+                                "#4946c8",
+                                "#5957cf",
+                                "#6967d4",
+                                "#7978d7",
+                                "#8a89d7",
+                                "#9a9bd4",
+                                "#acaccd",
+                                "#df9b70",
+                                "#dd8e62",
+                                "#da8056",
+                                "#d6734c",
+                                "#d16542",
+                                "#cb583a",
+                                "#c54931",
+                                "#bf3a2a",
+                                "#b92723",
+                                "#b20a1c",
+                              ],
+                              "title": "Red-Blue",
+                              "type": "gradient",
+                              "value": "RdBu",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#800026",
+                                "#910126",
+                                "#a10526",
+                                "#b10e26",
+                                "#c01b26",
+                                "#cd2926",
+                                "#d83728",
+                                "#e2472a",
+                                "#ea572e",
+                                "#f16732",
+                                "#f67738",
+                                "#fa8740",
+                                "#fd9849",
+                                "#ffa753",
+                                "#ffb760",
+                                "#ffc76f",
+                                "#ffd681",
+                                "#ffe496",
+                                "#fff2af",
+                                "#ffffcc",
+                              ],
+                              "title": "Yellow-Orange-Red",
+                              "type": "gradient",
+                              "value": "YlOrRd",
+                            },
+                            Object {
+                              "palette": Array [
+                                "#081d58",
+                                "#11256a",
+                                "#182f79",
+                                "#1e3b86",
+                                "#234791",
+                                "#28539a",
+                                "#2e60a2",
+                                "#346da9",
+                                "#3b7aaf",
+                                "#4488b4",
+                                "#4f95b7",
+                                "#5ba2ba",
+                                "#6aafbc",
+                                "#7bbcbe",
+                                "#8dc8bf",
+                                "#a2d4c1",
+                                "#b7e0c4",
+                                "#ceebc9",
+                                "#e6f5d0",
+                                "#ffffd9",
+                              ],
+                              "title": "Yellow-Green-Blue",
+                              "type": "gradient",
+                              "value": "YlGnBu",
+                            },
+                          ],
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 },
                 Object {
@@ -3898,33 +4508,20 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   "mapTo": "layoutConfig",
                   "name": "Layout",
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "availability-panel",
-                  "mapTo": "availabilityConfig",
-                  "name": "Availability",
-                },
               ],
             },
-            "fillopacity": 40,
-            "fulllabel": "Horizontal bar",
-            "groupwidth": 0.7,
+            "fulllabel": "Tree map",
             "icon": [Function],
-            "icontype": "visBarHorizontalStacked",
-            "id": "horizontal_bar",
-            "label": "Horizontal bar",
-            "labelangle": 0,
-            "legendposition": "v",
-            "linewidth": 2,
-            "mode": "group",
-            "name": "horizontal_bar",
-            "orientation": "h",
+            "icontype": "heatmap",
+            "id": "tree_map",
+            "label": "Tree map",
+            "name": "tree_map",
+            "orientation": "v",
             "selection": Object {
               "dataLoss": "nothing",
             },
             "seriesaxis": "yaxis",
-            "showlegend": "show",
-            "type": "bar",
+            "type": "tree_map",
             "visconfig": Object {
               "config": Object {
                 "displaylogo": false,
@@ -3951,7 +4548,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
         }
       }
     >
-      <Bar
+      <TreeMap
         config={
           Object {
             "displaylogo": false,
@@ -4040,7 +4637,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 ],
               },
               "indexFields": Object {},
-              "query": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs | stats count() by tags",
+              },
               "rawVizData": Object {
                 "data": Object {
                   "Carrier": Array [
@@ -4089,10 +4688,26 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "size": 4,
                 "status": 200,
               },
-              "userConfigs": Object {},
+              "userConfigs": Object {
+                "dataConfig": Object {
+                  "dimensions": Array [
+                    Object {
+                      "label": "tags",
+                      "name": "tags",
+                    },
+                  ],
+                  "series": Array [
+                    Object {
+                      "aggregation": "count",
+                      "customLabel": "",
+                      "label": "",
+                      "name": "",
+                    },
+                  ],
+                },
+              },
             },
             "vis": Object {
-              "barwidth": 0.97,
               "category": "Visualizations",
               "categoryaxis": "xaxis",
               "component": [Function],
@@ -4150,12 +4765,12 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                                   "name": "All",
                                 },
                                 Object {
-                                  "id": "x",
-                                  "name": "Dimension",
+                                  "id": "label",
+                                  "name": "Label",
                                 },
                                 Object {
-                                  "id": "y",
-                                  "name": "Series",
+                                  "id": "value",
+                                  "name": "Value",
                                 },
                               ],
                             },
@@ -4171,7 +4786,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           Object {
                             "component": null,
                             "mapTo": "showLegend",
-                            "name": "Show legend",
+                            "name": "Show colorscale",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
@@ -4191,36 +4806,80 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                               ],
                             },
                           },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "treemap_options",
+                        "mapTo": "treemapOptions",
+                        "name": "Treemap",
+                        "schemas": Array [
                           Object {
                             "component": null,
-                            "mapTo": "position",
-                            "name": "Position",
+                            "defaultState": Array [
+                              Object {
+                                "label": "Squarify",
+                                "name": "Squarify",
+                                "value": "squarify",
+                              },
+                            ],
+                            "isSingleSelection": true,
+                            "mapTo": "tilingAlgorithm",
+                            "name": "Tiling algorithm",
+                            "options": Array [
+                              Object {
+                                "name": "Squarify",
+                                "value": "squarify",
+                              },
+                              Object {
+                                "name": "Binary",
+                                "value": "binary",
+                              },
+                              Object {
+                                "name": "Dice",
+                                "value": "dice",
+                              },
+                              Object {
+                                "name": "Slice",
+                                "value": "slice",
+                              },
+                              Object {
+                                "name": "Slice Dice",
+                                "value": "slice-dice",
+                              },
+                              Object {
+                                "name": "Dice Slice",
+                                "value": "dice-slice",
+                              },
+                            ],
+                            "props": Object {
+                              "isClearable": false,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "sort_sectors",
+                            "name": "Sort Sectors",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
-                                  "name": "Right",
+                                  "id": undefined,
+                                  "name": "Largest to Smallest",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "v",
-                                  "name": "Right",
+                                  "id": "largest_to_smallest",
+                                  "name": "Largest to Smallest",
                                 },
                                 Object {
-                                  "id": "h",
-                                  "name": "Bottom",
+                                  "id": "random",
+                                  "name": "Random",
                                 },
                               ],
                             },
                           },
-                          Object {
-                            "component": [Function],
-                            "eleType": "input",
-                            "mapTo": "legendSize",
-                            "name": "Legend size",
-                            "title": "Legend size",
-                          },
                         ],
                       },
                       Object {
@@ -4231,43 +4890,1722 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         "schemas": Array [
                           Object {
                             "component": [Function],
-                            "eleType": "buttons",
-                            "mapTo": "mode",
-                            "name": "Mode",
-                            "props": Object {
-                              "defaultSelections": Array [
-                                Object {
-                                  "id": "group",
-                                  "name": "Group",
-                                },
-                              ],
-                              "options": Array [
-                                Object {
-                                  "id": "group",
-                                  "name": "Group",
-                                },
-                                Object {
-                                  "id": "stack",
-                                  "name": "Stack",
-                                },
-                              ],
+                            "defaultState": Object {
+                              "name": "default",
                             },
-                          },
-                          Object {
-                            "component": [Function],
-                            "eleType": "input",
-                            "mapTo": "labelSize",
-                            "name": "Label size",
-                          },
-                          Object {
-                            "component": [Function],
-                            "defaultState": 0,
-                            "eleType": "slider",
-                            "mapTo": "rotateBarLabels",
-                            "name": "Rotate bar labels",
-                            "props": Object {
-                              "max": 90,
-                              "min": -90,
+                            "eleType": "treemapColorPicker",
+                            "isSingleSelection": true,
+                            "mapTo": "colorTheme",
+                            "name": "Color theme",
+                            "options": Array [
+                              Object {
+                                "title": "Default",
+                                "type": "text",
+                                "value": "default",
+                              },
+                              Object {
+                                "title": "Single color",
+                                "type": "text",
+                                "value": "singleColor",
+                              },
+                              Object {
+                                "title": "Multicolored",
+                                "type": "text",
+                                "value": "multicolor",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#050aac",
+                                  "#161cb2",
+                                  "#2029ba",
+                                  "#2835c2",
+                                  "#303fca",
+                                  "#384ad3",
+                                  "#4054db",
+                                  "#495ee2",
+                                  "#5368e9",
+                                  "#5f72ed",
+                                  "#6b7df0",
+                                  "#7887f0",
+                                  "#8692f0",
+                                  "#939cee",
+                                  "#a0a6ec",
+                                  "#adb1ea",
+                                  "#b9bce7",
+                                  "#c5c6e3",
+                                  "#d1d1e0",
+                                  "#dcdcdc",
+                                ],
+                                "title": "Blues",
+                                "type": "gradient",
+                                "value": "Blues",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#dcdcdc",
+                                  "#e8d0c1",
+                                  "#edc6ad",
+                                  "#efbb9c",
+                                  "#efb18e",
+                                  "#eea782",
+                                  "#eb9e77",
+                                  "#e9946d",
+                                  "#e68b64",
+                                  "#e2815c",
+                                  "#de7854",
+                                  "#da6e4c",
+                                  "#d56545",
+                                  "#d15b3e",
+                                  "#cc5138",
+                                  "#c74632",
+                                  "#c23b2c",
+                                  "#bd2f26",
+                                  "#b72021",
+                                  "#b20a1c",
+                                ],
+                                "title": "Reds",
+                                "type": "gradient",
+                                "value": "Reds",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#00441b",
+                                  "#014e1f",
+                                  "#035825",
+                                  "#09622a",
+                                  "#116d31",
+                                  "#1b7738",
+                                  "#25823f",
+                                  "#308c48",
+                                  "#3c9650",
+                                  "#49a15a",
+                                  "#57ab64",
+                                  "#66b56f",
+                                  "#76bf7b",
+                                  "#86c888",
+                                  "#98d296",
+                                  "#aadba6",
+                                  "#bde4b8",
+                                  "#d0ecca",
+                                  "#e3f4df",
+                                  "#f7fcf5",
+                                ],
+                                "title": "Greens",
+                                "type": "gradient",
+                                "value": "Greens",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#000000",
+                                  "#121212",
+                                  "#1d1d1d",
+                                  "#272727",
+                                  "#333333",
+                                  "#3e3e3e",
+                                  "#4a4a4a",
+                                  "#575757",
+                                  "#636363",
+                                  "#707070",
+                                  "#7e7e7e",
+                                  "#8b8b8b",
+                                  "#999999",
+                                  "#a7a7a7",
+                                  "#b5b5b5",
+                                  "#c3c3c3",
+                                  "#d2d2d2",
+                                  "#e1e1e1",
+                                  "#f0f0f0",
+                                  "#ffffff",
+                                ],
+                                "title": "Greys",
+                                "type": "gradient",
+                                "value": "Greys",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#0000ff",
+                                  "#3e00f7",
+                                  "#5800ee",
+                                  "#6c00e4",
+                                  "#7c00db",
+                                  "#8a00d1",
+                                  "#9600c6",
+                                  "#a200bb",
+                                  "#ac00b0",
+                                  "#b600a4",
+                                  "#bf0098",
+                                  "#c8008b",
+                                  "#d0007e",
+                                  "#d80071",
+                                  "#df0062",
+                                  "#e60054",
+                                  "#ed0045",
+                                  "#f30034",
+                                  "#f90021",
+                                  "#ff0000",
+                                ],
+                                "title": "Blue-Red",
+                                "type": "gradient",
+                                "value": "Bluered",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#050aac",
+                                  "#2522b6",
+                                  "#3835c0",
+                                  "#4946c8",
+                                  "#5957cf",
+                                  "#6967d4",
+                                  "#7978d7",
+                                  "#8a89d7",
+                                  "#9a9bd4",
+                                  "#acaccd",
+                                  "#df9b70",
+                                  "#dd8e62",
+                                  "#da8056",
+                                  "#d6734c",
+                                  "#d16542",
+                                  "#cb583a",
+                                  "#c54931",
+                                  "#bf3a2a",
+                                  "#b92723",
+                                  "#b20a1c",
+                                ],
+                                "title": "Red-Blue",
+                                "type": "gradient",
+                                "value": "RdBu",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#800026",
+                                  "#910126",
+                                  "#a10526",
+                                  "#b10e26",
+                                  "#c01b26",
+                                  "#cd2926",
+                                  "#d83728",
+                                  "#e2472a",
+                                  "#ea572e",
+                                  "#f16732",
+                                  "#f67738",
+                                  "#fa8740",
+                                  "#fd9849",
+                                  "#ffa753",
+                                  "#ffb760",
+                                  "#ffc76f",
+                                  "#ffd681",
+                                  "#ffe496",
+                                  "#fff2af",
+                                  "#ffffcc",
+                                ],
+                                "title": "Yellow-Orange-Red",
+                                "type": "gradient",
+                                "value": "YlOrRd",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#081d58",
+                                  "#11256a",
+                                  "#182f79",
+                                  "#1e3b86",
+                                  "#234791",
+                                  "#28539a",
+                                  "#2e60a2",
+                                  "#346da9",
+                                  "#3b7aaf",
+                                  "#4488b4",
+                                  "#4f95b7",
+                                  "#5ba2ba",
+                                  "#6aafbc",
+                                  "#7bbcbe",
+                                  "#8dc8bf",
+                                  "#a2d4c1",
+                                  "#b7e0c4",
+                                  "#ceebc9",
+                                  "#e6f5d0",
+                                  "#ffffd9",
+                                ],
+                                "title": "Yellow-Green-Blue",
+                                "type": "gradient",
+                                "value": "YlGnBu",
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  Object {
+                    "content": Array [],
+                    "editor": [Function],
+                    "id": "style-panel",
+                    "mapTo": "layoutConfig",
+                    "name": "Layout",
+                  },
+                ],
+              },
+              "fulllabel": "Tree map",
+              "icon": [Function],
+              "icontype": "heatmap",
+              "id": "tree_map",
+              "label": "Tree map",
+              "name": "tree_map",
+              "orientation": "v",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "type": "tree_map",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+          }
+        }
+      >
+        <Plt
+          config={
+            Object {
+              "displaylogo": false,
+              "responsive": true,
+            }
+          }
+          data={
+            Array [
+              Object {
+                "hoverinfo": "all",
+                "labels": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "marker": Object {},
+                "parents": Array [
+                  "",
+                  "",
+                  "",
+                  "",
+                ],
+                "sort": true,
+                "textinfo": "label+value+percent parent+percent entry",
+                "tiling": Object {
+                  "packing": undefined,
+                },
+                "type": "treemap",
+                "values": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "title": "",
+              "treemapcolorway": Object {},
+            }
+          }
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "all",
+                  "labels": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "marker": Object {},
+                  "parents": Array [
+                    "",
+                    "",
+                    "",
+                    "",
+                  ],
+                  "sort": true,
+                  "textinfo": "label+value+percent parent+percent entry",
+                  "tiling": Object {
+                    "packing": undefined,
+                  },
+                  "type": "treemap",
+                  "values": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "stack",
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "h",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "showlegend": false,
+                "title": "",
+                "treemapcolorway": Object {},
+                "xaxis": Object {
+                  "automargin": true,
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+                "yaxis": Object {
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </TreeMap>
+    </VisualizationChart>
+  </Visualization>
+</div>
+`;
+
+exports[`Utils helper functions renders displayVisualization function 4`] = `
+<div>
+  <Visualization
+    visualizations={
+      Object {
+        "data": Object {
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "label": "avg(FlightDelayMin)",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
+          },
+          "explorer": Object {
+            "explorerData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "explorerFields": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+          },
+          "indexFields": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+          },
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
+          },
+          "userConfigs": Object {
+            "dataConfig": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "machine.os",
+                  "name": "machine.os",
+                },
+              ],
+              "series": Array [
+                Object {
+                  "aggregation": "avg",
+                  "customLabel": "",
+                  "label": "machine.ram",
+                  "name": "machine.ram",
+                },
+              ],
+            },
+          },
+        },
+        "vis": Object {
+          "barwidth": 0.97,
+          "category": "Visualizations",
+          "categoryaxis": "xaxis",
+          "component": [Function],
+          "editorconfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Style",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "tooltip_options",
+                    "mapTo": "tooltipOptions",
+                    "name": "Tooltip options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipMode",
+                        "name": "Tooltip mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipText",
+                        "name": "Tooltip text",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                            Object {
+                              "id": "x",
+                              "name": "Dimension",
+                            },
+                            Object {
+                              "id": "y",
+                              "name": "Series",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "legend",
+                    "mapTo": "legend",
+                    "name": "Legend",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "showLegend",
+                        "name": "Show legend",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "position",
+                        "name": "Position",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                            Object {
+                              "id": "h",
+                              "name": "Bottom",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "legendSize",
+                        "name": "Legend size",
+                        "title": "Legend size",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
+                      Object {
+                        "component": [Function],
+                        "eleType": "buttons",
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "id": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label size",
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0,
+                        "eleType": "slider",
+                        "mapTo": "rotateBarLabels",
+                        "name": "Rotate bar labels",
+                        "props": Object {
+                          "max": 90,
+                          "min": -90,
+                          "showTicks": true,
+                          "ticks": Array [
+                            Object {
+                              "label": "-90°",
+                              "value": -90,
+                            },
+                            Object {
+                              "label": "-45°",
+                              "value": -45,
+                            },
+                            Object {
+                              "label": "0°",
+                              "value": 0,
+                            },
+                            Object {
+                              "label": "45°",
+                              "value": 45,
+                            },
+                            Object {
+                              "label": "90°",
+                              "value": 90,
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.7,
+                        "eleType": "slider",
+                        "mapTo": "groupWidth",
+                        "name": "Group width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.97,
+                        "eleType": "slider",
+                        "mapTo": "barWidth",
+                        "name": "Bar width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 2,
+                        "eleType": "slider",
+                        "mapTo": "lineWidth",
+                        "name": "Line width",
+                        "props": Object {
+                          "max": 10,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 40,
+                        "eleType": "slider",
+                        "mapTo": "fillOpacity",
+                        "name": "Fill opacity",
+                        "props": Object {
+                          "max": 100,
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "color-theme",
+                    "mapTo": "colorTheme",
+                    "name": "Color theme",
+                    "schemas": Array [],
+                  },
+                ],
+              },
+              Object {
+                "content": Array [],
+                "editor": [Function],
+                "id": "style-panel",
+                "mapTo": "layoutConfig",
+                "name": "Layout",
+              },
+              Object {
+                "editor": [Function],
+                "id": "availability-panel",
+                "mapTo": "availabilityConfig",
+                "name": "Availability",
+              },
+            ],
+          },
+          "fillopacity": 40,
+          "fulllabel": "Horizontal bar",
+          "groupwidth": 0.7,
+          "icon": [Function],
+          "icontype": "visBarHorizontalStacked",
+          "id": "horizontal_bar",
+          "label": "Horizontal bar",
+          "labelangle": 0,
+          "legendposition": "v",
+          "linewidth": 2,
+          "mode": "group",
+          "name": "horizontal_bar",
+          "orientation": "h",
+          "selection": Object {
+            "dataLoss": "nothing",
+          },
+          "seriesaxis": "yaxis",
+          "showlegend": "show",
+          "type": "bar",
+          "visconfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
+            },
+            "isUniColor": false,
+            "layout": Object {
+              "height": 1180,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
+            },
+          },
+        },
+      }
+    }
+  >
+    <VisualizationChart
+      visualizations={
+        Object {
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "label": "avg(FlightDelayMin)",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+              ],
+            },
+            "explorer": Object {
+              "explorerData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "explorerFields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+            },
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {
+              "dataConfig": Object {
+                "dimensions": Array [
+                  Object {
+                    "label": "machine.os",
+                    "name": "machine.os",
+                  },
+                ],
+                "series": Array [
+                  Object {
+                    "aggregation": "avg",
+                    "customLabel": "",
+                    "label": "machine.ram",
+                    "name": "machine.ram",
+                  },
+                ],
+              },
+            },
+          },
+          "vis": Object {
+            "barwidth": 0.97,
+            "category": "Visualizations",
+            "categoryaxis": "xaxis",
+            "component": [Function],
+            "editorconfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "id": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateBarLabels",
+                          "name": "Rotate bar labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.7,
+                          "eleType": "slider",
+                          "mapTo": "groupWidth",
+                          "name": "Group width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.97,
+                          "eleType": "slider",
+                          "mapTo": "barWidth",
+                          "name": "Bar width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 40,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
+                  "content": Array [],
+                  "editor": [Function],
+                  "id": "style-panel",
+                  "mapTo": "layoutConfig",
+                  "name": "Layout",
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "availability-panel",
+                  "mapTo": "availabilityConfig",
+                  "name": "Availability",
+                },
+              ],
+            },
+            "fillopacity": 40,
+            "fulllabel": "Horizontal bar",
+            "groupwidth": 0.7,
+            "icon": [Function],
+            "icontype": "visBarHorizontalStacked",
+            "id": "horizontal_bar",
+            "label": "Horizontal bar",
+            "labelangle": 0,
+            "legendposition": "v",
+            "linewidth": 2,
+            "mode": "group",
+            "name": "horizontal_bar",
+            "orientation": "h",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesaxis": "yaxis",
+            "showlegend": "show",
+            "type": "bar",
+            "visconfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
+              },
+              "isUniColor": false,
+              "layout": Object {
+                "height": 1180,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+              },
+            },
+          },
+        }
+      }
+    >
+      <Bar
+        config={
+          Object {
+            "displaylogo": false,
+            "responsive": true,
+          }
+        }
+        layout={[Function]}
+        visualizations={
+          Object {
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "label": "avg(FlightDelayMin)",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "explorer": Object {
+                "explorerData": Object {
+                  "data": Object {
+                    "Carrier": Array [
+                      "BeatsWest",
+                      "Logstash Airways",
+                      "OpenSearch Dashboards Airlines",
+                      "OpenSearch-Air",
+                    ],
+                    "avg(FlightDelayMin)": Array [
+                      53.65384615384615,
+                      45.36144578313253,
+                      63.1578947368421,
+                      46.81318681318681,
+                    ],
+                  },
+                  "jsonData": Array [
+                    Object {
+                      "Carrier": "BeatsWest",
+                      "avg(FlightDelayMin)": 53.65384615384615,
+                    },
+                    Object {
+                      "Carrier": "Logstash Airways",
+                      "avg(FlightDelayMin)": 45.36144578313253,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch Dashboards Airlines",
+                      "avg(FlightDelayMin)": 63.1578947368421,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch-Air",
+                      "avg(FlightDelayMin)": 46.81318681318681,
+                    },
+                  ],
+                  "metadata": Object {
+                    "fields": Array [
+                      Object {
+                        "name": "avg(FlightDelayMin)",
+                        "type": "double",
+                      },
+                      Object {
+                        "name": "Carrier",
+                        "type": "keyword",
+                      },
+                    ],
+                  },
+                  "size": 4,
+                  "status": 200,
+                },
+                "explorerFields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+              },
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {
+                "dataConfig": Object {
+                  "dimensions": Array [
+                    Object {
+                      "label": "machine.os",
+                      "name": "machine.os",
+                    },
+                  ],
+                  "series": Array [
+                    Object {
+                      "aggregation": "avg",
+                      "customLabel": "",
+                      "label": "machine.ram",
+                      "name": "machine.ram",
+                    },
+                  ],
+                },
+              },
+            },
+            "vis": Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
                               "showTicks": true,
                               "ticks": Array [
                                 Object {
@@ -4406,90 +6744,179 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
           }
         }
       >
-        <EmptyPlaceholder
-          icon="visBarHorizontalStacked"
-        >
-          <EuiText
-            className="lnsChart__empty"
-            color="subdued"
-            data-test-subj="vizWorkspace__noData"
-            size="xs"
-            textAlign="center"
-          >
-            <div
-              className="euiText euiText--extraSmall lnsChart__empty"
-              data-test-subj="vizWorkspace__noData"
-            >
-              <EuiTextAlign
-                textAlign="center"
-              >
-                <div
-                  className="euiTextAlign euiTextAlign--center"
-                >
-                  <EuiTextColor
-                    color="subdued"
-                    component="div"
-                  >
-                    <div
-                      className="euiTextColor euiTextColor--subdued"
-                    >
-                      <EuiIcon
-                        color="subdued"
-                        size="xxl"
-                        type="visBarHorizontalStacked"
-                      >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                          focusable="false"
-                          role="img"
-                          style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                            focusable="false"
-                            height={16}
-                            role="img"
-                            style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                      <EuiSpacer
-                        size="l"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--l"
-                        />
-                      </EuiSpacer>
-                      <p>
-                        <FormattedMessage
-                          defaultMessage="No results found"
-                          id="visualization_noData"
-                          values={Object {}}
-                        >
-                          <span>
-                            No results found
-                          </span>
-                        </FormattedMessage>
-                      </p>
-                    </div>
-                  </EuiTextColor>
-                </div>
-              </EuiTextAlign>
-            </div>
-          </EuiText>
-        </EmptyPlaceholder>
+        <Plt
+          config={
+            Object {
+              "displaylogo": false,
+              "responsive": true,
+            }
+          }
+          data={
+            Array [
+              Object {
+                "hoverinfo": "all",
+                "marker": Object {
+                  "color": "rgba(60,161,199,0.2)",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "width": 2,
+                  },
+                },
+                "name": "avg(machine.ram)",
+                "orientation": "h",
+                "type": "bar",
+                "x": undefined,
+                "y": Array [],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "bargap": 0.30000000000000004,
+              "bargroupgap": 0.030000000000000027,
+              "barmode": "group",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "hovermode": "closest",
+              "legend": Object {
+                "orientation": "v",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "showlegend": true,
+              "title": "",
+              "xaxis": Object {
+                "automargin": true,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+              "yaxis": Object {
+                "automargin": true,
+                "tickangle": 0,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+            }
+          }
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "all",
+                  "marker": Object {
+                    "color": "rgba(60,161,199,0.2)",
+                    "line": Object {
+                      "color": "#3CA1C7",
+                      "width": 2,
+                    },
+                  },
+                  "name": "avg(machine.ram)",
+                  "orientation": "h",
+                  "type": "bar",
+                  "x": undefined,
+                  "y": Array [],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "bargap": 0.30000000000000004,
+                "bargroupgap": 0.030000000000000027,
+                "barmode": "group",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                  "tickangle": 0,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
       </Bar>
     </VisualizationChart>
   </Visualization>
 </div>
 `;
 
-exports[`Utils helper functions renders displayVisualization function 4`] = `
+exports[`Utils helper functions renders displayVisualization function 5`] = `
 <div>
   <Visualization
     visualizations={
@@ -4499,79 +6926,163 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
           "defaultAxes": Object {
             "xaxis": Array [
               Object {
-                "label": "span(timestamp,1h)",
-                "name": "span(timestamp,1h)",
-                "type": "timestamp",
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
               },
             ],
             "yaxis": Array [
               Object {
-                "label": "count('ip')",
-                "name": "count('ip')",
-                "type": "integer",
+                "label": "avg(FlightDelayMin)",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
               },
             ],
           },
           "explorer": Object {
             "explorerData": Object {
               "data": Object {
-                "count('ip')": Array [],
-                "span(timestamp,1h)": Array [],
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
               },
-              "jsonData": Array [],
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
               "metadata": Object {
                 "fields": Array [
                   Object {
-                    "name": "count('ip')",
-                    "type": "integer",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
                   },
                   Object {
-                    "name": "span(timestamp,1h)",
-                    "type": "timestamp",
+                    "name": "Carrier",
+                    "type": "keyword",
                   },
                 ],
               },
-              "size": 0,
+              "size": 4,
               "status": 200,
             },
             "explorerFields": Array [
               Object {
-                "name": "count('ip')",
-                "type": "integer",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
               },
               Object {
-                "name": "span(timestamp,1h)",
-                "type": "timestamp",
+                "name": "Carrier",
+                "type": "keyword",
               },
             ],
           },
           "indexFields": Object {},
-          "query": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+          },
           "rawVizData": Object {
             "data": Object {
-              "count('ip')": Array [],
-              "span(timestamp,1h)": Array [],
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
             },
-            "jsonData": Array [],
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
             "metadata": Object {
               "fields": Array [
                 Object {
-                  "name": "count('ip')",
-                  "type": "integer",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
                 },
                 Object {
-                  "name": "span(timestamp,1h)",
-                  "type": "timestamp",
+                  "name": "Carrier",
+                  "type": "keyword",
                 },
               ],
             },
-            "size": 0,
+            "size": 4,
             "status": 200,
           },
-          "userConfigs": Object {},
+          "userConfigs": Object {
+            "dataConfig": Object {
+              "dimensions": Array [],
+              "series": Array [
+                Object {
+                  "aggregation": "avg",
+                  "customLabel": "",
+                  "label": "machine.ram",
+                  "name": "machine.ram",
+                },
+              ],
+              "span": Object {
+                "interval": "1",
+                "time_field": Array [
+                  Object {
+                    "label": "timestamp",
+                    "name": "timestamp",
+                    "type": "timestamp",
+                  },
+                ],
+                "unit": Array [
+                  Object {
+                    "label": "Day",
+                    "name": "Day",
+                    "value": "d",
+                  },
+                ],
+              },
+            },
+          },
         },
         "vis": Object {
-          "barwidth": 0.97,
           "category": "Visualizations",
           "categoryaxis": "xaxis",
           "component": [Function],
@@ -4583,64 +7094,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 "mapTo": "dataConfig",
                 "name": "Style",
                 "sections": Array [
-                  Object {
-                    "editor": [Function],
-                    "id": "tooltip_options",
-                    "mapTo": "tooltipOptions",
-                    "name": "Tooltip options",
-                    "schemas": Array [
-                      Object {
-                        "component": null,
-                        "mapTo": "tooltipMode",
-                        "name": "Tooltip mode",
-                        "props": Object {
-                          "defaultSelections": Array [
-                            Object {
-                              "id": "show",
-                              "name": "Show",
-                            },
-                          ],
-                          "options": Array [
-                            Object {
-                              "id": "show",
-                              "name": "Show",
-                            },
-                            Object {
-                              "id": "hidden",
-                              "name": "Hidden",
-                            },
-                          ],
-                        },
-                      },
-                      Object {
-                        "component": null,
-                        "mapTo": "tooltipText",
-                        "name": "Tooltip text",
-                        "props": Object {
-                          "defaultSelections": Array [
-                            Object {
-                              "id": "all",
-                              "name": "All",
-                            },
-                          ],
-                          "options": Array [
-                            Object {
-                              "id": "all",
-                              "name": "All",
-                            },
-                            Object {
-                              "id": "x",
-                              "name": "Dimension",
-                            },
-                            Object {
-                              "id": "y",
-                              "name": "Series",
-                            },
-                          ],
-                        },
-                      },
-                    ],
-                  },
                   Object {
                     "editor": [Function],
                     "id": "legend",
@@ -4696,133 +7149,134 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                       Object {
                         "component": [Function],
                         "eleType": "input",
-                        "mapTo": "legendSize",
+                        "mapTo": "size",
                         "name": "Legend size",
-                        "title": "Legend size",
                       },
                     ],
                   },
                   Object {
                     "editor": [Function],
-                    "id": "chart_styles",
-                    "mapTo": "chartStyles",
-                    "name": "Chart styles",
+                    "id": "tooltip_options",
+                    "mapTo": "tooltipOptions",
+                    "name": "Tooltip options",
                     "schemas": Array [
                       Object {
-                        "component": [Function],
-                        "eleType": "buttons",
-                        "mapTo": "mode",
-                        "name": "Mode",
+                        "component": null,
+                        "mapTo": "tooltipMode",
+                        "name": "Tooltip mode",
                         "props": Object {
                           "defaultSelections": Array [
                             Object {
-                              "id": "group",
-                              "name": "Group",
+                              "id": "show",
+                              "name": "Show",
                             },
                           ],
                           "options": Array [
                             Object {
-                              "id": "group",
-                              "name": "Group",
+                              "id": "show",
+                              "name": "Show",
                             },
                             Object {
-                              "id": "stack",
-                              "name": "Stack",
+                              "id": "hidden",
+                              "name": "Hidden",
                             },
                           ],
                         },
                       },
                       Object {
-                        "component": [Function],
-                        "eleType": "input",
-                        "mapTo": "labelSize",
-                        "name": "Label size",
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 0,
-                        "eleType": "slider",
-                        "mapTo": "rotateBarLabels",
-                        "name": "Rotate bar labels",
+                        "component": null,
+                        "mapTo": "tooltipText",
+                        "name": "Tooltip text",
                         "props": Object {
-                          "max": 90,
-                          "min": -90,
-                          "showTicks": true,
-                          "ticks": Array [
+                          "defaultSelections": Array [
                             Object {
-                              "label": "-90°",
-                              "value": -90,
+                              "id": "all",
+                              "name": "All",
                             },
+                          ],
+                          "options": Array [
                             Object {
-                              "label": "-45°",
-                              "value": -45,
+                              "id": "all",
+                              "name": "All",
                             },
                             Object {
-                              "label": "0°",
-                              "value": 0,
+                              "id": "label",
+                              "name": "Label",
                             },
                             Object {
-                              "label": "45°",
-                              "value": 45,
+                              "id": "value",
+                              "name": "Value",
                             },
                             Object {
-                              "label": "90°",
-                              "value": 90,
+                              "id": "percent",
+                              "name": "Percent",
                             },
                           ],
                         },
                       },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
                       Object {
                         "component": [Function],
-                        "defaultState": 0.7,
-                        "eleType": "slider",
-                        "mapTo": "groupWidth",
-                        "name": "Group width",
-                        "props": Object {
-                          "max": 1,
-                          "step": 0.01,
-                        },
-                      },
-                      Object {
-                        "component": [Function],
-                        "defaultState": 0.97,
-                        "eleType": "slider",
-                        "mapTo": "barWidth",
-                        "name": "Bar width",
+                        "eleType": "buttons",
+                        "isSingleSelection": true,
+                        "mapTo": "mode",
+                        "name": "Mode",
                         "props": Object {
-                          "max": 1,
-                          "step": 0.01,
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "pie",
+                              "name": "Pie",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "pie",
+                              "name": "Pie",
+                            },
+                            Object {
+                              "id": "donut",
+                              "name": "Donut",
+                            },
+                          ],
                         },
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 2,
-                        "eleType": "slider",
-                        "mapTo": "lineWidth",
-                        "name": "Line width",
-                        "props": Object {
-                          "max": 10,
-                        },
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label size",
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 40,
-                        "eleType": "slider",
-                        "mapTo": "fillOpacity",
-                        "name": "Fill opacity",
-                        "props": Object {
-                          "max": 100,
+                        "defaultState": Object {
+                          "name": "default",
                         },
+                        "eleType": "colorpicker",
+                        "isSingleSelection": true,
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "options": Array [
+                          Object {
+                            "title": "Default",
+                            "type": "text",
+                            "value": "default",
+                          },
+                          Object {
+                            "title": "Single Color",
+                            "type": "text",
+                            "value": "singleColor",
+                          },
+                        ],
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "color-theme",
-                    "mapTo": "colorTheme",
-                    "name": "Color theme",
-                    "schemas": Array [],
-                  },
                 ],
               },
               Object {
@@ -4832,40 +7286,37 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 "mapTo": "layoutConfig",
                 "name": "Layout",
               },
-              Object {
-                "editor": [Function],
-                "id": "availability-panel",
-                "mapTo": "availabilityConfig",
-                "name": "Availability",
-              },
             ],
           },
-          "fillopacity": 40,
-          "fulllabel": "Horizontal bar",
-          "groupwidth": 0.7,
+          "fulllabel": "Pie",
           "icon": [Function],
-          "icontype": "visBarHorizontalStacked",
-          "id": "horizontal_bar",
-          "label": "Horizontal bar",
-          "labelangle": 0,
+          "icontype": "visPie",
+          "id": "pie",
+          "label": "Pie",
           "legendposition": "v",
-          "linewidth": 2,
-          "mode": "group",
-          "name": "horizontal_bar",
-          "orientation": "h",
-          "selection": Object {
-            "dataLoss": "nothing",
-          },
+          "mode": "pie",
+          "name": "pie",
           "seriesaxis": "yaxis",
           "showlegend": "show",
-          "type": "bar",
+          "type": "pie",
           "visconfig": Object {
             "config": Object {
               "displaylogo": false,
               "responsive": true,
             },
-            "isUniColor": false,
             "layout": Object {
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
               "height": 1180,
               "legend": Object {
                 "orientation": "v",
@@ -4878,7 +7329,19 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 "r": 30,
                 "t": 50,
               },
+              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+              "plot_bgcolor": "rgba(0, 0, 0, 0)",
               "showlegend": true,
+              "xaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
+              "yaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
             },
           },
         },
@@ -4893,79 +7356,163 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
             "defaultAxes": Object {
               "xaxis": Array [
                 Object {
-                  "label": "span(timestamp,1h)",
-                  "name": "span(timestamp,1h)",
-                  "type": "timestamp",
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
                 },
               ],
               "yaxis": Array [
                 Object {
-                  "label": "count('ip')",
-                  "name": "count('ip')",
-                  "type": "integer",
+                  "label": "avg(FlightDelayMin)",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
                 },
               ],
             },
             "explorer": Object {
               "explorerData": Object {
                 "data": Object {
-                  "count('ip')": Array [],
-                  "span(timestamp,1h)": Array [],
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
                 },
-                "jsonData": Array [],
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
                 "metadata": Object {
                   "fields": Array [
                     Object {
-                      "name": "count('ip')",
-                      "type": "integer",
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
                     },
                     Object {
-                      "name": "span(timestamp,1h)",
-                      "type": "timestamp",
+                      "name": "Carrier",
+                      "type": "keyword",
                     },
                   ],
                 },
-                "size": 0,
+                "size": 4,
                 "status": 200,
               },
               "explorerFields": Array [
                 Object {
-                  "name": "count('ip')",
-                  "type": "integer",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
                 },
                 Object {
-                  "name": "span(timestamp,1h)",
-                  "type": "timestamp",
+                  "name": "Carrier",
+                  "type": "keyword",
                 },
               ],
             },
             "indexFields": Object {},
-            "query": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+            },
             "rawVizData": Object {
               "data": Object {
-                "count('ip')": Array [],
-                "span(timestamp,1h)": Array [],
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
               },
-              "jsonData": Array [],
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
               "metadata": Object {
                 "fields": Array [
                   Object {
-                    "name": "count('ip')",
-                    "type": "integer",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
                   },
                   Object {
-                    "name": "span(timestamp,1h)",
-                    "type": "timestamp",
+                    "name": "Carrier",
+                    "type": "keyword",
                   },
                 ],
               },
-              "size": 0,
+              "size": 4,
               "status": 200,
             },
-            "userConfigs": Object {},
+            "userConfigs": Object {
+              "dataConfig": Object {
+                "dimensions": Array [],
+                "series": Array [
+                  Object {
+                    "aggregation": "avg",
+                    "customLabel": "",
+                    "label": "machine.ram",
+                    "name": "machine.ram",
+                  },
+                ],
+                "span": Object {
+                  "interval": "1",
+                  "time_field": Array [
+                    Object {
+                      "label": "timestamp",
+                      "name": "timestamp",
+                      "type": "timestamp",
+                    },
+                  ],
+                  "unit": Array [
+                    Object {
+                      "label": "Day",
+                      "name": "Day",
+                      "value": "d",
+                    },
+                  ],
+                },
+              },
+            },
           },
           "vis": Object {
-            "barwidth": 0.97,
             "category": "Visualizations",
             "categoryaxis": "xaxis",
             "component": [Function],
@@ -4979,14 +7526,14 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                   "sections": Array [
                     Object {
                       "editor": [Function],
-                      "id": "tooltip_options",
-                      "mapTo": "tooltipOptions",
-                      "name": "Tooltip options",
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
                       "schemas": Array [
                         Object {
                           "component": null,
-                          "mapTo": "tooltipMode",
-                          "name": "Tooltip mode",
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
@@ -5008,43 +7555,45 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                         },
                         Object {
                           "component": null,
-                          "mapTo": "tooltipText",
-                          "name": "Tooltip text",
+                          "mapTo": "position",
+                          "name": "Position",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "all",
-                                "name": "All",
+                                "id": "v",
+                                "name": "Right",
                               },
                             ],
                             "options": Array [
                               Object {
-                                "id": "all",
-                                "name": "All",
-                              },
-                              Object {
-                                "id": "x",
-                                "name": "Dimension",
+                                "id": "v",
+                                "name": "Right",
                               },
                               Object {
-                                "id": "y",
-                                "name": "Series",
+                                "id": "h",
+                                "name": "Bottom",
                               },
                             ],
                           },
                         },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "size",
+                          "name": "Legend size",
+                        },
                       ],
                     },
                     Object {
                       "editor": [Function],
-                      "id": "legend",
-                      "mapTo": "legend",
-                      "name": "Legend",
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
                       "schemas": Array [
                         Object {
                           "component": null,
-                          "mapTo": "showLegend",
-                          "name": "Show legend",
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
@@ -5066,34 +7615,35 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                         },
                         Object {
                           "component": null,
-                          "mapTo": "position",
-                          "name": "Position",
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "v",
-                                "name": "Right",
+                                "id": "all",
+                                "name": "All",
                               },
                             ],
                             "options": Array [
                               Object {
-                                "id": "v",
-                                "name": "Right",
+                                "id": "all",
+                                "name": "All",
                               },
                               Object {
-                                "id": "h",
-                                "name": "Bottom",
+                                "id": "label",
+                                "name": "Label",
+                              },
+                              Object {
+                                "id": "value",
+                                "name": "Value",
+                              },
+                              Object {
+                                "id": "percent",
+                                "name": "Percent",
                               },
                             ],
                           },
                         },
-                        Object {
-                          "component": [Function],
-                          "eleType": "input",
-                          "mapTo": "legendSize",
-                          "name": "Legend size",
-                          "title": "Legend size",
-                        },
                       ],
                     },
                     Object {
@@ -5105,23 +7655,24 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                         Object {
                           "component": [Function],
                           "eleType": "buttons",
+                          "isSingleSelection": true,
                           "mapTo": "mode",
                           "name": "Mode",
                           "props": Object {
                             "defaultSelections": Array [
                               Object {
-                                "id": "group",
-                                "name": "Group",
+                                "id": "pie",
+                                "name": "Pie",
                               },
                             ],
                             "options": Array [
                               Object {
-                                "id": "group",
-                                "name": "Group",
+                                "id": "pie",
+                                "name": "Pie",
                               },
                               Object {
-                                "id": "stack",
-                                "name": "Stack",
+                                "id": "donut",
+                                "name": "Donut",
                               },
                             ],
                           },
@@ -5134,89 +7685,28 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 0,
-                          "eleType": "slider",
-                          "mapTo": "rotateBarLabels",
-                          "name": "Rotate bar labels",
-                          "props": Object {
-                            "max": 90,
-                            "min": -90,
-                            "showTicks": true,
-                            "ticks": Array [
-                              Object {
-                                "label": "-90°",
-                                "value": -90,
-                              },
-                              Object {
-                                "label": "-45°",
-                                "value": -45,
-                              },
-                              Object {
-                                "label": "0°",
-                                "value": 0,
-                              },
-                              Object {
-                                "label": "45°",
-                                "value": 45,
-                              },
-                              Object {
-                                "label": "90°",
-                                "value": 90,
-                              },
-                            ],
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 0.7,
-                          "eleType": "slider",
-                          "mapTo": "groupWidth",
-                          "name": "Group width",
-                          "props": Object {
-                            "max": 1,
-                            "step": 0.01,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 0.97,
-                          "eleType": "slider",
-                          "mapTo": "barWidth",
-                          "name": "Bar width",
-                          "props": Object {
-                            "max": 1,
-                            "step": 0.01,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 2,
-                          "eleType": "slider",
-                          "mapTo": "lineWidth",
-                          "name": "Line width",
-                          "props": Object {
-                            "max": 10,
-                          },
-                        },
-                        Object {
-                          "component": [Function],
-                          "defaultState": 40,
-                          "eleType": "slider",
-                          "mapTo": "fillOpacity",
-                          "name": "Fill opacity",
-                          "props": Object {
-                            "max": 100,
+                          "defaultState": Object {
+                            "name": "default",
                           },
+                          "eleType": "colorpicker",
+                          "isSingleSelection": true,
+                          "mapTo": "colorTheme",
+                          "name": "Color theme",
+                          "options": Array [
+                            Object {
+                              "title": "Default",
+                              "type": "text",
+                              "value": "default",
+                            },
+                            Object {
+                              "title": "Single Color",
+                              "type": "text",
+                              "value": "singleColor",
+                            },
+                          ],
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "color-theme",
-                      "mapTo": "colorTheme",
-                      "name": "Color theme",
-                      "schemas": Array [],
-                    },
                   ],
                 },
                 Object {
@@ -5226,40 +7716,37 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                   "mapTo": "layoutConfig",
                   "name": "Layout",
                 },
-                Object {
-                  "editor": [Function],
-                  "id": "availability-panel",
-                  "mapTo": "availabilityConfig",
-                  "name": "Availability",
-                },
               ],
             },
-            "fillopacity": 40,
-            "fulllabel": "Horizontal bar",
-            "groupwidth": 0.7,
+            "fulllabel": "Pie",
             "icon": [Function],
-            "icontype": "visBarHorizontalStacked",
-            "id": "horizontal_bar",
-            "label": "Horizontal bar",
-            "labelangle": 0,
+            "icontype": "visPie",
+            "id": "pie",
+            "label": "Pie",
             "legendposition": "v",
-            "linewidth": 2,
-            "mode": "group",
-            "name": "horizontal_bar",
-            "orientation": "h",
-            "selection": Object {
-              "dataLoss": "nothing",
-            },
+            "mode": "pie",
+            "name": "pie",
             "seriesaxis": "yaxis",
             "showlegend": "show",
-            "type": "bar",
+            "type": "pie",
             "visconfig": Object {
               "config": Object {
                 "displaylogo": false,
                 "responsive": true,
               },
-              "isUniColor": false,
               "layout": Object {
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
                 "height": 1180,
                 "legend": Object {
                   "orientation": "v",
@@ -5272,14 +7759,26 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                   "r": 30,
                   "t": 50,
                 },
+                "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                "plot_bgcolor": "rgba(0, 0, 0, 0)",
                 "showlegend": true,
+                "xaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+                "yaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
               },
             },
           },
         }
       }
     >
-      <Bar
+      <Pie
         config={
           Object {
             "displaylogo": false,
@@ -5294,79 +7793,163 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
               "defaultAxes": Object {
                 "xaxis": Array [
                   Object {
-                    "label": "span(timestamp,1h)",
-                    "name": "span(timestamp,1h)",
-                    "type": "timestamp",
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
                   },
                 ],
                 "yaxis": Array [
                   Object {
-                    "label": "count('ip')",
-                    "name": "count('ip')",
-                    "type": "integer",
+                    "label": "avg(FlightDelayMin)",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
                   },
                 ],
               },
               "explorer": Object {
                 "explorerData": Object {
                   "data": Object {
-                    "count('ip')": Array [],
-                    "span(timestamp,1h)": Array [],
+                    "Carrier": Array [
+                      "BeatsWest",
+                      "Logstash Airways",
+                      "OpenSearch Dashboards Airlines",
+                      "OpenSearch-Air",
+                    ],
+                    "avg(FlightDelayMin)": Array [
+                      53.65384615384615,
+                      45.36144578313253,
+                      63.1578947368421,
+                      46.81318681318681,
+                    ],
+                  },
+                  "jsonData": Array [
+                    Object {
+                      "Carrier": "BeatsWest",
+                      "avg(FlightDelayMin)": 53.65384615384615,
+                    },
+                    Object {
+                      "Carrier": "Logstash Airways",
+                      "avg(FlightDelayMin)": 45.36144578313253,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch Dashboards Airlines",
+                      "avg(FlightDelayMin)": 63.1578947368421,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch-Air",
+                      "avg(FlightDelayMin)": 46.81318681318681,
+                    },
+                  ],
+                  "metadata": Object {
+                    "fields": Array [
+                      Object {
+                        "name": "avg(FlightDelayMin)",
+                        "type": "double",
+                      },
+                      Object {
+                        "name": "Carrier",
+                        "type": "keyword",
+                      },
+                    ],
+                  },
+                  "size": 4,
+                  "status": 200,
+                },
+                "explorerFields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+              },
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
                   },
-                  "jsonData": Array [],
-                  "metadata": Object {
-                    "fields": Array [
-                      Object {
-                        "name": "count('ip')",
-                        "type": "integer",
-                      },
-                      Object {
-                        "name": "span(timestamp,1h)",
-                        "type": "timestamp",
-                      },
-                    ],
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
                   },
-                  "size": 0,
-                  "status": 200,
-                },
-                "explorerFields": Array [
                   Object {
-                    "name": "count('ip')",
-                    "type": "integer",
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
                   },
                   Object {
-                    "name": "span(timestamp,1h)",
-                    "type": "timestamp",
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
                   },
                 ],
-              },
-              "indexFields": Object {},
-              "query": Object {},
-              "rawVizData": Object {
-                "data": Object {
-                  "count('ip')": Array [],
-                  "span(timestamp,1h)": Array [],
-                },
-                "jsonData": Array [],
                 "metadata": Object {
                   "fields": Array [
                     Object {
-                      "name": "count('ip')",
-                      "type": "integer",
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
                     },
                     Object {
-                      "name": "span(timestamp,1h)",
-                      "type": "timestamp",
+                      "name": "Carrier",
+                      "type": "keyword",
                     },
                   ],
                 },
-                "size": 0,
+                "size": 4,
                 "status": 200,
               },
-              "userConfigs": Object {},
+              "userConfigs": Object {
+                "dataConfig": Object {
+                  "dimensions": Array [],
+                  "series": Array [
+                    Object {
+                      "aggregation": "avg",
+                      "customLabel": "",
+                      "label": "machine.ram",
+                      "name": "machine.ram",
+                    },
+                  ],
+                  "span": Object {
+                    "interval": "1",
+                    "time_field": Array [
+                      Object {
+                        "label": "timestamp",
+                        "name": "timestamp",
+                        "type": "timestamp",
+                      },
+                    ],
+                    "unit": Array [
+                      Object {
+                        "label": "Day",
+                        "name": "Day",
+                        "value": "d",
+                      },
+                    ],
+                  },
+                },
+              },
             },
             "vis": Object {
-              "barwidth": 0.97,
               "category": "Visualizations",
               "categoryaxis": "xaxis",
               "component": [Function],
@@ -5380,14 +7963,14 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                     "sections": Array [
                       Object {
                         "editor": [Function],
-                        "id": "tooltip_options",
-                        "mapTo": "tooltipOptions",
-                        "name": "Tooltip options",
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
                         "schemas": Array [
                           Object {
                             "component": null,
-                            "mapTo": "tooltipMode",
-                            "name": "Tooltip mode",
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
@@ -5409,43 +7992,45 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                           },
                           Object {
                             "component": null,
-                            "mapTo": "tooltipText",
-                            "name": "Tooltip text",
+                            "mapTo": "position",
+                            "name": "Position",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "all",
-                                  "name": "All",
+                                  "id": "v",
+                                  "name": "Right",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "all",
-                                  "name": "All",
-                                },
-                                Object {
-                                  "id": "x",
-                                  "name": "Dimension",
+                                  "id": "v",
+                                  "name": "Right",
                                 },
                                 Object {
-                                  "id": "y",
-                                  "name": "Series",
+                                  "id": "h",
+                                  "name": "Bottom",
                                 },
                               ],
                             },
                           },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "size",
+                            "name": "Legend size",
+                          },
                         ],
                       },
                       Object {
                         "editor": [Function],
-                        "id": "legend",
-                        "mapTo": "legend",
-                        "name": "Legend",
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
                         "schemas": Array [
                           Object {
                             "component": null,
-                            "mapTo": "showLegend",
-                            "name": "Show legend",
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
@@ -5467,34 +8052,35 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                           },
                           Object {
                             "component": null,
-                            "mapTo": "position",
-                            "name": "Position",
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "v",
-                                  "name": "Right",
+                                  "id": "all",
+                                  "name": "All",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "v",
-                                  "name": "Right",
+                                  "id": "all",
+                                  "name": "All",
                                 },
                                 Object {
-                                  "id": "h",
-                                  "name": "Bottom",
+                                  "id": "label",
+                                  "name": "Label",
+                                },
+                                Object {
+                                  "id": "value",
+                                  "name": "Value",
+                                },
+                                Object {
+                                  "id": "percent",
+                                  "name": "Percent",
                                 },
                               ],
                             },
                           },
-                          Object {
-                            "component": [Function],
-                            "eleType": "input",
-                            "mapTo": "legendSize",
-                            "name": "Legend size",
-                            "title": "Legend size",
-                          },
                         ],
                       },
                       Object {
@@ -5506,23 +8092,24 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                           Object {
                             "component": [Function],
                             "eleType": "buttons",
+                            "isSingleSelection": true,
                             "mapTo": "mode",
                             "name": "Mode",
                             "props": Object {
                               "defaultSelections": Array [
                                 Object {
-                                  "id": "group",
-                                  "name": "Group",
+                                  "id": "pie",
+                                  "name": "Pie",
                                 },
                               ],
                               "options": Array [
                                 Object {
-                                  "id": "group",
-                                  "name": "Group",
+                                  "id": "pie",
+                                  "name": "Pie",
                                 },
                                 Object {
-                                  "id": "stack",
-                                  "name": "Stack",
+                                  "id": "donut",
+                                  "name": "Donut",
                                 },
                               ],
                             },
@@ -5535,89 +8122,28 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 0,
-                            "eleType": "slider",
-                            "mapTo": "rotateBarLabels",
-                            "name": "Rotate bar labels",
-                            "props": Object {
-                              "max": 90,
-                              "min": -90,
-                              "showTicks": true,
-                              "ticks": Array [
-                                Object {
-                                  "label": "-90°",
-                                  "value": -90,
-                                },
-                                Object {
-                                  "label": "-45°",
-                                  "value": -45,
-                                },
-                                Object {
-                                  "label": "0°",
-                                  "value": 0,
-                                },
-                                Object {
-                                  "label": "45°",
-                                  "value": 45,
-                                },
-                                Object {
-                                  "label": "90°",
-                                  "value": 90,
-                                },
-                              ],
-                            },
-                          },
-                          Object {
-                            "component": [Function],
-                            "defaultState": 0.7,
-                            "eleType": "slider",
-                            "mapTo": "groupWidth",
-                            "name": "Group width",
-                            "props": Object {
-                              "max": 1,
-                              "step": 0.01,
-                            },
-                          },
-                          Object {
-                            "component": [Function],
-                            "defaultState": 0.97,
-                            "eleType": "slider",
-                            "mapTo": "barWidth",
-                            "name": "Bar width",
-                            "props": Object {
-                              "max": 1,
-                              "step": 0.01,
-                            },
-                          },
-                          Object {
-                            "component": [Function],
-                            "defaultState": 2,
-                            "eleType": "slider",
-                            "mapTo": "lineWidth",
-                            "name": "Line width",
-                            "props": Object {
-                              "max": 10,
-                            },
-                          },
-                          Object {
-                            "component": [Function],
-                            "defaultState": 40,
-                            "eleType": "slider",
-                            "mapTo": "fillOpacity",
-                            "name": "Fill opacity",
-                            "props": Object {
-                              "max": 100,
+                            "defaultState": Object {
+                              "name": "default",
                             },
+                            "eleType": "colorpicker",
+                            "isSingleSelection": true,
+                            "mapTo": "colorTheme",
+                            "name": "Color theme",
+                            "options": Array [
+                              Object {
+                                "title": "Default",
+                                "type": "text",
+                                "value": "default",
+                              },
+                              Object {
+                                "title": "Single Color",
+                                "type": "text",
+                                "value": "singleColor",
+                              },
+                            ],
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "color-theme",
-                        "mapTo": "colorTheme",
-                        "name": "Color theme",
-                        "schemas": Array [],
-                      },
                     ],
                   },
                   Object {
@@ -5627,40 +8153,37 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                     "mapTo": "layoutConfig",
                     "name": "Layout",
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "availability-panel",
-                    "mapTo": "availabilityConfig",
-                    "name": "Availability",
-                  },
                 ],
               },
-              "fillopacity": 40,
-              "fulllabel": "Horizontal bar",
-              "groupwidth": 0.7,
+              "fulllabel": "Pie",
               "icon": [Function],
-              "icontype": "visBarHorizontalStacked",
-              "id": "horizontal_bar",
-              "label": "Horizontal bar",
-              "labelangle": 0,
+              "icontype": "visPie",
+              "id": "pie",
+              "label": "Pie",
               "legendposition": "v",
-              "linewidth": 2,
-              "mode": "group",
-              "name": "horizontal_bar",
-              "orientation": "h",
-              "selection": Object {
-                "dataLoss": "nothing",
-              },
+              "mode": "pie",
+              "name": "pie",
               "seriesaxis": "yaxis",
               "showlegend": "show",
-              "type": "bar",
+              "type": "pie",
               "visconfig": Object {
                 "config": Object {
                   "displaylogo": false,
                   "responsive": true,
                 },
-                "isUniColor": false,
                 "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
                   "height": 1180,
                   "legend": Object {
                     "orientation": "v",
@@ -5673,7 +8196,19 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                     "r": 30,
                     "t": 50,
                   },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
                   "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
                 },
               },
             },
@@ -5681,7 +8216,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
         }
       >
         <EmptyPlaceholder
-          icon="visBarHorizontalStacked"
+          icon="visPie"
         >
           <EuiText
             className="lnsChart__empty"
@@ -5710,7 +8245,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                       <EuiIcon
                         color="subdued"
                         size="xxl"
-                        type="visBarHorizontalStacked"
+                        type="visPie"
                       >
                         <EuiIconEmpty
                           aria-hidden={true}
@@ -5757,8 +8292,10 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
             </div>
           </EuiText>
         </EmptyPlaceholder>
-      </Bar>
+      </Pie>
     </VisualizationChart>
   </Visualization>
 </div>
 `;
+
+exports[`Utils helper functions renders displayVisualization function 6`] = `<div />`;
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
index e1d1f1dbb..96931ffd1 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
@@ -24,6 +24,10 @@ import {
   samplePPLEmptyResponse,
   samplePPLResponse,
   sampleSavedVisualization,
+  sampleSavedVisualizationForHorizontalBar,
+  sampleSavedVisualizationForLine,
+  sampleSavedVisualizationForPie,
+  sampleSavedVisualizationForTreeMap,
 } from '../../../../../test/panels_constants';
 import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared';
 import React from 'react';
@@ -104,25 +108,43 @@ describe('Utils helper functions', () => {
 
   it('renders displayVisualization function', () => {
     const wrapper1 = mount(
-      <div>{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'bar')}</div>
+      <div>
+        {displayVisualization(sampleSavedVisualization.visualization, samplePPLResponse, 'bar')}
+      </div>
     );
     expect(wrapper1).toMatchSnapshot();
 
     const wrapper2 = mount(
-      <div>{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'line')}</div>
+      <div>{displayVisualization(sampleSavedVisualizationForLine, samplePPLResponse, 'line')}</div>
     );
     expect(wrapper2).toMatchSnapshot();
 
     const wrapper3 = mount(
       <div>
-        {displayVisualization(sampleSavedVisualization, samplePPLResponse, 'horizontal_bar')}
+        {displayVisualization(sampleSavedVisualizationForTreeMap, samplePPLResponse, 'tree_map')}
       </div>
     );
     expect(wrapper3).toMatchSnapshot();
 
     const wrapper4 = mount(
-      <div>{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}</div>
+      <div>
+        {displayVisualization(
+          sampleSavedVisualizationForHorizontalBar,
+          samplePPLResponse,
+          'horizontal_bar'
+        )}
+      </div>
     );
     expect(wrapper4).toMatchSnapshot();
+
+    const wrapper5 = mount(
+      <div>{displayVisualization(sampleSavedVisualizationForPie, samplePPLResponse, 'pie')}</div>
+    );
+    expect(wrapper5).toMatchSnapshot();
+
+    const wrapper6 = mount(
+      <div>{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}</div>
+    );
+    expect(wrapper6).toMatchSnapshot();
   });
 });
diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
index 8f4465d8e..855dd55b8 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -7,7 +7,7 @@
 import dateMath from '@elastic/datemath';
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _ from 'lodash';
+import _, { isEmpty } from 'lodash';
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
@@ -289,7 +289,7 @@ export const isPPLFilterValid = (
 
 // Renders visualization in the vizualization container component
 export const displayVisualization = (metaData: any, data: any, type: string) => {
-  if (metaData === undefined || metaData === {}) {
+  if (metaData === undefined || isEmpty(metaData)) {
     return <></>;
   }
   return (
@@ -297,7 +297,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
       visualizations={getVizContainerProps({
         vizId: type,
         rawVizData: data,
-        query: {},
+        query: { rawQuery: metaData.query },
         indexFields: {},
         userConfigs: metaData.user_configs,
         explorer: { explorerData: data, explorerFields: data.metadata.fields },
diff --git a/dashboards-observability/test/panels_constants.tsx b/dashboards-observability/test/panels_constants.tsx
index 1b1362bf2..b79dde38c 100644
--- a/dashboards-observability/test/panels_constants.tsx
+++ b/dashboards-observability/test/panels_constants.tsx
@@ -19,6 +19,40 @@ export const sampleSavedVisualization = {
   },
 };
 
+export const sampleSavedVisualizationForHorizontalBar = {
+  id: 'zgBSfYIBi5fNIzQywlQZ',
+  name: 'Horizontal',
+  query: 'source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os',
+  type: 'horizontal_bar',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForLine = {
+  id: '4wANiYIBi5fNIzQySlRB',
+  name: '[Logs] Average ram usage per day by windows os ',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+  type: 'line',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForTreeMap = {
+  id: '5QANiYIBi5fNIzQySlRL',
+  name: 'TreeMap1111',
+  query: 'source = opensearch_dashboards_sample_data_logs | stats count() by tags',
+  type: 'tree_map',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForPie = {
+  id: '4gANiYIBi5fNIzQySlQ5',
+  name: 'PieChart',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+  type: 'pie',
+  timeField: 'timestamp',
+};
+
 export const samplePPLResponse = {
   data: {
     'avg(FlightDelayMin)': [