[Frontend] Fix BarChart and MetricsCategoryBarCharts new lint errors in common repo

[mxosman]

BarChart.tsx

  158:21  error  Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component and pass data as props. If you want to allow component creation in props, set allowAsProps option to true  react/no-unstable-nested-components

MetricsCategoryBarChart.tsx

  126:23  error  Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component and pass data as props. If you want to allow component creation in props, set allowAsProps option to true  react/no-unstable-nested-components

The errors are referring specifically to us defining an anonymous function within the tick prop. We can define this before the render and pass in the function reference to the tick prop.

              <YAxis
                tick={(props: TickProps) => (
                  <CustomYAxisTick
                    y={props.y}
                    payload={props.payload}
                    percentageView={false}
                    styles={tickStyle}
                  />
                )}
                ...

[lilidworkin]

@mxosman would this be a good task for Ilya or should we just close it?

[mxosman]

I think so! Should be a simple one I hope!