JSFiddle - React, Tailwind, and code Playground

by Mateus Fernandes de Mello

JavaScript

$(window).ready(function() {

    var setDonutChart = function(obj, datas){
        obj = (obj === undefined) ? null : obj;
        datas = (datas === undefined) ? null : datas;

		// Setando o padrão - o array que a função vai tomar por base
		var defaults = {
			a1: {
				c1: 50,
				c2: 50,
			},
			b1: {
				d1: 0,
				d2: [e1 => "hello"],
				d3: [f2 => "world"],
			}
		};

		// Função para preencher os dados caso não tenham sidos definidos - caso esteja faltando dados no array "datas", esses falores faltantes vão ser preenchidos com os valores e índices do array "defaults"
        var setValuesGraphic = function(arrayValues){

			arrayValues.forEach(function(i, value){

				if (typeof value === Array) // Caso o valor do índice seja um arrayd
					setValuesGraphic(value);
 
				datas[indexes][i] = ((datas != null) && (datas[indexes] != null) && (datas[indexes][i] != undefined)) ? datas[indexes][i] : value; // o grande problema - essa linha esta desatualizada, como podemos ver não existe mais a variável indexes, mas a grande questão é aqui, não estou sabendo setar camadas e sub-camadas no array "datas", eu não estou conseguindo fazer algo dinâmico, o que eu imagino é um if e diversos else if (verificando se esta em uma camada a mais ou não, pra que dentro deles possa colocar array[][][], ou array[][]), um abre e fecha cochetes pra cada nível/camada que existe ou vá existir no array "defaults", mas isso não é o ideial pois não é dinâmico, além do código em excesso
			});			
		};

		if (!arrayValues.compare(datas))
			setValuesGraphic(defaults);
	};

	var datas = { // array com as informações "personalizadas"
		a1: {
			c1: 50,
			c2: 50,
		},
		b1: {
			d1: 0,
		}
	};

	setDonutChart($("#id-elemento"), datas);
});