0

Do que os gráficos são feitos? Uma análise simples sobre a estrutura básica de um gráfico. OO e padrões de projeto.

#.NET #.NET C#
Carlos Silva
Carlos Silva

Entendendo o modelo de objetos por trás de um gráfico do Excel. 

  

A nível de criação, existem conceitos importantes relacionados a estrutura de um gráfico e que se relacionam aos princípios da OO e dos padrões de projetos. 


Pode ser uma imagem de texto que diz "Item Em sua grande maioria, os gráficos são um aglomerado de "formas" geométricas, estrategicamente posicionadas e agrupadas em um container que se comportam como uma unidade (in)dependente. Item Item Carlos Antonio Desenvolvedor Item 4 0 20 40 60"


Tópicos 

  1. Introdução
  2. O que são gráficos e para que servem
  3. Arquitetura básica de um gráfico
  4. Fonte de dados
  5. Área do gráfico (container pai)
  6. Redimensionadores
  7. Título do gráfico
  8. Legendas
  9. Eixos
  10. Título do eixo
  11. Rótulo do eixo
  12. Composição atual
  13. Área de plotagem
  14. Área de plotagem (elementos ocultos)
  15. Série de dados
  16. Série de dado
  17. Rótulo de dados
  18. Rótulo de dado
  19. Linhas de Grade
  20. Composição final
  21. (...)
  22. Herança : Herdando propriedades comuns
  23. Exercício
  24. Conclusão


1 - Introdução


Os gráficos é um dos recursos visuais mais utilizados e importantes para simplificar à análise de dados. 

A nível de uso, os gráficos são ótimos e flexíveis para consolidar informações em forma de agregações "formas". 

  

O objetivo desse artigo é olharmos para o conceito de gráfico pela ótica da criação e não do uso. Se você assim como eu é um "curioso" em querer descobrir como as coisas são construídas, e qual tipo de código ou arquitetura foi aplicada em algum projeto, esse artigo é para você.


2 - O que são gráficos e para que servem? 


Sinceramente? Para analisar e tomar decisão. É só isso! 


Vou resumir com um gráfico simples, que só de bater o olho, você vai entender a sua essência e objetivo.


Pode ser uma imagem de texto que diz "1 Nascimento O gráfico da vida 区 2 Agora 3 ?Amanhâ"


3 - Arquitetura básica de um gráfico 


Como exemplo, utilizei um gráfico simples de colunas do Microsoft Excel! 

  

a. Fonte de dados 


Todo gráfico é construído com informações provenientes de uma fonte de dados. O que significa que eles precisam de um "modelo" de estrutura organizada para que funcionem corretamente.


Pode ser uma imagem de texto que diz "Gráficos podem ser criados através de diferentes tipos de estruturas de dados Vendas JAN FEV 2010 MAR 10 16 16 2011 19 28 45 41 Carlos Antonio Desenvolvedor"


b. Área do gráfico 


Podemos considerar esse componente como o container principal. É onde todos os demais elementos do gráfico estarão adicionados. 

 

Nota: 

Olhando para esta parte inicial do gráfico, vejo a aplicação do padrão de projeto "composite"


Nenhuma descrição de foto disponível.


c. Redimensionadores 


Esse é um comportamento comum à todas as formas. Se utilizarmos as formas "classe" para construção do gráfico, podemos herdar esse comportamento.


Mas se quiséssemos criar o nosso próprio container? Daria para fazer? Sim, mas nesse caso precisaríamos construir cada dimensionador com seu comportamento exclusivo vinculado ao container pai.


Se você olharmos para o comportamento desses elementos, todos possuem um tipo de "ancora" que serve como referência para dimensionar a forma.

Por exemplo: o L-T (left-top) tem como ponto fixo o R-B (right-bottom), e isso é um comportamento que todos precisariam ter. Mas se isso não for um requisito do negócio e a plataforma fornecer uma biblioteca de "formas", então é mais rápido utilizá-las.


Nenhuma descrição de foto disponível.


d. Título do gráfico 


É um elemento do gráfico que tem características próprias, porém, caso esteja utilizando o Microsoft Excel, você vai notar que os dimensionadores estão desabilitados, mas podemos posicionar "arrastar" ele dentro do container pai e editar outras propriedades.

 

Nenhuma descrição de foto disponível.


e. Legendas 


O elemento legenda, está associado aos valores das linhas (2010,2011) e visualmente parece ser um único componente. 


Nenhuma descrição de foto disponível.


Olhando de perto para o objeto legenda, notamos que ele é uma composição de outros objetos. Esses objetos possuem ou rótulo de texto e um outro elemento que representa a cor.


Temos que analisar que esse objeto está associado a duas fontes: a fonte de dados "tabela" e os pontos de dados "área de plotagem". 

 

Ou seja, o rótulo de texto representa o texto da tabela, e o rótulo de cor, representa a cor dos pontos de dados


Pode ser uma imagem de texto que diz "2010, 2011 JAN FEV MAR 16 19 45 41 Título do Gráfico MAR R FEV JAN 2011 2010"


f. Eixos 

Esses dois objetos possuem dentro de si, uma série de outros elementos e está fixo à área de plotagem. 

  

Nenhuma descrição de foto disponível. 

g. Título do Eixo 

Podemos considerar esse elemento como uma composição do objeto Eixo. Esse é um objeto que também teria suas propriedades herdadas e propriedades exclusivas. 

 

Nenhuma descrição de foto disponível. 

g. Rótulos do Eixo 

Elementos que fazem parte do objeto eixo, e que também possuem comportamentos herdados e próprios. Em resumo, posso imaginar como uma classe Eixo e suas composições "objeto de valor".

  

Nenhuma descrição de foto disponível. 

i. Composição atual 

Como você pode notar, até o momento temos uma série de elementos individuais que construídos de forma estratégica, começam a dar o comportamento de um gráfico simples, feito de partes individuais que tornam um conjunto único.


Eu representaria esses elementos em minha classe Chart da seguinte forma. 


public class Chart { 

... 

IEixoX 

IEixoY 

... 

    

Nenhuma descrição de foto disponível. 

j. Área de plotagem 

Inicialmente olho para esse objeto como um objeto de valor que se encaixaria em nossa classe Chart como um agregado: 

 

public class Chart { 

... 

IPlotArea 

... 

 

Nenhuma descrição de foto disponível. 

k. Área de plotagem (Elementos ocultos) 

Se você fizer o teste em um gráfico redimensionando a sua área de plotagem, irá perceber que os eixos estão contidos em uma espécie de container invisível.


Eu entendo essa abordagem como uma forma de poder utilizar controles de suporte que facilitam o agrupamento e principalmente a distribuição desses objetos. Poderia ser um DockContainer, ou FloatContainer e etc... 

  

Pode ser uma imagem de texto que diz "2010 2011 JAN FEV MAR 10 16 19 28 45 Título do Gráfico Area de Plotagem MAR 19 FE JAN 5 10 2011 2010" 

l. Série de dados 

Esses objetos são distribuídos dentro da área de plotagem de acordo com a fonte de dados. E se estivermos falando de um gráfico do Excel, podemos notar um tipo de herança baseado na classe de "formas"


Clicando em um desses elementos, ativará todos, e clicando mais uma vez, aciona apenas um elemento. Se estivéssemos criando esse gráfico do zero, esses eram alguns eventos que teríamos que levar em consideração.


Um detalhe que temos que levar em consideração é o algoritmo utilizado para distribuir proporcionalmente os elementos conforme os valores e o tamanho dentro do container. 

public interface IDateSeries { } 


Nenhuma descrição de foto disponível.

Pode ser uma imagem de texto que diz "JAN FEV MAR 10 19 2010 2011 45 Título do Gráfico MAR EV 16 3AN 10 Ponto dados LIBUO Ε00 2011 2010" 

public class PlotArea{ 

... 

IDateSeries 

... 


m. Rótulos de dados 

Seguem o mesmo conceito dos pontos de dados. 

public interface IRotuloDeDados { } 

  

Pode ser uma imagem de texto que diz "JAN FEV MAR 19 2010 2011 45 Título do Gráfico MAR 29 FEV 36 JAN 10 <Rótulos de Dados> 20 Titulg Eino 2011 2010"

Pode ser uma imagem de texto que diz "JAN FEV MAR 19 2010 2011 45 Titulo do Gráfico MAR 19 FEV Rótulo de Dado 16 JAN 45 10 30 Titulod Eίng 2011 2010" 

public DataSeries { 

... 

IRotuloDeDados 

... 

  

n. Linhas de grade 

Também seguem o mesmo conceito dos pontos de dados e séries de dados. 

public interface ILinhaDeGradeEixoX { } 

public interface ILinhaDeGradeEixoY { } 


Nenhuma descrição de foto disponível.


o. Composição final do nosso exemplo 

Perceba que identifiquei em roxo, possíveis candidatos para os tipos de dados como collections. 

Depois que fazemos essa análise, parece que não é algo trivial a criação de um gráfico.  


Seria mais fácil se fosse um gráfico estático, mas se for algo que precise ter interação com o usuário, e manipulação de objetos. Começa a complicar um pouco.


É um bom exercício para treinamento.