@acorex/charts 20.1.4 → 20.1.6

package/fesm2022/acorex-charts-line-chart.mjs

@@ -200,7 +200,7 @@ class AXLineChartComponent extends NXComponent {
             return;
         const containerElement = this.chartContainerEl().nativeElement;
         const allSeriesData = this._fullNormalizedData;
-        this.d3.select(containerElement).selectAll('*').remove();
+        this.d3.select(containerElement).select('svg').remove();
         if (allSeriesData.length === 0 || allSeriesData.every((series) => !series.data || series.data.length === 0)) {
             this.showNoDataMessage(containerElement);
             return;
@@ -243,7 +243,7 @@ class AXLineChartComponent extends NXComponent {
         this._tooltipVisible.set(false);
     }
     setupDimensions(containerElement, options) {
-        this.calculateMargins(options);
+        this.calculateMargins(options, containerElement.clientWidth);
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
         const minDim = Math.min(200, containerWidth, containerHeight);
@@ -276,13 +276,36 @@ class AXLineChartComponent extends NXComponent {
         this.svg = svg;
         this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
     }
-    calculateMargins(options) {
+    calculateMargins(options, containerWidth) {
         this.margin = {
             top: options.margins?.top ?? 20,
             right: options.margins?.right ?? 25,
             bottom: options.margins?.bottom ?? 40,
             left: options.margins?.left ?? 50,
         };
+        const allDataPoints = this._fullNormalizedData.flatMap((series) => series.data);
+        if (allDataPoints.length > 0) {
+            const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
+            if (!allNumericX) {
+                const visibleSeries = this._fullNormalizedData.filter((s) => !this.hiddenSeries.has(s.id || s.label || `series-${s.originalIndex}`));
+                const allXValues = new Set(visibleSeries.flatMap((series) => series.data.map((d) => String(d.x))));
+                const labelCount = allXValues.size;
+                if (labelCount > 0 && containerWidth > 0) {
+                    const workingWidth = containerWidth - this.margin.left - this.margin.right;
+                    if (workingWidth > 0) {
+                        const availableWidthPerLabel = workingWidth / labelCount;
+                        const labels = Array.from(allXValues);
+                        const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b), '');
+                        const estimatedFontSize = Math.max(11, Math.min(15, Math.round(workingWidth / 45)));
+                        const estimatedLongestLabelWidth = longestLabel.length * estimatedFontSize * 0.6;
+                        if (estimatedLongestLabelWidth > availableWidthPerLabel) {
+                            const requiredExtraMargin = estimatedLongestLabelWidth * Math.sin(Math.PI / 4) + 10;
+                            this.margin.bottom += Math.min(60, requiredExtraMargin);
+                        }
+                    }
+                }
+            }
+        }
         if (options.xAxisLabel) {
             const xLabelLength = options.xAxisLabel.length;
             const extraBottomMargin = Math.min(20, Math.max(10, xLabelLength * 0.8));
@@ -312,7 +335,6 @@ class AXLineChartComponent extends NXComponent {
             allDataPoints.push({ x: 0, y: 0 }); // Default fallback to prevent crash with empty domain
         }
         const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
-        const allDates = !allNumericX && allDataPoints.every((d) => !isNaN(new Date(d.x).getTime()));
         if (allNumericX) {
             const xMin = this.d3.min(allDataPoints, (d) => d.x) ?? 0;
             const xMax = this.d3.max(allDataPoints, (d) => d.x) ?? 0;
@@ -326,20 +348,6 @@ class AXLineChartComponent extends NXComponent {
                 this.xScale = this.d3.scaleLinear().domain([xMin, xMax]).range([0, this.width]);
             }
         }
-        else if (allDates) {
-            const xMin = this.d3.min(allDataPoints, (d) => new Date(d.x)) ?? new Date();
-            const xMax = this.d3.max(allDataPoints, (d) => new Date(d.x)) ?? new Date();
-            if (xMin.getTime() === xMax.getTime()) {
-                const oneDayMs = 86400000;
-                this.xScale = this.d3
-                    .scaleTime()
-                    .domain([new Date(xMin.getTime() - oneDayMs), new Date(xMax.getTime() + oneDayMs)])
-                    .range([0, this.width]);
-            }
-            else {
-                this.xScale = this.d3.scaleTime().domain([xMin, xMax]).range([0, this.width]);
-            }
-        }
         else {
             this.xScale = this.d3
                 .scaleBand()
@@ -382,13 +390,27 @@ class AXLineChartComponent extends NXComponent {
                 .attr('stroke-dasharray', '2,2')
                 .attr('stroke-opacity', '0.5');
             const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
-            this.xAxis.selectAll('text').attr('style', `
-          font-size: ${dynamicXAxisTickFontSize}px;
-          font-weight: 400;
-          fill: rgba(var(--ax-comp-line-chart-labels-color), 0.7);
-        `);
+            const xAxisTicks = this.xAxis
+                .selectAll('text')
+                .style('font-size', `${dynamicXAxisTickFontSize}px`)
+                .style('font-weight', '400')
+                .style('fill', 'rgba(var(--ax-comp-line-chart-labels-color), 0.7)');
+            // Automatically rotate labels if they are likely to overlap
+            if (isBandScale && this.xScale.domain().length > 0) {
+                const step = this.xScale.step();
+                const longestLabel = this.xScale.domain().reduce((a, b) => (a.length > b.length ? a : b), '');
+                // Using 0.6 as a better estimate for char width-to-height ratio
+                const estimatedLongestLabelWidth = longestLabel.length * dynamicXAxisTickFontSize * 0.6;
+                if (estimatedLongestLabelWidth > step) {
+                    xAxisTicks
+                        .attr('transform', 'rotate(-45)')
+                        .style('text-anchor', 'end')
+                        .attr('dx', '-0.8em')
+                        .attr('dy', '0.15em');
+                }
+            }
             if (options.xAxisLabel) {
-                const labelY = this.height + this.margin.bottom * 0.8;
+                const labelY = this.height + this.margin.bottom * 0.7;
                 axesGroup
                     .append('text')
                     .attr('class', 'ax-line-chart-axis-label ax-x-axis-label')
@@ -496,7 +518,7 @@ class AXLineChartComponent extends NXComponent {
                 return this.xScale(String(d.x)) + this.xScale.bandwidth() / 2;
             }
             else {
-                return this.xScale(typeof d.x === 'number' ? d.x : new Date(d.x));
+                return this.xScale(d.x);
             }
         };
         const lineGenerator = this.d3
@@ -797,7 +819,7 @@ class AXLineChartComponent extends NXComponent {
             x = this.xScale(String(dataPoint.x)) + this.xScale.bandwidth() / 2;
         }
         else {
-            x = this.xScale(typeof dataPoint.x === 'number' ? dataPoint.x : new Date(dataPoint.x));
+            x = this.xScale(dataPoint.x);
         }
         const y = this.yScale(dataPoint.y);
         let crosshairGroup = this.chart.select('.ax-line-chart-crosshair');