Skip to content

Commit f299cf8

Browse files
prismlkimorkimusbsyncjooheemoon
authored
[#5209] change splom chart (#389)
* change splom chart * 디자인 수정 요청 사항 반영 (#390) * 디자인 수정 요청 사항 반영 * useCallback -> useMemo * remove big_line_height * [entry/entry2#5209] [WS] 데이터 분석에 새로운 기능(산점도 행렬, 차트 크게 보기 등)을 추가 - 디자인 검수 반영 * 차트내 폰트 nanumGothic으로 변경 * 산점도 차트 라인 추가 * 디자인 수정 * 디자인 수정 요청 사항 반영 Co-authored-by: usbsync <usbsync@nts-corp.com> Co-authored-by: joohee.moon <joohee.moon@nts-corp.com> Co-authored-by: JY Kim <kimorkim@gmail.com> Co-authored-by: usbsync <usbsync@nts-corp.com> Co-authored-by: joohee.moon <joohee.moon@nts-corp.com>
1 parent c582e5f commit f299cf8

File tree

18 files changed

+4822
-219
lines changed

18 files changed

+4822
-219
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,11 @@
134134
"entry_sheet": "https://8a14b1ce074335d7a7d9099b4a0807cc40fc9434:x-oauth-basic@oss.navercorp.com/ria/entry_sheet.git#v0.0.0.26",
135135
"jest": "^26.0.1",
136136
"moment": "^2.24.0",
137+
"plotly.js": "^2.16.5",
137138
"react-cookies": "^0.1.0",
138139
"react-device-detect": "^1.15.0",
139140
"react-outside-click-handler": "^1.2.2",
141+
"react-plotly.js": "^2.6.0",
140142
"react-slick": "^0.23.2",
141143
"redux-form": "^7.4.2",
142144
"reselect": "^4.0.0",

‎src/assets/entry/scss/common/_tooltip.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -795,8 +795,8 @@
795795
// 그래프
796796
.tooltip_graph_box {
797797
@include PositionLT(absolute, 0, 54px);
798-
width: 393px;
799-
padding: 16px 0 14px 4px;
798+
width: 424px;
799+
padding: 16px 0 14px 0;
800800
box-sizing: border-box;
801801
background-color: #fff;
802802
border-radius: 6px;
@@ -806,12 +806,15 @@
806806
color: #2c313d;
807807
line-height: 15px;
808808
.graph_list {
809+
padding-left: 1px;
810+
padding-right: 1px;
809811
overflow: hidden;
810812
}
811813
.graph_list li {
812814
float: left;
813815
width: 64px;
814-
margin-left: 0;
816+
margin-left: 3px;
817+
margin-right: 3px;
815818
a {
816819
display: block;
817820
font-size: 12px;
@@ -835,9 +838,6 @@
835838
background-size: 40px auto;
836839
content: '';
837840
}
838-
&:first-child {
839-
margin-left: 0;
840-
}
841841
&.bar a:before {
842842
background-image: url('#{$imageDir}/icon_chart_sel01_on.svg');
843843
}

‎src/assets/entry/scss/components/_TableChart.scss‎

Lines changed: 16 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -244,155 +244,19 @@ $axis-size: 22px;
244244
.chart_area {
245245
svg {
246246
margin: auto;
247+
248+
:global(.infolayer) {
249+
text {
250+
font-weight: 600 !important;
251+
}
252+
}
247253
}
248254
}
249255
}
250256
.graph_box.pie {
251257
padding-top: 30px;
252258
padding-right: 230px;
253259
}
254-
// .graph_box.scatter_matrix {
255-
// .scatter_matrix {
256-
// min-height: 370px;
257-
// padding-bottom: 30px + ($axis-size * 2);
258-
// padding-left: 30px + ($axis-size * 2);
259-
// box-sizing: border-box;
260-
// .graph {
261-
// float: left;
262-
// position: relative;
263-
// }
264-
// &:after {
265-
// display: block;
266-
// clear: both;
267-
// content: '';
268-
// }
269-
// .graph_title {
270-
// position: absolute;
271-
// top: 50%;
272-
// left: 50%;
273-
// transform: translate(-50%, -50%);
274-
// }
275-
// .graph_title,
276-
// .axis_x,
277-
// .axis_list_x,
278-
// .axis_y,
279-
// .axis_list_y {
280-
// color: #555;
281-
// letter-spacing: -0.5px;
282-
// }
283-
// .axis_x,
284-
// .axis_list_x,
285-
// .axis_y,
286-
// .axis_list_y {
287-
// position: absolute;
288-
// }
289-
// .axis_x,
290-
// .axis_y {
291-
// overflow: hidden;
292-
// height: $axis-size;
293-
// font-size: 12px;
294-
// white-space: nowrap;
295-
// text-overflow: ellipsis;
296-
// }
297-
// .axis_x,
298-
// .axis_list_x {
299-
// left: 50%;
300-
// transform: translateX(-50%);
301-
// }
302-
// .axis_x {
303-
// bottom: -(($axis-size * 2) + 10px);
304-
// max-width: 100%;
305-
// }
306-
// .axis_y {
307-
// display: block;
308-
// bottom: 0;
309-
// left: -(($axis-size * 2) + 10px);
310-
// max-width: 40%;
311-
// transform-origin: 0 0;
312-
// transform: rotate(-90deg);
313-
// }
314-
// .axis_list_x,
315-
// .axis_list_y {
316-
// display: flex;
317-
// justify-content: space-between;
318-
// align-items: self-end;
319-
// font-size: 10px;
320-
// }
321-
// .axis_list_x {
322-
// bottom: -$axis-size;
323-
// width: 95%;
324-
// height: $axis-size;
325-
// margin-left: 12px;
326-
// }
327-
// .axis_list_y {
328-
// flex-direction: column;
329-
// -webkit-box-direction: normal;
330-
// -webkit-box-orient: vertical;
331-
// top: 0;
332-
// left: -($axis-size + 10px);
333-
// width: $axis-size;
334-
// height: 100%;
335-
// }
336-
// &.type_2 {
337-
// .graph {
338-
// min-width: 134px;
339-
// width: 50%;
340-
// min-height: 134px;
341-
// height: 50%;
342-
// }
343-
// .graph_title {
344-
// font-size: 18px;
345-
// }
346-
// .axis_x,
347-
// .axis_y {
348-
// font-size: 12px;
349-
// }
350-
// }
351-
// &.type_3 {
352-
// .graph {
353-
// min-width: 120px;
354-
// width: 33.3333%;
355-
// min-height: 120px;
356-
// height: 33.3333%;
357-
// }
358-
// .graph_title {
359-
// font-size: 18px;
360-
// }
361-
// }
362-
// &.type_4 {
363-
// .graph {
364-
// min-width: 105px;
365-
// width: 25%;
366-
// min-height: 105px;
367-
// height: 25%;
368-
// }
369-
// .graph_title {
370-
// font-size: 16px;
371-
// }
372-
// }
373-
// &.type_5 {
374-
// .graph {
375-
// min-width: 82px;
376-
// width: 20%;
377-
// min-height: 82px;
378-
// height: 20%;
379-
// }
380-
// .graph_title {
381-
// font-size: 14px;
382-
// }
383-
// }
384-
// &.type_6 {
385-
// .graph {
386-
// min-width: 70px;
387-
// width: 16.6666%;
388-
// min-height: 70px;
389-
// height: 16.6666%;
390-
// }
391-
// .graph_title {
392-
// font-size: 12px;
393-
// }
394-
// }
395-
// }
396260
}
397261
.form_box {
398262
padding: 18px 16px;
@@ -413,7 +277,7 @@ $axis-size: 22px;
413277
color: #2c313d;
414278
letter-spacing: -0.33px;
415279
vertical-align: top;
416-
line-height: 40px;
280+
line-height: 43px;
417281
}
418282
.input_box {
419283
overflow: hidden;
@@ -487,10 +351,7 @@ $axis-size: 22px;
487351
}
488352
.select_group {
489353
float: left;
490-
margin-left: 22px;
491-
}
492-
.select_group:first-of-type {
493-
margin-left: 0;
354+
margin-right: 30px;
494355
}
495356
.select_group:first-of-type .tit_label {
496357
width: 70px;
@@ -504,7 +365,7 @@ $axis-size: 22px;
504365
.select_group .pop_selectbox {
505366
display: inline-block;
506367
vertical-align: top;
507-
margin-left: 12px;
368+
margin-left: 19px;
508369
}
509370
.select_group .pop_selectbox .select_link {
510371
width: auto;
@@ -549,7 +410,7 @@ $axis-size: 22px;
549410
width: 106px;
550411
height: 32px;
551412
padding: 0 30px;
552-
margin: 4px 0 0 12px;
413+
margin: 4px 0 0 19px;
553414
border: 1px solid #e2e2e2;
554415
border-radius: 4px;
555416
background-color: #fff;
@@ -603,7 +464,7 @@ $axis-size: 22px;
603464
overflow: hidden;
604465
width: 70px;
605466
height: 32px;
606-
margin: 4px 0 0 12px;
467+
margin: 4px 0 0 19px;
607468
border: 1px solid #e2e2e2;
608469
border-radius: 4px;
609470
background-color: #fff;
@@ -638,7 +499,7 @@ $axis-size: 22px;
638499
overflow: hidden;
639500
width: 70px;
640501
height: 32px;
641-
margin: 4px 0 0 12px;
502+
margin: 4px 0 0 19px;
642503
border: 1px solid #e2e2e2;
643504
border-radius: 4px;
644505
background-color: #fff;
@@ -665,7 +526,7 @@ $axis-size: 22px;
665526
}
666527
.select_group .cnt_sort {
667528
display: inline-block;
668-
margin: 4px 0 0 12px;
529+
margin: 4px 0 0 19px;
669530
vertical-align: top;
670531
}
671532
.select_group .cnt_sort a {
@@ -1093,7 +954,7 @@ $axis-size: 22px;
1093954
flex: 1;
1094955
position: relative;
1095956
overflow: hidden;
1096-
margin-left: -27px;
957+
margin-left: -23px;
1097958
.inner {
1098959
position: relative;
1099960
-webkit-box-flex: 1;
@@ -1270,13 +1131,13 @@ $axis-size: 22px;
12701131
}
12711132
}
12721133
.input_box .input_inner + .input_inner {
1273-
margin-left: 12px;
1134+
margin-left: 19px;
12741135
}
12751136
.input_box .chart_del {
12761137
float: left;
12771138
width: 100px;
12781139
height: 38px;
1279-
margin-left: 12px;
1140+
margin-left: 19px;
12801141
background-color: #fff;
12811142
border: 1px solid #e2e2e2;
12821143
border-radius: 4px;

‎src/assets/entry/scss/components/_TableSummary.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@
263263
}
264264
.table_sjt > strong {
265265
float: left;
266-
font-size: 16px;
266+
font-size: 14px;
267267
font-weight: 600;
268268
color: #2c313d;
269269
letter-spacing: -0.57px;
@@ -289,8 +289,9 @@
289289
letter-spacing: -0.5px;
290290
}
291291
.table_sjt .title_dsc {
292-
font-size: 16px;
292+
font-size: 14px;
293293
color: #2c313d;
294+
line-height: 22px;
294295
}
295296
.table_sjt .tooltip_box {
296297
width: 464px;
@@ -438,7 +439,7 @@
438439
border-top: 0;
439440
}
440441
.chart_list {
441-
margin-left: -8px
442+
margin-left: -8px;
442443
}
443444
.chart_list:after {
444445
display: block;

‎src/assets/entry/scss/popup.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2355,6 +2355,9 @@
23552355

23562356
.chart_area {
23572357
margin-top: 21px;
2358+
.sheet_box > div {
2359+
padding-bottom: 0px;
2360+
}
23582361
}
23592362
.pop_selectbox {
23602363
position: relative;

‎src/assets/entry/scss/widget/insight.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
.bb path,
2424
.bb line {
2525
fill: none;
26-
stroke: #c4c4c4;
26+
stroke: #2c313d;
2727
}
2828

2929
.bb text,
@@ -32,7 +32,7 @@
3232
-moz-user-select: none;
3333
-ms-user-select: none;
3434
user-select: none;
35-
fill: #555;
35+
fill: #2c313d;
3636
font-size: 11px;
3737
}
3838

@@ -51,7 +51,7 @@
5151

5252
.bb-axis-y text,
5353
.bb-axis-y2 text {
54-
fill: #737373;
54+
fill: #2c313d;
5555
}
5656

5757
.bb-event-rects {

0 commit comments

Comments
 (0)