Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

d3plus-legend

Package Overview
Dependencies
Maintainers
1
Versions
99
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3plus-legend - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

65

build/d3plus-legend.js

@@ -7,21 +7,5 @@ (function (global, factory) {

var version = "0.1.1";
var version = "0.1.2";
/**
The default id accessor function.
@private
*/
function shapeColor(d) {
return d.color;
}
/**
The default id accessor function.
@private
*/
function shapeId(d) {
return d.id;
}
/**
@function shape

@@ -89,3 +73,4 @@ @desc Creates an SVG shape legend based on an array of data. If *data* is specified, immediately draws based on the specified array and returns this generator. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.

backgroundColor = "transparent",
color = shapeColor,
duration = 600,
fill = d3plusCommon.accessor("color"),
fontColor = d3plusCommon.constant("#444"),

@@ -96,4 +81,4 @@ fontFamily = d3plusCommon.constant("sans-serif"),

height = 100,
id = shapeId,
label = shapeId,
id = d3plusCommon.accessor("id"),
label = d3plusCommon.accessor("id"),
labelBounds = shapeLabelBounds,

@@ -124,2 +109,3 @@ lineData = [],

.data([{"id": "legend-background"}])
.duration(duration)
.fill(backgroundColor)

@@ -139,3 +125,2 @@ .height(height)

var res = d3plusText.wrap().fontFamily(f).fontSize(s).lineHeight(lh).width(w).height(h)(label(d, i));
res.words = d3plusText.split(res.sentence);
res.width = Math.ceil(d3Array.max(res.lines.map(function (t) { return d3plusText.width(t, {"font-family": f, "font-size": s}); }))) + s;

@@ -233,3 +218,4 @@ res.height = Math.ceil(res.lines.length * (lh + 1));

.data(data)
.fill(color)
.duration(duration)
.fill(fill)
.fontColor(fontColor)

@@ -255,3 +241,3 @@ .fontFamily(fontFamily)

if (callback) setTimeout(callback, 100);
if (callback) setTimeout(callback, duration + 100);

@@ -282,3 +268,21 @@ return shape;

@memberof shape
@desc If *value* is specified, sets the color accessor to the specified function and returns this generator. If *value* is not specified, returns the current color accessor.
@desc If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
@param {Array} [*data* = []]
*/
shape.data = function(_) {
return arguments.length ? (data = _, shape) : data;
};
/**
@memberof rect
@desc If *ms* is specified, sets the animation duration to the specified number and returns this generator. If *ms* is not specified, returns the current animation duration.
@param {Number} [*ms* = 600]
*/
shape.duration = function(_) {
return arguments.length ? (duration = _, shape) : duration;
};
/**
@memberof shape
@desc If *value* is specified, sets the fill accessor to the specified function and returns this generator. If *value* is not specified, returns the current fill accessor.
@param {Function} [*value*]

@@ -290,4 +294,4 @@ @example

*/
shape.color = function(_) {
return arguments.length ? (color = _, shape) : color;
shape.fill = function(_) {
return arguments.length ? (fill = _, shape) : fill;
};

@@ -297,11 +301,2 @@

@memberof shape
@desc If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
@param {Array} [*data* = []]
*/
shape.data = function(_) {
return arguments.length ? (data = _, shape) : data;
};
/**
@memberof shape
@desc If *value* is specified, sets the font-color accessor to the specified function or string and returns this generator. If *value* is not specified, returns the current font-color accessor, which by default returns a color that contrasts the fill color.

@@ -308,0 +303,0 @@ @param {Function|String} [*value*]

@@ -1,1 +0,1 @@

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3plus-common"),require("d3-array"),require("d3-selection"),require("d3plus-shape"),require("d3plus-text")):"function"==typeof define&&define.amd?define("d3plus-legend",["exports","d3plus-common","d3-array","d3-selection","d3plus-shape","d3plus-text"],n):n(t.d3plus_legend=t.d3plus_legend||{},t.d3plus_common,t.d3_array,t.d3_selection,t.d3plus_shape,t.d3plus_text)}(this,function(t,n,e,i,r,o){"use strict";function u(t){return t.color}function h(t){return t.id}function l(t){function l(t,n){var e=H[n];return{width:e.width,height:e.height,x:t.width/2+A,y:1-e.height/2}}function a(n,i){return"vertical"===S?p.x+C(n,i)/2:p.x+e.sum(t.slice(0,i).map(function(t,n){return C(t,n)}))+e.sum(H.slice(0,i).map(function(t){return t.width-z(n,i)}))+C(n,i)/2+3*A*i}function c(n,i){if("horizontal"===S)return p.y+e.max(H.map(function(t){return t.height}).concat(t.map(function(t,n){return C(t,n)})))/2;var r=C(n,i),o=H[i].height>r?H[i].height/2:r/2,u=e.sum(H.slice(0,i),function(t,n){return e.max([t.height,C(t.data,n)])});return p.y+u+o+A*i}function f(n){void 0===s&&f.select(i.select("body").append("svg").attr("width",window.innerWidth+"px").attr("height",window.innerHeight+"px").node()),void 0===d&&(d=function(t,n){return 1.1*z(t,n)}),r.rect().data([{id:"legend-background"}]).fill(w).height(k).select(s.node()).width(j).x(j/2).y(k/2)(),H=t.map(function(n,i){var r=x(n,i),u=d(n,i),h=z(n,i),l="horizontal"===S?k-(t.length+1)*A:k,a="vertical"===S?j-3*A-C(n,i):j,c=o.wrap().fontFamily(r).fontSize(h).lineHeight(u).width(a).height(l)(q(n,i));return c.words=o.split(c.sentence),c.width=Math.ceil(e.max(c.lines.map(function(t){return o.width(t,{"font-family":r,"font-size":h})})))+h,c.height=Math.ceil(c.lines.length*(u+1)),c.og={height:c.height,width:c.width},c.data=n,c.f=r,c.s=h,c.lh=u,c});var u,h,l=!0;if("horizontal"===S&&(u=j-e.sum(t.map(function(t,n){return C(t,n)+3*A}))-2*A,h=e.sum(H.map(function(t,n){return t.width-z(t,n)})),h>u)){var a=H.filter(function(t){return t.words.length>1}).sort(function(t,n){return n.sentence.length-t.sentence.length});if(a.length&&k>2*a[0].height)for(var c=2;5>=c;){var O=a.filter(function(t){return t.words.length>=c});if(!O.length)break;for(var P=function(t){var n=a[t],i=n.og.height*c,r=n.og.width*(1.5*(1/c)),l=o.wrap().fontFamily(n.f).fontSize(n.s).lineHeight(n.lh).width(r).height(i)(n.sentence);return!l.truncated&&(h-=n.width,n.width=Math.ceil(e.max(l.lines.map(function(t){return o.width(t,{"font-family":n.f,"font-size":n.s})})))+n.s,n.height=l.lines.length*(n.lh+1),h+=n.width,u>=h)?"break":void 0},T=0;T<a.length;T++){var W=P(T);if("break"===W)break}if(u>=h)break;c++}else l=!1}if(h>u&&(l=!1),!l){h=0;for(var D=0;D<H.length;D++)H[D].width=0,H[D].height=0}var E=e.max(H,function(t,n){return e.max([t.height,C(t.data,n)])}),G=h+e.sum(t,function(t,n){return C(t,n)})+A*(t.length*(l?3:1)-2);p.width=G,p.height=E;var J=A,K=A;"center"===m?J=(j-2*A-G)/2:"right"===m&&(J=j-2*A-G),"middle"===M?K=(k-2*A-E)/2:"bottom"===M&&(K=k-2*A-E),p.x=J,p.y=K;var L=s.selectAll("g.d3plus-legend-shape-group").data([0]);L=L.enter().append("g").attr("class","d3plus-legend-shape-group").merge(L);for(var N=r.rect().backgroundImage(B).data(t).fill(y).fontColor(v).fontFamily(x).fontResize(b).fontSize(z).height(C).id(_).innerBounds(F).label(l?q:!1).labelPadding(0).lineHeight(d).select(L.node()).verticalAlign("top").width(C).x(I).y(R),Q=Object.keys(g),U=0;U<Q.length;U++)N.on(Q[U],g[Q[U]]);return N(),n&&setTimeout(n,100),f}void 0===t&&(t=[]);var d,s,g={},p={width:0,height:0,x:0,y:0},m="center",w="transparent",y=u,v=n.constant("#444"),x=n.constant("sans-serif"),b=n.constant(!1),z=n.constant(10),k=100,_=h,q=h,F=l,H=[],S="horizontal",A=5,B=n.constant(!1),C=n.constant(10),M="middle",j=400,I=a,R=c;return f.align=function(t){return arguments.length?(m=t,f):m},f.backgroundColor=function(t){return arguments.length?(w=t,f):w},f.color=function(t){return arguments.length?(y=t,f):y},f.data=function(n){return arguments.length?(t=n,f):t},f.fontColor=function(t){return arguments.length?(v="function"==typeof t?t:n.constant(t),f):v},f.fontFamily=function(t){return arguments.length?(x="function"==typeof t?t:n.constant(t),f):x},f.fontResize=function(t){return arguments.length?(b="function"==typeof t?t:n.constant(t),f):b},f.fontSize=function(t){return arguments.length?(z="function"==typeof t?t:n.constant(t),f):z},f.height=function(t){return arguments.length?(k=t,f):k},f.id=function(t){return arguments.length?(_=t,f):_},f.label=function(t){return arguments.length?(q="function"==typeof t?t:n.constant(t),f):q},f.labelBounds=function(t){return arguments.length?(F=t,f):F},f.on=function(t,n){return 2===arguments.length?(g[t]=n,f):arguments.length?g[t]:g},f.orient=function(t){return arguments.length?(S=t,f):S},f.outerBounds=function(){return p},f.padding=function(t){return arguments.length?(A=t,f):A},f.select=function(t){return arguments.length?(s=i.select(t),f):s},f.shapeImage=function(t){return arguments.length?(B="function"==typeof t?t:n.constant(t),f):B},f.size=function(t){return arguments.length?(C="function"==typeof t?t:n.constant(t),f):C},f.verticalAlign=function(t){return arguments.length?(M=t,f):M},f.width=function(t){return arguments.length?(j=t,f):j},f.x=function(t){return arguments.length?(I="function"==typeof t?t:n.constant(t),f):I},f.y=function(t){return arguments.length?(R="function"==typeof t?t:n.constant(t),f):R},t.length?f():f}var a="0.1.1";t.version=a,t.shape=l});
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3plus-common"),require("d3-array"),require("d3-selection"),require("d3plus-shape"),require("d3plus-text")):"function"==typeof define&&define.amd?define("d3plus-legend",["exports","d3plus-common","d3-array","d3-selection","d3plus-shape","d3plus-text"],n):n(t.d3plus_legend=t.d3plus_legend||{},t.d3plus_common,t.d3_array,t.d3_selection,t.d3plus_shape,t.d3plus_text)}(this,function(t,n,e,i,r,o){"use strict";function u(t){function u(t,n){var e=F[n];return{width:e.width,height:e.height,x:t.width/2+S,y:1-e.height/2}}function h(n,i){return"vertical"===H?s.x+B(n,i)/2:s.x+e.sum(t.slice(0,i).map(function(t,n){return B(t,n)}))+e.sum(F.slice(0,i).map(function(t){return t.width-b(n,i)}))+B(n,i)/2+3*S*i}function a(n,i){if("horizontal"===H)return s.y+e.max(F.map(function(t){return t.height}).concat(t.map(function(t,n){return B(t,n)})))/2;var r=B(n,i),o=F[i].height>r?F[i].height/2:r/2,u=e.sum(F.slice(0,i),function(t,n){return e.max([t.height,B(t.data,n)])});return s.y+u+o+S*i}function l(n){void 0===f&&l.select(i.select("body").append("svg").attr("width",window.innerWidth+"px").attr("height",window.innerHeight+"px").node()),void 0===c&&(c=function(t,n){return 1.1*b(t,n)}),r.rect().data([{id:"legend-background"}]).duration(m).fill(p).height(z).select(f.node()).width(M).x(M/2).y(z/2)(),F=t.map(function(n,i){var r=v(n,i),u=c(n,i),h=b(n,i),a="horizontal"===H?z-(t.length+1)*S:z,l="vertical"===H?M-3*S-B(n,i):M,f=o.wrap().fontFamily(r).fontSize(h).lineHeight(u).width(l).height(a)(_(n,i));return f.width=Math.ceil(e.max(f.lines.map(function(t){return o.width(t,{"font-family":r,"font-size":h})})))+h,f.height=Math.ceil(f.lines.length*(u+1)),f.og={height:f.height,width:f.width},f.data=n,f.f=r,f.s=h,f.lh=u,f});var u,h,a=!0;if("horizontal"===H&&(u=M-e.sum(t.map(function(t,n){return B(t,n)+3*S}))-2*S,h=e.sum(F.map(function(t,n){return t.width-b(t,n)})),h>u)){var R=F.filter(function(t){return t.words.length>1}).sort(function(t,n){return n.sentence.length-t.sentence.length});if(R.length&&z>2*R[0].height)for(var O=2;5>=O;){var P=R.filter(function(t){return t.words.length>=O});if(!P.length)break;for(var T=function(t){var n=R[t],i=n.og.height*O,r=n.og.width*(1.5*(1/O)),a=o.wrap().fontFamily(n.f).fontSize(n.s).lineHeight(n.lh).width(r).height(i)(n.sentence);return!a.truncated&&(h-=n.width,n.width=Math.ceil(e.max(a.lines.map(function(t){return o.width(t,{"font-family":n.f,"font-size":n.s})})))+n.s,n.height=a.lines.length*(n.lh+1),h+=n.width,u>=h)?"break":void 0},W=0;W<R.length;W++){var D=T(W);if("break"===D)break}if(u>=h)break;O++}else a=!1}if(h>u&&(a=!1),!a){h=0;for(var E=0;E<F.length;E++)F[E].width=0,F[E].height=0}var G=e.max(F,function(t,n){return e.max([t.height,B(t.data,n)])}),J=h+e.sum(t,function(t,n){return B(t,n)})+S*(t.length*(a?3:1)-2);s.width=J,s.height=G;var K=S,L=S;"center"===g?K=(M-2*S-J)/2:"right"===g&&(K=M-2*S-J),"middle"===C?L=(z-2*S-G)/2:"bottom"===C&&(L=z-2*S-G),s.x=K,s.y=L;var N=f.selectAll("g.d3plus-legend-shape-group").data([0]);N=N.enter().append("g").attr("class","d3plus-legend-shape-group").merge(N);for(var Q=r.rect().backgroundImage(A).data(t).duration(m).fill(w).fontColor(y).fontFamily(v).fontResize(x).fontSize(b).height(B).id(k).innerBounds(q).label(a?_:!1).labelPadding(0).lineHeight(c).select(N.node()).verticalAlign("top").width(B).x(j).y(I),U=Object.keys(d),V=0;V<U.length;V++)Q.on(U[V],d[U[V]]);return Q(),n&&setTimeout(n,m+100),l}void 0===t&&(t=[]);var c,f,d={},s={width:0,height:0,x:0,y:0},g="center",p="transparent",m=600,w=n.accessor("color"),y=n.constant("#444"),v=n.constant("sans-serif"),x=n.constant(!1),b=n.constant(10),z=100,k=n.accessor("id"),_=n.accessor("id"),q=u,F=[],H="horizontal",S=5,A=n.constant(!1),B=n.constant(10),C="middle",M=400,j=h,I=a;return l.align=function(t){return arguments.length?(g=t,l):g},l.backgroundColor=function(t){return arguments.length?(p=t,l):p},l.data=function(n){return arguments.length?(t=n,l):t},l.duration=function(t){return arguments.length?(m=t,l):m},l.fill=function(t){return arguments.length?(w=t,l):w},l.fontColor=function(t){return arguments.length?(y="function"==typeof t?t:n.constant(t),l):y},l.fontFamily=function(t){return arguments.length?(v="function"==typeof t?t:n.constant(t),l):v},l.fontResize=function(t){return arguments.length?(x="function"==typeof t?t:n.constant(t),l):x},l.fontSize=function(t){return arguments.length?(b="function"==typeof t?t:n.constant(t),l):b},l.height=function(t){return arguments.length?(z=t,l):z},l.id=function(t){return arguments.length?(k=t,l):k},l.label=function(t){return arguments.length?(_="function"==typeof t?t:n.constant(t),l):_},l.labelBounds=function(t){return arguments.length?(q=t,l):q},l.on=function(t,n){return 2===arguments.length?(d[t]=n,l):arguments.length?d[t]:d},l.orient=function(t){return arguments.length?(H=t,l):H},l.outerBounds=function(){return s},l.padding=function(t){return arguments.length?(S=t,l):S},l.select=function(t){return arguments.length?(f=i.select(t),l):f},l.shapeImage=function(t){return arguments.length?(A="function"==typeof t?t:n.constant(t),l):A},l.size=function(t){return arguments.length?(B="function"==typeof t?t:n.constant(t),l):B},l.verticalAlign=function(t){return arguments.length?(C=t,l):C},l.width=function(t){return arguments.length?(M=t,l):M},l.x=function(t){return arguments.length?(j="function"==typeof t?t:n.constant(t),l):j},l.y=function(t){return arguments.length?(I="function"==typeof t?t:n.constant(t),l):I},t.length?l():l}var h="0.1.2";t.version=h,t.shape=u});
{
"name": "d3plus-legend",
"version": "0.1.1",
"version": "0.1.2",
"description": "A collection of chart legends/keys",

@@ -28,5 +28,5 @@ "main": "build/d3plus-legend.js",

"d3-selection": "^0.7.0",
"d3plus-common": "^0.1.0",
"d3plus-common": "^0.2.0",
"d3plus-shape": "^0.4.3",
"d3plus-text": "^0.4.4"
"d3plus-text": "^0.4.5"
},

@@ -33,0 +33,0 @@ "devDependencies": {

@@ -92,4 +92,4 @@ # d3plus-legend

* [.backgroundColor([*color*])](#shape.backgroundColor)
* [.color([*value*])](#shape.color)
* [.data([*data*])](#shape.data)
* [.fill([*value*])](#shape.fill)
* [.fontColor([*value*])](#shape.fontColor)

@@ -137,9 +137,20 @@ * [.fontFamily([*value*])](#shape.fontFamily)

<a name="shape.color"></a>
<a name="shape.data"></a>
### shape.color([*value*])
If *value* is specified, sets the color accessor to the specified function and returns this generator. If *value* is not specified, returns the current color accessor.
### shape.data([*data*])
If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
**Kind**: static method of <code>[shape](#shape)</code>
| Param | Type | Default |
| --- | --- | --- |
| [*data*] | <code>Array</code> | <code>[]</code> |
<a name="shape.fill"></a>
### shape.fill([*value*])
If *value* is specified, sets the fill accessor to the specified function and returns this generator. If *value* is not specified, returns the current fill accessor.
**Kind**: static method of <code>[shape](#shape)</code>
| Param | Type |

@@ -155,13 +166,2 @@ | --- | --- |

```
<a name="shape.data"></a>
### shape.data([*data*])
If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
**Kind**: static method of <code>[shape](#shape)</code>
| Param | Type | Default |
| --- | --- | --- |
| [*data*] | <code>Array</code> | <code>[]</code> |
<a name="shape.fontColor"></a>

@@ -168,0 +168,0 @@

@@ -1,24 +0,8 @@

import {constant} from "d3plus-common";
import {accessor, constant} from "d3plus-common";
import {max, sum} from "d3-array";
import {select as d3Select} from "d3-selection";
import * as d3plusShape from "d3plus-shape";
import {split, width as measureText, wrap} from "d3plus-text";
import {width as measureText, wrap} from "d3plus-text";
/**
The default id accessor function.
@private
*/
function shapeColor(d) {
return d.color;
}
/**
The default id accessor function.
@private
*/
function shapeId(d) {
return d.id;
}
/**
@function shape

@@ -84,3 +68,4 @@ @desc Creates an SVG shape legend based on an array of data. If *data* is specified, immediately draws based on the specified array and returns this generator. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.

backgroundColor = "transparent",
color = shapeColor,
duration = 600,
fill = accessor("color"),
fontColor = constant("#444"),

@@ -91,4 +76,4 @@ fontFamily = constant("sans-serif"),

height = 100,
id = shapeId,
label = shapeId,
id = accessor("id"),
label = accessor("id"),
labelBounds = shapeLabelBounds,

@@ -119,2 +104,3 @@ lineData = [],

.data([{"id": "legend-background"}])
.duration(duration)
.fill(backgroundColor)

@@ -134,3 +120,2 @@ .height(height)

const res = wrap().fontFamily(f).fontSize(s).lineHeight(lh).width(w).height(h)(label(d, i));
res.words = split(res.sentence);
res.width = Math.ceil(max(res.lines.map((t) => measureText(t, {"font-family": f, "font-size": s})))) + s;

@@ -222,3 +207,4 @@ res.height = Math.ceil(res.lines.length * (lh + 1));

.data(data)
.fill(color)
.duration(duration)
.fill(fill)
.fontColor(fontColor)

@@ -244,3 +230,3 @@ .fontFamily(fontFamily)

if (callback) setTimeout(callback, 100);
if (callback) setTimeout(callback, duration + 100);

@@ -271,3 +257,21 @@ return shape;

@memberof shape
@desc If *value* is specified, sets the color accessor to the specified function and returns this generator. If *value* is not specified, returns the current color accessor.
@desc If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
@param {Array} [*data* = []]
*/
shape.data = function(_) {
return arguments.length ? (data = _, shape) : data;
};
/**
@memberof rect
@desc If *ms* is specified, sets the animation duration to the specified number and returns this generator. If *ms* is not specified, returns the current animation duration.
@param {Number} [*ms* = 600]
*/
shape.duration = function(_) {
return arguments.length ? (duration = _, shape) : duration;
};
/**
@memberof shape
@desc If *value* is specified, sets the fill accessor to the specified function and returns this generator. If *value* is not specified, returns the current fill accessor.
@param {Function} [*value*]

@@ -279,4 +283,4 @@ @example

*/
shape.color = function(_) {
return arguments.length ? (color = _, shape) : color;
shape.fill = function(_) {
return arguments.length ? (fill = _, shape) : fill;
};

@@ -286,11 +290,2 @@

@memberof shape
@desc If *data* is specified, sets the data array to the specified array and returns this generator. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.
@param {Array} [*data* = []]
*/
shape.data = function(_) {
return arguments.length ? (data = _, shape) : data;
};
/**
@memberof shape
@desc If *value* is specified, sets the font-color accessor to the specified function or string and returns this generator. If *value* is not specified, returns the current font-color accessor, which by default returns a color that contrasts the fill color.

@@ -297,0 +292,0 @@ @param {Function|String} [*value*]

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc