웹밤바

css, javascript 다중 도넛 그래프

수밤바 — Thu, 9 Mar 2023 12:01:21 +0900

css conic-gradient를 이용한 도넛그래프

아래 블로그를 참고했으며 data추가하여 유동적으로 사용할수 있도록 수정했다

https://guiyomi.tistory.com/66

CSS로 직접 그래프 만들기(bar, donut 그래프) + 애니메이션 효과 추가

보통 웹 개발을 할 때 그래프를 다룰 일이 생기면 라이브러리를 찾아서 사용하곤 했다. 이번에도 라이브러리를 이용하여 도넛 그래프 8개를 2행 4열로 배치하는 화면을 만드는 작업을 하게 됐는

guiyomi.tistory.com

See the Pen 다중 도넛 그래프 by soohyeon (@sooh) on CodePen.

<div class="donut"><span class="donut-desc"></span></div>

    .donut {
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }
    .donut:after {
    	content:'';
        position: absolute;
        top:7%;
        left:7%;
        z-index: 1;
        width: calc(100% - 14%);
        height: calc(100% - 14%);
        border-radius: 50%;
        background: #fff;
    }
    .donut-desc {
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        padding: 20%;
        box-sizing: border-box;
        z-index: 2;
        color: #000;
        font-size: 20px;
    }
    .donut-desc span {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .donut-desc span i {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: attr(data-color);
    }

<script>
    const donutEl = document.querySelector('.donut')
    let total = 0
    let count = 0
    let dCount=0;
    const data = [
        {title : '지하철', percent : 5},
        {title : '버스', percent : 10},
        {title : '자가용', percent : 15},
        {title : '자전거', percent : 20},
        {title : '도보', percent : 25},
    ]
  
    const colorArr = ['skyblue', 'blue', 'pink','deeppink', 'greenyellow', 'green', 'mediumpurple', 'purple', 'violet', 'blueviolet']
    const dataSection = [data[0].percent]
    let descText = ''
    data.forEach((item, index)=>{
        total += item.percent
        if (index !== 0) dataSection.push(item.percent + dataSection[dataSection.length-1]) // 순차적으로 더하기
        descText += `<span><i style="background-color:${colorArr[index*2+1]}"></i>${item.title} : ${item.percent} </span>`
    })

    const donutGradient = (section, idx)=> {
        const donutAnimation = setInterval(() => {
            let bg = ''
            let bgCode = [`${colorArr[0]} 0`];
            for (let k = 0; k < idx; k++) {
                bgCode.push(`${colorArr[k+k+1]} ${dataSection[k]}%`);
                bgCode.push(`${colorArr[k+k+2]} ${dataSection[k]}%`);
            }
            bg = `conic-gradient(${bgCode.join(', ')}, ${colorArr[idx*2+1]} ${count}%, #dedede ${count}% ${section}%)`;
            donutEl.style.background = bg
            console.log(bg)
            count++
            if(count >= dataSection[dCount]) {
                // console.log('clear')
                clearInterval(donutAnimation)
                if (dCount<dataSection.length-1) {
                    dCount++
                    donutGradient(dataSection[dCount], dCount)
                }
            }
        },30)
    }

    donutGradient(dataSection[dCount], dCount)
    donutEl.querySelector('.donut-desc').innerHTML = descText
            

</script>

const data = [ {title:'타이틀', percent:'00%'}, {}, ... ]

colorArr에 각 항목에 들어갈 색상 2가지를 쌍으로 넣어줘야 한다

dataSection은 각 percent를 순차적으로 합한 값인데

colorArr과 매칭하는 부분이 복잡하다

conic-gradient(

colorArr[0] 0,

colorArr[1] dataSection[0]%, colorArr[2] dataSection[0]%,

colorArr[3] dataSection[1]%, colorArr[4] dataSection[1]%,

colorArr[5] dataSection[2]%, colorArr[5] dataSection[2]%,

100%

)

조금 이상하게 짰지만

일단 되니까..

이상한부분

bgCode.push(`${colorArr[k+k+1]} ${dataSection[k]}%`);

bgCode.push(`${colorArr[k+k+2]} ${dataSection[k]}%`);

bg = `conic-gradient(${bgCode.join(', ')}, ${colorArr[idx*2+1]} ${count}%, #dedede ${count}% ${section}%)`;

css selector로 step 색칠하기

수밤바 — Tue, 31 Jan 2023 16:31:03 +0900

기본으로 모든 li를 step이 지나간 스타일로 적용하고(#fff)

on이 된 요소를 뒤따르면서 같은 부모를 공유하는 모든 li ( li.on ~ li)

즉 on이된 요소부터 맨 뒷 li 까지 색상을 선택되지 않은 색상으로 변경한다(#999)

주의해야할 점은 on이 되지 않은 상태는 모든 요소가 선택이 된것처럼 보여짐으로 항상 on체크가 있어야 한다

.regStepTop li:before{border:2px solid #fff;color:#fff;}
.regStepTop li.on~li:before{border-color:#999;color:#999;}
.regStepTop li.on{color:#fff}

[vue: worklist 제작] 4-2. 완료, 제외, total 클릭시 해당 리스트만 보여짐

수밤바 — Wed, 5 Oct 2022 15:47:12 +0900

Status 컴포넌트에서 상태값버튼 클릭시 emi을 이용하여 App.vue로 보냈다

App.vue에서 상태값을 다시 Group 컴포넌트로 보내고 해당하는 row만 보여준다

App.vue

<template>
  <div>
      <header>
        <Status @updateList="updateList"/>
        <Tab :tabLists="groupTitles"/>

        공통경로 : <input type="text" v-model="this.commonURL">
      </header>

      <label>
        <input type="checkbox" name="" id="" @change="this.isModify = $event.target.checked;">
        <span v-if="this.isModify">읽기모드</span>
        <span v-else>수정모드</span>
      </label>

      <article class="content">
        <Group v-for="(group, idx) in groups" 
          :iaList="group" 
          :idx="idx" 
          :commonURL="commonURL"
          :sort="this.sort" 
          :isModify="isModify"/>
      </article>
  </div>
</template>

<script>
import Status from './components/Status.vue'
import Group from './components/Group.vue'
import Tab from './components/Tab.vue'

export default {
  name: 'App',
  components: {
    Status,
    Group,
    Tab
  },
  data(){
    return{
      isModify: true,
      iaList : this.$store.state.iaData,
      groupTarget:'1depth',
      groupTitles: [],
      groups : [],
      sort:'total',
      commonURL: '',
    }
  },
  ...
  methods : {
    modifyStatus(e){
      this.isModify = e.target.checked;
    },
    ...
    updateList(status){
      this.sort = status;
    },
  }
}
</script>

Group.vue

template

<template>
...
  <tr v-for="(iaValList) in iaGroup" 
	...
    v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'">
</template>

v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'"

테이블의 tr이 worklist-status값이 Status.vue에서 클릭한 값과 같거나 total일 경우 보여진다

script

<script>
export default {
  name: 'group',
  props:{
    isModify : Boolean,
    iaList : Object,
    idx: Number,
    commonURL:String,
    sort:String,
  }
}
</script>

[vue: worklist 제작] 4. 진행상황표

수밤바 — Wed, 5 Oct 2022 15:36:28 +0900

header영역에 worklist-status 상태에따라 완료, 대기, 삭제등을 카운트하고

해당 상태버튼을 클릭하면 그 항목만 보일수 있도록 한다

progressbar로 현 상황을 보기쉽게 정리하는 표

App.vue

<template>
  <div>
      <header>
        <Status @updateList="updateList"/>
        <Tab :tabLists="groupTitles"/>

        공통경로 : <input type="text" v-model="this.commonURL">
      </header>
      ..
 </template>
 
 <script>
 ...
 
  methods : {
  ...
    updateList(status){
      this.sort = status;
    },
  }
 </script>

updateList

status 컴포넌트에서 group에 정렬할 기준을 받아서 this.sort에 담아준다

1. 진행률을 계산하여 보여준다

2. 완료, 제외, total을 계산하여 보여준다

3. 진행률을 progressBar 시각화하여 보여준다

Status.vue

template

<template>
  <div class="status">
      진행률 {{percent}}%
      <button type="button" @click="sortList('complete')">완료 : {{countComplete}}</button>
      <button type="button" @click="sortList('del')"> 제외 : {{countDel}}</button>
      <button type="button" @click="sortList('total')"> total : {{total}}</button>

      <div class="progressBar"><span :style="`width:${Math.floor(percent)}%`"></span></div>
  </div>
</template>

script

<script>
export default {
  name: 'status',
  data(){
    return {
      iaList:this.$store.state.iaData,
    }
  },
  computed:{
    total: function(){
      return this.iaList.length;
    },
    countComplete: function(){
      const list = this.iaList.filter((item)=>{
        return item['worklist-status']=='complete'
      })
      return list.length;
    },
    countDel:function(){
      const list = this.iaList.filter((item)=>{
        return item['worklist-status']=='del'
      })
      return list.length;
    },
    percent: function(){
      const calc = (this.countComplete*100) / (this.total - this.countDel);
      return calc.toFixed(2);
    }
  },
  methods:{
    sortList : function(sort){
      this.$emit('updateList',sort);
    },
  }
}
</script>

style

.progressBar {
    width: 100%;
    height: 3px;
    background: #eee;

    span {
        display: block;
        height: 3px;
        border-radius:2px;
        background-color: salmon;
    }
}

간단한 연산을 위해 computed를 사용했다

total: function(){

return this.iaList.length;

iaList의 개수를 반환한다

countComplete: function(){

const list = this.iaList.filter((item)=>{

return item['worklist-status']=='complete'

})

return list.length;

worklist-status값이 complete인 경우 그 개수를 반환

countDel:function(){

const list = this.iaList.filter((item)=>{

return item['worklist-status']=='del'

})

return list.length;

worklist-status값이 complete인 경우 그 개수를 반환

percent: function(){

const calc = (this.countComplete*100) / (this.total - this.countDel);

return calc.toFixed(2);

}

합계에서 삭제된 부분을 제하고 완료된부분을 계산하여 백분률로 반환

버튼 클릭시 상태값에 해당하는 항목만 보여주기위해 sort를 $emit으로 보내준다

@click="sortList('complete')"

methods:{

sortList : function(sort){

this.$emit('updateList',sort);

[vue: worklist 제작] 3. 탭으로 1depth 인덱싱

수밤바 — Wed, 5 Oct 2022 15:09:18 +0900

App.vue 에서 다음과 같이 데이터를 받아왔다

<template>
  <div>
      <header>
        <Tab :tabLists="groupTitles"/>
      </header>
      
      <article class="content">
        <Group v-for="(group, idx) in groups" 
          :iaList="group" 
          :idx="idx" />
      </article>
  </div>
</template>

Tab.vue

<template>
  <div class="tab">
    <button type="button" 
      class="tab__item" 
      v-for="(item,idx) in tabLists"
      :key="item" 
      @click="quickMove(`groupTitle__${idx}`)"
    >{{item}}</button>
  </div> 
</template>

<script>
export default {
  name: 'tab',
  props:{
    tabLists : Array
  },
  methods:{
    quickMove : function(item){
      const pos = document.getElementById(item).offsetTop;
      const headerHeight = document.getElementsByTagName('header')[0].offsetHeight;
      window.scrollTo(0,pos-headerHeight)
    }
  }
}
</script>

groupTitle을 tabLists로 받아와서

각 타이틀들을 button으로 감싸주고 click시 해당 그룹으로 이동할 method를 만든다 (quickMove)

quickMove(item)

매개변수로 받아온 groupTitle__1... 은

<Group> 컴포넌트안의 각 타이틀에 id값으로 같은 id사용하기로 한다

getElementById(item) 으로 group안의 타이틀 id를 찾고 위치를 찾는다(offsetTop)

나는 tab이 페이지에서 항상 띄어둘것이기 때문에

그만큼의 높이값을 빼주어(headerHeight) 스크롤이 tab바로 아래에 보여지게한다

window 스크롤값을 이동시킨다

[vue: worklist 제작] 2-4. 메모

수밤바 — Wed, 5 Oct 2022 15:04:46 +0900

path수정과 방식은 동일하다

수정모드일경우 수정할수 있는 textarea보여지고

아닐경우 텍스트로 worklist-note의 값이 보여진다

blur될경우 수정된 내용을 sendNewIA로 store의 IAdata에 수정한다.

...
  <div v-else-if="title == 'worklist-note'">
    <textarea 
      v-if="isModify"
      class="note" 
      rows="1" 
      @blur="updateMemo(iaValList,$event.target)" 
      :value="iaVal">
    </textarea>
    <span v-else>{{iaVal}}</span>
  </div>

...
    updatePath: function(data,target){
      data['mode'] = '';
      let row = data;
      row['worklist-path'] = target.value;
      this.sendNewIA(row);
    },

[vue: worklist 제작] 2-3-2. 경로 수정버튼

수밤바 — Wed, 5 Oct 2022 14:38:26 +0900

<input type="text" 
  v-if="iaValList['mode']=='modi'" 
  :value="iaVal"
  @blur="updatePath(iaValList, $event.target)">
<a v-else ...>{{iaVal}}</a>
<button type="button" 
  v-if="isModify && iaValList['mode']!='modi'" 
  @click="pathModi(iaValList)"
  >링크수정</button>

링크수정 버튼 클릭시 임시로 해당 row에 mode라는 항목과 modi 값을 넣어준다

이 값은 링크가 수정완료 되면 사라진다

pathModi : function(row){

row['mode'] = 'modi';

iaValList['mode']가 modi이면 input이 보여져서 경로를 수정할수 있다

수정이 완료되고 focus가 떠나면(blur)

mode는 초기화하고

path에 새로운 경로는 sendNewIA로 store에 보내서 메인 IAdata를 수정한다

mode가 modi가 아니기때문에 input은 가려지고 a링크가 보여진다

updatePath: function(data,target){

data['mode'] = '';

let row = data;

row['worklist-path'] = target.value;

this.sendNewIA(row);

[vue: worklist 제작] 2-3-1. 마우스오버시 미리보기 제공

수밤바 — Wed, 5 Oct 2022 14:25:16 +0900

<div v-else-if="title == 'worklist-path'">
  ...
    <a v-else
      :href="`${commonURL}${iaValList['worklist-path']}`" 
      target="_blank" 
      @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" 
      @mouseleave="previewReset($event)">{{iaVal}}</a>
  ...
</div>

:href="`${commonURL}${iaValList['worklist-path']}`"

target="_blank"

클릭하면 공통 URL + worklist-path의 설정한 경로를 새창으로 이동

@mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)"

previewLink : function (link,event){

const el = event.target

const iframe = document.createElement('iframe')

iframe.src=`${link}.html`;

iframe.width=1240;

iframe.height=1500;

iframe.setAttribute('class','sitemapIframe');

el.appendChild(iframe);

마우스오버시 ifream의 src에 링크경로를 띄움

class는 sitemapIfream

style에서 position, 크기 적용

@mouseleave="previewReset($event)">{{iaVal}}</a>

previewReset : function(event){

let el = event.target;

el.querySelector('.sitemapIframe').remove();

a링크에서 마우스를 땠을경우 iframe인 .sitemapIfram를 삭제

[vue: worklist 제작] 2-3. 작업물 경로 링크

수밤바 — Wed, 5 Oct 2022 11:09:45 +0900

worklist-path일 경우

작업물의 폴더와 파일경로를 a링크로 보여주고 마우스오버시 미리보기 레이어가 노출된다

https://shubamba.tistory.com/106?category=582020

[vue: worklist 제작] 2-3-1. 마우스오버시 미리보기 제공

... {{iaVal}} ... :href="`${commonURL}${iaValList['worklist-path']}`" target="_blank" 클릭하면 공통 URL + worklist-path의 설정한 경로를 새창으로 이동 @mouseenter="previewLink(`${commonURL}${iaValLis..

shubamba.tistory.com

링크수정 버튼 클릭시 a링크가 가려지고 input text가 보여지면서 링크 경로를 수정할수 있다.

input에 focus가 사라지면 수정된 링크가 업데이트되며 input이 가려지고 수정된 a링크가 보여진다.

https://shubamba.tistory.com/107?category=582020

[vue: worklist 제작] 2-3-2. 경로 수정버튼

{{iaVal}} 링크수정 링크수정 버튼 클릭시 임시로 해당 row에 mode라는 항목과 modi 값을 넣어준다 이 값은 링크가 수정완료 되면 사라진다 pathModi : function(row){ row['mode'] = 'modi'; }, iaValList['mode'..

shubamba.tistory.com

링크경로에 공통경로를 따로 header의 input영역에서 수정할수 있다.

<template>
  ...
  <tr v-for="(iaValList) in iaGroup" 
    :class="`status__badge status__badge--${iaValList['worklist-status']}`"
    v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'">
    <td 
      v-for="(iaVal, title) in iaValList" 
      :class="`col__${title.replace(/\s/g, '-')}`"
    >
      <div v-if="title == 'worklist-status'"> ... </div>
      <div v-else-if="title == 'worklist-path'">
        <!-- '링크수정'버튼 클릭시 input-a toggle -->
        <input type="text" 
          v-if="iaValList['mode']=='modi'" 
          :value="iaVal"
          @blur="updatePath(iaValList, $event.target)">
        <a v-else
          :href="`${commonURL}${iaValList['worklist-path']}`" 
          target="_blank" 
          @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" 
          @mouseleave="previewReset($event)">{{iaVal}}</a>
        <button type="button" 
          v-if="iaValList['mode']!='modi'" 
          @click="pathModi(iaValList)"
          >링크수정</button>
      </div>
  ...
</template>

script

<script>
export default {
  ...
  methods: {
    sendNewIA : function(data){
      this.$store.dispatch('modiIA', data)
    },
    previewLink : function (link,event){
      const el = event.target
      const iframe = document.createElement('iframe')
      iframe.src=`${link}.html`;
      iframe.width=1240;
      iframe.height=1500;
      iframe.setAttribute('class','sitemapIframe');
      el.appendChild(iframe);
    },
    previewReset : function(event){
      let el = event.target;
      el.querySelector('.sitemapIframe').remove();
    },
    updatePath: function(data,target){
      data['mode'] = '';
      let row = data;
      row['worklist-path'] = target.value;
      this.sendNewIA(row);
    },
    pathModi : function(row){
      row['mode'] = 'modi';
    },
  }
}
</script>

style

<style lang="scss">
  .col__worklist-path {
      position: relative;
      a {
          color: darken($pointColor, 20%);
          text-decoration: none;
          text-underline-position: under;
          &:hover {
              color: darken($color:$pointColor, $amount:0);
              text-decoration: underline;
          }
      }
  }
  .sitemapIframe{
      position: absolute;
      top:-300px - 1px;
      left:calc(50% - 124px);
      z-index: 1;
      transform:scale(0.2);transform-origin: left top;
      background-color: #fff;
      box-shadow: 0 0 30px rgba(0,0,0,.2);
  }
</style>

[vue: worklist 제작] 2-2. 진행상태 select (대기:기본, 진행중, 완료, 제외..)

수밤바 — Tue, 4 Oct 2022 18:00:08 +0900

상태(worklist-status) 셀에 select box로 해당 상태를 선택하면

그 해당 행의 색상을 변경하고 진행상황에 숫자가 카운트 한다(추후 4-1. 완료, 제외, total count 에서 진행)

Group.vue

<template>
  ...
    <tbody>
      <tr v-for="(iaValList) in iaGroup"  
        :class="`status__badge status__badge--${iaValList['worklist-status']}`">
        <td v-for="(iaVal, title) in iaValList" .. >
        
          <div v-if="title == 'worklist-status'">
            <select name="" id="" @change="updateStatus(iaValList,$event.target)" v-if="isModify">
              <option value="stay" :selected="iaValList['worklist-status'] == 'stay'">대기</option>
              <option value="ing" :selected="iaValList['worklist-status'] == 'ing'">진행중</option>
              <option value="complete" :selected="iaValList['worklist-status'] == 'complete'">완료</option>
              <option value="del" :selected="iaValList['worklist-status'] == 'del'">제외</option>
            </select>
            <span v-else>
              {{this.statusRename(iaVal)}}
            </span>
          </div>
   ...
 </template>
 
<script>
export default {
  ...
  methods: {
    sendNewIA : function(data){
      this.$store.dispatch('modiIA', data)
    },
    updateStatus : function(data,target){
      let row = data;
      row['worklist-status'] = target.value;
      this.sendNewIA(row);
    },
    statusRename : function(status){
      switch(status){
        case 'stay' : return "대기";
        break;
        case 'ing' : return "진행중";
        break;
        case 'complete' : return "완료";
        break;
        case 'del' : return "제외";
        break;
        default : return ''
      }
    }
  }
  ...
  </script>

수정모드일 경우에(v-if="isModify") selectbox가 보이고

수정모드가 아닐경우 worklist-status의 값이 텍스트로 보인다

statusRename으로 적절하게 워딩을 변경했다

worklist-status의 값을 stay, ing, complete, del로 정하고(필요에 따라 가감)

select box에서 상태값을 선택했을때 (@change) updateStatus를 실행한다

매개변수로 해당 열(tr부분)과 해당 select에 변경된 값을 가져갈 이벤트 타겟을 보낸다

</select>

해당열을 data로 받아서 그 worklist-status 값을 selectbox에서 선택한 value값으로 변경해준다

sendNewIA를 실행시켜 store에 보낸다.

sendNewIA : function(data){

this.$store.dispatch('modiIA', data)

updateStatus : function(data,target){

let row = data;

row['worklist-status'] = target.value;

this.sendNewIA(row);

store.js

const store = new Vuex.Store({
    state: {
		...
    },
    mutations: {
		...
        MODI_IA(state,{newIA,id}){
            const list = state.iaData.filter ((ia)=>{
                if(ia[id] == newIA[id]) {
                    ia = newIA
                }
            })
            state.iaData = list;
        }
    },
    actions: {
		...
        modiIA ({commit},newIA) {
            const id = newIA['SCREEN ID']
            commit('MODI_IA',{newIA,id});
        }
    }
})

modiIA

dispatch로 받은 row의 SCREEN ID를 추출해서 row와 함께 MODI_IA로 보낸다

MODI_IA

iaData를 순회하여 SCREEN ID가 같은 row를 찾아 새 row(newIA)로 변경하여 다시 덮어씌운다

worklist-status 값이 변경되면

해당 tr의 class가 변경되어 css에서 설정한 색상으로 변경된다

:class="`... status__badge--${iaValList['worklist-status']}`"