@acorex/charts 20.1.23 → 20.1.25

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

@@ -157,7 +157,7 @@ class AXGaugeChartComponent {
         const effectiveHeight = Math.max(height, 50);
         // For a semi-circular gauge, width should be approximately twice the height
         const size = Math.min(effectiveWidth, effectiveHeight * 2);
-        const margin = size * 0.1;
+        const margin = Math.max(8, size * 0.08);
         // Set up SVG with responsive viewBox
         const svg = this.d3
             .select(this.svgElement)
@@ -169,7 +169,9 @@ class AXGaugeChartComponent {
         const chartGroup = svg.append('g').attr('transform', `translate(${size / 2}, ${size / 2 - margin})`);
         // Define gauge parameters
         const radius = size / 2 - margin;
-        const innerRadius = radius - gaugeWidth;
+        const desiredGaugeWidth = typeof gaugeWidth === 'number' && !Number.isNaN(gaugeWidth) ? gaugeWidth : size * 0.12;
+        const clampedGaugeWidth = Math.max(size * 0.06, Math.min(desiredGaugeWidth, size * 0.2));
+        const innerRadius = radius - clampedGaugeWidth;
         const outerRadius = radius;
         // Create gradient definitions
         this.createGradients(svg, thresholds);
@@ -180,12 +182,12 @@ class AXGaugeChartComponent {
             this.drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius);
         }
         // Draw tick marks
-        this.drawTicks(chartGroup, outerRadius, minValue, maxValue);
+        this.drawTicks(chartGroup, outerRadius, minValue, maxValue, size);
         // Draw the dial/needle with animation
         this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, animationDuration);
         // Draw the value display (after the dial so it's on top)
         if (showValue) {
-            this.drawValueDisplay(chartGroup, this.value(), label, radius);
+            this.drawValueDisplay(chartGroup, this.value(), label, radius, size);
         }
         // Hide tooltip initially
         this._tooltipVisible.set(false);
@@ -209,11 +211,6 @@ class AXGaugeChartComponent {
         const easingFunction = this.getEasingFunction(options.animationEasing);
         const currentValue = value;
         const svg = this.d3.select(this.svgElement);
-        // Get chart size from SVG viewBox
-        const viewBoxValues = svg.attr('viewBox')?.split(' ').map(Number) || [0, 0, 300, 150];
-        const size = viewBoxValues[2];
-        const margin = size * 0.1;
-        const radius = size / 2 - margin;
         // Update value text
         svg.select('.gauge-value').text(currentValue.toLocaleString());
         // Update needle position
@@ -392,10 +389,8 @@ class AXGaugeChartComponent {
         const y = event.clientY - container.top;
         // Get container dimensions to check if we're near the edge
         const containerWidth = container.width;
-        const containerHeight = container.height;
         // Tooltip dimensions approximation (can't get exact dimensions without rendering)
         const tooltipWidth = 150; // Approximate width of tooltip
-        const tooltipHeight = 80; // Approximate height of tooltip
         // Calculate position with edge detection
         let tooltipX = x + 8; // fix overlap with cursor
         const tooltipY = y - 12; // fix overlap with cursor
@@ -483,10 +478,17 @@ class AXGaugeChartComponent {
     /**
      * Draws tick marks and labels around the gauge
      */
-    drawTicks(chartGroup, radius, minValue, maxValue) {
-        const tickCount = 5; // Number of ticks including min and max
-        const tickLength = radius * 0.1;
-        const labelOffset = radius * 0.15;
+    drawTicks(chartGroup, radius, minValue, maxValue, size) {
+        // Dynamically choose tick count based on chart size
+        let tickCount = 5;
+        if (size < 260)
+            tickCount = 3;
+        else if (size < 340)
+            tickCount = 4;
+        else if (size > 520)
+            tickCount = 7;
+        const tickLength = Math.max(6, Math.min(radius * 0.12, 14));
+        const labelOffset = Math.max(radius * 0.12, 22);
         // Create a group for the ticks
         const tickGroup = chartGroup.append('g').attr('class', 'ticks');
         // Generate tick values
@@ -517,7 +519,8 @@ class AXGaugeChartComponent {
                 .attr('y2', y2)
                 .attr('stroke', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.5)')
                 .attr('stroke-width', 2);
-            // Add tick label
+            // Add tick label with dynamic font size
+            const tickFontPx = Math.max(9, Math.min(12, Math.floor(size / 40)));
             tickGroup
                 .append('text')
                 .attr('x', labelX)
@@ -525,18 +528,18 @@ class AXGaugeChartComponent {
                 .attr('text-anchor', 'middle')
                 .attr('dominant-baseline', 'middle')
                 .attr('fill', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.7)')
-                .style('font-size', '12px')
-                .text(tick.toLocaleString());
+                .style('font-size', `${tickFontPx}px`)
+                .text(tick.toFixed(0).toLocaleString());
         });
     }
     /**
      * Draws the value and label text in the center
      */
-    drawValueDisplay(chartGroup, value, label, radius) {
-        // Calculate appropriate font sizes based on chart dimensions
-        const chartContainerWidth = this.chartContainerEl().nativeElement.clientWidth;
-        const baseFontSize = Math.max(1.4, Math.min(2.4, chartContainerWidth / 200)); // Scale between 1.4rem and 2.4rem
-        const subTextFontSize = baseFontSize * 0.5;
+    drawValueDisplay(chartGroup, value, label, radius, size) {
+        // Px-based scaling for robust small/large sizes
+        const valueFontPx = Math.max(14, Math.min(32, Math.floor(size / 8)));
+        const labelFontPx = Math.max(10, Math.min(16, Math.floor(valueFontPx * 0.55)));
+        const verticalGap = Math.max(4, Math.min(10, Math.floor(size / 60)));
         // Create group for the value display
         const valueGroup = chartGroup.append('g').attr('class', 'gauge-value-display').attr('text-anchor', 'middle');
         // Add value display
@@ -544,8 +547,8 @@ class AXGaugeChartComponent {
             .append('text')
             .attr('class', 'gauge-value')
             .attr('x', 0)
-            .attr('y', radius * 0.25)
-            .style('font-size', `${baseFontSize}rem`)
+            .attr('y', radius * 0.15 + valueFontPx)
+            .style('font-size', `${valueFontPx}px`)
             .style('font-weight', '600')
             .style('fill', 'rgb(var(--ax-comp-gauge-chart-text-color))')
             .text(value.toLocaleString());
@@ -555,8 +558,8 @@ class AXGaugeChartComponent {
                 .append('text')
                 .attr('class', 'gauge-label')
                 .attr('x', 0)
-                .attr('y', radius * 0.35)
-                .style('font-size', `${subTextFontSize}rem`)
+                .attr('y', radius * 0.24 + valueFontPx + verticalGap)
+                .style('font-size', `${labelFontPx}px`)
                 .style('fill', 'rgb(var(--ax-comp-gauge-chart-text-color))')
                 .style('opacity', '0.8')
                 .text(label);
@@ -670,10 +673,10 @@ class AXGaugeChartComponent {
     radiansToDegrees(radians) {
         return radians * (180 / Math.PI);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"] }]
         }], ctorParameters: () => [] });