juijs-chart - npm Package Compare versions

Comparing version 2.1.10-es6 to 2.2.0-es6

bundles/index.js

 import jui from '../src/main.js'
-import TopologyNodeBrush from '../src/brush/topologynode.js'
-import TopologyCtrlWidget from '../src/widget/topologyctrl.js'
-import ClassicIcon from '../src/icon/classic.js'
+import CanvasEqualizerColumnBrush from '../src/brush/canvas/equalizercolumn.js'
+import TitleWidget from '../src/widget/title.js'
+import LegendWidget from '../src/widget/legend.js'
+import RaycastWidget from '../src/widget/raycast.js'
 
-jui.use([ TopologyNodeBrush, TopologyCtrlWidget, ClassicIcon ]);
+jui.use([ CanvasEqualizerColumnBrush, TitleWidget, LegendWidget, RaycastWidget ]);
 
-function rnd(count) {
-    return Math.floor(Math.random() * count);
-}
-
-function getRandomData(count, outer, inner) { // 노드 개수, 바깥 연결 개수, 안쪽 연결 개수
-    var w = 800, h = 600;
-    var data = [];
-    for(var i = 0; i < count; i++) {
-        var x = rnd(w),
-            y = rnd(h);
-        data.push({ name: "W" + (i + 1), x: x, y: y, outgoing: [], incoming: [] });
-    }
-    for(var i = 0; i < outer; i++) {
-        var index = rnd(count),
-            outerIndex = rnd(count);
-        data[index].outgoing.push(outerIndex);
-    }
-    for(var i = 0; i < inner; i++) {
-        var index = rnd(count),
-            innerIndex = rnd(count);
-        data[index].incoming.push(innerIndex);
-    }
-    return data;
-}
-
-var data = [
-    { key: "1000_1", name: "W1", type: "was", outgoing: [ "1000_1" ] },
-    { key: "1000_2", name: "W2", type: "was", outgoing: [ "1000_3", "1000_4" ] },
-    { key: "1000_3", name: "W3", type: "was", outgoing: [ "1_2_3_4", "1000_2" ] },
-    { key: "1000_4", name: "W4", type: "server", outgoing: [ "1_2_3_4" ] },
-    { key: "1_2_3_4", name: "Oracle", type: "db", outgoing: [] }
-];
-
-var data2 = [
-    { key: "1000_1", name: "W1", type: 1, x: 100, y: 100, outgoing: [] },
-    { key: "1000_2", name: "W2", type: 1, x: 100, y: 200, outgoing: [ "1000_1" ] }
-];
-
-var edgeData = [
-    { key: "1000_1:1000_2", count: 3, time: 1000 },
-    { key: "1000_2:1000_3", count: 3, time: 1000 },
-    { key: "1000_2:1000_4", count: 3, time: 1000 },
-    { key: "1000_3:1_2_3_4", count: 3, time: 2000 },
-    { key: "1000_3:1000_2", count: 3, time: 2000 },
-    { key: "1000_4:1_2_3_4", count: 3, time: 2000 }
-];
-
-jui.ready([ "chart.builder", "util.base" ], function(builder, _) {
-    var c = builder("#chart", {
-        icon: {
-            type: "classic",
-            path: [
-                "../images/icon/icomoon.eot",
-                "../images/icon/icomoon.svg",
-                "../images/icon/icomoon.ttf",
-                "../images/icon/icomoon.woff"
-            ]
-        },
-        theme: "classic",
-        padding: 5,
+jui.ready([ "chart.realtime" ], function(realtime) {
+    var c = realtime("#chart", {
+        width: 500,
+        height: 300,
         axis: [{
-            c: {
-                type: "topologytable"
+            x : {
+                domain : [ "1 year ago", "1 month ago", "Yesterday", "Today" ],
+                line : true
             },
-            data: data
+            y : {
+                type : "range",
+                domain : [ 0, 30 ],
+                // domain : function(d) {
+                //     return Math.max(d.normal, d.warning, d.fatal);
+                // },
+                step : 5,
+                line : false
+            }
         }],
-        brush: {
-            type: "topologynode",
-            colors: [ "#729ff1" ],
-            edgeData: edgeData,
-            edgeText: function(data, align) {
-                var text = data.time + "/" + data.count;
-                if(align == "end") {
-                    text = text + " →";
-                } else {
-                    text = "← " + text;
+        brush : [{
+            type : "canvas.equalizercolumn",
+            target : [ "normal", "warning", "fatal" ],
+            unit : 10
+        }],
+        widget : [
+            {
+                type : "title",
+                text : "Equalizer Sample"
+            }, {
+                type : "legend",
+                format : function(key) {
+                    if(key == "normal") return "Default";
+                    else if(key == "warning") return "Warning";
+                    else return "Critical";
                 }
-                return text;
-            },
-            edgeOpacity: function(data) {
-                if(data.time > 1000) return 1;
-                return 0.3;
-            },
-            tooltipTitle: function(data, align) {
-                if(align == "start") {
-                    return data.reverse().join(" ← ");
-                }
-                return data.join(" → ");
-            },
-            tooltipText: function(data) {
-                return "총 응답시간/개수 : " + data.time + "/" + data.count;
-            },
-            /*/
-            nodeImage: function(data) {
-                return "resource/" + data.type + ".png";
-            },
-            /**/
-            nodeText: function(data) {
-                if(data.type == "server") {
-                    return "{server}";
-                } else if(data.type == "was") {
-                    return "{was}";
-                } else {
-                    return "{db}";
-                }
-            },
-            nodeTitle: function(data) {
-                return data.name;
-            },
-            nodeScale: function(data) {
-                var len = data.outgoing.length;
-                if(len > 1) {
-                    return 2;
-                }
-                return 1;
-            },
-            activeEdge: "1000_2:1000_3",
-            //activeNode: "1000_2",
-            activeEvent: "dblclick"
-        },
-        widget: {
-            type: "topologyctrl",
-            zoom: true,
-            move: true
-        },
-        event: {
-            "topology.edgeclick": function(data, e) {
-                console.log("edgeclick ---------------------");
-                console.log(data);
-            },
-            "topology.nodeclick": function(data, e) {
-                console.log("nodeclick ---------------------");
-                console.log(data);
-            },
-            "click": function(obj, e) {
-                console.log("click ----------------");
-                console.log(obj);
+            }, {
+                type : "raycast"
             }
+        ],
+        event : {
+            "raycast.click": function(obj, e) {
+                console.log(obj.data);
+            }
         },
-        style: {
-            axisBackgroundColor: "#fff",
-            axisBackgroundOpacity: 1,
-            topologyEdgeWidth : 1
+        interval : 100
+    });
+
+    c.run(function(runningTime) {
+        if(runningTime > 10000) {
+            c.update([
+                { normal : 7, warning : 7, fatal : 7 },
+                { normal : 10, warning : 8, fatal : 5 },
+                { normal : 6, warning : 4, fatal : 10 },
+                { normal : 5, warning : 5, fatal : 7 }
+            ]);
+        } else {
+            c.update([
+                { normal : 5, warning : 5, fatal : 5 },
+                { normal : 10, warning : 8, fatal : 5 },
+                { normal : 6, warning : 4, fatal : 10 },
+                { normal : 5, warning : 5, fatal : 7 }
+            ]);
         }
     });
-});
+
+    // c.update([
+    //         { normal : 5, warning : 5, fatal : 5 },
+    //         { normal : 10, warning : 8, fatal : 5 },
+    //         { normal : 6, warning : 4, fatal : 10 },
+    //         { normal : 5, warning : 5, fatal : 7 }
+    // ]);
+    // c.render();
+});

bundles/production.js

@@ -30,4 +30,9 @@ import jui from '../src/main.js'
 import SelectBoxBrush from '../src/brush/selectbox.js'
+import Equalizer from '../src/brush/equalizer.js'
+import EqualizerBar from '../src/brush/equalizerbar.js'
+import EqualizerColumn from '../src/brush/equalizercolumn.js'
 import Column3dBrush from '../src/brush/polygon/column3d.js'
 import Line3dBrush from '../src/brush/polygon/line3d.js'
+import CanvasDot3dBrush from '../src/brush/canvas/dot3d.js'
+import CanvasEqualizerColumnBrush from '../src/brush/canvas/equalizercolumn.js'
 import CrossWidget from '../src/widget/cross.js'
@@ -38,2 +43,4 @@ import LegendWidget from '../src/widget/legend.js'
 import TopologyCtrlWidget from '../src/widget/topologyctrl.js'
+import DragSelectWidget from '../src/widget/dragselect.js'
+import RayCastWidget from '../src/widget/raycast.js'
 import Rotate3dWidget from '../src/widget/polygon/rotate3d.js'
@@ -70,4 +77,9 @@
     SelectBoxBrush,
+    Equalizer,
+    EqualizerBar,
+    EqualizerColumn,
     Column3dBrush,
     Line3dBrush,
+    CanvasDot3dBrush,
+    CanvasEqualizerColumnBrush,
     CrossWidget,
@@ -78,2 +90,4 @@ LegendWidget,
     TopologyCtrlWidget,
+    DragSelectWidget,
+    RayCastWidget,
     Rotate3dWidget
@@ -80,0 +94,0 @@ ]);

package.json

 {
   "name": "juijs-chart",
-  "version": "2.1.10-es6",
+  "version": "2.2.0-es6",
   "sideEffects": false,
@@ -68,3 +68,3 @@ "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)",
   "dependencies": {
-    "juijs-graph": "0.2.0-es6"
+    "juijs-graph": "0.2.4-es6"
   },
@@ -71,0 +71,0 @@ "devDependencies": {

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

2095735

increased by2.39%

Number of package files

85

increased by10.39%

Lines of code

9883

increased by7.48%

Dependency changes

• + Addedjuijs-graph@0.2.4-es6(transitive)

• - Removedjuijs-graph@0.2.0-es6(transitive)

• Updatedjuijs-graph@0.2.4-es6