From 26e7853a058942a0d32982e3b446abeff677c4d6 Mon Sep 17 00:00:00 2001
From: Kumar Kshitij <kumarkshitij@microsoft.com>
Date: Fri, 28 Jul 2023 14:35:43 +0530
Subject: [PATCH] add test case for callout variant

---
 .../VerticalStackedBarChart.test.tsx          |  20 +
 .../VerticalStackedBarChart.test.tsx.snap     | 922 ++++++++++++++++++
 2 files changed, 942 insertions(+)

diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index a91183d816c100..b434b6d6006324 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -9,6 +9,7 @@ import {
   IVerticalStackedBarChartProps,
   VerticalStackedBarChart,
   IVerticalStackedChartProps,
+  ChartHoverCardVariant,
 } from '../../index';
 import { IVerticalStackedBarChartState, VerticalStackedBarChartBase } from './VerticalStackedBarChart.base';
 import toJson from 'enzyme-to-json';
@@ -320,6 +321,25 @@ describe('VerticalStackedBarChart - mouse events', () => {
     const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
+
+  it('Should render long legend variant of callout correctly on mouseover', async () => {
+    wrapper = mount(
+      <VerticalStackedBarChart
+        data={chartPoints2}
+        calloutProps={{ doNotLayer: true }}
+        calloutVariant={ChartHoverCardVariant.LongLegend}
+        enabledLegendsWrapLines
+      />,
+    );
+
+    // Wait for the chart to be resized
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+
+    wrapper.find('rect').at(0).simulate('mouseover');
+    const tree = toJson(wrapper, { mode: 'deep' });
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('Render empty chart aria label div when chart is empty', () => {
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 50cb1c41625a3b..696877b282fd8e 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -1914,6 +1914,928 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
 </div>
 `;
 
+exports[`VerticalStackedBarChart - mouse events Should render long legend variant of callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_2"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone3"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_2"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0true"
+        >
+          <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
+            data-is-focusable={true}
+            id="0-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1true"
+        >
+          <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
+            data-is-focusable={true}
+            id="1-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g>
+        <line
+          key="0-1-line"
+          opacity={1}
+          stroke="#ffb900"
+          strokeLinecap="round"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          x1={56}
+          x2={-36}
+          y1={201.4423076923077}
+          y2={127.88461538461539}
+        />
+        <circle
+          cx={56}
+          cy={201.4423076923077}
+          fill="#ffffff"
+          key="0-0-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="visibility"
+        />
+        <circle
+          cx={-36}
+          cy={127.88461538461539}
+          fill="#ffffff"
+          key="0-1-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="hidden"
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone4"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Line1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #ffb900;
+                      border-color: #ffb900;
+                      border: 1px solid;
+                      content: ;
+                      height: 4px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #ffb900, #ffb900);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Line1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                color: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                padding-bottom: 16px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 16px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  margin-bottom: 8px;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    font-weight: 600;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              0
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Line1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="0_15"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#ffb900"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    15
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className=
+
+                  {
+                    background-color: #c8c8c8;
+                    height: 1px;
+                    margin-bottom: 8px;
+                    margin-top: 8px;
+                  }
+            />
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "8px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata2
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="1_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#00188f"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    5%
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              data-is-focusable={false}
+              role="text"
+              style={
+                Object {
+                  "marginBottom": "0px",
+                  "paddingLeft": "0px",
+                  "paddingRight": "0px",
+                }
+              }
+            >
+              <div>
+                <div
+                  className=
+
+                      {
+                        flex-grow: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      }
+                  style={
+                    Object {
+                      "marginBottom": "4px",
+                    }
+                  }
+                >
+                  Metadata1
+                </div>
+                <div
+                  className=
+
+                      {
+                        align-items: center;
+                        display: flex;
+                      }
+                  id="2_undefined"
+                >
+                  <svg
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          margin-right: 8px;
+                        }
+                    height={14}
+                    transform="rotate(0, 0, 0)"
+                    viewBox="-1 -1 14 14"
+                    width={14}
+                  >
+                    <path
+                      d="M1 1 L12 1 L12 12  L1 12 L1 1 Z"
+                      fill="#0078d4"
+                    />
+                  </svg>
+                  <div
+                    className=
+
+                        {
+                          flex-shrink: 0;
+                          font-weight: 600;
+                        }
+                  >
+                    40%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1`] = `
 <div
   className=