@plotdb/chart 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Logs
 
+# v0.0.3
+
+ - upgrade @plotdb/block and related modules. add @loadingio/vscroll
+ - support Promise-based sample function
+ - change context of `sample` so we can access `cfg` directly in `sample`
+ - add taiwancounty chart
+
+
 ## v0.0.2
 
  - use `palette` instead of `pal` in all charts, configurations and utils

package/dist/chart.js

@@ -298,23 +298,27 @@
         return this$.tick();
       });
       return p = Promise.resolve().then(function(){
-        var ref$;
+        var defcfg, ret;
+        defcfg = defaultConfig(this$.mod.config || {});
+        withDefault(this$.cfg, defcfg);
         if (this$.raw && Array.isArray(this$.raw)) {
           return;
         }
-        if (this$.useSample) {
-          this$.raw = (ref$ = this$.mod.sample
-            ? this$.mod.sample() || {}
-            : {}).raw;
-          this$.binding = ref$.binding;
+        if (!this$.useSample || !this$.mod.sample) {
+          return;
         }
+        ret = this$.mod.sample.apply(this$);
+        return ret.then
+          ? ret.then()
+          : Promise.resolve(ret);
+      }).then(function(it){
+        var ref$;
+        return this$.raw = (ref$ = it || {}).raw, this$.binding = ref$.binding, this$;
+      }).then(function(){
+        var ref$, _resizeLock;
         if (!this$.raw) {
-          return this$.raw = [];
+          this$.raw = [];
         }
-      }).then(function(){
-        var defcfg, ref$, _resizeLock;
-        defcfg = defaultConfig(this$.mod.config || {});
-        withDefault(this$.cfg, defcfg);
         if (this$.layoutOpt) {
           if (!(typeof layout != 'undefined' && layout !== null)) {
             console.warn("[@plotdb/chart] layout-opt is set yet @plotdb/layout is not found.");

package/dist/chart.min.js

@@ -1 +1 @@
-(function(){var svgns,parent,aniloop,visibilityObserver,resizeObserver,withDefault,defaultConfig,chart;svgns="http://www.w3.org/2000/svg";parent=function(n,s,e){var m;m=n;while(n&&n!==e){n=n.parentNode}if(n!==e){return null}if(!s){return n}n=m;while(n&&n!==e&&(!n.matches||n.matches&&!n.matches(s))){n=n.parentNode}if(n===e&&(!e.matches||!e.matches(s))){return null}return n};aniloop=function(){this.running=false;this.time={now:0,last:0};this.fps(60);this.evtHandler={};return this};aniloop.prototype=import$(Object.create(Object.prototype),{on:function(n,cb){var this$=this;return(Array.isArray(n)?n:[n]).map(function(n){var ref$;return((ref$=this$.evtHandler)[n]||(ref$[n]=[])).push(cb)})},fire:function(n){var v,res$,i$,to$,ref$,len$,cb,results$=[];res$=[];for(i$=1,to$=arguments.length;i$<to$;++i$){res$.push(arguments[i$])}v=res$;for(i$=0,len$=(ref$=this.evtHandler[n]||[]).length;i$<len$;++i$){cb=ref$[i$];results$.push(cb.apply(this,v))}return results$},reset:function(){return this.time={now:0}},setTime:function(t){return this.time.now=t},getTime:function(){return this.time.now},isRunning:function(){return this.running},toggle:function(it){if(it!=null){this.running=!it}if(this.running){return this.pause()}else{return this.run()}},pause:function(){return this.running=false},render:function(){return this.fire("tick",this.time.now)},run:function(fps){var this$=this;if(fps!=null){this.fps(fps)}if(this.running){return}this.running=true;return requestAnimationFrame(function(t){return this$.handler(this$.time.last=t,true)})},throttle:function(v){v==null&&(v=true);return this.isThrottled=v},fps:function(it){if(!(it!=null)){return this._fps_val}this._fps_val=it>.01?it:.01;return this._fps_delay=1e3/this._fps_val},handler:function(t,force){var delay,ref$,this$=this;force==null&&(force=false);if(!this.running){return}this.time.now=t;delay=this.isThrottled?(ref$=this._fps_delay)>1e3?ref$:1e3:this._fps_delay;if(force||this.time.now-this.time.last>=delay){this.time.last=t;this.render()}return requestAnimationFrame(function(t){return this$.handler(t,false)})}});visibilityObserver={list:[],init:function(){var ref$,h,vc,this$=this;this.inited=true;ref$=document.hidden!=null?["hidden","visibilitychange"]:document.msHidden!=null?["hidden","visibilitychange"]:document.webkiHidden!=null?["webkitHidden","webkitvisibilitychange"]:["hidden","visibilitychange"],h=ref$[0],vc=ref$[1];return document.addEventListener(vc,debounce(150,function(){var th;th=!!document[h];return this$.list.map(function(it){return it.throttle(th)})},false))},add:function(aniloop){if(!this.inited){this.init()}return this.list.push(aniloop)}};resizeObserver={wm:new WeakMap,ro:new ResizeObserver(function(list){return list.map(function(n){var ret;ret=resizeObserver.wm.get(n.target);return ret._resize()})}),add:function(node,obj){this.wm.set(node,obj);return this.ro.observe(node)},delete:function(it){this.ro.unobserve(it);return this.wm["delete"](it)}};withDefault=function(cfg,defcfg){var _;cfg==null&&(cfg={});defcfg==null&&(defcfg={});defcfg=JSON.parse(JSON.stringify(defcfg));_=function(cfg,defcfg){var k,v;for(k in defcfg){v=defcfg[k];if(!(cfg[k]!=null)){cfg[k]=v}else if(typeof cfg[k]==="object"&&typeof v==="object"){withDefault(cfg[k],defcfg[k])}}return cfg};return _(cfg,defcfg)};defaultConfig=function(cfg){var _;_=function(meta,ret){var ctrls,that,id,v;ret==null&&(ret={});ctrls=(that=meta.child)?that:meta;for(id in meta){v=meta[id];if(!v.type){_(v,ret[id]||(ret[id]={}))}else if(v["default"]){ret[id]=v["default"]}}return ret};return _(cfg)};chart=function(opt){var this$=this;opt==null&&(opt={});this.root=typeof opt.root==="string"?document.querySelector(opt.root):opt.root;this.useSample=opt.useSample!=null?opt.useSample:true;this.autoSelect=opt.autoSelect!=null?opt.autoSelect:true;this.forceInit=opt.forceInit?opt.forceInit:false;this.prepareSvg=opt.prepareSvg!=null?opt.prepareSvg:true;this.layoutOpt=opt.layout!=null?opt.layout:true;this.delayRender=opt.delayRender||false;this.dataAccessor=opt.dataAccessor!=null?opt.dataAccessor:function(it){if(it){return it.data._raw}else{return null}};this.raw=opt.raw||null;this.mod=opt.mod||{};this.cfg=opt.config||{};this.seed=opt.seed||Math.random();this.binding=opt.binding||{};this.evtHandler={};this.init=proxise.once(function(){return this$._init()});this._resize=null;if(this.autoSelect){this.root.addEventListener("click",this._select=function(e){var p;if(!(p=parent(e.target,".data",this$.root))){return}return this$.fire("select",[{data:this$.dataAccessor(p),node:p}])});this.root.addEventListener("mouseover",this._hover=function(e){var p;if(!(p=ld$.parent(e.target,".data",this$.root))){return}return this$.fire("hover",[{data:this$.dataAccessor(p),node:p}])})}return this};chart.prototype=import$(Object.create(Object.prototype),{_init:function(){var layoutRoot,ref$,r,p,this$=this;if(window.getComputedStyle(this.root).position==="static"){this.root.style.position="relative"}layoutRoot=this.layoutOpt?typeof this.layoutOpt!=="object"?this.root.querySelector(".pdl-layout"):typeof this.layoutOpt.root==="string"?this.root.querySelector(this.layoutOpt.root):this.layoutOpt.root?this.layoutOpt.root:null:null;if(this.prepareSvg&&!(this.svg=this.root.querySelector("svg"))){this.svg=document.createElementNS(svgns,"svg");ref$=this.svg.style;ref$.width="100%";ref$.height="100%";if(this.layoutOpt){if(!layoutRoot){console.error("[@plotdb/chart] layout enabled yet layout root isn't configured properly. ")}r=layoutRoot.querySelector("[data-type=render]");if(!r){console.warn("[@plotdb/chart] prepareSvg and layout is configured at the same time,\nyet render container for layout is not found. svg is thus appended in the root.")}}(r||this.root).appendChild(this.svg)}this._aniloop=new aniloop;visibilityObserver.add(this._aniloop);this._aniloop.on("tick",function(){return this$.tick()});return p=Promise.resolve().then(function(){var ref$;if(this$.raw&&Array.isArray(this$.raw)){return}if(this$.useSample){this$.raw=(ref$=this$.mod.sample?this$.mod.sample()||{}:{}).raw;this$.binding=ref$.binding}if(!this$.raw){return this$.raw=[]}}).then(function(){var defcfg,ref$,_resizeLock;defcfg=defaultConfig(this$.mod.config||{});withDefault(this$.cfg,defcfg);if(this$.layoutOpt){if(!(typeof layout!="undefined"&&layout!==null)){console.warn("[@plotdb/chart] layout-opt is set yet @plotdb/layout is not found.")}else{if(!layoutRoot){console.error("[@plotdb/chart] cannot determine root node for @plotdb/layout.");console.error("[@plotdb/chart] config layout properly or disable layout by setting layout to false")}this$.layout=new layout(typeof this$.layoutOpt==="object"?(ref$=import$({},this$.layoutOpt),ref$.watchResize=false,ref$):{root:layoutRoot,watchResize:false})}}_resizeLock=proxise(function(){resizeObserver.add(this$.root,this$);return null});if(this$.forceInit&&!this$.root.offsetParent||window.getComputedStyle(this$.root).display==="none"){return}this$._resize=function(){return _resizeLock.resolve()};return _resizeLock()}).then(function(){return this$._resize=function(){}}).then(function(){var init,layoutLock;init=function(){if(this$.mod.init){return this$.mod.init.apply(this$)}};if(!this$.layout){return init()}layoutLock=proxise(function(){Promise.resolve(this$.layout.init(init));return null});this$._layout=function(){return layoutLock.resolve()};this$.layout.on("render",function(){return this$._layout()});return layoutLock()}).then(function(){this$._layout=function(){};Promise.resolve().then(function(){if(!this$.delayRender){return}this$.renderLock=proxise(function(){});return this$.renderLock()}).then(function(){this$._resize=function(){this$.resize();return this$.render()};this$._layout=function(){this$.parse();this$.bind();this$.resize();return this$.render()};this$.parse();this$.bind();this$.resize();return this$.render()})})},parse:function(){var this$=this;this.data=this.raw.map(function(r,i){var ret,k,v;ret={};(function(){var ref$,results$=[];for(k in ref$=this.binding){v=ref$[k];results$.push({k:k,v:v})}return results$}).call(this$).map(function(arg$){var k,v,ref$,ref1$,t;k=arg$.k,v=arg$.v;if(!v){return}ret[k]=((ref$=(ref1$=this$.mod).dimension||(ref1$.dimension={}))[k]||(ref$[k]={})).multiple?v.map(function(it){return r[it.key]}):r[v.key];t=((ref$=(ref1$=this$.mod).dimension||(ref1$.dimension={}))[k]||(ref$[k]={})).type;if(/[RIT]/.exec(t)&&!/[CN]/.exec(t)){return ret[k]=Array.isArray(ret[k])?ret[k].map(function(it){return parseFloat(it)}):parseFloat(ret[k])}});ret._raw=r;ret._idx=i;return ret});if(this.mod.parse){return this.mod.parse.apply(this)}},bind:function(){if(this.mod.bind){return this.mod.bind.apply(this)}},start:function(){this._aniloop.run();if(this.mod.start){return this.mod.start.apply(this)}},stop:function(){this._aniloop.pause();if(this.mod.stop){return this.mod.stop.apply(this)}},resize:function(){if(this.layout){this.layout.update(false)}this.box=this.root.getBoundingClientRect();if(this.mod.resize){return this.mod.resize.apply(this)}},tick:function(){if(this.mod.tick){return this.mod.tick.apply(this)}},render:function(){if(this.mod.render){return this.mod.render.apply(this)}},destroy:function(){var this$=this;return Promise.resolve().then(function(){if(this$._select){this$.root.removeEventListener("click",this$._select)}if(this$._hover){this$.root.removeEventListener("mouseover",this$._hover)}resizeObserver["delete"](this$.root);if(this$.layout){this$.layout.destroy()}this$.stop();if(this$.mod.destroy){return this$.mod.destroy.apply(this$)}})},config:function(opt){if(!(opt!=null&&opt)){return this.cfg}return import$(this.cfg,opt)},setBind:function(n,b){this.binding[n]=b;this.parse();this.bind();this.resize();return this.render()},setRaw:function(raw,binding,reinit){var ref$;reinit==null&&(reinit=false);if(!Array.isArray(raw)){ref$=raw,raw=ref$.raw,binding=ref$.binding,reinit=ref$.reinit}if(raw!=null){this.raw=raw}if(binding!=null){this.binding=binding}if(this.renderLock){this.renderLock.resolve();return this.renderLock=null}else{if(reinit&&this.mod.init){this.mod.init.apply(this)}this.parse();this.bind();this.resize();return this.render()}},on:function(n,cb){var this$=this;return(Array.isArray(n)?n:[n]).map(function(n){var ref$;return((ref$=this$.evtHandler)[n]||(ref$[n]=[])).push(cb)})},fire:function(n){var v,res$,i$,to$,ref$,len$,cb,results$=[];res$=[];for(i$=1,to$=arguments.length;i$<to$;++i$){res$.push(arguments[i$])}v=res$;for(i$=0,len$=(ref$=this.evtHandler[n]||[]).length;i$<len$;++i$){cb=ref$[i$];results$.push(cb.apply(this,v))}return results$},filter:function(filters,internal){var bs,k,ref$,v,u;filters==null&&(filters={});internal==null&&(internal=false);bs=[];for(k in ref$=this.binding){v=ref$[k];u=Array.isArray(v)?v:[v];u=u.map(fn$);bs=bs.concat(u)}for(k in filters){v=filters[k];bs.filter(fn1$).map(fn2$)}if(internal){this.fire("filter",filters)}if(this.mod.filter){this.mod.filter.apply(this,[filters,internal])}this.parse();this.bind();this.resize();return this.render();function fn$(v){return{k:k,v:v}}function fn1$(it){return it.k===k}function fn2$(it){return it.v.filter=v}}});if(typeof module!="undefined"&&module!==null){module.exports=chart}else if(typeof window!="undefined"&&window!==null){window.chart=chart}function import$(obj,src){var own={}.hasOwnProperty;for(var key in src)if(own.call(src,key))obj[key]=src[key];return obj}}).call(this);
+(function(){var svgns,parent,aniloop,visibilityObserver,resizeObserver,withDefault,defaultConfig,chart;svgns="http://www.w3.org/2000/svg";parent=function(n,s,e){var m;m=n;while(n&&n!==e){n=n.parentNode}if(n!==e){return null}if(!s){return n}n=m;while(n&&n!==e&&(!n.matches||n.matches&&!n.matches(s))){n=n.parentNode}if(n===e&&(!e.matches||!e.matches(s))){return null}return n};aniloop=function(){this.running=false;this.time={now:0,last:0};this.fps(60);this.evtHandler={};return this};aniloop.prototype=import$(Object.create(Object.prototype),{on:function(n,cb){var this$=this;return(Array.isArray(n)?n:[n]).map(function(n){var ref$;return((ref$=this$.evtHandler)[n]||(ref$[n]=[])).push(cb)})},fire:function(n){var v,res$,i$,to$,ref$,len$,cb,results$=[];res$=[];for(i$=1,to$=arguments.length;i$<to$;++i$){res$.push(arguments[i$])}v=res$;for(i$=0,len$=(ref$=this.evtHandler[n]||[]).length;i$<len$;++i$){cb=ref$[i$];results$.push(cb.apply(this,v))}return results$},reset:function(){return this.time={now:0}},setTime:function(t){return this.time.now=t},getTime:function(){return this.time.now},isRunning:function(){return this.running},toggle:function(it){if(it!=null){this.running=!it}if(this.running){return this.pause()}else{return this.run()}},pause:function(){return this.running=false},render:function(){return this.fire("tick",this.time.now)},run:function(fps){var this$=this;if(fps!=null){this.fps(fps)}if(this.running){return}this.running=true;return requestAnimationFrame(function(t){return this$.handler(this$.time.last=t,true)})},throttle:function(v){v==null&&(v=true);return this.isThrottled=v},fps:function(it){if(!(it!=null)){return this._fps_val}this._fps_val=it>.01?it:.01;return this._fps_delay=1e3/this._fps_val},handler:function(t,force){var delay,ref$,this$=this;force==null&&(force=false);if(!this.running){return}this.time.now=t;delay=this.isThrottled?(ref$=this._fps_delay)>1e3?ref$:1e3:this._fps_delay;if(force||this.time.now-this.time.last>=delay){this.time.last=t;this.render()}return requestAnimationFrame(function(t){return this$.handler(t,false)})}});visibilityObserver={list:[],init:function(){var ref$,h,vc,this$=this;this.inited=true;ref$=document.hidden!=null?["hidden","visibilitychange"]:document.msHidden!=null?["hidden","visibilitychange"]:document.webkiHidden!=null?["webkitHidden","webkitvisibilitychange"]:["hidden","visibilitychange"],h=ref$[0],vc=ref$[1];return document.addEventListener(vc,debounce(150,function(){var th;th=!!document[h];return this$.list.map(function(it){return it.throttle(th)})},false))},add:function(aniloop){if(!this.inited){this.init()}return this.list.push(aniloop)}};resizeObserver={wm:new WeakMap,ro:new ResizeObserver(function(list){return list.map(function(n){var ret;ret=resizeObserver.wm.get(n.target);return ret._resize()})}),add:function(node,obj){this.wm.set(node,obj);return this.ro.observe(node)},delete:function(it){this.ro.unobserve(it);return this.wm["delete"](it)}};withDefault=function(cfg,defcfg){var _;cfg==null&&(cfg={});defcfg==null&&(defcfg={});defcfg=JSON.parse(JSON.stringify(defcfg));_=function(cfg,defcfg){var k,v;for(k in defcfg){v=defcfg[k];if(!(cfg[k]!=null)){cfg[k]=v}else if(typeof cfg[k]==="object"&&typeof v==="object"){withDefault(cfg[k],defcfg[k])}}return cfg};return _(cfg,defcfg)};defaultConfig=function(cfg){var _;_=function(meta,ret){var ctrls,that,id,v;ret==null&&(ret={});ctrls=(that=meta.child)?that:meta;for(id in meta){v=meta[id];if(!v.type){_(v,ret[id]||(ret[id]={}))}else if(v["default"]){ret[id]=v["default"]}}return ret};return _(cfg)};chart=function(opt){var this$=this;opt==null&&(opt={});this.root=typeof opt.root==="string"?document.querySelector(opt.root):opt.root;this.useSample=opt.useSample!=null?opt.useSample:true;this.autoSelect=opt.autoSelect!=null?opt.autoSelect:true;this.forceInit=opt.forceInit?opt.forceInit:false;this.prepareSvg=opt.prepareSvg!=null?opt.prepareSvg:true;this.layoutOpt=opt.layout!=null?opt.layout:true;this.delayRender=opt.delayRender||false;this.dataAccessor=opt.dataAccessor!=null?opt.dataAccessor:function(it){if(it){return it.data._raw}else{return null}};this.raw=opt.raw||null;this.mod=opt.mod||{};this.cfg=opt.config||{};this.seed=opt.seed||Math.random();this.binding=opt.binding||{};this.evtHandler={};this.init=proxise.once(function(){return this$._init()});this._resize=null;if(this.autoSelect){this.root.addEventListener("click",this._select=function(e){var p;if(!(p=parent(e.target,".data",this$.root))){return}return this$.fire("select",[{data:this$.dataAccessor(p),node:p}])});this.root.addEventListener("mouseover",this._hover=function(e){var p;if(!(p=ld$.parent(e.target,".data",this$.root))){return}return this$.fire("hover",[{data:this$.dataAccessor(p),node:p}])})}return this};chart.prototype=import$(Object.create(Object.prototype),{_init:function(){var layoutRoot,ref$,r,p,this$=this;if(window.getComputedStyle(this.root).position==="static"){this.root.style.position="relative"}layoutRoot=this.layoutOpt?typeof this.layoutOpt!=="object"?this.root.querySelector(".pdl-layout"):typeof this.layoutOpt.root==="string"?this.root.querySelector(this.layoutOpt.root):this.layoutOpt.root?this.layoutOpt.root:null:null;if(this.prepareSvg&&!(this.svg=this.root.querySelector("svg"))){this.svg=document.createElementNS(svgns,"svg");ref$=this.svg.style;ref$.width="100%";ref$.height="100%";if(this.layoutOpt){if(!layoutRoot){console.error("[@plotdb/chart] layout enabled yet layout root isn't configured properly. ")}r=layoutRoot.querySelector("[data-type=render]");if(!r){console.warn("[@plotdb/chart] prepareSvg and layout is configured at the same time,\nyet render container for layout is not found. svg is thus appended in the root.")}}(r||this.root).appendChild(this.svg)}this._aniloop=new aniloop;visibilityObserver.add(this._aniloop);this._aniloop.on("tick",function(){return this$.tick()});return p=Promise.resolve().then(function(){var defcfg,ret;defcfg=defaultConfig(this$.mod.config||{});withDefault(this$.cfg,defcfg);if(this$.raw&&Array.isArray(this$.raw)){return}if(!this$.useSample||!this$.mod.sample){return}ret=this$.mod.sample.apply(this$);return ret.then?ret.then():Promise.resolve(ret)}).then(function(it){var ref$;return this$.raw=(ref$=it||{}).raw,this$.binding=ref$.binding,this$}).then(function(){var ref$,_resizeLock;if(!this$.raw){this$.raw=[]}if(this$.layoutOpt){if(!(typeof layout!="undefined"&&layout!==null)){console.warn("[@plotdb/chart] layout-opt is set yet @plotdb/layout is not found.")}else{if(!layoutRoot){console.error("[@plotdb/chart] cannot determine root node for @plotdb/layout.");console.error("[@plotdb/chart] config layout properly or disable layout by setting layout to false")}this$.layout=new layout(typeof this$.layoutOpt==="object"?(ref$=import$({},this$.layoutOpt),ref$.watchResize=false,ref$):{root:layoutRoot,watchResize:false})}}_resizeLock=proxise(function(){resizeObserver.add(this$.root,this$);return null});if(this$.forceInit&&!this$.root.offsetParent||window.getComputedStyle(this$.root).display==="none"){return}this$._resize=function(){return _resizeLock.resolve()};return _resizeLock()}).then(function(){return this$._resize=function(){}}).then(function(){var init,layoutLock;init=function(){if(this$.mod.init){return this$.mod.init.apply(this$)}};if(!this$.layout){return init()}layoutLock=proxise(function(){Promise.resolve(this$.layout.init(init));return null});this$._layout=function(){return layoutLock.resolve()};this$.layout.on("render",function(){return this$._layout()});return layoutLock()}).then(function(){this$._layout=function(){};Promise.resolve().then(function(){if(!this$.delayRender){return}this$.renderLock=proxise(function(){});return this$.renderLock()}).then(function(){this$._resize=function(){this$.resize();return this$.render()};this$._layout=function(){this$.parse();this$.bind();this$.resize();return this$.render()};this$.parse();this$.bind();this$.resize();return this$.render()})})},parse:function(){var this$=this;this.data=this.raw.map(function(r,i){var ret,k,v;ret={};(function(){var ref$,results$=[];for(k in ref$=this.binding){v=ref$[k];results$.push({k:k,v:v})}return results$}).call(this$).map(function(arg$){var k,v,ref$,ref1$,t;k=arg$.k,v=arg$.v;if(!v){return}ret[k]=((ref$=(ref1$=this$.mod).dimension||(ref1$.dimension={}))[k]||(ref$[k]={})).multiple?v.map(function(it){return r[it.key]}):r[v.key];t=((ref$=(ref1$=this$.mod).dimension||(ref1$.dimension={}))[k]||(ref$[k]={})).type;if(/[RIT]/.exec(t)&&!/[CN]/.exec(t)){return ret[k]=Array.isArray(ret[k])?ret[k].map(function(it){return parseFloat(it)}):parseFloat(ret[k])}});ret._raw=r;ret._idx=i;return ret});if(this.mod.parse){return this.mod.parse.apply(this)}},bind:function(){if(this.mod.bind){return this.mod.bind.apply(this)}},start:function(){this._aniloop.run();if(this.mod.start){return this.mod.start.apply(this)}},stop:function(){this._aniloop.pause();if(this.mod.stop){return this.mod.stop.apply(this)}},resize:function(){if(this.layout){this.layout.update(false)}this.box=this.root.getBoundingClientRect();if(this.mod.resize){return this.mod.resize.apply(this)}},tick:function(){if(this.mod.tick){return this.mod.tick.apply(this)}},render:function(){if(this.mod.render){return this.mod.render.apply(this)}},destroy:function(){var this$=this;return Promise.resolve().then(function(){if(this$._select){this$.root.removeEventListener("click",this$._select)}if(this$._hover){this$.root.removeEventListener("mouseover",this$._hover)}resizeObserver["delete"](this$.root);if(this$.layout){this$.layout.destroy()}this$.stop();if(this$.mod.destroy){return this$.mod.destroy.apply(this$)}})},config:function(opt){if(!(opt!=null&&opt)){return this.cfg}return import$(this.cfg,opt)},setBind:function(n,b){this.binding[n]=b;this.parse();this.bind();this.resize();return this.render()},setRaw:function(raw,binding,reinit){var ref$;reinit==null&&(reinit=false);if(!Array.isArray(raw)){ref$=raw,raw=ref$.raw,binding=ref$.binding,reinit=ref$.reinit}if(raw!=null){this.raw=raw}if(binding!=null){this.binding=binding}if(this.renderLock){this.renderLock.resolve();return this.renderLock=null}else{if(reinit&&this.mod.init){this.mod.init.apply(this)}this.parse();this.bind();this.resize();return this.render()}},on:function(n,cb){var this$=this;return(Array.isArray(n)?n:[n]).map(function(n){var ref$;return((ref$=this$.evtHandler)[n]||(ref$[n]=[])).push(cb)})},fire:function(n){var v,res$,i$,to$,ref$,len$,cb,results$=[];res$=[];for(i$=1,to$=arguments.length;i$<to$;++i$){res$.push(arguments[i$])}v=res$;for(i$=0,len$=(ref$=this.evtHandler[n]||[]).length;i$<len$;++i$){cb=ref$[i$];results$.push(cb.apply(this,v))}return results$},filter:function(filters,internal){var bs,k,ref$,v,u;filters==null&&(filters={});internal==null&&(internal=false);bs=[];for(k in ref$=this.binding){v=ref$[k];u=Array.isArray(v)?v:[v];u=u.map(fn$);bs=bs.concat(u)}for(k in filters){v=filters[k];bs.filter(fn1$).map(fn2$)}if(internal){this.fire("filter",filters)}if(this.mod.filter){this.mod.filter.apply(this,[filters,internal])}this.parse();this.bind();this.resize();return this.render();function fn$(v){return{k:k,v:v}}function fn1$(it){return it.k===k}function fn2$(it){return it.v.filter=v}}});if(typeof module!="undefined"&&module!==null){module.exports=chart}else if(typeof window!="undefined"&&window!==null){window.chart=chart}function import$(obj,src){var own={}.hasOwnProperty;for(var key in src)if(own.call(src,key))obj[key]=src[key];return obj}}).call(this);

package/package.json

@@ -3,7 +3,7 @@
   "name": "@plotdb/chart",
   "license": "MIT",
   "description": "plotdb charts",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/plotdb/chart",
   "repository": {
     "type": "git",
@@ -21,15 +21,18 @@
     "@loadingio/bootstrap.ext": "^0.0.1",
     "@loadingio/ldquery": "^2.2.0",
     "@loadingio/loading.css": "^2.0.1",
+    "@loadingio/vscroll": "^0.0.6",
     "@plotdb/layout": "^0.0.10",
     "@plotdb/pdmap-world": "^0.0.3",
     "@plotdb/sheet": "^0.1.7",
+    "bootstrap.native": "^3.0.15",
     "@zbryikt/template": "^2.3.22",
     "bootstrap": "^4.5.2",
     "fedep": "^0.0.16",
     "ldloader": "^2.0.1",
     "ldview": "^0.2.3",
     "livescript": "^1.6.0",
+    "pdmaptw": "0.0.4",
     "uglify-js": "^3.2.0",
     "uglifycss": "^0.0.29"
   },
@@ -37,11 +40,13 @@
     "root": "web/static/assets/lib",
     "modules": [
       "bootstrap",
+      "bootstrap.native",
       "@loadingio/bootstrap.ext",
       "@loadingio/ldquery",
       "@loadingio/loading.css",
       "@loadingio/ldcolorpicker",
       "@loadingio/debounce.js",
+      "@loadingio/vscroll",
       "@plotdb/pdmap-world",
       "@plotdb/block",
       "@plotdb/csscope",
@@ -51,6 +56,7 @@
       "@plotdb/konfig",
       "@zbryikt/voronoijs",
       "choosefont.js",
+      "pdmaptw",
       "proxise",
       "ldloader",
       "ldcover",
@@ -64,20 +70,20 @@
   "dependencies": {
     "@loadingio/debounce.js": "^0.0.1",
     "@loadingio/ldcolorpicker": "^2.0.4",
-    "@plotdb/block": "^2.1.0",
-    "@plotdb/csscope": "^2.0.0",
-    "@plotdb/konfig": "^1.2.5",
-    "@plotdb/rescope": "^3.0.0",
+    "@plotdb/block": "^3.0.1",
+    "@plotdb/csscope": "^3.0.1",
+    "@plotdb/konfig": "^2.0.2",
+    "@plotdb/rescope": "^4.0.2",
     "@zbryikt/voronoijs": "^0.0.1",
     "choosefont.js": "^0.0.1",
     "ldcolor": "^0.0.4",
     "ldcover": "^2.0.0",
     "ldpalettepicker": "^3.1.3",
     "ldslider": "^2.0.6",
-    "proxise": "^0.1.3",
+    "proxise": "^0.1.6",
     "wrap-svg-text": "^0.0.6"
   },
   "peerDependencies": {
-    "proxise": "^0.1.2"
+    "proxise": "^0.1.6"
   }
 }

package/src/chart.ls

@@ -167,13 +167,16 @@ chart.prototype = Object.create(Object.prototype) <<< do
     visibilityObserver.add @_aniloop
     @_aniloop.on \tick, ~> @tick!
     p = Promise.resolve!
-      .then ~>
-        if @raw and Array.isArray(@raw) => return
-        if @use-sample => @ <<< (if @mod.sample => @mod.sample! or {} else {}){raw, binding}
-        if !@raw => @raw = []
       .then ~>
         defcfg = default-config(@mod.config or {})
         with-default @cfg, defcfg
+        if @raw and Array.isArray(@raw) => return
+        if !@use-sample or !@mod.sample => return
+        ret = @mod.sample.apply @
+        return if ret.then => ret.then! else Promise.resolve ret
+      .then ~> @ <<<(it or {}){raw, binding}
+      .then ~>
+        if !@raw => @raw = []
         if @layout-opt =>
           if !(layout?) => console.warn "[@plotdb/chart] layout-opt is set yet @plotdb/layout is not found."
           else

package/web/src/pug/base.pug

@@ -7,12 +7,13 @@ html
   head
     block prehead
     +css("/assets/lib/bootstrap/main/css/bootstrap.min.css")
-    +css("/assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css")
+    +css("/assets/lib/@loadingio/bootstrap.ext/main/index.min.css")
     +css("/assets/lib/@loadingio/loading.css/main/loading.min.css")
     +css("/css/index.css")
     block head
   body
     block body
+    +script("/assets/lib/bootstrap.native/main/bootstrap-native-v4.min.js")
     +script("https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver")
     +script("/assets/lib/@loadingio/ldquery/main/ldq.min.js")
     +script("/assets/lib/ldview/main/index.min.js")

package/web/src/pug/block/line/0.0.1/index.ls

@@ -18,15 +18,19 @@ mod = ({context, t}) ->
   {d3,chart,axis,format} = context
   sample-count = 4
   sample: ->
-    raw: [0 to 100].map (val) ~>
+    raw: [0 to 30].map (val) ~>
       ret = {}
-      [1 to sample-count].map (i) -> ret["val#i"] = Math.random! * (10 - Math.abs(10 - val)) + val
+      [1 to sample-count].map (i) -> ret["val#i"] = (i * Math.random! * (10 - Math.abs(10 - val)) + val) >? 0
       ret.order = val
       ret
     binding:
       value: [1 to sample-count].map -> {key: "val#it"}
       order: {key: \order}
-  config: {}
+  config:
+    mode: type: \choice, values: <[line area streamgraph bump]>, default: \line
+    stack: type: \boolean
+    line: type: \choice, values: <[curve linear]>, default: \linear
+    show-dot: type: \boolean, default: true
   dimension:
     value: {type: \R, name: "y axis", multiple: true}
     order: {type: \ON, name: "x axis"}
@@ -39,7 +43,6 @@ mod = ({context, t}) ->
         !isNaN(it.y1)
       .x ~> @scale.x it.x
       .y ~> @scale.y it.y1
-      #.curve d3.curveCatmullRom
     @area = d3.area!
       .defined ~>
         !isNaN(it.y1) and !isNaN(it.y0)
@@ -107,7 +110,7 @@ mod = ({context, t}) ->
     binds = @binding.value.map((b,i) -> {b, i}).filter (d,i) ~> @legend.is-selected d.b.key
 
     # if bump
-    if @cfg.bump =>
+    if @cfg.mode == \bump =>
       @parsed = []
       dd = @data.map (d) ~>
         ret = {} <<< d
@@ -123,13 +126,45 @@ mod = ({context, t}) ->
         ret.original-value = v.map -> it.v
         ret
 
+    dd = dd or @data
+
+    if @cfg.mode == \streamgraph =>
+      sums = dd.map (d) ->
+        sum = 0
+        for i from 0 til d.value.length => sum += d.value[i]
+        sum
+      [smin, smax] = [Math.min.apply(Math, sums), Math.max.apply(Math, sums)]
+    else
+      [sums, smin, smax] = [dd.map(-> 0), 0, 0]
+    @parsed = []
+    line0 = dd.map -> 0
+    for i from 0 til binds.length =>
+      [p,b] = [(if i > 0 => binds[i - 1] else null), binds[i]]
+      line1 = dd.map (d,j) -> d.value[b.i] + line0[j]
+      @parsed.push {
+        pts: (dd or @data).map (d,j) ->
+          data: d
+          y0: line0[j] - (sums[j] / 2) + (smax - smin) / 2
+          y1: line1[j] - (sums[j] / 2) + (smax - smin) / 2
+          x: d._order
+          v: if d.original-value => d.original-value[i] else d.value[i]
+        bind: b.b
+        color: b.b.name or b.b.key
+      }
+      if (@cfg.stack and @cfg.mode != \bump) or (@cfg.mode in <[streamgraph area]>) => line0 = line1
+    /*
     @parsed = binds.map (b,i) ~>
       pts: (dd or @data).map (d,j) ->
-        {data: d, y0: 0, y1: d.value[b.i], x: d._order, v: if d.original-value => d.original-value[i] else d.value[i]}
+        data: d
+        y0: 0
+        y1: d.value[b.i]
+        x: d._order
+        v: if d.original-value => d.original-value[i] else d.value[i]
       bind: b.b
       color: b.b.name or b.b.key
-
+    */
     # if stacked
+    /*
     if @cfg.stack =>
       ys = @data.map -> it.value.reduce(((a,b)-> a + b),0)
       @parsed = []
@@ -144,8 +179,10 @@ mod = ({context, t}) ->
             v: if d.original-value => d.original-value[i] else d.value[i]
           bind: b
           color: b.name or b.key
-
+    */
   resize: ->
+    @line.curve if @cfg.line == \curve => d3.curveCatmullRom else d3.curveLinear
+    @area.curve if @cfg.line == \curve => d3.curveCatmullRom else d3.curveLinear
     @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
     [miny,maxy] = [0,0]
     for i from 0 til @parsed.length =>
@@ -158,14 +195,14 @@ mod = ({context, t}) ->
 
     @extent =
       x: d3.extent @data, -> (it._order)
-      y: [(if @cfg.bump => miny >? 1 else miny), if maxy == miny => miny + 1 else maxy]
+      y: [(if @cfg.mode == \bump => miny >? 1 else miny), if maxy == miny => miny + 1 else maxy]
 
     @scale.x.domain @extent.x
-    @scale.y.domain (if @cfg.bump => [@extent.y.1, @extent.y.0] else @extent.y)
+    @scale.y.domain (if @cfg.mode == \bump => [@extent.y.1, @extent.y.0] else @extent.y)
 
     [w,h] = [@box.width, @box.height]
     max-tick = Math.ceil(@layout.get-box \yaxis .height / 40) >? 2
-    yticks = if @cfg.bump => [1 to ((@parsed.length or 1) >? 1)]
+    yticks = if @cfg.mode == \bump => [1 to ((@parsed.length or 1) >? 1)]
     else @scale.y.ticks((@cfg.{}yaxis.tick-count or 4) <? max-tick)
     yfmt = chart.utils.format.auto yticks
 
@@ -175,7 +212,7 @@ mod = ({context, t}) ->
     @yaxis.config @cfg.yaxis
     @yaxis.ticks yticks
     @yaxis.scale @scale.y
-    if @cfg.bump =>
+    if @cfg.mode == \bump =>
       @yaxis.caption t \rank
     else
       if @parsed.length > 1 =>
@@ -217,7 +254,7 @@ mod = ({context, t}) ->
       ..enter!append \path .attr \class, \data
         .attr \fill, \none
         .attr \d, (d,i) ~>
-          if @cfg.stack or @cfg.area => @area d.pts
+          if @cfg.mode in <[streamgraph area]> => @area d.pts
           else @line d.pts
         .attr \stroke, (d,i) ~> @tint.get d.color
         .attr \stroke-width, 1
@@ -225,12 +262,12 @@ mod = ({context, t}) ->
       .transition!duration 150
       .style \opacity, (d,i) ~> if @legend.is-selected(d.bind.key) => 1 else 0.3
       .attr \d, (d,i) ~>
-        if @cfg.stack or @cfg.area => @area d.pts
+        if @cfg.mode in <[streamgraph area]> => @area d.pts
         else @line d.pts
       .attr \stroke, (d,i) ~> @tint.get d.color
-      .attr \fill, (d,i) ~> if @cfg.stack or @cfg.area => @tint.get(d.color) else \none
+      .attr \fill, (d,i) ~> if @cfg.mode in <[streamgraph area]> => @tint.get(d.color) else \none
       .attr \fill-opacity, ~> \0.5
-    @g.view.selectAll \g.dot .data(@parsed, -> it.bind.key)
+    @g.view.selectAll \g.dot .data((if @cfg.show-dot => @parsed else []), -> it.bind.key)
       ..exit!remove!
       ..enter!append \g .attr \class, \dot
     @g.view.selectAll \g.dot

package/web/src/pug/block/taiwancounty/0.0.1/index.ls

@@ -0,0 +1,74 @@
+<-(->it!) _
+
+block-factory =
+  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: ({root, context, pubsub}) ->
+    pubsub.fire \init, mod: mod {context} .then ~> it.0
+
+mod = ({context}) ->
+  {chart, d3, ldcolor, pdmaptw, topojson} = context
+  sample: ->
+    pdmaptw.get('county').then ({meta, topo}) ->
+      raw: meta.name.map -> {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: ->
+    @g = @layout.get-group \view
+    @obj = new pdmaptw {root: @g, type: \county}
+    @scale = scale = {color: d3.interpolateTurbo}
+    @legend = new chart.utils.legend do
+      root: @root
+      name: \legend
+      layout: @layout
+      shape: (d) -> d3.select(@).attr \fill, scale.color d.key
+    @tip = new chart.utils.tip {
+      root: @root,
+      accessor: ({evt}) ~>
+        if !(evt.target and data = d3.select(evt.target).datum!) => return null
+        return {name: data.data.name, value: data.data.color}
+      range: ~> return @layout.get-node \view .getBoundingClientRect!
+    }
+    @obj.init!then ~> @obj.fit {node: @g, box: @layout.get-node(\view).getBoundingClientRect!}
+
+  parse: ->
+    @extent = c: [undefined, undefined]
+    d3.select @svg .selectAll \path .each (d,i) ~>
+      d.data = @data.filter(-> it.name == d.properties.name).0 or {}
+      if !(@extent.c.0?) or d.data.color < @extent.c.0 => @extent.c.0 = d.data.color
+      if !(@extent.c.1?) or d.data.color > @extent.c.1 => @extent.c.1 = d.data.color
+
+  resize: ->
+    @tip.toggle(if @cfg.{}tip.enabled? => @cfg.tip.enabled else true)
+    @obj.fit @layout.get-box \view
+    pal = if @cfg.palette => @cfg.palette.colors else <[#f00 #999 #00f]>
+    len = pal.length
+    @ticks = d3.quantize((~> (1 - it) * (@extent.c.1 - @extent.c.0) + @extent.c.0), len).map ~>
+      {key: it, text: d3.format(@cfg.legend-format or '.2f')(it) + (if @binding.color.unit => that else '')}
+    @ticks.sort (a,b) -> a.key - b.key
+    if @cfg.palette =>
+      @scale.color = d3.scaleLinear!
+        .domain @ticks.map(-> it.key)
+        .range pal.map -> ldcolor.web(it.value or it)
+    @legend.data @ticks
+    @obj.fit {node: @g, box: @layout.get-box(\view)}
+
+  render: ->
+    d3.select @svg .selectAll \path
+      .transition!duration 350
+      .attr \fill, (d,i) ~> @scale.color d.data.color
+      .attr \fill-opacity, (d,i) ~> if @cfg.dim-empty => (if d.data.color? => 1 else 0.2) else 1
+    @legend.render!
+
+return block-factory

package/web/src/pug/block/taiwancounty/0.0.1/index.pug

@@ -0,0 +1,64 @@
+div
+  div(plug="layout")
+    .pdl-layout
+      div(data-type="layout")
+        .pdl-cell(data-name="view")
+        .pdl-cell(data-name="legend") 123
+      div(data-type="render")
+  style(type="text/css"): :stylus
+    .pdl-layout > div[data-type=layout]
+      display: grid
+      grid-template-columns: 1fr fit-content(5em)
+  script(type="@plotdb/block"): include:lsc index.ls
+
+
+//-div: script(type="@plotdb/block"): :lsc
+  {
+    pkg:
+      name: 'taiwantown', version: '0.0.1'
+      dependencies: [
+        {url: "https://d3js.org/d3.v4.js", async: false}
+        "https://d3js.org/d3-format.v2.min.js"
+        "https://d3js.org/d3-array.v2.min.js"
+        "https://d3js.org/topojson.v2.min.js"
+        {url: "https://d3js.org/d3-color.v1.min.js", async: false}
+        {url: "https://d3js.org/d3-interpolate.v1.min.js", async: false}
+        {url: "https://d3js.org/d3-scale-chromatic.v1.min.js", async: false}
+        "/js/map.list.js"
+        "https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist/pdmaptw.min.js"
+      ]
+    init: ({root, context}) ->
+      counties = context.counties.map (d,i) -> {val: Math.random!, county: d}
+      towns = context.towns.map (d,i) -> {val: Math.random!, town: d}
+      c = new chart do
+        root: root
+        raw: towns
+        mod: @mod({context})
+        binding: do
+          color: {name: \val}
+          name: {name: \town}
+      c.init!then -> c.render!
+      @c = c
+
+    interface: -> @c
+
+    mod: ({context}) ->
+      return do
+        init: ->
+          @obj = context.pdmaptw.create do
+            root: @svg
+            type: \town
+            baseurl: 'https://cdn.jsdelivr.net/npm/pdmaptw@0.0.2/dist'
+          @obj.init!then ~> @obj.fit!
+        parse: ->
+          d3.select @svg .selectAll \path .each (d,i) ~>
+            d.data = @data.filter(-> it.name == d.properties.name).0 or {}
+        resize: -> #@obj.fit!
+        render: ->
+          @color = d3.interpolateTurbo
+          if config.pal => @color = d3.interpolateDiscrete config.pal
+          d3.select @svg .selectAll \path
+            .transition!duration 350
+            .attr \fill, (d,i) ~> @color d.data.color
+
+  }

package/web/src/pug/block/worldmap/0.0.1/index.ls

@@ -55,7 +55,6 @@ mod = ({context}) ->
       .filter -> it.c
       .map -> it.c <<< {value: it.v.color, data: it.v}
     geo-data.map (d) -> d.data = d.properties.data or {}
-
     @extent = c: d3.extent(geo-data, -> it.properties.value)
 
   resize: ->
@@ -74,7 +73,6 @@ mod = ({context}) ->
 
   render: ->
     @legend.render!
-
     d3.select @g .selectAll \path
       .transition!duration 350
       .attr \fill, (d,i) ~> @scale.color d.properties.value

package/web/src/pug/index.pug

@@ -41,12 +41,11 @@ block script
   +script("https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver")
   +script("/assets/lib/proxise/main/proxise.js")
   +script("/assets/lib/@loadingio/debounce.js/main/debounce.min.js")
-  +script("/assets/lib/@plotdb/csscope/main/csscope.js")
-  +script("/assets/lib/@plotdb/rescope/main/rescope.js")
-  +script("/assets/lib/@plotdb/block/main/block.js")
-  +script("/assets/lib/@plotdb/konfig/main/konfig.js")
+  +script("/assets/lib/@plotdb/csscope/main/index.min.js")
+  +script("/assets/lib/@plotdb/rescope/main/index.min.js")
+  +script("/assets/lib/@plotdb/block/main/index.min.js")
+  +script("/assets/lib/@plotdb/konfig/main/index.min.js")
   +script("/assets/lib/@plotdb/konfig/main/konfig.widget.bootstrap.js")
   +script("/assets/lib/ldpalettepicker/main/ldpp.min.js")
   +script("/assets/lib/ldpalettepicker/main/all.palettes.js")
-  //+script("/assets/block/cache.js")
   script: include:lsc index.ls