Merge pull request #14 from juijs/develop

Develop
juijs · Aug 12, 2019 · ea972b7 · ea972b7
2 parents 31dfa06 + 9ddd79f
commit ea972b7
Show file tree

Hide file tree

Showing 7 changed files with 1,636 additions and 748 deletions.
diff --git a/README.md b/README.md
@@ -166,8 +166,8 @@ There are many charts that have not yet been migrated. We are going to continue.
 | axisMin | Number | false | false | 0 | Miniimum value for the chart axis |
 | axisMax | Number | false | false | 0 | Maximum value for the chart axis |
 | axisStep | Number | false | false | 10 | Display interval of chart axis value |
-| axisXStyle | String | false | false | `solid` | Line style for chart x-axis area (**solid**, **dotted**, **gradient**, **hidden**) |
-| axisYStyle | String | false | false | `solid` | Line style for chart y-axis area (**solid**, **dotted**, **gradient**, **hidden**) 
+| axisXStyle | String | false | false | `solid` | Line style for chart x-axis area (**solid**, **dotted**, **gradient**, **none**, **hidden**) |
+| axisYStyle | String | false | false | `solid` | Line style for chart y-axis area (**solid**, **dotted**, **gradient**, **none**, **hidden**) 
 | axisXPosition | String | false | false | `bottom` | Chart x-axis position (**bottom**, **top**) |
 | axisYPosition | String | false | false | `left` | Chart y-axis position (**left**, **right**) |
 | axisReverse | Boolean | false | false | false | Replace the x and y axis positions |

diff --git a/bundles/index.html b/bundles/index.html
@@ -9,11 +9,8 @@
     <graph-bar
             :width="600"
             :height="400"
-            :axis-min="0"
-            :axis-max="50"
-            :focus-start="1"
-            :focus-end="1"
-            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
+            :labels="[ '1Q', ' ', '3Q', ' ' ]"
+            :axis-x-style="'none'"
             :values="values">
         <note :text="'Bar Chart'"></note>
         <tooltip :names="names" :position="'left'"></tooltip>

diff --git a/bundles/index.js b/bundles/index.js
@@ -16,7 +16,8 @@ window.vm = new Vue({
     data: {
         names: [ "MS", "Apple", "Google" ],
         values: [
-            [ 10, 5, 5, 5 ]
-        ]
+            [ 0, 0, 0, 0 ]
+        ],
+        focus: 1
     }
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-graph",
   "productionName": "Vue Graph",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "A library that provides various visualization elements for Vue.js",
   "main": "src/main.js",
   "files": [
@@ -48,20 +48,20 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
-    "sinon": "^7.2.5",
+    "sinon": "^7.4.1",
     "uglifyjs-webpack-plugin": "^1.3.0",
-    "vue-jest": "^3.0.3",
-    "vue-loader": "^15.6.4",
-    "vue-template-compiler": "^2.6.7",
+    "vue-jest": "^3.0.4",
+    "vue-loader": "^15.7.1",
+    "vue-template-compiler": "^2.6.10",
     "vue-test-utils": "^1.0.0-beta.11",
-    "webpack": "^4.29.5",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1",
+    "webpack": "^4.39.1",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.8.0",
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
     "juijs-chart": "2.5.9",
-    "vue": "^2.6.7"
+    "vue": "^2.6.10"
   }
 }
diff --git a/src/base/methods.js b/src/base/methods.js
@@ -34,7 +34,8 @@ export default {
             }
 
             return function(data) {
-                return Math.max.apply(null, Object.values(data));
+                const max = Math.max.apply(null, Object.values(data));
+                return max == 0 ? 1 : max;
             }
         },
         initGraphBrushes: function() {
@@ -44,11 +45,14 @@ export default {
 
             // 포커스 브러쉬는 기본 옵션으로 구현하였음
             if(this.focusStart != -1 && this.focusEnd != -1) {
-                this.chart.addBrush({
+                const brush = {
                     type: 'focus',
                     start: this.focusStart,
                     end: this.focusEnd
-                });
+                };
+
+                this.brushes.push(brush);
+                this.chart.addBrush(brush);
             }
         },
         initGraphWidgets: function() {

diff --git a/src/base/watch.js b/src/base/watch.js
@@ -23,6 +23,24 @@ export default {
         axisMax: function(newVal, oldVal) {
             this.chart.axis(0).set(this.axisReverse ? 'x' : 'y', { domain: [ this.axisMin, newVal ] });
             this.chart.render();
-        }
+        },
+        focusStart: function(newVal, oldVal) {
+            if(newVal == oldVal) return;
+            this.brushes.forEach((brush, index) => {
+                if(brush.type == 'focus') {
+                    this.chart.updateBrush(index, { start: newVal });
+                    this.chart.render();
+                }
+            });
+        },
+        focusEnd: function(newVal, oldVal) {
+            if(newVal == oldVal) return;
+            this.brushes.forEach((brush, index) => {
+                if(brush.type == 'focus') {
+                    this.chart.updateBrush(index, { end: newVal });
+                    this.chart.render();
+                }
+            });
+        },
     }
 }