@acorex/charts 21.0.1-next.56 → 21.0.1-next.58
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/fesm2022/acorex-charts-bar-chart.mjs +12 -8
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +13 -5
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-funnel-chart.mjs +275 -0
- package/fesm2022/acorex-charts-funnel-chart.mjs.map +1 -0
- package/fesm2022/acorex-charts-gauge-chart.mjs +132 -70
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-heatmap-chart.mjs +281 -0
- package/fesm2022/acorex-charts-heatmap-chart.mjs.map +1 -0
- package/fesm2022/acorex-charts-line-chart.mjs +12 -14
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/funnel-chart/README.md +3 -0
- package/heatmap-chart/README.md +3 -0
- package/package.json +9 -1
- package/types/acorex-charts-bar-chart.d.ts +2 -0
- package/types/acorex-charts-donut-chart.d.ts +1 -0
- package/types/acorex-charts-funnel-chart.d.ts +108 -0
- package/types/acorex-charts-gauge-chart.d.ts +12 -0
- package/types/acorex-charts-heatmap-chart.d.ts +111 -0
- package/types/acorex-charts-line-chart.d.ts +1 -0
|
@@ -73,7 +73,9 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
73
73
|
X_AXIS_TITLE_FONT_SIZE = 14;
|
|
74
74
|
X_AXIS_TITLE_GAP = 14;
|
|
75
75
|
X_AXIS_TITLE_BLOCK_HEIGHT = 24;
|
|
76
|
-
TOP_EDGE_PADDING =
|
|
76
|
+
TOP_EDGE_PADDING = 8;
|
|
77
|
+
BOTTOM_EDGE_PADDING = 8;
|
|
78
|
+
HORIZONTAL_EDGE_PADDING = 12;
|
|
77
79
|
FALLBACK_PLOT_HEIGHT = 240;
|
|
78
80
|
MIN_PLOT_HEIGHT = 120;
|
|
79
81
|
MIN_TOTAL_WIDTH = 200;
|
|
@@ -305,6 +307,8 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
305
307
|
const leftPaddingForYAxis = showYAxis
|
|
306
308
|
? this.calculateMaxYAxisTickLabelWidth() + this.AXIS_TICK_PADDING + yAxisTitlePadding + yAxisTitleThickness
|
|
307
309
|
: 0;
|
|
310
|
+
const leftInnerPadding = leftPaddingForYAxis + this.HORIZONTAL_EDGE_PADDING;
|
|
311
|
+
const rightInnerPadding = this.HORIZONTAL_EDGE_PADDING;
|
|
308
312
|
// Estimate internal bottom padding for X-axis ticks/labels/title
|
|
309
313
|
let bottomPaddingForXAxis = 0;
|
|
310
314
|
if (showXAxis) {
|
|
@@ -320,7 +324,7 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
320
324
|
return flat.reduce((a, b) => (a.length > b.label.length ? a : b.label), '');
|
|
321
325
|
})();
|
|
322
326
|
const baseWidth = options.width ?? containerWidth;
|
|
323
|
-
const workingWidth = Math.max(1, baseWidth -
|
|
327
|
+
const workingWidth = Math.max(1, baseWidth - leftInnerPadding - rightInnerPadding);
|
|
324
328
|
const dynamicFontSize = Math.max(10, Math.min(14, Math.round(workingWidth / 50)));
|
|
325
329
|
// Use truncated label length for calculation (same logic as actual rendering)
|
|
326
330
|
const maxLabelLength = barCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
|
|
@@ -339,17 +343,17 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
339
343
|
// Determine plotting dimensions with sensible fallbacks
|
|
340
344
|
const baseWidth = options.width ?? containerWidth;
|
|
341
345
|
const totalWidth = Math.max(this.MIN_TOTAL_WIDTH, baseWidth > 0 ? baseWidth : this.MIN_TOTAL_WIDTH);
|
|
342
|
-
const plotWidth = Math.max(0, totalWidth -
|
|
346
|
+
const plotWidth = Math.max(0, totalWidth - leftInnerPadding - rightInnerPadding);
|
|
343
347
|
const plotHeight = this.calculatePlotHeight(options.height, containerHeight, bottomPaddingForXAxis);
|
|
344
348
|
this.width = plotWidth;
|
|
345
349
|
this.height = plotHeight;
|
|
346
350
|
// Create SVG with explicit pixel dimensions to avoid collapse
|
|
347
|
-
const totalHeight = this.height + bottomPaddingForXAxis + this.TOP_EDGE_PADDING;
|
|
351
|
+
const totalHeight = this.height + bottomPaddingForXAxis + this.TOP_EDGE_PADDING + this.BOTTOM_EDGE_PADDING;
|
|
348
352
|
const svg = this.d3
|
|
349
353
|
.select(containerElement)
|
|
350
354
|
.append('svg')
|
|
351
355
|
.attr('width', '100%')
|
|
352
|
-
.attr('height',
|
|
356
|
+
.attr('height', '100%')
|
|
353
357
|
.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
|
|
354
358
|
.attr('preserveAspectRatio', 'xMidYMid meet');
|
|
355
359
|
this.svg = svg;
|
|
@@ -357,7 +361,7 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
357
361
|
this.chart = this.svg
|
|
358
362
|
.append('g')
|
|
359
363
|
.attr('class', 'chart-content')
|
|
360
|
-
.attr('transform', `translate(${
|
|
364
|
+
.attr('transform', `translate(${leftInnerPadding},${this.TOP_EDGE_PADDING})`);
|
|
361
365
|
}
|
|
362
366
|
/**
|
|
363
367
|
* Calculates plot height based on options and container dimensions
|
|
@@ -1335,11 +1339,11 @@ class AXBarChartComponent extends AXChartComponent {
|
|
|
1335
1339
|
container.append('div').attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help').text(helpText);
|
|
1336
1340
|
}
|
|
1337
1341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:
|
|
1342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:clamp(220px,38vw,360px);--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}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 });
|
|
1339
1343
|
}
|
|
1340
1344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBarChartComponent, decorators: [{
|
|
1341
1345
|
type: Component,
|
|
1342
|
-
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:
|
|
1346
|
+
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:clamp(220px,38vw,360px);--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}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"] }]
|
|
1343
1347
|
}], 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 }] }] } });
|
|
1344
1348
|
|
|
1345
1349
|
/**
|