remove values/formatted values from chart legends (#15490)

before:

<img width="639" height="385" alt="Screenshot 2025-10-31 at 15 29 01"
src="https://github.com/user-attachments/assets/5769a160-205d-4a03-ab7b-e037c65dd743"
/>


after:

<img width="667" height="371" alt="Screenshot 2025-10-31 at 15 27 51"
src="https://github.com/user-attachments/assets/12a4e034-6262-43a9-b257-894d74462d73"
/>
This commit is contained in:
nitin
2025-10-31 17:18:55 +05:30
committed by GitHub
parent 6ed1fd841d
commit 1b02bc7cc4
8 changed files with 1 additions and 51 deletions
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
export type GraphWidgetLegendItem = {
id: string;
label: string;
formattedValue: string;
color: string;
};
@@ -17,7 +16,6 @@ const StyledLegendContainer = styled.div`
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(3)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} 0;
`;
const StyledLegendItem = styled.div`
@@ -32,10 +30,6 @@ const StyledLegendLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
`;
const StyledLegendValue = styled.span`
color: ${({ theme }) => theme.font.color.primary};
`;
const StyledDot = styled.div<{ color: string }>`
background: ${({ color }) => color};
border-radius: 50%;
@@ -58,7 +52,6 @@ export const GraphWidgetLegend = ({
<StyledLegendItem key={item.id}>
<StyledDot color={item.color} />
<StyledLegendLabel>{item.label}</StyledLegendLabel>
<StyledLegendValue>{item.formattedValue}</StyledLegendValue>
</StyledLegendItem>
))}
</StyledLegendContainer>
@@ -24,19 +24,16 @@ export const Default: Story = {
{
id: 'sales',
label: 'Sales',
formattedValue: '$45,231',
color: 'blue',
},
{
id: 'marketing',
label: 'Marketing',
formattedValue: '$12,543',
color: 'green',
},
{
id: 'operations',
label: 'Operations',
formattedValue: '$8,765',
color: 'red',
},
]}
@@ -54,7 +51,6 @@ export const SingleItem: Story = {
{
id: 'revenue',
label: 'Revenue',
formattedValue: '750',
color: 'blue',
},
]}