Index: arms/html/fullDataSheet/content-container.html =================================================================== diff -u -rd8931e4514866dce35209fc86e9b6be8434252ff -r9fc0822cf4365db2d7e07fc970d8d7b686dc5054 --- arms/html/fullDataSheet/content-container.html (.../content-container.html) (revision d8931e4514866dce35209fc86e9b6be8434252ff) +++ arms/html/fullDataSheet/content-container.html (.../content-container.html) (revision 9fc0822cf4365db2d7e07fc970d8d7b686dc5054) @@ -100,7 +100,6 @@ style="font-weight: bold"> -   D - 6   YHS-1 @@ -162,9 +161,74 @@ -
- -
+
+
+
+

+ + + D - 3 +   + YHS-1 + +

+
+ + + + + + + + + + + + +
+
+
+
+
차트
+
+
차트 관련 정보(버전 등)
+
24.08.01 ~ 24.08.31
+
+
+
+
총 이슈 개수 5
+
+
+
+
+
+
+
+
    +
  •   YHS-2
    • +
  •   YHS-3
    • +
  •   YHS-4
    • +
  •   YHS-5
    • +
  •   YHS-6
    • +
+
@@ -191,132 +255,3 @@
- - - - - Index: arms/js/common/chart/eCharts/donutChart.js =================================================================== diff -u --- arms/js/common/chart/eCharts/donutChart.js (revision 0) +++ arms/js/common/chart/eCharts/donutChart.js (revision 9fc0822cf4365db2d7e07fc970d8d7b686dc5054) @@ -0,0 +1,156 @@ +function sampleDonut() { + var chartDom = document.getElementById('main'); + var myChart = echarts.init(chartDom); + var option; + + option = { + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + padAngle: 1, + label: { + show: false, + position: 'center' + }, + emphasis: { + label: { + show: true, + fontSize: 40, + fontWeight: 'bold' + } + }, + labelLine: { + show: false + }, + data: [ + { value: 1048, name: 'Search Engine' }, + { value: 735, name: 'Direct' }, + { value: 580, name: 'Email' }, + { value: 484, name: 'Union Ads' } + ] + } + ] + }; + + option && myChart.setOption(option); +} + +function donutChart_fullDataSheet(targetId, data) { + var chartDom = document.getElementById(targetId); + var myChart = echarts.init(chartDom); + var option; + + let keysToExtract = ["open", "in-progress", "resolved", "closed"]; + + let noDataArr= [ + { value: 0, name: 'open' }, + { value: 0, name: 'in-progress' }, + { value: 0, name: 'resolved' }, + { value: 0, name: 'closed' } + ]; + + let colorSet = [ + "rgba(219, 42, 52, 0.6)", // 열림 + "rgba(228, 148, 0, 0.6)", // 진행중 + "rgba(45, 133, 21, 0.6)", // 해결됨 + "rgba(36, 119, 255,0.6)" // 닫힘 + ]; + + let dataArr = [] + if (!data || Object.keys(data).length === 0) { + console.log("donutChart_fullDataSheet 의 데이터가 존재하지 않거나, key가 없습니다."); + dataArr = noDataArr; + + } else { + dataArr = keysToExtract.map(key => { + return { + name: key, + value: data[key] || 0, // 값이 없을 경우 0으로 설정합니다. + itemStyle: { color:colorSet[keysToExtract.indexOf(key)] } + }; + }); + } + + + let etcInfo = { + total: data.total, + folder: data.folder + }; + + option = { + tooltip: { + trigger: 'item', + //formatter: '{b}: {c} ({d}%)' // b는 항목 이름, c는 값, d는 퍼센트 + formatter: function(params) { + // params 객체에서 해당 항목의 색상을 가져와서 HTML을 생성합니다. + return ` + ${params.name}: ${params.value} (${params.percent}%) + `; + } + }, + grid: { + bottom: '50%' + }, + legend: { + top: "80%", + left: 'center', + textStyle: { + fontSize: 12, // 폰트 크기 설정 + color: '#FFF' // 폰트 색상 설정 + } + }, + series: [ + { + name: '', + type: 'pie', + radius: ['35%', '50%'], + center: ['50%', '40%'], + avoidLabelOverlap: false, + padAngle: 2, + label: { + show: true, + position: 'inner', // 레이블을 차트 섹션 바깥에 표시 + formatter: '{d}%', // 항목 이름과 값을 표시 + fontSize: 13, // 레이블 폰트 크기 + color: '#FFF', // 레이블 폰트 색상 + // textBorderColor: '#FFF', // 텍스트 테두리 색상 (흰색) + // textBorderWidth: 1 // 텍스트 테두리 두께 + }, + labelLine: { + show: false + }, + data: dataArr + }, + ], + graphic: [ + { + type: 'text', + left: 'center', + top: '38.5%', // 차트의 중심에 위치하게 설정 + style: { + text: `Total: ${etcInfo.total}`, // 중앙에 표시될 텍스트 + textAlign: 'center', + fill: '#FFF', // 텍스트 색상 + fontSize: 14, // 텍스트 크기 + fontWeight: 'bold' + } + } + ] + }; + + option && myChart.setOption(option); + + window.addEventListener('resize', function () { + myChart.resize(); + }); +} Index: arms/js/fullDataSheet.js =================================================================== diff -u -rd8931e4514866dce35209fc86e9b6be8434252ff -r9fc0822cf4365db2d7e07fc970d8d7b686dc5054 --- arms/js/fullDataSheet.js (.../fullDataSheet.js) (revision d8931e4514866dce35209fc86e9b6be8434252ff) +++ arms/js/fullDataSheet.js (.../fullDataSheet.js) (revision 9fc0822cf4365db2d7e07fc970d8d7b686dc5054) @@ -39,6 +39,9 @@ [ //chart Colors "./js/common/colorPalette.js", + // Apache Echarts + "../reference/jquery-plugins/echarts-5.4.3/dist/echarts.min.js", + "./js/common/chart/eCharts/donutChart.js", // c3 차트(도넛) "../reference/jquery-plugins/d3-5.16.0/d3.min.js", "../reference/jquery-plugins/c3-0.7.20/c3.min.css", @@ -74,9 +77,16 @@ let cardWidth = $(".card").width(); drawDonutChart_report(targetId, mock, cardWidth); } + let mock1 = { + "total": 5, + "in-progress": 2, + "open": 1, + "resolved" : 1, + "closed": 1 + }; + donutChart_fullDataSheet("donut1", mock1); - }) .catch(function(e) { console.error('플러그인 로드 중 오류 발생');