@plotdb/chart 2.1.32 → 2.1.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/package.json +1 -1
- package/utils/config.js +12 -0
- package/utils/config.min.js +1 -1
- package/utils/legend.css +9 -0
- package/utils/legend.js +27 -2
- package/utils/legend.min.css +1 -1
- package/utils/legend.min.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Change Logs
|
|
2
2
|
|
|
3
|
+
## v2.1.34
|
|
4
|
+
|
|
5
|
+
- reset legend container height explicitly in horizontal direction to prevent side effect
|
|
6
|
+
after config updated from vertical direction
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## v2.1.33
|
|
10
|
+
|
|
11
|
+
- `line` chart: use default 0 with `cutoff` to prevent NaN when rendering
|
|
12
|
+
- chart.utils.legend
|
|
13
|
+
- add sort.direction and sort.mode option for legend sorting feature,
|
|
14
|
+
which providing more consistent result and simpler chart implementation
|
|
15
|
+
- programmatically update legend container height in vertical layout direction
|
|
16
|
+
for resolving potential layout issue in grid container
|
|
17
|
+
|
|
18
|
+
|
|
3
19
|
## v2.1.32
|
|
4
20
|
|
|
5
21
|
- gracefully fails when @plotdb/konfit font widget is not found with warning message, in base block
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"zbryikt","name":"@plotdb/chart","license":"MIT","description":"plotdb charts","style":"index.min.css","browser":"index.min.js","main":"index.min.js","version":"2.1.
|
|
1
|
+
{"author":"zbryikt","name":"@plotdb/chart","license":"MIT","description":"plotdb charts","style":"index.min.css","browser":"index.min.js","main":"index.min.js","version":"2.1.34","homepage":"https://github.com/plotdb/chart","repository":{"type":"git","url":"https://github.com/plotdb/chart"},"engines":{"node":">=10.14.1","npm":">=6.4.1"},"scripts":{"start":"npx server -r web -o true -p 3457"},"devDependencies":{"@loadingio/bootstrap.ext":"^0.0.9","@loadingio/ldquery":"^3.0.4","@loadingio/loading.css":"^3.1.0","@loadingio/vscroll":"^0.0.11","@plotdb/layout":"^0.0.12","@plotdb/pdmap-world":"^0.0.5","@plotdb/semver":"^0.0.3","@plotdb/sheet":"^0.5.8","@xlfont/choose":"^0.0.16","@xlfont/load":"^2.1.2","@zbryikt/template":"^2.3.45","bootstrap":"^4.6.1","bootstrap.native":"^3.0.15","fedep":"^1.1.11","jsdom":"^22.1.0","ldbutton":"^2.0.1","ldfile":"^2.0.1","ldiconfont":"^0.2.4","ldloader":"^3.0.2","ldview":"^1.4.0","livescript":"^1.6.0","pdmaptw":"2.2.1","uglify-js":"^3.13.1","uglifycss":"^0.0.29","zmgr":"^2.2.3"},"frontendDependencies":{"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","@plotdb/rescope","@plotdb/layout","@plotdb/sheet","@plotdb/konfig","@plotdb/semver","@xlfont/choose","@xlfont/load","@zbryikt/voronoijs","d3","d3-array","d3-axis","d3-brush","d3-color","d3-dispatch","d3-drag","d3-ease","d3-force","d3-force-boundary","d3-format","d3-hierarchy","d3-interpolate","d3-path","d3-quadtree","d3-random","d3-scale-chromatic","d3-selection","d3-shape","d3-timer","d3-transition","choosefont.js","pdmaptw","proxise","ldiconfont","ldloader","ldbutton","ldcover","ldcolor","ldfile","ldslider","wrap-svg-text","ldpalettepicker","zmgr","ldview"]},"dependencies":{"@loadingio/debounce.js":"^1.0.1","@loadingio/ldcolorpicker":"^3.0.5","@plotdb/block":"^5.2.2","@plotdb/csscope":"^5.0.3","@plotdb/konfig":"^4.8.12","@plotdb/rescope":"^5.0.9","@zbryikt/voronoijs":"^1.0.0","choosefont.js":"^0.0.1","d3":"^4.13.0","d3-array":"^3.1.1","d3-axis":"^3.0.0","d3-brush":"^3.0.0","d3-color":"^3.1.0","d3-dispatch":"^3.0.1","d3-drag":"^3.0.0","d3-ease":"^3.0.1","d3-force":"^3.0.0","d3-force-boundary":"^0.0.2","d3-format":"^3.1.0","d3-hierarchy":"^3.1.1","d3-interpolate":"^3.0.1","d3-path":"^3.0.1","d3-quadtree":"^3.0.1","d3-random":"^3.0.1","d3-scale-chromatic":"^3.0.0","d3-selection":"^3.0.0","d3-shape":"^3.1.0","d3-timer":"^3.0.1","d3-transition":"^3.0.1","ldcolor":"^1.1.0","ldcover":"^3.5.1","ldpalettepicker":"^4.0.4","ldslider":"^3.1.1","proxise":"^1.0.1","wrap-svg-text":"^0.0.7"}}
|
package/utils/config.js
CHANGED
|
@@ -94,6 +94,18 @@
|
|
|
94
94
|
type: 'choice',
|
|
95
95
|
values: ['bottom', 'right'],
|
|
96
96
|
'default': 'right'
|
|
97
|
+
},
|
|
98
|
+
sort: {
|
|
99
|
+
direction: {
|
|
100
|
+
type: 'choice',
|
|
101
|
+
values: ['asc', 'desc'],
|
|
102
|
+
'default': 'desc'
|
|
103
|
+
},
|
|
104
|
+
mode: {
|
|
105
|
+
type: 'choice',
|
|
106
|
+
values: ['label', 'value', 'none'],
|
|
107
|
+
'default': 'value'
|
|
108
|
+
}
|
|
97
109
|
}
|
|
98
110
|
},
|
|
99
111
|
axis: {
|
package/utils/config.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){var e;e={from:function(e){var
|
|
1
|
+
!function(){var e;e={from:function(e){var l=this,r=function(e,t){var a,o;for(a in t.preset&&function(e,t){var a,o={}.hasOwnProperty;for(a in t)o.call(t,a)&&(e[a]=t[a])}(e,JSON.parse(JSON.stringify(l.preset[t.preset]))),t)o=t[a],"preset"!==a&&("string"==typeof o?e[a]=JSON.parse(JSON.stringify(l.preset[o]))||{}:r(e[a]||(e[a]={}),o));return e};return r({},e)},preset:{default:{margin:{type:"number"},font:e={family:{type:"font"},size:{type:"quantity",default:"1em",units:[{name:"em",max:10,step:.01,default:1},{name:"px",max:256,step:1,default:16}]}},color:{type:"color",default:"currentColor"},palette:{type:"palette"},background:{type:"color",default:"transparent"}},font:e,tip:{enabled:{type:"boolean",default:!0},format:{type:"format",default:".3s"}},label:{format:{type:"format",default:".3s"}},legend:{selectable:{type:"boolean",default:!0},enabled:{type:"boolean",default:!0},position:{type:"choice",values:["bottom","right"],default:"right"},sort:{direction:{type:"choice",values:["asc","desc"],default:"desc"},mode:{type:"choice",values:["label","value","none"],default:"value"}}},axis:{enabled:{type:"boolean",default:!0},tick:{inner:{type:"number",name:"Inner Tick Size",default:8,min:0,max:40,step:.1},color:{type:"color",default:"currentColor"},count:{type:"number",default:4,min:1,max:40},boundaryOffset:{type:"boolean",default:!0}},baseline:{show:{type:"boolean",default:!0},color:{type:"color",default:"currentColor"}},label:{color:{type:"color",default:"currentColor"},format:{type:"format",default:".3s"},direction:{type:"choice",default:"horizontal",values:["horizontal","vertical"]},padding:{type:"number",default:1,min:0,max:100,step:.5},font:e},caption:{color:{type:"color",default:"currentColor"},text:{type:"text",default:""},show:{type:"boolean",default:!0},padding:{type:"number",default:1,min:0,max:100,step:.5},font:e}}}},"undefined"!=typeof chart&&null!==chart&&((chart.utils||(chart.utils={})).config=e)}.call(this);
|
package/utils/legend.css
CHANGED
|
@@ -33,6 +33,15 @@
|
|
|
33
33
|
.pdlg.vertical > div {
|
|
34
34
|
margin-bottom: 0.5em;
|
|
35
35
|
}
|
|
36
|
+
.pdlg.vertical {
|
|
37
|
+
flex-direction: row;
|
|
38
|
+
writing-mode: vertical-lr;
|
|
39
|
+
text-orientation: upright;
|
|
40
|
+
height: 100%;
|
|
41
|
+
}
|
|
42
|
+
.pdlg.vertical > div {
|
|
43
|
+
writing-mode: horizontal-tb;
|
|
44
|
+
}
|
|
36
45
|
.pdlg.horizontal > div {
|
|
37
46
|
margin-right: 0.5em;
|
|
38
47
|
}
|
package/utils/legend.js
CHANGED
|
@@ -61,7 +61,24 @@
|
|
|
61
61
|
handler: {
|
|
62
62
|
legend: {
|
|
63
63
|
list: function(){
|
|
64
|
-
|
|
64
|
+
var ret, opt, dir;
|
|
65
|
+
ret = this$._data.map(function(it){
|
|
66
|
+
return it;
|
|
67
|
+
});
|
|
68
|
+
opt = this$.cfg.sort || {};
|
|
69
|
+
if (opt.mode !== 'none') {
|
|
70
|
+
dir = opt.direction === 'desc'
|
|
71
|
+
? 1
|
|
72
|
+
: -1;
|
|
73
|
+
ret.sort(function(a, b){
|
|
74
|
+
return opt.mode === 'value'
|
|
75
|
+
? dir * (b.value - a.value)
|
|
76
|
+
: dir * (a.text < b.text
|
|
77
|
+
? 1
|
|
78
|
+
: a.text > b.text ? -1 : 0);
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
return ret.concat(this$.cfg.selectable
|
|
65
82
|
? this$._func
|
|
66
83
|
: []);
|
|
67
84
|
},
|
|
@@ -179,13 +196,21 @@
|
|
|
179
196
|
return this._data && this._data.length && (!(this.cfg.enabled != null) || this.cfg.enabled);
|
|
180
197
|
},
|
|
181
198
|
update: function(){
|
|
182
|
-
var val, ref
|
|
199
|
+
var val, ref$, node;
|
|
183
200
|
val = this.enabled() ? '' : '0px';
|
|
184
201
|
ref$ = this.layout.getNode(this.name).style;
|
|
185
202
|
ref$.width = val;
|
|
186
203
|
ref$.height = val;
|
|
187
204
|
ref$.padding = val;
|
|
188
205
|
ref$.margin = val;
|
|
206
|
+
node = this.layout.getNode(this.name).querySelector('.pdlg');
|
|
207
|
+
if (node) {
|
|
208
|
+
if (this.dir === 'vertical') {
|
|
209
|
+
node.style.height = getComputedStyle(node.parentNode).height;
|
|
210
|
+
} else {
|
|
211
|
+
node.style.height = '';
|
|
212
|
+
}
|
|
213
|
+
}
|
|
189
214
|
return this.view.layout.render();
|
|
190
215
|
},
|
|
191
216
|
render: function(){
|
package/utils/legend.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pdlg{height:100%;width:100%;display:flex;align-items:start;justify-content:center;flex-wrap:wrap}.pdlg>div{display:flex;align-items:center;line-height:1em}.pdlg>div [ld=shape]{display:inline-block;width:1em;height:1em;margin-right:.5em;background:#999;flex:0 0 auto;line-height:1em}.pdlg>div [ld=text]{color:#999;padding-right:.25em;line-height:1.2em;white-space:pre}.pdlg.vertical{flex-direction:column;align-items:start}.pdlg.vertical>div{margin-bottom:.5em}.pdlg.horizontal>div{margin-right:.5em}g.pdlg-g{cursor:pointer;transition:opacity .15s ease-in-out}
|
|
1
|
+
.pdlg{height:100%;width:100%;display:flex;align-items:start;justify-content:center;flex-wrap:wrap}.pdlg>div{display:flex;align-items:center;line-height:1em}.pdlg>div [ld=shape]{display:inline-block;width:1em;height:1em;margin-right:.5em;background:#999;flex:0 0 auto;line-height:1em}.pdlg>div [ld=text]{color:#999;padding-right:.25em;line-height:1.2em;white-space:pre}.pdlg.vertical{flex-direction:column;align-items:start}.pdlg.vertical>div{margin-bottom:.5em}.pdlg.vertical{flex-direction:row;writing-mode:vertical-lr;text-orientation:upright;height:100%}.pdlg.vertical>div{writing-mode:horizontal-tb}.pdlg.horizontal>div{margin-right:.5em}g.pdlg-g{cursor:pointer;transition:opacity .15s ease-in-out}
|
package/utils/legend.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){var
|
|
1
|
+
!function(){var o,t;o="http://www.w3.org/2000/svg",(t=function(a){var t,e,n,i,l=this;return null==a&&(a={}),this._data=a.data||[],this.name=a.name||"legend",this.cfg=a.cfg||{},this.root="string"==typeof a.root?document.querySelector(a.root):a.root,this.dir=a.direction||"vertical",this.evtHandler={},this._picked=Object.fromEntries(this._data.map(function(t){return[t.key,!0]})),this.layout=a.layout||new layout({root:this.root}),(n=this.layout).on("update",function(){return l.update()}),n.on("render",function(){return l.render()}),this.id=Math.random().toString(36).substring(2),i=this.layout.getNode(this.name),t=this.layout.getGroup(this.name),i.querySelector("[ld-each=legend]")||(i.innerHTML='<div class="pdlg '+this.dir+'">\n <div ld-each="legend">\n <div class="pdl-cell" ld="shape" data-only></div>\n <div class="pdl-cell" ld="text" data-only></div>\n </div>\n</div>'),t.querySelector("[ld-each=legend]")||(e=document.createElementNS(o,"g"),n=document.createElementNS(o,"g"),i=document.createElementNS(o,"g"),e.classList.add("pdlg-g"),e.setAttribute("ld-each","legend"),n.setAttribute("ld","shape"),i.setAttribute("ld","text"),e.appendChild(n),e.appendChild(i),t.appendChild(e)),this._func=[{key:"all",type:"func",text:"全選"},{key:"none",type:"func",text:"全不選"}],this.view={layout:new ldview({root:this.layout.getNode(this.name),initRender:!1,handler:{legend:{list:function(){var n,t=l._data.map(function(t){return t}),i=l.cfg.sort||{};return"none"!==i.mode&&(n="desc"===i.direction?1:-1,t.sort(function(t,e){return"value"===i.mode?n*(e.value-t.value):n*(t.text<e.text?1:t.text>e.text?-1:0)})),t.concat(l.cfg.selectable?l._func:[])},key:function(t){return t.key},view:{handler:{shape:function(t){var e=t.node,t=t.ctx;return e.setAttribute("data-name",l._name(t,"shape"))},text:function(t){var e=t.node,t=t.ctx;return e.setAttribute("data-name",l._name(t,"text")),e.innerText=t.text}}}}}}),render:new ldview({root:this.layout.getGroup(this.name),initRender:!1,handler:{legend:{list:function(){return l._data.concat(l.cfg.selectable?l._func:[])},key:function(t){return t.key},view:{action:{click:{"@":function(t){t.node;var e,n=t.ctx;if(l.cfg.selectable){if("func"===n.type)for(e in l._picked)l._picked[e]="all"===n.key;else l._picked[n.key]=!l._picked[n.key];return l.view.render.render("legend"),l.fire("select",l._picked)}}}},handler:{"@":function(t){var e=t.node,t=t.ctx;return e.style.opacity=!l.cfg.selectable||"func"===t.type||l._picked[t.key]?1:.3},shape:function(t){var e,n,i=t.node,r=t.ctx;if("func"!==r.type)return i.querySelector("circle")||i.appendChild(document.createElementNS(o,"circle")),e=i.querySelector("circle"),n=l.layout.getBox(l._name(r,"shape")),t=l.layout.getBox(l.name),e.setAttribute("cx",".5em"),e.setAttribute("cy",".5em"),e.setAttribute("r",".5em"),e.setAttribute("transform","translate("+(n.x-t.x)+", "+(n.y-t.y)+")"),"function"==typeof a.shape?a.shape.call(e,r):void 0;i.style.display="none"},text:function(t){var e=t.node,n=t.ctx,i=l.layout.getNode(l._name(n,"text")),t=l.layout.getBox(l._name(n,"text")),n=l.layout.getBox(l.name);return e.setAttribute("transform","translate("+(t.x-n.x)+", "+(t.y-n.y)+")"),e.textContent="",i=wrapSvgText({node:i,useRange:!0}),e.appendChild(i)}}}}}})},this.update(),this}).prototype=function(t,e){var n,i={}.hasOwnProperty;for(n in e)i.call(e,n)&&(t[n]=e[n]);return t}(Object.create(Object.prototype),{_name:function(t,e){return"pdlg-"+(e=null==e?"s":e)+"-"+this.id+"-"+(t.type||"")+"-"+t.key},enabled:function(){return this._data&&this._data.length&&(!(null!=this.cfg.enabled)||this.cfg.enabled)},update:function(){var t=this.enabled()?"":"0px",e=this.layout.getNode(this.name).style;return e.width=t,e.height=t,e.padding=t,e.margin=t,(t=this.layout.getNode(this.name).querySelector(".pdlg"))&&("vertical"===this.dir?t.style.height=getComputedStyle(t.parentNode).height:t.style.height=""),this.view.layout.render()},render:function(){var t=this.enabled();if(this.layout.getGroup(this.name).style.display=t?"":"none",t)return this.view.render.render()},config:function(t){var e,n=this;return null==t?this.cfg:(this.cfg.selectable!==t.selectable&&(this._picked=null,this._updatePicked()),this.cfg=t,this.dir="bottom"===this.cfg.position?"horizontal":"vertical",e=this.layout.getNode(this.name).querySelector(".pdlg"),["horizontal","vertical"].map(function(t){return e.classList.toggle(t,n.dir===t)}))},_updatePicked:function(){var e=this;return null==this._picked&&(this._picked=Object.fromEntries(this._data.map(function(t){return[t.key,!0]}))),this._data.map(function(t){if(null==e._picked[t.key])return e._picked[t.key]=!0})},data:function(t){var n;return arguments.length?(n={},t.map(function(t,e){return n[t.key]=e}),this._data=t.filter(function(t,e){return n[t.key]===e}),this._range=this._data.filter(function(t){return t.ext}),this._updatePicked(),this.update(),this.layout.update(!1),this.view.render.render()):this._data},on:function(t,n){var i=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=i.evtHandler)[t]||(e[t]=[])).push(n)})},fire:function(t){for(var e,n,i,r,a=[],l=[],o=1,d=arguments.length;o<d;++o)l.push(arguments[o]);for(e=l,o=0,i=(n=this.evtHandler[t]||[]).length;o<i;++o)r=n[o],a.push(r.apply(this,e));return a},isSelected:function(e){var n=this;return this._range&&this._range.length?!!this._range.filter(function(t){return e>=t.ext[0]&&e<t.ext[1]&&n._picked[t.key]}).length:!!this._picked[e]}}),"undefined"!=typeof chart&&null!==chart&&((chart.utils||(chart.utils={})).legend=t)}.call(this);
|