Блог

Я пытаюсь передать состояние с одной диаграммы на другую страницу. В настоящее время метки находятся в пользовательском формате месяца года, в котором я пытаюсь захватить этот формат месяца года и передать его селектору месяца года на другой странице.

Проблема, с которой я сталкиваюсь, заключается в том, что метки месяца и года находятся в строке полного месяца и ГГГГ {пример: декабрь 2021 года}. Стандартный выбор месяца для JS требует, чтобы даты были в ММ-ГГГГ.

Я попытался сопоставить скрытый набор данных со значениями, которые мне нужны, но я изо всех сил пытаюсь заставить легенду не показывать скрытый набор данных.

Вот моя диаграмма (с использованием фреймворка CoreUI):

 <div className="chart-container">
                    <CChartBar
                    datasets={[
                      {
                        label: 'Expected Expirations',
                        type: 'bar',
                        data: expectedExpirations,
                        backgroundColor: '#949fe8',
                        borderColor: 'blue',
                        fill: true,
                        order: 2,
                      },
                      {
                        label: 'hidden data',
                        display: false,
                        data: dateRaw,
                        },
                      {
                        label: 'Actual Expirations',
                        type: 'bar',
                        data: actualExpirations,
                        backgroundColor: '#556ad1',
                        borderColor: 'blue',
                        fill: true,
                        order: 1,
                      },
                      {
                        label: 'Target Expirations',
                        backgroundColor: '#352c2c',
                        data: targetExpirations,
                        type: 'line',
                        borderColor: 'black',
                        fill: true,
                        order: 0,
                        borderWidth: 2,
                        fill: '#352c2c',
                        pointBackgroundColor: '#352c2c',
                        lineTension: 0,
                      },
                    ]}
                      labels={dateLabels}
                      options={{
                        onClick: (event, activeElements) => {
                          drillDown(event, activeElements)
                        },
                      maintainAspectRatio: false,
                      responsive: true,
                      tooltips: {
                        enabled: true,
                        },
                      scales: {
                        xAxes: [
                          {
                            stacked: true,
                            scaleLabel: {
                              display: true,
                              labelString: 'Month',
                            },
                          },
                        ],
                        yAxes: [
                          {
                            ticks: {
                              stacked: true,
                              beginAtZero: true,
                              stepValue: 10,
                              max: maxOfAllExpirations,
                            },
                            scaleLabel: {
                              display: true,
                              labelString: 'Number of Lease Expirations',
                            },
                          },
                        ],
                      },
                    }}
                  />
                </div>
 

Вот моя функция детализации:

   const drillDown = (event, activeElements) => {
    if (activeElements[1] != undefined) {
      setCurrentYearMonth(activeElements[1]._model)
      inspectLeaseLink.current.click()
    }
  }
 

Функция onClick вызывает детализацию, которая щелкает по скрытой ссылке:

                     <Link
                      ref={inspectLeaseLink}
                      to={{
                        pathname: '/inspect-lease-expirations',
                        state: {
                          currentProperty: currentProperty,
                          unitTypeGroups: currentUnitTypeGroup,
                          date: currentYearMonth
                        }
                      }}
                      hidden
                    >
                    </Link>
 

Is there either an easy way to get the label into that MM-YYYY format, or even better, a way to pass data to the next page for each mapped bar with a hidden dataset that doesn’t actually show on the graph?