Skip to content

Commit

Permalink
[#1225] Chart > Legend 영역 value 관련 데이터(min, max, avg, total, last) 표시…
Browse files Browse the repository at this point in the history 
… 옵션 추가
  • Loading branch information
@jhee564
jhee564 committed Jul 1, 2022
1 parent 3528a92 commit 14fa7c6
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 24 deletions.
12 changes: 6 additions & 6 deletions docs/views/barChart/api/barChart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand Down
12 changes: 6 additions & 6 deletions docs/views/lineChart/api/lineChart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions docs/views/pieChart/api/pieChart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand Down
8 changes: 3 additions & 5 deletions src/components/chart/plugins/plugins.legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
9 changes: 8 additions & 1 deletion src/components/chart/uses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
Expand Down

0 comments on commit 14fa7c6

Please sign in to comment.