@plotdb/chart 0.0.2 → 0.0.3

package/web/static/block/line/0.0.1/index.html

@@ -65,7 +65,7 @@
     return {
       sample: function(){
         return {
-          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100].map(function(val){
+          raw: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30].map(function(val){
             var ret;
             ret = {};
             (function(){
@@ -75,7 +75,8 @@
               }
               return results$;
             }()).map(function(i){
-              return ret["val" + i] = Math.random() * (10 - Math.abs(10 - val)) + val;
+              var ref$;
+              return ret["val" + i] = (ref$ = i * Math.random() * (10 - Math.abs(10 - val)) + val) > 0 ? ref$ : 0;
             });
             ret.order = val;
             return ret;
@@ -98,7 +99,25 @@
           }
         };
       },
-      config: {},
+      config: {
+        mode: {
+          type: 'choice',
+          values: ['line', 'area', 'streamgraph', 'bump'],
+          'default': 'line'
+        },
+        stack: {
+          type: 'boolean'
+        },
+        line: {
+          type: 'choice',
+          values: ['curve', 'linear'],
+          'default': 'linear'
+        },
+        showDot: {
+          type: 'boolean',
+          'default': true
+        }
+      },
       dimension: {
         value: {
           type: 'R',
@@ -255,7 +274,7 @@
         }));
       },
       bind: function(){
-        var binds, dd, ys, i$, to$, i, b, last, this$ = this, results$ = [];
+        var binds, dd, sums, ref$, smin, smax, line0, i$, to$, i, p, b, line1, this$ = this, results$ = [];
         binds = this.binding.value;
         binds = this.binding.value.map(function(b, i){
           return {
@@ -265,7 +284,7 @@
         }).filter(function(d, i){
           return this$.legend.isSelected(d.b.key);
         });
-        if (this.cfg.bump) {
+        if (this.cfg.mode === 'bump') {
           this.parsed = [];
           dd = this.data.map(function(d){
             var ret, v;
@@ -305,50 +324,51 @@
             return ret;
           });
         }
-        this.parsed = binds.map(function(b, i){
-          return {
-            pts: (dd || this$.data).map(function(d, j){
-              return {
-                data: d,
-                y0: 0,
-                y1: d.value[b.i],
-                x: d._order,
-                v: d.originalValue
-                  ? d.originalValue[i]
-                  : d.value[i]
-              };
-            }),
+        dd = dd || this.data;
+        if (this.cfg.mode === 'streamgraph') {
+          sums = dd.map(function(d){
+            var sum, i$, to$, i;
+            sum = 0;
+            for (i$ = 0, to$ = d.value.length; i$ < to$; ++i$) {
+              i = i$;
+              sum += d.value[i];
+            }
+            return sum;
+          });
+          ref$ = [Math.min.apply(Math, sums), Math.max.apply(Math, sums)], smin = ref$[0], smax = ref$[1];
+        } else {
+          ref$ = [
+            dd.map(function(){
+              return 0;
+            }), 0, 0
+          ], sums = ref$[0], smin = ref$[1], smax = ref$[2];
+        }
+        this.parsed = [];
+        line0 = dd.map(function(){
+          return 0;
+        });
+        for (i$ = 0, to$ = binds.length; i$ < to$; ++i$) {
+          i = i$;
+          ref$ = [i > 0 ? binds[i - 1] : null, binds[i]], p = ref$[0], b = ref$[1];
+          line1 = dd.map(fn$);
+          this.parsed.push({
+            pts: (dd || this.data).map(fn1$),
             bind: b.b,
             color: b.b.name || b.b.key
-          };
-        });
-        if (this.cfg.stack) {
-          ys = this.data.map(function(it){
-            return it.value.reduce(function(a, b){
-              return a + b;
-            }, 0);
           });
-          this.parsed = [];
-          for (i$ = 0, to$ = binds.length; i$ < to$; ++i$) {
-            i = i$;
-            b = binds[i].b;
-            last = this.parsed[i - 1] || null;
-            results$.push(this.parsed.push({
-              pts: this.data.map(fn$),
-              bind: b,
-              color: b.name || b.key
-            }));
+          if ((this.cfg.stack && this.cfg.mode !== 'bump') || ((ref$ = this.cfg.mode) === 'streamgraph' || ref$ === 'area')) {
+            results$.push(line0 = line1);
           }
-          return results$;
         }
+        return results$;
         function fn$(d, j){
+          return d.value[b.i] + line0[j];
+        }
+        function fn1$(d, j){
           return {
-            y1: d.value[i] + (!last
-              ? 0
-              : last.pts[j].y1),
-            y0: !last
-              ? 0
-              : last.pts[j].y1,
+            data: d,
+            y0: line0[j] - sums[j] / 2 + (smax - smin) / 2,
+            y1: line1[j] - sums[j] / 2 + (smax - smin) / 2,
             x: d._order,
             v: d.originalValue
               ? d.originalValue[i]
@@ -358,6 +378,12 @@
       },
       resize: function(){
         var ref$, miny, maxy, i$, to$, i, j$, to1$, j, p, w, h, maxTick, yticks, ref1$, yfmt, units, v, box, r, results$ = [];
+        this.line.curve(this.cfg.line === 'curve'
+          ? d3.curveCatmullRom
+          : d3.curveLinear);
+        this.area.curve(this.cfg.line === 'curve'
+          ? d3.curveCatmullRom
+          : d3.curveLinear);
         this.tip.toggle(((ref$ = this.cfg).tip || (ref$.tip = {})).enabled != null ? this.cfg.tip.enabled : true);
         ref$ = [0, 0], miny = ref$[0], maxy = ref$[1];
         for (i$ = 0, to$ = this.parsed.length; i$ < to$; ++i$) {
@@ -383,15 +409,15 @@
           x: d3.extent(this.data, function(it){
             return it._order;
           }),
-          y: [this.cfg.bump ? miny > 1 ? miny : 1 : miny, maxy === miny ? miny + 1 : maxy]
+          y: [this.cfg.mode === 'bump' ? miny > 1 ? miny : 1 : miny, maxy === miny ? miny + 1 : maxy]
         };
         this.scale.x.domain(this.extent.x);
-        this.scale.y.domain(this.cfg.bump
+        this.scale.y.domain(this.cfg.mode === 'bump'
           ? [this.extent.y[1], this.extent.y[0]]
           : this.extent.y);
         ref$ = [this.box.width, this.box.height], w = ref$[0], h = ref$[1];
         maxTick = (ref$ = Math.ceil(this.layout.getBox('yaxis').height / 40)) > 2 ? ref$ : 2;
-        yticks = this.cfg.bump
+        yticks = this.cfg.mode === 'bump'
           ? (function(){
             var i$, to$, ref$, results$ = [];
             for (i$ = 1, to$ = (ref$ = this.parsed.length || 1) > 1 ? ref$ : 1; i$ <= to$; ++i$) {
@@ -406,7 +432,7 @@
         this.yaxis.config(this.cfg.yaxis);
         this.yaxis.ticks(yticks);
         this.yaxis.scale(this.scale.y);
-        if (this.cfg.bump) {
+        if (this.cfg.mode === 'bump') {
           this.yaxis.caption(t('rank'));
         } else {
           if (this.parsed.length > 1) {
@@ -459,7 +485,8 @@
         });
         x$.exit().remove();
         x$.enter().append('path').attr('class', 'data').attr('fill', 'none').attr('d', function(d, i){
-          if (this$.cfg.stack || this$.cfg.area) {
+          var ref$;
+          if ((ref$ = this$.cfg.mode) === 'streamgraph' || ref$ === 'area') {
             return this$.area(d.pts);
           } else {
             return this$.line(d.pts);
@@ -474,7 +501,8 @@
             return 0.3;
           }
         }).attr('d', function(d, i){
-          if (this$.cfg.stack || this$.cfg.area) {
+          var ref$;
+          if ((ref$ = this$.cfg.mode) === 'streamgraph' || ref$ === 'area') {
             return this$.area(d.pts);
           } else {
             return this$.line(d.pts);
@@ -482,7 +510,8 @@
         }).attr('stroke', function(d, i){
           return this$.tint.get(d.color);
         }).attr('fill', function(d, i){
-          if (this$.cfg.stack || this$.cfg.area) {
+          var ref$;
+          if ((ref$ = this$.cfg.mode) === 'streamgraph' || ref$ === 'area') {
             return this$.tint.get(d.color);
           } else {
             return 'none';
@@ -490,7 +519,9 @@
         }).attr('fill-opacity', function(){
           return '0.5';
         });
-        y$ = this.g.view.selectAll('g.dot').data(this.parsed, function(it){
+        y$ = this.g.view.selectAll('g.dot').data(this.cfg.showDot
+          ? this.parsed
+          : [], function(it){
           return it.bind.key;
         });
         y$.exit().remove();

package/web/static/block/taiwancounty/0.0.1/index.html

@@ -0,0 +1,202 @@
+<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="legend">123</div></div><div data-type="render"></div></div></div><style type="text/css">.pdl-layout > div[data-type=layout] {
+  display: grid;
+  grid-template-columns: 1fr fit-content(5em);
+}
+</style><script type="@plotdb/block">(function(it){
+  return it();
+})(function(){
+  var blockFactory, mod;
+  blockFactory = {
+    pkg: {
+      name: 'taiwancounty',
+      version: '0.0.1',
+      extend: {
+        name: "base",
+        version: "0.0.1"
+      },
+      dependencies: [
+        {
+          url: "https://d3js.org/topojson.v2.min.js",
+          async: false
+        }, {
+          url: "https://d3js.org/d3-geo.v2.min.js",
+          async: false
+        }, {
+          name: "pdmaptw",
+          version: "local",
+          path: "index.min.js",
+          async: false
+        }, {
+          name: "pdmaptw",
+          version: "local",
+          path: "county.map.js"
+        }
+      ]
+    },
+    init: function(arg$){
+      var root, context, pubsub;
+      root = arg$.root, context = arg$.context, pubsub = arg$.pubsub;
+      return pubsub.fire('init', {
+        mod: mod({
+          context: context
+        })
+      }).then(function(it){
+        return it[0];
+      });
+    }
+  };
+  mod = function(arg$){
+    var context, chart, d3, ldcolor, pdmaptw, topojson;
+    context = arg$.context;
+    chart = context.chart, d3 = context.d3, ldcolor = context.ldcolor, pdmaptw = context.pdmaptw, topojson = context.topojson;
+    return {
+      sample: function(){
+        return pdmaptw.get('county').then(function(arg$){
+          var meta, topo;
+          meta = arg$.meta, topo = arg$.topo;
+          return {
+            raw: meta.name.map(function(it){
+              return {
+                val: Math.random(),
+                name: pdmaptw.normalize(it)
+              };
+            }),
+            binding: {
+              color: {
+                key: 'val'
+              },
+              name: {
+                key: 'name'
+              }
+            }
+          };
+        });
+      },
+      config: {
+        palette: {
+          type: 'palette'
+        }
+      },
+      dimension: {
+        name: {
+          type: 'N',
+          name: "國家"
+        },
+        color: {
+          type: 'R',
+          name: "顏色"
+        }
+      },
+      init: function(){
+        var scale, this$ = this;
+        this.g = this.layout.getGroup('view');
+        this.obj = new pdmaptw({
+          root: this.g,
+          type: 'county'
+        });
+        this.scale = scale = {
+          color: d3.interpolateTurbo
+        };
+        this.legend = new chart.utils.legend({
+          root: this.root,
+          name: 'legend',
+          layout: this.layout,
+          shape: function(d){
+            return d3.select(this).attr('fill', scale.color(d.key));
+          }
+        });
+        this.tip = new chart.utils.tip({
+          root: this.root,
+          accessor: function(arg$){
+            var evt, data;
+            evt = arg$.evt;
+            if (!(evt.target && (data = d3.select(evt.target).datum()))) {
+              return null;
+            }
+            return {
+              name: data.data.name,
+              value: data.data.color
+            };
+          },
+          range: function(){
+            return this$.layout.getNode('view').getBoundingClientRect();
+          }
+        });
+        return this.obj.init().then(function(){
+          return this$.obj.fit({
+            node: this$.g,
+            box: this$.layout.getNode('view').getBoundingClientRect()
+          });
+        });
+      },
+      parse: function(){
+        var this$ = this;
+        this.extent = {
+          c: [undefined, undefined]
+        };
+        return d3.select(this.svg).selectAll('path').each(function(d, i){
+          d.data = this$.data.filter(function(it){
+            return it.name === d.properties.name;
+          })[0] || {};
+          if (!(this$.extent.c[0] != null) || d.data.color < this$.extent.c[0]) {
+            this$.extent.c[0] = d.data.color;
+          }
+          if (!(this$.extent.c[1] != null) || d.data.color > this$.extent.c[1]) {
+            return this$.extent.c[1] = d.data.color;
+          }
+        });
+      },
+      resize: function(){
+        var ref$, pal, len, this$ = this;
+        this.tip.toggle(((ref$ = this.cfg).tip || (ref$.tip = {})).enabled != null ? this.cfg.tip.enabled : true);
+        this.obj.fit(this.layout.getBox('view'));
+        pal = this.cfg.palette
+          ? this.cfg.palette.colors
+          : ['#f00', '#999', '#00f'];
+        len = pal.length;
+        this.ticks = d3.quantize(function(it){
+          return (1 - it) * (this$.extent.c[1] - this$.extent.c[0]) + this$.extent.c[0];
+        }, len).map(function(it){
+          var that;
+          return {
+            key: it,
+            text: d3.format(this$.cfg.legendFormat || '.2f')(it) + ((that = this$.binding.color.unit) ? that : '')
+          };
+        });
+        this.ticks.sort(function(a, b){
+          return a.key - b.key;
+        });
+        if (this.cfg.palette) {
+          this.scale.color = d3.scaleLinear().domain(this.ticks.map(function(it){
+            return it.key;
+          })).range(pal.map(function(it){
+            return ldcolor.web(it.value || it);
+          }));
+        }
+        this.legend.data(this.ticks);
+        return this.obj.fit({
+          node: this.g,
+          box: this.layout.getBox('view')
+        });
+      },
+      render: function(){
+        var this$ = this;
+        d3.select(this.svg).selectAll('path').transition().duration(350).attr('fill', function(d, i){
+          return this$.scale.color(d.data.color);
+        }).attr('fill-opacity', function(d, i){
+          if (this$.cfg.dimEmpty) {
+            if (d.data.color != null) {
+              return 1;
+            } else {
+              return 0.2;
+            }
+          } else {
+            return 1;
+          }
+        });
+        return this.legend.render();
+      }
+    };
+  };
+  return blockFactory;
+});</script></div>

package/web/static/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/assets/lib/bootstrap/main/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="/assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css"><link rel="stylesheet" type="text/css" href="/assets/lib/@loadingio/loading.css/main/loading.min.css"><link rel="stylesheet" type="text/css" href="/css/index.css"><link rel="stylesheet" type="text/css" href="/assets/lib/ldpalettepicker/main/index.min.css"><style type="text/css">html,
+<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/assets/lib/bootstrap/main/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="/assets/lib/@loadingio/bootstrap.ext/main/index.min.css"><link rel="stylesheet" type="text/css" href="/assets/lib/@loadingio/loading.css/main/loading.min.css"><link rel="stylesheet" type="text/css" href="/css/index.css"><link rel="stylesheet" type="text/css" href="/assets/lib/ldpalettepicker/main/index.min.css"><style type="text/css">html,
 body {
   width: 100%;
   height: 100%;
   color: #345;
 }
-</style></head><body><div class="w-100 h-100" ld-scope="viewer"><div class="w-100 h-100 p-4 d-flex flex-column"><div><h5>Chart Testing Suite</h5><div class="d-flex flex-grow-1 mb-4"><select class="form-control" ld="choice"><option value="" disabled selected>選擇圖表 ...</option><option value="bar-race">bar-race</option><option value="bar-list">bar-list</option><option value="sheet">sheet</option><option value="percent-list">percent-list</option><option value="table">table</option><option value="scatter">scatter</option><option value="gauge">gauge</option><option value="number">number</option><option value="curve-bar">curve-bar</option><option value="dumbbell">dumbbell</option><option value="pie">pie</option><option value="axis">axis</option><option value="wordcloud">wordcloud</option><option value="axis-bubble">axis-bubble</option><option value="bubble">bubble</option><option value="treemap">treemap</option><option value="worldmap">worldmap</option><option value="taiwantown">taiwantown</option><option value="taiwanvillage">taiwanvillage</option><option value="pie-bubble">pie-bubble</option><option value="bar">bar</option><option value="voronoi-treemap">voronoi-treemap</option><option value="radar">radar</option><option value="line">line</option></select><div class="ml-2 btn btn-outline-secondary" ld="palette">Palette</div><div class="ml-2 btn btn-outline-secondary" ld="filter">Filter</div></div></div><div class="flex-grow-1 d-flex overflow-hidden"><div class="w-100 h-100 bg-light border shadow-sm rounded"><div class="w-100 h-100 rounded" id="root"></div></div><div class="border ml-4 bg-light border shadow-sm rounded p-4" style="width:320px;font-size:14px;overflow-y:scroll" ld="konfig"><div class="d-none"><div ld-scope="" ld="template"><div class="font-weight-bold text-lg mb-2" ld="name"></div><div class="mb-3" ld-each="ctrl"></div><div class="mb-4" ld-each="tab"></div></div></div></div></div></div></div><script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver"></script><script type="text/javascript" src="/assets/lib/@loadingio/ldquery/main/ldq.min.js"></script><script type="text/javascript" src="/assets/lib/ldview/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/proxise/main/proxise.js"></script><script type="text/javascript" src="/assets/lib/@loadingio/debounce.js/main/debounce.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/csscope/main/csscope.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/rescope/main/rescope.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/block/main/block.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/konfig/main/konfig.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/konfig/main/konfig.widget.bootstrap.js"></script><script type="text/javascript" src="/assets/lib/ldpalettepicker/main/ldpp.min.js"></script><script type="text/javascript" src="/assets/lib/ldpalettepicker/main/all.palettes.js"></script><!--+script("/assets/block/cache.js")--><script>(function(it){
+</style></head><body><div class="w-100 h-100" ld-scope="viewer"><div class="w-100 h-100 p-4 d-flex flex-column"><div><h5>Chart Testing Suite</h5><div class="d-flex flex-grow-1 mb-4"><select class="form-control" ld="choice"><option value="" disabled selected>選擇圖表 ...</option><option value="bar-race">bar-race</option><option value="bar-list">bar-list</option><option value="sheet">sheet</option><option value="percent-list">percent-list</option><option value="table">table</option><option value="scatter">scatter</option><option value="gauge">gauge</option><option value="number">number</option><option value="curve-bar">curve-bar</option><option value="dumbbell">dumbbell</option><option value="pie">pie</option><option value="axis">axis</option><option value="wordcloud">wordcloud</option><option value="axis-bubble">axis-bubble</option><option value="bubble">bubble</option><option value="treemap">treemap</option><option value="worldmap">worldmap</option><option value="taiwantown">taiwantown</option><option value="taiwanvillage">taiwanvillage</option><option value="pie-bubble">pie-bubble</option><option value="bar">bar</option><option value="voronoi-treemap">voronoi-treemap</option><option value="radar">radar</option><option value="line">line</option></select><div class="ml-2 btn btn-outline-secondary" ld="palette">Palette</div><div class="ml-2 btn btn-outline-secondary" ld="filter">Filter</div></div></div><div class="flex-grow-1 d-flex overflow-hidden"><div class="w-100 h-100 bg-light border shadow-sm rounded"><div class="w-100 h-100 rounded" id="root"></div></div><div class="border ml-4 bg-light border shadow-sm rounded p-4" style="width:320px;font-size:14px;overflow-y:scroll" ld="konfig"><div class="d-none"><div ld-scope="" ld="template"><div class="font-weight-bold text-lg mb-2" ld="name"></div><div class="mb-3" ld-each="ctrl"></div><div class="mb-4" ld-each="tab"></div></div></div></div></div></div></div><script type="text/javascript" src="/assets/lib/bootstrap.native/main/bootstrap-native-v4.min.js"></script><script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver"></script><script type="text/javascript" src="/assets/lib/@loadingio/ldquery/main/ldq.min.js"></script><script type="text/javascript" src="/assets/lib/ldview/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/proxise/main/proxise.js"></script><script type="text/javascript" src="/assets/lib/@loadingio/debounce.js/main/debounce.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/csscope/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/rescope/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/block/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/konfig/main/index.min.js"></script><script type="text/javascript" src="/assets/lib/@plotdb/konfig/main/konfig.widget.bootstrap.js"></script><script type="text/javascript" src="/assets/lib/ldpalettepicker/main/ldpp.min.js"></script><script type="text/javascript" src="/assets/lib/ldpalettepicker/main/all.palettes.js"></script><script>(function(it){
   return it.apply({});
 })(function(){
   var lc, blockPrepare, manager;