axidio-styleguide-library1-v2 0.2.92 → 0.2.93

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

@@ -7786,111 +7786,11 @@ 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
@@ -7914,6 +7814,7 @@ 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;
@@ -7925,11 +7826,13 @@ 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;
@@ -7954,46 +7857,33 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('x', 5)
                 .style('text-anchor', 'middle');
         }
-        // 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
+        // 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.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')
-                    .attr('transform', 'rotate(0)')
-                    .attr('text-anchor', 'middle')
-                    .attr('y', 20)
-                    .attr('dx', '0')
-                    .attr('dy', '0');
+                    .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);
             }
         }
@@ -8070,9 +7960,26 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
         };
         const labelInfo = hasDateAndTime(d);
         // 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}/);
-            return datePart ? datePart[0] : d;
+        // Mobile: show full date (including year). Tablet: show only month/day.
+        const isMobileScreen = window.innerWidth < 576;
+        const isTabletScreen = window.innerWidth >= 576 && window.innerWidth < 992;
+        if ((isMobileScreen || isTabletScreen) && labelInfo.isDate && labelInfo.isWeek) {
+            const datePartMatch = d.match(/\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/);
+            if (!datePartMatch)
+                return d;
+            const datePart = datePartMatch[0];
+            if (isTabletScreen) {
+                // Return only MM/DD (handle both YYYY/MM/DD and MM/DD/YYYY)
+                const parts = datePart.split(/[-\/]/);
+                if (parts[0].length === 4) {
+                    // YYYY/MM/DD -> MM/DD
+                    return `${parts[1]}/${parts[2]}`;
+                }
+                // MM/DD/YYYY -> MM/DD
+                return `${parts[0]}/${parts[1]}`;
+            }
+            // Mobile: return full date including year
+            return datePart;
         }
         // Mobile handling: keep date labels intact for single-series charts (do not trim)
         if (isMobile) {