@acorex/charts 21.0.0-next.8 → 21.0.0-next51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bar-chart/index.d.ts +67 -7
- package/donut-chart/index.d.ts +46 -8
- package/fesm2022/acorex-charts-bar-chart.mjs +341 -123
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +4 -4
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +3 -3
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +297 -199
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +92 -67
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +21 -15
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +294 -152
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +93 -7
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/gauge-chart/index.d.ts +10 -7
- package/hierarchy-chart/index.d.ts +4 -5
- package/index.d.ts +43 -4
- package/line-chart/index.d.ts +70 -7
- package/package.json +1 -3
package/bar-chart/index.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { AXAnimationEasing, NXNativeEvent,
|
|
1
|
+
import * as _acorex_charts from '@acorex/charts';
|
|
2
|
+
import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
|
|
3
3
|
import * as d3 from 'd3';
|
|
4
4
|
import * as _angular_core from '@angular/core';
|
|
5
5
|
import { OnDestroy, InjectionToken } from '@angular/core';
|
|
6
|
-
import { AXChartComponentBase } from '@acorex/charts';
|
|
7
6
|
import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
|
|
8
7
|
import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
|
|
9
8
|
|
|
@@ -75,6 +74,7 @@ interface AXBarChartOption {
|
|
|
75
74
|
barWidth?: number;
|
|
76
75
|
cornerRadius?: number;
|
|
77
76
|
animationDuration?: number;
|
|
77
|
+
animationDelay?: number;
|
|
78
78
|
animationEasing?: AXAnimationEasing;
|
|
79
79
|
messages?: AXBarChartMessages;
|
|
80
80
|
}
|
|
@@ -88,7 +88,7 @@ type AXBarChartValue = AXBarChartData[] | AXBarChartClusteredData[];
|
|
|
88
88
|
* Bar Chart Component
|
|
89
89
|
* Renders data as vertical bars with interactive hover effects and animations
|
|
90
90
|
*/
|
|
91
|
-
declare class AXBarChartComponent extends
|
|
91
|
+
declare class AXBarChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
|
|
92
92
|
/** Chart data input */
|
|
93
93
|
data: _angular_core.InputSignal<AXBarChartValue>;
|
|
94
94
|
/** Chart options input */
|
|
@@ -109,6 +109,39 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
109
109
|
private margin;
|
|
110
110
|
private readonly CHAR_WIDTH_RATIO;
|
|
111
111
|
private readonly TOOLTIP_GAP;
|
|
112
|
+
private readonly AXIS_TICK_PADDING;
|
|
113
|
+
private readonly Y_AXIS_TITLE_THICKNESS;
|
|
114
|
+
private readonly Y_AXIS_TITLE_PADDING;
|
|
115
|
+
private readonly X_AXIS_TITLE_FONT_SIZE;
|
|
116
|
+
private readonly X_AXIS_TITLE_GAP;
|
|
117
|
+
private readonly X_AXIS_TITLE_BLOCK_HEIGHT;
|
|
118
|
+
private readonly TOP_EDGE_PADDING;
|
|
119
|
+
private readonly FALLBACK_PLOT_HEIGHT;
|
|
120
|
+
private readonly MIN_PLOT_HEIGHT;
|
|
121
|
+
private readonly MIN_TOTAL_WIDTH;
|
|
122
|
+
private readonly OUTER_PADDING_CLUSTERED;
|
|
123
|
+
private readonly INNER_PADDING_CLUSTERED;
|
|
124
|
+
private readonly MIN_PADDING;
|
|
125
|
+
private readonly HOVER_TRANSITION_DURATION;
|
|
126
|
+
private readonly DEFAULT_ANIMATION_DELAY;
|
|
127
|
+
private readonly LABEL_ANIMATION_DELAY;
|
|
128
|
+
private readonly MIN_TOP_SPACE_FOR_LABEL;
|
|
129
|
+
private readonly LABEL_OFFSET;
|
|
130
|
+
private readonly ROTATION_TOLERANCE_SMALL_DATASET;
|
|
131
|
+
private readonly SMALL_DATASET_THRESHOLD;
|
|
132
|
+
private readonly Y_AXIS_PADDING;
|
|
133
|
+
private readonly TICK_AREA_PADDING;
|
|
134
|
+
private readonly TICK_AREA_GAP;
|
|
135
|
+
private readonly DEFAULT_FONT_SIZE;
|
|
136
|
+
private readonly FONT_WIDTH_MULTIPLIER;
|
|
137
|
+
private readonly FONT_PADDING;
|
|
138
|
+
private readonly MAX_LABEL_LENGTH;
|
|
139
|
+
private readonly MIN_FONT_SIZE_X_AXIS;
|
|
140
|
+
private readonly MAX_FONT_SIZE_X_AXIS;
|
|
141
|
+
private readonly MIN_FONT_SIZE_Y_AXIS;
|
|
142
|
+
private readonly MAX_FONT_SIZE_Y_AXIS;
|
|
143
|
+
private readonly MANY_ITEMS_THRESHOLD;
|
|
144
|
+
private readonly VERY_MANY_ITEMS_THRESHOLD;
|
|
112
145
|
private _initialAnimationComplete;
|
|
113
146
|
private _tooltipVisible;
|
|
114
147
|
private _tooltipPosition;
|
|
@@ -137,7 +170,8 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
137
170
|
barWidth?: number;
|
|
138
171
|
cornerRadius?: number;
|
|
139
172
|
animationDuration?: number;
|
|
140
|
-
|
|
173
|
+
animationDelay?: number;
|
|
174
|
+
animationEasing?: _acorex_charts.AXAnimationEasing;
|
|
141
175
|
messages?: AXBarChartMessages;
|
|
142
176
|
}>;
|
|
143
177
|
protected effectiveMessages: _angular_core.Signal<{
|
|
@@ -148,8 +182,11 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
148
182
|
noDataIcon: string;
|
|
149
183
|
allHiddenIcon: string;
|
|
150
184
|
}>;
|
|
151
|
-
private hiddenBars;
|
|
152
|
-
private hiddenSeries;
|
|
185
|
+
private readonly hiddenBars;
|
|
186
|
+
private readonly hiddenSeries;
|
|
187
|
+
private readonly isClusteredMode;
|
|
188
|
+
private readonly visibleData;
|
|
189
|
+
private readonly hasVisibleData;
|
|
153
190
|
private isClusteredData;
|
|
154
191
|
private getClusterSeriesLabels;
|
|
155
192
|
constructor();
|
|
@@ -174,6 +211,14 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
174
211
|
* Sets up chart dimensions and creates SVG with responsive attributes
|
|
175
212
|
*/
|
|
176
213
|
private setupDimensions;
|
|
214
|
+
/**
|
|
215
|
+
* Calculates plot height based on options and container dimensions
|
|
216
|
+
*/
|
|
217
|
+
private calculatePlotHeight;
|
|
218
|
+
/**
|
|
219
|
+
* Determines if X-axis labels should rotate
|
|
220
|
+
*/
|
|
221
|
+
private shouldLabelsRotate;
|
|
177
222
|
/**
|
|
178
223
|
* Creates x and y scales for the chart
|
|
179
224
|
*/
|
|
@@ -215,8 +260,13 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
215
260
|
private handleBarHover;
|
|
216
261
|
/**
|
|
217
262
|
* Updates tooltip position based on mouse coordinates
|
|
263
|
+
* Enhanced to handle overflow issues by positioning tooltips more intelligently
|
|
218
264
|
*/
|
|
219
265
|
private updateTooltipPosition;
|
|
266
|
+
/**
|
|
267
|
+
* Enhanced tooltip positioning that considers chart boundaries and prevents overflow
|
|
268
|
+
*/
|
|
269
|
+
private computeEnhancedTooltipPosition;
|
|
220
270
|
/**
|
|
221
271
|
* Handles bar click event
|
|
222
272
|
*/
|
|
@@ -255,7 +305,17 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
|
|
|
255
305
|
toggleSegment(id: string): boolean;
|
|
256
306
|
private getContainerElement;
|
|
257
307
|
private clearChartArea;
|
|
308
|
+
/**
|
|
309
|
+
* Truncates long labels with ellipsis
|
|
310
|
+
*/
|
|
311
|
+
private truncateLabel;
|
|
312
|
+
/**
|
|
313
|
+
* Gets adaptive font size for X-axis based on width and item count
|
|
314
|
+
*/
|
|
258
315
|
private getXAxisTickFontSizeBasedOnWidth;
|
|
316
|
+
/**
|
|
317
|
+
* Gets adaptive font size for Y-axis based on height
|
|
318
|
+
*/
|
|
259
319
|
private getYAxisTickFontSizeBasedOnHeight;
|
|
260
320
|
private buildXAxisCommon;
|
|
261
321
|
private showMessage;
|
package/donut-chart/index.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { AXAnimationEasing } from '@acorex/
|
|
1
|
+
import * as _acorex_charts from '@acorex/charts';
|
|
2
|
+
import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
|
|
3
3
|
import * as d3 from 'd3';
|
|
4
4
|
import * as _angular_core from '@angular/core';
|
|
5
5
|
import { OnDestroy, InjectionToken } from '@angular/core';
|
|
6
|
-
import { AXChartComponentBase } from '@acorex/charts';
|
|
7
6
|
import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
|
|
8
7
|
import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
|
|
9
8
|
|
|
@@ -122,8 +121,7 @@ type AXDonutChartValue = AXDonutChartData[];
|
|
|
122
121
|
* Donut Chart Component
|
|
123
122
|
* Displays data in a circular donut chart with interactive segments
|
|
124
123
|
*/
|
|
125
|
-
declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
|
|
126
|
-
#private;
|
|
124
|
+
declare class AXDonutChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
|
|
127
125
|
private cdr;
|
|
128
126
|
/** Chart data input */
|
|
129
127
|
data: _angular_core.InputSignal<AXDonutChartValue>;
|
|
@@ -164,10 +162,18 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
|
|
|
164
162
|
donutWidth?: number;
|
|
165
163
|
cornerRadius?: number;
|
|
166
164
|
animationDuration?: number;
|
|
167
|
-
animationEasing?:
|
|
165
|
+
animationEasing?: _acorex_charts.AXAnimationEasing;
|
|
168
166
|
messages?: AXDonutChartMessages;
|
|
169
167
|
}>;
|
|
170
168
|
private readonly TOOLTIP_GAP;
|
|
169
|
+
private readonly HIGHLIGHT_TRANSITION_DURATION;
|
|
170
|
+
private readonly HIGHLIGHT_TRANSITION_NAME;
|
|
171
|
+
private readonly SEGMENT_ANIMATION_DELAY;
|
|
172
|
+
private readonly LABEL_ANIMATION_DELAY;
|
|
173
|
+
private readonly MIN_CHART_DIMENSION;
|
|
174
|
+
private readonly MIN_CHART_FOR_LABELS;
|
|
175
|
+
private readonly DIMMED_OPACITY;
|
|
176
|
+
private readonly VISIBLE_OPACITY;
|
|
171
177
|
protected effectiveMessages: _angular_core.Signal<{
|
|
172
178
|
noData: string;
|
|
173
179
|
noDataHelp: string;
|
|
@@ -180,11 +186,16 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
|
|
|
180
186
|
protected getColor(index: number): string;
|
|
181
187
|
protected isSegmentHidden(id: string): boolean;
|
|
182
188
|
constructor();
|
|
189
|
+
private readonly dataChangeEffect;
|
|
183
190
|
/**
|
|
184
191
|
* Highlights a specific segment by ID
|
|
185
192
|
* @param id The segment ID to highlight, or null to clear highlight
|
|
186
193
|
*/
|
|
187
194
|
highlightSegment(id: string | null): void;
|
|
195
|
+
private clearAllHighlights;
|
|
196
|
+
private dimNonTargetSegments;
|
|
197
|
+
private highlightTargetSegment;
|
|
198
|
+
private getSegmentDataById;
|
|
188
199
|
/**
|
|
189
200
|
* Toggles visibility of a segment by ID
|
|
190
201
|
* @param id Segment ID to toggle
|
|
@@ -198,7 +209,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
|
|
|
198
209
|
protected loadD3(): Promise<void>;
|
|
199
210
|
protected onSegmentClick(item: AXDonutChartData): void;
|
|
200
211
|
/**
|
|
201
|
-
* Creates the donut chart
|
|
212
|
+
* Creates the donut chart from current data
|
|
202
213
|
*/
|
|
203
214
|
createChart(): void;
|
|
204
215
|
/**
|
|
@@ -227,19 +238,45 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
|
|
|
227
238
|
private renderDonutChart;
|
|
228
239
|
/**
|
|
229
240
|
* Create SVG element with filter definitions for shadows
|
|
241
|
+
* @returns D3 SVG selection (any type due to dynamic D3 loading)
|
|
230
242
|
*/
|
|
231
243
|
private createSvgWithFilters;
|
|
232
244
|
/**
|
|
233
245
|
* Create and render the donut segments with animations
|
|
234
246
|
*/
|
|
235
247
|
private createDonutSegments;
|
|
248
|
+
private isChartLargeEnoughForLabels;
|
|
249
|
+
private addDataLabels;
|
|
236
250
|
/**
|
|
237
|
-
*
|
|
251
|
+
* Calculates optimal font size for label based on segment size
|
|
252
|
+
* Uses smart dynamic sizing with readability constraints
|
|
238
253
|
*/
|
|
254
|
+
private calculateLabelFontSize;
|
|
255
|
+
private formatPercentage;
|
|
256
|
+
private buildLabelText;
|
|
257
|
+
/**
|
|
258
|
+
* Truncates label text to fit within the arc segment
|
|
259
|
+
* Uses smart truncation: tries full label, then label only, then percentage only, then truncated percentage
|
|
260
|
+
* Calculates chord length (straight line) since text is rendered horizontally, not along the arc
|
|
261
|
+
*/
|
|
262
|
+
private getTruncatedLabelText;
|
|
263
|
+
/**
|
|
264
|
+
* Checks if text fits within available width using conservative estimation
|
|
265
|
+
* Uses 0.65em per character to account for font variations
|
|
266
|
+
*/
|
|
267
|
+
private doesTextFit;
|
|
268
|
+
/**
|
|
269
|
+
* Truncates text to fit within available width with ellipsis
|
|
270
|
+
* Uses conservative character width to prevent overflow
|
|
271
|
+
* Adapts character width estimation based on font size
|
|
272
|
+
*/
|
|
273
|
+
private truncateTextToFit;
|
|
274
|
+
private getSegmentColor;
|
|
239
275
|
/**
|
|
240
276
|
* Handle hover effects on a segment
|
|
241
277
|
*/
|
|
242
278
|
private handleSliceHover;
|
|
279
|
+
private showTooltip;
|
|
243
280
|
/**
|
|
244
281
|
* Handles mouse leave from segments
|
|
245
282
|
*/
|
|
@@ -264,6 +301,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
|
|
|
264
301
|
private renderMessage;
|
|
265
302
|
/**
|
|
266
303
|
* Gets an accessibility label describing the donut chart for screen readers
|
|
304
|
+
* @returns Descriptive string for screen readers
|
|
267
305
|
*/
|
|
268
306
|
protected getAccessibilityLabel(): string;
|
|
269
307
|
/**
|