@net7/components 3.8.5 → 3.9.0

package/fesm2020/net7-components.mjs

@@ -124,22 +124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class BubbleChartComponent {
     constructor() {
         this._loaded = false;
-        this.measureWidth = (text) => {
-            const context = document.createElement('canvas').getContext('2d');
-            // measure text with the correct font family and weight
-            if (this.data?.fontRendering?.label?.family && this.data?.fontRendering?.label?.weight) {
-                context.font = `${this.data.fontRendering.label.weight} ${this.data.fontRendering.label.family}`;
-            }
-            return context.measureText(text).width;
-        };
-        this.isValidNumber = (value) => !Number.isNaN(Number.parseFloat(value));
         this.draw = () => {
             const { d3 } = this;
             const { containerId, data, height, width, selected, transition, colorMatch, shuffle, fontRendering } = this.data;
             const closeIconPath = 'M -50,40 L-40,50 0,10 40,50 50,40 10,0 50,-40 40,-50 0,-10 -40,-50 -50,-40 -10,0 -50,40';
-            const defaultLineHeight = 13;
-            const ellipsisThreshold = 4; // words
-            const textScalingFactor = 0.95;
             if (!Array.isArray(data)) {
                 // Check if it is possible to draw with the current dataset
                 console.warn('(n7-bubble-chart) The data object is not in the expected format!');
@@ -175,23 +163,19 @@ class BubbleChartComponent {
             const svg = d3
                 .select(`#${containerId}`)
                 .attr('viewBox', [0, 0, width, height])
-                // .attr('font-family', 'Verdana, Geneva, sans-serif')
-                // .attr('font-size', '10px')
-                .style('font', '10px Verdana, Geneva, sans-serif')
-                .style('height', 'auto')
-                .style('max-width', '100%')
+                .attr('font-family', 'Verdana, Geneva, sans-serif')
                 .attr('text-anchor', 'middle');
             const leaf = svg.selectAll('g').data(root().leaves(), (d) => d.data.entity.id);
             leaf
                 .transition(t) // update transition on <g>
                 .attr('fill-opacity', 1)
-                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`);
-            // .attr('font-size', (d) => {
-            //   let size = d.r / 5.5;
-            //   size *= 1;
-            //   size += 1;
-            //   return `${Math.round(size)}px`;
-            // });
+                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
+                .attr('font-size', (d) => {
+                let size = d.r / 5.5;
+                size *= 1;
+                size += 1;
+                return `${Math.round(size)}px`;
+            });
             leaf.selectAll('.close-icon').remove(); // clear all existing close icons
             if (selected) {
                 leaf // render necessary close icons
@@ -212,8 +196,86 @@ class BubbleChartComponent {
                 .transition(t) // update transition on <circle>
                 .attr('fill-opacity', 1)
                 .attr('r', (d) => d.r);
+            leaf
+                .select('text')
+                .attr('font-family', () => {
+                if (fontRendering && fontRendering.label && fontRendering.label.family) {
+                    return fontRendering.label.family;
+                }
+                return 'inherit';
+            })
+                .attr('font-weight', () => {
+                if (fontRendering && fontRendering.label && fontRendering.label.weight) {
+                    return fontRendering.label.weight;
+                }
+                return 'inherit';
+            })
+                .selectAll('tspan')
+                .data((d) => {
+                if (d.r / 4 > 4.5) {
+                    // show text and number threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
+                }
+                if (d.r / 4 > 2.5) {
+                    // show text threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
+                }
+                return '';
+            })
+                .join('tspan')
+                .attr('x', 0)
+                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
+                .attr('fill', 'white')
+                .text((d) => d);
+            leaf
+                .select('.label-count')
+                .attr('font-family', () => {
+                if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
+                    return fontRendering.counter.family;
+                }
+                return 'inherit';
+            })
+                .attr('font-weight', () => {
+                if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
+                    return fontRendering.counter.weight;
+                }
+                return 'inherit';
+            })
+                .attr('fill', 'white')
+                .text((d) => {
+                if (d.r / 4 > 2.5) {
+                    // show text and number threshhold
+                    return d.data.count;
+                }
+                return '';
+            })
+                .attr('y', (d) => {
+                let labelLength = d.data.entity.label.split(/ +/g);
+                if (labelLength.length > 3) {
+                    labelLength = labelLength.slice(0, 3);
+                }
+                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
+            });
             const g = leaf.enter().append('g');
             g.attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
+                .attr('font-size', (d) => {
+                let size = d.r / 5.5;
+                size *= 1;
+                size += 1;
+                return `${Math.round(size)}px`;
+            })
                 .attr('cursor', 'pointer')
                 .on('click', (event, d) => {
                 this.onClick(d.data.entity.id);
@@ -230,88 +292,6 @@ class BubbleChartComponent {
                 .attr('id', (d) => { d.clipUid = `Clip-${d.data.entity.id}`; })
                 .append('use')
                 .attr('xlink:href', (d) => d.leafUid.href);
-            // g.append('text')
-            //   .attr('font-family', () => {
-            //     if (fontRendering && fontRendering.label && fontRendering.label.family) {
-            //       return fontRendering.label.family;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('font-weight', () => {
-            //     if (fontRendering && fontRendering
-            //         && fontRendering.label && fontRendering.label.weight) {
-            //       return fontRendering.label.weight;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .selectAll('tspan')
-            //   .data((d) => {
-            //     if (d.r / 4 > 4.5) {
-            //       // show text and number threshhold
-            //       let label = (
-            //         d.data.entity.label.charAt(0).toUpperCase()
-            //         + d.data.entity.label.slice(1)
-            //       ).split(/ +/g);
-            //       if (label.length > 3) {
-            //         label = label.slice(0, 3);
-            //         label[2] += '…';
-            //       }
-            //       return label;
-            //     } if (d.r / 4 > 2.5) {
-            //       // show text threshhold
-            //       let label = (
-            //         d.data.entity.label.charAt(0).toUpperCase()
-            //         + d.data.entity.label.slice(1)
-            //       ).split(/ +/g);
-            //       if (label.length > 3) {
-            //         label = label.slice(0, 3);
-            //         label[2] += '…';
-            //       }
-            //       return label;
-            //     }
-            //     return '';
-            //   })
-            //   .join('tspan')
-            //   .attr('x', 0)
-            //   .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
-            //   .attr('fill', 'white')
-            //   .text((d) => d)
-            //   .attr('fill-opacity', 0)
-            //   .transition(t) // enter() transition on <tspan>
-            //   .attr('fill-opacity', 1);
-            // g.append('text') // Count label
-            //   .attr('class', 'label-count')
-            //   .attr('font-family', () => {
-            //     if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
-            //       return fontRendering.counter.family;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('font-weight', () => {
-            //     if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
-            //       return fontRendering.counter.weight;
-            //     }
-            //     return 'inherit';
-            //   })
-            //   .attr('fill', 'white')
-            //   .text((d) => {
-            //     if (d.r / 4 > 2.5) {
-            //       // show text and number threshhold
-            //       return d.data.count;
-            //     }
-            //     return '';
-            //   })
-            //   .attr('y', (d) => {
-            //     let labelLength = d.data.entity.label.split(/ +/g);
-            //     if (labelLength.length > 3) {
-            //       labelLength = labelLength.slice(0, 3);
-            //     }
-            //     return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
-            //   })
-            //   .attr('fill-opacity', 0)
-            //   .transition(t) // enter() transition on <text>
-            //   .attr('fill-opacity', 1);
-            /** NEW TEXT LOGIC */
             g.append('text')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.label && fontRendering.label.family) {
@@ -325,83 +305,40 @@ class BubbleChartComponent {
                 }
                 return 'inherit';
             })
-                .attr('fill', 'white')
-                .each((d) => {
-                // Capitalize the first letter of the label
-                d.data.entity.label = d.data.entity
-                    .label.charAt(0).toUpperCase()
-                    + d.data.entity.label.slice(1);
-                // 1. initialize meta object
-                if (!d._meta || typeof d._meta !== 'object')
-                    d._meta = {};
-                // 2. tokenize label & count into words
-                const words = d.data.entity.label.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/
-                // Truncate with ellipsis if the label is longer than the threshold
-                if (words.length > ellipsisThreshold) {
-                    words.splice(ellipsisThreshold, words.length - ellipsisThreshold);
-                    words[ellipsisThreshold - 1] += '…';
-                }
-                // add counter
-                if (d.r / 4 > 2.5) {
-                    // show text threshold
-                    if (!words[words.length - 1])
-                        words.pop();
-                    if (!words[0])
-                        words.shift();
-                }
+                .selectAll('tspan')
+                .data((d) => {
                 if (d.r / 4 > 4.5) {
-                    // show number threshold
-                    words.push(`${d.data.count}`);
-                }
-                d._meta.words = words;
-                d._meta.lineHeight = defaultLineHeight;
-                const targetWidth = Math.sqrt(this.measureWidth(d._meta.words.join(' ').trim()) * defaultLineHeight);
-                // 3. build lines of text
-                d._meta.lines = [];
-                let line;
-                let lineWidth0 = Infinity;
-                for (let i = 0, n = d._meta.words.length; i < n; i += 1) {
-                    const lineText1 = (line ? `${line.text} ` : '') + words[i];
-                    const lineWidth1 = this.measureWidth(lineText1);
-                    if ((lineWidth0 + lineWidth1) / 2 < targetWidth && i !== n - 1) {
-                        line.width = lineWidth0;
-                        lineWidth0 = lineWidth1;
-                        line.text = lineText1;
-                    }
-                    else {
-                        // if line is too long or this is the last line (counter), push to next line
-                        lineWidth0 = this.measureWidth(words[i]);
-                        line = { width: lineWidth0, text: words[i] };
-                        d._meta.lines.push(line);
+                    // show text and number threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
                     }
+                    return label;
                 }
-                // 4. compute the bounding radius
-                let radius = 0;
-                for (let i = 0, n = d._meta.lines.length; i < n; i += 1) {
-                    const dy = (Math.abs(i - n / 2) + 0.8) * d._meta.lineHeight;
-                    const dx = d._meta.lines[i].width / 2;
-                    radius = Math.max(radius, Math.sqrt(dx * dx + dy * dy));
+                if (d.r / 4 > 2.5) {
+                    // show text threshhold
+                    let label = (d.data.entity.label.charAt(0).toUpperCase()
+                        + d.data.entity.label.slice(1)).split(/ +/g);
+                    if (label.length > 3) {
+                        label = label.slice(0, 3);
+                        label[2] += '…';
+                    }
+                    return label;
                 }
-                d._meta.textRadius = radius;
-                return d;
+                return '';
             })
-                .attr('transform', (d) => `scale(${(d.r / d._meta.textRadius) * textScalingFactor})`)
-                .filter((d) => (d.r / 4 > 2.5))
-                .selectAll('tspan')
-                .data((d) => d._meta.lines)
-                .enter()
-                .append('tspan')
+                .join('tspan')
                 .attr('x', 0)
-                .attr('y', (d, i, n) => (i - n.length / 2 + 0.8) * defaultLineHeight)
-                .attr('class', (d, i, n) => (
-            // if it's the last label and a valid number, mark as counter
-            i === n.length - 1 && this.isValidNumber(d.text) ? 'label-counter' : 'label-text'))
-                .text((d) => d.text)
+                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
+                .attr('fill', 'white')
+                .text((d) => d)
                 .attr('fill-opacity', 0)
                 .transition(t) // enter() transition on <tspan>
                 .attr('fill-opacity', 1);
-            // custom style for the counter
-            g.selectAll('tspan.label-counter')
+            g.append('text') // Count label
+                .attr('class', 'label-count')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
                     return fontRendering.counter.family;
@@ -413,7 +350,25 @@ class BubbleChartComponent {
                     return fontRendering.counter.weight;
                 }
                 return 'inherit';
-            });
+            })
+                .attr('fill', 'white')
+                .text((d) => {
+                if (d.r / 4 > 2.5) {
+                    // show text and number threshhold
+                    return d.data.count;
+                }
+                return '';
+            })
+                .attr('y', (d) => {
+                let labelLength = d.data.entity.label.split(/ +/g);
+                if (labelLength.length > 3) {
+                    labelLength = labelLength.slice(0, 3);
+                }
+                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
+            })
+                .attr('fill-opacity', 0)
+                .transition(t) // enter() transition on <text>
+                .attr('fill-opacity', 1);
             leaf
                 .exit() // EXIT CYCLE
                 .remove();