Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Charts: Adding multi series support for line charts #40605

Open
wants to merge 15 commits into
base: trunk
Choose a base branch
from
+1,178 −115
Open

Charts: Adding multi series support for line charts #40605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8ee6cc9
Charts - Adding basic pie chart
grzegorz-cp Dec 12, 2024
5373479
Charts - Updating charts and adding a tooltip hook
grzegorz-cp Dec 12, 2024
8bd469a
Charts - Adding doughts to pies
grzegorz-cp Dec 12, 2024
645bb54
Charts - Fixing dependency
grzegorz-cp Dec 12, 2024
54801c0
changelog
grzegorz-cp Dec 12, 2024
54f4042
Charts - Adding chart TS interface
grzegorz-cp Dec 12, 2024
73f6336
Charts - Adding support for multiple data sets
grzegorz-cp Dec 12, 2024
25da221
Charts - Adding shared chart TS interface
grzegorz-cp Dec 12, 2024
27cfe17
Merge branch 'trunk' into add/charts-pie-chart
grzegorz-cp Dec 12, 2024
55eb90c
Merge branch 'trunk' into add/charts-multi-series
grzegorz-cp Dec 12, 2024
6d28c88
Charts - Cleanup
grzegorz-cp Dec 12, 2024
5e31969
Charts - Cleanup 2
grzegorz-cp Dec 12, 2024
5edde1c
Merge chcnages from the pie chart PR
grzegorz-cp Dec 13, 2024
efbe8a0
Charts - Fixing tooltips for multiple data sets, adding className prop
grzegorz-cp Dec 13, 2024
14ca95e
Charts - Updating examples
grzegorz-cp Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions projects/js-packages/charts/changelog/add-charts-pie-chart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: added

Adding new chart type - pie chart.
1 change: 1 addition & 0 deletions projects/js-packages/charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
},
"dependencies": {
"@react-spring/web": "9.7.3",
"@visx/responsive": "3.12.0",
"@visx/axis": "^3.12.0",
"@visx/group": "^3.12.0",
"@visx/scale": "^3.12.0",
Expand Down
33 changes: 19 additions & 14 deletions projects/js-packages/charts/src/components/bar-chart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,33 @@ import { Group } from '@visx/group';
import { scaleBand, scaleLinear } from '@visx/scale';
import { Bar } from '@visx/shape';
import { useTooltip } from '@visx/tooltip';
import clsx from 'clsx';
import React from 'react';
import { useChartTheme } from '../../providers/theme';
import { Tooltip } from '../tooltip';
import type { DataPoint } from '../shared/types';
import type { BaseChartProps, DataPoint } from '../shared/types';

type BarChartProps = {
interface BarChartProps extends BaseChartProps {
/**
* Array of data points to display in the chart
*/
data: DataPoint[];
width: number;
height: number;
margin?: {
[ K in 'top' | 'right' | 'bottom' | 'left' ]?: number;
};
showTooltips?: boolean;
};
}

/**
* Renders a bar chart using the provided data.
*
* @param {BarChartProps} props - Component props
* @return {JSX.Element} The rendered bar chart component
*/
function BarChart( { data, width, height, margin, showTooltips = false }: BarChartProps ) {
function BarChart( {
data,
width,
height,
margin,
withTooltips = false,
className,
}: BarChartProps ) {
const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
useTooltip< DataPoint >();

Expand Down Expand Up @@ -65,14 +70,14 @@ function BarChart( { data, width, height, margin, showTooltips = false }: BarCha

const getMouseMoveHandler = React.useCallback(
( d: DataPoint ) => {
if ( ! showTooltips ) return undefined;
if ( ! withTooltips ) return undefined;
return ( event: React.MouseEvent< SVGRectElement > ) => handleMouseMove( event, d );
},
[ showTooltips, handleMouseMove ]
[ withTooltips, handleMouseMove ]
);

return (
<div style={ { position: 'relative' } }>
<div className={ clsx( 'bar-chart', className ) } style={ { position: 'relative' } }>
<svg width={ width } height={ height }>
<Group left={ margins.left } top={ margins.top }>
{ data.map( d => (
Expand All @@ -84,7 +89,7 @@ function BarChart( { data, width, height, margin, showTooltips = false }: BarCha
height={ yMax - ( yScale( d.value ) ?? 0 ) }
fill={ theme.colors[ 0 ] }
onMouseMove={ getMouseMoveHandler( d ) }
onMouseLeave={ showTooltips ? handleMouseLeave : undefined }
onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
/>
) ) }
<AxisLeft scale={ yScale } />
Expand Down
10 changes: 2 additions & 8 deletions projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import BarChart from '../index';
import data from './sample-data';
import type { Meta } from '@storybook/react';

export default {
Expand All @@ -23,14 +24,7 @@ Default.args = {
width: 500,
height: 300,
showTooltips: false,
data: [
{ label: 'Jan', value: 12 },
{ label: 'Feb', value: 18 },
{ label: 'Mar', value: 29 },
{ label: 'Apr', value: 33 },
{ label: 'May', value: 45 },
{ label: 'Jun', value: 52 },
],
data: data[ 0 ].data,
};

export const WithTooltips = Template.bind( {} );
Expand Down
Loading
Loading