Диаграмма JS CSS Работа локально, сбои в производстве - PullRequest
Новая
       30

Диаграмма JS CSS Работа локально, сбои в производстве

0 голосов
/ 08 апреля 2020

Я работаю над приложением, использующим Next.js / GraphQL / Apollo в качестве основных частей нашего стека.

Мы используем график js и реактивный график js -2 для отображения графика на странице. Мы также используем Tailwind CSS для нашего стиля.

Вот компонент для графика, который мы визуализируем: 

import React from 'react'
import { Line } from 'react-chartjs-2';

const Graph = (props) => {

    const weightData = () => {
        let weightArr = []
        props.data.map((record) => {
        weightArr.push(record.current_weight)
    })
    return weightArr;
};

    const weightLabels = () => { 
        let weightArr = []
        props.data.map((record) => {
        weightArr.push(formatDate(record.date))
    })
    return weightArr;
};

    const weightObj = {
        labels: weightLabels(),
        weights: weightData()
    }

    const graphData = {
        datasets:
            [{
                labels: weightObj.labels,
                data: weightObj.weights,
                label: 'Weight'
            }]
    }

    const graphOptions = {
        layout: {
            padding: 50
        },

        maintainAspectRatio: false,

        title: {
            display: true,
            text: 'Your Progress'
        },

        scales: {
            yAxes: {
                ticks: {
                    min: 100,
                    max: 300
                }
            },

            xAxes: [{
                type: 'category',
                labels: graphData.datasets[0].labels
            }]
        }
    }

    return (
        <div>
            <Line 
                data={graphData}
                options={graphOptions}
            />
        </div>
    )
}

export default Graph;

Вот что Я получаю локально, когда визуализируем компонент диаграммы:

Ignore the reversed dates on the x-axis

Мне удалось уменьшить диаграмму до нужного размера, нацелив ее на chartjs-render-monitor, который График js отображается на странице. Единственный способ заставить его работать - это поместить CSS непосредственно в файл стилей. css. 

canvas.chartjs-render-monitor {
  width: 100% !important;
  height: 75vh !important;
}

Однако, когда мы развернули в Heroku, мы обнаружили, что стиль CSS в наши стили. css файл не включается. По крайней мере, эти стили для графа. Графический компонент в реальном приложении выглядит так:

enter image description here

Все классы Tailwind должны быть просто скомпилированы в обычный CSS. Я не уверен, что из-за того, как работает диаграмма js, наша CSS переопределяется. Мне трудно диагностировать проблему.

Я нашел несколько шаблонов, которые используют Tailwind и диаграмму js здесь: https://www.tailwindtoolbox.com/templates/admin-template-day

Я попытался пройти в undefined в качестве значений ширины и высоты для графика, как это сделано в примере шаблона:

<canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>

Но, похоже, это ни на что не повлияло.

Есть что-то простое, чего мне не хватает? Есть ли лучший способ, которым я могу сделать этот график? Я надеюсь, что кто-то может указать мне правильное направление. Любая помощь будет принята с благодарностью.

...