juijs-chart - npm Package Compare versions

Comparing version 2.5.11 to 2.5.12

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import FullStackColumn from '../src/brush/fullstackcolumn.js'
+import DarkTheme from '../src/theme/dark.js'
+import StackAreaBrush from '../src/brush/stackarea.js'
+import LineBrush from '../src/brush/line.js'
+import LegendWidget from '../src/widget/legend.js'
+import GuideLineWidget from '../src/widget/guideline.js'
 
-jui.use([ ClassicTheme, FullStackColumn ]);
+jui.use([ ClassicTheme, DarkTheme, StackAreaBrush, LineBrush, LegendWidget, GuideLineWidget ]);
 
-var builder = jui.include("chart.builder");
+const builder = jui.include('chart.builder');
+const time = jui.include('util.time');
 
-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 }
-];
+const countMap = [ 300, 150, 60 ];
+const dataMap = countMap.map(count => createRealtimeData(count));
+const names = {
+    memory: 'Memory (MB)',
+    cpu: 'CPU Usage (%)',
+    disk: 'Disk Size (MB)'
+}
 
-builder("#chart", {
-    width : 500,
-    height : 500,
-    axis : {
+window.chart = builder('#chart', {
+    width: 1000,
+    height : 300,
+    padding : {
+        right : 200
+    },
+    theme : 'classic',
+    axis : [{
         x : {
-            type : "block",
-            domain : "quarter",
-            line : true
+            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 ],
-            format : function(value) {
-                return value + "%";
-            },
-            line : true,
-            orient : "right"
+            type : 'range',
+            domain : [ 0, 200 ],
+            step : 4,
+            line : 'solid'
         },
-        data : data
+        data : dataMap[0]
+    }],
+    brush : [{
+        type : 'stackarea',
+        target : [ 'memory', 'cpu', 'disk' ],
+        line : false
+    }],
+    widget : [{
+        type : 'guideline',
+        xFormat : function(d) {
+            return time.format(d, 'HH:mm');
+        },
+        tooltipFormat : function(data, key) {
+            return {
+                key: names[key],
+                value: data[key]
+            }
+        },
+        stackPoint : true
+    }, {
+        type : 'legend',
+        orient : 'right',
+        filter : true,
+        format : function(target) {
+            return names[target];
+        },
+        dx : -20
+    }],
+    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');
+            }
+        }
     },
-    brush : {
-        type : "fullstackcolumn",
-        target : [ "samsung", "lg", "sony" ],
-        showText : function(percent) {
-            return percent + "%%";
+    style: {
+        guidelineBorderColor: "#333",
+        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, 200 ],
+            step : 4,
+            line : 'solid',
+            format : function(d) {
+                return d + '%';
+            }
+        },
+        data : dataMap[1]
+    }],
+    brush : [{
+        type : 'stackarea',
+        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]
+            }
+        },
+        stackPoint : true
+    }],
+    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');
+            }
+        }
+    },
+    style: {
+        guidelinePointRadius: 0
+    }
+});
+
+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.11",
+  "version": "2.5.12",
   "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/theme/classic.js

@@ -326,2 +326,3 @@ export default {
             guidelineTooltipFontSize : 12,
+            guidelineTooltipPointRadius : 3,
             guidelineTooltipBackgroundColor : "#fff",
@@ -328,0 +329,0 @@ guidelineTooltipBackgroundOpacity : 0.7,

src/theme/dark.js

@@ -324,2 +324,3 @@ export default {
             guidelineTooltipFontSize : 12,
+            guidelineTooltipPointRadius : 3,
             guidelineTooltipBackgroundColor : "#fff",
@@ -326,0 +327,0 @@ guidelineTooltipBackgroundOpacity : 0.7,

src/theme/gradient.js

@@ -322,2 +322,3 @@ export default {
             guidelineTooltipFontSize : 12,
+            guidelineTooltipPointRadius : 3,
             guidelineTooltipBackgroundColor : "#fff",
@@ -324,0 +325,0 @@ guidelineTooltipBackgroundOpacity : 0.7,

src/theme/pattern.js

@@ -316,2 +316,3 @@ export default {
             guidelineTooltipFontSize : 12,
+            guidelineTooltipPointRadius : 3,
             guidelineTooltipBackgroundColor : "#fff",
@@ -318,0 +319,0 @@ guidelineTooltipBackgroundOpacity : 0.7,

src/widget/guideline.js

@@ -82,12 +82,10 @@ import jui from '../main.js';
                     // 포인트 그리기
-                    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")
-                            });
+                    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")
                         });
-                    }
+                    });
 
@@ -106,5 +104,3 @@ // 본문 툴팁 그리기
                                 let text = chart.svg.text({
-                                    "font-size": chart.theme("guidelineTooltipFontSize"),
-                                    fill: chart.theme("guidelineTooltipFontColor"),
-                                    y: (chart.theme("guidelineTooltipFontSize") * 1.2) * (i + 1)
+                                    "font-size": chart.theme("guidelineTooltipFontSize")
                                 });
@@ -120,5 +116,3 @@
                                 chart.svg.circle({
-                                    fill: chart.color(i),
-                                    r: chart.theme("guidelinePointRadius"),
-                                    cy: (chart.theme("guidelineTooltipFontSize") * 1.2) * (i + 1)
+                                    r: chart.theme("guidelineTooltipPointRadius")
                                 });
@@ -149,8 +143,31 @@ });
 
+                const cacheTargets = chart.getCache("legend_target", brush.target);
                 const rect = contentTooltip.children[0];
                 const texts = contentTooltip.children[1];
                 let width = 0;
-                let height = (chart.theme("guidelineTooltipFontSize") * 1.2) * (brush.target.length + 1);
+                let height = (chart.theme("guidelineTooltipFontSize") * 1.2) * (cacheTargets.length + 1);
                 let current = 0;
 
+                brush.target.forEach((target, index) => {
+                    const targetIndex = cacheTargets.indexOf(target);
+                    const text = contentTooltip.get(1).get(index);
+                    const point = contentTooltip.get(2).get(index);
+
+                    if(targetIndex != -1) {
+                        // 툴팁 그리기
+                        const y = (chart.theme("guidelineTooltipFontSize") * 1.2) * (targetIndex + 1);
+                        text.attr({ fill: chart.theme("guidelineTooltipFontColor"), y: y });
+                        point.attr({ fill: chart.color(index), cy: y });
+                        points[target].attr({ fill: chart.color(index) });
+
+                        // 포인트 그리기
+                        current = (widget.stackPoint) ? current + data[target] : data[target];
+                        points[target].translate(left, axis.y(current));
+                    } else {
+                        text.attr({ fill: 'transparent' });
+                        point.attr({ fill: 'transparent' });
+                        points[target].attr({ fill: 'transparent' });
+                    }
+                });
+
                 brush.target.forEach((key, index) => {
@@ -166,7 +183,2 @@ if(_.typeCheck("function", widget.tooltipFormat)) {
                     }
-
-                    if(!widget.hidePoint) {
-                        current = (widget.stackPoint) ? current + data[key] : data[key];
-                        points[key].translate(left, axis.y(current));
-                    }
                 });
@@ -233,4 +245,3 @@
                 tooltipFormat: null,
-                stackPoint: false,
-                hidePoint: false
+                stackPoint: false
             };
@@ -237,0 +248,0 @@ }

src/widget/legend.js

@@ -73,2 +73,3 @@ import jui from '../main.js';
 
+                chart.setCache(`legend_target`, target);
                 chart.emit("legend.filter", [ target ]);
@@ -75,0 +76,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

2952882

increased by0.25%

Lines of code

33833

increased by0.62%

No dependency changes