ApexCharts ToolBar export csv 설정

apexchart 에서 툴바의 기본 옵션은 이렇다.

 chart: {
      toolbar: {
        show: true,
        offsetX: 0,
        offsetY: 0,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true | '<img src="/static/icons/reset.png" width="20">',
          customIcons: []
        },
        export: {
          csv: {
            filename: undefined,
            columnDelimiter: ',',
            headerCategory: 'category',
            headerValue: 'value',
            dateFormatter(timestamp) {
              return new Date(timestamp).toDateString()
            }
          },
          svg: {
            filename: undefined,
          },
          png: {
            filename: undefined,
          }
        },
        autoSelected: 'zoom' 
      },
  }

여기서 export csv옵션을 바꾸기 위해 조정해야할 부분이 있다.

• filename 은 파일을 export 했을 때, 파일의 이름인데 기본값은 undefined 이므로 파일자체 아이디값이 나온다.

​ string 형식으로 원하는 이름을 지정하면 된다.

• headerCategory 는 열 이름이다. 기본값은 category 로 되어있어 파일을 열면 category 하위에 row 가 쌓인다.

​ 마찬가지로 string 형식으로 원하는 이름을 지정하면 된다.

• dateFormatter(...) 는 시간 포맷이다. 기본값은 new Date(timestamp).toDateString() 로 되어있어 파일을 열면 "Fri Jun 10 2022" 같은 형식으로 들어온다. (parameter 를 그대로 출력하면 "2022-06-09T15:35:00.000Z" 같은 형식으로 나온다.)
• 이를 "YYYY-MM-DD HH:mm:ss" 형식으로 바꾸고 싶어서 moment 도 써보고 replace 로 TZ 를 모두 지우는 식으로도 해봤으나, 콘솔에는 찍히고 csv 파일내에서는 사용자 지정 형식을 쓰지 않으면 제대로 나오지 않았다. 메모장에서는 잘 나왔다.
• 그래서 아래 형식처럼 맞췄더니 다른 지정형식없이 잘나와서 아래 형식으로 지정했다.

csv: {
    filename: `${props..}_${props..}-${props..}`,
        headerCategory: '시간',
            dateFormatter(timestamp) {
            let resultTime = moment(timestamp).utc().format('yyyy년MM월DD일 HH시mm분ss초');
            return resultTime;
        }
}