Графики ReactJS / Nivo - Как изменить ось X в порядке возрастания даты, когда данные содержат «неполные» данные?

Question

Вопрос: Как я могу «переформатировать» ось X, чтобы она находилась в возрастающей дате, когда данные содержат переменное количество дат внутри нее?

У меня есть некоторые данные, которые содержит переменные суммы «дата», связанные с ним. Например, первая строка содержит:

{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }

В то время как вторая строка содержит:

{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }

Кодовое поле: https://codesandbox.io/s/dreamy-almeida-x7rnd?fontsize=14&hidenavigation=1&theme=dark

Данные является "неровным" на оси х, поэтому и выглядит странно. Я понимаю, что если бы мне нужно было ввести «фиктивные даты» и данные к ним, то я мог бы продиктовать желаемую форму оси X, проблема заключается в фиктивных датах + данных, потому что тогда он точно не моделирует мои базы данных, поэтому я хочу избежать чего-то подобного.

Пока что я просмотрел документацию, я пытался добавить в формате type: "time" к xscale, но я получение ошибки

v.getTime() не является функцией.

Answer 1

Вы должны добавить format к обоим ResponsiveLine Компонентам и xScale свойству, чтобы использовать шкалу времени

xFormat :

Необязательный форматер для значений х.

Отформатированное значение затем можно использовать для меток и всплывающих подсказок.

Если вы используете шкалу времени, вы должны указать формат времени, поскольку значения преобразуются в объекты Date .

Полная конфигурация: ( Working демо )

import React from "react";
import { ResponsiveLine } from "@nivo/line";

export default function App() {
  return (
    <div style={{ height: 350 }} className="App">
      <ResponsiveLine
        data={[
          {
            id: "LineOne",
            data: [
              { x: "2019-05-01", y: 2 },
              { x: "2019-06-01", y: 7 },
              { x: "2020-03-01", y: 1 }
            ]
          },
          {
            id: "LineTwo",
            data: [
              { x: "2019-05-01", y: 1 },
              { x: "2019-06-01", y: 5 },
              { x: "2020-05-01", y: 5 }
            ]
          },
          {
            id: "LineThree",
            data: [
              { x: "2020-02-01", y: 4 },
              { x: "2020-03-01", y: 6 },
              { x: "2020-04-01", y: 1 }
            ]
          }
        ]}
        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
        xScale={{
          type: "time",
          format: "%Y-%m-%d"
        }}
        xFormat="time:%Y-%m-%d"
        yScale={{
          type: "linear",
          min: "auto",
          max: "auto",
          stacked: false,
          reverse: false
        }}
        axisTop={null}
        axisRight={null}
        axisLeft={{
          orient: "left",
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "count",
          legendOffset: -40,
          legendPosition: "middle"
        }}
        axisBottom={{
          format: "%b %d",
          //tickValues: "every 2 days",
          // tickRotation: -90,
          legend: "time scale",
          legendOffset: -12
        }}
        colors={{ scheme: "nivo" }}
        pointSize={10}
        pointColor={{ theme: "background" }}
        pointBorderWidth={2}
        pointBorderColor={{ from: "serieColor" }}
        pointLabel="y"
        pointLabelYOffset={-12}
        useMesh={true}
        legends={[
          {
            anchor: "bottom-right",
            direction: "column",
            justify: false,
            translateX: 100,
            translateY: 0,
            itemsSpacing: 0,
            itemDirection: "left-to-right",
            itemWidth: 80,
            itemHeight: 20,
            itemOpacity: 0.75,
            symbolSize: 12,
            symbolShape: "circle",
            symbolBorderColor: "rgba(0, 0, 0, .5)",
            effects: [
              {
                on: "hover",
                style: {
                  itemBackground: "rgba(0, 0, 0, .03)",
                  itemOpacity: 1
                }
              }
            ]
          }
        ]}
      />
      )
    </div>
  );
}

Answer 2

изменил следующие вещи и проверил случайным образом (данные не отсортированы)

• xscale type to time в формате
• добавление свойства indexBy = "date" к элементу respiveline

• добавьте формат: "% Y-% m-% d" к основанию вашей оси,

  рабочий пример вы можете найти здесь

https://codesandbox.io/s/laughing-mestorf-zeozb

export default function App()
 { return (
 <div style={{ height: 350 }} className="App">

          <ResponsiveLine

                data={[
                  {
                    id: "LineOne",
                    data: [
                      { x: "2019-05-01", y: 2 },
                      { x: "2019-06-01", y: 7 },
                      { x: "2020-03-01", y: 1 },
                      { x: "2017-09-01", y: 6 }
                    ]
                  },
                  {
                    id: "LineTwo",
                    data: [
                      { x: "2019-05-01", y: 1 },
                      { x: "2019-06-01", y: 5 },
                      { x: "2020-05-01", y: 5 },
                      { x: "2018-09-01", y: 3 }
                    ]
                  },
                  {
                    id: "LineThree",
                    data: [
                      { x: "2020-02-01", y: 4 },
                      { x: "2020-03-01", y: 6 },
                      { x: "2020-04-01", y: 1 }
                    ]
                  }
                ]}
                indexBy="date"
                margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
                xScale={{
                  type: "time",
                  format: "%Y-%m-%d",
                  precision: "day"
                }}
                yScale={{ type: "linear", stacked: false, min: 0, max: "auto" }}
                axisTop={null}
                axisRight={null}
                axisBottom={{
                  orient: "bottom",
                  tickSize: 5,
                  format: "%Y-%m-%d",
                  tickPadding: 5,
                  tickRotation: -65,
                  legend: "time",
                  legendOffset: 40,
                  legendPosition: "middle"
                }}
                axisLeft={{
                  orient: "left",
                  tickSize: 5,
                  tickPadding: 5,
                  tickRotation: 0,
                  legend: "count",
                  legendOffset: -40,
                  legendPosition: "middle"
                }}
                colors={{ scheme: "nivo" }}
                pointSize={10}
                pointColor={{ theme: "background" }}
                pointBorderWidth={2}
                pointBorderColor={{ from: "serieColor" }}
                pointLabel="y"
                pointLabelYOffset={-12}
                useMesh={true}
                legends={[
                  {
                    anchor: "bottom-right",
                    direction: "column",
                    justify: false,
                    translateX: 100,
                    translateY: 0,
                    itemsSpacing: 0,
                    itemDirection: "left-to-right",
                    itemWidth: 80,
                    itemHeight: 20,
                    itemOpacity: 0.75,
                    symbolSize: 12,
                    symbolShape: "circle",
                    symbolBorderColor: "rgba(0, 0, 0, .5)",
                    effects: [
                      {
                        on: "hover",
                        style: {
                          itemBackground: "rgba(0, 0, 0, .03)",
                          itemOpacity: 1
                        }
                      }
                    ]
                  }
                ]}
              />
              )
            </div>
          );
        }