@angulartoolsdr/card-widget-percentual 20.2.2
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/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# CardWidgetPercentual
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.1.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build card-widget-percentual
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/card-widget-percentual
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { NgClass, DecimalPipe } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { signal, EventEmitter, computed, inject, ViewChild, Output, Input, Component } from '@angular/core';
|
|
4
|
+
import { MatIconButton } from '@angular/material/button';
|
|
5
|
+
import { MatCard } from '@angular/material/card';
|
|
6
|
+
import { MatIcon } from '@angular/material/icon';
|
|
7
|
+
import { TranslationService, TranslationPipe } from '@angulartoolsdr/translation';
|
|
8
|
+
import { NgxEchartsDirective } from 'ngx-echarts';
|
|
9
|
+
import * as i1 from 'ngx-skeleton-loader';
|
|
10
|
+
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
11
|
+
|
|
12
|
+
class CardWidgetPercentualComponent {
|
|
13
|
+
set _loading(value) {
|
|
14
|
+
this.loading = value;
|
|
15
|
+
}
|
|
16
|
+
set listaValores(valores) {
|
|
17
|
+
if (valores === undefined || valores === null || valores.length === 0)
|
|
18
|
+
return;
|
|
19
|
+
this._listaValores.set(valores);
|
|
20
|
+
this.updateChartData();
|
|
21
|
+
}
|
|
22
|
+
set _selectedItem(item) {
|
|
23
|
+
this.selectedItem.set(item);
|
|
24
|
+
}
|
|
25
|
+
toggleLegendaExpandida() {
|
|
26
|
+
this.mostrarLegendaExpandida = !this.mostrarLegendaExpandida;
|
|
27
|
+
if (this.mostrarLegendaExpandida && this.cardContainerRef && this.legendContainerRef) {
|
|
28
|
+
// Aguarda renderização
|
|
29
|
+
setTimeout(() => {
|
|
30
|
+
//console.log(this.cardContainerRef?.nativeElement);
|
|
31
|
+
//console.log(this.legendContainerRef?.nativeElement?.offsetWidth);
|
|
32
|
+
if (this.cardContainerRef.nativeElement?.offsetWidth > 0) {
|
|
33
|
+
const largura = this.cardContainerRef.nativeElement.offsetWidth;
|
|
34
|
+
this.larguraCard = (largura);
|
|
35
|
+
}
|
|
36
|
+
if (this.legendContainerRef.nativeElement?.offsetWidth > 0) {
|
|
37
|
+
const largura = this.legendContainerRef.nativeElement.offsetWidth;
|
|
38
|
+
this.larguraLegenda = largura;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
constructor() {
|
|
44
|
+
this.selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
45
|
+
this.title = '';
|
|
46
|
+
this.iconClass = '';
|
|
47
|
+
this.selectedItemChange = new EventEmitter();
|
|
48
|
+
this._listaValores = signal([], ...(ngDevMode ? [{ debugName: "_listaValores" }] : []));
|
|
49
|
+
this.total = computed(() => this._listaValores().reduce((acc, curr) => acc + curr.valor, 0), ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
50
|
+
this.mostrarLegendaExpandida = false;
|
|
51
|
+
this.larguraLegenda = 150;
|
|
52
|
+
this.larguraCard = 242;
|
|
53
|
+
this.chartOptions = signal({}, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
|
|
54
|
+
this.loading = false;
|
|
55
|
+
this.updateChartData();
|
|
56
|
+
this.translationService = inject(TranslationService);
|
|
57
|
+
}
|
|
58
|
+
updateChartData() {
|
|
59
|
+
// Código para o gráfico em stackedbar
|
|
60
|
+
const dados = this._listaValores();
|
|
61
|
+
if (!dados || dados.length === 0)
|
|
62
|
+
return;
|
|
63
|
+
const total = this.total();
|
|
64
|
+
const series = [...dados].reverse().map(item => ({
|
|
65
|
+
name: item.nome,
|
|
66
|
+
type: 'bar',
|
|
67
|
+
stack: 'total',
|
|
68
|
+
itemStyle: { color: item.cor },
|
|
69
|
+
emphasis: { focus: 'series' },
|
|
70
|
+
data: [item.valor]
|
|
71
|
+
}));
|
|
72
|
+
this.chartOptions.set({
|
|
73
|
+
tooltip: {
|
|
74
|
+
trigger: 'axis',
|
|
75
|
+
z: 9999, // Garante que fique por cima de tudo
|
|
76
|
+
position: function (point, params, dom, rect, size) {
|
|
77
|
+
const [x] = point;
|
|
78
|
+
const [tooltipWidth] = size.contentSize;
|
|
79
|
+
// Se estiver perto da margem esquerda (ex: 100px), joga para a direita
|
|
80
|
+
if (x < tooltipWidth + 100) {
|
|
81
|
+
return ['right', 'center'];
|
|
82
|
+
}
|
|
83
|
+
return ['left', 'center'];
|
|
84
|
+
},
|
|
85
|
+
axisPointer: { type: 'shadow' },
|
|
86
|
+
formatter: (params) => {
|
|
87
|
+
return params.reverse().map(p => `<div style="display: flex; align-items: center; font-size: 11px;">
|
|
88
|
+
<span style="
|
|
89
|
+
display: inline-block;
|
|
90
|
+
width: 8px;
|
|
91
|
+
height: 8px;
|
|
92
|
+
border-radius: 50%;
|
|
93
|
+
background-color: ${p.color};
|
|
94
|
+
margin-right: 6px;
|
|
95
|
+
"></span>
|
|
96
|
+
${p.seriesName}: <strong style="margin-left: 4px;">${p.value}</strong>
|
|
97
|
+
<span style="margin-left: 4px; color: #888;">(${((p.value / total) * 100).toFixed(1)}%)</span>
|
|
98
|
+
</div>`).join('');
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false },
|
|
102
|
+
xAxis: { type: 'category', data: ['Total'], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } },
|
|
103
|
+
yAxis: { type: 'value', show: false },
|
|
104
|
+
series
|
|
105
|
+
});
|
|
106
|
+
// Código para o gráfico de rosca
|
|
107
|
+
/*const dados = this._listaValores();
|
|
108
|
+
if (!dados || dados.length === 0) return;
|
|
109
|
+
|
|
110
|
+
const data = dados.map(item => ({
|
|
111
|
+
value: item.valor,
|
|
112
|
+
name: item.nome,
|
|
113
|
+
itemStyle: { color: item.cor }
|
|
114
|
+
}));
|
|
115
|
+
|
|
116
|
+
this.chartOptions.set({
|
|
117
|
+
tooltip: {
|
|
118
|
+
trigger: 'item',
|
|
119
|
+
formatter: '{b}: {c} ({d}%)'
|
|
120
|
+
},
|
|
121
|
+
series: [
|
|
122
|
+
{
|
|
123
|
+
type: 'pie',
|
|
124
|
+
radius: ['70%', '90%'],
|
|
125
|
+
avoidLabelOverlap: false,
|
|
126
|
+
label: { show: false },
|
|
127
|
+
labelLine: { show: false },
|
|
128
|
+
data
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
});*/
|
|
132
|
+
}
|
|
133
|
+
getPercentualPorValor(valor) {
|
|
134
|
+
return this.total() > 0 ? (valor / this.total()) * 100 : 0;
|
|
135
|
+
}
|
|
136
|
+
get lista() {
|
|
137
|
+
return this._listaValores();
|
|
138
|
+
}
|
|
139
|
+
onClickItem(item) {
|
|
140
|
+
this.selectedItem.set(item);
|
|
141
|
+
this.selectedItemChange.emit(item);
|
|
142
|
+
}
|
|
143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CardWidgetPercentualComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CardWidgetPercentualComponent, isStandalone: true, selector: "lib-card-widget-percentual", inputs: { title: "title", iconClass: "iconClass", _loading: ["loading", "_loading"], listaValores: ["valueData", "listaValores"], _selectedItem: ["selectedItem", "_selectedItem"] }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "btnVerMaisRef", first: true, predicate: ["btnVerMais"], descendants: true }, { propertyName: "caixaExpandidaRef", first: true, predicate: ["caixaExpandida"], descendants: true }, { propertyName: "cardContainerRef", first: true, predicate: ["cardContainer"], descendants: true }, { propertyName: "legendContainerRef", first: true, predicate: ["legendContainer"], descendants: true }], ngImport: i0, template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TranslationPipe, name: "translate" }] }); }
|
|
145
|
+
}
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CardWidgetPercentualComponent, decorators: [{
|
|
147
|
+
type: Component,
|
|
148
|
+
args: [{ selector: 'lib-card-widget-percentual', imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule], template: "\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Bot\u00E3o de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n", styles: ["mat-card{padding:16px;display:flex;flex-direction:column;border-radius:.75rem}mat-card .header{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}mat-card .content{display:flex;align-items:center}mat-card .content .chart{width:40px;height:75px;margin-right:16px}mat-card .content .legend{width:100%;display:flex;flex-direction:column}mat-card .content .legend .ver-mais-btn{align-self:flex-end;margin-top:0;margin-right:0!important}mat-card .content .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;gap:4px;margin-bottom:4px;margin-top:4px;cursor:pointer}mat-card .content .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}mat-card .content .item .label-nome{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis;min-width:60px;transition:all .2s ease-in-out}mat-card .content .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}mat-card .content .item .label-valores{display:inline;flex-direction:column;align-items:flex-end;font-size:13px;min-width:30px}mat-card .content .item .label-valores .quantidade{display:inline-flex;font-weight:700;line-height:1.2}mat-card .content .item .label-valores .percentual{display:inline-flex;font-size:9px;color:#888;min-width:31px;justify-content:end;line-height:1.2}.legenda-expandida{position:absolute;top:81%;right:0;background:#fff;border-radius:.75rem;box-shadow:0 6px 8px -2px #00000026;padding:4px 15px;z-index:1000;min-width:100px;transition:width .2s ease;border-top:none;animation:fadeInDown .2s ease-out}.legenda-expandida .item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;padding:4px 0;transition:width .2s ease;margin-bottom:4px;margin-top:4px;cursor:pointer;transition:all .2s ease-in-out}.legenda-expandida .item .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legenda-expandida .item .label-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .2s ease-in-out}.legenda-expandida .item .label-nome.itemSelected{color:#2f4050!important;font-size:14px!important;font-weight:700!important;transform:scale(1.05)}.legenda-expandida .item .label-valores{display:inline;flex-direction:column;align-items:flex-end}.legenda-expandida .item .label-valores .quantidade{font-weight:700;font-size:12px;display:inline-flex}.legenda-expandida .item .label-valores .percentual{font-size:10px;color:#888;display:inline-flex;min-width:31px;justify-content:end;line-height:1.2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.selected{border:1px solid var(--theme-primary-300)}\n"] }]
|
|
149
|
+
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
150
|
+
type: Input
|
|
151
|
+
}], iconClass: [{
|
|
152
|
+
type: Input
|
|
153
|
+
}], _loading: [{
|
|
154
|
+
type: Input,
|
|
155
|
+
args: ['loading']
|
|
156
|
+
}], listaValores: [{
|
|
157
|
+
type: Input,
|
|
158
|
+
args: ['valueData']
|
|
159
|
+
}], _selectedItem: [{
|
|
160
|
+
type: Input,
|
|
161
|
+
args: ['selectedItem']
|
|
162
|
+
}], selectedItemChange: [{
|
|
163
|
+
type: Output
|
|
164
|
+
}], btnVerMaisRef: [{
|
|
165
|
+
type: ViewChild,
|
|
166
|
+
args: ['btnVerMais', { static: false }]
|
|
167
|
+
}], caixaExpandidaRef: [{
|
|
168
|
+
type: ViewChild,
|
|
169
|
+
args: ['caixaExpandida', { static: false }]
|
|
170
|
+
}], cardContainerRef: [{
|
|
171
|
+
type: ViewChild,
|
|
172
|
+
args: ['cardContainer', { static: false }]
|
|
173
|
+
}], legendContainerRef: [{
|
|
174
|
+
type: ViewChild,
|
|
175
|
+
args: ['legendContainer', { static: false }]
|
|
176
|
+
}] } });
|
|
177
|
+
|
|
178
|
+
/*
|
|
179
|
+
* Public API Surface of card-widget-percentual
|
|
180
|
+
*/
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Generated bundle index. Do not edit.
|
|
184
|
+
*/
|
|
185
|
+
|
|
186
|
+
export { CardWidgetPercentualComponent };
|
|
187
|
+
//# sourceMappingURL=angulartoolsdr-card-widget-percentual.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"angulartoolsdr-card-widget-percentual.mjs","sources":["../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.ts","../../../projects/card-widget-percentual/src/lib/card-widget-percentual.component.html","../../../projects/card-widget-percentual/src/public-api.ts","../../../projects/card-widget-percentual/src/angulartoolsdr-card-widget-percentual.ts"],"sourcesContent":["import { DecimalPipe, NgClass } from '@angular/common';\nimport { Component, computed, ElementRef, EventEmitter, inject, Input, Output, signal, ViewChild } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatCard } from '@angular/material/card';\nimport { MatIcon } from '@angular/material/icon';\nimport { TranslationPipe, TranslationService } from '@angulartoolsdr/translation';\nimport { NgxEchartsDirective } from 'ngx-echarts';\nimport { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\n\nexport interface DadoPercentual {\n id?: number,\n nome: string;\n valor: number;\n cor: string;\n}\n\n@Component({\n selector: 'lib-card-widget-percentual',\n templateUrl: './card-widget-percentual.component.html',\n styleUrls: ['./card-widget-percentual.component.scss'],\n imports: [DecimalPipe, NgClass, MatIconButton, MatIcon, MatCard, NgxEchartsDirective, TranslationPipe, NgxSkeletonLoaderModule],\n})\nexport class CardWidgetPercentualComponent {\n\n selectedItem = signal<DadoPercentual | null>(null);\n\n @Input() title: string = '';\n @Input() iconClass: string = '';\n\n @Input('loading') set _loading(value: boolean) {\n this.loading = value;\n }\n\n @Input('valueData') set listaValores(valores: DadoPercentual[]) {\n if (valores === undefined || valores === null || valores.length === 0) return;\n \n this._listaValores.set(valores);\n this.updateChartData();\n }\n\n @Input('selectedItem') set _selectedItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n }\n\n @Output() selectedItemChange = new EventEmitter<DadoPercentual>();\n\n @ViewChild('btnVerMais', { static: false }) btnVerMaisRef!: ElementRef;\n @ViewChild('caixaExpandida', { static: false }) caixaExpandidaRef!: ElementRef;\n @ViewChild('cardContainer', { static: false }) cardContainerRef!: ElementRef;\n @ViewChild('legendContainer', { static: false }) legendContainerRef!: ElementRef;\n\n private _listaValores = signal<DadoPercentual[]>([]);\n\n total = computed(() =>\n this._listaValores().reduce((acc, curr) => acc + curr.valor, 0)\n );\n\n mostrarLegendaExpandida = false;\n larguraLegenda = 150;\n larguraCard = 242;\n\n chartOptions = signal<any>({});\n\n loading = false;\n\n translationService;\n\n toggleLegendaExpandida() {\n this.mostrarLegendaExpandida = !this.mostrarLegendaExpandida;\n \n if (this.mostrarLegendaExpandida && this.cardContainerRef && this.legendContainerRef) {\n // Aguarda renderização\n setTimeout(() => {\n //console.log(this.cardContainerRef?.nativeElement);\n //console.log(this.legendContainerRef?.nativeElement?.offsetWidth);\n if (this.cardContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.cardContainerRef!.nativeElement!.offsetWidth;\n this.larguraCard = (largura);\n }\n if (this.legendContainerRef!.nativeElement?.offsetWidth > 0) {\n const largura = this.legendContainerRef!.nativeElement!.offsetWidth;\n this.larguraLegenda = largura;\n }\n });\n }\n }\n\n constructor() { \n this.updateChartData();\n this.translationService = inject(TranslationService);\n }\n\n updateChartData() {\n\n // Código para o gráfico em stackedbar\n const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const total = this.total();\n const series = [...dados].reverse().map(item => ({\n name: item.nome,\n type: 'bar',\n stack: 'total',\n itemStyle: { color: item.cor },\n emphasis: { focus: 'series' },\n data: [item.valor]\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'axis',\n z: 9999, // Garante que fique por cima de tudo\n position: function (point, params, dom, rect, size) {\n const [x] = point;\n const [tooltipWidth] = size.contentSize;\n \n // Se estiver perto da margem esquerda (ex: 100px), joga para a direita\n if (x < tooltipWidth + 100) {\n return ['right', 'center'];\n }\n return ['left', 'center'];\n },\n axisPointer: { type: 'shadow' },\n formatter: (params: any[]) => {\n return params.reverse().map(p =>\n `<div style=\"display: flex; align-items: center; font-size: 11px;\">\n <span style=\"\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: ${p.color};\n margin-right: 6px;\n \"></span>\n ${p.seriesName}: <strong style=\"margin-left: 4px;\">${p.value}</strong>\n <span style=\"margin-left: 4px; color: #888;\">(${((p.value / total) * 100).toFixed(1)}%)</span>\n </div>`\n ).join('');\n }\n },\n grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false },\n xAxis: { type: 'category', data: ['Total'], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } },\n yAxis: { type: 'value', show: false },\n series\n });\n \n\n // Código para o gráfico de rosca\n /*const dados = this._listaValores();\n if (!dados || dados.length === 0) return;\n\n const data = dados.map(item => ({\n value: item.valor,\n name: item.nome,\n itemStyle: { color: item.cor }\n }));\n\n this.chartOptions.set({\n tooltip: {\n trigger: 'item',\n formatter: '{b}: {c} ({d}%)'\n },\n series: [\n {\n type: 'pie',\n radius: ['70%', '90%'],\n avoidLabelOverlap: false,\n label: { show: false },\n labelLine: { show: false },\n data\n }\n ]\n });*/\n }\n\n getPercentualPorValor(valor: number): number {\n return this.total() > 0 ? (valor / this.total()) * 100 : 0;\n }\n\n get lista() {\n return this._listaValores();\n }\n\n onClickItem(item: DadoPercentual) {\n this.selectedItem.set(item);\n this.selectedItemChange.emit(item);\n }\n}\n","\n<div #cardContainer>\n <mat-card [class.selected]=\"selectedItem() != null\" [style.paddingBottom]=\"lista.length > 2 ? '8px' : '16px'\">\n @if (!loading) {\n <div class=\"header\">\n <div>{{title}}</div>\n <div class=\"d-inline-flex text-right\" style=\"place-items: end;\">\n <div style=\"font-size: 24px; line-height: 1;\" class=\"total mb-0 pb-0\">\n <strong class=\"mr-1 mb-0\">{{ total() | number: '1.0-0' : translationService.currentLang}}</strong>\n </div>\n <i style=\"font-size: 24px\" [ngClass]=\"iconClass\"></i>\n </div>\n </div>\n }\n @else {\n <div class=\"header\">\n <div>\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '20px' }\"\n ></ngx-skeleton-loader>\n </div>\n </div>\n\n }\n\n @if (!loading) {\n <div class=\"content\">\n <div echarts [options]=\"chartOptions()\" class=\"chart\" [style.z-index]=\"mostrarLegendaExpandida ? 2000 : 2\"></div>\n <div class=\"legend\" #legendContainer>\n @for (item of lista.slice(0, 2); track item) {\n <div class=\"item\" (click)=\"onClickItem(item)\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual ml-1\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n\n <!-- Container flutuante da legenda expandida -->\n @if (mostrarLegendaExpandida) {\n <div [class.selected]=\"selectedItem() != null\" style=\"border-top: none; border-top-left-radius: 0; border-top-right-radius: 0;\" class=\"legenda-expandida\" [style.width.px]=\"larguraCard\" id=\"caixaExpandida\">\n @for (item of lista.slice(2); track item) {\n <div style=\"margin-left: 48px;\" [style.width.px]=\"larguraLegenda\" (click)=\"onClickItem(item)\" class=\"item\">\n <span class=\"dot\" [style.background-color]=\"item.cor\"></span>\n <span [class.itemSelected]=\"item?.id === selectedItem()?.id\" class=\"label-nome\">{{ item.nome }}</span>\n <div class=\"label-valores\">\n <div class=\"quantidade\">{{ item.valor | number: '1.0-0' : translationService.currentLang}}</div>\n <div class=\"percentual\">({{ getPercentualPorValor(item.valor) | number: '1.0-0' : translationService.currentLang}}%)</div>\n </div>\n </div>\n }\n <div class=\"item d-inline-flex\" style=\"margin-left: 10px; align-items: center; justify-content: right;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MENOS' | translate}}</span>\n <button mat-icon-button id=\"btnVerMenos\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_less</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @else {\n <div>\n @for (i of [1,2]; track i) {\n <div >\n <ngx-skeleton-loader\n [theme]=\"{ width: '200px', height: '15px' }\"\n ></ngx-skeleton-loader>\n </div>\n }\n </div>\n}\n<!-- Botão de expandir -->\n@if (lista.length > 2 && !mostrarLegendaExpandida && !loading) {\n <div class=\"item d-inline-flex\" style=\"align-items: center; justify-content: right; margin-top: -15px; margin-right: -15px;\">\n <span class=\"label-valores\" style=\"font-size: 10px; line-height: 1;\">{{'MAIS' | translate}}</span>\n <button mat-icon-button id=\"btnVeMais\" (click)=\"toggleLegendaExpandida()\" class=\"ver-mais-btn\">\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n}\n</mat-card>\n</div>\n","/*\n * Public API Surface of card-widget-percentual\n */\n\nexport * from './lib/card-widget-percentual.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { EventEmitter, ElementRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface DadoPercentual {
|
|
5
|
+
id?: number;
|
|
6
|
+
nome: string;
|
|
7
|
+
valor: number;
|
|
8
|
+
cor: string;
|
|
9
|
+
}
|
|
10
|
+
declare class CardWidgetPercentualComponent {
|
|
11
|
+
selectedItem: _angular_core.WritableSignal<DadoPercentual>;
|
|
12
|
+
title: string;
|
|
13
|
+
iconClass: string;
|
|
14
|
+
set _loading(value: boolean);
|
|
15
|
+
set listaValores(valores: DadoPercentual[]);
|
|
16
|
+
set _selectedItem(item: DadoPercentual);
|
|
17
|
+
selectedItemChange: EventEmitter<DadoPercentual>;
|
|
18
|
+
btnVerMaisRef: ElementRef;
|
|
19
|
+
caixaExpandidaRef: ElementRef;
|
|
20
|
+
cardContainerRef: ElementRef;
|
|
21
|
+
legendContainerRef: ElementRef;
|
|
22
|
+
private _listaValores;
|
|
23
|
+
total: _angular_core.Signal<number>;
|
|
24
|
+
mostrarLegendaExpandida: boolean;
|
|
25
|
+
larguraLegenda: number;
|
|
26
|
+
larguraCard: number;
|
|
27
|
+
chartOptions: _angular_core.WritableSignal<any>;
|
|
28
|
+
loading: boolean;
|
|
29
|
+
translationService: any;
|
|
30
|
+
toggleLegendaExpandida(): void;
|
|
31
|
+
constructor();
|
|
32
|
+
updateChartData(): void;
|
|
33
|
+
getPercentualPorValor(valor: number): number;
|
|
34
|
+
get lista(): DadoPercentual[];
|
|
35
|
+
onClickItem(item: DadoPercentual): void;
|
|
36
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardWidgetPercentualComponent, never>;
|
|
37
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardWidgetPercentualComponent, "lib-card-widget-percentual", never, { "title": { "alias": "title"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "_loading": { "alias": "loading"; "required": false; }; "listaValores": { "alias": "valueData"; "required": false; }; "_selectedItem": { "alias": "selectedItem"; "required": false; }; }, { "selectedItemChange": "selectedItemChange"; }, never, never, true, never>;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { CardWidgetPercentualComponent };
|
|
41
|
+
export type { DadoPercentual };
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@angulartoolsdr/card-widget-percentual",
|
|
3
|
+
"version": "20.2.2",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "20.2.2",
|
|
6
|
+
"@angular/core": "20.2.2",
|
|
7
|
+
"ngx-skeleton-loader": "11.3.0",
|
|
8
|
+
"@angulartoolsdr/translation": "20.2.2",
|
|
9
|
+
"ngx-echarts": "^20.0.2",
|
|
10
|
+
"@angular/material": "20.2.1"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"tslib": "^2.8.1"
|
|
14
|
+
},
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"module": "fesm2022/angulartoolsdr-card-widget-percentual.mjs",
|
|
17
|
+
"typings": "index.d.ts",
|
|
18
|
+
"exports": {
|
|
19
|
+
"./package.json": {
|
|
20
|
+
"default": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
".": {
|
|
23
|
+
"types": "./index.d.ts",
|
|
24
|
+
"default": "./fesm2022/angulartoolsdr-card-widget-percentual.mjs"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|