오늘 새로운 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)를 발생시켰으며 우리는 이를 기본 방식으로 개선하려고 노력했습니다.

경로 명령으로 점선을 그리는 대신 스트로크-대시 스타일 속성을 사용하여 렌더링하도록 이동했습니다.

• 이전: 경로 명령/이후: 스트로크-대시

데모: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

확대/축소 상호 작용 시 애니메이션 프레임 성능이 84ms에서 개선되었습니다. → 5ms!

3.12로 업데이트하면 코드 변경 없이 혜택을 누릴 수 있습니다.

legend.format: 원본 데이터 ID 제공
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 콜백은 원래 ID 대신 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'
    }
}

이번 릴리스에서는 대체된 이름으로 원래 'id' 값을 제공합니다.

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개인 경우 간격은 대략 100픽셀이 됩니다.

이 경우 bar.ratio=0.5 로 지정하면 수식은 다음과 같게 되며, bar의 너비는 49.9px가 됩니다.

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

폐쇄

이것이 이번 릴리스의 전부입니다. 계속 지켜봐 주셔서 감사합니다!