Long render time when submitting multiple "highlight" dates

[Janne6565]

Hi, in my (react) application i use a cal-heatmap with this config:

const { list: data, dict } = calculateData();

    const clickListener = (date: string) => {
      setSelectedDate(date);
      setPerformanceRecordingViewModalOpen(true);
    };

    const options = {
      data: {
        source: data,
        x: "date",
        y: "value",
      },
      date: {
        start: new Date(dayjs().year() + "-01-01"),
        max: new Date(),
        locale: i18n.language,
        highlight: getAllDatesBetween(
          new Date(dayjs().year() + "-01-01"),
          new Date(),
        ),
      },
      range: 12,
      scale: {
        color: {
          type: "threshold",
          range:
            colorScheme == "dark"
              ? ["#14432a", "#166b34", "#37a446", "#4dd05a"]
              : ["#14432a", "#166b34", "#37a446", "#4dd05a"].reverse(),
          domain: [1, 2, 5],
        },
      },
      domain: {
        type: "month",
        label: { format: "%Y-%m" },
      },
      theme: colorScheme ?? "red",
      subDomain: { type: "day", radius: 2 },
      animationDuration: 0,
    };

    const plugins = [
      [
        Tooltip,
        {
          // @ts-expect-error hihi library doesnt support types correctly
          text: function (date, value, dayjsDate) {
            const key = dayjsDate.format("YYYY-MM-DD");
            const values =
              key in dict
                ? dict[key]
                : {
                    countsPerMedal: {
                      [Medals.GOLD]: 0,
                      [Medals.SILVER]: 0,
                      [Medals.BRONZE]: 0,
                    },
                  };
            return (
              (!value
                ? t("components.athleteActivityChart.tooltipText.noData") + " "
                : value +
                  t(
                    "components.athleteActivityChart.tooltipText.data." +
                      (value > 1 ? "plural" : "singular"),
                  )) +
              (value > 1
                ? "<br>" +
                  Object.keys(values.countsPerMedal)
                    .map((medal) => {
                      const value =
                        values.countsPerMedal[
                          medal as Medals.GOLD | Medals.SILVER | Medals.BRONZE
                        ];
                      if (medal == Medals.NONE) {
                        return undefined;
                      }
                      return value == 0
                        ? ""
                        : t("medals." + medal) + ": " + value;
                    })
                    .filter((i) => i != undefined && i != "")
                    .join("<br>") +
                  "<br>"
                : "") +
              t("generic.date.on") +
              " " +
              dayjsDate.format("LL")
            );
          },
        },
      ],
    ];

and i have the problem that as soon as i put multiple dates into the "highlight" array the application gets realy slow, in my case i use the highlight option to display all dates which lie in the past so i need to display up to 365 dates highlighted but this makes the render time of the calchart (the call duration of the .paint() methode) super long, is it possible that the lookup of the dates can be optimized or am i doing something wrong?

[Janne6565]

(the render time without the highlight is below 500ms i would say and after that its like 5 seconds)