-
-
Date: { datum.date.toLocaleDateString() }
+
+ { nearestDatum.date.toLocaleDateString() }
- { Object.entries( datum ).map( ( [ key, value ] ) => {
- if ( key === 'date' ) return null;
- return (
-
-
- { key }: { value.toString() }
-
-
- );
- } ) }
+ { tooltipPoints.map( point => (
+
+ { point.key }:
+ { point.value }
+
+ ) ) }
);
};
@@ -66,6 +75,8 @@ const LineChart: FC< LineChartProps > = ( {
width,
height,
margin = { top: 20, right: 20, bottom: 40, left: 40 },
+ className,
+ withTooltips = true,
} ) => {
const providerTheme = useChartTheme();
@@ -90,7 +101,7 @@ const LineChart: FC< LineChartProps > = ( {
} );
return (
-
+
= ( {
/>
) ) }
-
+ { withTooltips && (
+
+ ) }
);
diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss b/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss
new file mode 100644
index 0000000000000..cbb24ea286735
--- /dev/null
+++ b/projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss
@@ -0,0 +1,3 @@
+.pie-chart {
+ position: relative;
+}
diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
index bffe55ea4de25..712ce212792e1 100644
--- a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
+++ b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
@@ -1,9 +1,11 @@
import { Group } from '@visx/group';
import { Pie } from '@visx/shape';
+import clsx from 'clsx';
import { SVGProps } from 'react';
import useChartMouseHandler from '../../hooks/use-chart-mouse-handler';
import { useChartTheme, defaultTheme } from '../../providers/theme';
import { Tooltip } from '../tooltip';
+import styles from './pie-chart.module.scss';
import type { BaseChartProps, DataPoint } from '../shared/types';
// TODO: add animation
@@ -27,6 +29,7 @@ const PieChart = ( {
height,
withTooltips = false,
innerRadius = 0,
+ className,
}: PieChartProps ) => {
const providerTheme = useChartTheme();
const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =
@@ -46,7 +49,7 @@ const PieChart = ( {
};
return (
-
+