juijs-chart - npm Package Compare versions

Comparing version 2.5.17 to 2.5.18

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
 import DarkTheme from '../src/theme/dark.js'
-import FullStackBarBrush from '../src/brush/fullstackbar.js'
+import CanvasEqualizerColumn 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([ ClassicTheme, DarkTheme, FullStackBarBrush, LegendWidget ]);
+jui.use([ ClassicTheme, DarkTheme, CanvasEqualizerColumn, TitleWidget, LegendWidget, RaycastWidget ]);
 
-const builder = jui.include("chart.builder");
+var animation = jui.include("chart.animation");
 
-window.chart = builder("#chart", {
-    width: 400,
-    height : 400,
-    theme : "classic",
-    axis : {
-        data : [
-            { name : 2, value : 15, test : 0 },
-            { name : 15, value : 6, test : 0 },
-            { name : 8, value : 0, test : 0 },
-            { name : 0, value : 0, test : 0 }
-        ],
-        y : {
-            domain : [ "week1", "week2", "week3", "week4" ],
+var c = animation("#chart", {
+    width: 500,
+    height: 300,
+    axis: [{
+        x : {
+            domain : [ "1 year ago", "1 month ago", "Yesterday", "Today" ],
             line : true
         },
-        x : {
-            type : 'range',
-            domain : [0, 100],
-            format : function(value) { return value + "%" ;},
-            line : true
+        y : {
+            type : "range",
+            domain : [ 0, 30 ],
+            // domain : function(d) {
+            //     return Math.max(d.normal, d.warning, d.fatal);
+            // },
+            step : 5,
+            line : false
         }
+    }],
+    brush : [{
+        type : "canvas.equalizercolumn",
+        target : [ "normal", "warning", "fatal" ],
+        active : [ 0, 2 ],
+        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";
+            }
+        }, {
+            type : "raycast"
+        }
+    ],
+    event : {
+        "raycast.click": function(obj, e) {
+            // TODO: Clicking on the equalizer will give the following effect
+            this.updateBrush(0, { active: obj.dataIndex });
+        }
     },
-    brush : {
-        type : 'fullstackbar',
-        target : ['name', 'value', 'test'],
-        showText: true,
-        activeEvent : "click",
-        active : 1,
-        size : 20
-    },
-    widget : {
-        type : 'legend'
-    },
-    event: {
-        click: function(obj, e) {
-            console.log(obj);
-        }
+    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 }
+        ]);
     }
 });

package.json

 {
   "name": "juijs-chart",
-  "version": "2.5.17",
+  "version": "2.5.18",
   "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/brush/canvas/equalizercolumn.js

@@ -28,4 +28,9 @@ import jui from '../../main.js';
                     active = this.brush.active,
-                    opacity = (active === null || dataIndex === active) ? 1 : style.disableOpacity;
+                    opacity = 1;
 
+                if ((_.typeCheck("array", active) && !active.includes(dataIndex)) ||
+                    (_.typeCheck("integer", active) && active !== dataIndex)) {
+                    opacity = style.disableOpacity;
+                }
+
                 return {
@@ -196,3 +201,3 @@ fill : color,
                 unit: 1,
-                /** @cfg {Number} [active=null] Activates the bar of an applicable index. */
+                /** @cfg {Number | Array} [active=null] Activates the bar of an applicable index. */
                 active: null
@@ -199,0 +204,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

2969373

increased by0.05%

Lines of code

34079

increased by0.1%

No dependency changes