axidio-styleguide-library1-v2 0.2.90 → 0.2.92

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

@@ -7786,11 +7786,111 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         }
     }
     // ==================== HELPER METHODS ====================
+    // private renderXAxis(svg, x, height, metaData, subgroups, data, 
+    //   shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
+    //   let alternate_text = false;
+    //   if (this.chartConfiguration.isMultiChartGridLine === undefined) {
+    //     // Normal ticks for dashboard charts
+    //     // Dynamically adjust Y translation for mobile
+    //     let translateY = height;
+    //     if (isMobile) {
+    //       translateY = height + 26; // Add extra space at the top for mobile
+    //     }
+    //     svg.append('g')
+    //       .attr('class', 'x1 axis1')
+    //       .attr('transform', `translate(0,${translateY})`)
+    //       .call(d3.axisBottom(x))
+    //       .call((g) => g.select('.domain').remove());
+    //     svg.selectAll('g.x1.axis1 g.tick line').remove();
+    //     const yOffset = subgroups.length > 1 && !metaData.xLabel ? 32 : 0;
+    //     svg.selectAll('g.x1.axis1 g.tick text')
+    //       .attr('class', 'lib-xaxis-labels-texts-drilldown')
+    //       .style('fill', 'var(--chart-text-color)')
+    //       .attr('y', yOffset || null);
+    //   } else {
+    //     // Bigger ticks for weekly charts
+    //     svg.append('g')
+    //       .attr('class', 'x1 axis1')
+    //       .attr('transform', `translate(0,${height})`)
+    //       .call(d3.axisBottom(x).tickSize(0))
+    //       .call((g) => g.select('.domain').attr('fill', 'none'));
+    //     // Alternate tick line sizes
+    //     svg.selectAll('g.x1.axis1 g.tick line').attr('y2', function () {
+    //       if (alternate_text && self.chartConfiguration.isNoAlternateXaxisText === undefined) {
+    //         alternate_text = false;
+    //         return longTickLengthBg - 7;
+    //       } else {
+    //         alternate_text = true;
+    //         return shortTickLengthBg - 4;
+    //       }
+    //     });
+    //     alternate_text = false;
+    //     // X-axis label texts
+    //     svg.selectAll('g.x1.axis1 g.tick text')
+    //       .attr('class', 'lib-xaxis-labels-texts-weeklycharts')
+    //       .attr('y', function () {
+    //         if (self.chartConfiguration.isFullScreen) {
+    //           return shortTickLengthBg;
+    //         }
+    //         if (alternate_text) {
+    //           alternate_text = false;
+    //           return longTickLengthBg;
+    //         } else {
+    //           alternate_text = true;
+    //           return shortTickLengthBg;
+    //         }
+    //       });
+    //   }
+    //   // Apply labels on same line configuration
+    //   if (self.chartConfiguration.xLabelsOnSameLine) {
+    //     this.applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, 
+    //       shortTickLengthBg, isMobile, isria);
+    //   }
+    //   // Mobile override for RIA
+    //   if (isria && self.chartData.data.length > 8) {
+    //     svg.selectAll('g.x1.axis1 g.tick text')
+    //       .classed('mobile-xaxis-override', true)
+    //       .text((d: string) => d.substring(0, 3))
+    //       .style('font-size', '12px')
+    //       .attr('y', 5)
+    //       .attr('x', 5)
+    //       .style('text-anchor', 'middle');
+    //   }
+    //   // Mobile/tablet override - check for single-group date charts first
+    //   if (isMobile) {
+    //     const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
+    //     const groupsCount = (data as any).length || 0;
+    //     // Check if we have dates in x-axis and single group
+    //     let hasDateValues = false;
+    //     textNodes.each(function(d) {
+    //       // Check for date values using both Date.parse and regex for date format
+    //         const isDateString =
+    //     /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(d.trim()) ||
+    //     /^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(d.trim());
+    //       if (!hasDateValues && isDateString) {
+    //         hasDateValues = true;
+    //       }
+    //     });
+    //     if (hasDateValues && subgroups && subgroups.length < 3) {
+    //       // For single chart with dates, ensure horizontal display
+    //       textNodes
+    //         .style('writing-mode', 'horizontal-tb')  // Explicitly set horizontal
+    //         .classed('mobile-xaxis-override', false) // Remove vertical class
+    //         .attr('transform', 'rotate(0)')          // Remove any rotation
+    //         .attr('text-anchor', 'middle')           // Center align
+    //         .attr('y', 20)                          // Push down a bit
+    //         .attr('dx', '0')                        // Reset any x offset
+    //         .attr('dy', '0');                       // Reset any y offset
+    //     } else if (!this.isHeaderVisible) {
+    //       // Default mobile behavior for non-date or multi-group
+    //       textNodes.classed('mobile-xaxis-override', true);
+    //     }  
+    //   }
+    // }
     renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
         let alternate_text = false;
         if (this.chartConfiguration.isMultiChartGridLine === undefined) {
             // Normal ticks for dashboard charts
-            // Dynamically adjust Y translation for mobile
             let translateY = height;
             if (isMobile) {
                 translateY = height + 26; // Add extra space at the top for mobile
@@ -7814,7 +7914,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('transform', `translate(0,${height})`)
                 .call(d3.axisBottom(x).tickSize(0))
                 .call((g) => g.select('.domain').attr('fill', 'none'));
-            // Alternate tick line sizes
             svg.selectAll('g.x1.axis1 g.tick line').attr('y2', function () {
                 if (alternate_text && self.chartConfiguration.isNoAlternateXaxisText === undefined) {
                     alternate_text = false;
@@ -7826,13 +7925,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 }
             });
             alternate_text = false;
-            // X-axis label texts
             svg.selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-weeklycharts')
                 .attr('y', function () {
-                if (self.chartConfiguration.isFullScreen) {
+                if (self.chartConfiguration.isFullScreen)
                     return shortTickLengthBg;
-                }
                 if (alternate_text) {
                     alternate_text = false;
                     return longTickLengthBg;
@@ -7857,33 +7954,46 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('x', 5)
                 .style('text-anchor', 'middle');
         }
-        // Mobile/tablet override - check for single-group date charts first
+        // Mobile/tablet override
+        const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
+        let hasDateValues = false;
+        textNodes.each(function (d) {
+            const isDateString = /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(d.trim()) ||
+                /^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(d.trim()) ||
+                /^\d{1,2}\/\d{1,2}\/\d{4}\s*week\s*\d+$/i.test(d.trim());
+            if (!hasDateValues && isDateString)
+                hasDateValues = true;
+        });
+        // Trim "week" and year in labels if present
+        textNodes.text(function (d) {
+            if (/week/i.test(d)) {
+                // Example: "10/02/2025 week 23" → "10/02"
+                const match = d.match(/^(\d{1,2}\/\d{1,2})/);
+                return match ? match[1] : d.replace(/week\s*\d+/i, '').trim();
+            }
+            return d;
+        });
+        // Apply rotation for tablet view with date labels
+        if (isTablet && hasDateValues) {
+            textNodes
+                .style('writing-mode', 'sideways-lr')
+                .style('text-anchor', 'start')
+                .attr('dy', '0.5em')
+                .attr('dx', '-0.3em');
+        }
+        // For mobile - ensure horizontal spacing and adjustment
         if (isMobile) {
-            const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
             const groupsCount = data.length || 0;
-            // Check if we have dates in x-axis and single group
-            let hasDateValues = false;
-            textNodes.each(function (d) {
-                // Check for date values using both Date.parse and regex for date format
-                const isDateString = /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(d.trim()) ||
-                    /^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(d.trim());
-                if (!hasDateValues && isDateString) {
-                    hasDateValues = true;
-                }
-            });
             if (hasDateValues && subgroups && subgroups.length < 3) {
-                // For single chart with dates, ensure horizontal display
                 textNodes
-                    .style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
-                    .classed('mobile-xaxis-override', false) // Remove vertical class
-                    .attr('transform', 'rotate(0)') // Remove any rotation
-                    .attr('text-anchor', 'middle') // Center align
-                    .attr('y', 20) // Push down a bit
-                    .attr('dx', '0') // Reset any x offset
-                    .attr('dy', '0'); // Reset any y offset
+                    .style('writing-mode', 'horizontal-tb')
+                    .attr('transform', 'rotate(0)')
+                    .attr('text-anchor', 'middle')
+                    .attr('y', 20)
+                    .attr('dx', '0')
+                    .attr('dy', '0');
             }
             else if (!this.isHeaderVisible) {
-                // Default mobile behavior for non-date or multi-group
                 textNodes.classed('mobile-xaxis-override', true);
             }
         }
@@ -7953,19 +8063,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // Check if we're on mobile or tablet
         const isSmallScreen = window.innerWidth < 992; // Less than 992px (mobile or tablet)
         // Check if label contains both date and week information
-        const formatDatePart = (dateStr) => {
-            // Match different date formats: MM/DD/YYYY, YYYY/MM/DD, etc.
-            const match = dateStr.match(/(\d{1,4})[-\/](\d{1,2})[-\/](\d{1,4})/);
-            if (!match)
-                return dateStr;
-            const [_, part1, part2, part3] = match;
-            // Check if year is first (YYYY/MM/DD)
-            if (part1.length === 4) {
-                return `${part2}/${part3}`; // Return MM/DD
-            }
-            // For MM/DD/YYYY format
-            return `${part1}/${part2}`; // Return MM/DD
-        };
         const hasDateAndTime = (text) => {
             const dateMatch = /\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/.test(text) || !isNaN(Date.parse(text));
             const weekMatch = /week|wk|w\d+/i.test(text);
@@ -7975,10 +8072,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         // Apply date-week trimming only for mobile and tablet screens
         if (isSmallScreen && labelInfo.isDate && labelInfo.isWeek) {
             const datePart = d.match(/\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/);
-            if (datePart) {
-                return formatDatePart(datePart[0]);
-            }
-            return d;
+            return datePart ? datePart[0] : d;
         }
         // Mobile handling: keep date labels intact for single-series charts (do not trim)
         if (isMobile) {