juijs-chart - npm Package Compare versions

Comparing version 2.5.10 to 2.5.11

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import DarkTheme from '../src/theme/dark.js'
-import LineBrush from '../src/brush/line.js'
-import ScatterBrush from '../src/brush/scatter.js'
-import TitleWidget from '../src/widget/title.js'
-import GuideLineWidget from '../src/widget/guideline.js'
+import FullStackColumn from '../src/brush/fullstackcolumn.js'
 
-jui.use([ ClassicTheme, DarkTheme, LineBrush, ScatterBrush, TitleWidget, GuideLineWidget ]);
+jui.use([ ClassicTheme, FullStackColumn ]);
 
-const time = jui.include('util.time');
-const builder = jui.include('chart.builder');
-const countMap = [ 300, 150, 60 ];
-const dataMap = countMap.map(count => createRealtimeData(count));
+var builder = jui.include("chart.builder");
 
-const names = {
-    memory: 'Memory (MB)',
-    cpu: 'CPU Usage (%)',
-    disk: 'Disk Size (MB)'
-}
+var data = [
+    { quarter : "1Q", samsung : 0, lg : 35, sony: 10 },
+    { quarter : "2Q", samsung : 20, lg : 30, sony: 5 },
+    { quarter : "3Q", samsung : 20, lg : 0, sony: 10 },
+    { quarter : "4Q", samsung : 0, lg : 0, sony: 0 }
+];
 
-window.chart = builder('#chart', {
-    width: 1000,
-    height : 300,
-    theme : 'classic',
-    axis : [{
+builder("#chart", {
+    width : 500,
+    height : 500,
+    axis : {
         x : {
-            type : 'dateblock',
-            realtime : 'minutes',
-            interval : 1, // But number for the real-time basis
-            format : 'HH:mm',
-            domain : [ new Date() - time.MINUTE * 5, new Date() ]
+            type : "block",
+            domain : "quarter",
+            line : true
         },
         y : {
-            type : 'range',
+            type : "range",
             domain : [ 0, 100 ],
-            step : 4,
-            line : 'solid',
-            format : function(d) {
-                return d + '%';
-            }
+            format : function(value) {
+                return value + "%";
+            },
+            line : true,
+            orient : "right"
         },
-        data : dataMap[0]
-    }],
-    brush : [{
-        type : 'line',
-        target : [ 'memory', 'cpu', 'disk' ]
-    }],
-    widget : [{
-        type : 'guideline',
-        xFormat : function(d) {
-            return time.format(d, 'HH:mm');
-        },
-        tooltipFormat : function(data, key) {
-            return {
-                key: names[key],
-                value: data[key]
-            }
-        }
-    }],
-    event: {
-        'guideline.active': function(time) {
-            if(time) {
-                window.chart2.emit('guideline.show', time);
-                window.chart3.emit('guideline.show', time);
-            } else {
-                window.chart2.emit('guideline.hide');
-                window.chart3.emit('guideline.hide');
-            }
-        }
+        data : data
     },
-    style: {
-        guidelineTooltipFontColor : "#dcdcdc",
-        guidelineTooltipFontSize : 14,
-        guidelineTooltipBackgroundColor : "#000",
-        guidelineTooltipBackgroundOpacity : 0.3
-    }
-});
-
-window.chart2 = builder('#chart2', {
-    width: 500,
-    height : 200,
-    theme : 'classic',
-    axis : [{
-        x : {
-            type : 'dateblock',
-            realtime : 'minutes',
-            interval : 1, // But number for the real-time basis
-            format : 'HH:mm',
-            domain : [ new Date() - time.MINUTE * 5, new Date() ]
-        },
-        y : {
-            type : 'range',
-            domain : [ 0, 100 ],
-            step : 4,
-            line : 'solid',
-            format : function(d) {
-                return d + '%';
-            }
-        },
-        data : dataMap[1]
-    }],
-    brush : [{
-        type : 'line',
-        target : [ 'memory', 'cpu', 'disk' ]
-    }],
-    widget : [{
-        type : 'guideline',
-        xFormat : function(d) {
-            return time.format(d, 'HH:mm');
-        },
-        tooltipFormat : function(data, key) {
-            return {
-                key: names[key],
-                value: data[key]
-            }
+    brush : {
+        type : "fullstackcolumn",
+        target : [ "samsung", "lg", "sony" ],
+        showText : function(percent) {
+            return percent + "%%";
         }
-    }],
-    event: {
-        'guideline.active': function(time) {
-            if(time) {
-                window.chart.emit('guideline.show', time);
-                window.chart3.emit('guideline.show', time);
-            } else {
-                window.chart.emit('guideline.hide');
-                window.chart3.emit('guideline.hide');
-            }
-        }
     }
 });
-
-window.chart3 = builder('#chart3', {
-    width: 700,
-    height : 250,
-    theme : 'dark',
-    axis : [{
-        x : {
-            type : 'dateblock',
-            realtime : 'minutes',
-            interval : 1, // But number for the real-time basis
-            format : 'HH:mm',
-            domain : [ new Date() - time.MINUTE * 5, new Date() ]
-        },
-        y : {
-            type : 'range',
-            domain : [ 0, 100 ],
-            step : 4,
-            line : 'solid',
-            format : function(d) {
-                return d + '%';
-            }
-        },
-        data : dataMap[2]
-    }],
-    brush : [{
-        type : 'line',
-        target : [ 'memory', 'cpu', 'disk' ]
-    }],
-    widget : [{
-        type : 'guideline',
-        xFormat : function(d) {
-            return time.format(d, 'HH:mm');
-        },
-        tooltipFormat : function(data, key) {
-            return {
-                key: names[key],
-                value: data[key]
-            }
-        }
-    }],
-    event: {
-        'guideline.active': function(time) {
-            if(time) {
-                window.chart2.emit('guideline.show', time);
-                window.chart3.emit('guideline.show', time);
-            } else {
-                window.chart2.emit('guideline.hide');
-                window.chart3.emit('guideline.hide');
-            }
-        }
-    }
-});
-
-function createRealtimeData(count) {
-    const data = [];
-
-    for(let i = 0; i < count; i++) {
-        data.push({
-            memory: (Math.floor(Math.random() * 30) == 1) ? 85 : 35,
-            cpu: (Math.floor(Math.random() * 30) == 1) ? 55 : 25,
-            disk: (Math.floor(Math.random() * 30) == 1) ? 30 : 10,
-        });
-    }
-
-    return data;
-}
-
-function updateRealtimeData() {
-    const axisMap = [ chart.axis(0), chart2.axis(0), chart3.axis(0) ];
-    const domain = [ new Date() - time.MINUTE * 5, new Date() ];
-
-    axisMap.forEach((axis, index) => {
-        if (dataMap[index].length == countMap[index]) {
-            dataMap[index].shift();
-            dataMap[index].push(createRealtimeData(1)[0]);
-
-            axis.set('x', { domain: domain });
-            axis.update(dataMap[index]);
-        }
-    });
-}
-
-setInterval(function() {
-    updateRealtimeData();
-
-    chart.render();
-    chart2.render();
-    chart3.render();
-}, 2000);

package.json

 {
   "name": "juijs-chart",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "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/fullstackbar.js

@@ -23,5 +23,8 @@ import jui from '../main.js';
             this.drawText = function(percent, x, y) {
-                if(isNaN(percent) || isNaN(x) || isNaN(y)) return null;
+                if(percent === 0 || isNaN(percent)) return null;
 
-                var text = this.chart.text({
+                let result = _.typeCheck("function", this.brush.showText) ?
+                    this.brush.showText.call(this, percent) : percent + "%";
+
+                let text = this.chart.text({
                     "font-size": this.chart.theme("barFontSize"),
@@ -32,3 +35,3 @@ fill: this.chart.theme("barFontColor"),
                     "text-anchor": "middle"
-                }, percent + "%");
+                }, result);
 
@@ -70,3 +73,3 @@ return text;
                         // 퍼센트 노출 옵션 설정
-                        if(brush.showText) {
+                        if(brush.showText !== false) {
                             var p = Math.round((list[j] / sum) * max),
@@ -73,0 +76,0 @@ x = startX + width / 2,

src/widget/guideline.js

@@ -12,3 +12,4 @@ import jui from '../main.js';
             const tw = 50, th = 18, ta = tw / 10; // x축 툴팁 넓이, 높이, 앵커 크기
-            const cp = 5; // 본문 툴팁 패딩
+            const cp = 5, lrp = 5; // 본문 툴팁 패딩, 본물 툴팁 좌우 패딩
+            let brush;
             let pl = 0, pt = 0; // 엑시스까지의 여백
@@ -38,3 +39,3 @@ let g, line, xTooltip, contentTooltip, points = {};
             this.drawBefore = function() {
-                const brush = this.chart.get('brush', widget.brush);
+                brush = this.chart.get('brush', widget.brush);
 
@@ -83,10 +84,12 @@ // 위젯 옵션에 따라 엑시스 변경
                     // 포인트 그리기
-                    brush.target.forEach((target, index) => {
-                        points[target] = chart.svg.circle({
-                            fill: chart.color(index),
-                            stroke: chart.theme("guidelinePointBorderColor"),
-                            "stroke-width": chart.theme("guidelinePointBorderWidth"),
-                            r: chart.theme("guidelinePointRadius")
+                    if(!widget.hidePoint) {
+                        brush.target.forEach((target, index) => {
+                            points[target] = chart.svg.circle({
+                                fill: chart.color(index),
+                                stroke: chart.theme("guidelinePointBorderColor"),
+                                "stroke-width": chart.theme("guidelinePointBorderWidth"),
+                                r: chart.theme("guidelinePointRadius")
+                            });
                         });
-                    });
+                    }
 
@@ -148,7 +151,7 @@ // 본문 툴팁 그리기
                 const texts = contentTooltip.children[1];
-                const keys = Object.keys(data);
                 let width = 0;
-                let height = (chart.theme("guidelineTooltipFontSize") * 1.2) * (keys.length + 1);
+                let height = (chart.theme("guidelineTooltipFontSize") * 1.2) * (brush.target.length + 1);
+                let current = 0;
 
-                keys.forEach((key, index) => {
+                brush.target.forEach((key, index) => {
                     if(_.typeCheck("function", widget.tooltipFormat)) {
@@ -164,3 +167,6 @@ let ret = widget.tooltipFormat.apply(this, [ data, key ]);
 
-                    points[key].translate(left, axis.y(data[key]));
+                    if(!widget.hidePoint) {
+                        current = (widget.stackPoint) ? current + data[key] : data[key];
+                        points[key].translate(left, axis.y(current));
+                    }
                 });
@@ -178,3 +184,3 @@
                 contentTooltip.translate(
-                    left + width > axis.area("width") ? left - width - cp - 3 : left + 3,
+                    left + width > axis.area("width") ? left - width - cp - lrp : left + lrp,
                     axis.area("height")/2 - height/2
@@ -227,3 +233,5 @@ );
                 xFormat: null,
-                tooltipFormat: null
+                tooltipFormat: null,
+                stackPoint: false,
+                hidePoint: false
             };
@@ -230,0 +238,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

117

increased by0.86%

Worsened metrics

Total package byte prevSize

2945638

decreased by-0.09%

Lines of code

33625

decreased by-0.43%

No dependency changes