axidio-styleguide-library1-v2 0.1.27 → 0.1.29

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

@@ -3939,8 +3939,8 @@ class GroupChartComponent extends ComponentUniqueId {
         else {
             x = d3
                 .scaleBand()
-                .domain(groups)
                 .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
+                .domain(groups).reverse()
                 .padding([0.3]);
         }
         // x.bandwidth(96);
@@ -4557,29 +4557,30 @@ class GroupChartComponent extends ComponentUniqueId {
                 .attr('class', 'title')
                 .style('z-index', 99)
                 .html(function () {
-                let dataType = metaData.dataType ? metaData.dataType : '';
-                if (!self.isZoomedOut) {
-                    let desiredText = '<span class="title-bar-name">' + d.name + '</span>';
-                    desiredText +=
-                        '<span class="title-bar-value"><span>' +
-                            d.Value +
-                            '</span>' +
+                if (!isNaN(d[1] - d[0])) {
+                    if (d[1] - d[0] === 0) {
+                        return '<span class="title-top-text">0</span>';
+                    }
+                    var dataType = metaData.dataType ? metaData.dataType : '';
+                    var desiredText = '';
+                    desiredText =
+                        '<span class="title-bar-name">' +
+                            (d.data.name ? d.data.name : '') +
+                            '</span>';
+                    desiredText += metaData.unit
+                        ? '<span class="title-top-text">' +
+                            metaData.unit +
+                            (d[1] - d[0]) +
+                            dataType +
+                            '</span>'
+                        : '<span class="title-top-text">' +
+                            (d[1] - d[0]) +
                             dataType +
                             '</span>';
                     return desiredText;
                 }
-                else {
-                    let tempKey = d.name.length <= 8 ? d.name : d.name.substring(0, 5) + '...';
-                    let desiredText = '<span class="title-bar-name">' +
-                        tempKey +
-                        ':' +
-                        d.Value +
-                        dataType +
-                        '</span>';
-                    desiredText +=
-                        '<span class="title-bar-value">' + d.name + '</span>';
-                    return desiredText;
-                }
+                else
+                    return;
             });
         }
         function handleMouseOut(d, i) {
@@ -7392,14 +7393,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         ])
             .domain(data.map(function (d) {
             return d.name;
-        }))
+        }).reverse())
             .padding(isMobile ? 0.2 : 0.5);
         var xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - rightSvgWidth, 0])
             .domain(data.map(function (d) {
             return d.name;
-        }));
+        }).reverse());
         // ...existing code...
         /**
          * draw second x axis on top
@@ -8551,7 +8552,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         var height = parseInt(verticalstackedcontainer.style('height')) *
             (self.chartConfiguration.svgHeight / 100) -
             margin.top -
-            margin.bottom;
+            margin.bottom + 30;
         /**
          * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
          */
@@ -8642,7 +8643,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .append('svg')
             // .attr('id', self.uniqueId)
             .attr('width', width - rightSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 60)
+            .attr('height', height + margin.top + margin.bottom + 30)
             // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8778,19 +8779,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (self.chartConfiguration.xLabelsOnSameLine) {
-            const xAxisLabels = svg
+            svg
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .style('font-size', this.isHeaderVisible ? '18px' : '14px')
-                .attr('text-anchor', 'middle')
                 .attr('y', function (d) {
-                // For grouped bar charts with many bars and xLabel present, only add 5 if the label is a date
+                // 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) {
-                    const isDateLabel = /\d{2,4}[-\/]/.test(d);
+                    // In maximized (fullscreen) view, keep the gap minimal
                     if (self.chartConfiguration.isFullScreen) {
-                        return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
+                        return short_tick_length_bg;
                     }
-                    return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
+                    return short_tick_length_bg;
                 }
                 // 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) {
@@ -8839,37 +8839,8 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 if (isValueToBeIgnored) {
                     return '';
                 }
-                // Always add space before and after hyphen for date range labels, even when header is visible and label is single line
-                // Apply for grouped bar charts and single bar charts, header visible, single line
-                const dateRangeRegex = /(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})\s*-\s*(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})/;
-                if (dateRangeRegex.test(d.trim())) {
-                    return d.trim().replace(dateRangeRegex, (m, d1, d2) => `${d1} - ${d2}`);
-                }
-                // Split date and week labels into two lines in grouped bar zoom-in view (and minimized view)
-                const isDateLabel = /\d{2,4}[-\/]/.test(d);
-                const isWeekLabel = /week|wk|w\d+/i.test(d);
-                if (subgroups.length > 1 && !self.isZoomedOut && data.length > 8 && d.indexOf(' ') > -1 && (isDateLabel || isWeekLabel)) {
-                    var first = d.substring(0, d.indexOf(' '));
-                    var second = d.substring(d.indexOf(' ') + 1).trim();
-                    return first + '\n' + second;
-                }
-                // Also keep previous logic for minimized view
-                if (isDateLabel) {
-                    if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
-                        var first = d.substring(0, d.indexOf(' '));
-                        var second = d.substring(d.indexOf(' ') + 1).trim();
-                        return first + '\n' + second;
-                    }
-                    else {
-                        return d;
-                    }
-                }
-                if (d.trim().indexOf(' ') > -1) {
-                    return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
-                }
-                return d.toLowerCase();
                 // If label looks like a date (contains digits and - or /)
-                const isDateLabel2 = /\d{2,4}[-\/]/.test(d);
+                const isDateLabel = /\d{2,4}[-\/]/.test(d);
                 // Only split date/week labels if there are many grouped bars and header is not visible
                 if (isDateLabel) {
                     if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
@@ -8886,15 +8857,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
                 return d.toLowerCase();
             });
-            // Now apply writing-mode: sideways-lr for grouped charts with date labels in zoomed-out view and many bars
-            xAxisLabels.each(function (d) {
-                // Only apply writing-mode for exact date labels, not those containing 'week' or similar
-                const isDateLabel = /^(\d{2,4}[-\/])?\d{2,4}[-\/]\d{2,4}$/.test(d.trim());
-                const isWeekLabel = /week|wk|w\d+/i.test(d);
-                if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
-                    d3.select(this).style('writing-mode', 'sideways-lr');
-                }
-            });
             if (!isMobile) {
                 svg
                     .selectAll('g.x1.axis1 g.tick')
@@ -9047,19 +9009,20 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         var xSubgroup = d3.scaleBand().domain(subgroups);
-        if (subgroups.length > 1 && !this.isZoomedOut) {
+        // Weekly shipped/planned daily grouped chart: increase bar width for both zoom-in and zoom-out views
+        if (subgroups.length > 1 && this.chartConfiguration.isMultiChartGridLine) {
+            xSubgroup.range([0, x.bandwidth() * 1.2]).padding(0.05);
+        }
+        else if (subgroups.length > 1 && !this.isZoomedOut) {
             // For grouped bar charts in zoom-in view, reduce padding between bars
-            xSubgroup.range([0, x.bandwidth()]);
+            xSubgroup.range([0, x.bandwidth()]).padding(0.05);
         }
         else if (subgroups.length === 1 && !this.isZoomedOut) {
-            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 100 (increased from 80)
-            xSubgroup.range([0, 100]);
-        }
-        else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            xSubgroup.range([0, x.bandwidth()]);
+            // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
+            xSubgroup.range([0, 80]);
         }
         else {
-            // used to make grouped bars with lesser width as we are not using padding for width
+            // All other cases (including zoomed-out), use full bandwidth
             xSubgroup.range([0, x.bandwidth()]);
         }
         // if (this.chartConfiguration.isDrilldownChart) {
@@ -9116,7 +9079,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 30;
+                                reducedBarWidth = 80;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9157,7 +9120,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             .attr('width', function (d) {
             // For grouped bar charts in zoom-in view, slightly increase bar width for both bars (shipped and planned)
             if (subgroups.length > 1 && !self.isZoomedOut) {
-                return xSubgroup.bandwidth() * 0.2;
+                return xSubgroup.bandwidth() * 0.5;
             }
             // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
             if (subgroups.length === 1 && !self.isZoomedOut) {
@@ -9173,7 +9136,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                             // Increase bar width a bit in zoom-in view
                             let reducedBarWidth = 60;
                             if (!self.isZoomedOut) {
-                                reducedBarWidth = 100;
+                                reducedBarWidth = 80;
                             }
                             if (self.chartData.data.length == 1) {
                                 if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9694,7 +9657,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
             }
             const xLabelText = metaData.xLabel;
             const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
-            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 40);
+            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
             svg
                 .append('text')
                 .attr('class', function () {