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

[#805] [3.0] Bar Chart 그라데이션 값 rgba 지원 #811

Merged
merged 2 commits into from
May 10, 2021
Merged

[#805] [3.0] Bar Chart 그라데이션 값 rgba 지원 #811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f15f02
[#805][3.0] Bar Chart 그라데이션 값 rgba 지원
jhee564 May 3, 2021
5ec6776
[#805][3.0] Bar Chart 그라데이션 값 rgba 지원
jhee564 May 4, 2021
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
35 changes: 18 additions & 17 deletions docs/views/barChart/api/barChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,18 @@
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 | |
| type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
| color | String or Object | COLOR[index] | 특정 색상을 지정하지 않으면 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| color | Hex, RGB, RGBA Code(String) or Object | COLOR[index] | 특정 색상을 지정하지 않으면 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| showValue | Object | ([상세](#showvalue)) | 막대 위에 값 표시 여부 및 속성 | |

#### color Example
```
const chartData = {
series: {
series1: { name: 'series#1' }, // 기본 색상으로 자동 할당
series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정
series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정 (hex)
series3: { name: 'series#2', color: 'rgba(255, 165, 0, 1)' }, // 특정 색상 지정 (rgb)
series4: { name: 'series#3', color: [[0, 'rgba(255, 165, 0, 0.4)'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
series5: { name: 'series#3', color: [[], [1, 'rgba(255, 165, 0, 1)']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
},
... 생략
}
Expand All @@ -43,7 +44,7 @@ const chartData = {
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | false | data label 표시 여부 | true /false |
| fontColor | HexCode(String) | '#000000' | 글자 색상 | |
| fontColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상 | |
| fontSize | Number | 12 | 글자 크기 | |
| align | String | 'end' | tooltip 테두리 색상 | 'start', 'center', 'end', 'out' |

Expand Down Expand Up @@ -128,7 +129,7 @@ const chartData = {
| 이름 | 타입 | 디폴트 | 설명 |
|-----|------|-------|-----|
| fontSize | Number | 12 | 글자 크기 |
| color | HexCode (String) | '#25262E' | 글자 색상 |
| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
| fontFamily | String | 'Roboto' | 폰트 |
| fitWidth | Boolean | false | Label Text Ellipsis 처리 |
| fitDir | String | 'right' | Ellipsis 방향 |
Expand All @@ -141,25 +142,25 @@ const chartData = {
| text | String | '' | 타이틀 | |
| style | Object | | 타이틀 폰트 스타일 | |
| style.fontSize | Number | 15 | 글자 크기 | |
| style.color | HexCode(String) | '#000' | 글자 색상 | |
| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | |
| style.fontFamily | String | 'Roboto' | 글자체 | |

#### legend
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| show | Boolean | false | Legend 표시 여부 | true /false |
| position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
| color | HexCode(String) | '#353740' | 폰트 색상 | |
| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | |
| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | |
| height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | |

#### tooltip
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | tooltip 표시 여부 | true /false |
| backgroundColor | HexCode(String) | '#4C4C4C' | tooltip 배경 색상 | |
| borderColor | HexCode(String) | '#666666' | tooltip 테두리 색상 | |
| backgroundColor | Hex, RGB, RGBA Code(String) | '#4C4C4C' | tooltip 배경 색상 | |
| borderColor | Hex, RGB, RGBA Code(String) | '#666666' | tooltip 테두리 색상 | |
| useShadow | Boolean | false | 그림자 사용 여부 | |
| shadowOpacity | Number | 0.25 | 그림자 투명도 | |
| throttledMove | Boolean | false | 데이터 조회 Throttling 처리 유무 | |
Expand All @@ -185,9 +186,9 @@ const chartData = {
| use | Boolean | true | maxTip 표시 여부 | |
| fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | |
| showIndicator | Boolean | false | indicator 표시 여부 | |
| indicatorColor | HexCode(String) | '#000000' | indicator 색상 | |
| tipBackground | HexCode(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | HexCode(String) | '#FFFFFF' | maxTip 글자 색상 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |

#### selectItem
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand All @@ -198,9 +199,9 @@ const chartData = {
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | HexCode(String) | '#000000' | indicator 색상 | |
| tipBackground | HexCode(String) | '#000000' | tip 배경색상 | |
| tipTextColor | HexCode(String) | '#FFFFFF' | tip 글자 색상 | |
| indicatorColor | Hex, RGB, RGBA Code(String)| '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | |

>### Event
| 이름 | 파라미터 | 설명 |
Expand Down
4 changes: 2 additions & 2 deletions docs/views/barChart/example/Gradient.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
series: {
series1: { name: 'series#1' }, // 기본 색상
series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상
series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
series3: { name: 'series#3', color: [[0, '#FF6767'], [0.5, '#FFD1B9'], [1, '#FF9A67']] }, // 특정 색상으로 그라데이션
series4: { name: 'series#4', color: [[], [1, 'rgba(255, 239, 35, 0.5)']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
},
labels: ['value1', 'value2', 'value3', 'value5', 'value5'],
data: {
Expand Down
34 changes: 18 additions & 16 deletions docs/views/lineChart/api/lineChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,19 @@
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 | |
| type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
| color | String | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| point | Boolean | true | 선(line) 위에 값 위치 마다 점을 표시할지의 여부 | |
| fill | Boolean | false | 선(line) 아래 부분의 영역에 색상을 채울지의 여부. area chart 전환 여부 | |
| color | Hex, RGB, RGBA Code(String) | COLOR[index] | Line 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| pointFill | Hex, RGB, RGBA Code(String) | COLOR[index] | Point 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| fillColor | Hex, RGB, RGBA Code(String) | COLOR[index] | Fill 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |

#### data example
```
const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
const chartData =
series: {
series1: { name: 'series1', point: false, fill: true },
series2: { name: 'series2', point: true, fill: false },
series1: { name: 'series1', point: false, fill: true, color: '#FF00Ff', fillColor: '#FF0000' },
series2: { name: 'series2', point: true, fill: false, pointFill: '#FF0000' },
},
data: {
series1: [1, 2, 3, 4],
Expand Down Expand Up @@ -90,7 +92,7 @@ const chartData =
| 이름 | 타입 | 디폴트 | 설명 |
|-----|------|-------|-----|
| fontSize | Number | 12 | 글자 크기 |
| color | HexCode (String) | '#25262E' | 글자 색상 |
| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
| fontFamily | String | 'Roboto' | 폰트 |
| fitWidth | Boolean | false | Label Text Ellipsis 처리 |
| fitDir | String | 'right' | Ellipsis 방향 |
Expand All @@ -103,25 +105,25 @@ const chartData =
| text | String | '' | 타이틀 | |
| style | Object | | 타이틀 폰트 스타일 | |
| style.fontSize | Number | 15 | 글자 크기 | |
| style.color | HexCode(String) | '#000' | 글자 색상 | |
| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | |
| style.fontFamily | String | 'Roboto' | 글자체 | |

#### legend
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| show | Boolean | false | Legend 표시 여부 | true /false |
| position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
| color | HexCode(String) | '#353740' | 폰트 색상 | |
| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | |
| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | |
| height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | |

#### tooltip
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | tooltip 표시 여부 | true /false |
| backgroundColor | HexCode(String) | '#4C4C4C' | tooltip 배경 색상 | |
| borderColor | HexCode(String) | '#666666' | tooltip 테두리 색상 | |
| backgroundColor | Hex, RGB, RGBA Code(String) | '#4C4C4C' | tooltip 배경 색상 | |
| borderColor | Hex, RGB, RGBA Code(String) | '#666666' | tooltip 테두리 색상 | |
| useShadow | Boolean | false | 그림자 사용 여부 | |
| shadowOpacity | Number | 0.25 | 그림자 투명도 | |
| throttledMove | Boolean | false | 데이터 조회 Throttling 처리 유무 | |
Expand All @@ -139,17 +141,17 @@ const chartData =
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | indicator 사용 여부 | |
| color | HexCode(String) | '#EE7F44' | 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#EE7F44' | 색상 | |

#### maxTip
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | maxTip 표시 여부 | |
| fixedPosTop | Boolean | false | maxTip 위치를 최대값으로 고정 | |
| showIndicator | Boolean | false | indicator 표시 여부 | |
| indicatorColor | HexCode(String) | '#000000' | indicator 색상 | |
| tipBackground | HexCode(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | HexCode(String) | '#FFFFFF' | maxTip 글자 색상 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | maxTip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | maxTip 글자 색상 | |

#### selectItem
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
Expand All @@ -160,9 +162,9 @@ const chartData =
| showIndicator | Boolean | false | 선택한 label의 indicator 표시 | |
| fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정 | |
| useApproximateValue | Boolean | false | 가까운 label을 선택 | |
| indicatorColor | HexCode(String) | '#000000' | indicator 색상 | |
| tipBackground | HexCode(String) | '#000000' | tip 배경색상 | |
| tipTextColor | HexCode(String) | '#FFFFFF' | tip 글자 색상 | |
| indicatorColor | Hex, RGB, RGBA Code(String) | '#000000' | indicator 색상 | |
| tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상 | |
| tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상 | |

>### Event
| 이름 | 파라미터 | 설명 |
Expand Down
9 changes: 5 additions & 4 deletions docs/views/pieChart/api/pieChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 | |
| type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
| color | Hex, RGB, RGBA Code(String) | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |

#### data example
```
const chartData =
series: {
series1: { name: 'series1' },
series1: { name: 'series1', color: '#FF00FF },
series2: { name: 'series2' },
},
data: {
Expand Down Expand Up @@ -54,16 +55,16 @@ const chartData =
| text | String | '' | 타이틀 | |
| style | Object | | 타이틀 폰트 스타일 | |
| style.fontSize | Number | 15 | 글자 크기 | |
| style.color | HexCode(String) | '#000' | 글자 색상 | |
| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | |
| style.fontFamily | String | 'Roboto' | 글자체 | |

#### legend
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| show | Boolean | false | Legend 표시 여부 | true /false |
| position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
| color | HexCode(String) | '#353740' | 폰트 색상 | |
| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | |
| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | |
| height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | |

Expand Down
15 changes: 8 additions & 7 deletions docs/views/scatterChart/api/scatterChart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 | |
| type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
| color | String | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| color | Hex, RGB, RGBA Code(String) | COLOR[index] | 점(Point) 바깥쪽 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| pointFill | Hex, RGB, RGBA Code(String) | COLOR[index] | 점(Point) 안쪽 색상. 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 | |
| pointSize | Number | 3 | 차트에 표시될 점의 사이즈 | |
| pointStyle | String | 'circle' | 차트에 표시될 점의 모양 | 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line' |

Expand Down Expand Up @@ -89,7 +90,7 @@ const chartData =
| 이름 | 타입 | 디폴트 | 설명 |
|-----|------|-------|-----|
| fontSize | Number | 12 | 글자 크기 |
| color | HexCode (String) | '#25262E' | 글자 색상 |
| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 |
| fontFamily | String | 'Roboto' | 폰트 |
| fitWidth | Boolean | false | Label Text Ellipsis 처리 |
| fitDir | String | 'right' | Ellipsis 방향 |
Expand All @@ -102,32 +103,32 @@ const chartData =
| text | String | '' | 타이틀 | |
| style | Object | | 타이틀 폰트 스타일 | |
| style.fontSize | Number | 15 | 글자 크기 | |
| style.color | HexCode(String) | '#000' | 글자 색상 | |
| style.color | Hex, RGB, RGBA Code(String) | '#000' | 글자 색상 | |
| style.fontFamily | String | 'Roboto' | 글자체 | |

#### legend
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| show | Boolean | false | Legend 표시 여부 | true /false |
| position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
| color | HexCode(String) | '#353740' | 폰트 색상 | |
| inactive | HexCode(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | |
| inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | |
| width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | |
| height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | |

#### indicator
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | indicator 사용 여부 | |
| color | HexCode(String) | '#EE7F44' | 색상 | |
| color | Hex, RGB, RGBA Code(String) | '#EE7F44' | 색상 | |


#### dragSelection
| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
| --- | ---- | ----- | --- | ----------|
| use | Boolean | true | drag-select 사용 여부 | true / false |
| keepDisplay | Boolean | true | 드래그 후 선택영역 유지 여부 | true / false |
| fillColor | HexCode(String) | '#38ACEC' | 선택 영역 색상 | |
| fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
| opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |

### 3. resize-timeout
Expand Down
9 changes: 6 additions & 3 deletions src/components/chart/element/element.bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,18 +132,21 @@ class Bar {
}

const barColor = item.dataColor || this.color;
const opacity = this.state === 'downplay' ? 0.1 : 1;
const isDownplay = this.state === 'downplay';

if (typeof barColor !== 'string') {
ctx.fillStyle = Canvas.createGradient(
ctx,
isHorizontal,
{ x, y, w, h },
barColor,
opacity,
isDownplay,
);
} else {
ctx.fillStyle = `rgba(${Util.hexToRgb(barColor)},${opacity})` || '';
const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
const opacity = isDownplay ? 0.1 : noneDownplayOpacity;

ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
}

this.drawBar({
Expand Down
7 changes: 4 additions & 3 deletions src/components/chart/element/element.bar.time.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ class TimeBar extends Bar {

if (x !== null && y !== null) {
const barColor = item.dataColor || this.color;
const opacity = this.state === 'downplay' ? 0.1 : 1;
const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;

if (typeof barColor !== 'string') {
w = w !== subW ? subW : w;
Expand All @@ -114,10 +115,10 @@ class TimeBar extends Bar {
isHorizontal,
{ x, y, w, h },
barColor,
opacity,
opacity === 0.1,
);
} else {
ctx.fillStyle = `rgba(${Util.hexToRgb(barColor)},${opacity})` || '';
ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
}

this.drawBar({
Expand Down
Loading