Skip to content

Commit

Permalink
fix: update recharts
Browse files Browse the repository at this point in the history
  • Loading branch information
kostasdano committed Oct 3, 2023
1 parent c5ab01f commit 32b96e6
Show file tree
Hide file tree
Showing 9 changed files with 454 additions and 157 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"@types/react-highlight-words": "^0.16.1",
"@types/react-router-dom": "^5.3.3",
"@types/react-test-renderer": "^18.0.1",
"@types/recharts": "^1.8.16",
"@types/recharts": "^1.8.25",
"@types/styled-components": "^5.1.7",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^4.5.0",
Expand Down Expand Up @@ -111,7 +111,7 @@
"react-range": "^1.8.12",
"react-switch": "^6.0.0",
"react-window": "^1.8.6",
"recharts": "^1.8.5",
"recharts": "^2.8.0",
"uuid": "^8.3.2"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Chart/BarChart/BarChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const BarChart: React.FC<Props> = ({ data }) => {
barCategoryGap="20%"
maxBarSize={32}
>
<CartesianGrid offset={{ left: 0 }} horizontal={false} />
<CartesianGrid horizontal={false} />
<XAxis
type="number"
axisLine={false}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ interface CustomLabelProps extends LabelProps {

const CustomLabel: React.FC<CustomLabelProps> = ({ colors, value, x, y, width, height, index }) => {
const theme = useTheme();
const xValue = x && width ? x + width + xValueBase : xValueBase;
const yValue = y && height ? y + height / divisor : 0;
const xValue = x && width ? Number(x) + Number(width) + xValueBase : xValueBase;
const yValue = y && height ? Number(y) + Number(height) / divisor : 0;
const fill = index && colors[index] ? colors[index] : theme.palette.black;

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import { TooltipProps } from 'recharts';
import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';

import { HoverInfo } from '../../BarChart';
import { tooltipLiStyle, tooltipStyle, tooltipUlStyle } from './CustomTooltipContent.style';

const CustomTooltip: React.FC<TooltipProps> = ({ payload }) => {
const options = payload && (payload[0]?.payload?.options?.hoverInfo as HoverInfo[]);
const CustomTooltipContent: React.FC<TooltipProps<ValueType, NameType>> = ({ payload }) => {
const options: HoverInfo[] | undefined = payload && (payload[0]?.payload?.options?.hoverInfo as HoverInfo[]);

return options ? (
<div className="custom-tooltip" css={tooltipStyle()}>
Expand All @@ -26,4 +27,4 @@ const CustomTooltip: React.FC<TooltipProps> = ({ payload }) => {
) : null;
};

export default CustomTooltip;
export default CustomTooltipContent;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import useTheme from 'hooks/useTheme';
import React from 'react';
import { LabelProps, PolarViewBox } from 'recharts';
import { LabelProps, PolarAngleAxisProps } from 'recharts';

import { flexContainer, labelUnitStyle } from './CustomLabel.style';

Expand All @@ -10,7 +10,7 @@ type CustomLabelProps = LabelProps & {
};

const CustomLabel: React.FC<CustomLabelProps> = ({ viewBox, value, units }) => {
const { cx, cy } = viewBox as PolarViewBox;
const { cx, cy } = viewBox as PolarAngleAxisProps;
const theme = useTheme();

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { TooltipProps } from 'recharts';
import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';

import {
tooltipHrStyle,
Expand All @@ -8,7 +9,7 @@ import {
tooltipUlStyle,
} from './CustomTooltip.style';

const CustomTooltip: React.FC<TooltipProps> = ({ label, payload }) => {
const CustomTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({ label, payload }) => {
return (
<div className="custom-tooltip" css={tooltipStyle()}>
<p className="label" style={{ margin: '0px' }}>
Expand Down
5 changes: 3 additions & 2 deletions src/components/Chart/Wrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import { ResponsiveContainer, AreaChartProps, BarChartProps } from 'recharts';
import { ResponsiveContainer } from 'recharts';
import { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';

type ChartProps = AreaChartProps & BarChartProps;
type ChartProps = CategoricalChartProps;

type Props = ChartProps & {
aspect?: number;
Expand Down
Loading

0 comments on commit 32b96e6

Please sign in to comment.