juijs-chart - npm Package Compare versions

Comparing version 2.5.7 to 2.5.8

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import ScatterBrush from '../src/brush/scatter.js'
-import LineBrush from '../src/brush/line.js'
+import FullStackBar from '../src/brush/fullstackbar.js'
 import TitleWidget from '../src/widget/title.js'
-import LegendWidget from '../src/widget/legend.js'
-import ZoomWidget from '../src/widget/zoom.js'
 import TooltipWidget from '../src/widget/tooltip.js'
 
-jui.use([ ClassicTheme, ScatterBrush, LineBrush, TitleWidget, LegendWidget, ZoomWidget ]);
+jui.use([ ClassicTheme, FullStackBar, TitleWidget, TooltipWidget ]);
 
-var chart = jui.include("chart.builder");
+var chart = jui.include("chart.builder");;
 
-var data1 = [
-    { date : new Date("2015/01/01 00:00:00"), sales : 50, profit : 35 },
-    { date : new Date("2015/01/01 06:00:00"), sales : 20, profit : 30 },
-    { date : new Date("2015/01/01 12:00:00"), sales : 10, profit : 5 },
-    { date : new Date("2015/01/01 18:00:00"), sales : 30, profit : 25 },
-    { date : new Date("2015/01/02 00:00:00"), sales : 25, profit : 20 }
-];
-
-var data2 = [
-    { date : new Date("2015/01/01 00:00:00"), sales : 50, profit : 35 },
-    { date : new Date("2015/01/01 06:00:00"), sales : 20, profit : 30 },
-    { date : new Date("2015/01/01 12:00:00"), sales : 10, profit : 5 },
-    { date : new Date("2015/01/01 18:00:00"), sales : 30, profit : 25 },
-    { date : new Date("2015/01/02 00:00:00"), sales : 25, profit : 20 }
-];
-
 chart("#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: data1
+    width: 400,
+    height : 400,
+    theme : "classic",
+    axis : {
+        data : [
+            { name : 100, value : 0, test : 0 },
+            { name : 15, value : 6, test : 20 },
+            { name : 8, value : 10, test : 20 },
+            { name : 18, value : 5, test : 20 }
+        ],
+        y : {
+            domain : [ "week1", "week2", "week3", "week4" ],
+            line : true
         },
-        {
-            y : {
-                type : "range",
-                domain: [ 5, 50 ],
-                color: "#90ed7d",
-                orient: "left",
-                format: function (value) {
-                    return value + " ℃";
-                }
-            },
-            extend : 0
+        x : {
+            type : 'range',
+            domain : [0, 100],
+            format : function(value) { return value + "%" ;},
+            line : true
         }
-    ],
-    brush : [
-        { type : "line", target : "sales", axis : 0, colors : [ "#434348" ] , symbol : "curve", clip: true },
-        { type : "scatter", target : "sales", axis : 0, colors : [ "#434348" ], clip: true },
-        { type : "line", target : "profit", axis : 1, colors: [ "#90ed7d" ], symbol : "curve", clip: true }
-    ],
-    widget : [
-        { type : "title", text : "Combination Sample" },
-        { type : "legend", brush : [ 0 ], align : "start", filter : true },
-        { type : "legend", brush : [ 1 ], align : "end", filter : true },
-        { type : "zoom", axis : [ 0, 1 ], integrate : true }
-    ]
-});
+    },
+    brush : {
+        type : 'fullstackbar',
+        target : ['name', 'value', 'test'],
+        showText: true,
+        activeEvent : "click",
+        active : 1,
+        size : 20
+    },
+    event: {
+        click: function(obj, e) {
+            console.log(obj);
+        }
+    }
+});

package.json

 {
   "name": "juijs-chart",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "sideEffects": false,
@@ -78,7 +78,7 @@ "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)",
     "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.29.0",
+    "webpack": "^4.29.5",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
   }
 }

README.md

@@ -20,3 +20,3 @@ ## Installation
 ```js
-import jui from 'juijs-chart'
+import graph from 'juijs-chart'
 import BarBrush from 'juijs-chart/src/brush/bar.js'
@@ -26,3 +26,3 @@ import ColumnBrush from 'juijs-chart/src/brush/column.js'
 
-jui.use(BarBrush, ColumnBrush, TitleWidget);
+graph.use(BarBrush, ColumnBrush, TitleWidget);
 ```
@@ -39,3 +39,3 @@
 ```js
-jui.ready([ "chart.builder" ], function(builder) {
+graph.ready([ "chart.builder" ], function(builder) {
     var obj = builder("#chart", {
@@ -42,0 +42,0 @@ width: 600,

src/brush/canvas/equalizercolumn.js

@@ -26,6 +26,8 @@ import jui from '../../main.js';
                     color = this.color(targetIndex),
-                    value = this.getData(dataIndex)[this.brush.target[targetIndex]];
+                    value = this.getData(dataIndex)[this.brush.target[targetIndex]],
+                    opacity = (dataIndex === this.brush.active) ? 1 : style.disableOpacity;
 
                 return {
                     fill : color,
+                    "fill-opacity": opacity,
                     stroke : style.borderColor,
@@ -87,2 +89,4 @@ "stroke-width" : style.borderWidth,
 
+                            this.canvas.save();
+                            this.canvas.globalAlpha = r["fill-opacity"];
                             this.canvas.beginPath();
@@ -95,2 +99,3 @@ this.canvas.fillStyle = r.fill;
                             this.canvas.fill();
+                            this.canvas.restore();
 
@@ -156,2 +161,4 @@ stackList.push(r);
 
+                        this.canvas.save();
+                        this.canvas.globalAlpha = r["fill-opacity"];
                         this.canvas.strokeStyle = r.fill;
@@ -171,2 +178,3 @@ this.canvas.lineWidth = r.height * 0.7;
                         this.canvas.fill();
+                        this.canvas.restore();
 
@@ -190,3 +198,5 @@ this.chart.setCache(`equalizer_move_${i}`, status);
                 /** @cfg {Number} [unit=5] Determines the reference value that represents the color.*/
-                unit: 1
+                unit: 1,
+                /** @cfg {Number} [active=null] Activates the bar of an applicable index. */
+                active: null
             };
@@ -193,0 +203,0 @@ }

src/brush/fullstackbar.js

@@ -23,8 +23,10 @@ import jui from '../main.js';
             this.drawText = function(percent, x, y) {
+                if(isNaN(percent) || isNaN(x) || isNaN(y)) return null;
+
                 var text = this.chart.text({
-                    "font-size" : this.chart.theme("barFontSize"),
-                    fill : this.chart.theme("barFontColor"),
-                    x : x,
-                    y : y,
-                    "text-anchor" : "middle"
+                    "font-size": this.chart.theme("barFontSize"),
+                    fill: this.chart.theme("barFontColor"),
+                    x: x,
+                    y: y,
+                    "text-anchor": "middle"
                 }, percent + "%");
@@ -70,5 +72,7 @@
                                 x = startX + width / 2,
-                                y = startY + bar_height / 2 + 5;
+                                y = startY + bar_height / 2 + 5,
+                                text = this.drawText(p, x, y);
 
-                            group.append(this.drawText(p, x, y));
+                            if(text != null)
+                                group.append(text);
                         }
@@ -75,0 +79,0 @@

src/brush/fullstackcolumn.js

@@ -75,11 +75,8 @@ import jui from '../main.js';
                                 x = startX + bar_width / 2,
-                                y = startY + height / 2 + 8;
+                                y = startY + height / 2 + 8,
+                                text = this.drawText(p, x, y);
 
+                            if(text != null)
+                                group.append(text);
 
-                            if (isNaN(x) || isNaN(y)) {
-                                // 정상적인 숫자가 아니면 객체를 추가하지 않는다.
-                            } else {
-                                group.append(this.drawText(p, x, y));
-                            }
-
                         }
@@ -86,0 +83,0 @@

src/widget/raycast.js

@@ -18,3 +18,4 @@ import jui from "../main.js";
                             brush: brush,
-                            data: datas[blockValue]
+                            data: datas[blockValue],
+                            dataIndex: blockValue
                         }, e]);
@@ -21,0 +22,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

Number of package files

114

increased by0.88%

Worsened metrics

Total package byte prevSize

2900471

decreased by-0.07%

Lines of code

33074

decreased by-0.03%

No dependency changes