Skip to content

Commit

Permalink
feat(dataviz): allow to build custom legend (#4298)
Browse files Browse the repository at this point in the history
romainseb authored Aug 31, 2022
1 parent 1593451 commit 6e850c4
Showing 5 changed files with 30 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/quick-lizards-yawn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-dataviz': minor
---

feat(dataviz): allow to build custom legend for linechart
5 changes: 5 additions & 0 deletions packages/dataviz/src/components/LineChart/LineChart.scss
Original file line number Diff line number Diff line change
@@ -26,6 +26,11 @@ $module: line-chart;
gap: tokens.$coral-spacing-m;
list-style: none;

&-item {
display: flex;
align-items: center;
}

&--align-left {
justify-content: flex-start;
}
19 changes: 18 additions & 1 deletion packages/dataviz/src/components/LineChart/LineChart.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React from 'react';
import { Meta } from '@storybook/react';
import tokens from '@talend/design-tokens';
import {
TagInformation,
SizedIcon,
StackHorizontal,
StackItem,
Tooltip,
} from '@talend/design-system';
import LineChart, { LineChartProps } from './LineChart.component';

export default {
@@ -72,8 +79,18 @@ export const FullyCustomisedLineChart = {
{
key: 'validity',
color: tokens.coralColorChartsColor00Strong,
legendLabel: (
<StackHorizontal gap="XS" align="center">
<StackItem>Validity</StackItem>
<Tooltip title="Validity refer to your sample quality">
<StackHorizontal gap={0}>
<SizedIcon name="information-stroke" size="S" />
</StackHorizontal>
</Tooltip>
<TagInformation>Well</TagInformation>
</StackHorizontal>
),
tooltipLabel: 'Validity',
legendLabel: 'Validity',
axis: 'left',
status: 'highlighted',
},
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ export type LineOptions = {
key: string;
color: string;
tooltipLabel?: string;
legendLabel?: string;
legendLabel?: string | React.ReactElement;
axis?: 'left' | 'right';
dashed?: boolean;
tooltipFormatter?: (value: any) => string;
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@ export const CustomLegend = ({
<li key={config.key}>
<div
data-testid={`legend_item_${config.key}`}
className={classNames({
className={classNames(styles['line-chart-custom-legend-item'], {
[styles['line-chart-custom-legend__button--inactive']]:
config?.status === 'inactive',
})}

0 comments on commit 6e850c4

Please sign in to comment.