@hero-design/rn 8.99.4 → 8.100.0

package/src/components/Chart/ColumnChart/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,1405 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColumnChart renders emptyText when data is empty 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "height": "100%",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+    testID="column-chart-empty"
+  >
+    <View
+      style={
+        [
+          {},
+          {
+            "height": 200,
+            "width": 100,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            {
+              "paddingTop": 8,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={200}
+          bbWidth={100}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 200,
+                "overflow": "visible",
+                "width": 100,
+              },
+              {
+                "flex": 0,
+                "height": 200,
+                "width": 100,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 51.25,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-A-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    A
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 67.5,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-B-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    B
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 83.75,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-C-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    C
+                  </Text>
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 78,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-0-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    0
+                  </Text>
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              testID="y-axis-grid"
+            >
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-0"
+                x1={48}
+                x2={100}
+                y1={78}
+                y2={78}
+              />
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  [
+                    {},
+                    {
+                      "left": 74,
+                      "position": "absolute",
+                      "top": 78,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "color": "#4d6265",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 12,
+                        "letterSpacing": 0.24,
+                        "lineHeight": 16,
+                      },
+                      {
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                  themeFontWeight="semi-bold"
+                  themeIntent="muted"
+                >
+                  No data available
+                </Text>
+              </View>
+            </RNSVGGroup>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ColumnChart renders without crashing 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "height": "100%",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+    testID="column-chart"
+  >
+    <View
+      style={
+        [
+          {},
+          {
+            "height": 200,
+            "width": 100,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            {
+              "paddingTop": 8,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          bbHeight={200}
+          bbWidth={100}
+          focusable={false}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "height": 200,
+                "overflow": "visible",
+                "width": 100,
+              },
+              {
+                "flex": 0,
+                "height": 200,
+                "width": 100,
+              },
+            ]
+          }
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 51.25,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-A-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    A
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 67.5,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-B-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    B
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  alignItems="center"
+                  style={
+                    [
+                      {
+                        "alignItems": "center",
+                      },
+                      {
+                        "left": 83.75,
+                        "maxHeight": 32,
+                        "position": "absolute",
+                        "top": 168,
+                        "width": 13,
+                      },
+                    ]
+                  }
+                  testID="x-axis-label-C-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={2}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "center",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    C
+                  </Text>
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 156,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-0-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    0
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 130,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-10-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    10
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 104.00000000000001,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-20-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    20
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 78,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-30-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    30
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 52.00000000000001,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-40-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    40
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 25.999999999999993,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-50-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    50
+                  </Text>
+                </View>
+              </RNSVGGroup>
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {},
+                      {
+                        "maxWidth": 32,
+                        "position": "absolute",
+                        "right": 68,
+                        "top": 0,
+                        "transform": [
+                          {
+                            "translateY": -7,
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  testID="y-axis-label-60-container"
+                >
+                  <Text
+                    adjustsFontSizeToFit={true}
+                    allowFontScaling={false}
+                    ellipsizeMode="tail"
+                    minimumFontScale={0.6}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "color": "#4d6265",
+                          "fontSize": 10,
+                          "letterSpacing": 0,
+                          "lineHeight": 14,
+                        },
+                        {
+                          "textAlign": "right",
+                        },
+                      ]
+                    }
+                    themeIntent="subdued"
+                  >
+                    60
+                  </Text>
+                </View>
+              </RNSVGGroup>
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              testID="y-axis-grid"
+            >
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-0"
+                x1={48}
+                x2={100}
+                y1={156}
+                y2={156}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-10"
+                x1={48}
+                x2={100}
+                y1={130}
+                y2={130}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-20"
+                x1={48}
+                x2={100}
+                y1={104.00000000000001}
+                y2={104.00000000000001}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-30"
+                x1={48}
+                x2={100}
+                y1={78}
+                y2={78}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-40"
+                x1={48}
+                x2={100}
+                y1={52.00000000000001}
+                y2={52.00000000000001}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-50"
+                x1={48}
+                x2={100}
+                y1={25.999999999999993}
+                y2={25.999999999999993}
+              />
+              <RNSVGLine
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeDasharray",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4293454314,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    4,
+                    4,
+                  ]
+                }
+                testID="y-axis-grid-60"
+                x1={48}
+                x2={100}
+                y1={0}
+                y2={0}
+              />
+            </RNSVGGroup>
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              testID="column-chart-content"
+            >
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 10, x-label A, series Series 1"
+                fill={
+                  {
+                    "payload": 4291005678,
+                    "type": 0,
+                  }
+                }
+                height={24}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-A-Series 1"
+                width={16}
+                x={49.75}
+                y={131}
+              />
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 5, x-label A, series Series 2"
+                fill={
+                  {
+                    "payload": 4280139502,
+                    "type": 0,
+                  }
+                }
+                height={11}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-A-Series 2"
+                width={16}
+                x={49.75}
+                y={118}
+              />
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 20, x-label B, series Series 1"
+                fill={
+                  {
+                    "payload": 4291005678,
+                    "type": 0,
+                  }
+                }
+                height={49.999999999999986}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-B-Series 1"
+                width={16}
+                x={66}
+                y={105.00000000000001}
+              />
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 15, x-label B, series Series 2"
+                fill={
+                  {
+                    "payload": 4280139502,
+                    "type": 0,
+                  }
+                }
+                height={37.000000000000014}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-B-Series 2"
+                width={16}
+                x={66}
+                y={66}
+              />
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 30, x-label C, series Series 1"
+                fill={
+                  {
+                    "payload": 4291005678,
+                    "type": 0,
+                  }
+                }
+                height={76}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-C-Series 1"
+                width={16}
+                x={82.25}
+                y={79}
+              />
+              <RNSVGRect
+                accessibilityLabel="Column segment: value 25, x-label C, series Series 2"
+                fill={
+                  {
+                    "payload": 4280139502,
+                    "type": 0,
+                  }
+                }
+                height={63}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                rx={8}
+                testID="column-segment-C-Series 2"
+                width={16}
+                x={82.25}
+                y={14.000000000000005}
+              />
+            </RNSVGGroup>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;