juijs-chart - npm Package Compare versions

Comparing version 2.6.11 to 2.6.12

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
 import DarkTheme from '../src/theme/dark.js'
-import RateBarBrush from '../src/brush/ratebar.js'
+import FlameBrush from '../src/brush/flame.js'
+import TooltipWidget from '../src/widget/tooltip.js'
+import { flameData } from '../examples/resources/flamedata.js';
 
-jui.use([ ClassicTheme, DarkTheme, RateBarBrush ]);
+jui.use([ClassicTheme, DarkTheme, FlameBrush, TooltipWidget]);
 
+const color = jui.include('util.color');
 const builder = jui.include('chart.builder');
 
-builder('#chart', {
-    theme : 'classic',
-    padding : 0,
-    axis : [{
-        y : {
-            type : 'block',
-            domain : [ '1' ],
-            line: false
+const c = builder("#chart", {
+    width: "100%",
+    height: flameData.maxDepth * 25,
+    padding: {
+        right: 200
+    },
+    axis: [{
+        c: {
+            type: "panel"
         },
-        x : {
-            type : 'range',
-            domain : [0, 100],
-            line: false
-        },
-        data : [{
-            server: 120,
-            client: 50,
-            test: 123
-        }]
+        /*/
+        data : [
+            { index : "0", value: 3, text: -13375110 },
+            { index : "0.0", value: 1, text: -71395896 },
+            { index : "0.0.0", value: 1, text: -101176431 },
+            { index : "0.1", value: 2, text: -92471297 },
+            { index : "0.1.0", value: 1, text: -71395896 },
+            { index : "0.1.0.0", value: 1, text: -71395896 }
+        ]
+        /**/
     }],
-    brush : [{
-        type : 'ratebar',
-        target : [ 'server', 'client', 'test' ],
-        // activeIndex : 1,
-        // activeTarget : "server",
-        activeEvent: "click",
-        showText: function(value, percent, key) {
-            console.log(arguments)
-            return key;
+    brush: [{
+        type: "flame",
+        target: ["text"],
+        nodeOrient: "bottom",
+        nodeAlign: "end",
+        nodeColor: function (node) {
+            var hash = color.colorHash(node.text);
+            return "rgb(" + hash.r + "," + hash.g + "," + hash.b + ")";
         },
-        showTooltip: function(value, percent, key) {
-            return `${value}ms`;
+        textAlign: "start",
+        format: function (node) {
+            var charWidth = 6,
+                textWidth = node.text.length * charWidth;
+
+            if (node.width < 100) {
+                return "";
+            } else {
+                if (textWidth > node.width) {
+                    var len = Math.floor(node.width / charWidth) - 1;
+                    return node.text.substr(0, len) + "...";
+                }
+            }
+
+            return node.text;
         }
     }],
-    style: {
-        gridXAxisBorderWidth: 1,
-        gridYAxisBorderWidth: 1,
-        gridTickBorderSize: 0,
-        barFontSize: 13,
-        barBorderRadius: 5
-    }
-});
+    widget: [{
+        type: "tooltip",
+        orient: "bottom",
+        format: function (data) {
+            return data.text + " (" + ((data.value / data.parent.value) * 100).toFixed(2) + "%, " + data.value + " samples)";
+        }
+    }],
+    event: {
+        click: function (d, e) {
+            this.updateBrush(0, { activeIndex: d.data.index });
+            this.render();
+        }
+    },
+    render: false
+});
+
+c.axis(0).update(flameData.list);
+c.render();

bundles/production.js

@@ -50,3 +50,4 @@ import jui from '../src/main.js'
 import PyramidBrush from '../src/brush/pyramid.js'
-import RateBar from '../src/brush/ratebar.js'
+import RateBarBrush from '../src/brush/ratebar.js'
+import FlameBrush from '../src/brush/flame.js';
 import CrossWidget from '../src/widget/cross.js'
@@ -117,3 +118,4 @@ import LegendWidget from '../src/widget/legend.js'
     PyramidBrush,
-    RateBar,
+    RateBarBrush,
+    FlameBrush,
     CrossWidget,
@@ -136,4 +138,4 @@ LegendWidget,
 
-if(typeof(window) == "object") {
+if (typeof (window) == "object") {
     window.graph = jui;
 }

package.json

 {
   "name": "juijs-chart",
-  "version": "2.6.11",
+  "version": "2.6.12",
   "sideEffects": false,
@@ -83,2 +83,2 @@ "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)",
   }
-}
+}

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

4349099

increased by1.22%

Number of package files

129

increased by0.78%

Lines of code

96809

increased by0.79%

No dependency changes