juijs-chart - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import CandleStickBrush from '../src/brush/candlestick.js'
-import ZoomWidget from '../src/widget/zoom.js'
-import ZoomScrollWidget from '../src/widget/zoomscroll.js'
+import HeatmapScatterBrush from '../src/brush/heatmapscatter.js'
+import TitleWidget from '../src/widget/title.js'
+import DragselectWidget from '../src/widget/dragselect.js'
+import TooltipWidget from '../src/widget/tooltip.js'
 
-jui.use([ ClassicTheme, CandleStickBrush, ZoomWidget, ZoomScrollWidget ]);
+jui.use([ ClassicTheme, HeatmapScatterBrush, TitleWidget, DragselectWidget, TooltipWidget ]);
 
 var chart = jui.include("chart.builder"),
-    time = jui.include("util.time");
+    time = jui.include("util.time"),
+    txData = [];
 
-var data = [
-    { date: new Date(1994,2,1), l: 24.00, h: 25.00, o: 25.00, c: 24.876 },
-    { date: new Date(1994,2,2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
-    { date: new Date(1994,2,3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
-    { date: new Date(1994,2,4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
-    { date: new Date(1994,2,7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
-    { date: new Date(1994,2,8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
-    { date: new Date(1994,2,9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
-    { date: new Date(1994,2,10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
-    { date: new Date(1994,2,11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
-    { date: new Date(1994,2,14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
-    { date: new Date(1994,2,15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
-    { date: new Date(1994,2,16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
-    { date: new Date(1994,2,17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
-    { date: new Date(1994,2,18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
-    { date: new Date(1994,2,21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
-    { date: new Date(1994,2,22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
-    { date: new Date(1994,2,23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
-    { date: new Date(1994,2,24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
-    { date: new Date(1994,2,25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
-    { date: new Date(1994,2,28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
-    { date: new Date(1994,2,29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
-    { date: new Date(1994,2,30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
-    { date: new Date(1994,2,31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
-];
-
 var c = chart("#chart", {
     height : 400,
-    padding : {
-        bottom : 100
-    },
     axis : {
         x : {
-            type : "block",  // default type is block
-            domain : "date",
-            format: function(d) {
-                return time.format(d, "MM-dd");
-            },
-            line: true
+            type : "date",
+            domain : getDomain(),
+            interval : 1,
+            realtime : "minutes",
+            format : "HH:mm",
+            key : "time",
+            line : true
         },
         y : {
             type : "range",
-            domain: [ 20, 30 ],
-            step: 5,
-            line : true
+            domain : [ 0, 10000 ],
+            step : 5,
+            line : true,
+            orient : "left"
         },
-        keymap : {
-            low : "l",
-            high : "h",
-            open : "o",
-            close : "c"
+        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";
+            }
+
+            return "#4692ca";
         }
     },
-    brush : [{
-        type : "candlestick"
-    }],
+    event : {
+        "dragselect.end": function(data) {
+            console.log(data.length);
+        }
+    },
     widget : [{
-        type : "zoom"
+        type : "title",
+        text : "Heat-Map Transaction View (0)"
+    }, {
+        type : "dragselect",
+        dataType : "list"
+    }, {
+        type: "tooltip"
     }],
-    render : false
+    style : {
+        tooltipBorderColor: "#000"
+    }
 });
 
-c.axis(0).update(data);
-c.render(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

@@ -27,2 +27,3 @@ import jui from '../src/main.js'
 import HeatMapBrush from '../src/brush/heatmap.js'
+import HeatMapScatterBrush from '../src/brush/heatmapscatter.js'
 import TimeLineBrush from '../src/brush/timeline.js'
@@ -83,2 +84,3 @@ import TopologyNodeBrush from '../src/brush/topologynode.js'
     HeatMapBrush,
+    HeatMapScatterBrush,
     TimeLineBrush,
@@ -85,0 +87,0 @@ TopologyNodeBrush,

package.json

 {
   "name": "juijs-chart",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "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)",

src/widget/tooltip.js

@@ -169,2 +169,3 @@ import jui from '../main.js';
                         line = tooltip.get(0),
+                        target = tooltip.get(1),
                         rect = tooltip.get(1).get(0),
@@ -184,2 +185,3 @@ text = tooltip.get(1).get(1).translate(0, (orient != "bottom") ? lineHeight : lineHeight + ANCHOR),
                     tooltip.attr({ visibility: "visible" });
+                    target.translate(xy.x, xy.y);
 
@@ -186,0 +188,0 @@ isActive = true;

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

2870845

increased by0.59%

Number of package files

108

increased by1.89%

Lines of code

32645

increased by0.92%

No dependency changes