Заполнить панель градиента в пользовательской подсказке - PullRequest
Новая
       10

Заполнить панель градиента в пользовательской подсказке

0 голосов
/ 28 октября 2019

Я хочу отобразить различные цвета заливки полос в пользовательской подсказке. Это работает для сплошных заливок, но не для градиентов ...

Я использую свойство ToolTip content, где доступна опора color. На сплошных заливках цвет является допустимым шестнадцатеричным значением цвета (например, #ff3300). Но при градиентной заливке у меня есть идентификатор SVG Gradient def (например, url(#xxx123)).

Как видите, я хочу закрасить небольшой div перед меткой / значением столбца, используя background-color. Но полученное значение цвета недопустимо ...

Как мне этого добиться?

Chrome Inspector

Chrome Inspector

Диаграмма 

<ComposedChart data={data}>
    {createGradientForBars(id, bars)}
    {showLegend && (
        <Legend
            verticalAlign="top"
            align="right"
            wrapperStyle={styles.wrapperStyles}
            formatter={renderLegend}
        />
    )}
    <CartesianGrid stroke={gridStroke} strokeDasharray="3" />
    <XAxis dataKey={ChartDataKeys.Date} tickFormatter={tickFormatter} />
    <YAxis />
    <Tooltip isAnimationActive={false} content={<CustomToolTip />} />
    {bars.map((bar: BarConfiguration) => (
        <Bar
            key={bar.key}
            dataKey={bar.key}
            stackId={id}
            barSize={20}
            fill={getBarColorFill(id, bar)}
            isAnimationActive={false}
        />
    ))}
</ComposedChart>

CustomToolTip 

export function CustomToolTip(props: TooltipProps): ReactElement {
    const { label: date, payload } = props

    return (
        <ToolTipContainer>
            <Typography variant="subtitle1">{moment(date).format('DD MMM YYYY')}</Typography>
            {payload &&
                payload.length > 0 &&
                payload.map(item => {
                    const { name, value, color } = item
                    const translated = i18n.t(`charts.legend.${name.toLowerCase()}`)
                    return (
                        item &&
                        value > 0 && (
                            <Grid key={`${translated}-${value}`} container spacing={4}>
                                <Grid item>
                                    <ColoredBox color={color} />
                                </Grid>
                                <Grid item>
                                    <ToolTipItem color={color} display="inline" variant="body2">
                                        {translated}
                                    </ToolTipItem>
                                </Grid>
                                <Grid item>
                                    <Typography display="inline" variant="body2">
                                        {value}
                                    </Typography>
                                </Grid>
                            </Grid>
                        )
                    )
                })}
        </ToolTipContainer>
    )
}

styled.ts (styled-components) 

import styled from 'styled-components'
import spacing from '@liva-web/core/theme/spacing'
import Typography from '@liva-web/core/components/Typography'

export const ToolTipContainer = styled.div`
    background-color: white;
    padding: ${spacing[4]};
`

export const ToolTipItem = styled(Typography)`
    && {
        color: ${props => `${props.color}`};
    }
`

export const ColoredBox = styled.div`
    && {
        width: 28px;
        height: 28px;
        background-color: ${props => `${props.color}`};
    }
`
...