juijs-chart - npm Package Compare versions

Comparing version 2.5.2 to 2.5.3

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import HeatmapScatterBrush from '../src/brush/heatmapscatter.js'
+import LineBrush from '../src/brush/line.js'
 import TitleWidget from '../src/widget/title.js'
-import DragselectWidget from '../src/widget/dragselect.js'
-import TooltipWidget from '../src/widget/tooltip.js'
+import LegendWidget from '../src/widget/legend.js'
+import ZoomWidget from '../src/widget/zoom.js'
 
-jui.use([ ClassicTheme, HeatmapScatterBrush, TitleWidget, DragselectWidget, TooltipWidget ]);
+jui.use([ ClassicTheme, LineBrush, TitleWidget, LegendWidget, ZoomWidget ]);
 
-var chart = jui.include("chart.builder"),
-    time = jui.include("util.time"),
-    txData = [];
+var chart = jui.include("chart.builder");
 
-var c = chart("#chart", {
-    height : 400,
-    axis : {
-        x : {
-            type : "date",
-            domain : getDomain(),
-            interval : 1,
-            realtime : "minutes",
-            format : "HH:mm",
-            key : "time",
-            line : true
-        },
-        y : {
-            type : "range",
-            domain : [ 0, 10000 ],
-            step : 5,
-            line : true,
-            orient : "left"
-        },
-        buffer : 100000
-    },
-    brush : {
-        type : "heatmapscatter",
-        target : [ "delay" ],
-        yInterval : 250,
-        xInterval : 5000,
-        colors : function(d) {
-            if(d.level == 0) {
-                return "#ff0000"
-            } else if(d.level == 1) {
-                return "#f2ab14";
-            }
+var data = [
+    { month : "Jan", rainfall : 49.9, sealevel : 1016, temperature : 7.0},
+    { month : "Feb", rainfall : 71.5, sealevel : 1016, temperature : 6.9 },
+    { month : "Mar", rainfall : 106.49, sealevel : 1015.9, temperature : 9.5 },
+    { month : "Apr", rainfall : 129.2, sealevel : 1015.5, temperature : 14.5 },
+    { month : "May", rainfall : 144.0, sealevel : 1012.3, temperature : 18.2 },
+    { month : "Jun", rainfall : 176.0, sealevel : 1009.5, temperature : 21.5 },
+    { month : "Jul", rainfall : 135.6, sealevel : 1009.6, temperature : 25.2 },
+    { month : "Aug", rainfall : 148.5, sealevel : 1010.2, temperature : 26.5 },
+    { month :  "Sep", rainfall : 216.4, sealevel : 1013.1, temperature : 23.3 },
+    { month :  "Oct", rainfall : 194.1, sealevel : 1016.9, temperature : 18.3 },
+    { month :  "Nov", rainfall : 95.6, sealevel : 1018.2, temperature : 13.9},
+    { month :  "Dec", rainfall : 54.4, sealevel : 1016.7, temperature : 9.6}
+];
 
-            return "#4692ca";
-        }
+chart("#chart", {
+    height : 300,
+    padding : {
+        right : 120
     },
-    event : {
-        "dragselect.end": function(data) {
-            console.log(data.length);
+    axis : [
+        {
+            x : {
+                domain : "month",
+                line : true
+            },
+            y : {
+                type : "range",
+                domain : [ 1008, 1020 ],
+                color : "#434348",
+                format : function(value) {
+                    return value + " mb";
+                },
+                orient : "right",
+                step: 6
+            },
+            data: data
+        },
+        {
+            y : {
+                type : "range",
+                domain: [ 5, 35 ],
+                color: "#90ed7d",
+                orient: "left",
+                format: function (value) {
+                    return value + " ℃";
+                }
+            },
+            extend : 0
         }
-    },
-    widget : [{
-        type : "title",
-        text : "Heat-Map Transaction View (0)"
-    }, {
-        type : "dragselect",
-        dataType : "list"
-    }, {
-        type: "tooltip"
-    }],
-    style : {
-        tooltipBorderColor: "#000"
-    }
+    ],
+    brush : [
+        { type : "line", target : "sealevel", axis : 0, colors : [ "#434348" ] , symbol : "curve" },
+        { type : "line", target : "temperature", axis : 1, colors: [ "#90ed7d" ], symbol : "curve" }
+    ],
+    widget : [
+        { type : "title", text : "Combination Sample" },
+        { type : "legend", brush : [ 0, 1 ], align : "end" },
+        { type : "zoom", axis : [ 0, 1 ], integrate : true }
+    ]
 });
-
-setInterval(function() {
-    var domain = getDomain();
-
-    appendTxData(txData, domain);
-}, 5000);
-
-setInterval(function() {
-    var domain = getDomain();
-
-    c.axis(0).update(txData);
-    c.axis(0).set("x", { domain: domain });
-
-    c.updateWidget(0, { text: "Heat-Map Transaction View (+" + txData.length + ")" });
-    c.render(true);
-}, 7000);
-
-function appendTxData(list, domain) {
-    var count = Math.floor(Math.random() * 100);
-
-    for(var i = 0; i < list.length; i++) {
-        if(list[i].time < domain[0]){
-            list.shift();
-        } else {
-            break;
-        }
-    }
-
-    for(var i = 0; i < count; i++) {
-        var type = Math.floor(Math.random() * 6),
-            data = {
-                delay: Math.floor(Math.random() * 10000),
-                level: 2,
-                time: domain[1]
-            };
-
-        if(type > 2 && type < 5) {
-            data.level = 1;
-        } else if(type > 4) {
-            data.level = 0;
-        }
-
-        list.push(data);
-    }
-}
-
-function getDomain() {
-    return [ new Date() - time.MINUTE * 5, new Date().getTime() ];
-}

bundles/production.js

@@ -44,2 +44,4 @@ import jui from '../src/main.js'
 import CanvasActiveCircleBrush from '../src/brush/canvas/activecircle.js'
+import FullGaugeBrush from '../src/brush/fullgauge.js'
+import BarGaugeBrush from '../src/brush/bargauge.js'
 import CrossWidget from '../src/widget/cross.js'
@@ -101,2 +103,4 @@ import LegendWidget from '../src/widget/legend.js'
     CanvasActiveCircleBrush,
+    FullGaugeBrush,
+    BarGaugeBrush,
     CrossWidget,
@@ -103,0 +107,0 @@ LegendWidget,

package.json

 {
   "name": "juijs-chart",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "sideEffects": false,
@@ -78,7 +78,7 @@ "description": "SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D)",
     "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.23.1",
+    "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
   }
 }

src/brush/donut.js

 import jui from '../main.js';
-import DonutBrush from './pie';
+import PieBrush from './pie.js';
 
-jui.use(DonutBrush);
+jui.use(PieBrush);
 
@@ -6,0 +6,0 @@ export default {

src/widget/zoom.js

@@ -40,14 +40,16 @@ import jui from "../main.js";
 
-                    if(thumbWidth > 0) {
-                        thumb.attr({
-                            width: thumbWidth
-                        });
+                    if(thumb != null) {
+                        if (thumbWidth > 0) {
+                            thumb.attr({
+                                width: thumbWidth
+                            });
 
-                        thumb.translate(mouseStart, top + axis.area("y"));
-                    } else {
-                        thumb.attr({
-                            width: Math.abs(thumbWidth)
-                        });
+                            thumb.translate(mouseStart, top + axis.area("y"));
+                        } else {
+                            thumb.attr({
+                                width: Math.abs(thumbWidth)
+                            });
 
-                        thumb.translate(mouseStart + thumbWidth, top + axis.area("y"));
+                            thumb.translate(mouseStart + thumbWidth, top + axis.area("y"));
+                        }
                     }
@@ -89,4 +91,7 @@ }, axisIndex);
                         axis.zoom(start, end);
-                        bg.attr({ "visibility": "visible" });
 
+                        if(bg != null) {
+                            bg.attr({"visibility": "visible"});
+                        }
+
                         // 차트 렌더링이 활성화되지 않았을 경우
@@ -124,4 +129,7 @@ if(!self.chart.isRender()) {
                     });
-                    bg.attr({ "visibility": "visible" });
 
+                    if(bg != null) {
+                        bg.attr({"visibility": "visible"});
+                    }
+
                     // 차트 렌더링이 활성화되지 않았을 경우
@@ -141,14 +149,13 @@ if(!self.chart.isRender()) {
 
-                    thumb.attr({
-                        width: 0
-                    });
+                    if(thumb != null) {
+                        thumb.attr({
+                            width: 0
+                        });
+                    }
                 }
             }
 
-            this.drawSection = function(axisIndex) {
-                var axis = this.chart.axis(axisIndex),
-                    xtype = axis.get("x").type,
-                    domain = axis.get("x").domain,
-                    interval = axis.get("x").interval,
-                    format = axis.get("x").format,
+            this.drawSection = function(axisIndex, axisSeq) {
+                let integrate = this.widget.integrate,
+                    axis = this.chart.axis(axisIndex),
                     cw = axis.area("width"),
@@ -159,3 +166,3 @@ ch = axis.area("height"),
                 return this.chart.svg.group({}, function() {
-                    var thumb = self.chart.svg.rect({
+                    let thumb = self.chart.svg.rect({
                         height: ch,
@@ -166,3 +173,3 @@ fill: self.chart.theme("zoomBackgroundColor"),
 
-                    var bg = self.chart.svg.group({
+                    let bg = self.chart.svg.group({
                         visibility: "hidden"
@@ -194,19 +201,8 @@ }, function() {
 
-                            if(xtype == "block") {
-                                axis.screen(1);
-                            } else if(xtype == "date") {
-                                axis.updateGrid("x", {
-                                    domain: domain,
-                                    interval: interval,
-                                    format: format
-                                });
+                            // 줌을 멀티 축에서 겹쳐서 사용할 때
+                            if(integrate) {
+                                self.rollbackZoom(self.getAxisList());
+                            } else {
+                                self.rollbackZoom([ axisIndex ]);
                             }
-
-                            // 차트 렌더링이 활성화되지 않았을 경우
-                            if(!self.chart.isRender()) {
-                                self.chart.render();
-                            }
-
-                            // 줌 종료
-                            self.chart.emit("zoom.close");
                         });
@@ -216,6 +212,43 @@
 
-                    setDragEvent(axisIndex, thumb, bg);
+                    // 줌을 멀티 축에서 겹쳐서 사용할 때, 첫번째 axis에 대한 줌만 그린다.
+                    if(!integrate || axisSeq === 0) {
+                        setDragEvent(axisIndex, thumb, bg);
+                    } else {
+                        setDragEvent(axisIndex, null, null);
+                    }
                 });
             }
 
+            this.rollbackZoom = function(axisList) {
+                for(let i = 0; i < axisList.length; i++) {
+                    let axis = this.chart.axis(axisList[i]),
+                        xtype = axis.get("x").type,
+                        domain = axis.get("x").domain,
+                        interval = axis.get("x").interval,
+                        format = axis.get("x").format;
+
+                    if(xtype == "block") {
+                        axis.screen(1);
+                    } else if(xtype == "date") {
+                        axis.updateGrid("x", {
+                            domain: domain,
+                            interval: interval,
+                            format: format
+                        });
+                    }
+
+                    // 차트 렌더링이 활성화되지 않았을 경우
+                    if(!this.chart.isRender()) {
+                        this.chart.render();
+                    }
+
+                    // 줌 종료
+                    this.chart.emit("zoom.close");
+                }
+            }
+
+            this.getAxisList = function() {
+                return (_.typeCheck("array", this.widget.axis)) ? this.widget.axis : [ this.widget.axis ];
+            }
+
             this.drawBefore = function() {
@@ -227,7 +260,7 @@ top = this.chart.padding("top");
             this.draw = function() {
-                var g = this.chart.svg.group(),
-                    list = (_.typeCheck("array", this.widget.axis)) ? this.widget.axis : [ this.widget.axis ];
+                let g = this.chart.svg.group(),
+                    axisList = this.getAxisList();
 
-                for (var i = 0; i < list.length; i++) {
-                    g.append(this.drawSection(list[i]));
+                for(let i = 0; i < axisList.length; i++) {
+                    g.append(this.drawSection(axisList[i], i));
                 }
@@ -242,6 +275,7 @@
                 axis: 0,
-
-                /** @cfg {Number} [interval=1000] Sets the interval of the scale displayed on a grid.*/
+                /** @cfg {Boolean} [integrate=false] When zooming is used on multiple axes, only one drawing option */
+                integrate: false,
+                /** @cfg {Number} [interval=1000] Sets the interval of the scale displayed on a grid */
                 interval: null,
-                /** @cfg {Function} [format=null]  Determines whether to format the value on an axis. */
+                /** @cfg {Function} [format=null]  Determines whether to format the value on an axis */
                 format: null
@@ -248,0 +282,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2897613

increased by0.93%

Number of package files

112

increased by3.7%

Lines of code

33052

increased by1.25%

No dependency changes