#trivial Disable experimental charts tslint issues

react/components/EXPERIMENTAL_Charts/BarChart/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import React, { FC } from 'react'
 import {
   BarChart as BarChartBase,
@@ -28,7 +29,7 @@ const BarChart: FC<Props & BaseChartProps> = ({
 }) => {
   const { configs } = getChartDefaultProps(config, chartDefaultConfig)
   const { barConfigs } = getBarDefaultProps(barProps)
-  const dataKey = barConfigs.layout == Layout.HORIZONTAL ? yAxisKey : xAxisKey
+  const dataKey = barConfigs.layout === Layout.HORIZONTAL ? yAxisKey : xAxisKey
 
   return (
     <ResponsiveContainer {...configs.container}>
@@ -45,16 +46,20 @@ const BarChart: FC<Props & BaseChartProps> = ({
 
 BarChart.propTypes = {
   /** The source data, in which each element is an object. */
+  // @ts-ignore
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /** The key of x-axis which is corresponding to the data. */
+  // @ts-ignore
   xAxisKey: PropTypes.string,
 
   /** The key of y-axis which is corresponding to the data. */
+  // @ts-ignore
   yAxisKey: PropTypes.string,
 
   /** The schema prop changes some styles of the chart.
    * This prop should be given as an object. Check an example [here](/#/Components/Charts/LineChart?id=chart-config) */
+  // @ts-ignore
   config: PropTypes.shape({
     xAxis: PropTypes.shape({
       axisLine: PropTypes.bool,
@@ -79,6 +84,7 @@ BarChart.propTypes = {
   }),
 
   /** An object that will change specific bar props, like the orientation */
+  // @ts-ignore
   barProps: PropTypes.object,
 }
 

react/components/EXPERIMENTAL_Charts/BubbleChart/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import React, { FC } from 'react'
 import PropTypes from 'prop-types'
 
@@ -8,9 +9,11 @@ const BubbleChart: FC<BaseChartProps> = props => <ScatterChart {...props} />
 
 BubbleChart.propTypes = {
   /** The source data, in which each element is an object. */
+  // @ts-ignore
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /** The config prop changes some styles of the chart. This prop should be given as an object. */
+  // @ts-ignore
   config: PropTypes.shape({
     xAxis: PropTypes.shape({
       axisLine: PropTypes.bool,

react/components/EXPERIMENTAL_Charts/LineChart/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import React, { FC } from 'react'
 import zipWith from 'lodash/zipWith'
 import curry from 'lodash/curry'
@@ -12,6 +13,7 @@ import {
   TooltipFormatter,
 } from 'recharts'
 import PropTypes from 'prop-types'
+// @ts-ignore
 import uuid from 'uuid'
 
 import { colors, tooltipProps } from '../commonProps'
@@ -23,6 +25,7 @@ interface Props {
   lineProps: LineProps
 }
 
+// @ts-ignore
 const renderLine = (lineConfigs, key, color) => (
   <Line key={uuid()} dataKey={key} stroke={color} {...lineConfigs} />
 )
@@ -57,18 +60,22 @@ const LineChart: FC<Props & BaseChartProps> = ({
 
 LineChart.propTypes = {
   /** The source data, in which each element is an object. */
+  // @ts-ignore
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /** The keys or getter of a group of data which should be unique in a LineChart. */
+  // @ts-ignore
   dataKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
 
   /** The key of x-axis which is corresponding to the data. */
   xAxisKey: PropTypes.string.isRequired,
 
   /** The formatter function of value in tooltip. If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "key" */
+  // @ts-ignore
   tooltipFormatter: PropTypes.func,
 
   /** The config prop changes some styles of the chart. This prop should be given as an object. */
+  // @ts-ignore
   config: PropTypes.shape({
     /** Container custom configuration (according to the Recharts API) */
     container: PropTypes.object,
@@ -85,6 +92,7 @@ LineChart.propTypes = {
   }),
 
   /** The interpolation defines how data points should be connected when creating a path. */
+  // @ts-ignore
   lineProps: PropTypes.object,
 }
 

react/components/EXPERIMENTAL_Charts/ScatterChart/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import React, { FC } from 'react'
 import {
   ScatterChart as ScatterChartBase,
@@ -10,15 +12,16 @@ import {
   ZAxis,
 } from 'recharts'
 import PropTypes from 'prop-types'
+// @ts-ignore
 import uuid from 'uuid'
 
 import { commonDefaultProps } from './constants'
 import { getChartDefaultProps, getRangeOfZAxis } from '../helpers'
 import { colors } from '../commonProps'
 import { BaseChartProps } from '../types'
 
-const CustomTooltip = props => {
-  return props.payload.map(item => (
+const CustomTooltip = (props: any) => {
+  return props.payload.map((item: any) => (
     <p key={uuid()}>{`${item.dataKey}: ${item.value}`}</p>
   ))
 }
@@ -50,9 +53,11 @@ const ScatterChart: FC<BaseChartProps> = ({
 
 ScatterChart.propTypes = {
   /** The source data, in which each element is an object. */
+  // @ts-ignore
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /** The config prop changes some styles of the chart. This prop should be given as an object. */
+  // @ts-ignore
   config: PropTypes.shape({
     xAxis: PropTypes.shape({
       axisLine: PropTypes.bool,
@@ -83,6 +88,7 @@ ScatterChart.propTypes = {
   yAxisKey: PropTypes.string.isRequired,
 
   /** The keys or getter of a group of data which should be unique in a ScatterChart. */
+  // @ts-ignore
   dataKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
 
   /** The key of y-axis which is corresponding to the data, it measures size of dot. */

react/components/EXPERIMENTAL_Charts/helpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import mergeBase from 'lodash/merge'
 
 import { ChartConfig, LineProps, BarProps } from './types'
@@ -9,12 +10,14 @@ const merge = (defaultProps: ChartConfig, userProps: ChartConfig) => {
   const props = defaultProps
   userProps &&
     Object.keys(userProps).forEach(
+      // @ts-ignore
       key => (props[key] = mergeBase(props[key], userProps[key]))
     )
   return props
 }
 
 const getRangeOfZAxis = (key: string | number, data: object[]) => {
+  // @ts-ignore
   const values = data.map(item => item[key])
   const min = Math.min(...values)
   const max = Math.max(...values)