Sobre esse curso de lógica ll e uma avaliação

<meta charset="utf-8">
<canvas width="1600" height="1200"></canvas>


<script>

function desenhaRetangulo(x, y, largura, altura, cor) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle=cor;
    pincel.fillRect(x,y, largura, altura);
    pincel.strokeStyle ='black';
 }

function desenhaTexto(x, y, texto, corTexto,) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = corTexto;
    pincel.font='15px Arial';
    pincel.fillText(texto, x, y);    
 }


function desenhaGrafico(x, y, larguraBarraFundo, alturaBarraFundo, corBarraGrafico, serieValores, serieNomes, destacarA, destacarB) {

    function destacaSerie(destaqueA, destaqueB){

        var destaqueSerieCor = '#ff6363';

        if (serieNomes[i] == destaqueA || serieNomes[i] == destaqueB) {

             corGrafico = destaqueSerieCor;

         } else {

            corGrafico = corBarraGrafico;
         }
     }


    var medianaSerie = 0;

    for (var i = 0; i < serieValores.length; i++) {
        serieValores[i];
        medianaSerie += serieValores[i];

     }

    var medianaTotal = medianaSerie/serieValores.length;

    var corGrafico = corBarraGrafico;

    var somaColuna = 0;

    var alternaCorFundo = 0;
    var alternaCorMediana = 0;

    for (var i = 0; i < serieValores.length; i++) {
        serieValores[i];

        var claro = '#eeeeee';
        var escuro = '#e7e7e7';

        if (i == alternaCorFundo) {

            claro;

         } else {

            claro = escuro;
            alternaCorFundo = alternaCorFundo + 2;
         }

        var claroMediana = '#e6e6e6';
        var escuroMediana = '#dcdcdc';

        if (i == alternaCorMediana) {

            claroMediana;

         } else {

            claroMediana = escuroMediana;
            alternaCorMediana = alternaCorMediana + 2;
         }

        destacaSerie(destacarA, destacarB);

        var escalaGraficos = 105;

        var alternaColuna = larguraBarraFundo;

        var inicialGraf = 83;

        desenhaRetangulo(x + somaColuna , y, larguraBarraFundo, alturaBarraFundo, claro);

        desenhaRetangulo(x + somaColuna , y + (alturaBarraFundo/100*inicialGraf), larguraBarraFundo, - medianaTotal/escalaGraficos*(alturaBarraFundo/100*inicialGraf), claroMediana);

        desenhaRetangulo(x + somaColuna + (larguraBarraFundo/100*12.5) , y + (alturaBarraFundo/100*inicialGraf), larguraBarraFundo/100*75, - serieValores[i]/escalaGraficos*(alturaBarraFundo/100*inicialGraf), corGrafico); 

        desenhaTexto(x + (larguraBarraFundo/100*32.8) + somaColuna, y + (alturaBarraFundo/100*inicialGraf-10) - serieValores[i]/escalaGraficos*(alturaBarraFundo/100*inicialGraf), serieValores[i], '#a3a3a3');

        desenhaTexto(x + (larguraBarraFundo/100*12.5) + somaColuna, y + (alturaBarraFundo/100*95.5), serieNomes[i], '#808080',);

        somaColuna = somaColuna + alternaColuna;

     }

 }

var nivelCantareira = [58.2, 52.3, 65.1, 36.6, -9.2, -11.7, 63.4, 72.5, 92.5, 99.7, 88.2, 59.1, 49.6, 68.0, 55.8, 19.3, 48.0];
var anoCantareira = ["2019", "2018", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"];

desenhaGrafico(20 , 40, 70, 600, '#009de0',nivelCantareira, anoCantareira, "2014","2015"); // O código é bem ajustável, pode mudar os dados de X e Y, bem como largura e altura do gráfico.

desenhaTexto(20,35, "Variação em %.", '#808080');
desenhaTexto(20,20, "Série histórica de armazenamento do manancial cantareira. Apurado em 23/04/2019, e no mesmo período nos anos anteriores", 'black');




</script>

Obrigado a todos no fórum pela ajuda!

Davilson, boa tarde!

Só posso dizer WOW! Ficou muuuuito bom (e beeem bonito). Nós da Alura ficamos muito felizes em saber que estamos ajudando, saber que fazemos a diferença é muito gratificante. É muito importante ir se superando, buscar fazer coisas novas, tentar e tentar e tentar inúmeras vezes, assim que se adquire conhecimento e experiência.

Sobre o código, ele está muito limpo, as funções estão nomeadas de forma clara, deixando óbvio o que elas fazem.

O que pra mim não ficou muito claro são algumas atribuições de variaveis, como nas linha abaixo

        if (i == alternaCorFundo) {
            claro; //Essa linha não tem útilidade
         } else {
            claro = escuro; //Claro recebe escuro? Então 'claro' não é um nome muito semântico
            alternaCorFundo = alternaCorFundo + 2;
         }

Se o que importa nessa condição é o else porque não inverter a comparação?

        if (i != alternaCorFundo) {
             claro = escuro; //um nome melhor seria 'tom' ;)
            alternaCorFundo = alternaCorFundo + 2;
         }

Esse problema exatamente igual no bloco abaixo

if (i == alternaCorMediana) {

            claroMediana;

         } else {

            claroMediana = escuroMediana;
            alternaCorMediana = alternaCorMediana + 2;
         }

Essas foram minha observações, mas você olhando esse código, pensa no que da pra melhorar e tente fazer! Tente refatorar esse código, deixar ele mais claro, e poste do novo aqui, estamos sempre disponíveis para ajudar

Espero ter ajudado e continue assim com seus estudos!

Oi Felipe,

Realmente a semântica não está boa. vamos melhorar isto então.

Muito obrigado pela ajuda!

Oi Felipe,

Seguindo suas sugestões, alterei a linha problemática.

Também simplifiquei a linha que fazia a alternância da mediana. como ela fazia a mesma coisa que o if alternaCorFundo, deixei lá dentro a linha que muda o tom da mediana.

    var claro = '#eeeeee';
    var escuro = '#e7e7e7';
    var claroMediana = '#e6e6e6';
    var escuroMediana = '#dcdcdc';

    for (var i = 0; i < serieValores.length; i++) {
        serieValores[i];

        var tom = claro;
        var tomMediana = claroMediana;


        if (i != alternaCorFundo) {

            tom = escuro;
            tomMediana = escuroMediana;

            alternaCorFundo = alternaCorFundo + 2;

         }

Código completo.

<meta charset="utf-8">
<canvas width="1600" height="1200"></canvas>


<script>

function desenhaRetangulo(x, y, largura, altura, cor) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle=cor;
    pincel.fillRect(x,y, largura, altura);
    pincel.strokeStyle ='black';
 }

function desenhaTexto(x, y, texto, corTexto,) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = corTexto;
    pincel.font='15px Arial';
    pincel.fillText(texto, x, y);    
 }



function desenhaGrafico(x, y, larguraBarraFundo, alturaBarraFundo, corBarraGrafico, serieValores, serieNomes, destacarA, destacarB) {

    function destacaSerie(destaqueA, destaqueB){

        var destaqueSerieCor = '#ff6363';

        if (serieNomes[i] == destaqueA || serieNomes[i] == destaqueB) {

             corGrafico = destaqueSerieCor;

         } else {

            corGrafico = corBarraGrafico;
         }
     }


    var medianaSerie = 0;

    for (var i = 0; i < serieValores.length; i++) {
        serieValores[i]
        medianaSerie += serieValores[i];

     }

    var medianaTotal = medianaSerie/serieValores.length;

    var corGrafico = corBarraGrafico;

    var somaColuna = 0;

    var alternaCorFundo = 0;

    var claro = '#eeeeee';
    var escuro = '#e7e7e7';
    var claroMediana = '#e6e6e6';
    var escuroMediana = '#dcdcdc';

    for (var i = 0; i < serieValores.length; i++) {
        serieValores[i];

        var tom = claro;
        var tomMediana = claroMediana;


        if (i != alternaCorFundo) {

            tom = escuro;
            tomMediana = escuroMediana;

            alternaCorFundo = alternaCorFundo + 2;

         }


        destacaSerie(destacarA, destacarB);

        var escalaGraficos = 105;

        var alternaColuna = larguraBarraFundo;

        var inicialGraf = 83

        desenhaRetangulo(x + somaColuna , y, larguraBarraFundo, alturaBarraFundo, tom);

        desenhaRetangulo(x + somaColuna , y + (alturaBarraFundo/100*inicialGraf), larguraBarraFundo, - medianaTotal/escalaGraficos*(alturaBarraFundo/100*inicialGraf), tomMediana);

        desenhaRetangulo(x + somaColuna + (larguraBarraFundo/100*12.5) , y + (alturaBarraFundo/100*inicialGraf), larguraBarraFundo/100*75, - serieValores[i]/escalaGraficos*(alturaBarraFundo/100*inicialGraf), corGrafico); 

        desenhaTexto(x + (larguraBarraFundo/100*32.8) + somaColuna, y + (alturaBarraFundo/100*inicialGraf-10) - serieValores[i]/escalaGraficos*(alturaBarraFundo/100*inicialGraf), serieValores[i], '#a3a3a3');

        desenhaTexto(x + (larguraBarraFundo/100*12.5) + somaColuna, y + (alturaBarraFundo/100*95.5), serieNomes[i], '#808080',);

        somaColuna = somaColuna + alternaColuna;

     }

 }

var nivelCantareira = [58.2, 52.3, 65.1, 36.6, -9.2, -11.7, 63.4, 72.5, 92.5, 99.7, 88.2, 59.1, 49.6, 68.0, 55.8, 19.3, 48.0];
var anoCantareira = ["2019", "2018", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"];

desenhaGrafico(20 , 40, 70, 600, '#009de0',nivelCantareira, anoCantareira, "2014","2015");

desenhaTexto(20,35, "Variação em %.", '#808080');
desenhaTexto(20,20, "Série histórica de armazenamento do manancial cantareira. Apurado em 23/04/2019, em comparação ao mesmo período dos anos anteriores.", 'black');




</script>