juijs-chart - npm Package Compare versions

Comparing version 2.4.3 to 2.4.4

bundles/index.js

 import jui from '../src/main.js'
 import ClassicTheme from '../src/theme/classic.js'
-import StackColumnBrush from '../src/brush/stackcolumn.js'
-import TitleWidget from '../src/widget/title.js'
-import TooltipWidget from '../src/widget/tooltip.js'
-import LegendWidget from '../src/widget/legend.js'
+import CandleStickBrush from '../src/brush/candlestick.js'
+import ZoomWidget from '../src/widget/zoom.js'
+import ZoomScrollWidget from '../src/widget/zoomscroll.js'
 
-jui.use([ ClassicTheme, StackColumnBrush, TitleWidget, TooltipWidget, LegendWidget ]);
+jui.use([ ClassicTheme, CandleStickBrush, ZoomWidget, ZoomScrollWidget ]);
 
-jui.ready([ "chart.builder" ], function(chart) {
-    var data = [
-        { quarter : "1Q", samsung : 50, lg : 35, sony: 10 },
-        { quarter : "2Q", samsung : 20, lg : 30, sony: 5 },
-        { quarter : "3Q", samsung : 20, lg : 5, sony: 10 },
-        { quarter : "4Q", samsung : 30, lg : 25, sony: 15 }
-    ];
+var chart = jui.include("chart.builder"),
+    time = jui.include("util.time");
 
-    chart("#chart", {
-        width: 500,
-        height: 300,
-        axis : {
-            y : {
-                type : "range",
-                domain : function(data) {
-                    return data.samsung + data.lg + data.sony;
-                },
-                line : true,
-                orient: "top"
+var data = [
+    { date: new Date(1994,2,1), l: 24.00, h: 25.00, o: 25.00, c: 24.876 },
+    { date: new Date(1994,2,2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
+    { date: new Date(1994,2,3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
+    { date: new Date(1994,2,4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
+    { date: new Date(1994,2,7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
+    { date: new Date(1994,2,8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
+    { date: new Date(1994,2,9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
+    { date: new Date(1994,2,10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
+    { date: new Date(1994,2,11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
+    { date: new Date(1994,2,14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
+    { date: new Date(1994,2,15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
+    { date: new Date(1994,2,16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
+    { date: new Date(1994,2,17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
+    { date: new Date(1994,2,18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
+    { date: new Date(1994,2,21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
+    { date: new Date(1994,2,22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
+    { date: new Date(1994,2,23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
+    { date: new Date(1994,2,24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
+    { date: new Date(1994,2,25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
+    { date: new Date(1994,2,28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
+    { date: new Date(1994,2,29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
+    { date: new Date(1994,2,30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
+    { date: new Date(1994,2,31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
+];
+
+var c = chart("#chart", {
+    height : 400,
+    padding : {
+        bottom : 100
+    },
+    axis : {
+        x : {
+            type : "block",  // default type is block
+            domain : "date",
+            format: function(d) {
+                return time.format(d, "MM-dd");
             },
-            x : {
-                type : "block",
-                domain : "quarter",
-                line : true
-            },
-            data : data
+            line: true
         },
-        brush : {
-            type : "stackcolumn",
-            activeEvent : "click",
-            target : [ "samsung", "lg", "sony" ]
+        y : {
+            type : "range",
+            domain: [ 20, 30 ],
+            step: 5,
+            line : true
         },
-        widget : [{
-            type : "title",
-            text : "Bar Sample",
-            orient : "bottom",
-            align : "end"
-        }, {
-            type : "legend",
-            filter : true
-        }]
-    });
-});
+        keymap : {
+            low : "l",
+            high : "h",
+            open : "o",
+            close : "c"
+        }
+    },
+    brush : [{
+        type : "candlestick"
+    }],
+    widget : [{
+        type : "zoom"
+    }],
+    render : false
+});
+
+c.axis(0).update(data);
+c.render(true);

bundles/production.js

@@ -49,2 +49,4 @@ import jui from '../src/main.js'
 import VScrollWidget from '../src/widget/vscroll.js'
+import ZoomWidget from '../src/widget/zoom.js'
+import ZoomScrollWidget from '../src/widget/zoomscroll.js'
 import RayCastWidget from '../src/widget/raycast.js'
@@ -102,2 +104,4 @@ import PickerWidget from '../src/widget/canvas/picker.js'
     VScrollWidget,
+    ZoomWidget,
+    ZoomScrollWidget,
     RayCastWidget,
@@ -104,0 +108,0 @@ PickerWidget,

package.json

 {
   "name": "juijs-chart",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "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)",

No alert changes

Improved metrics

Number of package files

105

increased by2.94%

Worsened metrics

Total package byte prevSize

2838170

decreased by-12.03%

Lines of code

32127

decreased by-2.2%

No dependency changes