Сегодня вышла новая версия v3.13! В этом выпуске представлены 4 новые функции, 2 исправления ошибок и улучшения инструментов.

Для получения подробной информации о выпуске ознакомьтесь с примечаниями к выпуску:
https://github.com/naver/billboard.js/releases/tag/3.13.0

Что нового?

Диаграмма «площадь-шаг-диапазон»

Типы диапазона полезны для визуализации «ранжированных значений» на основе базового значения. В этом выпуске в вариацию будет добавлен новый тип «шага».

Демо: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

Улучшение рендеринга регионов

Чтобы отобразить некоторый диапазон пунктирной линией, используется опция data.regions. Но способ отрисовки пунктирных линий, выполняемый путем объединения нескольких команд пути в виде пунктирных линий, должен быть.

На снимке экрана выше показано, что для рисования пунктирных линий требуется команда с несколькими путями.

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Этот подход вызвал некоторые проблемы с рендерингом (#1, #2), и мы попытались исправить это нативным способом.

Вместо рисования пунктирных линий с помощью команд пути мы перешли к рендерингу с использованием свойства стиля Stroke-Dasharray.

• До: команда пути/ После: штрих-дашаррай

Демо: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

При взаимодействии с масштабированием производительность кадров анимации увеличена с 84 мс → 5 мс!

При обновлении до версии 3.12 вы получите преимущества без каких-либо изменений кода.

legend.format: укажите исходный идентификатор данных
Если указана опция data.names, имена отображаемых данных будут отличаться от исходных имен (id).

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

В этом случае обратный вызов Legend.format получит замененное значение data.names вместо исходного идентификатора.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

В этом выпуске будет предоставлено исходное значение идентификатора с замененными именами.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

Демо: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

обратный вызов bar.width

Раньше в bar.width можно было указать абсолютное значение или значение соотношения. Абсолют не может динамически отражать изменение размера диаграммы, а соотношение может отражать с некоторыми ограничениями.

Способ расчета коэффициента основан на приведенном ниже уравнении.

x Axis tick Interval * ratio

Например, если ширина диаграммы составляет 500 пикселей, а число делений по оси – 5 x, интервал составит примерно 100 пикселей.

В этом случае, если указано bar.ratio=0,5, уравнение будет следующим, а ширина панели составит 49,9 пикселей.

100(exact value is 99.8) * 0.5 = 49.9

Чтобы обеспечить больший контроль над настройкой значения ширины панели, будет улучшена опция bar.width, позволяющая принимать функцию обратного вызова с удобными параметрами.

Демо: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

И еще одно: обновление тестовой среды.

Мы использовали Karma Mocha для нашей тестовой среды, и нам было очень приятно поддерживать стабильность billboard.js.

К сожалению, Karma объявила об прекращении поддержки, и нам пришлось перенести некоторые другие современные среды тестирования, чтобы библиотека оставалась стабильной и соответствовала современной экосистеме.

После небольшого исследования мы решили перейти на vitest. Мы успешно выполнили миграцию в рамках этой версии, и локальное тестирование было улучшено до 63 %!

Подробнее формируйте, оформляйте заказ https://github.com/naver/billboard.js/pull/3866

Закрытие

Это все, что у нас есть для этого выпуска, и спасибо, следите за обновлениями!