{"TYPE":"Single","MTX_MODULE_INFO":[{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","MODULE_SUBJECT":"[Chart] 히트맵(Heatmap) 설정","USE_AUTHORITY":"0","EDIT_AUTHORITY":"9","MODULE_DESCRIPTION":"지정한 데이터소스(DataSource)를 기반으로 X축, Y축, 값(Value) 컬럼을 매핑하여 Chart-EX 컴포넌트에 히트맵 차트를 적용합니다.\n데이터 값의 크기에 따라 사용자가 지정한 최소/최대 색상 간의 그라데이션이 적용되어 데이터 밀도와 분포를 직관적으로 시각화할 수 있습니다.","SCRIPT_TEXT":"/******************************************************\n * Generic HeatMap Module\n *\n * arguments[0] : UserComponent ID\n * arguments[1] : DataSource 명\n * arguments[2] : X축 컬럼명\n * arguments[3] : Y축 컬럼명\n * arguments[4] : 값 컬럼명\n * arguments[5] : min Color\n * arguments[6] : max Color\n ******************************************************/\n\nvar Ctl_UserComponent = arguments[0];\nvar DataSource        = arguments[1];\nvar X_COL             = arguments[2];\nvar Y_COL             = arguments[3];\nvar VAL_COL           = arguments[4];\nvar MIN_COLOR\t\t  = arguments[5];\nvar MAX_COLOR\t\t  = arguments[6];\n\nvar UC = Matrix.getObject(Ctl_UserComponent);\n\nvar xCategories = [];\nvar yCategories = [];\nvar data = [];\n\n\n/******************************************************\n * 1️⃣ DataSource 실행\n ******************************************************/\nvar LoadData = function() {\n\n    Matrix.Execute(DataSource, function(p){\n\n        if(p.Success == false){\n            Matrix.Alert(p.Message);\n            return;\n        }\n\n        SetDataSet(p.DataSet);\n    });\n};\n\n\n/******************************************************\n * 2️⃣ 데이터 가공 (컬럼 동적 처리)\n ******************************************************/\nvar SetDataSet = function(ds){\n\n    xCategories = [];\n    yCategories = [];\n    data = [];\n\n    var dt = ds.GetTable(0);\n\n    for(var i=0; i<dt.GetRowCount(); ++i){\n\n        var row = dt.GetRow(i);\n\n        var xValue = row.GetValue(X_COL);\n        var yValue = row.GetValue(Y_COL);\n        var value  = row.GetValue(VAL_COL);\n\n        // X축 처리\n        var xIdx = xCategories.indexOf(xValue);\n        if(xIdx < 0){\n            xCategories.push(xValue);\n            xIdx = xCategories.length - 1;\n        }\n\n        // Y축 처리\n        var yIdx = yCategories.indexOf(yValue);\n        if(yIdx < 0){\n            yCategories.push(yValue);\n            yIdx = yCategories.length - 1;\n        }\n\n        data.push([xIdx, yIdx, Number(value)]);\n    }\n\n    DrawHeatMap();\n  \tMatrix.doRefresh(UC);\n};\n\n\n/******************************************************\n * 3️⃣ Heatmap 생성\n ******************************************************/\nvar DrawHeatMap = function(){\n\n    var chartOption = {\n\n        chart: {\n            type: 'heatmap',\n            marginTop: 40,\n          \tplotBorderWidth: 0\n        },\n\n        title: { text: '' },\n\n        xAxis: {\n            categories: xCategories,\n            opposite: true,\n          \tgridLineWidth: 0\n        },\n\n        yAxis: {\n            categories: yCategories,\n            reversed: true,\n            title: {\n          \t\ttext: null\n        \t},\n          \tgridLineWidth: 0\n        },\n\n        colorAxis: {\n            min: 0,\n            minColor: MIN_COLOR,\n            maxColor: MAX_COLOR\n        },\n\n        legend: {\n            align: 'center',\n            layout: 'horizontal',\n            verticalAlign: 'bottom',\n            symbolWidth: UC.Width * 0.9,\n            symbolHeight: 12\n        },\n\n        tooltip: {\n            formatter: function () {\n                return '<b>' +\n                    this.series.xAxis.categories[this.point.x] +\n                    '</b><br>' +\n                    '<b>' +\n                    this.series.yAxis.categories[this.point.y] +\n                    '</b><br>' +\n                    'Value : <b>' +\n                    this.point.value +\n                    '</b>';\n            }\n        },\n\n        series: [{\n            borderWidth: 1,\n            borderColor: '#000000',\n            data: data,\n            dataLabels: {\n                enabled: true,\n                color: '#000000'\n            }\n        }]\n    };\n\n    UC.SetHighChartScript(chartOption);\n};\n\n\n/******************************************************\n * 4️⃣ 실행\n ******************************************************/\nLoadData();","MODULE_TYPE":"","RESULT_TYPE":"","ORIGINAL_MODULE_CODE":"","CREATE_USER":"matrix","MODIFY_USER":"matrix","MODULE_SEQ":"12","WF_YN":"","EVENT_YN":"Y","ATTR1":"","ATTR2":"","ATTR3":"", "MTX_MODULE_PARAMS":[{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"1","PARAM_TYPE":"INP004","NULLABLE":"N","PARAM_DESCRIPTION":"Heat Map을 적용할 Chart-EX 컴포넌트 선택","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"2","PARAM_TYPE":"INP007","NULLABLE":"N","PARAM_DESCRIPTION":"차트에 적용할 데이터소스명 선택","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"3","PARAM_TYPE":"INP001","NULLABLE":"N","PARAM_DESCRIPTION":"X축에 매핑할 데이터소스의 컬럼명 입력","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"4","PARAM_TYPE":"INP001","NULLABLE":"N","PARAM_DESCRIPTION":"Y축에 매핑할 데이터소스의 컬럼명 입력","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"5","PARAM_TYPE":"INP001","NULLABLE":"N","PARAM_DESCRIPTION":"라벨로 표시될 값(Value)의 컬러명을 입력","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"6","PARAM_TYPE":"INP001","NULLABLE":"N","PARAM_DESCRIPTION":"데이터 값이 가장 작을 때 표시될 셀의 최소 색상값을 Hex 코드로 입력 (예: #F2F2F2)","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""},{"MODULE_CODE":"MOD0B241906A2CE68F9D595DB35B0A6C547","PARAM_SEQ":"7","PARAM_TYPE":"INP001","NULLABLE":"N","PARAM_DESCRIPTION":"데이터 값이 가장 클 때 표시될 셀의 최대 색상값을 Hex 코드로 입력 (예: #0072CE)","DEFAULT_VALUE":"","ATTR1":"","ATTR2":"","ATTR3":""}]}]}