/**
* returns the data for fill the CNPJ quickfilter
* @param ccmid string
* @param ccmId
*/
getAgreementsTaxIds(ccmId: string): void {
// this.loadingSummary.set(true);
// this.error.set(false);
this.agreementsService
.getAgreementsTaxIds(ccmId)
.pipe(take(1))
.subscribe({
next: (response) => {
this.mapCnpjFilter(response);
},
error: () => {
// this.error.set(true);
// this.loadingSummary.set(false);
},
});
}
/**
* handle data to populate cnpj filter
* @param items
*/
mapCnpjFilter(items: ITaxId[]): void {
const options: IselectOption[] = items.map((item, index) => ({
value: item.taxId,
name: item.taxId,
id: index,
}));
this.cnpjFilter.set(options);
}
/**
* get the agreement usage data for populate charts
* @param ccmid string
*/
getAgreementProductUsageDetails(filter?: IStatementFilter): void {
// this.loadingSummary.set(true);
// this.error.set(false);
console.log(this.agreementsStateControl.valueSelectedDetails().ccmId);
this.agreementsService
.getAgreementProductUsageDetails(
this.agreementsStateControl.valueSelectedDetails().ccmId,
filter,
)
.pipe(take(1))
.subscribe({
next: (success) => {
this.chartData.set(success);
//this.columnChartData.set(success);
this.mapColumnChartData(success);
this.mapDonutChartData(success);
},
error: (error) => {
this.error.set(error);
// this.loadingSummary.set(false);
},
});
}
mapColumnChartData(data?: IProductUsageDetail): void {
const expectedUsageDataMapped: number[] = data.achievementsByProducts.map(
(item) => item.expected,
);
const achievedUsageDataMapped: number[] = data.achievementsByProducts.map(
(item) => item.achievement,
);
const categoriesMapped: string[] = data.achievementsByProducts.map(
(m) => m.displayProduct,
);
this.columnChartData.set({
// … configurações base
// product = código do produto
// displayproduct = descrição do produto
// expected = quantidade contratada
// achievement = quantidade utilizada
// achievementpercent = percentual do volume utilizado
chart: {
type: ‘column’,
backgroundColor: ‘transparent’,
},
title: { text: null },
credits: { enabled: false },
legend: {
enabled: true,
align: ‘center’,
verticalAlign: ‘bottom’,
itemStyle: {
fontSize: ’12px’,
fontWeight: ‘normal’,
},
},
xAxis: {
// categories: [‘TED’, ‘Boleto’, ‘Pix’],
categories: categoriesMapped,
lineWidth: 0,
tickWidth: 0,
},
yAxis: {
min: 0,
max: 400,
tickInterval: 75,
title: { text: null },
gridLineWidth: 1,
gridLineDashStyle: ‘Dash’,
},
plotOptions: {
column: {
pointWidth: 40, // Largura fixa das colunas
pointPadding: 0.1, // Espaçamento entre colunas
groupPadding: 0.15, // Espaçamento entre grupos
borderWidth: 0,
dataLabels: {
enabled: true,
style: {
fontSize: ’10px’,
fontWeight: ‘bold’,
textOutline: ‘none’,
},
},
},
},
// series: [
// {
// name: ‘Quantidade utilizada’,
// type: ‘column’,
// color: ‘#4A90E2’, // Azul customizado
// data: [360, 130, 310],
// },
// {
// name: ‘Quantidade contratada’,
// type: ‘column’,
// color: ‘#D8D8D8’, // Cinza customizado
// data: [340, 270, 320],
// },
// ],
series: [
{
name: ‘Quantidade utilizada’,
type: ‘column’,
color: ‘#4A90E2’,
// data: [data.ted.used, data.boleto.used, data.pix.used],
data: achievedUsageDataMapped,
},
{
name: ‘Quantidade contratada’,
type: ‘column’,
color: ‘#D8D8D8’,
// data: [
// data.ted.contracted,
// data.boleto.contracted,
// data.pix.contracted,
// ],
data: expectedUsageDataMapped,
},
],
});
console.log(this.columnChartData());
}
mapDonutChartData(data?: IProductUsageDetail): void {
const colorItem = donutChartColorsList;
const achievedPercentMapped = data.achievementsByProducts.map((m, i) => ({
name: m.displayProduct,
y: m.achievementPercent,
color: colorItem[i % colorItem.length],
}));
this.donutChartData.set({
// product = código do produto
// displayproduct = descrição do produto
// expected = quantidade contratada
// achievement = quantidade utilizada
// achievementpercent = percentual do volume utilizado
chart: {
type: ‘pie’,
backgroundColor: ‘transparent’,
},
title: { text: null },
credits: { enabled: false },
legend: {
enabled: true,
align: ‘center’,
verticalAlign: ‘bottom’,
itemStyle: {
fontSize: ’12px’,
fontWeight: ‘normal’,
},
},
plotOptions: {
pie: {
innerSize: ‘70%’, // Largura do donut
dataLabels: {
enabled: false, // Desabilita labels nos segmentos
},
showInLegend: true,
},
},
// series: [
// {
// name: ‘Percentual’,
// type: ‘pie’,
// data: [
// {
// name: ‘TED’,
// y: 35,
// color: ‘#4A6FA5’, // Azul escuro
// },
// {
// name: ‘Boleto’,
// y: 48,
// color: ‘#E67E50’, // Laranja
// },
// {
// name: ‘Pix’,
// y: 17,
// color: ‘#C06C9E’, // Rosa
// },
// ],
// },
// ],
series: [
{
name: ‘Percentual’,
type: ‘pie’,
// data: [
// {
// name: ‘TED’,
// y: 35,
// color: ‘#4A6FA5’, // Azul escuro
// },
// {
// name: ‘Boleto’,
// y: 48,
// color: ‘#E67E50’, // Laranja
// },
// {
// name: ‘Pix’,
// y: 17,
// color: ‘#C06C9E’, // Rosa
// },
// ],
data: achievedPercentMapped,
},
],
});
console.log(this.donutChartData());
}