[#1372] Bar Chart > useSeriesOpacity 옵션 추가

docs/views/barChart/api/barChart.md

@@ -320,18 +320,19 @@ const chartOptions = {
 * 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 색상 | |
-| tipStyle | Object | ([상세](#tipstyle)) | tip 스타일을 설정
+| 이름                  | 타입                          | 디폴트               | 설명                                                | 종류(예시) |
+|---------------------|-----------------------------|-------------------|---------------------------------------------------| ----------|
+| 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 색상                                      | |
+| useSeriesOpacity    | Boolean                     | false             | 선택된 항목 외 다른 항목들의 색상을 반투명하게 처리할지의 여부               | |
+| tipStyle            | Object                      | ([상세](#tipstyle)) | tip 스타일을 설정                                       
 
 ##### etc.
 | 이름    | 타입   | 디폴트 | 설명 | 종류(예시) |

docs/views/barChart/example/Event.vue

@@ -10,10 +10,25 @@
     />
     <div class="description">
       <ev-button
-        @click="toggleSelectData">
+          @click="toggleSelectData">
         select toggle 1 - 2
       </ev-button>
       <br><br>
+      <div class="badge yellow">
+        useSeriesOpacity
+      </div>
+      <ev-toggle v-model="useSeriesOpacity"/>
+      <br><br>
+      <div class="badge yellow">
+        showTextTip
+      </div>
+      <ev-toggle v-model="showTextTip"/>
+      <br><br>
+      <div class="badge yellow">
+        useMaxTip
+      </div>
+      <ev-toggle v-model="useMaxTip"/>
+      <br><br>
       <div>
         <div class="badge yellow">
           기본 선택값 v-model
@@ -35,7 +50,7 @@
 </template>
 
 <script>
-  import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 
   export default {
     setup() {
@@ -53,7 +68,10 @@
         },
       };
 
-      const chartOptions = {
+      const useSeriesOpacity = ref(true);
+      const showTextTip = ref(false);
+      const useMaxTip = ref(false);
+      const chartOptions = reactive({
         type: 'bar',
         thickness: 0.8,
         width: '100%',
@@ -82,20 +100,21 @@
         }],
         selectItem: {
           use: true,
-          showTextTip: true,
+          showTextTip,
           tipStyle: {
             background: '#FF00FF',
           },
           useDeselectItem: true,
+          useSeriesOpacity,
         },
         maxTip: {
-          use: true,
+          use: useMaxTip,
           showTextTip: true,
           tipStyle: {
             background: '#FF0000',
           },
         },
-      };
+      });
 
       const clickedLabel = ref("''");
       const onClick = (target) => {
@@ -124,6 +143,9 @@
         clickedLabel,
         dblClickedLabel,
         defaultSelectItem,
+        useSeriesOpacity,
+        showTextTip,
+        useMaxTip,
         onClick,
         onDblClick,
         toggleSelectData,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.54",
+  "version": "3.3.55",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

src/components/chart/element/element.bar.js

@@ -142,13 +142,25 @@ class Bar {
 
       const legendHitInfo = param?.legendHitInfo;
       const selectLabelOption = param?.selectLabel?.option;
+      const selectItemOption = param?.selectItem?.option;
       const selectedLabelList = param?.selectLabel?.selected?.dataIndex ?? [];
+      const {
+        dataIndex: selectedItemDataIndex,
+        seriesID: selectedItemSeriesId,
+      } = param?.selectItem?.selected ?? {};
+
       let isDownplay = false;
 
       if (legendHitInfo) {
         isDownplay = legendHitInfo?.sId !== this.sId;
       } else if (selectLabelOption?.use && selectLabelOption?.useSeriesOpacity) {
         isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
+      } else if (truthy(selectedItemDataIndex) && selectItemOption?.useSeriesOpacity) {
+        if (this.isExistGrp) {
+          isDownplay = selectedItemDataIndex !== index;
+        } else {
+          isDownplay = selectedItemDataIndex !== index || selectedItemSeriesId !== this.sId;
+        }
       }
 
       if (typeof barColor !== 'string') {