From 14fa7c647c9ea06b99bd7396dd53ec56cfad12de Mon Sep 17 00:00:00 2001 From: jinhee park Date: Fri, 1 Jul 2022 12:03:53 +0900 Subject: [PATCH] =?UTF-8?q?[#1225]=20Chart=20>=20Legend=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20value=20=EA=B4=80=EB=A0=A8=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0(min,=20max,=20avg,=20total,=20last)=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/views/barChart/api/barChart.md | 12 ++++++------ docs/views/lineChart/api/lineChart.md | 12 ++++++------ docs/views/pieChart/api/pieChart.md | 12 ++++++------ src/components/chart/plugins/plugins.legend.js | 8 +++----- src/components/chart/uses.js | 9 ++++++++- 5 files changed, 29 insertions(+), 24 deletions(-) diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md index ed97b2f14..c351cf1e3 100644 --- a/docs/views/barChart/api/barChart.md +++ b/docs/views/barChart/api/barChart.md @@ -250,12 +250,12 @@ const chartData = { | style.row | Object | null | table row의 CSS style | { borderBottom: '1px solid #DBDBDB' } | | style.header | Object | null | table header의 CSS Style | { fontSize: '15px' } | | columns | Object | (아래 각 항목 참고)| | | -| columns.name | Object | { } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| -| columns.min | Object | { use: false } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| -| columns.max | Object | { use: false } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| -| columns.avg | Object | { use: false } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| -| columns.total | Object | { use: false } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| -| columns.last | Object | { use: false } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| +| columns.name | Object | { title: 'Name' } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| +| columns.min | Object | { use: false, title: 'MIN' } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| +| columns.max | Object | { use: false, title: 'MAX' } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| +| columns.avg | Object | { use: false, title: 'AVG' } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| +| columns.total | Object | { use: false, title: 'TOTAL' } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| +| columns.last | Object | { use: false, title: 'LAST' } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| #### tooltip | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md index d86ae1dad..bd6c2b21b 100644 --- a/docs/views/lineChart/api/lineChart.md +++ b/docs/views/lineChart/api/lineChart.md @@ -217,12 +217,12 @@ const chartData = | style.row | Object | null | table row의 CSS style | { borderBottom: '1px solid #DBDBDB' } | | style.header | Object | null | table header의 CSS Style | { fontSize: '15px' } | | columns | Object | (아래 각 항목 참고)| | | -| columns.name | Object | { } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| -| columns.min | Object | { use: false } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| -| columns.max | Object | { use: false } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| -| columns.avg | Object | { use: false } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| -| columns.total | Object | { use: false } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| -| columns.last | Object | { use: false } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| +| columns.name | Object | { title: 'Name' } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| +| columns.min | Object | { use: false, title: 'MIN' } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| +| columns.max | Object | { use: false, title: 'MAX' } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| +| columns.avg | Object | { use: false, title: 'AVG' } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| +| columns.total | Object | { use: false, title: 'TOTAL' } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| +| columns.last | Object | { use: false, title: 'LAST' } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| #### tooltip diff --git a/docs/views/pieChart/api/pieChart.md b/docs/views/pieChart/api/pieChart.md index c21a818ab..1a7d436a7 100644 --- a/docs/views/pieChart/api/pieChart.md +++ b/docs/views/pieChart/api/pieChart.md @@ -102,12 +102,12 @@ const chartData = | style.row | Object | null | table row의 CSS style | { borderBottom: '1px solid #DBDBDB' } | | style.header | Object | null | table header의 CSS Style | { fontSize: '15px' } | | columns | Object | (아래 각 항목 참고)| | | -| columns.name | Object | { } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| -| columns.min | Object | { use: false } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| -| columns.max | Object | { use: false } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| -| columns.avg | Object | { use: false } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| -| columns.total | Object | { use: false } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| -| columns.last | Object | { use: false } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| +| columns.name | Object | { title: 'Name' } | Series Name 표시 관련 옵션 | { title: '시리즈명', style: {...} }| +| columns.min | Object | { use: false, title: 'MIN' } | Minimum Value 표시 관련 옵션 | { use: true, title: '최솟값', style: {...}, formatter: (v) => `${v.toFixed(2)}` }| +| columns.max | Object | { use: false, title: 'MAX' } | Maximum Value 표시 관련 옵션 | { use: true, title: '최댓값', style: {...}, decimalPoint: 2 }| +| columns.avg | Object | { use: false, title: 'AVG' } | Average Value 표시 관련 옵션 | { use: true, title: '평균', style: {...}, decimalPoint: 2 }| +| columns.total | Object | { use: false, title: 'TOTAL' } | Total Value 표시 관련 옵션 | { use: true, title: '합계', style: {...}, decimalPoint: 2 }| +| columns.last | Object | { use: false, title: 'LAST' } | Last Value 표시 관련 옵션 | { use: true, title: 'Current', style: {...}, decimalPoint: 2 }| #### tooltip | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | diff --git a/src/components/chart/plugins/plugins.legend.js b/src/components/chart/plugins/plugins.legend.js index 1b8c4d052..4830ae906 100644 --- a/src/components/chart/plugins/plugins.legend.js +++ b/src/components/chart/plugins/plugins.legend.js @@ -41,17 +41,15 @@ const modules = { setLegendColumnHeader() { const tableOpt = this.options.legend?.table; const columns = tableOpt.columns; - const columnKeyList = ['', '', ...Object.keys(columns)]; + const columnKeyList = ['color', ...Object.keys(columns)]; columnKeyList.forEach((key) => { const columnNameDOM = document.createElement('th'); columnNameDOM.className = 'ev-chart-legend--table__column-name'; - if (columns[key]?.use || key === '') { + if (columns[key]?.use || key === 'color' || key === 'name') { const columnOpt = columns[key]; - const keyText = !columnOpt?.title && columnOpt?.title !== '' - ? key.toUpperCase() - : columnOpt.title; + const keyText = columnOpt?.title ?? ''; columnNameDOM.textContent = keyText; columnNameDOM.setAttribute('title', keyText); diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js index af2e1d477..e4c105b40 100644 --- a/src/components/chart/uses.js +++ b/src/components/chart/uses.js @@ -32,20 +32,27 @@ const DEFAULT_OPTIONS = { table: { use: false, columns: { - name: {}, + name: { + title: 'Name', + }, min: { + title: 'MIN', use: false, }, max: { + title: 'MAX', use: false, }, avg: { + title: 'AVG', use: false, }, total: { + title: 'TOTAL', use: false, }, last: { + title: 'LAST', use: false, }, },