recharts - изменить диапазон xAxis по нажатию кнопки - PullRequest
Новая
       12

recharts - изменить диапазон xAxis по нажатию кнопки

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

У меня есть этот график внизу, и я ищу возможность изменить неделю / месяц, показанные нажатием кнопки. По сути, это похоже на функциональность <Brush />, но это не то, что мне нужно. Я думал о разделении массива данных по дате или использовании функций moment.js для добавления или вычитания недели / месяца, но я чувствую, что может быть лучший и более элегантный способ сделать это. Может кто сталкивался с чем-то подобным?

My graph

            <BarChart
                data={takeRight(
                  this.state.realCompletion,
                  this.state.Limit
                )}
                margin={{ top: 15, right: 30, left: 15, bottom: 15 }}
              >
                <p>
                  {this.state.realCompletion} - {this.state.exercisesLimit}
                </p>
                <CartesianGrid stroke="#9b9b9b" vertical={false} />
                <XAxis interval={7} dataKey="Day">
                  <Label
                    position="insideBottomLeft"
                    offset={-10}
                    style={{
                      textAnchor: "start",
                      fontFamily: "WorkSans",
                      fontSize: "16px",
                      fontWeight: 600,
                      color: "#4a4a4a",
                    }}
                  >
                    {rangeStart
                      ? moment(rangeStart.Moment).format("MMM")
                      : "Loading"}
                  </Label>
                </XAxis>
                <YAxis interval={5}>
                  <Label
                    angle={-90}
                    position="left"
                    offset={-20}
                    style={{
                      textAnchor: "middle",
                      fontFamily: "Arimo",
                      fontStyle: "italic",
                      fontSize: "14px",
                      color: "#4a4a4a",
                    }}
                  >
                    Sales
                  </Label>
                </YAxis>
                <Tooltip />
                <Bar
                  dataKey="Completed"
                  stackId="a"
                  fill="rgba(247, 147, 29, 1)"
                />
                <Bar
                  dataKey="Remaining"
                  stackId="a"
                  fill="rgba(247, 147, 29, 0.4)"
                />
              </BarChart>
...