Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#1258] Chart > Tip > Size 관련 옵션 추가 #1260

Merged
merged 4 commits into from
Aug 12, 2022
Merged

[#1258] Chart > Tip > Size 관련 옵션 추가 #1260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f526996
[#1258] Chart > Tip > Size 관련 옵션 추가
hyeonbbang Aug 11, 2022
00cc9d9
[#1258] Chart Description 칸 정리
hyeonbbang Aug 11, 2022
32c96fe
[#1258] tipStyle 객체로 관련 옵션 통합
hyeonbbang Aug 11, 2022
0c3bb8b
[#1258] Chart > Example TipStyle 변경
hyeonbbang Aug 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions docs/views/barChart/api/barChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,23 +303,46 @@ const chartOptions = {
| fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | |
| showIndicator | Boolean | false | indicator 표시 여부 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정

##### etc.
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
* 3.4 버전부터 없어지는 옵션입니다.

#### selectItem
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- |---------------------------------------------------| ----------|
| use | Boolean | false | 차트 아이템 선택 기능 | |
| useClick | Boolean | true | 클릭 이벤트 사용 여부 (v-model에 바인딩한 변수로만 컨트롤 하려 할때 false) | |
| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | |
| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label |
| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | |
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | |
| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | |
| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label |
| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | |
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상 | |
| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정

##### etc.
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
* 3.4 버전부터 없어지는 옵션입니다.

##### tipStyle
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| height | Number | 20 | tip 높이 | |
| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
| fontSize | Number | 14 | tip 폰트 크기 | |
| fontFamily | String | 'Roboto' | tip 폰트 | |
| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 |


#### selectLabel
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand Down
8 changes: 6 additions & 2 deletions docs/views/barChart/example/Event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,16 @@
selectItem: {
use: true,
showTextTip: true,
tipBackground: '#FF00FF',
tipStyle: {
background: '#FF00FF',
},
},
maxTip: {
use: true,
showTextTip: true,
tipBackground: '#FF0000',
tipStyle: {
background: '#FF0000',
},
},
};

Expand Down
16 changes: 12 additions & 4 deletions docs/views/barChart/example/SelectLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,9 @@ export default {
maxTip: {
use: true,
showTextTip: true,
tipBackground: '#FF0000',
tipStyle: {
background: '#FF0000',
},
},
});
const chartOptions2 = ref({
Expand Down Expand Up @@ -217,7 +219,9 @@ export default {
maxTip: {
use: true,
showTextTip: true,
tipBackground: '#FF0000',
tipStyle: {
background: '#FF0000',
},
},
});
const chartOptions3 = ref({
Expand Down Expand Up @@ -261,7 +265,9 @@ export default {
maxTip: {
use: true,
showTextTip: true,
tipBackground: '#FF0000',
tipStyle: {
background: '#FF0000',
},
},
});
const chartOptions4 = ref({
Expand Down Expand Up @@ -305,7 +311,9 @@ export default {
maxTip: {
use: true,
showTextTip: true,
tipBackground: '#FF0000',
tipStyle: {
background: '#FF0000',
},
},
});

Expand Down
6 changes: 4 additions & 2 deletions docs/views/barChart/example/Time.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,10 @@
}],
maxTip: {
use: true,
tipBackground: '#DBDBDB',
tipTextColor: '#000000',
tipStyle: {
background: '#DBDBDB',
textColor: '#000000',
},
},
};

Expand Down
41 changes: 31 additions & 10 deletions docs/views/lineChart/api/lineChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,23 +271,45 @@ const chartOptions = {
| fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | |
| showIndicator | Boolean | false | indicator 표시 여부 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정

##### etc.
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
* 3.4 버전부터 없어지는 옵션입니다.

#### selectItem
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
|---------------------| ---- |-----------|---------------------------------------------------| ----------|
| use | Boolean | false | 차트 아이템 선택 기능 | |
| useClick | Boolean | true | 클릭 이벤트 사용 여부 (v-model에 바인딩한 변수로만 컨트롤 하려 할때 false) | |
| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | |
| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label |
| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | |
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | |
| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부 | |
| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값 | 'value', 'label |
| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부 | |
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정

##### etc.
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
* 3.4 버전부터 없어지는 옵션입니다.

##### tipStyle
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| height | Number | 20 | tip 높이 | |
| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
| fontSize | Number | 14 | tip 폰트 크기 | |
| fontFamily | String | 'Roboto' | tip 폰트 | |
| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 |

#### selectLabel
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand Down Expand Up @@ -319,7 +341,6 @@ const chartOptions = {
| fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
| opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |


### 6. resize-timeout
- Default : 0
- debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행
Expand Down
4 changes: 3 additions & 1 deletion docs/views/lineChart/example/Event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,9 @@
},
maxTip: {
use: true,
tipBackground: '#FF00FF',
tipStyle: {
background: '#FF00FF',
},
},
};

Expand Down
6 changes: 4 additions & 2 deletions docs/views/lineChart/example/Fill.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,10 @@
use: true,
showIndicator: true,
indicatorColor: '#FF0000',
tipBackground: '#000000',
tipTextColor: '#FFFFFF',
tipStyle: {
background: '#000000',
textColor: '#FFFFFF',
},
},
};

Expand Down
20 changes: 18 additions & 2 deletions docs/views/scatterChart/api/scatterChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,26 @@ const chartOptions = {
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | |
| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정
| useSeriesOpacity | Boolean | false | 선택한 항목을 제외한 나머지 항목들에 반투명 효과 적용 여부 | |

##### etc.
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
* 3.4 버전부터 없어지는 옵션입니다.

##### tipStyle
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| ------ | ------ | ---- | -----| --------- |
| height | Number | 20 | tip 높이 | |
| background | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| textColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |
| fontSize | Number | 14 | tip 폰트 크기 | |
| fontFamily | String | 'Roboto' | tip 폰트 | |
| fontWeight | Number | 400 | tip 폰트 굵기 | 100, 200, 300, ... 900 |

### 4. resize-timeout
- Default : 0
- debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행
Expand Down
24 changes: 16 additions & 8 deletions src/components/chart/element/element.tip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,8 +366,14 @@ const modules = {
const { dp, value, text, opt, type, tipType, isSamePos, seriesOpt } = param;

const arrowSize = 4;
const maxTipHeight = 20;
const borderRadius = 4;
const {
fontSize,
fontFamily,
fontWeight,
height: maxTipHeight,
} = opt.tipStyle;
const textStyle = `normal normal ${fontWeight} ${fontSize}px ${fontFamily}`;

let offset = 1;
if (type === 'line') {
Expand Down Expand Up @@ -400,7 +406,7 @@ const modules = {
let maxTipType = 'center';

ctx.save();
ctx.font = 'normal normal bold 14px Roboto';
ctx.font = textStyle;
const maxTipWidth = Math.round(Math.max(ctx.measureText(text).width + 12, 40));

if (!isHorizontal) {
Expand All @@ -427,6 +433,7 @@ const modules = {
arrowSize,
borderRadius,
text,
textStyle,
});
}

Expand All @@ -449,7 +456,8 @@ const modules = {
*/
showTextTip(param) {
const isHorizontal = !!this.options.horizontal;
const { type, width, height, x, y, arrowSize, borderRadius, text, opt } = param;
const { type, width, height, x, y, arrowSize, borderRadius, text, opt, textStyle } = param;

const ctx = param.context;

const sx = x - (width / 2);
Expand All @@ -458,9 +466,9 @@ const modules = {
const ey = y;

ctx.save();
ctx.font = 'normal normal bold 14px Roboto';
ctx.font = textStyle;

ctx.fillStyle = opt.tipBackground;
ctx.fillStyle = opt.tipBackground ?? opt.tipStyle.background;
ctx.shadowBlur = 0;

ctx.beginPath();
Expand Down Expand Up @@ -499,8 +507,8 @@ const modules = {
ctx.fill();
ctx.restore();
ctx.save();
ctx.font = 'normal normal bold 14px Roboto';
ctx.fillStyle = opt.tipTextColor;
ctx.font = textStyle;
ctx.fillStyle = opt.tipTextColor ?? opt.tipStyle.textColor;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText(`${text}`, x, sy + (height / 2));
Expand All @@ -521,7 +529,7 @@ const modules = {
const cy = y - offset;
ctx.save();

ctx.fillStyle = opt.tipBackground;
ctx.fillStyle = opt.tipBackground ?? opt.tipStyle.background;
kdeun1 marked this conversation as resolved.
Show resolved Hide resolved
ctx.beginPath();
ctx.moveTo(x, cy);
if (isHorizontal) {
Expand Down
20 changes: 16 additions & 4 deletions src/components/chart/uses.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,14 @@ const DEFAULT_OPTIONS = {
fixedPosTop: false,
showIndicator: false,
indicatorColor: '#000000',
tipBackground: '#000000',
tipTextColor: '#FFFFFF',
tipStyle: {
height: 20,
background: '#000000',
textColor: '#FFFFFF',
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: 400,
},
},
selectItem: {
use: false,
Expand All @@ -111,8 +117,14 @@ const DEFAULT_OPTIONS = {
fixedPosTop: false,
useApproximateValue: false,
indicatorColor: '#000000',
tipBackground: '#000000',
tipTextColor: '#FFFFFF',
tipStyle: {
height: 20,
background: '#000000',
textColor: '#FFFFFF',
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: 400,
},
useSeriesOpacity: false,
},
selectLabel: {
Expand Down