Recharts Responsive Container не отображается на ноутбуке - PullRequest
Новая
       10

Recharts Responsive Container не отображается на ноутбуке

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

Я показываю BarChart в отзывчивом контейнере. На моем «большом экране» это (вроде) работает, но на моем экране MacBook BarChart не виден, пока я не изменю размеры окна или не манипулирую каким-либо образом DOM (например, установите ширину для элемента в инспекторе браузеров). Изменяя размер окна вручную, элемент получает ширину.

Я пробовал разные предложения, такие как установка width="100%" для ResponsiveContainer и для body, html и #root. Я также оборачиваю ResponsiveContainer в 2 деления с позицией, чтобы растянуть контейнер (см. styled.ts ниже).

Вот мой компонент Chart 

import React, { FC } from 'react'
import {
    ResponsiveContainer,
    Bar,
    BarChart as RCBarChart,
    XAxis,
    YAxis,
    CartesianGrid,
    ReferenceLine,
    Tooltip,
} from 'recharts'
import i18n from ...'i18n'
import { ChartContainerOuter, ChartContainerInner, ChartLegend } from './styled'
import colors from xxx'@liva-web/core/theme/colors'
import moment from 'moment'

const defaultTickFormatter = (date: Date) => {
    return moment(date).format('dddd')
}

interface Props {
    data: SingleValueChartData[]
    goal: number
    goalColor?: string
    gridStroke?: string
    gradientFrom?: string
    gradientTo?: string
    tickFormatter?: (string) => string
}

const BarChart: FC<Props> = ({
    data,
    goal,
    goalColor = colors.blackberry[700],
    gridStroke = colors.lychee[600],
    gradientFrom = colors.pumpkin[400],
    gradientTo = colors.banana[400],
    tickFormatter = defaultTickFormatter,
}) => {
    // random id string for gradient
    const gradientId = `gradient-${new Date().getTime()}`

    return (
        <ChartContainerOuter>
            <ChartContainerInner>
                <ResponsiveContainer width="100%" height={400}>
                    <RCBarChart data={data}>
                        <defs>
                            <linearGradient id={gradientId} gradientTransform="rotate(90)">
                                <stop offset="5%" stopColor={gradientFrom} />
                                <stop offset="95%" stopColor={gradientTo} />
                            </linearGradient>
                        </defs>
                        <Tooltip isAnimationActive={false} cursor={false} />
                        <CartesianGrid stroke={gridStroke} strokeDasharray="3" />
                        <XAxis dataKey="date" tickFormatter={tickFormatter} />
                        <YAxis />
                        <Bar
                            dataKey="value"
                            fill={`url(#${gradientId})`}
                            barSize={20}
                            isAnimationActive={false}
                        />
                        <ReferenceLine y={goal} stroke={goalColor} strokeWidth={2} isFront />
                    </RCBarChart>
                </ResponsiveContainer>
            </ChartContainerInner>
        </ChartContainerOuter>
    )
}

export default BarChart

styled.ts 

import styled from 'styled-components'

export const ChartContainerOuter = styled.div`
    position: relative;
    width: 100%;
    padding-bottom: 400px;
`

export const ChartContainerInner = styled.div`
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
`

export const ChartLegend = styled.div`
    color: ${props => props.color};
    margin-right: 10px;
`

Действительно странно, что на ноутбуке и "настольном компьютере" он ведет себя по-разному ...! Любые предложения о том, как это исправить?

...