influence/composables/useChart.js

import dayjs from 'dayjs'

const chartDataItems = ref({
  datasetItems: {
    // 태양광(단상), 태양광(삼상) 연료전지, 풍력은 같은 아이템
    development_line1: {
      label: '',
      borderWidth : 2,
      borderColor:'#6EDBBB',
      lineTension : 0.5,
      pointRadius : 0,
      backgroundColor : (ctx) => {  // bg 그라데이션 색으로 채울때 가변 채우고 비우고...
        const canvas = ctx.chart.ctx
        const gradient = canvas.createLinearGradient(0,0,0,300)
        gradient.addColorStop(0.7, '#ffffff')
        gradient.addColorStop(0, '#6edbbb')
        return gradient
      },
      data: [],
      type: 'line',
      fill : true,
      order: 1
    },
    // 태양열(강제) : 혼합차트
    development_mix1: [
      {
        label: 'test1',
        barPercentage: 0.4,
        backgroundColor: '#455DDC',
        data: [],
        type: 'bar',
        order: 2
      },
      {
        label: 'test2',
        borderWidth : 2,
        borderColor:'#6EDBBB',
        lineTension : 0.5,
        pointRadius : 0,
        data: [],
        type: 'line',
        fill : false,
        order: 1
      }
    ],
    // 태양열(자연)
    development_line2: {
      label: '',
      borderWidth : 2,
      borderColor:'#6EDBBB',
      lineTension : 0.5,
      pointRadius : 0,
      data: [],
      type: 'line',
      fill : false,
      order: 2
    },
    // 지열
    development_mix2: [
      {
        label: '',
        barPercentage: 0.8,
        backgroundColor: '#3549AE',
        data: [],
        type: 'bar',
        order:2
      },
      {
        label: '',
        barPercentage: 0.8,
        backgroundColor: '#78A6FF',
        data: [],
        type: 'bar',
        order:2
      },
      {
        label: '',
        borderWidth : 2,
        borderColor:'#6EDBBB',
        lineTension : 0.5,
        pointRadius : 0,
        data: [],
        type: 'line',
        fill : false,
        order:1
      }
    ],
    area_area: {
      label: '',
      barPercentage: 0.8,
      backgroundColor: "#3549AE",
      data: [],
      type: 'bar'
    },
    facility_line: {
      label: '',
      borderWidth : 2,
      lineTension : 0.5,
      pointRadius : 0,
      borderColor:'#3549AE',
      data: [],
      type: "line"
    },
    facility_consumption: {
      label: '',
      barPercentage: 0.4,
      backgroundColor: '#3549AE',
      data: [],
      type: 'bar',
      order: 1
    },
    facility_greed: {
      label: '',
      borderWidth : 2,
      borderColor:'#6EDBBB',
      lineTension : 0.5,
      pointRadius : 0,
      backgroundColor : (ctx) => {  // bg 그라데이션 색으로 채울때 가변 채우고 비우고...
        const canvas = ctx.chart.ctx
        const gradient = canvas.createLinearGradient(0,0,0,300)
        gradient.addColorStop(0.8, '#ffffff')
        gradient.addColorStop(0, '#6edbbb')
        return gradient
      },
      data: [],
      type: 'line',
      fill : true,
      order: 2
    },
  }
}
)

let chart = {
  customChartData(pageId, energyKey, timeSet, periodKey, resultData, areaType) {
    let labels = []
    let tempDataItem = []

    // 1. 메뉴 & 에너지원을 확인 => 그래프의 기본값을 셋팅
    if(pageId === 'development' || pageId === 'area') {
      if(!useUtil.isNull(areaType)) {
        if(energyKey === 'SP' || energyKey === 'TP' || energyKey === 'FC' || energyKey === 'WIND') {
          // 발전량 분석 > 에너지원 값이 태양광(단상), 태양광(삼상) 연료전지, 풍력 일 경우 development_line1 셋팅
          tempDataItem.push(chartDataItems.value.datasetItems.development_line1)
        } else if(energyKey === 'FORCE') {
          // 발전량 분석 > 에너지원 값이 태양열(강제) 일 경우 development_mix1 셋팅
          _each(chartDataItems.value.datasetItems.development_mix1, (item) => {
            tempDataItem.push(item)
          })
        } else if(energyKey === 'NATURE') {
          // 발전량 분석 > 에너지원 값이 태양열(자연) 일 경우 development_line2 셋팅
          tempDataItem.push(chartDataItems.value.datasetItems.development_line2)
        } else if(energyKey === 'GEO') {
          // 발전량 분석 > 에너지원 값이 지열 일 경우 development_mix2 셋팅
          _each(chartDataItems.value.datasetItems.development_mix2, (item) => {
            tempDataItem.push(item)
          })
        }
      } else {
        // 지역별 분석 => 지역이 전국이면 공통 막대그래프 셋팅
        tempDataItem.push(chartDataItems.value.datasetItems.area_area)
      }
    }
    else{
      if(!useUtil.isNull(areaType)) {
        if(areaType == 'stack'){
          tempDataItem.push(chartDataItems.value.datasetItems.facility_greed)
        }
        else if(areaType == 'type'){
          tempDataItem.push(chartDataItems.value.datasetItems.facility_line)
        }
        else if(areaType == 'consumption'){
          tempDataItem.push(chartDataItems.value.datasetItems.facility_consumption)
        }
      }
    }
    
    // label에 대해 가공처리
    if(pageId === 'development' || pageId === 'facilities' || pageId === 'area') {
      if(!useUtil.isNull(areaType)) {
        if(timeSet === 'hour') {
          if(periodKey === 'day') {
            _each(resultData.chart_date_list, (item) => {
              labels.push(dayjs(item).format('H:mm'))
            })
          } else {
            _each(resultData.chart_date_list, (item) => {
              labels.push(dayjs(item).format('MM/DD H:mm'))
            })
          }
        } else if(timeSet === 'day') {
          _each(resultData.chart_date_list, (item) => {
            labels.push(dayjs(item).format('MM/DD'))
          })
        } else if(timeSet === 'month') {
          _each(resultData.chart_date_list, (item) => {
            labels.push(dayjs(item).format('YYYY/MM'))
          })
        }
      } else {
        _each(resultData.chart_date_list, (item) => {
          labels.push(item)
        })
      }
    }
    
    // 범례에 대한 셋팅
    if(pageId === 'development' || pageId === 'area'){
      let idx = 0
      for(let i = 1; i <= Object.keys(resultData).length - 1; i++) {
        const chartKey = `chart_data_list_${i}`
        tempDataItem[idx].label = resultData[chartKey].legend
        tempDataItem[idx].data = resultData[chartKey].chart_data
        idx += 1
      }
    }
    else{
      const chartKey = Object.keys(resultData).find(key=>key.startsWith('chart_data_list_'))
      tempDataItem[0].label = resultData[chartKey].legend
      tempDataItem[0].data = resultData[chartKey].chart_data
    }
    
    return {labels: labels, chartData: tempDataItem}
  }
}
export default chart