@@ -954,16 +942,71 @@
color: white;
}
- // 패널 내부 패딩 값왜 적용 안되지
-/* @media (min-width: 1200px) {
- .col-md-4 {
- width: 33.3333333333%!important;
- }
- .col-md-8 {
- width: 66.6666666667%!important;
- }
- }*/
+ /* 레이더 차트 */
+ svg:not(:root) {
+ overflow: visible
+ }
+ .radar-chart {
+ width: auto; /* 원하는 너비로 설정 */
+ height: auto; /* 원하는 높이로 설정 */
+ margin: auto;
+ }
+
+ .radar-chart .area {
+ fill-opacity: 0.7;
+ }
+ .radar-chart.focus .area {
+ fill-opacity: 0.3;
+ }
+ .radar-chart.focus .area.focused {
+ fill-opacity: 0.9;
+ }
+ .area.germany, .germany .circle {
+ fill: #FFD700;
+ stroke: none;
+ }
+ .area.argentina, .argentina .circle {
+ fill: #ADD8E6;
+ stroke: none;
+ }
+
+ #radar-chart-main {
+ height: 300px;
+ }
+
+ canvas {
+ margin: auto;
+ }
+
+ /* 네트워크 차트 */
+ svg circle.node {
+ fill: #3b5998;
+ stroke: #1b3978;
+ stroke-width: 1.5px;
+ }
+
+ svg line.link {
+ stroke: #222;
+ stroke-opacity: .6;
+ stroke-width: 2px;
+ }
+
+ div.tooltip {
+ position: absolute;
+ text-align: center;
+ opacity: 0;
+ visibility: hidden;
+ width: 80px;
+ height: 28px;
+ padding: 2px;
+ font: 12px sans-serif;
+ background: #8fb3de;
+ border: 0px;
+ border-radius: 8px;
+ pointer-events: none;
+ }
+
@media (max-width: 992px) {
.maxwidget {
min-height: 590px;
Index: arms/js/analysisTime.js
===================================================================
diff -u -re16231bc5ab849f32564daebd53f9d2e561bc53f -r430b925c4d7392074a00900b9897dbed4f067965
--- arms/js/analysisTime.js (.../analysisTime.js) (revision e16231bc5ab849f32564daebd53f9d2e561bc53f)
+++ arms/js/analysisTime.js (.../analysisTime.js) (revision 430b925c4d7392074a00900b9897dbed4f067965)
@@ -29,8 +29,6 @@
"../reference/jquery-plugins/info-chart-v1/js/D.js",
"./js/dashboard/chart/timeline_custom.js",
"./js/dashboard/chart/infographic_custom.css",
- // 3번째 박스 Radar
- "../reference/jquery-plugins/Chart.js-3.9.1/dist/chart.min.js",
// 네번째 박스 차트
// d3.v2와 d3.v4 버전차이 오류생김...
// "../reference/light-blue/lib/nvd3/lib/d3.v2.js",
@@ -45,9 +43,6 @@
// "../reference/light-blue/lib/nvd3/src/models/axis.js",
// "../reference/light-blue/lib/nvd3/src/utils.js",
// "../reference/light-blue/lib/nvd3/stream_layers.js",
- // 3번째 박스 차트
- "../reference/light-blue/lib/sparkline/jquery.sparkline.js",
- "./js/analysisTime/index.js",
// 5번째 박스 heatmap
"../reference/jquery-plugins/github-calendar-heatmap/js/calendar_yearview_blocks.js",
"../reference/jquery-plugins/github-calendar-heatmap/css/calendar_yearview_blocks.css",
@@ -58,9 +53,18 @@
"../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/timeline/js/raphael.min.js",
"../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/timeline/js/timeline.js",
"../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/js/newdemo.js",
+ // 3번째 박스 차트
+ "../reference/light-blue/lib/sparkline/jquery.sparkline.js",
+ "../reference/jquery-plugins/echarts-5.4.3/dist/echarts.min.js",
+ /*"../reference/jquery-plugins/echarts-5.4.3/test/lib/simpleRequire.js",
+ "../reference/jquery-plugins/echarts-5.4.3/test/lib/config.js",*/
+ "./js/analysisTime/index.js",
+ // 5번째 박스 heatmap
+ "../reference/jquery-plugins/github-calendar-heatmap/js/calendar_yearview_blocks.js",
+ "../reference/jquery-plugins/github-calendar-heatmap/css/calendar_yearview_blocks.css",
// 7번째 박스
- "../reference/jquery-plugins/timelines-chart-2.11.8/src/show-time-marker.js",
- "../reference/jquery-plugins/timelines-chart-2.11.8/example/random-data.js"
+ "../reference/jquery-plugins/timelines-chart-2.11.8/src/show-time-marker.js",
+ "../reference/jquery-plugins/timelines-chart-2.11.8/example/random-data.js"
],
[ "../reference/lightblue4/docs/lib/slimScroll/jquery.slimscroll.min.js",
@@ -114,7 +118,7 @@
//버전 멀티 셀렉트 박스 이니시에이터
makeVersionMultiSelectBox();
- new Chart(ctx, config);
+ radarChart();
sevenTimeline();
@@ -1067,7 +1071,102 @@
needle.animateOn(chart, startDDay / totalDate);
}
+////////////////////
+// 세번째 박스
+////////////////////
+function radarChart() {
+ var chart = echarts.init(document.getElementById('radar-chart-main'));
+ chart.setOption({
+ dataZoom: [
+ { // The first dataZoom component
+ radiusAxisIndex: [0, 2] // Indicates that this dataZoom component
+ // controls the first and the third radiusAxis
+ }
+ ],
+ aria: {
+ show: true
+ },
+ tooltip: {},
+ legend: {
+ data: [{
+ icon: 'circle',
+ name: '요구사항'
+ }],
+ textStyle: {
+ color: 'white', // 원하는 텍스트 색상으로 변경합니다.
+ fontSize: 14
+ }
+ },
+ radar: {
+ radius: [0, '60%'],
+ triggerEvent: true,
+ // shape: 'circle',
+ indicator: [
+ { text: 'BaseVersion', max: 100},
+ { text: '1.0.0BaseVersion', max: 100},
+ { text: '1.0.1BaseVersion', max: 100},
+ { text: '1.0.2BaseVersion', max: 100},
+ { text: '1.0.3BaseVersion', max: 100},
+ { text: '1.0.4BaseVersion', max: 100},
+ { text: '2.0.0BaseVersion', max: 100},
+ { text: '2.0.1BaseVersion', max: 100},
+ { text: '2.0.2BaseVersion', max: 100},
+ { text: '2.0.3BaseVersion', max: 100},
+ { text: '2.0.4BaseVersion', max: 100}
+ ],
+ name: {
+ rotate: 45, // 텍스트를 45도로 회전시킵니다.
+ position: 'outside', // 텍스트를 레이더 영역 내부에 위치시킵니다.
+ color: '#ffffff',
+ formatter:'【{value}】'
+ }
+ },
+ series: [{
+ name: '',
+ type: 'radar',
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: 'white' // 원하는 텍스트 색상으로 변경합니다.
+ }
+ }
+ },
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: '#fff'
+ },
+ // areaStyle: {normal: {}},
+ data : [
+ {
+ value: ['-', 80, 20, 40, 10, 100, 80, 20, 40, 10, 30],
+ name: '요구사항'
+ }
+ ],
+ symbol: 'circle',
+ symbolSize: 7,
+ symbolRotate: function(value, params) {
+ return ~~(360 * Math.random());
+ }
+ }
+ ]
+ });
+ var theIndex = 2;
+ chart.on('click', function (params) {
+ console.log(params);
+ if (theIndex < 0) {
+ theIndex = 2;
+ }
+ chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: theIndex
+ });
+ theIndex--;
+ });
+}
+
////////////////////
// 네번째 박스
////////////////////
@@ -1336,7 +1435,7 @@
return Math.floor(Math.random() * (max - min + 1) + min);
}
-function getRandomData(min, max, items) {
+function getRandoHeatMapData(min, max, items) {
var return_object = {};
var entries = randomInt(min, max);
@@ -1388,23 +1487,25 @@
return_object[display_date] = {};
return_object[display_date].items = [];
- var random_elements = randomInt(1,3);
+/* var random_elements = randomInt(1,3);
for (var j=0; j < random_elements; j++) {
var random_item = items[randomInt(0,items.length-1)];
if (!return_object[display_date].items.includes(random_item)) {
return_object[display_date].items.push(random_item);
}
- }
+ }*/
});
}
}
});
+ var heatMapData = getRandoHeatMapData(10, 40, ["banana", "apple", "orange", "pear"]);
+
$('#calendar_yearview_blocks_chart_1').calendar_yearview_blocks({
//data: '{"2020-08-01": {"items": ["banana", "apple"]}, "2020-05-05": {"items": ["apple"]}, "2020-05-01": {"items": ["banana"]}, "2020-05-03": {"items": ["banana", "apple", "orange"]}, "2020-05-22": {"items": ["banana", "apple", "orange", "pear"]}}',
- data: getRandomData(10, 40, ["banana", "apple", "orange", "pear"]),
+ data: heatMapData,
start_monday: true,
always_show_tooltip: true,
month_names: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sept', 'okt', 'nov', 'dec'],
@@ -1497,57 +1598,4 @@
.zQualitative(true)
.dateMarker(new Date() - 365 * 24 * 60 * 60 * 1000) // Add a marker 1y ago
.data(myData);
-}
-
-const data = {
- labels: [
- 'Eating',
- 'Drinking',
- 'Sleeping',
- 'Designing',
- 'Coding',
- 'Cycling',
- 'Running'
- ],
- datasets: [{
- label: 'My First Dataset',
- data: [12, 3, 12, 12, 5, 1, 5],
- fill: true,
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- borderColor: 'rgb(255, 99, 132)',
- pointBackgroundColor: 'rgb(255, 99, 132)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgb(255, 99, 132)'
- }, {
- label: 'My Second Dataset',
- data: [18, 18, 10, 29, 30, 10],
- fill: true,
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
- borderColor: 'rgb(54, 162, 235)',
- pointBackgroundColor: 'rgb(54, 162, 235)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgb(54, 162, 235)'
- }]
-};
-
-const config = {
- type: 'radar',
- data: data,
- options: {
- responsive: false,
- scale: {
- beginAtZero: true,
- max: 100,
- stepSize: 10,
- },
- elements: {
- line: {
- borderWidth: 3
- }
- }
- },
-};
-
-const ctx = document.getElementById('radar-chart');
+}
\ No newline at end of file