From c708f5b2503216ca25b86401ed39f8909f9e7fae Mon Sep 17 00:00:00 2001 From: "joohee.moon" Date: Wed, 14 Dec 2022 18:04:46 +0900 Subject: [PATCH] =?UTF-8?q?[#5209]=20[WS]=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EB=B6=84=EC=84=9D=EC=97=90=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5(=EC=82=B0=EC=A0=90=EB=8F=84=20=ED=96=89?= =?UTF-8?q?=EB=A0=AC,=20=EC=B0=A8=ED=8A=B8=20=ED=81=AC=EA=B2=8C=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EB=93=B1)=EC=9D=84=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20-=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entry/images/IconArrowRightChartList.svg | 1 + src/assets/entry/images/IconButtonZoomIn.svg | 1 + src/assets/entry/images/IconButtonZoomOut.svg | 1 + src/assets/entry/images/ImgTableNoResult.svg | 1 + .../entry/images/icon_chart_list_sel01.svg | 1 + .../entry/images/icon_chart_list_sel02.svg | 1 + .../entry/images/icon_chart_list_sel03.svg | 1 + .../entry/images/icon_chart_list_sel04.svg | 1 + .../entry/images/icon_chart_list_sel05.svg | 1 + .../entry/images/icon_chart_list_sel06.svg | 1 + .../entry/images/icon_chart_sel06_off.svg | 1 + .../entry/images/icon_chart_sel06_on.svg | 1 + .../entry/images/icon_chart_sel07_off.svg | 1 + ...hart_sel05.svg => icon_chart_sel07_on.svg} | 0 src/assets/entry/scss/common/_tooltip.scss | 50 +- .../entry/scss/components/_TableChart.scss | 732 ++--- .../entry/scss/components/_TableSummary.scss | 587 ++-- src/components/ai_layout/TableChart.jsx | 2598 ++++++++++++----- src/components/ai_layout/TableSummary.jsx | 1077 ++++--- .../chart/SelectChartDropdown.jsx | 2 +- src/stories/index.js | 10 +- 21 files changed, 2903 insertions(+), 2166 deletions(-) create mode 100644 src/assets/entry/images/IconArrowRightChartList.svg create mode 100644 src/assets/entry/images/IconButtonZoomIn.svg create mode 100644 src/assets/entry/images/IconButtonZoomOut.svg create mode 100644 src/assets/entry/images/ImgTableNoResult.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel01.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel02.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel03.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel04.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel05.svg create mode 100644 src/assets/entry/images/icon_chart_list_sel06.svg create mode 100644 src/assets/entry/images/icon_chart_sel06_off.svg create mode 100644 src/assets/entry/images/icon_chart_sel06_on.svg create mode 100644 src/assets/entry/images/icon_chart_sel07_off.svg rename src/assets/entry/images/{icon_chart_sel05.svg => icon_chart_sel07_on.svg} (100%) diff --git a/src/assets/entry/images/IconArrowRightChartList.svg b/src/assets/entry/images/IconArrowRightChartList.svg new file mode 100644 index 00000000..a197ccb4 --- /dev/null +++ b/src/assets/entry/images/IconArrowRightChartList.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/IconButtonZoomIn.svg b/src/assets/entry/images/IconButtonZoomIn.svg new file mode 100644 index 00000000..400f2267 --- /dev/null +++ b/src/assets/entry/images/IconButtonZoomIn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/IconButtonZoomOut.svg b/src/assets/entry/images/IconButtonZoomOut.svg new file mode 100644 index 00000000..790f093a --- /dev/null +++ b/src/assets/entry/images/IconButtonZoomOut.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/ImgTableNoResult.svg b/src/assets/entry/images/ImgTableNoResult.svg new file mode 100644 index 00000000..dada57e2 --- /dev/null +++ b/src/assets/entry/images/ImgTableNoResult.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel01.svg b/src/assets/entry/images/icon_chart_list_sel01.svg new file mode 100644 index 00000000..251e49f6 --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel01.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel02.svg b/src/assets/entry/images/icon_chart_list_sel02.svg new file mode 100644 index 00000000..d8e172a4 --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel03.svg b/src/assets/entry/images/icon_chart_list_sel03.svg new file mode 100644 index 00000000..f27fc90d --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel03.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel04.svg b/src/assets/entry/images/icon_chart_list_sel04.svg new file mode 100644 index 00000000..d26847eb --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel04.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel05.svg b/src/assets/entry/images/icon_chart_list_sel05.svg new file mode 100644 index 00000000..c796695a --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel05.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_list_sel06.svg b/src/assets/entry/images/icon_chart_list_sel06.svg new file mode 100644 index 00000000..243dcbcf --- /dev/null +++ b/src/assets/entry/images/icon_chart_list_sel06.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_sel06_off.svg b/src/assets/entry/images/icon_chart_sel06_off.svg new file mode 100644 index 00000000..e85d7ef7 --- /dev/null +++ b/src/assets/entry/images/icon_chart_sel06_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_sel06_on.svg b/src/assets/entry/images/icon_chart_sel06_on.svg new file mode 100644 index 00000000..3a3a266c --- /dev/null +++ b/src/assets/entry/images/icon_chart_sel06_on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_sel07_off.svg b/src/assets/entry/images/icon_chart_sel07_off.svg new file mode 100644 index 00000000..bc68daaf --- /dev/null +++ b/src/assets/entry/images/icon_chart_sel07_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/entry/images/icon_chart_sel05.svg b/src/assets/entry/images/icon_chart_sel07_on.svg similarity index 100% rename from src/assets/entry/images/icon_chart_sel05.svg rename to src/assets/entry/images/icon_chart_sel07_on.svg diff --git a/src/assets/entry/scss/common/_tooltip.scss b/src/assets/entry/scss/common/_tooltip.scss index c743b657..2aef8a28 100644 --- a/src/assets/entry/scss/common/_tooltip.scss +++ b/src/assets/entry/scss/common/_tooltip.scss @@ -791,22 +791,20 @@ content: ''; } } -// 가로형 툴팁 박스 -.vertical_tooltip { - position: absolute; - left: 46px; - top: 0; +// 그래프 +.tooltip_graph_box { + @include PositionLT(absolute, 0, 54px); width: 393px; padding: 16px 0 14px 4px; box-sizing: border-box; background-color: #fff; + border-radius: 6px; border: 1px solid #e2e2e2; box-shadow: 0 1px 6px 0 rgba(124, 124, 124, 0.06); font-size: 14px; color: #2c313d; line-height: 15px; - border-radius: 6px; .graph_list { overflow: hidden; } @@ -816,13 +814,18 @@ margin-left: 0; a { display: block; - font-size: 14px; + font-size: 12px; font-weight: 600; color: #2c313d; letter-spacing: -0.5px; text-align: center; white-space: nowrap; line-height: 15px; + span { + display: block; + font-size: 10px; + color: #555; + } } a:before { display: block; @@ -853,25 +856,26 @@ &.histogram a:before { background-image: url('#{$imageDir}/icon_chart_sel05_on.svg'); } + &.scatter_matrix a:before { + background-image: url('#{$imageDir}/icon_chart_sel06_on.svg'); + } } .arr { - position: absolute; - top: 4px; - right: 100%; + @include PositionLB(absolute, 12px, 100%); overflow: hidden; - width: 20px; - height: 30px; - i { - position: absolute; - left: 6px; - top: 0; - width: 14px; - height: 14px; - background-color: #fff; - border: 1px solid #e2e2e2; - box-shadow: 0 1px 6px 0 rgba(124, 124, 124, 0.06); - transform: translate(50%, 50%) rotate(45deg); - } + width: 16px; + height: 14px; + } + .arr i { + position: absolute; + left: 50%; + top: 0; + width: 14px; + height: 14px; + background-color: #fff; + border: 1px solid #e2e2e2; + box-shadow: 0 1px 6px 0 rgba(124, 124, 124, 0.06); + transform: translate(-50%, 50%) rotate(45deg); } } diff --git a/src/assets/entry/scss/components/_TableChart.scss b/src/assets/entry/scss/components/_TableChart.scss index 522096c2..7d15b922 100644 --- a/src/assets/entry/scss/components/_TableChart.scss +++ b/src/assets/entry/scss/components/_TableChart.scss @@ -1,4 +1,39 @@ @charset "UTF-8"; + +$axis-size: 20px; + +.section_container { + &.zoom_in { + .aside, + .sheet_form_box .input { + display: none; + } + } + .sheet_form_box { + .btn_zoom_in { + display: inline-block; + width: 32px; + height: 32px; + margin: 1px 9px 0 0; + background: url('#{$imageDir}/IconButtonZoomIn.svg') no-repeat; + background-size: 32px auto; + vertical-align: top; + cursor: pointer; + &.active { + background-image: url('#{$imageDir}/IconButtonZoomOut.svg'); + } + } + } + .chart_wrap { + display: flex; + flex-direction: column; + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + flex: 1 1 auto; + -ms-flex: 1 1 auto; + overflow: auto; + } +} .section_container.chart_container { flex-direction: row; .container_inner { @@ -99,9 +134,6 @@ .inner { display: -webkit-box; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; -webkit-box-flex: 1; flex: 1; position: relative; @@ -111,37 +143,38 @@ background-color: #f9f9f9; } .chart_navi { + flex: 0 0 auto; position: relative; - padding: 12px 16px; - border-bottom: 1px solid #e2e2e2; z-index: 10; + width: 64px; + padding: 10px 0; + border-right: 1px solid #e2e2e2; + background-color: #f9f9f9; } .add_link_box { - display: inline-block; + display: block; position: relative; width: 40px; height: 40px; - vertical-align: top; + margin: 12px auto 0; } .add_link_box .add_link { display: block; height: 40px; - background-image: url('#{$imageDir}/icon_chart_sel05.svg'); - vertical-align: top; + background-image: url('#{$imageDir}/icon_chart_sel07_on.svg'); cursor: pointer; } + .add_link_box .add_link.disabled { + background-image: url('#{$imageDir}/icon_chart_sel07_off.svg'); + } .chart_link { - display: inline-block; + display: block; width: 40px; height: 40px; - margin-left: 10px; + margin: 6px auto; background-size: 40px auto; - vertical-align: top; cursor: pointer; } - .chart_link:first-child { - margin-left: 0; - } .chart_link.bar { background-image: url('#{$imageDir}/icon_chart_sel01_on.svg'); } @@ -160,6 +193,9 @@ .chart_link.histogram { background-image: url('#{$imageDir}/icon_chart_sel05_on.svg'); } + .chart_link.scatter_matrix { + background-image: url('#{$imageDir}/icon_chart_sel06_on.svg'); + } .chart_link.bar.disabled { background-image: url('#{$imageDir}/icon_chart_sel01_off.svg'); } @@ -178,8 +214,8 @@ .chart_link.histogram.disabled { background-image: url('#{$imageDir}/icon_chart_sel05_off.svg'); } - .chart_link ~ .add_link_box { - margin-left: 12px; + .chart_link.scatter_matrix.disabled { + background-image: url('#{$imageDir}/icon_chart_sel06_off.svg'); } .chart_no_result { position: relative; @@ -201,10 +237,12 @@ .graph_box { position: relative; -webkit-box-flex: 1; - flex: 1 1; + flex: 1 1 auto; overflow: auto; + min-height: 370px; + padding: 30px; background-color: #fff; - padding-top: 30px; + box-sizing: border-box; .chart_area { svg { margin: auto; @@ -215,6 +253,103 @@ padding-top: 30px; padding-right: 230px; } + .graph_box.scatter_matrix { + padding-bottom: 30px + $axis-size; + padding-left: 30px + $axis-size; + .graph { + float: left; + position: relative; + } + &:after { + display: block; + clear: both; + content: ''; + } + .graph_title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .graph_title, + .axis_x, + .axis_y { + color: #555; + letter-spacing: -0.5px; + } + .axis_x, + .axis_y { + position: absolute; + overflow: hidden; + height: 20px; + font-size: 12px; + white-space: nowrap; + text-overflow: ellipsis; + } + .axis_x { + bottom: -($axis-size + 10px); + left: 50%; + max-width: 100%; + transform: translateX(-50%); + } + .axis_y { + display: block; + bottom: 0; + left: -($axis-size + 10px); + max-width: 30%; + transform-origin: 0 0; + transform: rotate(-90deg); + } + &.type_2 { + .graph { + width: 50%; + height: 50%; + } + .graph_title { + font-size: 18px; + } + .axis_x, + .axis_y { + font-size: 12px; + } + } + &.type_3 { + .graph { + width: 33.3333%; + height: 33.3333%; + } + .graph_title { + font-size: 18px; + } + } + &.type_4 { + .graph { + width: 25%; + height: 25%; + } + .graph_title { + font-size: 16px; + } + } + &.type_5 { + .graph { + width: 20%; + height: 20%; + } + .graph_title { + font-size: 14px; + } + } + &.type_6 { + .graph { + width: 16.6666%; + height: 16.6666%; + } + .graph_title { + font-size: 12px; + } + } + } } .form_box { padding: 18px 16px; @@ -527,8 +662,10 @@ flex: 1; position: relative; overflow: hidden; - background-color: #fff; border-radius: 0 0 6px 0; + &:not(.table_no_result_content) { + background-color: #fff; + } .caution_dsc { position: absolute; left: 50%; @@ -541,541 +678,50 @@ line-height: 18px; } } -} - - - - - - - - -// 데이터 차트. -.popup_wrap .pop_content.chart_content { - .section_cont { - background-color: #fff; - padding: 0 27px 27px; - } - .content { - display: -webkit-box; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - -webkit-box-flex: 1; - flex: 1; - position: relative; - overflow: hidden; - background-color: #fff; - border-radius: 0 0 6px 0; - .caution_dsc { + .table_no_result_content { + .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); - font-size: 16px; - font-weight: 600; - color: $DefaultBlue; - text-align: center; - line-height: 18px; + min-width: 523px; + font-family: NanumGothicOTF; } - } - .sheet_form_box { - padding: 18px 0; - .input { - box-sizing: border-box; - width: 100%; - height: 40px; - padding: 0 16px; - border: 1px solid #e2e2e2; - border-radius: 4px; - outline: 0; - font-size: 14px; + .dsc_title { + font-size: 18px; font-weight: 600; - color: #2c313d; - letter-spacing: -0.33px; - } - .btn_box { - position: relative; - overflow: hidden; - margin-top: 12px; + color: #4f80ff; + text-align: center; + letter-spacing: -0.42px; + &:before { + display: inline-block; + width: 57px; + height: 50px; + margin-right: 9px; + background-image: url('#{$imageDir}/ImgTableNoResult.svg'); + background-size: 57px auto; + vertical-align: middle; + content: ''; + } } - .tab { - display: inline-block; - overflow: hidden; - box-sizing: border-box; - border: 1px solid #4f80ff; - border-radius: 4px; - vertical-align: top; - & > a { - float: left; - overflow: hidden; - width: 70px; - height: 32px; - border-left: 1px solid #4f80ff; + .dsc_list { + padding: 27px 24px 22px; + border-radius: 6px; + border: 1px solid #d6e9f4; + background-color: #fff; + color: #555; + dt { + margin-bottom: 14px; font-size: 14px; font-weight: 600; - color: #4f80ff; - text-align: center; - line-height: 32px; - cursor: pointer; - } - & > a:first-of-type { - border-left: 0; + letter-spacing: -0.32px; } - .active { - color: #fff; - background-color: #4f80ff; + dd { + font-size: 12px; + line-height: 20px; + letter-spacing: -0.28px; } } - .btn_save { - position: absolute; - overflow: hidden; - box-sizing: border-box; - top: 0; - right: 0; - height: 34px; - padding: 0 18px; - border: 1px solid #e2e2e2; - border-radius: 4px; - font-size: 14px; - font-weight: 600; - color: #555; - text-align: center; - line-height: 34px; - cursor: pointer; - } - } - .chart_box { - display: -webkit-box; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - -webkit-box-flex: 1; - flex: 1; - position: relative; - overflow: hidden; - .inner { - display: -webkit-box; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - -webkit-box-flex: 1; - flex: 1; - position: relative; - overflow: hidden; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #f9f9f9; - } - .chart_navi { - position: relative; - padding: 12px 16px; - border-bottom: 1px solid #e2e2e2; - z-index: 10; - } - .add_link_box { - display: inline-block; - position: relative; - width: 40px; - height: 40px; - vertical-align: top; - } - .add_link_box .add_link { - display: block; - height: 40px; - background-image: url('#{$imageDir}/icon_chart_sel05.svg'); - vertical-align: top; - cursor: pointer; - } - .chart_link { - display: inline-block; - width: 40px; - height: 40px; - margin-left: 10px; - background-size: 40px auto; - vertical-align: top; - cursor: pointer; - } - .chart_link:first-child { - margin-left: 0; - } - .chart_link.bar { - background-image: url('#{$imageDir}/icon_chart_sel01_on.svg'); - } - .chart_link.line { - background-image: url('#{$imageDir}/icon_chart_sel02_on.svg'); - } - .chart_link.pie { - background-image: url('#{$imageDir}/icon_chart_sel03_on.svg'); - } - .chart_link.scatter { - background-image: url('#{$imageDir}/icon_chart_sel04_on.svg'); - } - .chart_link.scatterGrid { - background-image: url('#{$imageDir}/icon_chart_sel04_on.svg'); - } - .chart_link.histogram { - background-image: url('#{$imageDir}/icon_chart_sel05_on.svg'); - } - .chart_link.bar.disabled { - background-image: url('#{$imageDir}/icon_chart_sel01_off.svg'); - } - .chart_link.line.disabled { - background-image: url('#{$imageDir}/icon_chart_sel02_off.svg'); - } - .chart_link.pie.disabled { - background-image: url('#{$imageDir}/icon_chart_sel03_off.svg'); - } - .chart_link.scatter.disabled { - background-image: url('#{$imageDir}/icon_chart_sel04_off.svg'); - } - .chart_link.scatterGrid.disabled { - background-image: url('#{$imageDir}/icon_chart_sel04_off.svg'); - } - .chart_link.histogram.disabled { - background-image: url('#{$imageDir}/icon_chart_sel05_off.svg'); - } - .chart_link ~ .add_link_box { - margin-left: 12px; - } - .chart_no_result { - position: relative; - -webkit-box-flex: 1; - flex: 1 1; - overflow: auto; - .dsc { - position: absolute; - left: 50%; - top: 50%; - font-size: 16px; - font-weight: 600; - color: #4f80ff; - text-align: center; - transform: translate(-50%, -50%); - line-height: 18px; - } - } - .graph_box { - position: relative; - -webkit-box-flex: 1; - flex: 1 1; - overflow: auto; - background-color: #fff; - padding-top: 30px; - .chart_area { - svg { - margin: auto; - } - } - } - .graph_box.pie { - padding-top: 30px; - padding-right: 230px; - } - } - .form_box { - padding: 18px 16px; - border-bottom: 1px solid #e2e2e2; - .input_inner { - position: relative; - } - .input_inner:after { - display: block; - clear: both; - content: ''; - } - .input_inner .tit_label { - float: left; - width: 70px; - font-size: 14px; - font-weight: 600; - color: #2c313d; - letter-spacing: -0.33px; - vertical-align: top; - line-height: 40px; - } - .input_box { - overflow: hidden; - padding-right: 110px; - } - .input_inner input[type='text'] { - box-sizing: border-box; - width: 100%; - height: 40px; - padding: 0 14px; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #fff; - font-size: 14px; - font-weight: 600; - color: #2c313d; - letter-spacing: -0.33px; - } - .input_inner .del_btn { - position: absolute; - right: 0; - top: 0; - box-sizing: border-box; - width: 94px; - height: 40px; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #fff; - font-size: 14px; - font-weight: 600; - color: #555; - letter-spacing: -0.33px; - text-align: center; - line-height: 40px; - cursor: pointer; - } - .input_inner .sort_box { - position: absolute; - right: 0; - top: 4px; - cursor: pointer; - } - .input_inner .sort_box a { - display: inline-block; - position: relative; - box-sizing: border-box; - width: 94px; - height: 32px; - border: 1px solid #e2e2e2; - border-radius: 4px 0 0 4px; - background-color: #fff; - font-size: 14px; - font-weight: 600; - color: #728896; - text-align: center; - letter-spacing: -0.33px; - line-height: 32px; - vertical-align: top; - } - .input_inner .sort_box a.active { - border-color: #4f80ff; - color: #4f80ff; - z-index: 10; - } - .input_inner .sort_box a + a { - border-radius: 0 4px 4px 0; - margin-left: -1px; - } - .input_inner + .input_inner { - margin-top: 12px; - } - .select_group { - float: left; - margin-left: 22px; - } - .select_group:first-of-type { - margin-left: 0; - } - .select_group:first-of-type .tit_label { - width: 70px; - } - .select_group:first-of-type .pop_selectbox { - margin-left: 0; - } - .select_group .tit_label { - width: auto; - } - .select_group .pop_selectbox { - display: inline-block; - vertical-align: top; - margin-left: 12px; - } - .select_group .pop_selectbox .select_link { - width: auto; - font-size: 14px; - } - .select_group .pop_selectbox .tooltip_box { - top: 57px; - width: auto; - } - .select_group .pop_selectbox .tooltip_inner { - height: 248px; - overflow-y: auto; - } - .select_group .check_inner { - position: relative; - display: block; - overflow: hidden; - padding: 16px 0 14px; - font-size: 14px; - font-weight: 600; - color: #2c313d; - line-height: 16px; - } - .select_group .check_inner .text { - padding-left: 8px; - } - .select_group .check_inner > span { - display: inline-block; - width: 16px; - height: 16px; - background-image: url('#{$imageDir}/ico_unchecked.svg'); - background-size: 16px auto; - vertical-align: top; - } - .select_group .check_inner input[type='checkbox']:checked + span { - background-image: url('#{$imageDir}/ico_checked.svg'); - } - .select_group .cnt_box { - display: inline-block; - position: relative; - overflow: hidden; - width: 106px; - height: 32px; - padding: 0 30px; - margin: 4px 0 0 12px; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #fff; - vertical-align: top; - } - .select_group .cnt_box .btn { - position: absolute; - left: 0; - top: 0; - width: 30px; - height: 30px; - border-right: 1px solid #e2e2e2; - background-color: #f2f2f2; - } - .select_group .cnt_box .btn:before { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: url('#{$imageDir}/IconButtonMinus.svg'); - background-size: 11px auto; - background-repeat: no-repeat; - background-position: 50% 50%; - content: ''; - } - .select_group .cnt_box .btn ~ .btn { - left: auto; - right: 0; - border: 0; - border-left: 1px solid #e2e2e2; - } - .select_group .cnt_box .btn ~ .btn:before { - background-image: url('#{$imageDir}/IconButtonPlus.svg'); - background-size: 10px auto; - } - .select_group .cnt_box .input { - display: block; - height: 30px; - padding: 0; - border: 0; - font-size: 14px; - font-weight: 600; - color: #2c313d; - text-align: center; - letter-spacing: -0.33px; - } - .select_group .cnt_width { - display: inline-block; - position: relative; - overflow: hidden; - width: 70px; - height: 32px; - margin: 4px 0 0 12px; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #fff; - vertical-align: top; - .input { - display: block; - height: 30px; - padding: 0; - border: 0; - font-size: 14px; - font-weight: 600; - color: #2c313d; - text-align: center; - letter-spacing: -0.33; - } - &.disabled { - background-color: #f9f9f9; - .input, - .input:read-only { - color: #cbcbcb; - background-color: #f9f9f9; - } - } - } - .select_group .cnt_sort { - display: inline-block; - cursor: pointer; - } - .select_group .cnt_width { - display: inline-block; - position: relative; - overflow: hidden; - width: 70px; - height: 32px; - margin: 4px 0 0 12px; - border: 1px solid #e2e2e2; - border-radius: 4px; - background-color: #fff; - vertical-align: top; - .input { - display: block; - height: 30px; - padding: 0; - border: 0; - font-size: 14px; - font-weight: 600; - color: #2c313d; - text-align: center; - letter-spacing: -0.33; - } - &.disabled { - background-color: #f9f9f9; - .input, - .input:read-only { - color: #cbcbcb; - background-color: #f9f9f9; - } - } - } - .select_group .cnt_sort { - display: inline-block; - margin: 4px 0 0 12px; - vertical-align: top; - } - .select_group .cnt_sort a { - display: inline-block; - position: relative; - box-sizing: border-box; - width: 112px; - height: 32px; - border: 1px solid #e2e2e2; - border-radius: 4px 0 0 4px; - background-color: #fff; - font-size: 14px; - font-weight: 600; - color: #728896; - text-align: center; - letter-spacing: -0.33px; - line-height: 32px; - vertical-align: top; - } - .select_group .cnt_sort a.active { - border-color: #4f80ff; - color: #4f80ff; - z-index: 10; - } - .select_group .cnt_sort a + a { - border-radius: 0 4px 4px 0; - margin-left: -1px; - } } } diff --git a/src/assets/entry/scss/components/_TableSummary.scss b/src/assets/entry/scss/components/_TableSummary.scss index d4f99318..d9a73b49 100644 --- a/src/assets/entry/scss/components/_TableSummary.scss +++ b/src/assets/entry/scss/components/_TableSummary.scss @@ -86,6 +86,10 @@ cursor: pointer; } } + .chart_wrap { + overflow: auto; + padding: 0 18px 24px; + } .chart_box { display: -webkit-box; display: flex; @@ -97,17 +101,147 @@ position: relative; overflow: hidden; .inner { - position: relative; + display: -webkit-box; + display: flex; -webkit-box-flex: 1; flex: 1 1; - overflow: auto; + overflow: hidden; + position: relative; border: 1px solid #e2e2e2; - padding: 0 18px 24px; border-radius: 4px; background-color: #f9f9f9; + & > .chart_navi { + flex: 0 0 auto; + position: relative; + z-index: 10; + width: 64px; + padding: 10px 0; + border-right: 1px solid #e2e2e2; + background-color: #f9f9f9; + .add_link_box { + display: block; + position: relative; + width: 40px; + height: 40px; + margin: 12px auto 0; + } + .add_link_box .add_link { + display: block; + height: 40px; + background-image: url('#{$imageDir}/icon_chart_sel07_on.svg'); + cursor: pointer; + } + .add_link_box .add_link.disabled { + background-image: url('#{$imageDir}/icon_chart_sel07_off.svg'); + } + .chart_link { + display: block; + width: 40px; + height: 40px; + margin: 6px auto; + background-size: 40px auto; + cursor: pointer; + } + .chart_link.bar { + background-image: url('#{$imageDir}/icon_chart_sel01_on.svg'); + } + .chart_link.line { + background-image: url('#{$imageDir}/icon_chart_sel02_on.svg'); + } + .chart_link.pie { + background-image: url('#{$imageDir}/icon_chart_sel03_on.svg'); + } + .chart_link.scatter { + background-image: url('#{$imageDir}/icon_chart_sel04_on.svg'); + } + .chart_link.scatterGrid { + background-image: url('#{$imageDir}/icon_chart_sel04_on.svg'); + } + .chart_link.histogram { + background-image: url('#{$imageDir}/icon_chart_sel05_on.svg'); + } + .chart_link.scatter_matrix { + background-image: url('#{$imageDir}/icon_chart_sel06_on.svg'); + } + .chart_link.bar.disabled { + background-image: url('#{$imageDir}/icon_chart_sel01_off.svg'); + } + .chart_link.line.disabled { + background-image: url('#{$imageDir}/icon_chart_sel02_off.svg'); + } + .chart_link.pie.disabled { + background-image: url('#{$imageDir}/icon_chart_sel03_off.svg'); + } + .chart_link.scatter.disabled { + background-image: url('#{$imageDir}/icon_chart_sel04_off.svg'); + } + .chart_link.scatterGrid.disabled { + background-image: url('#{$imageDir}/icon_chart_sel04_off.svg'); + } + .chart_link.histogram.disabled { + background-image: url('#{$imageDir}/icon_chart_sel05_off.svg'); + } + .chart_link.scatter_matrix.disabled { + background-image: url('#{$imageDir}/icon_chart_sel06_off.svg'); + } + } } .category_box { margin-top: 24px; + .chart_link { + display: block; + height: 36px; + padding: 0 12px; + line-height: 36px; + .title { + margin: 0 14px 0 6px; + font-family: NanumGothicOTF; + font-size: 12px; + color: #555550; + letter-spacing: -0.53px; + } + &:before, + &:after { + display: inline-block; + vertical-align: middle; + content: ''; + } + &:before { + height: 16px; + background-size: auto 16px; + background-repeat: no-repeat; + } + &:after { + width: 4px; + height: 7px; + background: url('#{$imageDir}/IconArrowRightChartList.svg') no-repeat; + background-size: 4px auto; + } + &.bar:before { + width: 22px; + background-image: url('#{$imageDir}/icon_chart_list_sel01.svg'); + } + &.line:before { + width: 20px; + background-image: url('#{$imageDir}/icon_chart_list_sel02.svg'); + } + &.pie:before { + width: 20px; + background-image: url('#{$imageDir}/icon_chart_list_sel03.svg'); + } + &.scatter:before { + width: 16px; + background-image: url('#{$imageDir}/icon_chart_list_sel04.svg'); + } + &.histogram:before { + width: 20px; + background-image: url('#{$imageDir}/icon_chart_list_sel05.svg'); + } + &.scatter_matrix:before { + width: 20px; + background-image: url('#{$imageDir}/icon_chart_list_sel06.svg'); + } + } } .category_box + .category_box { margin-top: 24px; @@ -115,392 +249,52 @@ border-top: 1px solid #e2e2e2; } .table_sjt { - display: inline-block; - position: relative; - vertical-align: top; - } - .table_sjt > strong { - font-size: 16px; - font-weight: 600; - color: #2c313d; - letter-spacing: -0.57px; - line-height: 16px; - } - .table_sjt .q_box { - display: inline-block; - position: relative; - margin-top: 1px; - vertical-align: top; - } - .table_sjt .ico_q { - display: block; - width: 16px; - height: 16px; - margin-left: 8px; - background: url('#{$imageDir}/ico_layer_q.svg') no-repeat; - vertical-align: top; - } - .table_sjt .title_dsc { - display: inline-block; - padding-left: 16px; - font-size: 14px; - color: #2c313d; - letter-spacing: -0.5px; - line-height: 20px; - } - .table_sjt .tooltip_box { - width: 464px; - left: -41px; - top: 28px; - z-index: 10; - } - .table_sjt .tooltip_box .arr i { - background-color: #f5fbff; - } - .table_sjt .tooltip_box .tooltip_inner { - padding: 17px 12px 0; - background-color: #f5fbff; - border-radius: 6px; - } - .table_sjt .tooltip_box .sjt { display: block; - font-size: 14px; - font-weight: 600; - line-height: 20px; - } - .table_sjt .tooltip_box .tooltip_list { - overflow: hidden; - margin-top: 8px; - li { - overflow: hidden; - padding: 10px 0; - border-top: 1px solid #d6e9f4; - font-size: 14px; - letter-spacing: 0; - line-height: 20px; - } - li:first-child { - border-top: 0; - } - .tit { - float: left; - margin-right: 10px; - font-weight: 600; - } - .dsc { - white-space: pre; - overflow: hidden; - } - } - .table_info { - overflow: hidden; - margin-top: 20px; - } - .table_info li { - float: left; position: relative; - padding: 0 9px 0 8px; - font-size: 12px; - color: #2c313d; - line-height: 14px; - } - .table_info li:after { - position: absolute; - left: 0; - top: 1px; - width: 1px; - height: 10px; - background-color: #979797; - content: ''; - } - .table_info li:first-of-type { - padding-left: 0; - } - .table_info li:first-of-type:after { - display: none; - } - .table_box { - margin-top: 20px; - overflow-y: auto; - border: 1px solid #cbcbcb; - border-width: 1px 0; - max-height: 221px; - } - .table { - width: 100%; - table-layout: fixed; - border-collapse: collapse; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.5px; line-height: 20px; - } - .table thead th { - border-bottom: 1px solid #cbcbcb; - } - .table thead th, - .table tbody th { - font-weight: 600; - height: 36px; - background-color: #f4f4f4; - } - .table tbody th { - border-top: 1px solid #e2e2e2; - } - .table tbody td { - height: 36px; - border-top: 1px solid #f4f4f4; - background-color: #fff; - font-weight: 600; - text-align: center; - } - .table .thead_tit { - position: relative; - height: 36px; - line-height: 36px; - } - .table .thead_tit:before { - position: absolute; - left: 0; - top: 50%; - width: 1px; - height: 20px; - background-color: #cbcbcb; - transform: translateY(-50%); - content: ''; - } - .table thead th:first-of-type .thead_tit:before, - .table tbody th .thead_tit:before { - display: none; - } - .table tbody th .thead_tit:before { - display: none; - } - .table tbody tr:first-of-type th, - .table tbody tr:first-of-type td { - border-top: 0; - } - .chart_list { - margin: -12px 0 0 -12px; - } - .chart_list:after { - display: block; - clear: both; - content: ''; - } - .chart_list li { - float: left; - position: relative; - width: 217px; - height: 128px; - margin: 12px 0 0 12px; - border-radius: 6px; - background-color: #fff; - background-size: cover; - background-repeat: no-repeat; - cursor: pointer; - } - .chart_list li:before { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - border-radius: 6px; - border: 1px solid #e2e2e2; - content: ''; - } - .chart_list li:hover:before, - .chart_list li.active:before { - border: 2px solid #4f80ff; - } - .chart_list li img { - vertical-align: top; - } - .chart_list li.bar .chart_area, - .chart_list li.line .chart_area, - .chart_list li.histogram .chart_area, - .chart_list li.scatter .chart_area { - padding-top: 9px; - } - .chart_list li.pie .chart_area { - padding-left: 15px; - } - .chart_list .data_add_box { - height: 106px; - padding-top: 12px; - border: 0; - text-align: center; - p { - padding-top: 6px; - line-height: 88px; - } - } - } -} - - - -// 데이터 요약. -.popup_wrap .pop_content.summary_content { - .section_cont { - background-color: #fff; - padding: 0 27px 27px; - } - .content { - display: -webkit-box; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - -webkit-box-flex: 1; - flex: 1; - position: relative; - overflow: hidden; - background-color: #fff; - border-radius: 0 0 6px 0; - .caution_dsc { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 16px; - font-weight: 600; - color: $DefaultBlue; - text-align: center; - line-height: 18px; - } - } - .sheet_form_box { - padding: 18px 0; - .input { - box-sizing: border-box; - width: 100%; - height: 40px; - padding: 0 16px; - border: 1px solid #e2e2e2; - border-radius: 4px; - outline: 0; - font-size: 14px; - font-weight: 600; - color: #2c313d; - letter-spacing: -0.33px; - } - .btn_box { - position: relative; - overflow: hidden; - margin-top: 12px; - } - .tab { - display: inline-block; - overflow: hidden; - border: 1px solid #4f80ff; - border-radius: 4px; - vertical-align: top; - & > a { - float: left; - overflow: hidden; - width: 70px; - height: 32px; - border-left: 1px solid #4f80ff; - font-size: 14px; - font-weight: 600; - color: #4f80ff; - text-align: center; - line-height: 32px; - cursor: pointer; + & + .table_sjt { + margin-top: 18px; } - & > a:first-of-type { - border-left: 0; + &:after { + display: block; + clear: both; + content: ''; } - .active { - color: #fff; - background-color: #4f80ff; - } - } - .btn_save { - position: absolute; - overflow: hidden; - box-sizing: border-box; - top: 0; - right: 0; - height: 34px; - padding: 0 18px; - border: 1px solid #e2e2e2; - border-radius: 4px; - font-size: 14px; - font-weight: 600; - color: #555; - text-align: center; - line-height: 34px; - cursor: pointer; - } - } - .chart_box { - display: -webkit-box; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - -webkit-box-flex: 1; - flex: 1; - position: relative; - overflow: hidden; - .inner { - position: relative; - -webkit-box-flex: 1; - flex: 1 1; - overflow: auto; - border: 1px solid #e2e2e2; - padding: 0 18px 24px; - border-radius: 4px; - background-color: #f9f9f9; - } - .category_box { - margin-top: 24px; - } - .category_box + .category_box { - margin-top: 24px; - padding-top: 24px; - border-top: 1px solid #e2e2e2; - } - .table_sjt { - display: inline-block; - position: relative; - vertical-align: top; } .table_sjt > strong { + float: left; font-size: 16px; font-weight: 600; color: #2c313d; letter-spacing: -0.57px; - line-height: 16px; + &:nth-last-child(2) { + min-width: 70px; + } } .table_sjt .q_box { - display: inline-block; + float: left; position: relative; - margin-top: 1px; - vertical-align: top; + margin: 1px 10px 0 0; } .table_sjt .ico_q { display: block; width: 16px; height: 16px; - margin-left: 8px; + margin-left: 4px; background: url('#{$imageDir}/ico_layer_q.svg') no-repeat; - vertical-align: top; + } + .table_sjt .title_dsc, + .table_sjt .dsc_list { + overflow: hidden; + letter-spacing: -0.5px; } .table_sjt .title_dsc { - display: inline-block; - padding-left: 16px; - font-size: 14px; + font-size: 16px; color: #2c313d; - letter-spacing: -0.5px; - line-height: 20px; } .table_sjt .tooltip_box { width: 464px; - left: -41px; + left: -45px; top: 28px; z-index: 10; } @@ -542,6 +336,16 @@ overflow: hidden; } } + .table_sjt .dsc_list li { + font-size: 14px; + color: #555; + line-height: 22px; + &:before { + display: inline-block; + vertical-align: middle; + content: '•'; + } + } .table_info { overflow: hidden; margin-top: 20px; @@ -560,7 +364,7 @@ top: 1px; width: 1px; height: 10px; - background-color: #979797; + background-color: #e2e2e2; content: ''; } .table_info li:first-of-type { @@ -575,6 +379,9 @@ border: 1px solid #cbcbcb; border-width: 1px 0; max-height: 221px; + & + .table_sjt { + margin-top: 24px; + } } .table { width: 100%; @@ -631,7 +438,7 @@ border-top: 0; } .chart_list { - margin: -12px 0 0 -12px; + margin-left: -8px } .chart_list:after { display: block; @@ -641,49 +448,19 @@ .chart_list li { float: left; position: relative; - width: 217px; - height: 128px; - margin: 12px 0 0 12px; + margin: 8px 0 0 8px; border-radius: 6px; background-color: #fff; - background-size: cover; - background-repeat: no-repeat; cursor: pointer; - } - .chart_list li:before { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - border-radius: 6px; - border: 1px solid #e2e2e2; - content: ''; - } - .chart_list li:hover:before, - .chart_list li.active:before { - border: 2px solid #4f80ff; - } - .chart_list li img { - vertical-align: top; - } - .chart_list li.bar .chart_area, - .chart_list li.line .chart_area, - .chart_list li.histogram .chart_area, - .chart_list li.scatter .chart_area { - padding-top: 9px; - } - .chart_list li.pie .chart_area { - padding-left: 15px; - } - .chart_list .data_add_box { - height: 106px; - padding-top: 12px; - border: 0; - text-align: center; - p { - padding-top: 6px; - line-height: 88px; + &:before { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-radius: 6px; + border: 1px solid #e2e2e2; + content: ''; } } } diff --git a/src/components/ai_layout/TableChart.jsx b/src/components/ai_layout/TableChart.jsx index b60d0242..916b752f 100644 --- a/src/components/ai_layout/TableChart.jsx +++ b/src/components/ai_layout/TableChart.jsx @@ -1,11 +1,13 @@ import React, { Component, Fragment } from 'react'; +import classnames from 'classnames'; import { connect } from 'react-redux'; import { visibleAction } from '../../actions/index'; import Styles from '../../assets/entry/scss/popup.scss'; class TableChart extends Component { render () { - const { ChartState, NoResultText } = this.props; + // [D] ScatterMatrixGraphType : 마크업 확인용 + const { ChartState, NoResultText, ScatterMatrixGraphType2, ScatterMatrixGraphType3, ScatterMatrixGraphType4, ScatterMatrixGraphType5, ScatterMatrixGraphType6 } = this.props; if (ChartState == 'Default') { return ( @@ -108,6 +110,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -136,28 +146,46 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
+ @@ -191,7 +219,8 @@ class TableChart extends Component { 적용하기 -
+ {/* [D] 크게 보기 버튼을 누르면 zoom_in 클래스 추가 */} +
{/* [D] 메뉴 카테고리 선택에 따라 텍스트 변경 */} {/* 창 조절하기 버튼을 누르면 fold 클래스 추가 */}
@@ -279,6 +308,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 작게 보기 +
테이블 차트 @@ -307,173 +344,193 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
-
-
- -
- +
+
+
+ +
+ +
+ 차트 삭제
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
-
- {/* 클릭이 되면 active 클래스 추가 */} - 오름차순 - 내림차순 +
+ {/* 클릭이 되면 active 클래스 추가 */} + 오름차순 + 내림차순 +
-
- {/* 테이블 차트 입력폼 */} -
+ {/* 테이블 차트 입력폼 */} +

{NoResultText}

+
@@ -584,6 +641,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -612,165 +677,185 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
-
-
- -
- +
+
+
+ +
+ +
+ 차트 삭제
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
-
-
- 여기에 그래프를 넣어주세요 +
+
+ 여기에 그래프를 넣어주세요 +
@@ -883,6 +968,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -911,48 +1004,126 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
-
-
- -
- +
+
+
+ +
+ +
+ 차트 삭제
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */}
    @@ -1006,132 +1177,74 @@ class TableChart extends Component {
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- - - -
-
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
- {/* 테이블 차트 입력폼 */} -
+ {/* 테이블 차트 입력폼 */} +

{NoResultText}

+
@@ -1242,6 +1355,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -1270,48 +1391,126 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
-
-
- -
- +
+
+
+ +
+ +
+ 차트 삭제
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */}
    @@ -1365,131 +1564,73 @@ class TableChart extends Component {
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - - -
-
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- - -
-
-
+
여기에 그래프를 넣어주세요
+
@@ -1600,6 +1741,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -1628,136 +1777,156 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
-
-
- -
- +
+
+
+ +
+ +
+ 차트 삭제
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
- - -
-
-
- - -
- - {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} -
- {/* 위 disabled 클래스가 추가되면 input 요소에 readOnly 추가 */} - +
+ + {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} +
+ {/* 위 disabled 클래스가 추가되면 input 요소에 readOnly 추가 */} + +
-
-
- - {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} -
- 왼쪽 닫힘 - 오른쪽 닫힘 +
+ + {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} +
-
- {/* 테이블 차트 입력폼 */} -
-

- {NoResultText} -

+ {/* 테이블 차트 입력폼 */} +
+

+ {NoResultText} +

+
@@ -1869,6 +2038,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -1897,12 +2074,15 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
+
-
-
- -
- -
- 차트 삭제 -
-
-
- -
- {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} -
선택
- {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- - - -
+
+
+
+ +
+
+ 차트 삭제
-
- - -
-
- - {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} -
- {/* 위 disabled 클래스가 추가되면 input 요소에 readOnly 추가 */} - +
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
-
-
- - {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} -
- 왼쪽 닫힘 - 오른쪽 닫힘 +
+ + +
+
+ + {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} +
+ {/* 위 disabled 클래스가 추가되면 input 요소에 readOnly 추가 */} + +
+
+
+ + {/* 계급 폭이 비활성일 때 disabled 클래스 추가 */} +
-
-
+
{/* 범례 위치는 left / top 값 혹은 transform: translate 값으로 조정 해주세요. */}
    @@ -2053,6 +2237,917 @@ class TableChart extends Component { 여기에 그래프를 넣어주세요
+
+
+
+
+
+
+
+ + ) + } else if (ChartState == 'ScatterMatrixGraph') { + return ( + +
+
+

테이블 불러오기

+ + 적용하기 +
+
+ {/* [D] 메뉴 카테고리 선택에 따라 텍스트 변경 */} + {/* 창 조절하기 버튼을 누르면 fold 클래스 추가 */} +
+

테이블 추가하기

+ + + + 창 조절하기 + +
+
+
+
+ +
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 + + + 저장하기 +
+
+
+

차트

+
+ {/* 테이블 선택 */} + +
+
+
+ +
+ +
+ 차트 삭제 +
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+
+
+ +
+ {/* [D] on 클래스가 들어오면 imico_pop_select_arr_up 으로 바꿔주세요 */} +
선택
+ {/* 공통 툴팁의 화살표 기본 위치는 가운데 입니다. */} +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+
+
+
+ {/* [D] 산점도 행렬 그래프 클래스 + - 2x2 : type_2 + - 3x3 : type_3 + - 4x4 : type_4 + - 5x5 : type_5 + - 6x6 : type_6 + */} +
+ {ScatterMatrixGraphType2 && + <> +
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 + y축 레이블 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + x축 레이블 +
+ + } + {ScatterMatrixGraphType3 && + <> +
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 + 부리 깊이 +
+ + } + {ScatterMatrixGraphType4 && + <> +
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 + 부리 길이 +
+ + } + {ScatterMatrixGraphType5 && + <> +
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+ + } + {ScatterMatrixGraphType6 && + <> +
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + -0.23 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십 + 부리 길이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 깊이 + 부리 깊이 +
+
+ 여기에 그래프를 넣어주세요 + 부리 길이 + 부리 깊이 +
+ + } +
+
@@ -2090,10 +3185,19 @@ class TableChart extends Component {
-
-

- 먼저 테이블을 추가해 주세요 -

+ {/* [D] 테이블 불러오기 > 테이블 없을 때 : table_no_result_content 클래스 추가 */} +
+
+

+ [테이블 추가하기]를 눌러 테이블을 추가해 주세요. +

+
+
테이블을 추가하는 방법
+
1. 테이블 추가하기의 '테이블 선택' 탭에서 엔트리가 제공하는 기본 테이블을 선택해 추가합니다.
+
2. 테이블 추가하기의 '파일 올리기' 탭에서 CSV, XLS(X) 파일을 직접 업로드해 추가합니다.
+
3. 테이블 추가하기의 '새로 만들기' 탭에서 빈 테이블을 추가하고 데이터를 직접 입력합니다.
+
+
@@ -2202,6 +3306,14 @@ class TableChart extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -2230,12 +3342,15 @@ class TableChart extends Component { 히스토그램 + + 산점도 행렬 +
추가하기 {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} -
+
diff --git a/src/components/ai_layout/TableSummary.jsx b/src/components/ai_layout/TableSummary.jsx index cee04b70..9c66b3bd 100644 --- a/src/components/ai_layout/TableSummary.jsx +++ b/src/components/ai_layout/TableSummary.jsx @@ -5,7 +5,9 @@ import Styles from '../../assets/entry/scss/popup.scss'; class TableSummary extends Component { render () { - const { SummaryState } = this.props; + // [D] ZoonIn : 마크업 확인용 / 스펙에 맞게 변경해주세요 + const { SummaryState, ZoonIn } = this.props; + if (SummaryState == 'Total') { return ( @@ -20,7 +22,8 @@ class TableSummary extends Component { 적용하기 -
+ {/* [D] 크게 보기 버튼을 누르면 zoom_in 클래스 추가 */} +
{/* [D] 메뉴 카테고리 선택에 따라 텍스트 변경 */} {/* 창 조절하기 버튼을 누르면 fold 클래스 추가 */}
@@ -108,6 +111,14 @@ class TableSummary extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + {ZoonIn ? '작게 보기' : '크게 보기'} +
테이블 차트 @@ -117,310 +128,400 @@ class TableSummary extends Component {
-

정보

-
-
-
- 요약 -

우리나라의 연평균 기온과 계절별 평균 기온입니다.

-
-
-
-
- 테이블 -
- - 도움말 +

정보

+
+
+ + 막대형 + + + 꺽은선형 + + + 원형 + + + 방사형 + + + 히스토그램 + + + 산점도 행렬 + +
+ + 추가하기 - {/* 도움말을 클릭하면 display: block 처리 해주세요 */} -
-
- - 숫자가 아닌 값이 포함된 속성은 개수만 확인할 수 - 있습니다. - -
    -
  • - 평균 -

    - 해당 속성의 모든 값을 더한 후 속성의 - 개수 만큼 나눈 값 -

    -
    • -
  • - 표준 편차 -

    - 데이터가평균을 중심으로 얼마나 - 퍼져있는지 알려주는 값. -
    - 0에 가까울 수록 값들이 평균 근처에 - 집중되어 있다는 것을 의미 -

    -
    • -
  • - - 최댓값/최솟값 - -

    - 해당 속성의 가장 큰 값과 가장 작은 값 -

    -
    • -
  • - - 하위 25, 50, 75% - -

    - 해당 속성의 최솟값을 0%, 최댓값을 -
    - 100%라고 치환했을 때 각 크기에 해당하는 - 값 -

    -
    • -
  • - 중간값 -

    - 해당 속성의 모든 값을 크기순으로 - 배열했을 때
    - 전체의 중앙에 위치하는 값 -

    -
    • -
-
- - - + {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} +
-

새로운 테이블에서 열을 기준으로 한 기초 통계량입니다.

-
    -
  • - 행 99개 -
    • -
  • - 열 99개 -
    • -
  • - 칸 99개 -
    • -
-
- {/* 셀의 갯수가 많을 경우 table의 총 너비를 계산해주세요. */} - - - - {/* 셀의 갯수만큼 col의 갯수를 늘려주세요. */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-   -
- 		-
- 평균 -
- 		-
- 표준편차 -
- 		-
- 최대값 -
- 		-
- 중간값 -
- 		-
- 최솟값 -
-
-
- 학교이름 -
- 		- 11873 - - - - - - - - - - - - -
-
- 학교급 -
- 		- 11873 - - - - - - - - - - - - -
-
- 지역 -
- 		- 11873 - - - - - - - - - - - - -
-
- 위도 -
- 		- 11873 - - - - - - - - - - - - -
-
- 경도 -
- 		- 11873 - - - - - - - - - - - - -
-
- 기타 +
+
+
+ 요약 +

우리나라의 연평균 기온과 계절별 평균 기온입니다.

+
+
+ 제공처 +

Palmer Station Antarctica LTER

+
+
+ 상세 +

남극의 파머 기지(Palmer Station) 근처에서 먹이를 찾는 333마리의 성체 펭귄에 대해 품종, 서식지, 부리 길이, 부리 깊이, 날개 길이, 몸무게, 성별을 정리한 데이터셋입니다. 이 데이터셋은 붓꽃 데이터의 대안으로 사용 됩니다.

+
+
+
+
+ 통계량 +
+ + 도움말 + + {/* 도움말을 클릭하면 display: block 처리 해주세요 */} +
+
+ + 숫자가 아닌 값이 포함된 속성은 개수만 확인할 수 + 있습니다. + +
    +
  • + 평균 +

    + 해당 속성의 모든 값을 더한 후 속성의 + 개수 만큼 나눈 값 +

    +
    • +
  • + 표준 편차 +

    + 데이터가평균을 중심으로 얼마나 + 퍼져있는지 알려주는 값. +
    + 0에 가까울 수록 값들이 평균 근처에 + 집중되어 있다는 것을 의미 +

    +
    • +
  • + + 최댓값/최솟값 + +

    + 해당 속성의 가장 큰 값과 가장 작은 값 +

    +
    • +
  • + + 하위 25, 50, 75% + +

    + 해당 속성의 최솟값을 0%, 최댓값을 +
    + 100%라고 치환했을 때 각 크기에 해당하는 + 값 +

    +
    • +
  • + 중간값 +

    + 해당 속성의 모든 값을 크기순으로 + 배열했을 때
    + 전체의 중앙에 위치하는 값 +

    +
    • +
-
- 11873 - - - - - - - - - - - - -
+ + + +
+
+

새로운 테이블에서 열을 기준으로 한 기초 통계량입니다.

+
+
    +
  • + 행 1,000개 +
    • +
  • + 열 3,000개 +
    • +
  • + 셀 100,000개 +
    • +
+
+ {/* 셀의 갯수가 많을 경우 table의 총 너비를 계산해주세요. */} + + + + {/* 셀의 갯수만큼 col의 갯수를 늘려주세요. */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+   +
+ 		+
+ 평균 +
+ 		+
+ 표준편차 +
+ 		+
+ 최대값 +
+ 		+
+ 중간값 +
+ 		+
+ 최솟값 +
+
+
+ 학교이름 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+ 학교급 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+ 지역 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+ 위도 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+ 경도 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+ 기타 +
+ 		+ 11873 + + - + + - + + - + + - +
+
+
+ 속성 정보 +
    +
  • 품종: 관측된 펭귄의 종류로 아델리(Adelie) 펭귄, 턱끈(Chinstrap) 펭귄, 젠투(Gentoo) 펭귄의 3종류입니다.
    • +
  • 부리 깊이: 위 부리의 위쪽 표면부터 아래 부리의 아래쪽 표면까지의 길이를 말합니다. (mm)
    • +
  • 몸무게: 펭귄의 몸무게(body mass)입니다. (g)
    • +
+
+
+
-
-
-
    - {/* 그래프의 이미지는 background-image로 넣어주세요. */} -
  • -   -
    • -
  • -   -
    • -
  • -   -
    • -
  • -   -
    • -
  • -   -
    • -
  • -   -
    • -
  • -   -
    • -
-
@@ -441,6 +542,7 @@ class TableSummary extends Component { 적용하기 + {/* [D] 크게 보기 버튼을 누르면 zoom_in 클래스 추가 */}
{/* [D] 메뉴 카테고리 선택에 따라 텍스트 변경 */} {/* 창 조절하기 버튼을 누르면 fold 클래스 추가 */} @@ -529,6 +631,14 @@ class TableSummary extends Component {
+ {/* [D] 크게 보기 btn_zoom_in 클릭하면 + - active 클래스 추가 + - blind 텍스트 '작게 보기' 로 변경 + - section_container 에 zoom_in 클래스 추가 + */} + + 크게 보기 +
테이블 차트 @@ -540,170 +650,233 @@ class TableSummary extends Component {

정보

-
-
- 테이블 -
- - 도움말 - - {/* 도움말을 클릭하면 display: block 처리 해주세요 */} -
-
- - 숫자가 아닌 값이 포함된 속성은 개수만 확인할 수 - 있습니다. - -
    -
  • - 평균 -

    - 해당 속성의 모든 값을 더한 후 속성의 - 개수 만큼 나눈 값 -

    -
    • -
  • - 표준 편차 -

    - 데이터가평균을 중심으로 얼마나 - 퍼져있는지 알려주는 값. -
    - 0에 가까울 수록 값들이 평균 근처에 - 집중되어 있다는 것을 의미 -

    -
    • -
  • - - 최댓값/최솟값 - -

    - 해당 속성의 가장 큰 값과 가장 작은 값 -

    -
    • -
  • - - 하위 25, 50, 75% - -

    - 해당 속성의 최솟값을 0%, 최댓값을 -
    - 100%라고 치환했을 때 각 크기에 해당하는 - 값 -

    -
    • -
  • - 중간값 -

    - 해당 속성의 모든 값을 크기순으로 - 배열했을 때
    - 전체의 중앙에 위치하는 값 -

    -
    • -
-
- + + 막대형 + + + 꺽은선형 + + + 원형 + + + 방사형 + + + 히스토그램 + + + 산점도 행렬 + +
+ + 추가하기 + + {/* 추가하기 링크가 클릭되면 display: block 처리 해주세요 */} + +
+
+
+
+
+ 통계량 +
+ + 도움말 + + {/* 도움말을 클릭하면 display: block 처리 해주세요 */} +
- - +
+ + 숫자가 아닌 값이 포함된 속성은 개수만 확인할 수 + 있습니다. + +
    +
  • + 평균 +

    + 해당 속성의 모든 값을 더한 후 속성의 + 개수 만큼 나눈 값 +

    +
    • +
  • + 표준 편차 +

    + 데이터가평균을 중심으로 얼마나 + 퍼져있는지 알려주는 값. +
    + 0에 가까울 수록 값들이 평균 근처에 + 집중되어 있다는 것을 의미 +

    +
    • +
  • + + 최댓값/최솟값 + +

    + 해당 속성의 가장 큰 값과 가장 작은 값 +

    +
    • +
  • + + 하위 25, 50, 75% + +

    + 해당 속성의 최솟값을 0%, 최댓값을 +
    + 100%라고 치환했을 때 각 크기에 해당하는 + 값 +

    +
    • +
  • + 중간값 +

    + 해당 속성의 모든 값을 크기순으로 + 배열했을 때
    + 전체의 중앙에 위치하는 값 +

    +
    • +
+
+ + + +
+

새로운 테이블에서 열을 기준으로 한 기초 통계량입니다.

-

새로운 테이블에서 열을 기준으로 한 기초 통계량입니다.

-
-
    -
  • - 행 0개 -
    • -
  • - 열 0개 -
    • -
  • - 칸 0개 -
    • -
-
- {/* 셀의 갯수가 많을 경우 table의 총 너비를 계산해주세요. */} - - - - {/* 셀의 갯수만큼 col의 갯수를 늘려주세요. */} - - - - - - - - - - - - - - - - - - - + + + + + +
-
-   -
- 		-
- 평균 -
- 		-
- 표준편차 -
- 		-
- 최대값 -
- 		-
- 중간값 -
- 		-
- 최솟값 -
-
-
+
    +
  • + 행 0개 +
    • +
  • + 열 0개 +
    • +
  • + 셀 0개 +
    • +
+
+ {/* 셀의 갯수가 많을 경우 table의 총 너비를 계산해주세요. */} + + + + {/* 셀의 갯수만큼 col의 갯수를 늘려주세요. */} + + + + + + + + + + + + + + + + + + + + - - - - - - -
+
+   +
+ 		+
+ 평균 +
+ 		+
+ 표준편차 +
+ 		+
+ 최대값 +
+ 		+
+ 중간값 +
+ 		+
+ 최솟값 +
+
+
+ - +
+ 		- - - - - - - - - - - - - - - - - - -
+ +
+ - + + - + + - + + - +
+
-
-
+
차트

추가한 차트가 없습니다.

+
diff --git a/src/components/editor/dataAnalytics/chart/SelectChartDropdown.jsx b/src/components/editor/dataAnalytics/chart/SelectChartDropdown.jsx index cf271b98..b52cf2fe 100644 --- a/src/components/editor/dataAnalytics/chart/SelectChartDropdown.jsx +++ b/src/components/editor/dataAnalytics/chart/SelectChartDropdown.jsx @@ -12,7 +12,7 @@ const SelectChartDropdown = (props) => { }; return ( -
+
    {CHART_CATEGORY.map((item, index) => (
  • diff --git a/src/stories/index.js b/src/stories/index.js index ebf89fe2..1041f414 100644 --- a/src/stories/index.js +++ b/src/stories/index.js @@ -402,7 +402,7 @@ storiesOf('AiLayout', module) .add('파일 올리기 - 새로 만들기', () => ) .add('데이터 차트 - 차트 추가 기본', () => ) .add('데이터 차트 - Aside 접기', () => ) - .add('데이터 차트 - 2차 가로', () => ( + .add('데이터 차트 - 2차 가로 - 크게보기', () => ( )) .add('데이터 차트 - 2차 계열', () => ( @@ -417,9 +417,15 @@ storiesOf('AiLayout', module) )) .add('데이터 차트 - 히스토그램 그래프', () => ) + .add('데이터 차트 - 산점도 행렬 2x2 그래프', () => ) + .add('데이터 차트 - 산점도 행렬 3x3 그래프', () => ) + .add('데이터 차트 - 산점도 행렬 4x4 그래프', () => ) + .add('데이터 차트 - 산점도 행렬 5x5 그래프', () => ) + .add('데이터 차트 - 산점도 행렬 6x6 그래프', () => ) .add('데이터 차트 - 테이블 없음', () => ) .add('데이터 차트 - 요약', () => ) - .add('데이터 차트 - 요약 모두', () => ) + .add('데이터 차트 - 요약 모두 - Aside 접기', () => ) + .add('데이터 차트 - 요약 모두 - 크게보기', () => ) .add('데이터 차트 - test', () => ) .add('차트', () => (