bbgo_origin/apps/frontend/components/TotalAssetsPie.js

95 lines
2.5 KiB
JavaScript
Raw Normal View History

2022-06-11 00:57:54 +00:00
import React, { useEffect, useState } from 'react';
2021-01-25 08:56:02 +00:00
2022-06-11 00:57:54 +00:00
import { ResponsivePie } from '@nivo/pie';
import { queryAssets } from '../api/bbgo';
import { currencyColor } from '../src/utils';
2022-06-12 15:11:42 +00:00
import CardContent from '@mui/material/CardContent';
import Card from '@mui/material/Card';
2022-06-12 15:19:39 +00:00
import { makeStyles } from '@mui/styles';
2021-01-25 08:56:02 +00:00
function reduceAssetsBy(assets, field, minimum) {
2022-06-11 00:57:54 +00:00
let as = [];
2021-01-25 08:56:02 +00:00
2022-06-11 00:57:54 +00:00
let others = { id: 'others', labels: 'others', value: 0.0 };
for (let key in assets) {
if (assets[key]) {
let a = assets[key];
let value = a[field];
2021-01-25 08:56:02 +00:00
2022-06-11 00:57:54 +00:00
if (value < minimum) {
others.value += value;
} else {
as.push({
id: a.currency,
label: a.currency,
color: currencyColor(a.currency),
value: Math.round(value, 1),
});
}
2021-01-25 08:56:02 +00:00
}
2022-06-11 00:57:54 +00:00
}
2021-01-25 08:56:02 +00:00
2022-06-11 00:57:54 +00:00
return as;
2021-01-25 08:56:02 +00:00
}
const useStyles = makeStyles((theme) => ({
2022-06-11 00:57:54 +00:00
root: {
margin: theme.spacing(1),
},
cardContent: {
height: 350,
},
}));
2021-01-25 08:56:02 +00:00
export default function TotalAssetsPie({ assets }) {
2022-06-11 00:57:54 +00:00
const classes = useStyles();
return (
<Card className={classes.root} variant="outlined">
<CardContent className={classes.cardContent}>
<ResponsivePie
data={reduceAssetsBy(assets, 'inUSD', 2)}
margin={{ top: 20, right: 80, bottom: 10, left: 0 }}
padding={0.1}
innerRadius={0.8}
padAngle={1.0}
valueFormat=" >-$f"
colors={{ datum: 'data.color' }}
// colors={{scheme: 'nivo'}}
cornerRadius={0.1}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
radialLabelsSkipAngle={10}
radialLabelsTextColor="#333333"
radialLabelsLinkColor={{ from: 'color' }}
sliceLabelsSkipAngle={30}
sliceLabelsTextColor="#fff"
legends={[
{
anchor: 'right',
direction: 'column',
justify: false,
translateX: 70,
translateY: 0,
itemsSpacing: 5,
itemWidth: 80,
itemHeight: 24,
itemTextColor: '#999',
itemOpacity: 1,
symbolSize: 18,
symbolShape: 'circle',
effects: [
{
on: 'hover',
style: {
itemTextColor: '#000',
},
},
],
},
]}
/>
</CardContent>
</Card>
);
2021-01-25 08:56:02 +00:00
}