@acorex/charts 21.0.0-next.10 → 21.0.0-next.12

package/bar-chart/index.d.ts

@@ -1,9 +1,8 @@
-import * as _acorex_cdk_common from '@acorex/cdk/common';
-import { AXAnimationEasing, NXNativeEvent, NXComponent } from '@acorex/cdk/common';
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
-import { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -88,7 +87,7 @@ type AXBarChartValue = AXBarChartData[] | AXBarChartClusteredData[];
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
+declare class AXBarChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     /** Chart data input */
     data: _angular_core.InputSignal<AXBarChartValue>;
     /** Chart options input */
@@ -137,7 +136,7 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
         barWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
-        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
         messages?: AXBarChartMessages;
     }>;
     protected effectiveMessages: _angular_core.Signal<{
@@ -215,8 +214,13 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     private handleBarHover;
     /**
      * Updates tooltip position based on mouse coordinates
+     * Enhanced to handle overflow issues by positioning tooltips more intelligently
      */
     private updateTooltipPosition;
+    /**
+     * Enhanced tooltip positioning that considers chart boundaries and prevents overflow
+     */
+    private computeEnhancedTooltipPosition;
     /**
      * Handles bar click event
      */

package/donut-chart/index.d.ts

@@ -1,9 +1,8 @@
-import * as _acorex_cdk_common from '@acorex/cdk/common';
-import { AXAnimationEasing } from '@acorex/cdk/common';
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
-import { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -122,7 +121,7 @@ type AXDonutChartValue = AXDonutChartData[];
  * Donut Chart Component
  * Displays data in a circular donut chart with interactive segments
  */
-declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
+declare class AXDonutChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     #private;
     private cdr;
     /** Chart data input */
@@ -164,7 +163,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
         donutWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
-        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
         messages?: AXDonutChartMessages;
     }>;
     private readonly TOOLTIP_GAP;

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

@@ -1,10 +1,7 @@
-import { NXComponent } from '@acorex/cdk/common';
-import { AX_CHART_COLOR_PALETTE, getEasingFunction, computeTooltipPosition, getChartColor } from '@acorex/charts';
+import { AXChartComponent, AX_CHART_COLOR_PALETTE, getEasingFunction, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
-import { set } from 'lodash-es';
+import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 
 const AXBarChartDefaultConfig = {
     showXAxis: true,
@@ -28,11 +25,7 @@ const AXBarChartDefaultConfig = {
 };
 const AX_BAR_CHART_CONFIG = new InjectionToken('AX_BAR_CHART_CONFIG', {
     providedIn: 'root',
-    factory: () => {
-        const global = inject(AX_GLOBAL_CONFIG);
-        set(global, 'chart.barChart', AXBarChartDefaultConfig);
-        return AXBarChartDefaultConfig;
-    },
+    factory: () => AXBarChartDefaultConfig,
 });
 function barChartConfig(config = {}) {
     const result = {
@@ -46,7 +39,7 @@ function barChartConfig(config = {}) {
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-class AXBarChartComponent extends NXComponent {
+class AXBarChartComponent extends AXChartComponent {
     // Inputs
     /** Chart data input */
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -600,13 +593,28 @@ class AXBarChartComponent extends NXComponent {
                 .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
                 .style('opacity', 0) // Start invisible for animation
                 .text((d) => d.value);
-            // Animate data labels
+            // Animate data labels with smart positioning to avoid clipping
             barGroups
                 .selectAll('.ax-bar-chart-data-label')
                 .transition()
                 .duration(animationDuration)
                 .delay((d, i) => i * 50 + 100) // Slightly delayed after bar animation
-                .attr('y', (d) => this.yScale(d.value) - 8) // Position above bar
+                .attr('y', (d) => {
+                const barTop = this.yScale(d.value);
+                const labelOffset = 8;
+                const minTopSpace = 20; // Minimum space from top of chart
+                // If bar is near the top (100% or close), position label inside the bar
+                if (barTop < minTopSpace) {
+                    return barTop + labelOffset; // Position inside the bar
+                }
+                // Otherwise, position above the bar
+                return barTop - labelOffset;
+            })
+                .attr('data-inside-bar', (d) => {
+                const barTop = this.yScale(d.value);
+                const minTopSpace = 20;
+                return barTop < minTopSpace ? 'true' : 'false';
+            })
                 .style('opacity', 1)
                 .ease(animationEasing);
         }
@@ -734,7 +742,25 @@ class AXBarChartComponent extends NXComponent {
                 .delay((_, i) => i * 50 + 100)
                 .attr('y', (d) => {
                 const item = d.group.chartData[d.seriesIndex];
-                return item ? this.yScale(item.value) - 8 : this.height;
+                if (!item)
+                    return this.height;
+                const barTop = this.yScale(item.value);
+                const labelOffset = 8;
+                const minTopSpace = 20; // Minimum space from top of chart
+                // If bar is near the top (100% or close), position label inside the bar
+                if (barTop < minTopSpace) {
+                    return barTop + labelOffset; // Position inside the bar
+                }
+                // Otherwise, position above the bar
+                return barTop - labelOffset;
+            })
+                .attr('data-inside-bar', (d) => {
+                const item = d.group.chartData[d.seriesIndex];
+                if (!item)
+                    return 'false';
+                const barTop = this.yScale(item.value);
+                const minTopSpace = 20;
+                return barTop < minTopSpace ? 'true' : 'false';
             })
                 .style('opacity', 1)
                 .ease(animationEasing);
@@ -827,6 +853,7 @@ class AXBarChartComponent extends NXComponent {
     }
     /**
      * Updates tooltip position based on mouse coordinates
+     * Enhanced to handle overflow issues by positioning tooltips more intelligently
      */
     updateTooltipPosition(event) {
         const containerEl = this.chartContainerEl()?.nativeElement;
@@ -835,9 +862,61 @@ class AXBarChartComponent extends NXComponent {
         const containerRect = containerEl.getBoundingClientRect();
         const tooltipEl = containerEl.querySelector('.chart-tooltip');
         const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
-        const pos = computeTooltipPosition(containerRect, tooltipRect, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        // Enhanced positioning logic for better tooltip placement
+        const pos = this.computeEnhancedTooltipPosition(containerRect, tooltipRect, event.clientX, event.clientY);
         this._tooltipPosition.set(pos);
     }
+    /**
+     * Enhanced tooltip positioning that considers chart boundaries and prevents overflow
+     */
+    computeEnhancedTooltipPosition(containerRect, tooltipRect, clientX, clientY) {
+        const cursorX = clientX - containerRect.left;
+        const cursorY = clientY - containerRect.top;
+        if (!tooltipRect) {
+            // Default positioning when tooltip dimensions are unknown
+            return {
+                x: Math.min(cursorX + this.TOOLTIP_GAP, containerRect.width - this.TOOLTIP_GAP),
+                y: Math.max(this.TOOLTIP_GAP, Math.min(cursorY, containerRect.height - this.TOOLTIP_GAP)),
+            };
+        }
+        // Calculate available space in each direction
+        const spaceRight = containerRect.width - cursorX;
+        const spaceLeft = cursorX;
+        const spaceBelow = containerRect.height - cursorY;
+        const spaceAbove = cursorY;
+        // Determine best horizontal position
+        let x;
+        if (spaceRight >= tooltipRect.width + this.TOOLTIP_GAP) {
+            // Position to the right of cursor
+            x = cursorX + this.TOOLTIP_GAP;
+        }
+        else if (spaceLeft >= tooltipRect.width + this.TOOLTIP_GAP) {
+            // Position to the left of cursor
+            x = cursorX - tooltipRect.width - this.TOOLTIP_GAP;
+        }
+        else {
+            // Center horizontally if neither side has enough space
+            x = Math.max(this.TOOLTIP_GAP, Math.min((containerRect.width - tooltipRect.width) / 2, containerRect.width - tooltipRect.width - this.TOOLTIP_GAP));
+        }
+        // Calculate best vertical position
+        let y;
+        if (spaceBelow >= tooltipRect.height + this.TOOLTIP_GAP) {
+            // Position below cursor
+            y = cursorY + this.TOOLTIP_GAP;
+        }
+        else if (spaceAbove >= tooltipRect.height + this.TOOLTIP_GAP) {
+            // Position above cursor
+            y = cursorY - tooltipRect.height - this.TOOLTIP_GAP;
+        }
+        else {
+            // Center vertically if neither direction has enough space
+            y = Math.max(this.TOOLTIP_GAP, Math.min((containerRect.height - tooltipRect.height) / 2, containerRect.height - tooltipRect.height - this.TOOLTIP_GAP));
+        }
+        // Ensure tooltip stays within container bounds
+        x = Math.max(this.TOOLTIP_GAP, Math.min(x, containerRect.width - tooltipRect.width - this.TOOLTIP_GAP));
+        y = Math.max(this.TOOLTIP_GAP, Math.min(y, containerRect.height - tooltipRect.height - this.TOOLTIP_GAP));
+        return { x, y };
+    }
     /**
      * Handles bar click event
      */
@@ -1107,11 +1186,11 @@ class AXBarChartComponent extends NXComponent {
         container.append('div').attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help').text(helpText);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\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.3.6", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**