juijs-chart - npm Package Compare versions

Comparing version 2.5.18 to 2.5.19

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
 import DarkTheme from '../src/theme/dark.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'
+import LineBrush from '../src/brush/line.js'
+import ZoomSelectWidget from '../src/widget/zoomselect.js'
+import CrossWidget from '../src/widget/cross.js'
 
-jui.use([ ClassicTheme, DarkTheme, CanvasEqualizerColumn, TitleWidget, LegendWidget, RaycastWidget ]);
+jui.use([ ClassicTheme, DarkTheme, LineBrush, ZoomSelectWidget, CrossWidget ]);
 
-var animation = jui.include("chart.animation");
+var data = [
+    { date : new Date("2015/01/01 00:00:00"), sales : 50, profit : 35, etc : 10 },
+    { date : new Date("2015/01/01 06:00:00"), sales : 20, profit : 30, etc : 10 },
+    { date : new Date("2015/01/01 12:00:00"), sales : 10, profit : 5, etc : 10 },
+    { date : new Date("2015/01/01 18:00:00"), sales : 30, profit : 25, etc : 10 },
+    { date : new Date("2015/01/02 00:00:00"), sales : 25, profit : 20, etc : 10 }
+];
 
-var c = animation("#chart", {
-    width: 500,
-    height: 300,
-    axis: [{
-        x : {
-            domain : [ "1 year ago", "1 month ago", "Yesterday", "Today" ],
-            line : true
-        },
-        y : {
-            type : "range",
-            domain : [ 0, 30 ],
-            // domain : function(d) {
-            //     return Math.max(d.normal, d.warning, d.fatal);
-            // },
-            step : 5,
-            line : false
+var time = jui.include("util.time");
+var builder = jui.include("chart.builder");
+
+var c = builder("#chart", {
+    height : 300,
+    padding : {
+        right : 120
+    },
+    axis : [
+        {
+            x : {
+                type : "date",
+                domain : [ new Date("2015/01/01"), new Date("2015/01/02") ],
+                interval : 1000 * 60 * 60 * 6, // // 6hours
+                format : "MM/dd HH:mm",
+                key : "date",
+                line : true
+            },
+            y : {
+                type : "range",
+                domain : [ 0, 100 ],
+                step : 5,
+                line : true,
+                orient : "right"
+            },
+            data: data
         }
-    }],
-    brush : [{
-        type : "canvas.equalizercolumn",
-        target : [ "normal", "warning", "fatal" ],
-        active : [ 0, 2 ],
-        unit : 10
-    }],
-    widget : [
+    ],
+    brush : [
         {
-            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"
+            type : "line",
+            target : [ "sales", "profit", "etc" ],
+            active: [ "sales", "etc" ],
+            symbol : "curve"
         }
     ],
+    widget : [
+        { type : "zoomselect" },
+        { type : "cross", xFormat: function(d) { return time.format(d, "HH:mm:ss"); }}
+    ],
     event : {
-        "raycast.click": function(obj, e) {
-            // TODO: Clicking on the equalizer will give the following effect
-            this.updateBrush(0, { active: obj.dataIndex });
+        "zoomselect.end": function(stime, etime) {
+            console.log(new Date(stime), new Date(etime));
         }
-    },
-    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.18",
+  "version": "2.5.19",
   "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/line.js

@@ -28,2 +28,23 @@ import jui from '../main.js';
 
+            this.setActiveEffects = function() {
+                var lines = this.lineList,
+                    active = this.brush.active;
+
+                for(var i = 0; i < lines.length; i++) {
+                    var target = this.brush.target[i],
+                        opacity = disableOpacity,
+                        color = lines[i].element.get(0).attr("stroke");
+
+                    if(active === null || active === target || (_.typeCheck("array", active) && active.includes(target))) {
+                        opacity = lineBorderOpacity;
+                    }
+
+                    if(lines[i].tooltip != null) {
+                        lines[i].tooltip.style(color, circleColor, opacity);
+                    }
+
+                    lines[i].element.attr({ opacity: opacity });
+                }
+            }
+
             this.addLineElement = function(elem) {
@@ -174,7 +195,3 @@ if(!this.lineList) {
                 // 액티브 라인 설정
-                for(var k = 0; k < path.length; k++) {
-                    if(this.brush.active == this.brush.target[k]) {
-                        this.setActiveEffect(this.lineList[k].element);
-                    }
-                }
+                this.setActiveEffects();
 
@@ -181,0 +198,0 @@ return g;

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

2970674

increased by0.04%

Lines of code

34089

increased by0.03%

No dependency changes