Como criar um progresso circular que pode manipular a visualização de dados para 3 valores diferentes usando o Mui CircularProgress

Primeiro, empilhe todos os três CircularProgresscomponentes uns sobre os outros. Para conseguir isso, defina a posição de cada um como absolute, e dê ao elemento wrapper uma posição de relative.

const StyledBox = styled(Box)({
  position: "relative"
});

const StyledCircularProgress = styled(CircularProgress)({
  position: "absolute"
});

Por padrão, CircularProgresstem uma rotação aplicada a ele que o faz começar de cima. Para o segundo e terceiro CircularProgress, queremos que eles comecem onde o primeiro terminou. Para fazer isso, precisamos modificar a rotação do segundo e terceiro CircularProgresscomponentes.

Essa propriedade de rotação é adicionada diretamente ao estilo do elemento, não às suas classes. Portanto, você pode substituí-lo usando estilo embutido.

Para determinar onde a próxima cor deve começar, calcule a porcentagem de progresso colorida. Por exemplo, digamos que a primeira cor cobre 20% do progresso. Precisamos converter essa porcentagem em graus para corresponder ao layout circular. Se considerarmos 360 graus em um círculo completo, 20% corresponde a 72 graus. No entanto, devido à rotação padrão, precisamos ajustar esse valor. A subtração de 90 graus representa o ponto inicial, resultando em -18 graus para a segunda cor.

const firstDeg = (a / 100) * 360 - 90;

Para a terceira cor, aplicamos uma técnica semelhante, mas desta vez precisamos somar os valores da primeira e da segunda cor. Essa combinação nos dá o ponto de partida para colorir a terceira seção do progresso.

const secondDeg = (((a + b) / 100) * 360).toFixed(2) - 90;

Estamos tendo problemas com cálculos de frações para decimais em JavaScript, é por isso que usamos toFixed(2).