Plotly js, xAxis time series 빈 데이터 제거. aka 휴일 제거

Plotly, 많이 사용하는 차트 라이브러리. d3를 이용하여 다양한 차트와 다양한 언어를 제공한다.
문서도 잘 정리되어있다

 

 

 

일별 매출을 차트로  표시하고 싶은데, 주말에는 휴일이 아닌가 ?

 

 

불편. 너의 빈 공간을 격하게 채워주고 싶다

 

layout-xaxis-rangebreaks

Layout.xaxis

 

xaxis 속성인 rangebreaks 를 설정하면 된다

rangebreaks 속성 중 pattern 도 있긴한데, 우리나라 공휴일은 보장되지 않으니 X axis array 의 첫 번째(start) 와 마지막 (end) 까지 체크하여 y 값이 없는 경우 제외 시키기로 한다

// dates 는 x axis array

const to = moment(dates[dates.length - 1]);
let next = moment(dates[0]);
if (to.isValid() && next.isValid()) {
    const excludeMap = {};
    while (next.diff(to, "day") <= 0) {
        excludeMap[next.format("YYYY-MM-DD")] = next.format("YYYY-MM-DD");
        next = next.add(1, "day");
    }
    dates.forEach((e: string) => {
        const date = moment(e).format("YYYY-MM-DD");
        if (excludeMap[date]) {
            delete excludeMap[date];
        } else {
            excludeMap[date] = e;
        }
    });
    const excludeDates = Object.values(excludeMap);
    layout.xaxis.rangebreaks = [
        {
            values: excludeDates,
        },
    ];
}

 

 

 마음이 편안해졌다