@acorex/charts 20.1.24 → 20.1.25

package/chart-legend/index.d.ts

@@ -68,7 +68,7 @@ declare class AXChartLegendComponent {
     /**
      * Reference to legend container for measuring dimensions
      */
-    legendContainer?: ElementRef<HTMLDivElement>;
+    legendContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     protected showValues: _angular_core.Signal<boolean>;
     protected showPercentage: _angular_core.Signal<boolean>;
     protected containerClass: _angular_core.Signal<{

package/chart-tooltip/index.d.ts

@@ -2,11 +2,12 @@ import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 
 interface AXChartTooltipData {
-    title: string;
+    title: string | string[];
     value: number | string;
     percentage?: string;
-    color?: string;
-    [key: string]: any;
+    color?: string | string[];
+    tooltipColor?: string;
+    tooltipBgColor?: string;
 }
 
 declare class AXChartTooltipComponent {
@@ -30,10 +31,16 @@ declare class AXChartTooltipComponent {
     /**
      * Reference to tooltip container for measuring dimensions
      */
-    tooltipContainer?: ElementRef<HTMLDivElement>;
+    tooltipContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     protected tooltipWidth: number;
     protected tooltipHeight: number;
     constructor();
+    protected isColorArray(): boolean;
+    protected colorList(): string[];
+    protected singleColor(): string | null;
+    protected isTitleArray(): boolean;
+    protected titleList(): string[];
+    protected colorAt(index: number): string | null;
     /**
      * Updates tooltip dimensions after it's rendered
      */

package/donut-chart/index.d.ts

@@ -121,6 +121,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     private _initialized;
     private _rendered;
     private _isInitialAnimating;
+    private _currentlyHighlightedSegment;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;

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

@@ -424,8 +424,7 @@ class AXBarChartComponent extends NXComponent {
                 .style('font-size', `${dynamicXAxisTickFontSize}px`)
                 .style('font-weight', '400')
                 .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('direction', 'ltr')
-                .style('unicode-bidi', 'bidi-override');
+                .attr('direction', 'ltr');
             // Automatically rotate labels if they are likely to overlap
             if (this.xScale.domain().length > 0) {
                 const step = this.xScale.step();
@@ -454,7 +453,6 @@ class AXBarChartComponent extends NXComponent {
                     .attr('x', this.width / 2)
                     .attr('y', labelY)
                     .attr('direction', 'ltr')
-                    .style('unicode-bidi', 'bidi-override')
                     .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
@@ -472,8 +470,7 @@ class AXBarChartComponent extends NXComponent {
                 .style('font-weight', '400')
                 .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
                 .attr('text-anchor', 'end')
-                .attr('direction', 'ltr')
-                .style('unicode-bidi', 'bidi-override');
+                .attr('direction', 'ltr');
             // Style all lines in the y-axis (path, ticks)
             this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
             // Add Y axis label if provided
@@ -489,7 +486,6 @@ class AXBarChartComponent extends NXComponent {
                     .attr('x', labelX)
                     .attr('y', labelY)
                     .attr('direction', 'ltr')
-                    .style('unicode-bidi', 'bidi-override')
                     .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
@@ -533,8 +529,7 @@ class AXBarChartComponent extends NXComponent {
                 .style('font-size', `${dynamicXAxisTickFontSize}px`)
                 .style('font-weight', '400')
                 .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
-                .attr('direction', 'ltr')
-                .style('unicode-bidi', 'bidi-override');
+                .attr('direction', 'ltr');
             if (this.xScale.domain().length > 0) {
                 const step = this.xScale.step();
                 const labelsForRotation = Array.from(idToLabel.values());
@@ -555,7 +550,6 @@ class AXBarChartComponent extends NXComponent {
                     .attr('x', this.width / 2)
                     .attr('y', labelY)
                     .attr('direction', 'ltr')
-                    .style('unicode-bidi', 'bidi-override')
                     .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
@@ -571,8 +565,7 @@ class AXBarChartComponent extends NXComponent {
                 .style('font-weight', '400')
                 .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)')
                 .attr('text-anchor', 'end')
-                .attr('direction', 'ltr')
-                .style('unicode-bidi', 'bidi-override');
+                .attr('direction', 'ltr');
             this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
             if (options.yAxisLabel) {
                 const labelX = -this.height / 2;
@@ -586,7 +579,6 @@ class AXBarChartComponent extends NXComponent {
                     .attr('x', labelX)
                     .attr('y', labelY)
                     .attr('direction', 'ltr')
-                    .style('unicode-bidi', 'bidi-override')
                     .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
@@ -1160,10 +1152,10 @@ class AXBarChartComponent extends NXComponent {
         }
         return !this.hiddenSeries.has(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", 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\" #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: var(--ax-sys-color-lightest-surface)}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;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(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:visible}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;box-shadow:0 2px 12px #00000014;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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", 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\" #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: var(--ax-sys-color-lightest-surface)}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;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(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:visible}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;box-shadow:0 2px 12px #00000014;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.1.7", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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\" #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: var(--ax-sys-color-lightest-surface)}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;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(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:visible}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;box-shadow:0 2px 12px #00000014;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: () => [] });