Recharts: allowDuplicatedCategories breaks Подсказка - PullRequest
Новая
       44

Recharts: allowDuplicatedCategories breaks Подсказка

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

У меня есть диаграмма, которая перерисовывает aws линий на основе фильтров состояния React. По умолчанию всплывающая подсказка появляется и работает для всех точек на линии, но как только я меняю состояние, выбирая другой фильтр, всплывающая подсказка больше не появляется. Изменение allowDuplicatedCatories={true} устраняет проблему, но тогда всплывающая подсказка появляется не во всех точках, поскольку есть повторяющиеся категории. Есть ли способ обойти этот флаг как ложный, но показывать всплывающую подсказку в каждой строке без полной реструктуризации формата данных?

Соответствующий код: Примечание: dataKeys - это массив ключей, которые генерируются, когда пользователь выбирает комбинацию фильтров. 

<ComposedChart data={chartData}>
                <XAxis
                  label={{
                    value: "Date",
                    position: "bottom",
                    dy: 10,
                    fontSize: 16,
                  }}
                  tickFormatter={(tick) => {
                    const parts = tick.split("-");
                    return `${this.tickLabels[parts[1]]}/${parts[2]}`;
                  }}
                  dy={10}
                  dataKey="date"
                  tick={{ fontSize: 12 }}
                  padding={{ left: 20, right: 20 }}
                  interval="preserveStartEnd"
                  allowDuplicatedCategory={false}
                />
                <CartesianGrid stroke="#f5f5f5" />
                <Tooltip
                  cursor={{ stroke: "#4c5b5f", strokeWidth: 1 }}
                  formatter={(value) => Math.round(value)}
                />
                {dataKeys.map((key, i) => (
                  <Line
                    name={`${
                      (this.legendLabels[key] || key).split(`|`)[0]
                    }, ${key.split(`|`)[1]} (Mean)`}
                    type="monotone"
                    dataKey={`amt_${key}`}
                    connectNulls
                    dot={false}
                  />
                ))}
              </ComposedChart>
...