visualpython · minjk-bl · Mar 29, 2022 · Mar 16, 2022 · Mar 21, 2022 · Mar 24, 2022
diff --git a/css/boardFrame.css b/css/boardFrame.css
@@ -238,6 +238,13 @@
 .vp-block.apps.vp-focus-child .vp-block-header {
     background-color: rgb(253, 177, 133);
 }
+.vp-block.visualization .vp-block-header {
+    background-color: rgb(249, 227, 214);
+}
+.vp-block.visualization.vp-focus .vp-block-header,
+.vp-block.visualization.vp-focus-child .vp-block-header {
+    background-color: rgb(253, 177, 133);
+}
 .vp-block.machine_learning .vp-block-header {
     background-color: #E8ECD0;
 }

diff --git a/css/component/dataSelector.css b/css/component/dataSelector.css
@@ -0,0 +1,17 @@
+/* Code Preview */
+.vp-ds-preview {
+    width: 100%;
+    height: 35px;
+    background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px );
+    background-color: white;
+    border: 0.25px solid #E4E4E4;
+}
+.vp-ds-preview textarea {
+    display: none;
+}
+.vp-ds-preview .CodeMirror-code .cm-variable {
+    background-color: rgba(47, 133, 90, 0.2);
+}
+.vp-ds-preview .CodeMirror-code .cm-string {
+    background-color: rgba(246, 173, 85, 0.2);
+}
diff --git a/css/m_apps/snippets.css b/css/m_apps/snippets.css
@@ -163,7 +163,7 @@
 .vp-sn-export-mode .vp-sn-item-menu {
     display: none;
 }
-.vp-sn-export-mode input.vp-sn-checkbox {
+.vp-sn-export-mode input[type=checkbox].vp-sn-checkbox {
     display: inline-block;
     position: relative !important;
     width: 13px;

diff --git a/css/m_apps/subset.css b/css/m_apps/subset.css
@@ -116,6 +116,9 @@
 .vp-ds-rowtype-box.condition .vp-td-line {
     padding-bottom: 5px;
 }
+.vp-ds-rowtype-box.condition table {
+    width: 100%;
+}
 .vp-ds-rowtype-box.condition table td {
     padding-bottom: 20px;
 }

diff --git a/css/m_visualize/seaborn.css b/css/m_visualize/seaborn.css
@@ -0,0 +1,43 @@
+.vp-chart-setting {
+    float: right;
+    color: var(--gray-color);
+    padding-right: 5px;
+    cursor: pointer;
+}
+.vp-tab-bar {
+    width: 100%;
+    overflow-y: hidden;
+}
+.vp-tab-item {
+    display: inline-block;
+    position: relative;
+    width: 85px;
+    height: 30px;
+    line-height: 30px;
+    background: var(--light-gray-color);
+    cursor: pointer;
+    border: 0.24px solid #E4E4E4;
+    box-sizing: border-box;
+    border-radius: 2px 2px 0px 0px;
+    font-weight: bold;
+    text-align: center;
+}
+.vp-tab-item.vp-focus {
+    color: var(--font-hightlight);
+    background: white;
+    border-bottom: 3px solid #FFCF73;
+}
+.vp-tab-page {
+    width: 100%;
+    height: 180px;
+}
+
+.vp-chart-left-box, 
+.vp-chart-right-box {
+    padding: 3px;
+    height: 250px;
+}
+
+.vp-chart-preview-box {
+    min-height: 150px;
+}
diff --git a/css/popupComponent.css b/css/popupComponent.css
@@ -402,3 +402,84 @@
     text-align: center;
     cursor: pointer;
 }
+/* variable popup */
+.vp-variable-popup-box {
+    position: absolute;
+    left: calc(50% - 135px);
+    top: calc(50% - 135px);
+    min-width: 370px;
+    min-height: 370px;
+    width: 370px;
+    height: 370px;
+    background-color: white;
+    z-index: 200;
+    border: 0.25px solid var(--border-gray-color);
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+}
+.vp-variable-popup-header {
+    position: relative;
+    height: 30px;
+    background: var(--light-gray-color);
+    border-bottom: 1px solid var(--border-gray-color);
+}
+.vp-variable-popup-title {
+    line-height: 33px;
+    width: calc(100% - 30px);
+    height: 30px;
+    padding-left: 10px;
+    font-size: 15px;
+    color: var(--font-primary);
+    cursor: pointer;
+}
+.vp-variable-popup-body {
+    height: calc(100% - 70px);
+    padding: 10px;
+}
+.vp-variable-popup-button-box {
+    float: right;
+    margin: 0 10px 10px 0;
+}
+.vp-variable-popup-close {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 4px;
+    right: 5px;
+    z-index: 3;
+    line-height: 20px;
+    text-align: center;
+    cursor: pointer;
+}
+/* body top-bar */
+.vp-popup-body-top-bar {
+    text-align: right;
+}
+.vp-popup-body-top-bar-item {
+    margin-bottom: 5px;
+}
+.vp-popup-body-top-bar-item:hover {
+    color: var(--font-hightlight);
+}
+.vp-popup-body-top-bar-item img {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 22px; /* Width of new image */
+    height: 22px; /* Height of new image */
+    padding-left: 22px; /* Equal to width of new image */
+    margin-bottom: 5px;
+}
+.vp-popup-body-top-bar-item[data-type="import"] img {
+    background: url(../../visualpython/img/import.svg) no-repeat;
+}  
+.vp-popup-body-top-bar-item[data-type="import"]:hover img {
+    background: url(../../visualpython/img/import_activated.svg) no-repeat;
+}   
+.vp-popup-body-top-bar-item[data-type="package"] {
+    margin-left: 10px;
+}
+.vp-popup-body-top-bar-item[data-type="package"] img {
+    background: url(../../visualpython/img/setting.svg) no-repeat;
+}
+.vp-popup-body-top-bar-item[data-type="package"]:hover img {
+    background: url(../../visualpython/img/setting_activated.svg) no-repeat;
+}
diff --git a/css/root.css b/css/root.css
@@ -129,13 +129,17 @@ body {
 }
 
 /* Input & Select Design - width m&s */
+.vp-input.l,
+.vp-select.l {
+    width: 232px !important;
+}
 .vp-input.m,
 .vp-select.m {
-    width: 116px;
+    width: 116px !important;
 }
 .vp-input.s,
 .vp-select.s {
-    width: 55px;
+    width: 55px !important;
 }
 
 /* Buttons */
@@ -197,7 +201,6 @@ body {
     color: #696969;
     cursor: not-allowed;
 }
-
 .vp-checkbox {
     display: inline-block;
     position: relative !important;

diff --git a/data/libraries.json b/data/libraries.json
@@ -3033,20 +3033,6 @@
                             "icon": "apps/apps_reshape.svg"
                         }
                     },
-                    {
-                        "id"   : "apps_chart",
-                        "type" : "function",
-                        "level": 1,
-                        "name" : "Chart",
-                        "tag"  : "CHART,APPS",
-                        "path" : "visualpython - apps - chart",
-                        "desc" : "Chart",
-                        "file" : "m_apps/Chart",
-                        "apps" : {
-                            "color": 3,
-                            "icon": "apps/apps_chart.svg"
-                        }
-                    },
                     {
                         "id"   : "apps_markdown",
                         "type" : "function",
@@ -3061,6 +3047,20 @@
                             "icon": "apps/apps_markdown.svg"
                         }
                     },
+                    {
+                        "id"   : "visualize_chart",
+                        "type" : "function",
+                        "level": 1,
+                        "name" : "Chart",
+                        "tag"  : "MATPLOTLIB,CHART,VISUALIZATION,VISUALIZE",
+                        "path" : "visualpython - visualization - matplotlib",
+                        "desc" : "Matplotlib chart creation",
+                        "file" : "m_apps/Chart",
+                        "apps" : {
+                            "color": 3,
+                            "icon": "apps/apps_chart.svg"
+                        }
+                    },
                     {
                         "id"   : "apps_pdf",
                         "type" : "function",