@acorex/charts 20.6.17 → 20.6.19

package/funnel-chart/README.md

@@ -0,0 +1,3 @@
+# @acorex/charts/funnel-chart
+
+Secondary entry point of `@acorex/charts`. It can be used by importing from `@acorex/charts/funnel-chart`.

package/funnel-chart/index.d.ts

@@ -0,0 +1,90 @@
+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 { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+interface AXFunnelData {
+    id?: string | number;
+    name: string;
+    value: number;
+    color?: string;
+}
+interface AXFunnelChartMessages {
+    noData?: string;
+    noDataIcon?: string;
+}
+interface AXFunnelChartOption {
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    width?: number;
+    height?: number;
+    /** The ratio of the bottom width compared to the top width for the last segment (0 to 1). Default: 0.3 */
+    neckWidth?: number;
+    colors?: string[];
+    showLabels?: boolean;
+    showTooltip?: boolean;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+    messages?: AXFunnelChartMessages;
+}
+
+declare class AXFunnelChartComponent extends AXChartComponent implements OnDestroy, AXChartComponentBase {
+    data: _angular_core.InputSignal<AXFunnelData[]>;
+    options: _angular_core.InputSignal<AXFunnelChartOption>;
+    private readonly chartContainerEl;
+    private svgElement;
+    protected d3: typeof d3;
+    private _initialized;
+    private _rendered;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    private _tooltipRafId;
+    protected tooltipVisible: _angular_core.Signal<boolean>;
+    protected tooltipPosition: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
+    private configToken;
+    protected effectiveOptions: _angular_core.Signal<{
+        margin?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        width?: number;
+        height?: number;
+        neckWidth?: number;
+        colors?: string[];
+        showLabels?: boolean;
+        showTooltip?: boolean;
+        animationDuration?: number;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
+        messages?: AXFunnelChartMessages;
+    }>;
+    constructor();
+    ngOnDestroy(): void;
+    protected loadD3(): Promise<void>;
+    createChart(): void;
+    updateChart(): void;
+    private showTooltip;
+    private updateTooltipPosition;
+    private hideTooltip;
+    cleanupChart(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFunnelChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFunnelChartComponent, "ax-funnel-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const AXFunnelChartDefaultConfig: AXFunnelChartOption;
+declare const AX_FUNNEL_CHART_CONFIG: InjectionToken<AXFunnelChartOption>;
+
+export { AXFunnelChartComponent, AXFunnelChartDefaultConfig, AX_FUNNEL_CHART_CONFIG };
+export type { AXFunnelChartMessages, AXFunnelChartOption, AXFunnelData };

package/gauge-chart/index.d.ts

@@ -138,6 +138,10 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
     private readonly HALF_CIRCLE_RADIANS;
     private readonly QUARTER_CIRCLE_RADIANS;
     private readonly DEGREES_PER_RADIAN;
+    private readonly CHART_EDGE_PADDING;
+    private readonly TICK_LABEL_CHAR_WIDTH_RATIO;
+    private readonly TICK_LABEL_SIDE_PADDING;
+    private readonly LABEL_TICK_CLEARANCE;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -189,6 +193,14 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
      * Draws tick marks and labels around the gauge
      */
     private drawTicks;
+    private getTickCount;
+    private getTickFontSize;
+    private getBaseLabelOffset;
+    private getTickLabelAnchor;
+    private getNearEdgeProjection;
+    private formatTickValue;
+    private estimateLabelWidth;
+    private estimateMaxTickLabelWidth;
     /**
      * Draws the value and label text in the center
      */

package/heatmap-chart/README.md

@@ -0,0 +1,3 @@
+# @acorex/charts/heatmap
+
+Secondary entry point of `@acorex/charts`. It can be used by importing from `@acorex/charts/heatmap`.

package/heatmap-chart/index.d.ts

@@ -0,0 +1,92 @@
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, AXChartComponent } from '@acorex/charts';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+interface AXHeatmapData {
+    x: string | number;
+    y: string | number;
+    value: number;
+    label?: string;
+}
+interface AXHeatmapMessages {
+    noData?: string;
+    noDataHelp?: string;
+    noDataIcon?: string;
+}
+interface AXHeatmapChartOption {
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    colors?: string[];
+    cellPadding?: number;
+    borderRadius?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTooltip?: boolean;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+    messages?: AXHeatmapMessages;
+}
+
+declare class AXHeatmapChartComponent extends AXChartComponent implements OnDestroy {
+    private readonly defaultConfig;
+    data: _angular_core.InputSignal<AXHeatmapData[]>;
+    options: _angular_core.InputSignal<AXHeatmapChartOption>;
+    private readonly containerRef;
+    private svg;
+    private resizeObserver;
+    protected d3: any;
+    private _d3Ready;
+    protected tooltipVisible: _angular_core.WritableSignal<boolean>;
+    protected tooltipPosition: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: _angular_core.WritableSignal<AXChartTooltipData>;
+    protected effectiveOptions: _angular_core.Signal<{
+        width?: number;
+        height?: number;
+        margin?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        colors?: string[];
+        cellPadding?: number;
+        borderRadius?: number;
+        showXAxis?: boolean;
+        showYAxis?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        showTooltip?: boolean;
+        animationDuration?: number;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
+        messages?: AXHeatmapMessages;
+    }>;
+    constructor();
+    private init;
+    private renderChart;
+    private drawAxis;
+    private showTooltip;
+    private updateTooltipPos;
+    private hideTooltip;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXHeatmapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXHeatmapChartComponent, "ax-heatmap-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const AXHeatmapChartDefaultConfig: AXHeatmapChartOption;
+declare const AX_HEATMAP_CHART_CONFIG: InjectionToken<AXHeatmapChartOption>;
+
+export { AXHeatmapChartComponent, AXHeatmapChartDefaultConfig, AX_HEATMAP_CHART_CONFIG };
+export type { AXHeatmapChartOption, AXHeatmapData, AXHeatmapMessages };

package/line-chart/index.d.ts

@@ -181,6 +181,7 @@ declare class AXLineChartComponent extends AXChartComponent implements OnInit, A
     private readonly MIN_MARGIN_BOTTOM;
     private readonly MIN_MARGIN_LEFT;
     private readonly MAX_EXTRA_MARGIN;
+    private readonly CHART_EDGE_PADDING;
     private readonly DEFAULT_LINE_WIDTH;
     private readonly DEFAULT_POINT_RADIUS;
     private readonly DEFAULT_FILL_OPACITY;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/charts",
-  "version": "20.6.17",
+  "version": "20.6.19",
   "peerDependencies": {
     "d3": ">=7.9.0"
   },
@@ -15,10 +15,6 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/acorex-charts.mjs"
     },
-    "./chart-tooltip": {
-      "types": "./chart-tooltip/index.d.ts",
-      "default": "./fesm2022/acorex-charts-chart-tooltip.mjs"
-    },
     "./bar-chart": {
       "types": "./bar-chart/index.d.ts",
       "default": "./fesm2022/acorex-charts-bar-chart.mjs"
@@ -27,14 +23,26 @@
       "types": "./chart-legend/index.d.ts",
       "default": "./fesm2022/acorex-charts-chart-legend.mjs"
     },
+    "./chart-tooltip": {
+      "types": "./chart-tooltip/index.d.ts",
+      "default": "./fesm2022/acorex-charts-chart-tooltip.mjs"
+    },
     "./donut-chart": {
       "types": "./donut-chart/index.d.ts",
       "default": "./fesm2022/acorex-charts-donut-chart.mjs"
     },
+    "./funnel-chart": {
+      "types": "./funnel-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-funnel-chart.mjs"
+    },
     "./gauge-chart": {
       "types": "./gauge-chart/index.d.ts",
       "default": "./fesm2022/acorex-charts-gauge-chart.mjs"
     },
+    "./heatmap-chart": {
+      "types": "./heatmap-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-heatmap-chart.mjs"
+    },
     "./hierarchy-chart": {
       "types": "./hierarchy-chart/index.d.ts",
       "default": "./fesm2022/acorex-charts-hierarchy-chart.mjs"