ref(ts): Project dashboard chart (#19955)

src/sentry/static/sentry/app/components/barChart.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import StackedBarChart from 'app/components/stackedBarChart';
-
-class BarChart extends React.Component {
-  static propTypes = {
-    points: PropTypes.arrayOf(
-      PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-        label: PropTypes.string,
-      })
-    ),
-    interval: PropTypes.string,
-    height: PropTypes.number,
-    width: PropTypes.number,
-    placement: PropTypes.string,
-    label: PropTypes.string,
-    markers: PropTypes.arrayOf(
-      PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        label: PropTypes.string,
-      })
-    ),
-  };
-
-  static defaultProps = {
-    points: [],
-  };
-
-  render() {
-    const points = this.props.points.map(point => ({x: point.x, y: [point.y]}));
-    const props = Object.assign({}, this.props, {points});
-    return <StackedBarChart {...props} />;
-  }
-}
-
-export default BarChart;

src/sentry/static/sentry/app/components/barChart.tsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import StackedBarChart from 'app/components/stackedBarChart';
+
+type Props = Partial<Omit<React.ComponentProps<typeof StackedBarChart>, 'points'>> & {
+  points?: Array<{x: number; y: number; label?: string}>;
+};
+
+const BarChart = ({points = [], ...rest}: Props) => {
+  const formattedPoints = points.map(point => ({x: point.x, y: [point.y]}));
+  const props = {...rest, points: formattedPoints};
+  return <StackedBarChart {...props} />;
+};
+
+BarChart.propTypes = {
+  points: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      label: PropTypes.string,
+    })
+  ),
+  interval: PropTypes.string,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  label: PropTypes.string,
+  markers: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number.isRequired,
+      label: PropTypes.string,
+    })
+  ),
+};
+
+export default BarChart;

src/sentry/static/sentry/app/components/stackedBarChart.jsx → src/sentry/static/sentry/app/components/stackedBarChart.tsx

@@ -11,7 +11,56 @@ import {use24Hours, getTimeFormat} from 'app/utils/dates';
 import theme from 'app/utils/theme';
 import {formatFloat} from 'app/utils/formatters';
 
-class StackedBarChart extends React.Component {
+type Point = {x: number; y: number[]; label?: string};
+type Points = Point[];
+type Series = Array<{
+  data: Array<{x: number; y: number}>;
+  label?: string;
+  color?: string;
+}>;
+type Marker = {
+  x: number;
+  label?: string;
+  fill?: string;
+  offset?: number;
+  className?: string;
+};
+
+type DefaultProps = {
+  label: string;
+  /**
+   * @deprecated
+   */
+  points: Points;
+  series: Series;
+  markers: Marker[];
+  barClasses: string[];
+  /**
+   * The amount of space between bars. Also represents an svg point
+   */
+  gap: number;
+  className: string;
+};
+
+type Props = DefaultProps & {
+  tooltip?: (point: Point, idx: number, context: StackedBarChart) => React.ReactNode;
+  height?: React.CSSProperties['height'];
+  width?: React.CSSProperties['width'];
+  /**
+   * Some bars need to be visible and interactable even if they are
+   * empty. Use minHeights for that. Units are in svg points
+   */
+  minHeights?: number[];
+  style?: React.CSSProperties;
+};
+
+type State = {
+  series: Series;
+  pointIndex: Record<number, Point>;
+  interval: number | null;
+};
+
+class StackedBarChart extends React.Component<Props, State> {
   static propTypes = {
     // TODO(dcramer): DEPRECATED, use series instead
     points: PropTypes.arrayOf(
@@ -50,30 +99,28 @@ class StackedBarChart extends React.Component {
     gap: PropTypes.number,
   };
 
-  static defaultProps = {
-    className: 'sparkline',
-    height: null,
+  static defaultProps: DefaultProps = {
     label: '',
     points: [],
     series: [],
     markers: [],
-    width: null,
     barClasses: ['chart-bar'],
     gap: 0.5,
+    className: 'sparkline',
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     // massage points
-    let series = this.props.series;
+    let series = props.series;
 
-    if (this.props.points.length) {
-      if (series.length) {
+    if (props.points?.length) {
+      if (series?.length) {
         throw new Error('Only one of [points|series] should be specified.');
       }
 
-      series = this.pointsToSeries(this.props.points);
+      series = this.pointsToSeries(props.points);
     }
 
     this.state = {
@@ -83,7 +130,7 @@ class StackedBarChart extends React.Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.points || nextProps.series) {
       let series = nextProps.series;
       if (nextProps.points.length) {
@@ -102,18 +149,18 @@ class StackedBarChart extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, _nextState) {
+  shouldComponentUpdate(nextProps: Props) {
     return !isEqual(this.props, nextProps);
   }
 
-  getInterval = series =>
+  getInterval = (series: Series): number | null =>
     // TODO(dcramer): not guaranteed correct
     series.length && series[0].data.length > 1
       ? series[0].data[1].x - series[0].data[0].x
       : null;
 
-  pointsToSeries = points => {
-    const series = [];
+  pointsToSeries = (points: Points): Series => {
+    const series: Series = [];
     points.forEach((p, _pIdx) => {
       p.y.forEach((y, yIdx) => {
         if (!series[yIdx]) {
@@ -125,8 +172,8 @@ class StackedBarChart extends React.Component {
     return series;
   };
 
-  pointIndex = series => {
-    const points = {};
+  pointIndex = (series: Series): Record<number, Point> => {
+    const points: Record<number, Point> = {};
     series.forEach(s => {
       s.data.forEach(p => {
         if (!points[p.x]) {
@@ -138,7 +185,7 @@ class StackedBarChart extends React.Component {
     return points;
   };
 
-  timeLabelAsHour(point) {
+  timeLabelAsHour(point: Point): React.ReactNode {
     const timeMoment = moment(point.x * 1000);
     const nextMoment = timeMoment.clone().add(59, 'minute');
     const timeFormat = getTimeFormat();
@@ -154,13 +201,13 @@ class StackedBarChart extends React.Component {
     );
   }
 
-  timeLabelAsDay(point) {
+  timeLabelAsDay(point: Point): React.ReactNode {
     const timeMoment = moment(point.x * 1000);
 
     return <span>{timeMoment.format('LL')}</span>;
   }
 
-  timeLabelAsRange(interval, point) {
+  timeLabelAsRange(interval: number, point: Point): React.ReactNode {
     const timeMoment = moment(point.x * 1000);
     const nextMoment = timeMoment.clone().add(interval - 1, 'second');
     const format = `MMM Do, ${getTimeFormat()}`;
@@ -175,13 +222,13 @@ class StackedBarChart extends React.Component {
     );
   }
 
-  timeLabelAsFull(point) {
+  timeLabelAsFull(point: Point | Marker): string {
     const timeMoment = moment(point.x * 1000);
     const format = use24Hours() ? 'MMM D, YYYY HH:mm' : 'lll';
     return timeMoment.format(format);
   }
 
-  getTimeLabel(point) {
+  getTimeLabel(point: Point): React.ReactNode {
     switch (this.state.interval) {
       case 3600:
         return this.timeLabelAsHour(point);
@@ -194,7 +241,7 @@ class StackedBarChart extends React.Component {
     }
   }
 
-  maxPointValue() {
+  maxPointValue(): number {
     return Math.max(
       10,
       this.state.series
@@ -203,7 +250,7 @@ class StackedBarChart extends React.Component {
     );
   }
 
-  renderMarker(marker, index, pointWidth) {
+  renderMarker(marker: Marker, index: number, pointWidth: number): React.ReactNode {
     const timeLabel = this.timeLabelAsFull(marker);
     const title = (
       <div style={{width: '130px'}}>
@@ -242,7 +289,7 @@ class StackedBarChart extends React.Component {
     );
   }
 
-  renderTooltip = (point, _pointIdx) => {
+  renderTooltip = (point: Point, _pointIdx: number): React.ReactNode => {
     const timeLabel = this.getTimeLabel(point);
     const totalY = point.y.reduce((a, b) => a + b);
     return (
@@ -271,14 +318,20 @@ class StackedBarChart extends React.Component {
     );
   };
 
-  getMinHeight(index, _pointLength) {
+  getMinHeight(index: number): number {
     const {minHeights} = this.props;
     return minHeights && (minHeights[index] || minHeights[index] === 0)
-      ? this.props.minHeights[index]
+      ? minHeights[index]
       : 1;
   }
 
-  renderChartColumn(point, maxval, pointWidth, index, _totalPoints) {
+  renderChartColumn(
+    point: Point,
+    maxval: number,
+    pointWidth: number,
+    index: number,
+    _totalPoints: number
+  ): React.ReactNode {
     const totalY = point.y.reduce((a, b) => a + b);
     const totalPct = totalY / maxval;
     // we leave a little extra space for bars with min-heights.
@@ -288,7 +341,7 @@ class StackedBarChart extends React.Component {
     const pts = point.y.map((y, i) => {
       const pct = Math.max(
         totalY && formatFloat((y / totalY) * totalPct * maxPercentage, 2),
-        this.getMinHeight(i, point.y.length)
+        this.getMinHeight(i)
       );
 
       const pt = (
@@ -351,11 +404,13 @@ class StackedBarChart extends React.Component {
 
     markers.sort((a, b) => a.x - b.x);
 
-    const children = [];
-    const markerChildren = [];
+    const children: React.ReactNode[] = [];
+    const markerChildren: React.ReactNode[] = [];
     points.forEach((point, index) => {
       while (markers.length && markers[0].x <= point.x) {
-        markerChildren.push(this.renderMarker(markers.shift(), index, pointWidth));
+        markerChildren.push(
+          this.renderMarker(markers.shift() as Marker, index, pointWidth)
+        );
       }
 
       children.push(
@@ -417,7 +472,7 @@ const SvgContainer = styled('div')`
   height: 100%;
 `;
 
-const CircleSvg = styled('svg')`
+const CircleSvg = styled('svg')<{size: number; offset: number; left: number}>`
   width: ${p => p.size}px;
   height: ${p => p.size}px;
   position: absolute;

src/sentry/static/sentry/app/types/index.tsx

@@ -167,6 +167,7 @@ export type Project = {
   processingIssues: number;
   relayPiiConfig: string;
   builtinSymbolSources?: string[];
+  stats?: Array<[number, number]>;
 } & AvatarProject;
 
 export type MinimalProject = Pick<Project, 'id' | 'slug'>;

src/sentry/static/sentry/app/views/projectsDashboard/chart.jsx → src/sentry/static/sentry/app/views/projectsDashboard/chart.tsx

@@ -2,27 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
+import {Project} from 'app/types';
 import BarChart from 'app/components/barChart';
 
-export default class Chart extends React.Component {
-  static propTypes = {
-    stats: PropTypes.array,
-  };
+type Props = {
+  stats: Required<Project>['stats'];
+};
 
-  static defaultProps = {
-    stats: [],
-  };
+const Chart = ({stats = []}: Props) => {
+  const data = stats.map(d => ({x: d[0], y: d[1]}));
+  return <StyledBarChart points={data} label="events" height={60} gap={1.5} />;
+};
 
-  render() {
-    const data = this.props.stats.map(d => ({x: d[0], y: d[1]}));
+Chart.propTypes = {
+  stats: PropTypes.array,
+};
 
-    return (
-      <div>
-        <StyledBarChart points={data} label="events" height={60} gap={1.5} />
-      </div>
-    );
-  }
-}
+export default Chart;
 
 const StyledBarChart = styled(BarChart)`
   a {

src/sentry/static/sentry/app/views/settings/project/projectKeys/details/keyStats.tsx

@@ -9,6 +9,7 @@ import LoadingError from 'app/components/loadingError';
 import Placeholder from 'app/components/placeholder';
 import StackedBarChart from 'app/components/stackedBarChart';
 
+type Point = React.ComponentProps<typeof StackedBarChart>['points'][0];
 type Props = {
   api: Client;
 } & Pick<
@@ -23,7 +24,17 @@ type Props = {
   'params'
 >;
 
-const getInitialState = () => {
+type State = {
+  since: number;
+  until: number;
+  loading: boolean;
+  error: boolean;
+  // TODO(ts): Add types to stats
+  stats: any[] | null;
+  emptyStats: boolean;
+};
+
+const getInitialState = (): State => {
   const until = Math.floor(new Date().getTime() / 1000);
   return {
     since: until - 3600 * 24 * 30,
@@ -35,7 +46,7 @@ const getInitialState = () => {
   };
 };
 
-class KeyStats extends React.Component<Props> {
+class KeyStats extends React.Component<Props, State> {
   state = getInitialState();
 
   componentDidMount() {
@@ -74,7 +85,7 @@ class KeyStats extends React.Component<Props> {
     });
   };
 
-  renderTooltip = (point, _pointIdx, chart) => {
+  renderTooltip = (point: Point, _pointIdx: number, chart: StackedBarChart) => {
     const timeLabel = chart.getTimeLabel(point);
     const [accepted, dropped, filtered] = point.y;
 
@@ -113,7 +124,7 @@ class KeyStats extends React.Component<Props> {
             <Placeholder height="150px" />
           ) : !this.state.emptyStats ? (
             <StackedBarChart
-              points={this.state.stats}
+              points={this.state.stats!}
               height={150}
               label="events"
               barClasses={['accepted', 'rate-limited']}

tests/js/spec/views/projectsDashboard/__snapshots__/projectCard.spec.jsx.snap

@@ -648,8 +648,25 @@ exports[`ProjectCard renders 1`] = `
                   ]
                 }
               >
-                <div>
-                  <StyledBarChart
+                <StyledBarChart
+                  gap={1.5}
+                  height={60}
+                  label="events"
+                  points={
+                    Array [
+                      Object {
+                        "x": 1525042800,
+                        "y": 1,
+                      },
+                      Object {
+                        "x": 1525046400,
+                        "y": 2,
+                      },
+                    ]
+                  }
+                >
+                  <BarChart
+                    className="css-4cbp86-StyledBarChart e1czsylf0"
                     gap={1.5}
                     height={60}
                     label="events"
@@ -666,251 +683,231 @@ exports[`ProjectCard renders 1`] = `
                       ]
                     }
                   >
-                    <BarChart
-                      className="css-4cbp86-StyledBarChart e1aigaye0"
+                    <StackedBarChart
+                      barClasses={
+                        Array [
+                          "chart-bar",
+                        ]
+                      }
+                      className="css-4cbp86-StyledBarChart e1czsylf0"
                       gap={1.5}
                       height={60}
                       label="events"
+                      markers={Array []}
                       points={
                         Array [
                           Object {
                             "x": 1525042800,
-                            "y": 1,
+                            "y": Array [
+                              1,
+                            ],
                           },
                           Object {
                             "x": 1525046400,
-                            "y": 2,
+                            "y": Array [
+                              2,
+                            ],
                           },
                         ]
                       }
+                      series={Array []}
                     >
-                      <StackedBarChart
-                        barClasses={
-                          Array [
-                            "chart-bar",
-                          ]
-                        }
-                        className="css-4cbp86-StyledBarChart e1aigaye0"
-                        gap={1.5}
-                        height={60}
-                        label="events"
-                        markers={Array []}
-                        points={
-                          Array [
-                            Object {
-                              "x": 1525042800,
-                              "y": Array [
-                                1,
-                              ],
-                            },
-                            Object {
-                              "x": 1525046400,
-                              "y": Array [
-                                2,
-                              ],
-                            },
-                          ]
+                      <StyledFigure
+                        className="css-4cbp86-StyledBarChart e1czsylf0 barchart"
+                        style={
+                          Object {
+                            "height": 60,
+                            "width": undefined,
+                          }
                         }
-                        series={Array []}
-                        width={null}
                       >
-                        <StyledFigure
-                          className="css-4cbp86-StyledBarChart e1aigaye0 barchart"
+                        <figure
+                          className="e1czsylf0 barchart css-1law1hb-StyledFigure-StyledBarChart e1r7vyxv1"
                           style={
                             Object {
                               "height": 60,
-                              "width": null,
+                              "width": undefined,
                             }
                           }
                         >
-                          <figure
-                            className="e1aigaye0 barchart css-1law1hb-StyledFigure-StyledBarChart e5t71581"
-                            style={
-                              Object {
-                                "height": 60,
-                                "width": null,
-                              }
-                            }
+                          <span
+                            className="max-y"
                           >
-                            <span
-                              className="max-y"
+                            <Count
+                              value={10}
                             >
-                              <Count
-                                value={10}
-                              >
-                                <span>
-                                  10
-                                </span>
-                              </Count>
-                            </span>
-                            <span
-                              className="min-y"
+                              <span>
+                                10
+                              </span>
+                            </Count>
+                          </span>
+                          <span
+                            className="min-y"
+                          >
+                            0
+                          </span>
+                          <SvgContainer>
+                            <div
+                              className="css-6tdbe5-SvgContainer e1r7vyxv2"
                             >
-                              0
-                            </span>
-                            <SvgContainer>
-                              <div
-                                className="css-6tdbe5-SvgContainer e5t71582"
+                              <StyledSvg
+                                overflow="visible"
+                                preserveAspectRatio="none"
+                                viewBox="0 0 100 400"
                               >
-                                <StyledSvg
+                                <svg
+                                  className="css-1w5ytn5-StyledSvg e1r7vyxv0"
                                   overflow="visible"
                                   preserveAspectRatio="none"
                                   viewBox="0 0 100 400"
                                 >
-                                  <svg
-                                    className="css-1w5ytn5-StyledSvg e5t71580"
-                                    overflow="visible"
-                                    preserveAspectRatio="none"
-                                    viewBox="0 0 100 400"
-                                  >
-                                    <Tooltip
-                                      containerDisplayMode="inline-block"
-                                      key="1525042800"
-                                      position="bottom"
-                                      title={
-                                        <React.Fragment>
-                                          <div
-                                            style={
-                                              Object {
-                                                "width": "130px",
-                                              }
+                                  <Tooltip
+                                    containerDisplayMode="inline-block"
+                                    key="1525042800"
+                                    position="bottom"
+                                    title={
+                                      <React.Fragment>
+                                        <div
+                                          style={
+                                            Object {
+                                              "width": "130px",
                                             }
-                                          >
-                                            <div
-                                              className="time-label"
-                                            >
-                                              <span>
-                                                April 29, 2018
-                                                <br />
-                                                11:00 PM
-                                                →
-                                                11:59 PM
-                                              </span>
-                                            </div>
-                                          </div>
+                                          }
+                                        >
                                           <div
-                                            className="value-label"
+                                            className="time-label"
                                           >
-                                            1
-                                             
-                                            events
+                                            <span>
+                                              April 29, 2018
+                                              <br />
+                                              11:00 PM
+                                              →
+                                              11:59 PM
+                                            </span>
                                           </div>
-                                        </React.Fragment>
-                                      }
-                                    >
-                                      <Manager>
-                                        <Reference>
-                                          <InnerReference
-                                            setReferenceNode={[Function]}
+                                        </div>
+                                        <div
+                                          className="value-label"
+                                        >
+                                          1
+                                           
+                                          events
+                                        </div>
+                                      </React.Fragment>
+                                    }
+                                  >
+                                    <Manager>
+                                      <Reference>
+                                        <InnerReference
+                                          setReferenceNode={[Function]}
+                                        >
+                                          <g
+                                            aria-describedby="tooltip-123456"
+                                            onBlur={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
                                           >
-                                            <g
-                                              aria-describedby="tooltip-123456"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
+                                            <rect
+                                              height="100%"
+                                              opacity="0"
+                                              width="52.3%"
+                                              x="-1.5%"
+                                            />
+                                            <rect
+                                              className="chart-bar barchart-rect"
+                                              data-test-id="chart-column"
+                                              height="9.9%"
+                                              key="0"
+                                              width="49.3%"
+                                              x="0%"
+                                              y="90.1%"
                                             >
-                                              <rect
-                                                height="100%"
-                                                opacity="0"
-                                                width="52.3%"
-                                                x="-1.5%"
-                                              />
-                                              <rect
-                                                className="chart-bar barchart-rect"
-                                                data-test-id="chart-column"
-                                                height="9.9%"
-                                                key="0"
-                                                width="49.3%"
-                                                x="0%"
-                                                y="90.1%"
-                                              >
-                                                1
-                                              </rect>
-                                            </g>
-                                          </InnerReference>
-                                        </Reference>
-                                      </Manager>
-                                    </Tooltip>
-                                    <Tooltip
-                                      containerDisplayMode="inline-block"
-                                      key="1525046400"
-                                      position="bottom"
-                                      title={
-                                        <React.Fragment>
-                                          <div
-                                            style={
-                                              Object {
-                                                "width": "130px",
-                                              }
+                                              1
+                                            </rect>
+                                          </g>
+                                        </InnerReference>
+                                      </Reference>
+                                    </Manager>
+                                  </Tooltip>
+                                  <Tooltip
+                                    containerDisplayMode="inline-block"
+                                    key="1525046400"
+                                    position="bottom"
+                                    title={
+                                      <React.Fragment>
+                                        <div
+                                          style={
+                                            Object {
+                                              "width": "130px",
                                             }
-                                          >
-                                            <div
-                                              className="time-label"
-                                            >
-                                              <span>
-                                                April 30, 2018
-                                                <br />
-                                                12:00 AM
-                                                →
-                                                12:59 AM
-                                              </span>
-                                            </div>
-                                          </div>
+                                          }
+                                        >
                                           <div
-                                            className="value-label"
+                                            className="time-label"
                                           >
-                                            2
-                                             
-                                            events
+                                            <span>
+                                              April 30, 2018
+                                              <br />
+                                              12:00 AM
+                                              →
+                                              12:59 AM
+                                            </span>
                                           </div>
-                                        </React.Fragment>
-                                      }
-                                    >
-                                      <Manager>
-                                        <Reference>
-                                          <InnerReference
-                                            setReferenceNode={[Function]}
+                                        </div>
+                                        <div
+                                          className="value-label"
+                                        >
+                                          2
+                                           
+                                          events
+                                        </div>
+                                      </React.Fragment>
+                                    }
+                                  >
+                                    <Manager>
+                                      <Reference>
+                                        <InnerReference
+                                          setReferenceNode={[Function]}
+                                        >
+                                          <g
+                                            aria-describedby="tooltip-123456"
+                                            onBlur={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
                                           >
-                                            <g
-                                              aria-describedby="tooltip-123456"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseEnter={[Function]}
-                                              onMouseLeave={[Function]}
+                                            <rect
+                                              height="100%"
+                                              opacity="0"
+                                              width="52.3%"
+                                              x="49.3%"
+                                            />
+                                            <rect
+                                              className="chart-bar barchart-rect"
+                                              data-test-id="chart-column"
+                                              height="19.8%"
+                                              key="0"
+                                              width="49.3%"
+                                              x="50.8%"
+                                              y="80.2%"
                                             >
-                                              <rect
-                                                height="100%"
-                                                opacity="0"
-                                                width="52.3%"
-                                                x="49.3%"
-                                              />
-                                              <rect
-                                                className="chart-bar barchart-rect"
-                                                data-test-id="chart-column"
-                                                height="19.8%"
-                                                key="0"
-                                                width="49.3%"
-                                                x="50.8%"
-                                                y="80.2%"
-                                              >
-                                                2
-                                              </rect>
-                                            </g>
-                                          </InnerReference>
-                                        </Reference>
-                                      </Manager>
-                                    </Tooltip>
-                                  </svg>
-                                </StyledSvg>
-                              </div>
-                            </SvgContainer>
-                          </figure>
-                        </StyledFigure>
-                      </StackedBarChart>
-                    </BarChart>
-                  </StyledBarChart>
-                </div>
+                                              2
+                                            </rect>
+                                          </g>
+                                        </InnerReference>
+                                      </Reference>
+                                    </Manager>
+                                  </Tooltip>
+                                </svg>
+                              </StyledSvg>
+                            </div>
+                          </SvgContainer>
+                        </figure>
+                      </StyledFigure>
+                    </StackedBarChart>
+                  </BarChart>
+                </StyledBarChart>
               </Chart>
               <NoEvents>
                 <Container>