Commit @f16558ef443f9b6167fee09803545784d6f0dbe8

Stormen123 01-23

240123 김성훈 차트 완료

@f16558ef443f9b6167fee09803545784d6f0dbe8

06015d6

f16558e

Global.js

--- Global.js

+++ Global.js


 const LOG_BASE_DIR = `${__dirname}/server/logs`;
 const SERVICE_STATUS = process.env.NODE_ENV;//development, production
 const PORT = 80;
-const API_SERVER_HOST = 'localhost:8080';
+const API_SERVER_HOST = 'localhost:9090';
 
 module.exports = {
     PROJECT_NAME,

06015d6

f16558e

client/views/components/LineChart.vue

--- client/views/components/LineChart.vue

+++ client/views/components/LineChart.vue


             default: null
             // required: true,
         },
+
     },
     data() {
         return {

         };
     },
     methods: {
-        createChart(data, keyMapping, xField) {
-            console.log(typeof(xField));
-            let mappedData = [];
-            let keys = Object.keys(data[0]);
+        createChart(data, xField) {
+            // console.log(typeof(xField));
+            // let mappedData = [];
+            // let keys = Object.keys(data[0]);
 
-            for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
-                let currentItem = data[dataIndex];
-                let mappedItem = {};
+            // for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
+            //     let currentItem = data[dataIndex];
+            //     let mappedItem = {};
 
-                for (let i = 0; i < keys.length; i++) {
-                    let key = keys[i];
-                    let koreanKey = keyMapping[key];
+            //     for (let i = 0; i < keys.length; i++) {
+            //         let key = keys[i];
+            //         let koreanKey = keyMapping[key];
 
-                    if (koreanKey) {
-                        mappedItem[koreanKey] = currentItem[key];
-                    }
-                }
+            //         if (koreanKey) {
+            //             mappedItem[koreanKey] = currentItem[key];
+            //         }
+            //     }
 
-                mappedData.push(mappedItem);
-            }
+            //     mappedData.push(mappedItem);
+            // }
 
-            console.log("mappedData - ",mappedData)
+            // console.log("mappedData - ",mappedData)
 
             let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
             chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)

                 location: 1
             })
 
-            xAxis.data.setAll(mappedData);
+            /* let lineData = [
+                { search_date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
+                { search_date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
+                { search_date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
+            ] */
+
+            xAxis.data.setAll(data);
 
             let yAxis = chart.yAxes.push(
                 am5xy.ValueAxis.new(root, {

                 })
             );
 
-
             // Add series
-            Object.keys(mappedData[0]).forEach((key, index) => {
+            Object.keys(data[0]).forEach((key, index) => {
+                console.log('key', key)
                 if (key !== xField) {
                     let series = chart.series.push(am5xy.LineSeries.new(root, {
                         name: key,

                         })
                     }));
 
-
-
                     series.strokes.template.setAll({
                         strokeWidth: 2
                     });
 
                     series.get("tooltip").get("background").set("fillOpacity", 0.5);
-
-
-                    series.data.setAll(mappedData.map(item => ({
+                    
+                    /* console.log('!!!!!',data.map(item => ({
                         [xField]: item[xField],
                         [key]: item[key]
-                    })));
+                    }))); */
+                    console.log("data: ", key, xField, data);
 
-                   
-
+                    // series.data.setAll(data.map(item => ({
+                    //     [xField]: item[xField],
+                    //     [key]: item[key]
+                    // })));
+                    series.data.setAll(data);
+                    series.appear(1000);
                 }
             });
 
 
             // Make stuff animate on load
             // https://www.amcharts.com/docs/v5/concepts/animations/
-            chart.series.each((series) => {
+            /* chart.series.each((series) => {
                 series.appear(1000);
-            });
+            }); */
             chart.appear(1000, 100);
+
+            // for (let i = 1; i < data.length; i++) {
+            //         createSeries(valueDataList[i], valueDataList[i], options['seriesColorList'][i]);
+            // }
 
         }
 
     },
     watch: {
         'chartData': function (newData) {
-            console.log('newData - ', newData)
-            this.createChart(newData,this.keyMapping,this.xField);
+            this.createChart(newData ,this.xField);
         }
     },
     mounted() {

06015d6

f16558e

client/views/components/MultiBarChart.vue

--- client/views/components/MultiBarChart.vue

+++ client/views/components/MultiBarChart.vue


 export default {
     props: {
         setData: {
-            type: Object,
-            default: {},
-        }, color: {
+            type: Array,
+            default: [],
+        }, 
+        mapping: {
+            type: Array,
+            default: [],
+        },
+        columnX: {
+            type: String
+        },
+        color: {
             type: Array,
             default: [],
         },

         };
     },
     methods: {
-        chartCreate: function (data, color) {
+        chartCreate: function (data, mapping, columnX, colors) {
             let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
             chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
             let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)

                 minorGridEnabled: true
             });
 
-            xRenderer.labels.template.setAll({ text: "" });
-
             let xAxis = chart.xAxes.push(
                 am5xy.CategoryAxis.new(root, {
                     maxDeviation: 0,
-                    categoryField: "category",
+                    categoryField: columnX,
                     renderer: xRenderer,
                     tooltip: am5.Tooltip.new(root, {
-                        labelText: "{realName}"
+                        labelText: "{city}"
                     })
                 })
             );
+            
+            xAxis.data.setAll(data);
 
             // let yAxis = chart.yAxes.push(
             //     am5xy.ValueAxis.new(root, {

                     renderer: am5xy.AxisRendererY.new(root, { opposite: false })
                 })
             );
+            
+            const keyName = ['maximum', 'minimum']
+
+            for(let i = 0; i < keyName.length; i++) {
+                let key = keyName[i];
+                let koreanKey = mapping[key];
+                makeSeries(koreanKey, key, colors[i]);
+            }
 
             // Create series
             // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-            let series = chart.series.push(
-                am5xy.ColumnSeries.new(root, {
-                    name: "Series 1",
-                    xAxis: xAxis,
-                    yAxis: yAxis,
-                    valueYField: "value",
-                    sequencedInterpolation: true,
-                    categoryXField: "category",
-                    tooltip: am5.Tooltip.new(root, {
-                        labelText: "{provider} {realName}: {valueY}"
+            function makeSeries(name, fieldName, color) {
+                let series = chart.series.push(
+                    am5xy.ColumnSeries.new(root, {
+                        name: name,
+                        xAxis: xAxis,
+                        yAxis: yAxis,
+                        valueYField: fieldName,
+                        sequencedInterpolation: true,
+                        categoryXField: columnX,
+                        fill: color,
+                        tooltip: am5.Tooltip.new(root, {
+                            labelText: "{name} : {valueY}"
+                        })
                     })
-                })
-            );
+                );
 
-            series.columns.template.setAll({
-                fillOpacity: 0.9,
-                strokeOpacity: 0
-            });
+                series.columns.template.setAll({
+                    fillOpacity: 0.9,
+                    strokeOpacity: 0
+                });
 
 
-            series.columns.template.adapters.add("fill", function (fill, target) {
-                const dataIndex = series.dataItems.indexOf(target.dataItem);
+                /* series.columns.template.adapters.add("fill", function (fill, target) {
+                    const dataIndex = series.dataItems.indexOf(target.dataItem);
 
-                // Check if the data index is valid
-                if (dataIndex !== -1) {
-                    // Calculate the reverse index to apply colors from the end of the array
-                    const reverseIndex = series.dataItems.length - 1 - dataIndex;
+                    // Check if the data index is valid
+                    if (dataIndex !== -1) {
+                        // Calculate the reverse index to apply colors from the end of the array
+                        const reverseIndex = series.dataItems.length - 1 - dataIndex;
 
-                    // Use the provided colors array
-                    return color[reverseIndex % color.length];
-                } else {
-                    // If data index is invalid, use the default chart colors
-                    return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));
-                }
-            });
+                        // Use the provided colors array
+                        return color[reverseIndex % color.length];
+                    } else {
+                        // If data index is invalid, use the default chart colors
+                        return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));
+                    }
+                }); */
 
-            // series.columns.template.adapters.add("stroke", (stroke, target) => {
-            //     return chart.get("colors").getIndex(series.columns.indexOf(target));
-            // });
+                series.columns.template.adapters.add("stroke", (stroke, target) => {
+                return chart.get("colors").getIndex(series.columns.indexOf(target));
+                });
+
+                series.data.setAll(data);
+                series.appear(1000);
+            }
+            
 
             let lineSeries = chart.series.push(
                 am5xy.LineSeries.new(root, {
                     name: "평균",
                     xAxis: xAxis,
                     yAxis: yAxis,
-                    valueYField: "quantity",
+                    valueYField: "average",
                     sequencedInterpolation: true,
                     stroke: chart.get("colors").getIndex(13),
                     fill: chart.get("colors").getIndex(13),
-                    categoryXField: "category",
+                    categoryXField: "city",
                     tooltip: am5.Tooltip.new(root, {
-                        labelText: "{name}{valueY}"
+                        labelText: "평균 : {valueY}"
                     })
                 })
             );

                     }
                 });
             });
-
-            let chartData = [];
+            
+            lineSeries.data.setAll(data);
+            lineSeries.appear(1000);
+            // let chartData = [];
 
             // process data ant prepare it for the chart
-            for (var providerName in data) {
-                //첫번째 데이터 
-                let providerData = data[providerName];
+            // for (var providerName in data) {
+            //     //첫번째 데이터 
+            //     let providerData = data[providerName];
 
 
-                // add data of one provider to temp array
-                let tempArray = [];
-                let count = 0;
-                // add items
-                for (var itemName in providerData) {
-                    if (itemName != "quantity") {
-                        count++;
-                        // we generate unique category for each column (providerName + "_" + itemName) and store realName
-                        tempArray.push({
-                            name: itemName + count,
-                            category: providerName + "_" + itemName,
-                            realName: itemName,
-                            value: providerData[itemName],
-                            provider: providerName
-                        });
-                    }
-                }
-                // sort temp array
-                tempArray.sort(function (a, b) {
-                    if (a.value > b.value) {
-                        return 1;
-                    } else if (a.value < b.value) {
-                        return -1;
-                    } else {
-                        return 0;
-                    }
-                });
+            //     // add data of one provider to temp array
+            //     let tempArray = [];
+            //     let count = 0;
+            //     // add items
+            //     for (var itemName in providerData) {
+            //         if (itemName != "quantity") {
+            //             count++;
+            //             // we generate unique category for each column (providerName + "_" + itemName) and store realName
+            //             tempArray.push({
+            //                 name: itemName + count,
+            //                 category: providerName + "_" + itemName,
+            //                 realName: itemName,
+            //                 value: providerData[itemName],
+            //                 provider: providerName
+            //             });
+            //         }
+            //     }
+            //     // sort temp array
+            //     tempArray.sort(function (a, b) {
+            //         if (a.value > b.value) {
+            //             return 1;
+            //         } else if (a.value < b.value) {
+            //             return -1;
+            //         } else {
+            //             return 0;
+            //         }
+            //     });
+                
+            //     console.log("chart data: ", tempArray);
+            //     // add quantity and count to middle data item (line series uses it)
+            //     let lineSeriesDataIndex = Math.floor(count / 2);
+            //     tempArray[lineSeriesDataIndex].quantity = providerData.quantity;
+            //     tempArray[lineSeriesDataIndex].count = count;
+            //     // push to the final data
+            //     am5.array.each(tempArray, function (item) {
+            //         chartData.push(item);
+            //     });
 
-                // add quantity and count to middle data item (line series uses it)
-                let lineSeriesDataIndex = Math.floor(count / 2);
-                tempArray[lineSeriesDataIndex].quantity = providerData.quantity;
-                tempArray[lineSeriesDataIndex].count = count;
-                // push to the final data
-                am5.array.each(tempArray, function (item) {
-                    chartData.push(item);
-                });
+            //     // create range (the additional label at the bottom)
 
-                // create range (the additional label at the bottom)
+            //     let range = xAxis.makeDataItem({});
+            //     xAxis.createAxisRange(range);
 
-                let range = xAxis.makeDataItem({});
-                xAxis.createAxisRange(range);
+            //     range.set("category", tempArray[0].category);
+            //     range.set("endCategory", tempArray[tempArray.length - 1].category);
 
-                range.set("category", tempArray[0].category);
-                range.set("endCategory", tempArray[tempArray.length - 1].category);
+            //     let label = range.get("label");
 
-                let label = range.get("label");
+            //     label.setAll({
+            //         text: tempArray[0].provider,
+            //         dy: 0,
+            //         fontWeight: "bold",
+            //         tooltipText: tempArray[0].provider
+            //     });
 
-                label.setAll({
-                    text: tempArray[0].provider,
-                    dy: 0,
-                    fontWeight: "bold",
-                    tooltipText: tempArray[0].provider
-                });
+            //     // let tick = range.get("tick");
+            //     // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 0 });
 
-                // let tick = range.get("tick");
-                // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 0 });
+            //     let grid = range.get("grid");
+            //     grid.setAll({ strokeOpacity: 1 });
+            // }
 
-                let grid = range.get("grid");
-                grid.setAll({ strokeOpacity: 1 });
-            }
+            // // add range for the last grid
+            // let range = xAxis.makeDataItem({});
+            // xAxis.createAxisRange(range);
+            // range.set("category", chartData[chartData.length - 1].category);
+            // // let tick = range.get("tick");
+            // // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 1 });
 
-            // add range for the last grid
-            let range = xAxis.makeDataItem({});
-            xAxis.createAxisRange(range);
-            range.set("category", chartData[chartData.length - 1].category);
-            // let tick = range.get("tick");
-            // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 1 });
-
-            let grid = range.get("grid");
-            grid.setAll({ strokeOpacity: 1, location: 1 });
+            // let grid = range.get("grid");
+            // grid.setAll({ strokeOpacity: 1, location: 1 });
 
 
 
-            xAxis.data.setAll(chartData);
-            series.data.setAll(chartData);
-            lineSeries.data.setAll(chartData);
+            
 
-            console.log("::::",series.data._values)
+            // console.log("::::",series.data._values)
             let legend = chart.children.unshift(am5.Legend.new(root, {
                 x: am5.percent(100), // 범례 중심 위치 (50: 중앙)
                 centerX: am5.percent(80), // 범례 중심 위치 (50: 중앙)

 
             // Make stuff animate on load
             // https://www.amcharts.com/docs/v5/concepts/animations/
-            series.appear(1000);
+            
             chart.appear(1000, 100);
         }
     },
     watch: {
-        'setData': function (newData) {  
-            this.chartCreate(newData, this.color)
+        'setData': function (newData) { 
+            this.chartCreate(newData, this.mapping, this.columnX, this.color)
         }
     },
     computed: {

06015d6

f16558e

client/views/components/NetworkingChart.vue

--- client/views/components/NetworkingChart.vue

+++ client/views/components/NetworkingChart.vue


                 singleBranchOnly: false,
                 downDepth: 1,
                 initialDepth: 2,
-                valueField: "value",
-                categoryField: "name",
+                valueField: "average",
+                categoryField: "city",
                 childDataField: "children",
                 centerStrength: 0.5,
                 minRadius: 20,

     },
     watch: {
         'setData': function (newData) {
-            console.log('newData  -  ', newData)
             this.chartCreate(newData)
         }
     },

06015d6

f16558e

client/views/components/PeiChart.vue

--- client/views/components/PeiChart.vue

+++ client/views/components/PeiChart.vue


             // Create series
             // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
             let series = chart.series.push(am5percent.PieSeries.new(root, {
-                valueField: "value",
-                categoryField: "category"
+                valueField: "city_count",
+                categoryField: "city"
             }));
 
 

     },
     watch: {
         'setData': function (newData) {
-            console.log('newData  -  ', newData)
             this.chartCreate(newData)
         }
     },

06015d6

f16558e

client/views/components/VerticalBarChart.vue

--- client/views/components/VerticalBarChart.vue

+++ client/views/components/VerticalBarChart.vue


 
             let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                 maxDeviation: 0.3,
-                min: 0,
                 renderer: am5xy.AxisRendererY.new(root, {
                     strokeOpacity: 0.1,
-                    inversed: true
+                    inversed: false
                 })
             }));
 

06015d6

f16558e

client/views/pages/Main/Main.vue

--- client/views/pages/Main/Main.vue

+++ client/views/pages/Main/Main.vue


                 <div class="chart-title">
                     <div class="flex">
                         <p>월별 평균 길이 Z축 마모</p>
-                        <select name="" id="">
+                        <select name="" id="" v-model="month_tl_no" @change="monthChange()">
                             <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                         </select>
                     </div>
                 </div>
-                <VerticalBarChart :chartData="emptyData" xField="month" yField="value" />
+                <VerticalBarChart :chartData="monthData" xField="ormpm_month" yField="avg_ofs5" />
             </div>
             <div class="content-box">
                 <div class="chart-title">
                     <div class="flex">
                         <p>시간대별 평균 길이 Z축 마모</p>
-                        <select name="" id="">
+                        <select name="" id="" v-model="time_tl_no" @change="timeChange()">
                             <option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
                         </select>
                     </div>
                 </div>
-                <VerticalBarChart :chartData="emptyTimeData" :xField="'time'" :yField="'value'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
+                <VerticalBarChart :chartData="timeData" :xField="'ormpm_hour'" :yField="'avg_ofs5'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
             </div>
             <div class="content-box">
                 <div class="chart-title">

                         <p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
                     </div>
                 </div>
-                <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
+                <LineChart :chartData="toolZWearData" :xField="'search_date'" />
             </div>
             <div class="content-box">
                 <div class="chart-title">

                         <p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
                     </div>
                 </div>
-                <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
+                <LineChart :chartData="toolXWearData" :xField="'search_date'" />
             </div>
         </div>
     </div>

 <script>
 import VerticalBarChart from '../../components/VerticalBarChart.vue';
 import LineChart from '../../components/LineChart.vue';
+import axios from 'axios';
 
 export default {
     data() {
         return {
-            tools: ["T1", "T2", "T3", "T4", "T5"],
+            tools: ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8"],
+            month_tl_no: "T4",
+            time_tl_no: "T4",
             // 월별 데이터
             emptyData: [],
-            monthToolData: [
-                { month: "2023.11", value: 300 }
-
-            ],
+            monthData: [],
             // 시간대별
-            emptyTimeData: [],
-            timeData: [
-                { time: "01", value: 300 },
-                { time: "02", value: 300 },
-                { time: "03", value: 300 },
-                { time: "04", value: 300 },
-                { time: "05", value: 300 },
-                { time: "06", value: 300 },
-                { time: "07", value: 300 },
-            ],
-            // z축 마모 라인 데이터,
-            lineDataKeyMapping: {
-                date: "날짜",
-                value1: "T1",
-                value2: "T2",
-                value3: "T3",
-            },
-            emptyLineData: [],
-            lineData: [
-                { date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
-                { date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
-                { date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
-            ]
+            timeData: [],
+
+            toolZWearData: [],
+
+            toolXWearData: [],
         }
     },
     methods: {
+        timeZWear: function(){
+            const vm = this;
+            axios({
+                url: '/hwaSin/timeZWear.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: {tl_no : vm.time_tl_no}
+            }).then(function(response) {
+                vm.timeData = response.data;
+            }).catch(function() {
+                alert("시간대별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
+            })
+        },
+
+        timeChange: function() {
+            this.timeZWear();
+        },
+
+        monthZWear: function(){
+            const vm = this;
+            axios({
+                url: '/hwaSin/monthZWear.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: {tl_no : vm.month_tl_no}
+            }).then(function(response) {
+                vm.monthData = response.data;
+            }).catch(function() {
+                alert("월별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
+            })
+        },
+        
+        monthChange: function() {
+            this.monthZWear();
+        },
+
+        toolWear: function() {
+            const vm = this;
+
+            axios({
+                url: '/hwaSin/toolWear.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+            }).then(function(response) {
+                vm.toolZWearData = response.data.toolZWear;
+                vm.toolXWearData = response.data.toolXWear;
+            }).catch(function() {
+                alert("가동시간에 따른 각 툴별(도구) 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
+            })
+        },
+
+
+
         dataSet: function () {
             this.emptyData = this.monthToolData;
             this.emptyTimeData = this.timeData;

     },
     mounted() {
         this.dataSet();
+        this.timeZWear();
+        this.monthZWear();
+        this.toolWear();
     }
 }
 </script>

06015d6

f16558e

client/views/pages/transit/Transit.vue

--- client/views/pages/transit/Transit.vue

+++ client/views/pages/transit/Transit.vue

...	...	@@ -11,84 +11,29 @@
11	11	<div class="chart-title">
12	12	<div class="flex">
13	13	<p>각 시도별 평균, 최소, 최대 이동거리</p>
14		- <select name="" id="">
15		- <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
	14	+ <select name="" id="" v-model="distanceMonth" @change="distanceMonthChange()">
	15	+ <option :value=null disabled>전체</option>
	16	+ <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
16	17	</select>
17	18	</div>
18	19	</div>
19		- <MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
20		- <table>
	20	+ <MultiBarChart :setData="distanceList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
	21	+ <table v-if="distanceList.length != 0">
21	22	<tr>
22	23	<th></th>
23		- <th>경기</th>
24		- <th>경남</th>
25		- <th>경북</th>
26		- <th>광주</th>
27		- <th>대구</th>
28		- <th>대전</th>
29		- <th>부산</th>
30		- <th>서울</th>
31		- <th>울산</th>
32		- <th>인천</th>
33		- <th>전남</th>
34		- <th>전북</th>
35		- <th>제주</th>
36		- <th>충남</th>
37		- <th>충북</th>
38		- </tr>
39		- <tr>
40		- <th class="min-title">최소</th>
41		- <td>0</td>
42		- <td>0</td>
43		- <td>0</td>
44		- <td>0</td>
45		- <td>0</td>
46		- <td>0</td>
47		- <td>0</td>
48		- <td>0</td>
49		- <td>0</td>
50		- <td>0</td>
51		- <td>0</td>
52		- <td>0</td>
53		- <td>0</td>
54		- <td>0</td>
55		- <td>0</td>
56		- </tr>
57		- <tr>
58		- <th class="avg-title">평균</th>
59		- <td>0</td>
60		- <td>0</td>
61		- <td>0</td>
62		- <td>0</td>
63		- <td>0</td>
64		- <td>0</td>
65		- <td>0</td>
66		- <td>0</td>
67		- <td>0</td>
68		- <td>0</td>
69		- <td>0</td>
70		- <td>0</td>
71		- <td>0</td>
72		- <td>0</td>
73		- <td>0</td>
	24	+ <th v-for="(item, index) in distanceList" :key="index">{{ item.city }}</th>
74	25	</tr>
75	26	<tr>
76	27	<th class="max-title">최대</th>
77		- <td>0</td>
78		- <td>0</td>
79		- <td>0</td>
80		- <td>0</td>
81		- <td>0</td>
82		- <td>0</td>
83		- <td>0</td>
84		- <td>0</td>
85		- <td>0</td>
86		- <td>0</td>
87		- <td>0</td>
88		- <td>0</td>
89		- <td>0</td>
90		- <td>0</td>
91		- <td>0</td>
	28	+ <td v-for="(item, index) in distanceList" :key="index">{{ item.maximum }}</td>
	29	+ </tr>
	30	+ <tr>
	31	+ <th class="avg-title">평균</th>
	32	+ <td v-for="(item, index) in distanceList" :key="index">{{ item.average }}</td>
	33	+ </tr>
	34	+ <tr>
	35	+ <th class="min-title">최소</th>
	36	+ <td v-for="(item, index) in distanceList" :key="index">{{ item.minimum }}</td>
92	37	</tr>
93	38	</table>
94	39	</div>
...	...	@@ -96,84 +41,29 @@
96	41	<div class="chart-title">
97	42	<div class="flex">
98	43	<p>각 시도별 평균, 최소, 최대 소요시간</p>
99		- <select name="" id="">
100		- <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
	44	+ <select name="" id="" v-model="timeMonth" @change="useTimeMonthChange()">
	45	+ <option :value=null disabled>전체</option>
	46	+ <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
101	47	</select>
102	48	</div>
103	49	</div>
104		- <MultiBarChart :setData="emptyData" :color="['#339af0','#e67700']" />
105		- <table>
	50	+ <MultiBarChart :setData="useTimeList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
	51	+ <table v-if="useTimeList.length != 0">
106	52	<tr>
107	53	<th></th>
108		- <th>경기</th>
109		- <th>경남</th>
110		- <th>경북</th>
111		- <th>광주</th>
112		- <th>대구</th>
113		- <th>대전</th>
114		- <th>부산</th>
115		- <th>서울</th>
116		- <th>울산</th>
117		- <th>인천</th>
118		- <th>전남</th>
119		- <th>전북</th>
120		- <th>제주</th>
121		- <th>충남</th>
122		- <th>충북</th>
123		- </tr>
124		- <tr>
125		- <th class="min-title">최소</th>
126		- <td>0</td>
127		- <td>0</td>
128		- <td>0</td>
129		- <td>0</td>
130		- <td>0</td>
131		- <td>0</td>
132		- <td>0</td>
133		- <td>0</td>
134		- <td>0</td>
135		- <td>0</td>
136		- <td>0</td>
137		- <td>0</td>
138		- <td>0</td>
139		- <td>0</td>
140		- <td>0</td>
141		- </tr>
142		- <tr>
143		- <th class="avg-title">평균</th>
144		- <td>0</td>
145		- <td>0</td>
146		- <td>0</td>
147		- <td>0</td>
148		- <td>0</td>
149		- <td>0</td>
150		- <td>0</td>
151		- <td>0</td>
152		- <td>0</td>
153		- <td>0</td>
154		- <td>0</td>
155		- <td>0</td>
156		- <td>0</td>
157		- <td>0</td>
158		- <td>0</td>
	54	+ <th v-for="(item, index) in useTimeList" :key="index">{{ item.city }}</th>
159	55	</tr>
160	56	<tr>
161	57	<th class="max-title">최대</th>
162		- <td>0</td>
163		- <td>0</td>
164		- <td>0</td>
165		- <td>0</td>
166		- <td>0</td>
167		- <td>0</td>
168		- <td>0</td>
169		- <td>0</td>
170		- <td>0</td>
171		- <td>0</td>
172		- <td>0</td>
173		- <td>0</td>
174		- <td>0</td>
175		- <td>0</td>
176		- <td>0</td>
	58	+ <td v-for="(item, index) in useTimeList" :key="index">{{ item.maximum }}</td>
	59	+ </tr>
	60	+ <tr>
	61	+ <th class="avg-title">평균</th>
	62	+ <td v-for="(item, index) in useTimeList" :key="index">{{ item.average }}</td>
	63	+ </tr>
	64	+ <tr>
	65	+ <th class="min-title">최소</th>
	66	+ <td v-for="(item, index) in useTimeList" :key="index">{{ item.minimum }}</td>
177	67	</tr>
178	68	</table>
179	69	</div>
...	...	@@ -183,7 +73,7 @@
183	73	<p>지역별 배송 건수</p>
184	74	</div>
185	75	</div>
186		- <PieChart :setData="emptyPieData" />
	76	+ <PieChart :setData="deliveriesCountList" />
187	77	</div>
188	78	<div class="content-box">
189	79	<div class="chart-title">
...	...	@@ -191,7 +81,7 @@
191	81	<p>지역별 평균 이동 시간</p>
192	82	</div>
193	83	</div>
194		- <NetworkingChart :setData="emptyNetData" />
	84	+ <NetworkingChart :setData="travelTimeList" />
195	85	</div>
196	86	</div>
197	87	</div>
...	...	@@ -199,134 +89,106 @@
199	89
200	90	<script>
201	91
202		-import MultiBarChart from '../../components/MultiBarChart.vue'
203		-import PieChart from '../../components/PeiChart.vue'
204		-import NetworkingChart from '../../components/NetworkingChart.vue'
	92	+import MultiBarChart from '../../components/MultiBarChart.vue';
	93	+import PieChart from '../../components/PeiChart.vue';
	94	+import NetworkingChart from '../../components/NetworkingChart.vue';
	95	+import axios from 'axios';
205	96
206	97	export default {
207	98	data() {
208	99	return {
209		- months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
210		- // 이동 거리 및 소요시간 더미 데이터
211		- emptyData: {},
212		- distanceData: {
213		- 경기: {
214		- min: 10,
215		- max: 35,
216		- quantity: 430
217		- },
218		- 경남: {
219		- min: 15,
220		- max: 21,
221		- quantity: 210
222		- },
223		- 경북: {
224		- min: 25,
225		- max: 11,
226		- quantity: 265
227		- },
228		- 광주: {
229		- min: 12,
230		- max: 15,
231		- quantity: 98
232		- },
233		- 대구: {
234		- min: 12,
235		- max: 15,
236		- quantity: 98
237		- },
238		- 대전: {
239		- min: 12,
240		- max: 15,
241		- quantity: 98
242		- },
243		- 부산: {
244		- min: 12,
245		- max: 15,
246		- quantity: 98
247		- },
248		- 서울: {
249		- min: 12,
250		- max: 15,
251		- quantity: 98
252		- },
253		- 울산: {
254		- min: 12,
255		- max: 15,
256		- quantity: 98
257		- },
258		- 인천: {
259		- min: 12,
260		- max: 15,
261		- quantity: 98
262		- },
263		- 전남: {
264		- min: 12,
265		- max: 15,
266		- quantity: 98
267		- },
268		- 전북: {
269		- min: 12,
270		- max: 15,
271		- quantity: 98
272		- },
273		- 제주: {
274		- min: 12,
275		- max: 15,
276		- quantity: 98
277		- },
278		- 충남: {
279		- min: 12,
280		- max: 15,
281		- quantity: 98
282		- },
283		- 충북: {
284		- min: 12,
285		- max: 15,
286		- quantity: 98
287		- }
	100	+ months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
	101	+
	102	+ keyMapping : {
	103	+ maximum: '최대',
	104	+ minimum: '최소',
	105	+ average: '평균'
288	106	},
289		- // 파이차트 데이터
290		- emptyPieData: [],
291		- pieData: [
292		- { value: 10, category: "One" },
293		- { value: 9, category: "Two" },
294		- { value: 6, category: "Three" },
295		- { value: 5, category: "Four" },
296		- { value: 4, category: "Five" },
297		- { value: 3, category: "Six" },
298		- { value: 1, category: "Seven" }
299		- ],
300		- // 네트워크 데이터
301		- emptyNetData: [],
302		- netData: {
303		- name: "경북영천시고경면삼포리",
304		- children: [
305		- { name: "경기", value: 320 },
306		- { name: "경남", value: 160 },
307		- { name: "경북", value: 40 },
308		- { name: "광주", value: 350 },
309		- { name: "대구", value: 90 },
310		- { name: "대전", value: 250 },
311		- { name: "부산", value: 120 },
312		- { name: "서울", value: 360 },
313		- { name: "울산", value: 85 },
314		- { name: "인천", value: 370 },
315		- { name: "전남", value: 400 },
316		- { name: "전북", value: 300 },
317		- { name: "제주", value: 600 },
318		- { name: "충남", value: 280 },
319		- { name: "충북", value: 230 }
320		- ]
321		- }
	107	+
	108	+ distanceMonth: null,
	109	+ timeMonth: null,
	110	+
	111	+ distanceList: [],
	112	+ useTimeList: [],
	113	+ deliveriesCountList: [],
	114	+ travelTimeList: {},
322	115	}
323	116	},
324	117	methods: {
325		- dataSet: function () {
326		- this.emptyData = this.distanceData;
327		- this.emptyPieData = this.pieData;
328		- this.emptyNetData=this.netData;
329		- }
	118	+ travelDistance: function(){
	119	+ const vm = this;
	120	+ axios({
	121	+ url: '/meatKorea/travelDistance.json',
	122	+ method: 'post',
	123	+ hearder: {
	124	+ 'Content-Type': "application/json; charset=UTF-8",
	125	+ },
	126	+ data: {distanceMonth : vm.distanceMonth}
	127	+ }).then(function(response) {
	128	+ vm.distanceList = response.data;
	129	+ console.log('distanceList', vm.distanceList.length)
	130	+ }).catch(function() {
	131	+ alert("각 시도별 평균, 최소, 최대 이동거리 조회 오류, 관리자에게 문의 바랍니다.")
	132	+ })
	133	+ },
	134	+
	135	+ distanceMonthChange: function() {
	136	+ this.travelDistance();
	137	+ },
	138	+
	139	+ useTime: function(){
	140	+ const vm = this;
	141	+ axios({
	142	+ url: '/meatKorea/useTime.json',
	143	+ method: 'post',
	144	+ hearder: {
	145	+ 'Content-Type': "application/json; charset=UTF-8",
	146	+ },
	147	+ data: {timeMonth : vm.timeMonth}
	148	+ }).then(function(response) {
	149	+
	150	+ vm.useTimeList = response.data;
	151	+ }).catch(function() {
	152	+ alert("각 시도별 평균, 최소, 최대 소요시간 조회 오류, 관리자에게 문의 바랍니다.")
	153	+ })
	154	+ },
	155	+
	156	+ useTimeMonthChange: function() {
	157	+ this.useTime();
	158	+ },
	159	+
	160	+ deliveriesCount: function(){
	161	+ const vm = this;
	162	+ axios({
	163	+ url: '/meatKorea/deliveriesCount.json',
	164	+ method: 'post',
	165	+ hearder: {
	166	+ 'Content-Type': "application/json; charset=UTF-8",
	167	+ },
	168	+ }).then(function(response) {
	169	+ vm.deliveriesCountList = response.data;
	170	+ }).catch(function() {
	171	+ alert("지역별 배송 건수 조회 오류, 관리자에게 문의 바랍니다.")
	172	+ })
	173	+ },
	174	+
	175	+ travelTime: function(){
	176	+ const vm = this;
	177	+ axios({
	178	+ url: '/meatKorea/travelTime.json',
	179	+ method: 'post',
	180	+ hearder: {
	181	+ 'Content-Type': "application/json; charset=UTF-8",
	182	+ },
	183	+ }).then(function(response) {
	184	+ const travelTime = {};
	185	+ travelTime.city = '경북영천시고경면삼포리';
	186	+ travelTime.children = response.data;
	187	+ vm.travelTimeList = travelTime;
	188	+ }).catch(function() {
	189	+ alert("지역별 평균 이동 시간 조회 오류, 관리자에게 문의 바랍니다.")
	190	+ })
	191	+ },
330	192	},
331	193	watch: {
332	194
...	...	@@ -338,7 +200,10 @@
338	200	'NetworkingChart':NetworkingChart
339	201	},
340	202	mounted() {
341		- this.dataSet();
	203	+ this.travelDistance();
	204	+ this.useTime();
	205	+ this.deliveriesCount();
	206	+ this.travelTime();
342	207	}
343	208	}
344	209	</script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,7 +4,7 @@
4	4	const LOG_BASE_DIR = `${__dirname}/server/logs`;
5	5	const SERVICE_STATUS = process.env.NODE_ENV;//development, production
6	6	const PORT = 80;
7		-const API_SERVER_HOST = 'localhost:8080';
	7	+const API_SERVER_HOST = 'localhost:9090';
8	8
9	9	module.exports = {
10	10	PROJECT_NAME,

...	...	@@ -21,6 +21,7 @@
21	21	default: null
22	22	// required: true,
23	23	},
	24	+
24	25	},
25	26	data() {
26	27	return {
...	...	@@ -28,28 +29,28 @@
28	29	};
29	30	},
30	31	methods: {
31		- createChart(data, keyMapping, xField) {
32		- console.log(typeof(xField));
33		- let mappedData = [];
34		- let keys = Object.keys(data[0]);
	32	+ createChart(data, xField) {
	33	+ // console.log(typeof(xField));
	34	+ // let mappedData = [];
	35	+ // let keys = Object.keys(data[0]);
35	36
36		- for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
37		- let currentItem = data[dataIndex];
38		- let mappedItem = {};
	37	+ // for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
	38	+ // let currentItem = data[dataIndex];
	39	+ // let mappedItem = {};
39	40
40		- for (let i = 0; i < keys.length; i++) {
41		- let key = keys[i];
42		- let koreanKey = keyMapping[key];
	41	+ // for (let i = 0; i < keys.length; i++) {
	42	+ // let key = keys[i];
	43	+ // let koreanKey = keyMapping[key];
43	44
44		- if (koreanKey) {
45		- mappedItem[koreanKey] = currentItem[key];
46		- }
47		- }
	45	+ // if (koreanKey) {
	46	+ // mappedItem[koreanKey] = currentItem[key];
	47	+ // }
	48	+ // }
48	49
49		- mappedData.push(mappedItem);
50		- }
	50	+ // mappedData.push(mappedItem);
	51	+ // }
51	52
52		- console.log("mappedData - ",mappedData)
	53	+ // console.log("mappedData - ",mappedData)
53	54
54	55	let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
55	56	chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
...	...	@@ -101,7 +102,13 @@
101	102	location: 1
102	103	})
103	104
104		- xAxis.data.setAll(mappedData);
	105	+ /* let lineData = [
	106	+ { search_date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
	107	+ { search_date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
	108	+ { search_date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
	109	+ ] */
	110	+
	111	+ xAxis.data.setAll(data);
105	112
106	113	let yAxis = chart.yAxes.push(
107	114	am5xy.ValueAxis.new(root, {
...	...	@@ -113,9 +120,9 @@
113	120	})
114	121	);
115	122
116		-
117	123	// Add series
118		- Object.keys(mappedData[0]).forEach((key, index) => {
	124	+ Object.keys(data[0]).forEach((key, index) => {
	125	+ console.log('key', key)
119	126	if (key !== xField) {
120	127	let series = chart.series.push(am5xy.LineSeries.new(root, {
121	128	name: key,
...	...	@@ -128,40 +135,45 @@
128	135	})
129	136	}));
130	137
131		-
132		-
133	138	series.strokes.template.setAll({
134	139	strokeWidth: 2
135	140	});
136	141
137	142	series.get("tooltip").get("background").set("fillOpacity", 0.5);
138		-
139		-
140		- series.data.setAll(mappedData.map(item => ({
	143	+
	144	+ /* console.log('!!!!!',data.map(item => ({
141	145	[xField]: item[xField],
142	146	[key]: item[key]
143		- })));
	147	+ }))); */
	148	+ console.log("data: ", key, xField, data);
144	149
145		-
146		-
	150	+ // series.data.setAll(data.map(item => ({
	151	+ // [xField]: item[xField],
	152	+ // [key]: item[key]
	153	+ // })));
	154	+ series.data.setAll(data);
	155	+ series.appear(1000);
147	156	}
148	157	});
149	158
150	159
151	160	// Make stuff animate on load
152	161	// https://www.amcharts.com/docs/v5/concepts/animations/
153		- chart.series.each((series) => {
	162	+ /* chart.series.each((series) => {
154	163	series.appear(1000);
155		- });
	164	+ }); */
156	165	chart.appear(1000, 100);
	166	+
	167	+ // for (let i = 1; i < data.length; i++) {
	168	+ // createSeries(valueDataList[i], valueDataList[i], options['seriesColorList'][i]);
	169	+ // }
157	170
158	171	}
159	172
160	173	},
161	174	watch: {
162	175	'chartData': function (newData) {
163		- console.log('newData - ', newData)
164		- this.createChart(newData,this.keyMapping,this.xField);
	176	+ this.createChart(newData ,this.xField);
165	177	}
166	178	},
167	179	mounted() {

...	...	@@ -12,9 +12,17 @@
12	12	export default {
13	13	props: {
14	14	setData: {
15		- type: Object,
16		- default: {},
17		- }, color: {
	15	+ type: Array,
	16	+ default: [],
	17	+ },
	18	+ mapping: {
	19	+ type: Array,
	20	+ default: [],
	21	+ },
	22	+ columnX: {
	23	+ type: String
	24	+ },
	25	+ color: {
18	26	type: Array,
19	27	default: [],
20	28	},
...	...	@@ -25,7 +33,7 @@
25	33	};
26	34	},
27	35	methods: {
28		- chartCreate: function (data, color) {
	36	+ chartCreate: function (data, mapping, columnX, colors) {
29	37	let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
30	38	chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
31	39	let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
...	...	@@ -68,18 +76,18 @@
68	76	minorGridEnabled: true
69	77	});
70	78
71		- xRenderer.labels.template.setAll({ text: "" });
72		-
73	79	let xAxis = chart.xAxes.push(
74	80	am5xy.CategoryAxis.new(root, {
75	81	maxDeviation: 0,
76		- categoryField: "category",
	82	+ categoryField: columnX,
77	83	renderer: xRenderer,
78	84	tooltip: am5.Tooltip.new(root, {
79		- labelText: "{realName}"
	85	+ labelText: "{city}"
80	86	})
81	87	})
82	88	);
	89	+
	90	+ xAxis.data.setAll(data);
83	91
84	92	// let yAxis = chart.yAxes.push(
85	93	// am5xy.ValueAxis.new(root, {
...	...	@@ -94,61 +102,76 @@
94	102	renderer: am5xy.AxisRendererY.new(root, { opposite: false })
95	103	})
96	104	);
	105	+
	106	+ const keyName = ['maximum', 'minimum']
	107	+
	108	+ for(let i = 0; i < keyName.length; i++) {
	109	+ let key = keyName[i];
	110	+ let koreanKey = mapping[key];
	111	+ makeSeries(koreanKey, key, colors[i]);
	112	+ }
97	113
98	114	// Create series
99	115	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
100		- let series = chart.series.push(
101		- am5xy.ColumnSeries.new(root, {
102		- name: "Series 1",
103		- xAxis: xAxis,
104		- yAxis: yAxis,
105		- valueYField: "value",
106		- sequencedInterpolation: true,
107		- categoryXField: "category",
108		- tooltip: am5.Tooltip.new(root, {
109		- labelText: "{provider} {realName}: {valueY}"
	116	+ function makeSeries(name, fieldName, color) {
	117	+ let series = chart.series.push(
	118	+ am5xy.ColumnSeries.new(root, {
	119	+ name: name,
	120	+ xAxis: xAxis,
	121	+ yAxis: yAxis,
	122	+ valueYField: fieldName,
	123	+ sequencedInterpolation: true,
	124	+ categoryXField: columnX,
	125	+ fill: color,
	126	+ tooltip: am5.Tooltip.new(root, {
	127	+ labelText: "{name} : {valueY}"
	128	+ })
110	129	})
111		- })
112		- );
	130	+ );
113	131
114		- series.columns.template.setAll({
115		- fillOpacity: 0.9,
116		- strokeOpacity: 0
117		- });
	132	+ series.columns.template.setAll({
	133	+ fillOpacity: 0.9,
	134	+ strokeOpacity: 0
	135	+ });
118	136
119	137
120		- series.columns.template.adapters.add("fill", function (fill, target) {
121		- const dataIndex = series.dataItems.indexOf(target.dataItem);
	138	+ /* series.columns.template.adapters.add("fill", function (fill, target) {
	139	+ const dataIndex = series.dataItems.indexOf(target.dataItem);
122	140
123		- // Check if the data index is valid
124		- if (dataIndex !== -1) {
125		- // Calculate the reverse index to apply colors from the end of the array
126		- const reverseIndex = series.dataItems.length - 1 - dataIndex;
	141	+ // Check if the data index is valid
	142	+ if (dataIndex !== -1) {
	143	+ // Calculate the reverse index to apply colors from the end of the array
	144	+ const reverseIndex = series.dataItems.length - 1 - dataIndex;
127	145
128		- // Use the provided colors array
129		- return color[reverseIndex % color.length];
130		- } else {
131		- // If data index is invalid, use the default chart colors
132		- return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));
133		- }
134		- });
	146	+ // Use the provided colors array
	147	+ return color[reverseIndex % color.length];
	148	+ } else {
	149	+ // If data index is invalid, use the default chart colors
	150	+ return chart.get("colors").getIndex(series.dataItems.indexOf(target.dataItem));
	151	+ }
	152	+ }); */
135	153
136		- // series.columns.template.adapters.add("stroke", (stroke, target) => {
137		- // return chart.get("colors").getIndex(series.columns.indexOf(target));
138		- // });
	154	+ series.columns.template.adapters.add("stroke", (stroke, target) => {
	155	+ return chart.get("colors").getIndex(series.columns.indexOf(target));
	156	+ });
	157	+
	158	+ series.data.setAll(data);
	159	+ series.appear(1000);
	160	+ }
	161	+
139	162
140	163	let lineSeries = chart.series.push(
141	164	am5xy.LineSeries.new(root, {
142	165	name: "평균",
143	166	xAxis: xAxis,
144	167	yAxis: yAxis,
145		- valueYField: "quantity",
	168	+ valueYField: "average",
146	169	sequencedInterpolation: true,
147	170	stroke: chart.get("colors").getIndex(13),
148	171	fill: chart.get("colors").getIndex(13),
149		- categoryXField: "category",
	172	+ categoryXField: "city",
150	173	tooltip: am5.Tooltip.new(root, {
151		- labelText: "{name}{valueY}"
	174	+ labelText: "평균 : {valueY}"
152	175	})
153	176	})
154	177	);
...	...	@@ -182,93 +205,94 @@
182	205	}
183	206	});
184	207	});
185		-
186		- let chartData = [];
	208	+
	209	+ lineSeries.data.setAll(data);
	210	+ lineSeries.appear(1000);
	211	+ // let chartData = [];
187	212
188	213	// process data ant prepare it for the chart
189		- for (var providerName in data) {
190		- //첫번째 데이터
191		- let providerData = data[providerName];
	214	+ // for (var providerName in data) {
	215	+ // //첫번째 데이터
	216	+ // let providerData = data[providerName];
192	217
193	218
194		- // add data of one provider to temp array
195		- let tempArray = [];
196		- let count = 0;
197		- // add items
198		- for (var itemName in providerData) {
199		- if (itemName != "quantity") {
200		- count++;
201		- // we generate unique category for each column (providerName + "_" + itemName) and store realName
202		- tempArray.push({
203		- name: itemName + count,
204		- category: providerName + "_" + itemName,
205		- realName: itemName,
206		- value: providerData[itemName],
207		- provider: providerName
208		- });
209		- }
210		- }
211		- // sort temp array
212		- tempArray.sort(function (a, b) {
213		- if (a.value > b.value) {
214		- return 1;
215		- } else if (a.value < b.value) {
216		- return -1;
217		- } else {
218		- return 0;
219		- }
220		- });
	219	+ // // add data of one provider to temp array
	220	+ // let tempArray = [];
	221	+ // let count = 0;
	222	+ // // add items
	223	+ // for (var itemName in providerData) {
	224	+ // if (itemName != "quantity") {
	225	+ // count++;
	226	+ // // we generate unique category for each column (providerName + "_" + itemName) and store realName
	227	+ // tempArray.push({
	228	+ // name: itemName + count,
	229	+ // category: providerName + "_" + itemName,
	230	+ // realName: itemName,
	231	+ // value: providerData[itemName],
	232	+ // provider: providerName
	233	+ // });
	234	+ // }
	235	+ // }
	236	+ // // sort temp array
	237	+ // tempArray.sort(function (a, b) {
	238	+ // if (a.value > b.value) {
	239	+ // return 1;
	240	+ // } else if (a.value < b.value) {
	241	+ // return -1;
	242	+ // } else {
	243	+ // return 0;
	244	+ // }
	245	+ // });
	246	+
	247	+ // console.log("chart data: ", tempArray);
	248	+ // // add quantity and count to middle data item (line series uses it)
	249	+ // let lineSeriesDataIndex = Math.floor(count / 2);
	250	+ // tempArray[lineSeriesDataIndex].quantity = providerData.quantity;
	251	+ // tempArray[lineSeriesDataIndex].count = count;
	252	+ // // push to the final data
	253	+ // am5.array.each(tempArray, function (item) {
	254	+ // chartData.push(item);
	255	+ // });
221	256
222		- // add quantity and count to middle data item (line series uses it)
223		- let lineSeriesDataIndex = Math.floor(count / 2);
224		- tempArray[lineSeriesDataIndex].quantity = providerData.quantity;
225		- tempArray[lineSeriesDataIndex].count = count;
226		- // push to the final data
227		- am5.array.each(tempArray, function (item) {
228		- chartData.push(item);
229		- });
	257	+ // // create range (the additional label at the bottom)
230	258
231		- // create range (the additional label at the bottom)
	259	+ // let range = xAxis.makeDataItem({});
	260	+ // xAxis.createAxisRange(range);
232	261
233		- let range = xAxis.makeDataItem({});
234		- xAxis.createAxisRange(range);
	262	+ // range.set("category", tempArray[0].category);
	263	+ // range.set("endCategory", tempArray[tempArray.length - 1].category);
235	264
236		- range.set("category", tempArray[0].category);
237		- range.set("endCategory", tempArray[tempArray.length - 1].category);
	265	+ // let label = range.get("label");
238	266
239		- let label = range.get("label");
	267	+ // label.setAll({
	268	+ // text: tempArray[0].provider,
	269	+ // dy: 0,
	270	+ // fontWeight: "bold",
	271	+ // tooltipText: tempArray[0].provider
	272	+ // });
240	273
241		- label.setAll({
242		- text: tempArray[0].provider,
243		- dy: 0,
244		- fontWeight: "bold",
245		- tooltipText: tempArray[0].provider
246		- });
	274	+ // // let tick = range.get("tick");
	275	+ // // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 0 });
247	276
248		- // let tick = range.get("tick");
249		- // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 0 });
	277	+ // let grid = range.get("grid");
	278	+ // grid.setAll({ strokeOpacity: 1 });
	279	+ // }
250	280
251		- let grid = range.get("grid");
252		- grid.setAll({ strokeOpacity: 1 });
253		- }
	281	+ // // add range for the last grid
	282	+ // let range = xAxis.makeDataItem({});
	283	+ // xAxis.createAxisRange(range);
	284	+ // range.set("category", chartData[chartData.length - 1].category);
	285	+ // // let tick = range.get("tick");
	286	+ // // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 1 });
254	287
255		- // add range for the last grid
256		- let range = xAxis.makeDataItem({});
257		- xAxis.createAxisRange(range);
258		- range.set("category", chartData[chartData.length - 1].category);
259		- // let tick = range.get("tick");
260		- // tick.setAll({ visible: true, strokeOpacity: 1, length: 50, location: 1 });
261		-
262		- let grid = range.get("grid");
263		- grid.setAll({ strokeOpacity: 1, location: 1 });
	288	+ // let grid = range.get("grid");
	289	+ // grid.setAll({ strokeOpacity: 1, location: 1 });
264	290
265	291
266	292
267		- xAxis.data.setAll(chartData);
268		- series.data.setAll(chartData);
269		- lineSeries.data.setAll(chartData);
	293	+
270	294
271		- console.log("::::",series.data._values)
	295	+ // console.log("::::",series.data._values)
272	296	let legend = chart.children.unshift(am5.Legend.new(root, {
273	297	x: am5.percent(100), // 범례 중심 위치 (50: 중앙)
274	298	centerX: am5.percent(80), // 범례 중심 위치 (50: 중앙)
...	...	@@ -281,13 +305,13 @@
281	305
282	306	// Make stuff animate on load
283	307	// https://www.amcharts.com/docs/v5/concepts/animations/
284		- series.appear(1000);
	308	+
285	309	chart.appear(1000, 100);
286	310	}
287	311	},
288	312	watch: {
289		- 'setData': function (newData) {
290		- this.chartCreate(newData, this.color)
	313	+ 'setData': function (newData) {
	314	+ this.chartCreate(newData, this.mapping, this.columnX, this.color)
291	315	}
292	316	},
293	317	computed: {

...	...	@@ -55,8 +55,8 @@
55	55	singleBranchOnly: false,
56	56	downDepth: 1,
57	57	initialDepth: 2,
58		- valueField: "value",
59		- categoryField: "name",
	58	+ valueField: "average",
	59	+ categoryField: "city",
60	60	childDataField: "children",
61	61	centerStrength: 0.5,
62	62	minRadius: 20,
...	...	@@ -113,7 +113,6 @@
113	113	},
114	114	watch: {
115	115	'setData': function (newData) {
116		- console.log('newData - ', newData)
117	116	this.chartCreate(newData)
118	117	}
119	118	},

...	...	@@ -51,8 +51,8 @@
51	51	// Create series
52	52	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
53	53	let series = chart.series.push(am5percent.PieSeries.new(root, {
54		- valueField: "value",
55		- categoryField: "category"
	54	+ valueField: "city_count",
	55	+ categoryField: "city"
56	56	}));
57	57
58	58
...	...	@@ -92,7 +92,6 @@
92	92	},
93	93	watch: {
94	94	'setData': function (newData) {
95		- console.log('newData - ', newData)
96	95	this.chartCreate(newData)
97	96	}
98	97	},

...	...	@@ -84,10 +84,9 @@
84	84
85	85	let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
86	86	maxDeviation: 0.3,
87		- min: 0,
88	87	renderer: am5xy.AxisRendererY.new(root, {
89	88	strokeOpacity: 0.1,
90		- inversed: true
	89	+ inversed: false
91	90	})
92	91	}));
93	92

...	...	@@ -11,23 +11,23 @@
11	11	<div class="chart-title">
12	12	<div class="flex">
13	13	<p>월별 평균 길이 Z축 마모</p>
14		- <select name="" id="">
	14	+ <select name="" id="" v-model="month_tl_no" @change="monthChange()">
15	15	<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
16	16	</select>
17	17	</div>
18	18	</div>
19		- <VerticalBarChart :chartData="emptyData" xField="month" yField="value" />
	19	+ <VerticalBarChart :chartData="monthData" xField="ormpm_month" yField="avg_ofs5" />
20	20	</div>
21	21	<div class="content-box">
22	22	<div class="chart-title">
23	23	<div class="flex">
24	24	<p>시간대별 평균 길이 Z축 마모</p>
25		- <select name="" id="">
	25	+ <select name="" id="" v-model="time_tl_no" @change="timeChange()">
26	26	<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
27	27	</select>
28	28	</div>
29	29	</div>
30		- <VerticalBarChart :chartData="emptyTimeData" :xField="'time'" :yField="'value'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
	30	+ <VerticalBarChart :chartData="timeData" :xField="'ormpm_hour'" :yField="'avg_ofs5'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
31	31	</div>
32	32	<div class="content-box">
33	33	<div class="chart-title">
...	...	@@ -35,7 +35,7 @@
35	35	<p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
36	36	</div>
37	37	</div>
38		- <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
	38	+ <LineChart :chartData="toolZWearData" :xField="'search_date'" />
39	39	</div>
40	40	<div class="content-box">
41	41	<div class="chart-title">
...	...	@@ -43,7 +43,7 @@
43	43	<p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
44	44	</div>
45	45	</div>
46		- <LineChart :chartData="emptyLineData" :keyMapping="lineDataKeyMapping" :xField="lineDataKeyMapping.date" />
	46	+ <LineChart :chartData="toolXWearData" :xField="'search_date'" />
47	47	</div>
48	48	</div>
49	49	</div>
...	...	@@ -52,44 +52,85 @@
52	52	<script>
53	53	import VerticalBarChart from '../../components/VerticalBarChart.vue';
54	54	import LineChart from '../../components/LineChart.vue';
	55	+import axios from 'axios';
55	56
56	57	export default {
57	58	data() {
58	59	return {
59		- tools: ["T1", "T2", "T3", "T4", "T5"],
	60	+ tools: ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8"],
	61	+ month_tl_no: "T4",
	62	+ time_tl_no: "T4",
60	63	// 월별 데이터
61	64	emptyData: [],
62		- monthToolData: [
63		- { month: "2023.11", value: 300 }
64		-
65		- ],
	65	+ monthData: [],
66	66	// 시간대별
67		- emptyTimeData: [],
68		- timeData: [
69		- { time: "01", value: 300 },
70		- { time: "02", value: 300 },
71		- { time: "03", value: 300 },
72		- { time: "04", value: 300 },
73		- { time: "05", value: 300 },
74		- { time: "06", value: 300 },
75		- { time: "07", value: 300 },
76		- ],
77		- // z축 마모 라인 데이터,
78		- lineDataKeyMapping: {
79		- date: "날짜",
80		- value1: "T1",
81		- value2: "T2",
82		- value3: "T3",
83		- },
84		- emptyLineData: [],
85		- lineData: [
86		- { date: "2023-01-01", value1: 10, value2: 20, value3: 50 },
87		- { date: "2023-01-02", value1: 15, value2: 25, value3: 50 },
88		- { date: "2023-01-03", value1: 20, value2: 30, value3: 50 },
89		- ]
	67	+ timeData: [],
	68	+
	69	+ toolZWearData: [],
	70	+
	71	+ toolXWearData: [],
90	72	}
91	73	},
92	74	methods: {
	75	+ timeZWear: function(){
	76	+ const vm = this;
	77	+ axios({
	78	+ url: '/hwaSin/timeZWear.json',
	79	+ method: 'post',
	80	+ hearder: {
	81	+ 'Content-Type': "application/json; charset=UTF-8",
	82	+ },
	83	+ data: {tl_no : vm.time_tl_no}
	84	+ }).then(function(response) {
	85	+ vm.timeData = response.data;
	86	+ }).catch(function() {
	87	+ alert("시간대별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
	88	+ })
	89	+ },
	90	+
	91	+ timeChange: function() {
	92	+ this.timeZWear();
	93	+ },
	94	+
	95	+ monthZWear: function(){
	96	+ const vm = this;
	97	+ axios({
	98	+ url: '/hwaSin/monthZWear.json',
	99	+ method: 'post',
	100	+ hearder: {
	101	+ 'Content-Type': "application/json; charset=UTF-8",
	102	+ },
	103	+ data: {tl_no : vm.month_tl_no}
	104	+ }).then(function(response) {
	105	+ vm.monthData = response.data;
	106	+ }).catch(function() {
	107	+ alert("월별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
	108	+ })
	109	+ },
	110	+
	111	+ monthChange: function() {
	112	+ this.monthZWear();
	113	+ },
	114	+
	115	+ toolWear: function() {
	116	+ const vm = this;
	117	+
	118	+ axios({
	119	+ url: '/hwaSin/toolWear.json',
	120	+ method: 'post',
	121	+ hearder: {
	122	+ 'Content-Type': "application/json; charset=UTF-8",
	123	+ },
	124	+ }).then(function(response) {
	125	+ vm.toolZWearData = response.data.toolZWear;
	126	+ vm.toolXWearData = response.data.toolXWear;
	127	+ }).catch(function() {
	128	+ alert("가동시간에 따른 각 툴별(도구) 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
	129	+ })
	130	+ },
	131	+
	132	+
	133	+
93	134	dataSet: function () {
94	135	this.emptyData = this.monthToolData;
95	136	this.emptyTimeData = this.timeData;
...	...	@@ -107,6 +148,9 @@
107	148	},
108	149	mounted() {
109	150	this.dataSet();
	151	+ this.timeZWear();
	152	+ this.monthZWear();
	153	+ this.toolWear();
110	154	}
111	155	}
112	156	</script>

Delete comment