@acorex/charts 22.3.20 → 22.3.22

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

@@ -396,15 +396,7 @@ class AXBarChartComponent extends AXChartComponent {
             .domain(data.map((d) => d.id))
             .range([0, this.width])
             .padding(padding);
-        // Create y scale (linear scale for values)
-        // Support negative values by calculating min/max
-        const minValue = this.d3.min(data, (d) => d.value) || 0;
-        const maxValue = this.d3.max(data, (d) => d.value) || 0;
-        this.yScale = this.d3
-            .scaleLinear()
-            .domain([Math.min(0, minValue), Math.max(0, maxValue)])
-            .nice()
-            .range([this.height, 0]);
+        this.setupYScale(data.map((item) => item.value));
     }
     /**
      * Creates x and y scales for clustered charts
@@ -433,13 +425,51 @@ class AXBarChartComponent extends AXChartComponent {
                     allVisibleValues.push(item.value);
             });
         }
-        const yMin = this.d3.min(allVisibleValues) || 0;
-        const yMax = this.d3.max(allVisibleValues) || 0;
-        this.yScale = this.d3
-            .scaleLinear()
-            .domain([Math.min(0, yMin), Math.max(0, yMax)])
-            .nice()
-            .range([this.height, 0]);
+        this.setupYScale(allVisibleValues);
+    }
+    /**
+     * Whole-number spans of 0–8 stay on integer ticks.
+     * `.nice()` on 0–1 otherwise subdivides the axis into 0.1 steps.
+     */
+    setupYScale(values) {
+        const finite = values.filter((value) => Number.isFinite(value));
+        const dataMin = finite.length > 0 ? (this.d3.min(finite) ?? 0) : 0;
+        const dataMax = finite.length > 0 ? (this.d3.max(finite) ?? 0) : 0;
+        const yMin = Math.min(0, dataMin);
+        const yMax = Math.max(0, dataMax);
+        const ySpan = yMax - yMin;
+        const integralDomain = finite.every((value) => Number.isInteger(value)) && Number.isInteger(yMin) && Number.isInteger(yMax);
+        if (integralDomain && ySpan <= 8) {
+            const upper = ySpan === 0 ? yMax + 1 : yMax;
+            this.yScale = this.d3.scaleLinear().domain([yMin, upper]).range([this.height, 0]);
+            return;
+        }
+        this.yScale = this.d3.scaleLinear().domain([yMin, yMax]).nice().range([this.height, 0]);
+        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]);
+        }
+    }
+    /** 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 ticks = [];
+        for (let value = min; value <= max; value += 1) {
+            ticks.push(value);
+        }
+        return ticks;
     }
     /**
      * Creates x and y axes with grid lines
@@ -466,17 +496,22 @@ class AXBarChartComponent extends AXChartComponent {
     }
     createYAxis(axesGroup, options) {
         // Create Y axis with smart number formatting
+        const yTickValues = this.resolveYAxisTickValues();
         const yAxisGenerator = this.d3.axisLeft(this.yScale).tickFormat((value) => {
             const numValue = typeof value === 'number' ? value : value.valueOf();
             return formatLargeNumber(numValue);
         });
-        // Reduce tick count for better readability
-        const maxValue = this.yScale.domain()[1];
-        if (maxValue > 1e6) {
-            yAxisGenerator.ticks(6); // Fewer ticks for large numbers
+        if (yTickValues) {
+            yAxisGenerator.tickValues(yTickValues);
         }
-        else if (maxValue > 1e3) {
-            yAxisGenerator.ticks(8);
+        else {
+            const maxValue = this.yScale.domain()[1];
+            if (maxValue > 1e6) {
+                yAxisGenerator.ticks(6);
+            }
+            else if (maxValue > 1e3) {
+                yAxisGenerator.ticks(8);
+            }
         }
         this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(yAxisGenerator);
         // Style the axis text
@@ -585,13 +620,18 @@ class AXBarChartComponent extends AXChartComponent {
         return tickLabelText.length * this.DEFAULT_FONT_SIZE * this.FONT_WIDTH_MULTIPLIER + this.FONT_PADDING;
     }
     createGridLines() {
+        const yTickValues = this.resolveYAxisTickValues();
+        const gridAxis = this.d3
+            .axisLeft(this.yScale)
+            .tickSize(-this.width)
+            .tickFormat(() => '');
+        if (yTickValues) {
+            gridAxis.tickValues(yTickValues);
+        }
         this.chart
             .append('g')
             .attr('class', 'ax-bar-chart-grid')
-            .call(this.d3
-            .axisLeft(this.yScale)
-            .tickSize(-this.width)
-            .tickFormat(() => ''))
+            .call(gridAxis)
             .selectAll('line')
             .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
             .style('stroke-opacity', 0.2);