smart-labels 0.0.10 → 0.0.12
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/dist/smartLabels.es.js +8 -3
- package/dist/smartLabels.js +8 -3
- package/dist/smartLabels.min.js +2 -2
- package/package.json +1 -1
- package/rollup.config.js +2 -2
- package/src/index.js +7 -2
package/dist/smartLabels.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// smart-labels v0.0.
|
|
1
|
+
// smart-labels v0.0.11 Copyright (c) 2024 John Alexis Guerra Gómez
|
|
2
2
|
import * as d3 from 'd3';
|
|
3
3
|
|
|
4
4
|
// Based on https://observablehq.com/@d3/voronoi-labels by Mike Bostock
|
|
@@ -30,10 +30,10 @@ function smartLabels(
|
|
|
30
30
|
height = null,
|
|
31
31
|
target = null, // Where do you want it to draw
|
|
32
32
|
renderer = "svg", // canvas or svg
|
|
33
|
-
font = () => "
|
|
33
|
+
font = () => "10pt sans-serif",
|
|
34
34
|
hover = true, // Show label of the hovered point
|
|
35
35
|
onHover = (i) => i, // callback when hovered, will pass the index of the selected element
|
|
36
|
-
hoverFont = () => "bolder
|
|
36
|
+
hoverFont = () => "bolder 12pt sans-serif",
|
|
37
37
|
labelsInCentroids = true,
|
|
38
38
|
threshold = 2000, // Areas over this size would get labels
|
|
39
39
|
alwaysShow = (d) => false, // If returns true for the node, it will always show the label
|
|
@@ -62,6 +62,11 @@ function smartLabels(
|
|
|
62
62
|
padding = 3, // label padding in pixels
|
|
63
63
|
} = {}
|
|
64
64
|
) {
|
|
65
|
+
if (!data || data?.length === 0) {
|
|
66
|
+
console.log("smartLabels: No data to render");
|
|
67
|
+
return target;
|
|
68
|
+
}
|
|
69
|
+
|
|
65
70
|
data = data.filter(
|
|
66
71
|
(d, index) =>
|
|
67
72
|
x(d, index) !== undefined &&
|
package/dist/smartLabels.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// smart-labels v0.0.
|
|
1
|
+
// smart-labels v0.0.11 Copyright (c) 2024 John Alexis Guerra Gómez
|
|
2
2
|
(function (global, factory) {
|
|
3
3
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('d3')) :
|
|
4
4
|
typeof define === 'function' && define.amd ? define(['d3'], factory) :
|
|
@@ -53,10 +53,10 @@ function smartLabels(
|
|
|
53
53
|
height = null,
|
|
54
54
|
target = null, // Where do you want it to draw
|
|
55
55
|
renderer = "svg", // canvas or svg
|
|
56
|
-
font = () => "
|
|
56
|
+
font = () => "10pt sans-serif",
|
|
57
57
|
hover = true, // Show label of the hovered point
|
|
58
58
|
onHover = (i) => i, // callback when hovered, will pass the index of the selected element
|
|
59
|
-
hoverFont = () => "bolder
|
|
59
|
+
hoverFont = () => "bolder 12pt sans-serif",
|
|
60
60
|
labelsInCentroids = true,
|
|
61
61
|
threshold = 2000, // Areas over this size would get labels
|
|
62
62
|
alwaysShow = (d) => false, // If returns true for the node, it will always show the label
|
|
@@ -85,6 +85,11 @@ function smartLabels(
|
|
|
85
85
|
padding = 3, // label padding in pixels
|
|
86
86
|
} = {}
|
|
87
87
|
) {
|
|
88
|
+
if (!data || data?.length === 0) {
|
|
89
|
+
console.log("smartLabels: No data to render");
|
|
90
|
+
return target;
|
|
91
|
+
}
|
|
92
|
+
|
|
88
93
|
data = data.filter(
|
|
89
94
|
(d, index) =>
|
|
90
95
|
x(d, index) !== undefined &&
|
package/dist/smartLabels.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
// smart-labels v0.0.
|
|
2
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).smartLabels=e(t.d3)}(this,(function(t){"use strict";function e(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var o=e(t);function n(t,e="text"){const n=o.sort(t.selectAll(e),(t=>+t.getAttribute("data-priority"))).reverse().map((t=>{const{x:e,y:o,width:n,height:r}=t.getBoundingClientRect();return{node:t,x:e,y:o,width:n,height:r}})),r=[];for(const t of n){const e=r.some((e=>{return n=e,!((o=t).x+o.width<n.x||n.x+n.width<o.x||o.y+o.height<n.y||n.y+n.height<o.y);var o,n}));o.select(t.node).classed("occluded",e),e||r.push(t)}return r}return function(t,{x:e=t=>t[0],y:r=t=>t[1],r:l=()=>3,label:a=(t,e)=>e,fill:s="#333",stroke:i="white",width:c=null,height:d=null,target:h=null,renderer:f="svg",font:u=()=>"
|
|
1
|
+
// smart-labels v0.0.11 Copyright (c) 2024 John Alexis Guerra Gómez
|
|
2
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).smartLabels=e(t.d3)}(this,(function(t){"use strict";function e(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var o=e(t);function n(t,e="text"){const n=o.sort(t.selectAll(e),(t=>+t.getAttribute("data-priority"))).reverse().map((t=>{const{x:e,y:o,width:n,height:r}=t.getBoundingClientRect();return{node:t,x:e,y:o,width:n,height:r}})),r=[];for(const t of n){const e=r.some((e=>{return n=e,!((o=t).x+o.width<n.x||n.x+n.width<o.x||o.y+o.height<n.y||n.y+n.height<o.y);var o,n}));o.select(t.node).classed("occluded",e),e||r.push(t)}return r}return function(t,{x:e=t=>t[0],y:r=t=>t[1],r:l=()=>3,label:a=(t,e)=>e,fill:s="#333",stroke:i="white",width:c=null,height:d=null,target:h=null,renderer:f="svg",font:u=()=>"10pt sans-serif",hover:g=!0,onHover:p=t=>t,hoverFont:y=()=>"bolder 12pt sans-serif",labelsInCentroids:b=!0,threshold:m=2e3,alwaysShow:v=t=>!1,showLabel:w=(t,e)=>v(t)||-o.polygonArea(e)>m,backgroundFill:x="#fefefe01",strokeWidth:k=5,showVoronoi:L=!1,voronoiStroke:A="#ccc",showAnchors:j=!1,anchorsStroke:S="orange",anchorsFill:C="none",useOcclusion:P=!0,occludedStyle:M="opacity: 0.2",showPoints:O=!1,pointsFill:T="#ccc",pointsSelectedFill:$="firebrick",pointsStroke:E="#ccc",debug:F=!1,selected:I=null,padding:B=3}={}){if(!t||0===t?.length)return console.log("smartLabels: No data to render"),h;t=t.filter(((t,o)=>void 0!==e(t,o)&&null!==e(t,o)&&void 0!==r(t,o)&&null!==r(t,o))),"string"==typeof u&&(u=()=>u),"string"==typeof y&&(y=()=>y);let V=o.extent(t,e),D=o.extent(t,r);if(c=c||V[1]-V[0],d=d||D[1]-D[0],F&&console.log("✅ smartLabels renderer",f),h&&!function(t,e){return t&&t.node&&(t=t.node()),"canvas"===e.toLocaleLowerCase()?t instanceof HTMLCanvasElement:t instanceof SVGElement}(h,f))throw F&&console.log("❌ smartLabels Target doesn't match the renderer",h,f),new Error("Smartlabels Target doesn't match the renderer",h,f);"canvas"===f.toLocaleLowerCase()?(h=h?o.select(h.node?h.node():h):o.create("canvas").attr("width",c).attr("height",d),P=!1):h=(h=h?o.select(h.node?h.node():h):o.create("svg").attr("viewBox",[0,0,c,d]))||o.create("svg").attr("viewBox",[0,0,c,d]);const H=o.Delaunay.from(t,e,r),R=H.voronoi([V[0]-1,D[0]-1,V[1]+1,D[1]+1]);let W=t.map(((t,e)=>[t,R.cellPolygon(e)]));function q(t,o,n){if(!o){const l=H.find(e(t,n),r(t,n));if(-1===l)return console.log("couldn't find cell",l,t,e(t,n),r(t,n)),null;o=W[l][1]}return o}function z(n){F&&console.log("renderCanvasAnchorsVoronoiPoints","showAnchors",j,"labelsInCentroids",b,"showVoronoi",L,"showPoints",O),(j||b)&&W.forEach((({d:t,cell:l,show:a},s)=>{if(!a)return;const[i,c]=o.polygonCentroid(l);n.beginPath(),n.moveTo(i,c),n.lineTo(e(t,s),r(t,s)),n.strokeStyle=S,n.stroke()})),L&&(n.beginPath(),R.render(n),n.strokeStyle=A,n.stroke()),O&&(n.beginPath(),n.save(),n.globalAlpha=.7,n.fillStyle="black",t.forEach(((t,o)=>{n.beginPath(),n.arc(e(t,o),r(t,o),l(t,o),0,2*Math.PI)})),n.restore(),n.fillStyle=T,n.fill(),n.strokeStyle=E,n.stroke())}function G(t,n){W.forEach((({d:c,cell:d,show:h},f)=>{if(!h&&f!==n)return;const[g,p]=o.polygonCentroid(d),m=(Math.round(Math.atan2(p-r(c,f),g-e(c,f))/Math.PI*2)+4)%4;t.save();const v=l(c,f)+B,w=0===m?v:2===m?-v:v,x=1===m?v:3===m?-v:v;t.translate(b?g:e(c,f)+w,b?p:r(c,f)+x),t.textAlign=0===m?"left":1===m?"center":2===m?"right":"center",t.textBaseline=0===m?"middle":1===m?"top":2===m?"middle":"bottom",t.font=f===n?y(c,f):u(c,f),t.fillStyle=s,t.strokeStyle=i,t.lineWidth=k,t.strokeText(a(c,f),0,0),t.fillText(a(c,f),0,0),t.restore()}))}return W=W.map((([t,e],o)=>[t,q(t,e,o)])).map((([t,e])=>({d:t,cell:e,show:w(t,e)}))),"canvas"===f.toLocaleLowerCase()?function(){const t=h.node().getContext("2d");z(t),G(t,I),g&&(F&&console.log("setting onmousemove",h),h.on("mousemove",(e=>{const[n,r]=o.pointer(e),l=H.find(n,r);l!==I&&(I=l,t.clearRect(0,0,c,d),z(t),p&&"function"==typeof p&&p(l),G(t,I))})))}():function(){let t=null;P&&h.selectAll("style.smartLabels").data([0]).join("style").attr("class","smartLabels").html(`\n svg g.labels > text.occluded:not(.selected) { ${M} }\n `);const f=h.selectAll("rect.smartLabels").data([0]).join("rect").attr("class","smartLabels").attr("width",c).attr("height",d).attr("fill",x).attr("stroke","none"),m={top:t=>t.attr("text-anchor","middle").attr("y",((t,e)=>-(l(t,e)+B))),right:t=>t.attr("text-anchor","start").attr("dy","0.35em").attr("x",((t,e)=>l(t,e)+B)),bottom:t=>t.attr("text-anchor","middle").attr("dy","0.71em").attr("y",((t,e)=>l(t,e)+B)),left:t=>t.attr("text-anchor","end").attr("dy","0.35em").attr("x",((t,e)=>-(l(t,e)+B)))};let v;(j||b)&&(t=h.selectAll("g#anchors").data([W]).join("g").attr("pointer-events","none").attr("id","anchors").attr("stroke",S).attr("fill",C).selectAll("path.anchor").data((t=>t)).join("path").attr("class","anchor").attr("display",(({show:t})=>t?null:"none")).attr("d",(({d:t,cell:n},l)=>n?`M${o.polygonCentroid(n)}L${e(t,l)},${r(t,l)}`:null))),L&&h.selectAll("path#voronoi").data([1]).join("path").attr("id","voronoi").attr("stroke",A).attr("pointer-events","none").attr("d",R.render()),O&&(v=h.selectAll("circle#points").data([1]).join("path").attr("id","points").attr("pointer-events","none").attr("stroke",E).attr("fill",T).attr("d",H.renderPoints(null,2)));const w=h.selectAll("g.labels").data([W]).join("g").attr("class","labels").attr("fill",s).attr("stroke",i).attr("stroke-width",k).attr("paint-order","stroke").attr("pointer-events","none").selectAll("text").data((t=>t)).join("text").style("font",(({d:t},e)=>u(t,e))).each((function({d:t,cell:n},l){if(!n)return;const[a,s]=o.polygonCentroid(n),i=(Math.round(Math.atan2(s-r(t,l),a-e(t,l))/Math.PI*2)+4)%4;o.select(this).call(0===i?m.right:3===i?m.top:1===i?m.bottom:m.left)})).attr("transform",(({d:t,cell:n},l)=>{if(b){const[t,e]=o.polygonCentroid(n);return`translate(${t}, ${e})`}return`translate(${e(t,l)}, ${r(t,l)})`})).attr("display",(({show:t})=>t?null:"none")).text((({d:t},e,o)=>a(t,e,o)));let F=null;if(g&&f.on("mousemove",(e=>{const n=H.find(...o.pointer(e));n!==F&&(F=n,w.attr("display",(({show:t},e)=>e===F||t?null:"none")).style("font",(({d:t},e)=>e===F?y(t,e):u(t,e))).classed("selected",((t,e)=>e===F)).filter(((t,e)=>e===F)).raise(),t&&t.attr("display",(({show:t},e)=>t||e===F?null:"none")),O&&v.attr("fill",((t,e)=>$)).classed("selected",((t,e)=>e===F)),p&&"function"==typeof p&&p(n))})),P){const t=new MutationObserver((function(){document.contains(h.node())&&(h.call(n,"g.labels > text"),t.disconnect())}));t.observe(document,{attributes:!1,childList:!0,characterData:!1,subtree:!0})}}(),Object.assign(h.node(),{delaunay:H,voronoi:R,cells:W})}}));
|
package/package.json
CHANGED
package/rollup.config.js
CHANGED
|
@@ -4,7 +4,7 @@ import commonjs from "rollup-plugin-commonjs";
|
|
|
4
4
|
import terser from "@rollup/plugin-terser";
|
|
5
5
|
// import babel from "rollup-plugin-babel";
|
|
6
6
|
import json from "@rollup/plugin-json";
|
|
7
|
-
import meta from "./package.json"
|
|
7
|
+
import meta from "./package.json" with { type: "json" };
|
|
8
8
|
|
|
9
9
|
// Extract copyrights from the LICENSE.
|
|
10
10
|
const copyrights = readFileSync("./LICENSE", "utf-8")
|
|
@@ -23,7 +23,7 @@ const config = {
|
|
|
23
23
|
banner: `// ${meta.name} v${meta.version} Copyright ${copyrights.join(", ")}`,
|
|
24
24
|
extend: true,
|
|
25
25
|
globals: {
|
|
26
|
-
"d3": "d3",
|
|
26
|
+
"d3": "d3",
|
|
27
27
|
},
|
|
28
28
|
name: "smartLabels",
|
|
29
29
|
},
|
package/src/index.js
CHANGED
|
@@ -28,10 +28,10 @@ export default function smartLabels(
|
|
|
28
28
|
height = null,
|
|
29
29
|
target = null, // Where do you want it to draw
|
|
30
30
|
renderer = "svg", // canvas or svg
|
|
31
|
-
font = () => "
|
|
31
|
+
font = () => "10pt sans-serif",
|
|
32
32
|
hover = true, // Show label of the hovered point
|
|
33
33
|
onHover = (i) => i, // callback when hovered, will pass the index of the selected element
|
|
34
|
-
hoverFont = () => "bolder
|
|
34
|
+
hoverFont = () => "bolder 12pt sans-serif",
|
|
35
35
|
labelsInCentroids = true,
|
|
36
36
|
threshold = 2000, // Areas over this size would get labels
|
|
37
37
|
alwaysShow = (d) => false, // If returns true for the node, it will always show the label
|
|
@@ -60,6 +60,11 @@ export default function smartLabels(
|
|
|
60
60
|
padding = 3, // label padding in pixels
|
|
61
61
|
} = {}
|
|
62
62
|
) {
|
|
63
|
+
if (!data || data?.length === 0) {
|
|
64
|
+
console.log("smartLabels: No data to render");
|
|
65
|
+
return target;
|
|
66
|
+
}
|
|
67
|
+
|
|
63
68
|
data = data.filter(
|
|
64
69
|
(d, index) =>
|
|
65
70
|
x(d, index) !== undefined &&
|