axidio-styleguide-library1-v2 0.0.955 → 0.0.956

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -8791,6 +8791,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-weeklycharts')
                 .attr('y', function () {
+                // Minimize gap in maximized (fullscreen) view for weekly charts
+                if (self.chartConfiguration.isFullScreen) {
+                    return short_tick_length_bg;
+                }
                 if (alternate_text) {
                     alternate_text = false;
                     return long_tick_length_bg;
@@ -8809,11 +8813,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('y', function (d) {
                 // For grouped bar charts with many bars and xLabel present, do NOT add extra space (avoid overlap)
                 if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
+                    // In maximized (fullscreen) view, keep the gap minimal
+                    if (self.chartConfiguration.isFullScreen) {
+                        return short_tick_length_bg;
+                    }
                     return short_tick_length_bg;
                 }
-                // For grouped bar charts with many bars and NO xLabel, add space as before
+                // For grouped bar charts with many bars and NO xLabel, add space as before, but reduce in fullscreen
                 if (subgroups.length > 1 && data.length > 8 && !metaData.xLabel) {
                     const chartHasExtraBottom = (self.chartConfiguration.margin && self.chartConfiguration.margin.bottom >= 40);
+                    if (self.chartConfiguration.isFullScreen) {
+                        // Reduce extra gap in maximized view
+                        return short_tick_length_bg + 2;
+                    }
                     return chartHasExtraBottom ? short_tick_length_bg : short_tick_length_bg + 10;
                 }
                 // Default/fallback logic for other cases
@@ -8826,6 +8838,10 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (/\d{2,4}[-\/]\d{2,4}/.test(d) && d.indexOf(' ') > -1) {
                     baseY += 4;
                 }
+                // In maximized view, reduce baseY slightly for grouped bars
+                if (self.chartConfiguration.isFullScreen && subgroups.length > 1) {
+                    baseY = Math.max(short_tick_length_bg, baseY - 10);
+                }
                 return baseY;
             })
                 .attr('x', function (d) {
@@ -8892,11 +8908,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 });
             }
         }
-        if (isMobile && !this.isHeaderVisible) {
-            svg
-                .selectAll('g.x1.axis1 g.tick text')
-                .classed('mobile-xaxis-override', true);
-        }
         if (isria && self.chartData.data.length > 8) {
             svg
                 .selectAll('g.x1.axis1 g.tick text')
@@ -8909,6 +8920,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('x', 5)
                 .style('text-anchor', 'middle');
         }
+        if (isMobile && !this.isHeaderVisible) {
+            svg
+                .selectAll('g.x1.axis1 g.tick text')
+                .classed('mobile-xaxis-override', true);
+        }
         /**y scale for left y axis */
         var y = d3.scaleLinear().rangeRound([height, 0]);
         var maxValue = d3.max(data, (d) => d3.max(keyList, (key) => +d[key]));
@@ -9436,41 +9452,85 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             state
                 .selectAll('rect')
                 .on('mouseout', function (d) {
-                state.selectAll('.barstext').remove();
+                state.selectAll('.lib-verticalstack-title-ontop').remove();
             })
                 .on('mouseover', function (d1) {
+                // Calculate positioning scale
+                let tempScale;
+                data.map((indiv) => {
+                    if (indiv.name == d1.name) {
+                        let keys = Object.keys(indiv).filter((temp, i) => i != 0);
+                        tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
+                        if (x.bandwidth() > 100) {
+                            if (self.chartData.data.length == 1) {
+                                if (Object.keys(self.chartData.data[0]).length == 2) {
+                                    tempScale.range([
+                                        0 + (x.bandwidth() - 200) / 2,
+                                        x.bandwidth() - (x.bandwidth() - 200) / 2,
+                                    ]);
+                                }
+                                else {
+                                    tempScale.range([
+                                        0 + (x.bandwidth() - 300) / 2,
+                                        x.bandwidth() - (x.bandwidth() - 300) / 2,
+                                    ]);
+                                }
+                            }
+                            else {
+                                tempScale.range([
+                                    0 + (x.bandwidth() - 125) / 2,
+                                    x.bandwidth() - (x.bandwidth() - 125) / 2,
+                                ]);
+                            }
+                        }
+                    }
+                });
                 state
-                    .selectAll('text')
-                    .data(function (d) {
-                    let newList = [];
-                    subgroups.map(function (key) {
-                        if (key !== 'name' &&
-                            d1.key == key &&
-                            d1.value == d[key] &&
-                            d1.name == d.name) {
-                            let obj = { key: key, value: d[key], name: d.name };
-                            newList.push(obj);
+                    .append('foreignObject')
+                    .attr('class', 'lib-verticalstack-title-ontop')
+                    .attr('x', function () {
+                    if (metaData.hasDrillDown) {
+                        if (tempScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
+                            return (xSubgroup(d1.key) + tempScale.bandwidth() / 2 - 90);
                         }
-                    });
-                    return newList;
-                })
-                    .enter()
-                    .append('text')
-                    .attr('fill', 'var(--chart-text-color)')
-                    .attr('class', 'barstext')
-                    .attr('x', function (d) {
-                    return xSubgroup(d.key);
+                        return (xSubgroup(d1.key) -
+                            (tempScale.bandwidth() + leftAndRightSpaces * 2) / 2 +
+                            tempScale.bandwidth() / 2);
+                    }
+                    else {
+                        return xSubgroup(d1.key) - (tempScale.bandwidth() + leftAndRightSpaces * 2) / 2 + tempScale.bandwidth() / 2;
+                    }
                 })
-                    .attr('y', function (d) {
-                    return y(d.value);
+                    .attr('y', function () {
+                    return y(d1.value) - 3 - 40 - 10;
                 })
-                    .attr('style', 'font-size: ' + '.85em' + ';' + ' font-weight:' + 'bold' + ';')
-                    .style('fill', function (d) {
-                    return metaData.colors[d.key];
+                    .attr('width', function () {
+                    if (metaData.hasDrillDown) {
+                        if (tempScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
+                            return '180px';
+                        }
+                        return tempScale.bandwidth() + leftAndRightSpaces * 2;
+                    }
+                    else {
+                        return tempScale.bandwidth() + leftAndRightSpaces * 2;
+                    }
                 })
-                    .attr('width', self.isZoomedOut ? xSubgroup.bandwidth() : xSubgroup.bandwidth())
-                    .text(function (d) {
-                    return d.value;
+                    .attr('height', 40)
+                    .append('xhtml:div')
+                    .attr('class', 'title')
+                    .style('z-index', 99)
+                    .html(function () {
+                    let barLabel = d1.key;
+                    let dataType = metaData.dataType ? metaData.dataType : '';
+                    let value = d1.value;
+                    let desiredText = '<span class="title-bar-name">' + barLabel + '</span>';
+                    desiredText +=
+                        '<span class="title-bar-value"><span>' +
+                            value +
+                            '</span>' +
+                            dataType +
+                            '</span>';
+                    return desiredText;
                 });
             });
         }