yw-charts-library 0.0.2 → 0.0.3
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.
|
@@ -1912,6 +1912,7 @@ const buildPieResult = (dataSource, total, config, cfg, chartTitle, startAngle,
|
|
|
1912
1912
|
: (config?.showLegend ?? true);
|
|
1913
1913
|
const legendPosition = legends?.position ?? config?.legendPosition ?? 'Bottom';
|
|
1914
1914
|
const visualConfig = {
|
|
1915
|
+
title: chartTitle,
|
|
1915
1916
|
legendSettings: {
|
|
1916
1917
|
visible: isLegendVisible,
|
|
1917
1918
|
position: legendPosition,
|
|
@@ -1970,6 +1971,7 @@ class PieChartSyncfusionComponent {
|
|
|
1970
1971
|
this._idComponent = '';
|
|
1971
1972
|
this.chartData = [];
|
|
1972
1973
|
this.dataChartParse = [];
|
|
1974
|
+
this.chartTitle = '';
|
|
1973
1975
|
this._lastWidth = 0;
|
|
1974
1976
|
this._lastHeight = 0;
|
|
1975
1977
|
}
|
|
@@ -2036,12 +2038,17 @@ class PieChartSyncfusionComponent {
|
|
|
2036
2038
|
this.legendSettings = parsedResult.visualConfig.legendSettings;
|
|
2037
2039
|
this.tooltip = parsedResult.visualConfig.tooltip;
|
|
2038
2040
|
this.dataLabel = parsedResult.visualConfig.dataLabel;
|
|
2041
|
+
this.chartTitle = parsedResult.visualConfig.title || parsedResult.labelData?.title || this.config.title || '';
|
|
2042
|
+
}
|
|
2043
|
+
else {
|
|
2044
|
+
this.chartTitle = parsedResult.labelData?.title || this.config.title || '';
|
|
2039
2045
|
}
|
|
2040
2046
|
}
|
|
2041
2047
|
else {
|
|
2042
2048
|
this.dataChartParse = [];
|
|
2043
2049
|
this.centerLabel = undefined;
|
|
2044
2050
|
this.centerLabelSettings = undefined;
|
|
2051
|
+
this.chartTitle = this.config?.title || '';
|
|
2045
2052
|
}
|
|
2046
2053
|
}
|
|
2047
2054
|
onChartLoaded(args) {
|
|
@@ -2061,13 +2068,13 @@ class PieChartSyncfusionComponent {
|
|
|
2061
2068
|
}
|
|
2062
2069
|
}
|
|
2063
2070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartSyncfusionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2071
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: PieChartSyncfusionComponent, isStandalone: true, selector: "yw-pie-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [
|
|
2065
2072
|
AccumulationLegendService,
|
|
2066
2073
|
AccumulationTooltipService,
|
|
2067
2074
|
AccumulationDataLabelService,
|
|
2068
2075
|
PieSeriesService,
|
|
2069
2076
|
AccumulationAnnotationService,
|
|
2070
|
-
], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["accChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"
|
|
2077
|
+
], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["accChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pie-container\">\r\n @if (chartTitle) {\r\n <div class=\"pie-header-title\" [title]=\"chartTitle\">\r\n {{ chartTitle }}\r\n </div>\r\n }\r\n\r\n <div class=\"pie-wrapper\">\r\n <ejs-accumulationchart\r\n #accChart\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n [legendSettings]=\"legendSettings\"\r\n [tooltip]=\"tooltip\"\r\n [centerLabel]=\"centerLabelSettings\"\r\n (loaded)=\"onChartLoaded($event)\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n [enableAnimation]=\"true\">\r\n\r\n <e-accumulation-series-collection>\r\n <e-accumulation-series\r\n [dataSource]=\"dataChartParse\"\r\n xName=\"x\"\r\n yName=\"y\"\r\n pointColorMapping=\"fill\"\r\n [type]=\"'Pie'\"\r\n [radius]=\"seriesConfig.radius || '80%'\"\r\n [innerRadius]=\"seriesConfig.innerRadius || '0%'\"\r\n [startAngle]=\"seriesConfig.startAngle || 0\"\r\n [endAngle]=\"seriesConfig.endAngle || 360\"\r\n [explode]=\"config.explodeSlice ?? true\"\r\n [explodeIndex]=\"config.explodeIndex || 0\"\r\n [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n [dataLabel]=\"dataLabel\">\r\n </e-accumulation-series>\r\n </e-accumulation-series-collection>\r\n\r\n </ejs-accumulationchart>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.pie-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}.pie-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.pie-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AccumulationChartModule }, { kind: "component", type: i1.AccumulationChartComponent, selector: "ejs-accumulationchart", inputs: ["accessibility", "allowExport", "annotations", "background", "backgroundImage", "border", "center", "centerLabel", "currencyCode", "dataSource", "enableAnimation", "enableBorderOnMouseMove", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSmartLabels", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "isMultiSelect", "legendSettings", "locale", "margin", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["afterExport", "animationComplete", "annotationRender", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "legendClick", "legendRender", "load", "loaded", "pointClick", "pointMove", "pointRender", "resized", "selectionComplete", "seriesRender", "textRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i1.AccumulationSeriesDirective, selector: "e-accumulation-series-collection>e-accumulation-series", inputs: ["accessibility", "animation", "applyPattern", "border", "borderRadius", "dashArray", "dataLabel", "dataSource", "emptyPointSettings", "enableTooltip", "endAngle", "explode", "explodeAll", "explodeIndex", "explodeOffset", "gapRatio", "groupMode", "groupTo", "height", "innerRadius", "legendImageUrl", "legendShape", "name", "neckHeight", "neckWidth", "opacity", "palettes", "pointColorMapping", "pyramidMode", "query", "radius", "selectionStyle", "startAngle", "tooltipMappingName", "type", "visible", "width", "xName", "yName"] }, { kind: "directive", type: i1.AccumulationSeriesCollectionDirective, selector: "ej-accumulationchart>e-accumulation-series-collection" }] }); }
|
|
2071
2078
|
}
|
|
2072
2079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartSyncfusionComponent, decorators: [{
|
|
2073
2080
|
type: Component,
|
|
@@ -2077,7 +2084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
|
|
|
2077
2084
|
AccumulationDataLabelService,
|
|
2078
2085
|
PieSeriesService,
|
|
2079
2086
|
AccumulationAnnotationService,
|
|
2080
|
-
], template: "<div class=\"
|
|
2087
|
+
], template: "<div class=\"pie-container\">\r\n @if (chartTitle) {\r\n <div class=\"pie-header-title\" [title]=\"chartTitle\">\r\n {{ chartTitle }}\r\n </div>\r\n }\r\n\r\n <div class=\"pie-wrapper\">\r\n <ejs-accumulationchart\r\n #accChart\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n [legendSettings]=\"legendSettings\"\r\n [tooltip]=\"tooltip\"\r\n [centerLabel]=\"centerLabelSettings\"\r\n (loaded)=\"onChartLoaded($event)\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n [enableAnimation]=\"true\">\r\n\r\n <e-accumulation-series-collection>\r\n <e-accumulation-series\r\n [dataSource]=\"dataChartParse\"\r\n xName=\"x\"\r\n yName=\"y\"\r\n pointColorMapping=\"fill\"\r\n [type]=\"'Pie'\"\r\n [radius]=\"seriesConfig.radius || '80%'\"\r\n [innerRadius]=\"seriesConfig.innerRadius || '0%'\"\r\n [startAngle]=\"seriesConfig.startAngle || 0\"\r\n [endAngle]=\"seriesConfig.endAngle || 360\"\r\n [explode]=\"config.explodeSlice ?? true\"\r\n [explodeIndex]=\"config.explodeIndex || 0\"\r\n [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n [dataLabel]=\"dataLabel\">\r\n </e-accumulation-series>\r\n </e-accumulation-series-collection>\r\n\r\n </ejs-accumulationchart>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.pie-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}.pie-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.pie-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
|
|
2081
2088
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
|
|
2082
2089
|
type: ViewChild,
|
|
2083
2090
|
args: ['accChart']
|
|
@@ -2522,6 +2529,14 @@ class GaugeChartSyncfusionComponent {
|
|
|
2522
2529
|
get chartData() {
|
|
2523
2530
|
return this._chartData;
|
|
2524
2531
|
}
|
|
2532
|
+
/** HTML con estilos inline para la annotation central del gauge */
|
|
2533
|
+
get annotationHtml() {
|
|
2534
|
+
const text = this.animatedLabelText || (this.gaugePoint?.text ?? '');
|
|
2535
|
+
const size = this.currentLabelSize || this.visualConfig?.labelSize || '24px';
|
|
2536
|
+
const weight = this.visualConfig?.labelWeight || (this.visualConfig?.labelBold ? 'bold' : 'normal');
|
|
2537
|
+
const color = this.visualConfig?.labelColor || '#1F2937';
|
|
2538
|
+
return `<div style="font-size:${size};font-weight:${weight};color:${color};text-align:center;font-family:inherit;line-height:1.1;white-space:nowrap;">${text}</div>`;
|
|
2539
|
+
}
|
|
2525
2540
|
constructor(cdr, elRef) {
|
|
2526
2541
|
this.cdr = cdr;
|
|
2527
2542
|
this.elRef = elRef;
|
|
@@ -2789,11 +2804,11 @@ class GaugeChartSyncfusionComponent {
|
|
|
2789
2804
|
return index;
|
|
2790
2805
|
}
|
|
2791
2806
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartSyncfusionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartSyncfusionComponent, isStandalone: true, selector: "yw-gauge-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [AnnotationsService, GaugeTooltipService], viewQueries: [{ propertyName: "gaugeInstance", first: true, predicate: ["circulargauge"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gauge-container\">\r\n\r\n @if (visualConfig && visualConfig.title) {\r\n <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n {{ visualConfig.title }}\r\n </div>\r\n }\r\n\r\n <div class=\"gauge-wrapper\">\r\n <ejs-circulargauge\r\n #circulargauge\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n [enablePointerDrag]=\"false\"\r\n [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n <e-axes>\r\n <e-axis\r\n [minimum]=\"visualConfig.minimum\"\r\n [maximum]=\"visualConfig.maximum\"\r\n [startAngle]=\"visualConfig.startAngle\"\r\n [endAngle]=\"visualConfig.endAngle\"\r\n [lineStyle]=\"{ width: 0 }\"\r\n [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n <e-ranges>\r\n @for (range of visualConfig.ranges; track $index) {\r\n <e-range\r\n [start]=\"range.start\"\r\n [end]=\"range.end\"\r\n [color]=\"range.color\"\r\n [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n </e-range>\r\n }\r\n </e-ranges>\r\n }\r\n\r\n <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n <e-pointers>\r\n @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"visualConfig.maximum\"\r\n [color]=\"visualConfig.trackColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: false }\">\r\n </e-pointer>\r\n\r\n <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"gaugePoint.value\"\r\n [color]=\"visualConfig.progressColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: true, duration: 900 }\">\r\n </e-pointer>\r\n }\r\n\r\n @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n <e-pointer\r\n [value]=\"gaugePoint.value\"\r\n type=\"Needle\"\r\n [color]=\"visualConfig.pointerColor\"\r\n [needleTail]=\"{ length: '18%' }\"\r\n [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n </e-pointer>\r\n }\r\n </e-pointers>\r\n\r\n <!-- Etiqueta central con el valor -->\r\n @if (visualConfig.showLabel) {\r\n <e-annotations>\r\n <e-annotation\r\n [angle]=\"visualConfig.labelAngle\"\r\n [radius]=\"visualConfig.labelRadius\"\r\n zIndex=\"1\"\r\n [content]=\"
|
|
2807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartSyncfusionComponent, isStandalone: true, selector: "yw-gauge-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [AnnotationsService, GaugeTooltipService], viewQueries: [{ propertyName: "gaugeInstance", first: true, predicate: ["circulargauge"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gauge-container\">\r\n\r\n @if (visualConfig && visualConfig.title) {\r\n <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n {{ visualConfig.title }}\r\n </div>\r\n }\r\n\r\n <div class=\"gauge-wrapper\">\r\n <ejs-circulargauge\r\n #circulargauge\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n [enablePointerDrag]=\"false\"\r\n [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n <e-axes>\r\n <e-axis\r\n [minimum]=\"visualConfig.minimum\"\r\n [maximum]=\"visualConfig.maximum\"\r\n [startAngle]=\"visualConfig.startAngle\"\r\n [endAngle]=\"visualConfig.endAngle\"\r\n [lineStyle]=\"{ width: 0 }\"\r\n [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n <e-ranges>\r\n @for (range of visualConfig.ranges; track $index) {\r\n <e-range\r\n [start]=\"range.start\"\r\n [end]=\"range.end\"\r\n [color]=\"range.color\"\r\n [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n </e-range>\r\n }\r\n </e-ranges>\r\n }\r\n\r\n <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n <e-pointers>\r\n @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"visualConfig.maximum\"\r\n [color]=\"visualConfig.trackColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: false }\">\r\n </e-pointer>\r\n\r\n <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"gaugePoint.value\"\r\n [color]=\"visualConfig.progressColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: true, duration: 900 }\">\r\n </e-pointer>\r\n }\r\n\r\n @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n <e-pointer\r\n [value]=\"gaugePoint.value\"\r\n type=\"Needle\"\r\n [color]=\"visualConfig.pointerColor\"\r\n [needleTail]=\"{ length: '18%' }\"\r\n [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n </e-pointer>\r\n }\r\n </e-pointers>\r\n\r\n <!-- Etiqueta central con el valor -->\r\n @if (visualConfig.showLabel) {\r\n <e-annotations>\r\n <e-annotation\r\n [angle]=\"visualConfig.labelAngle\"\r\n [radius]=\"visualConfig.labelRadius\"\r\n zIndex=\"1\"\r\n [content]=\"annotationHtml\">\r\n </e-annotation>\r\n </e-annotations>\r\n }\r\n\r\n </e-axis>\r\n </e-axes>\r\n\r\n </ejs-circulargauge>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CircularGaugeModule }, { kind: "component", type: i1$1.CircularGaugeComponent, selector: "ejs-circulargauge", inputs: ["allowImageExport", "allowMargin", "allowPdfExport", "allowPrint", "allowRangePreRender", "animationDuration", "axes", "background", "border", "centerX", "centerY", "description", "enablePersistence", "enablePointerDrag", "enableRangeDrag", "enableRtl", "height", "legendSettings", "locale", "margin", "moveToCenter", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["animationComplete", "annotationRender", "axisLabelRender", "beforePrint", "dragEnd", "dragMove", "dragStart", "gaugeMouseDown", "gaugeMouseLeave", "gaugeMouseMove", "gaugeMouseUp", "legendRender", "load", "loaded", "radiusCalculate", "resized", "tooltipRender"] }, { kind: "directive", type: i1$1.AnnotationDirective, selector: "e-annotations>e-annotation", inputs: ["angle", "autoAngle", "content", "description", "radius", "textStyle", "zIndex"] }, { kind: "directive", type: i1$1.AnnotationsDirective, selector: "ej-circulargauge>e-axes>e-axis>e-annotations" }, { kind: "directive", type: i1$1.RangeDirective, selector: "e-ranges>e-range", inputs: ["color", "end", "endWidth", "legendText", "linearGradient", "offset", "opacity", "position", "radialGradient", "radius", "roundedCornerRadius", "start", "startWidth"] }, { kind: "directive", type: i1$1.RangesDirective, selector: "ej-circulargauge>e-axes>e-axis>e-ranges" }, { kind: "directive", type: i1$1.PointerDirective, selector: "e-pointers>e-pointer", inputs: ["animation", "border", "cap", "color", "description", "enableDrag", "imageUrl", "linearGradient", "markerHeight", "markerShape", "markerWidth", "needleEndWidth", "needleStartWidth", "needleTail", "offset", "pointerWidth", "position", "radialGradient", "radius", "roundedCornerRadius", "text", "textStyle", "type", "value"] }, { kind: "directive", type: i1$1.PointersDirective, selector: "ej-circulargauge>e-axes>e-axis>e-pointers" }, { kind: "directive", type: i1$1.AxisDirective, selector: "e-axes>e-axis", inputs: ["annotations", "background", "direction", "endAngle", "hideIntersectingLabel", "labelStyle", "lineStyle", "majorTicks", "maximum", "minimum", "minorTicks", "pointers", "radius", "rangeGap", "ranges", "roundingPlaces", "showLastLabel", "startAndEndRangeGap", "startAngle"] }, { kind: "directive", type: i1$1.AxesDirective, selector: "ej-circulargauge>e-axes" }] }); }
|
|
2793
2808
|
}
|
|
2794
2809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartSyncfusionComponent, decorators: [{
|
|
2795
2810
|
type: Component,
|
|
2796
|
-
args: [{ selector: 'yw-gauge-chart-syncfusion', standalone: true, imports: [CommonModule, CircularGaugeModule], providers: [AnnotationsService, GaugeTooltipService], template: "<div class=\"gauge-container\">\r\n\r\n @if (visualConfig && visualConfig.title) {\r\n <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n {{ visualConfig.title }}\r\n </div>\r\n }\r\n\r\n <div class=\"gauge-wrapper\">\r\n <ejs-circulargauge\r\n #circulargauge\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n [enablePointerDrag]=\"false\"\r\n [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n <e-axes>\r\n <e-axis\r\n [minimum]=\"visualConfig.minimum\"\r\n [maximum]=\"visualConfig.maximum\"\r\n [startAngle]=\"visualConfig.startAngle\"\r\n [endAngle]=\"visualConfig.endAngle\"\r\n [lineStyle]=\"{ width: 0 }\"\r\n [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n <e-ranges>\r\n @for (range of visualConfig.ranges; track $index) {\r\n <e-range\r\n [start]=\"range.start\"\r\n [end]=\"range.end\"\r\n [color]=\"range.color\"\r\n [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n </e-range>\r\n }\r\n </e-ranges>\r\n }\r\n\r\n <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n <e-pointers>\r\n @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"visualConfig.maximum\"\r\n [color]=\"visualConfig.trackColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: false }\">\r\n </e-pointer>\r\n\r\n <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"gaugePoint.value\"\r\n [color]=\"visualConfig.progressColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: true, duration: 900 }\">\r\n </e-pointer>\r\n }\r\n\r\n @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n <e-pointer\r\n [value]=\"gaugePoint.value\"\r\n type=\"Needle\"\r\n [color]=\"visualConfig.pointerColor\"\r\n [needleTail]=\"{ length: '18%' }\"\r\n [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n </e-pointer>\r\n }\r\n </e-pointers>\r\n\r\n <!-- Etiqueta central con el valor -->\r\n @if (visualConfig.showLabel) {\r\n <e-annotations>\r\n <e-annotation\r\n [angle]=\"visualConfig.labelAngle\"\r\n [radius]=\"visualConfig.labelRadius\"\r\n zIndex=\"1\"\r\n [content]=\"
|
|
2811
|
+
args: [{ selector: 'yw-gauge-chart-syncfusion', standalone: true, imports: [CommonModule, CircularGaugeModule], providers: [AnnotationsService, GaugeTooltipService], template: "<div class=\"gauge-container\">\r\n\r\n @if (visualConfig && visualConfig.title) {\r\n <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n {{ visualConfig.title }}\r\n </div>\r\n }\r\n\r\n <div class=\"gauge-wrapper\">\r\n <ejs-circulargauge\r\n #circulargauge\r\n [id]=\"idComponent\"\r\n [title]=\"''\"\r\n height=\"100%\"\r\n width=\"100%\"\r\n [enablePointerDrag]=\"false\"\r\n [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n <e-axes>\r\n <e-axis\r\n [minimum]=\"visualConfig.minimum\"\r\n [maximum]=\"visualConfig.maximum\"\r\n [startAngle]=\"visualConfig.startAngle\"\r\n [endAngle]=\"visualConfig.endAngle\"\r\n [lineStyle]=\"{ width: 0 }\"\r\n [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n <e-ranges>\r\n @for (range of visualConfig.ranges; track $index) {\r\n <e-range\r\n [start]=\"range.start\"\r\n [end]=\"range.end\"\r\n [color]=\"range.color\"\r\n [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n </e-range>\r\n }\r\n </e-ranges>\r\n }\r\n\r\n <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n <e-pointers>\r\n @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"visualConfig.maximum\"\r\n [color]=\"visualConfig.trackColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: false }\">\r\n </e-pointer>\r\n\r\n <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n <e-pointer\r\n type=\"RangeBar\"\r\n [value]=\"gaugePoint.value\"\r\n [color]=\"visualConfig.progressColor\"\r\n [pointerWidth]=\"visualConfig.progressWidth\"\r\n [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n [animation]=\"{ enable: true, duration: 900 }\">\r\n </e-pointer>\r\n }\r\n\r\n @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n <e-pointer\r\n [value]=\"gaugePoint.value\"\r\n type=\"Needle\"\r\n [color]=\"visualConfig.pointerColor\"\r\n [needleTail]=\"{ length: '18%' }\"\r\n [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n </e-pointer>\r\n }\r\n </e-pointers>\r\n\r\n <!-- Etiqueta central con el valor -->\r\n @if (visualConfig.showLabel) {\r\n <e-annotations>\r\n <e-annotation\r\n [angle]=\"visualConfig.labelAngle\"\r\n [radius]=\"visualConfig.labelRadius\"\r\n zIndex=\"1\"\r\n [content]=\"annotationHtml\">\r\n </e-annotation>\r\n </e-annotations>\r\n }\r\n\r\n </e-axis>\r\n </e-axes>\r\n\r\n </ejs-circulargauge>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
|
|
2797
2812
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { gaugeInstance: [{
|
|
2798
2813
|
type: ViewChild,
|
|
2799
2814
|
args: ['circulargauge']
|