Skip to content

Commit 77df7c3

Browse files
MarcusNotheisMarcusNotheis
authored
fix: fix typescript errors (#632)
1 parent afb0c0f commit 77df7c3

File tree

24 files changed

+241
-164
lines changed

24 files changed

+241
-164
lines changed

‎.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ module.exports = {
5858
'@typescript-eslint/no-parameter-properties': 'off',
5959
'@typescript-eslint/no-use-before-define': 'off',
6060
'@typescript-eslint/no-var-requires': 'error',
61+
'@typescript-eslint/no-unsafe-member-access': 'off',
62+
'@typescript-eslint/no-unsafe-assignment': 'off',
63+
'@typescript-eslint/no-unsafe-return': 'off',
64+
'@typescript-eslint/no-unsafe-call': 'off',
6165
'@typescript-eslint/prefer-for-of': 'error',
6266
'@typescript-eslint/prefer-function-type': 'error',
6367
'@typescript-eslint/prefer-namespace-keyword': 'error',

‎packages/base/src/hooks/usePassThroughHtmlProps.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const PROP_WHITELIST = /^(aria-|data-|id$|on[A-Z])/;
22

3-
export const usePassThroughHtmlProps = (props: Record<string, unknown>, propBlackList: string[] = []) => {
3+
export const usePassThroughHtmlProps = (props: Record<string, any>, propBlackList: string[] = []) => {
44
const componentPropBlacklist = new Set(propBlackList);
55

6-
const returnVal = {};
6+
const returnVal: Record<string, unknown> = {};
77
for (const name in props) {
88
if (PROP_WHITELIST.test(name) && !componentPropBlacklist.has(name)) {
99
returnVal[name] = props[name];

‎packages/base/src/utils/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const getScrollBarWidth = () => {
3636
return w1 - w2;
3737
};
3838

39-
export const enrichEventWithDetails = <T = {}>(event: UIEvent, payload: T = {} as any) => {
39+
export const enrichEventWithDetails = <T extends Record<string, unknown>>(event: UIEvent, payload: T = null) => {
4040
if (event.hasOwnProperty('persist')) {
4141
// if there is a persist method, it's an SyntheticEvent so we need to persist it
4242
event.persist();

‎packages/charts/src/components/BarChart/BarChart.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import {
1818
ReferenceLine,
1919
Tooltip,
2020
XAxis,
21-
YAxis
21+
YAxis,
22+
Label
2223
} from 'recharts';
2324
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
2425
import { useChartMargin } from '../../hooks/useChartMargin';
@@ -215,7 +216,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
215216
type="category"
216217
key={dimension.accessor}
217218
dataKey={dimension.accessor}
218-
xAxisId={index}
219219
tick={<YAxisTicks config={dimension} />}
220220
tickLine={index < 1}
221221
axisLine={index < 1}
@@ -238,17 +238,22 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
238238
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
239239
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
240240
barSize={element.width}
241+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
242+
// @ts-ignore
241243
onClick={onDataPointClickInternal}
242244
isAnimationActive={noAnimation === false}
243245
>
244246
<LabelList
247+
data={dataset}
245248
valueAccessor={valueAccessor(element.accessor)}
246249
content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
247250
/>
248251
</Bar>
249252
);
250253
})}
251254
{!noLegend && (
255+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
256+
// @ts-ignore
252257
<Legend
253258
verticalAlign={chartConfig.legendPosition}
254259
align={chartConfig.legendHorizontalAlign}
@@ -257,11 +262,9 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<H
257262
/>
258263
)}
259264
{chartConfig.referenceLine && (
260-
<ReferenceLine
261-
stroke={chartConfig.referenceLine.color}
262-
x={chartConfig.referenceLine.value}
263-
label={chartConfig.referenceLine.label}
264-
/>
265+
<ReferenceLine stroke={chartConfig.referenceLine.color} x={chartConfig.referenceLine.value}>
266+
<Label>{chartConfig.referenceLine.label}</Label>
267+
</ReferenceLine>
265268
)}
266269
<Tooltip
267270
cursor={tooltipFillOpacity}

‎packages/charts/src/components/ColumnChart/ColumnChart.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
BarChart as ColumnChartLib,
1414
Brush,
1515
CartesianGrid,
16+
Label,
1617
LabelList,
1718
Legend,
1819
ReferenceLine,
@@ -227,7 +228,15 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
227228
{chartConfig.secondYAxis?.dataKey && (
228229
<YAxis
229230
dataKey={chartConfig.secondYAxis.dataKey}
230-
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
231+
axisLine={{
232+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
233+
}}
234+
tick={{ fill: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})` }}
235+
tickLine={{
236+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
237+
}}
238+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
239+
// @ts-ignore
231240
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
232241
orientation="right"
233242
yAxisId="right"
@@ -248,17 +257,22 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
248257
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
249258
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
250259
barSize={element.width}
260+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
261+
// @ts-ignore
251262
onClick={onDataPointClickInternal}
252263
isAnimationActive={noAnimation === false}
253264
>
254265
<LabelList
266+
data={dataset}
255267
valueAccessor={valueAccessor(element.accessor)}
256268
content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
257269
/>
258270
</Column>
259271
);
260272
})}
261273
{!noLegend && (
274+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
275+
// @ts-ignore
262276
<Legend
263277
verticalAlign={chartConfig.legendPosition}
264278
align={chartConfig.legendHorizontalAlign}
@@ -267,12 +281,9 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
267281
/>
268282
)}
269283
{chartConfig.referenceLine && (
270-
<ReferenceLine
271-
stroke={chartConfig.referenceLine.color}
272-
y={chartConfig.referenceLine.value}
273-
label={chartConfig.referenceLine.label}
274-
yAxisId={'left'}
275-
/>
284+
<ReferenceLine stroke={chartConfig.referenceLine.color} y={chartConfig.referenceLine.value} yAxisId="left">
285+
<Label>{chartConfig.referenceLine.label}</Label>
286+
</ReferenceLine>
276287
)}
277288
<Tooltip
278289
cursor={tooltipFillOpacity}

‎packages/charts/src/components/ComposedChart/index.tsx

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import {
1919
ReferenceLine,
2020
Tooltip,
2121
XAxis,
22-
YAxis
22+
YAxis,
23+
Label
2324
} from 'recharts';
2425
import { useChartMargin } from '../../hooks/useChartMargin';
2526
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
@@ -97,11 +98,11 @@ export interface ComposedChartProps extends IChartBaseProps {
9798
layout?: 'horizontal' | 'vertical';
9899
}
99100

100-
enum ChartTypes {
101-
line = Line,
102-
bar = Bar,
103-
area = Area
104-
}
101+
const ChartTypes = {
102+
line: Line,
103+
bar: Bar,
104+
area: Area
105+
};
105106

106107
type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
107108

@@ -161,8 +162,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
161162

162163
const onDataPointClickInternal = useCallback(
163164
(payload, eventOrIndex, event) => {
164-
if (payload.name) {
165-
typeof onDataPointClick === 'function' &&
165+
if (typeof onDataPointClick === 'function') {
166+
if (payload.name) {
166167
onDataPointClick(
167168
enrichEventWithDetails(event ?? eventOrIndex, {
168169
value: payload.value.length ? payload.value[1] - payload.value[0] : payload.value,
@@ -178,19 +179,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
178179
payload: payload.payload
179180
})
180181
);
181-
} else {
182-
typeof onDataPointClick === 'function' &&
182+
} else {
183183
onDataPointClick(
184-
enrichEventWithDetails(
185-
{},
186-
{
187-
value: eventOrIndex.value,
188-
dataKey: eventOrIndex.dataKey,
189-
dataIndex: eventOrIndex.index,
190-
payload: eventOrIndex.payload
191-
}
192-
)
184+
enrichEventWithDetails({} as any, {
185+
value: eventOrIndex.value,
186+
dataKey: eventOrIndex.dataKey,
187+
dataIndex: eventOrIndex.index,
188+
payload: eventOrIndex.payload
189+
})
193190
);
191+
}
194192
}
195193
},
196194
[onDataPointClick]
@@ -282,7 +280,15 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
282280
{chartConfig.secondYAxis?.dataKey && layout === 'horizontal' && (
283281
<YAxis
284282
dataKey={chartConfig.secondYAxis.dataKey}
285-
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
283+
axisLine={{
284+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
285+
}}
286+
tick={{ fill: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})` }}
287+
tickLine={{
288+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
289+
}}
290+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
291+
// @ts-ignore
286292
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
287293
orientation="right"
288294
interval={0}
@@ -292,7 +298,15 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
292298
{chartConfig.secondYAxis?.dataKey && layout === 'vertical' && (
293299
<XAxis
294300
dataKey={chartConfig.secondYAxis.dataKey}
295-
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
301+
axisLine={{
302+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
303+
}}
304+
tick={{ fill: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})` }}
305+
tickLine={{
306+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
307+
}}
308+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
309+
// @ts-ignore
296310
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
297311
orientation="top"
298312
interval={0}
@@ -305,10 +319,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
305319
stroke={chartConfig.referenceLine.color}
306320
y={layout === 'horizontal' ? chartConfig.referenceLine.value : undefined}
307321
x={layout === 'vertical' ? chartConfig.referenceLine.value : undefined}
308-
label={chartConfig.referenceLine.label}
309322
yAxisId={layout === 'horizontal' ? 'primary' : undefined}
310323
xAxisId={layout === 'vertical' ? 'primary' : undefined}
311-
/>
324+
>
325+
<Label>{chartConfig.referenceLine.label}</Label>
326+
</ReferenceLine>
312327
)}
313328
<Tooltip
314329
cursor={tooltipFillOpacity}
@@ -317,6 +332,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
317332
contentStyle={tooltipContentStyle}
318333
/>
319334
{!noLegend && (
335+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
336+
// @ts-ignore
320337
<Legend
321338
verticalAlign={chartConfig.legendPosition}
322339
align={chartConfig.legendHorizontalAlign}

‎packages/charts/src/components/LineChart/LineChart.tsx

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
ReferenceLine,
1818
Tooltip,
1919
XAxis,
20-
YAxis
20+
YAxis,
21+
Label
2122
} from 'recharts';
2223
import { useChartMargin } from '../../hooks/useChartMargin';
2324
import { useLabelFormatter } from '../../hooks/useLabelFormatter';
@@ -140,15 +141,12 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
140141
(payload, eventOrIndex) => {
141142
if (eventOrIndex.dataKey && onDataPointClick) {
142143
onDataPointClick(
143-
enrichEventWithDetails(
144-
{},
145-
{
146-
value: eventOrIndex.value,
147-
dataKey: eventOrIndex.dataKey,
148-
dataIndex: eventOrIndex.index,
149-
payload: eventOrIndex.payload
150-
}
151-
)
144+
enrichEventWithDetails({} as any, {
145+
value: eventOrIndex.value,
146+
dataKey: eventOrIndex.dataKey,
147+
dataIndex: eventOrIndex.index,
148+
payload: eventOrIndex.payload
149+
})
152150
);
153151
}
154152
},
@@ -214,7 +212,15 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
214212
{chartConfig.secondYAxis?.dataKey && (
215213
<YAxis
216214
dataKey={chartConfig.secondYAxis.dataKey}
217-
stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
215+
axisLine={{
216+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
217+
}}
218+
tick={{ fill: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})` }}
219+
tickLine={{
220+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
221+
}}
222+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
223+
// @ts-ignore
218224
label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
219225
orientation="right"
220226
yAxisId="right"
@@ -229,17 +235,21 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
229235
key={element.accessor}
230236
name={element.label ?? element.accessor}
231237
strokeOpacity={element.opacity}
238+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
239+
// @ts-ignore
232240
label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
233241
type="monotone"
234242
dataKey={element.accessor}
235243
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
236244
strokeWidth={element.width}
237-
activeDot={{ onClick: onDataPointClickInternal }}
245+
activeDot={{ onClick: onDataPointClickInternal } as any}
238246
isAnimationActive={noAnimation === false}
239247
/>
240248
);
241249
})}
242250
{!noLegend && (
251+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
252+
// @ts-ignore
243253
<Legend
244254
verticalAlign={chartConfig.legendPosition}
245255
align={chartConfig.legendHorizontalAlign}
@@ -248,12 +258,9 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
248258
/>
249259
)}
250260
{chartConfig.referenceLine && (
251-
<ReferenceLine
252-
stroke={chartConfig.referenceLine.color}
253-
y={chartConfig.referenceLine.value}
254-
label={chartConfig.referenceLine.label}
255-
yAxisId={'left'}
256-
/>
261+
<ReferenceLine stroke={chartConfig.referenceLine.color} y={chartConfig.referenceLine.value} yAxisId={'left'}>
262+
<Label>{chartConfig.referenceLine.label}</Label>
263+
</ReferenceLine>
257264
)}
258265
<Tooltip
259266
cursor={tooltipFillOpacity}

‎packages/charts/src/components/PieChart/PieChart.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,9 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<H
162162
margin={chartConfig.margin}
163163
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
164164
>
165+
{/*
166+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
167+
// @ts-ignore*/}
165168
<Pie
166169
onClick={onDataPointClickInternal}
167170
innerRadius={chartConfig.innerRadius}
@@ -193,6 +196,8 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<H
193196
labelStyle={chartConfig.tooltipLabelStyle}
194197
/>
195198
{!noLegend && (
199+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
200+
// @ts-ignore
196201
<Legend
197202
verticalAlign={chartConfig.legendPosition}
198203
align={chartConfig.legendHorizontalAlign}

0 commit comments

Comments
 (0)