ngx-wapp-components 3.0.15-alpha.8 → 3.0.15
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.
|
@@ -9239,9 +9239,13 @@ class WChartBarComponent {
|
|
|
9239
9239
|
size: 16,
|
|
9240
9240
|
weight: 500
|
|
9241
9241
|
};
|
|
9242
|
+
this.titleFont = {
|
|
9243
|
+
size: 14, weight: 700
|
|
9244
|
+
};
|
|
9242
9245
|
this.widthBars = 14;
|
|
9243
9246
|
this.baseHeight = 200;
|
|
9244
9247
|
this.baseHeightPx = "200px";
|
|
9248
|
+
this.barPadding = 8;
|
|
9245
9249
|
}
|
|
9246
9250
|
ngOnInit() {
|
|
9247
9251
|
this.style = getComputedStyle(document.documentElement);
|
|
@@ -9279,7 +9283,7 @@ class WChartBarComponent {
|
|
|
9279
9283
|
display: this.title ? true : false,
|
|
9280
9284
|
color: this.textColorTitle,
|
|
9281
9285
|
text: this.title,
|
|
9282
|
-
font:
|
|
9286
|
+
font: this.titleFont,
|
|
9283
9287
|
padding: 24,
|
|
9284
9288
|
},
|
|
9285
9289
|
tooltip: {
|
|
@@ -9322,21 +9326,14 @@ class WChartBarComponent {
|
|
|
9322
9326
|
anchor: 'end',
|
|
9323
9327
|
align: (ctx) => {
|
|
9324
9328
|
const isHorizontal = ctx.chart?.options?.indexAxis === 'y';
|
|
9325
|
-
const
|
|
9326
|
-
|
|
9329
|
+
const barWidth = this.getBarLengthPx(ctx);
|
|
9330
|
+
const textWidth = this.measureDatalabelTextWidthPx(ctx);
|
|
9331
|
+
const fitsInside = textWidth + this.barPadding <= barWidth;
|
|
9332
|
+
if (barWidth < (this._chartConfig.widthBars ?? this.widthBars) || !fitsInside) {
|
|
9327
9333
|
return isHorizontal ? 'end' : 'top';
|
|
9328
9334
|
}
|
|
9329
9335
|
return 'start';
|
|
9330
9336
|
},
|
|
9331
|
-
textStrokeColor: (ctx) => {
|
|
9332
|
-
const bg = ctx.dataset?.backgroundColor;
|
|
9333
|
-
const baseFont = this._chartConfig.textColor ?? this.textInverseColor;
|
|
9334
|
-
if (bg) {
|
|
9335
|
-
return this.idealTextStrokeColorFor(bg, baseFont);
|
|
9336
|
-
}
|
|
9337
|
-
return 'rgba(31, 34, 36, 0.6)';
|
|
9338
|
-
},
|
|
9339
|
-
textStrokeWidth: 1,
|
|
9340
9337
|
font: this.dataLabelFont,
|
|
9341
9338
|
formatter: function (value, index, values) { return value || null; }
|
|
9342
9339
|
}
|
|
@@ -9364,16 +9361,16 @@ class WChartBarComponent {
|
|
|
9364
9361
|
this.wChartBar.refresh();
|
|
9365
9362
|
}
|
|
9366
9363
|
}
|
|
9367
|
-
if (changes['labelConfig']
|
|
9364
|
+
if (changes['labelConfig'] && changes['labelConfig'].currentValue) {
|
|
9368
9365
|
this.labelConfig = changes['labelConfig'].currentValue;
|
|
9369
|
-
if (this.
|
|
9370
|
-
|
|
9371
|
-
this.dataLabelFont
|
|
9372
|
-
|
|
9373
|
-
|
|
9374
|
-
|
|
9375
|
-
|
|
9376
|
-
|
|
9366
|
+
if (this.labelConfig.dataLabelFont) {
|
|
9367
|
+
this.dataLabelFont = {
|
|
9368
|
+
size: this.labelConfig.dataLabelFont.size,
|
|
9369
|
+
weight: this.labelConfig.dataLabelFont.weight,
|
|
9370
|
+
};
|
|
9371
|
+
}
|
|
9372
|
+
if (this.labelConfig.titleFont) {
|
|
9373
|
+
this.titleFont.size = this.labelConfig.titleFont.size;
|
|
9377
9374
|
}
|
|
9378
9375
|
}
|
|
9379
9376
|
}
|
|
@@ -9566,6 +9563,32 @@ class WChartBarComponent {
|
|
|
9566
9563
|
return Math.abs(y - basePixel);
|
|
9567
9564
|
}
|
|
9568
9565
|
}
|
|
9566
|
+
getDatalabelText(context) {
|
|
9567
|
+
const fv = context.formattedValue;
|
|
9568
|
+
if (fv != null)
|
|
9569
|
+
return String(fv);
|
|
9570
|
+
const raw = context?.dataset?.data?.[context?.dataIndex];
|
|
9571
|
+
return raw == null ? '' : String(raw);
|
|
9572
|
+
}
|
|
9573
|
+
resolveDatalabelFont(context) {
|
|
9574
|
+
const size = this.dataLabelFont.size;
|
|
9575
|
+
const weight = this.dataLabelFont.weight;
|
|
9576
|
+
const family = 'Segoe UI';
|
|
9577
|
+
const style = 'normal';
|
|
9578
|
+
return { font: `${style} ${weight} ${size}px ${family}`, size };
|
|
9579
|
+
}
|
|
9580
|
+
measureDatalabelTextWidthPx(context) {
|
|
9581
|
+
const text = this.getDatalabelText(context);
|
|
9582
|
+
const { font } = this.resolveDatalabelFont(context);
|
|
9583
|
+
const ctx2d = context.chart?.ctx;
|
|
9584
|
+
if (!ctx2d || !text)
|
|
9585
|
+
return 0;
|
|
9586
|
+
const prevFont = ctx2d.font;
|
|
9587
|
+
ctx2d.font = font;
|
|
9588
|
+
const width = ctx2d.measureText(text).width;
|
|
9589
|
+
ctx2d.font = prevFont;
|
|
9590
|
+
return width;
|
|
9591
|
+
}
|
|
9569
9592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: WChartBarComponent, deps: [{ token: WSummaryPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9570
9593
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: WChartBarComponent, isStandalone: false, selector: "w-chart-bar", inputs: { title: "title", config: "config", isHorizontal: "isHorizontal", width: "width", height: "height", setAutoHeight: "setAutoHeight", maxLabelLength: "maxLabelLength", labelConfig: "labelConfig" }, outputs: { onDataSelectedEvent: "onDataSelected" }, providers: [WSummaryPipe], viewQueries: [{ propertyName: "wChartBar", first: true, predicate: ["wChartBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-chart #wChartBar type=\"bar\" [data]=\"data\" [options]=\"options\" [width]=\"width\" [height]=\"setAutoHeight == true ? baseHeightPx : height\" (onDataSelect)=\"onDataSelected($event)\"></p-chart>", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:700}.heading5,.w-sidebar-title-text{font-size:1.5rem;line-height:1.8333333333rem;font-weight:700}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:700}.subtitle1,.w-tab-text,.w-panel-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:700}.subtitle2,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:600}.body,.w-image-file-uploader-navigators-text,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:400}.caption,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-error-message,.w-input-error-alert-text,.w-input-warning-alert-text,.w-button-small-label-text-typography-sm{font-size:.8333333333rem;line-height:1rem;font-weight:400}.textMainColor{color:#1f2224}.textSoftColor{color:#5f6468}.textSofterColor{color:#9aa0a7}.textSoftestColor{color:#e8ebee}.textInverseColor{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXSMDivider{height:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.panel-title-gap-divider{height:20px}.panel-section-gap-divider{height:32px}.input-vertical-gap-divider{height:24px}.input-label-gap-divider{height:6px}.focusedInput{border:1px solid rgba(0,157,253,.25);box-shadow:0 0 10px #00b3eb40}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b3eb}.hoveredInput{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-label-text-typography,.w-button-small-tertiary-label-text,.w-button-small-label-text-typography-sm{font-weight:600}.w-button-small-tertiary-label-text{color:#5f6468}.w-button-small-text-label-text{color:#1f2224}.w-button-small-icon-text{font-size:12px;font-weight:600}.w-table-button-small-icon-text{font-size:12px;color:#9aa0a7}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:600;line-height:16px}.w-button-medium-tertiary-label-text{color:#1f2224}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:600;line-height:24px}.w-button-large-tertiary-label-text{color:#1f2224}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text{color:#1f2224}.w-view-small-value-text{color:#5f6468}.w-input-no-label-height{height:14px}.w-input-disabled{background-color:#f8f9fa!important;border-color:#e8ebee!important;opacity:.6!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:fit-content}.w-input-small-label-text,.w-input-small-label-disabled{color:#1f2224}.w-input-small-label-disabled{color:#9aa0a7}.w-input-small-label-text-content{padding:12px 8px 8px 0;margin:0}.w-input-small-label-text-content-no-top{padding-top:0}.w-input-small-placeholder-text{color:#1f2224}.w-input-small-placeholder-text-only-color{color:#9aa0a7;line-height:1.3333333333rem}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6468}.w-input-small-text-icon,.w-input-small-select-options-text{color:#1f2224}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#1f2224}.w-input-medium-label-disabled{color:#9aa0a7}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#1f2224}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6468}.w-input-medium-text-icon{color:#1f2224}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#1f2224}.w-input-success-alert-text{color:#00db5d;padding:8px 8px 0;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:0 4px;margin-top:-2px}.w-input-error-alert-text{color:#e50000;padding:0 4px;margin-top:-2px}.w-input-alert-message-height{height:32px}.w-error-message{color:#e50000;padding:0 4px;margin-top:-2px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#1f2224}.w-panel-content{color:#5f6468}.w-tab-text,.w-chip-text{color:#1f2224}.w-badge-text{font-size:10px;font-weight:700;line-height:8px}.w-table-th-text{color:#1f2224}.w-table-td-text{color:#5f6468}.w-table-height{padding:6px 8px 5px}.w-table-no-buttons-height{padding:16px 8px 15px!important}.w-tree-table-height{padding:8px 8px 7px}.w-image-file-uploader-navigators-text{font-size:12px;color:#fff}.grid{margin:0}::ng-deep .p-tooltip,.p-tooltip{filter:0px 0px 1px 0px rgba(0,0,0,.1) inset,1px 1px 5px rgba(0,0,0,.06),1px 1px 1px rgba(0,0,0,.08)}::ng-deep .p-tooltip .p-tooltip-text,.p-tooltip .p-tooltip-text{background:#fff!important;color:#1f2224;padding:12px 16px;max-width:192px;width:max-content;margin-left:3px;pointer-events:none}::ng-deep .p-tooltip.p-tooltip-left,.p-tooltip.p-tooltip-left{margin-right:6px;width:max-content;transform:translate(-6px)}::ng-deep .p-tooltip.p-tooltip-left .p-tooltip-arrow,.p-tooltip.p-tooltip-left .p-tooltip-arrow{border-left-color:#fff!important;top:50%;right:-3px;margin-top:-4px;border-width:4px 0 4px 6px!important}::ng-deep .p-tooltip.p-tooltip-right,.p-tooltip.p-tooltip-right{margin-left:6px;width:max-content;transform:translateY(-1px)}::ng-deep .p-tooltip.p-tooltip-right .p-tooltip-arrow,.p-tooltip.p-tooltip-right .p-tooltip-arrow{border-right-color:#fff!important;top:50%;left:0;margin-top:-4px;border-width:4px 6px 4px 0!important}::ng-deep .p-tooltip.p-tooltip-bottom .p-tooltip-arrow,.p-tooltip.p-tooltip-bottom .p-tooltip-arrow{border-bottom-color:#fff!important;border-width:0 4px 6px 4px!important;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i2$b.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }] }); }
|
|
9571
9594
|
}
|