|
|
|
|
@ -16,6 +16,7 @@ import { LinearScale } from 'chart.js';
|
|
|
|
|
import { ArcElement } from 'chart.js';
|
|
|
|
|
import { DoughnutController } from 'chart.js';
|
|
|
|
|
import { Chart } from 'chart.js';
|
|
|
|
|
import * as Color from 'color';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'gf-portfolio-proportion-chart',
|
|
|
|
|
@ -28,7 +29,7 @@ export class PortfolioProportionChartComponent
|
|
|
|
|
{
|
|
|
|
|
@Input() baseCurrency: Currency;
|
|
|
|
|
@Input() isInPercent: boolean;
|
|
|
|
|
@Input() key: string;
|
|
|
|
|
@Input() keys: string[];
|
|
|
|
|
@Input() locale: string;
|
|
|
|
|
@Input() maxItems?: number;
|
|
|
|
|
@Input() positions: {
|
|
|
|
|
@ -65,24 +66,54 @@ export class PortfolioProportionChartComponent
|
|
|
|
|
private initialize() {
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
const chartData: {
|
|
|
|
|
[symbol: string]: { color?: string; value: number };
|
|
|
|
|
[symbol: string]: {
|
|
|
|
|
color?: string;
|
|
|
|
|
subCategory: { [symbol: string]: { value: number } };
|
|
|
|
|
value: number;
|
|
|
|
|
};
|
|
|
|
|
} = {};
|
|
|
|
|
|
|
|
|
|
Object.keys(this.positions).forEach((symbol) => {
|
|
|
|
|
if (this.positions[symbol][this.key]) {
|
|
|
|
|
if (chartData[this.positions[symbol][this.key]]) {
|
|
|
|
|
chartData[this.positions[symbol][this.key]].value +=
|
|
|
|
|
if (this.positions[symbol][this.keys[0]]) {
|
|
|
|
|
if (chartData[this.positions[symbol][this.keys[0]]]) {
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]].value +=
|
|
|
|
|
this.positions[symbol].value;
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]].subCategory[
|
|
|
|
|
this.positions[symbol][this.keys[1]]
|
|
|
|
|
]
|
|
|
|
|
) {
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]].subCategory[
|
|
|
|
|
this.positions[symbol][this.keys[1]]
|
|
|
|
|
].value += this.positions[symbol].value;
|
|
|
|
|
} else {
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]].subCategory[
|
|
|
|
|
this.positions[symbol][this.keys[1]] ?? UNKNOWN_KEY
|
|
|
|
|
] = { value: this.positions[symbol].value };
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
chartData[this.positions[symbol][this.key]] = {
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]] = {
|
|
|
|
|
subCategory: {},
|
|
|
|
|
value: this.positions[symbol].value
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (this.positions[symbol][this.keys[1]]) {
|
|
|
|
|
chartData[this.positions[symbol][this.keys[0]]].subCategory = {
|
|
|
|
|
[this.positions[symbol][this.keys[1]]]: {
|
|
|
|
|
value: this.positions[symbol].value
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (chartData[UNKNOWN_KEY]) {
|
|
|
|
|
chartData[UNKNOWN_KEY].value += this.positions[symbol].value;
|
|
|
|
|
} else {
|
|
|
|
|
chartData[UNKNOWN_KEY] = {
|
|
|
|
|
subCategory: this.keys[1]
|
|
|
|
|
? { [this.keys[1]]: { value: 0 } }
|
|
|
|
|
: undefined,
|
|
|
|
|
value: this.positions[symbol].value
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
@ -107,13 +138,17 @@ export class PortfolioProportionChartComponent
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!unknownItem) {
|
|
|
|
|
const index = chartDataSorted.push([UNKNOWN_KEY, { value: 0 }]);
|
|
|
|
|
const index = chartDataSorted.push([
|
|
|
|
|
UNKNOWN_KEY,
|
|
|
|
|
{ subCategory: {}, value: 0 }
|
|
|
|
|
]);
|
|
|
|
|
unknownItem = chartDataSorted[index];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
rest.forEach((restItem) => {
|
|
|
|
|
if (unknownItem?.[1]) {
|
|
|
|
|
unknownItem[1] = {
|
|
|
|
|
subCategory: {},
|
|
|
|
|
value: unknownItem[1].value + restItem[1].value
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
@ -141,21 +176,53 @@ export class PortfolioProportionChartComponent
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const backgroundColorSubCategory: string[] = [];
|
|
|
|
|
const dataSubCategory: number[] = [];
|
|
|
|
|
const labelSubCategory: string[] = [];
|
|
|
|
|
|
|
|
|
|
chartDataSorted.forEach(([, item]) => {
|
|
|
|
|
let lightnessRatio = 0.2;
|
|
|
|
|
|
|
|
|
|
Object.keys(item.subCategory).forEach((subCategory) => {
|
|
|
|
|
backgroundColorSubCategory.push(
|
|
|
|
|
Color(item.color).lighten(lightnessRatio).hex()
|
|
|
|
|
);
|
|
|
|
|
dataSubCategory.push(item.subCategory[subCategory].value);
|
|
|
|
|
labelSubCategory.push(subCategory);
|
|
|
|
|
|
|
|
|
|
lightnessRatio += 0.1;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const datasets = [
|
|
|
|
|
{
|
|
|
|
|
backgroundColor: chartDataSorted.map(([, item]) => {
|
|
|
|
|
return item.color;
|
|
|
|
|
}),
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
data: chartDataSorted.map(([, item]) => {
|
|
|
|
|
return item.value;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
let labels = chartDataSorted.map(([label]) => {
|
|
|
|
|
return label;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (this.keys[1]) {
|
|
|
|
|
datasets.unshift({
|
|
|
|
|
backgroundColor: backgroundColorSubCategory,
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
data: dataSubCategory
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
labels = labelSubCategory.concat(labels);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
|
datasets: [
|
|
|
|
|
{
|
|
|
|
|
backgroundColor: chartDataSorted.map(([, item]) => {
|
|
|
|
|
return item.color;
|
|
|
|
|
}),
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
data: chartDataSorted.map(([, item]) => {
|
|
|
|
|
return item.value;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
labels: chartDataSorted.map(([label]) => {
|
|
|
|
|
return label;
|
|
|
|
|
})
|
|
|
|
|
datasets,
|
|
|
|
|
labels
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (this.chartCanvas) {
|
|
|
|
|
@ -166,13 +233,16 @@ export class PortfolioProportionChartComponent
|
|
|
|
|
this.chart = new Chart(this.chartCanvas.nativeElement, {
|
|
|
|
|
data,
|
|
|
|
|
options: {
|
|
|
|
|
cutout: '70%',
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: { display: false },
|
|
|
|
|
tooltip: {
|
|
|
|
|
callbacks: {
|
|
|
|
|
label: (context) => {
|
|
|
|
|
const label =
|
|
|
|
|
context.label === UNKNOWN_KEY ? 'Other' : context.label;
|
|
|
|
|
const labelIndex =
|
|
|
|
|
(data.datasets[context.datasetIndex - 1]?.data?.length ??
|
|
|
|
|
0) + context.dataIndex;
|
|
|
|
|
const label = context.chart.data.labels[labelIndex];
|
|
|
|
|
|
|
|
|
|
if (this.isInPercent) {
|
|
|
|
|
const value = 100 * <number>context.raw;
|
|
|
|
|
|
Thomas Kaul
3 years ago
committed by
GitHub