@acorex/charts 22.1.7 → 22.2.0-next.0

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

@@ -661,16 +661,57 @@ class AXLineChartComponent extends AXChartComponent {
             yMin = dataYMin;
             yMax = dataYMax;
         }
-        const yRange = yMax - yMin || 1;
-        this.yScale = this.d3
-            .scaleLinear()
-            .domain([yMin, yMax + yRange * paddingMultiplier])
-            .nice()
-            .range([this.height, 0]);
+        const ySpan = yMax - yMin;
+        const integralDomain = allDataPoints.every((point) => Number.isFinite(point.y) && Number.isInteger(point.y)) &&
+            Number.isInteger(yMin) &&
+            Number.isInteger(yMax);
+        // A 5% pad on 0–1 becomes 1.05, and d3.nice() then stretches that to 1.1 with 0.1 ticks.
+        if (integralDomain && ySpan <= 8) {
+            const upper = ySpan === 0 ? yMax + 1 : yMax;
+            const inset = Math.min(this.wholeNumberRangeInset(), Math.floor(this.height / 4));
+            this.yScale = this.d3
+                .scaleLinear()
+                .domain([yMin, upper])
+                .range([Math.max(inset, this.height - inset), inset]);
+            return;
+        }
+        // A zero span used to become `1 * axisPadding%` (0.05). D3 then drew 0.005 ticks for an all-zero series.
+        const domainMax = ySpan === 0 ? yMax + 1 : yMax + ySpan * paddingMultiplier;
+        this.yScale = this.d3.scaleLinear().domain([yMin, domainMax]).nice().range([this.height, 0]);
         if (yAxisStartsAtZero && dataYMin >= 0) {
-            this.yScale.domain([0, this.yScale.domain()[1]]);
+            const upper = dataYMax === 0 ? Math.max(1, this.yScale.domain()[1]) : this.yScale.domain()[1];
+            this.yScale.domain([0, upper]);
+        }
+        if (integralDomain) {
+            const [niceMin, niceMax] = this.yScale.domain();
+            const snappedMin = Math.floor(niceMin);
+            const snappedMax = Math.max(snappedMin + 1, Math.ceil(niceMax));
+            this.yScale.domain([snappedMin, snappedMax]);
         }
     }
+    /** Keeps a point that sits on the domain edge inside the clipped SVG. */
+    wholeNumberRangeInset() {
+        const options = this.effectiveOptions();
+        const pointRadius = options.showPoints === false ? 0 : (options.pointRadius ?? this.DEFAULT_POINT_RADIUS);
+        const stroke = (options.lineWidth ?? this.DEFAULT_LINE_WIDTH) / 2;
+        return Math.ceil(Math.max(pointRadius, stroke) + 1);
+    }
+    /** Integer ticks for a short whole-number domain so D3 does not subdivide 0–1 into decimals. */
+    resolveYAxisTickValues() {
+        const [min, max] = this.yScale.domain();
+        if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min)
+            return null;
+        if (!Number.isInteger(min) || !Number.isInteger(max))
+            return null;
+        const span = max - min;
+        if (span > 8)
+            return null;
+        const values = [];
+        for (let value = min; value <= max; value += 1) {
+            values.push(value);
+        }
+        return values;
+    }
     createAxes(options) {
         const showXAxis = options.showXAxis !== false;
         const showYAxis = options.showYAxis !== false;
@@ -766,6 +807,7 @@ class AXLineChartComponent extends AXChartComponent {
                 this.createXAxisTitle(axesGroup, options.xAxisLabel, xTickAreaHeight, dynamicXAxisTickFontSize);
             }
         }
+        const yTickValues = this.resolveYAxisTickValues();
         if (showYAxis) {
             // Create Y axis with smart number formatting
             const yAxisGenerator = this.d3
@@ -776,13 +818,18 @@ class AXLineChartComponent extends AXChartComponent {
                 const numValue = typeof value === 'number' ? value : value.valueOf();
                 return formatLargeNumber(numValue);
             });
-            // Reduce tick count for better readability with large numbers
-            const maxValue = this.yScale.domain()[1];
-            if (maxValue > 1e6) {
-                yAxisGenerator.ticks(6); // Fewer ticks for millions+
+            if (yTickValues) {
+                yAxisGenerator.tickValues(yTickValues);
             }
-            else if (maxValue > 1e3) {
-                yAxisGenerator.ticks(8);
+            else {
+                // Reduce tick count for better readability with large numbers
+                const maxValue = this.yScale.domain()[1];
+                if (maxValue > 1e6) {
+                    yAxisGenerator.ticks(6); // Fewer ticks for millions+
+                }
+                else if (maxValue > 1e3) {
+                    yAxisGenerator.ticks(8);
+                }
             }
             this.yAxis = axesGroup.append('g').attr('class', 'ax-line-chart-axis-y').call(yAxisGenerator);
             // Style the y-axis path and lines
@@ -822,7 +869,7 @@ class AXLineChartComponent extends AXChartComponent {
                 .axisLeft(this.yScale)
                 .tickSize(-this.width)
                 .tickFormat(() => '')
-                .tickValues(this.yScale.ticks()));
+                .tickValues(yTickValues ?? this.yScale.ticks()));
             // Style the grid path and lines
             yGrid.selectAll('path').attr('stroke-width', '0');
             yGrid
@@ -1255,10 +1302,10 @@ class AXLineChartComponent extends AXChartComponent {
             this.showCrosshairLines(overlappingPoints[0].point);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-line-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.25rem,.6vw,.5rem);contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgba(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;flex-shrink:0;overflow:hidden}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-line-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.25rem,.6vw,.5rem);contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgba(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;flex-shrink:0;overflow:hidden}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-line-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.25rem,.6vw,.5rem);contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgba(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;flex-shrink:0;overflow:hidden}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });