Crie sua própria visualização como uma extensão

Antes de criar sua própria visualização, use as seções a seguir para aprender a criar um novo tipo de gráfico.

8.1.3.1 Crie um tipo de gráfico CVOM

Visão geral

CVOM fornece um mecanismo de extensão para ajudar os parceiros a criar novos gráficos sem editar o código CVOM, reduzindo o esforço de comunicação/criação entre CVOM e os parceiros. O mecanismo de extensão é similar à relação entre o jQuery e os plug-ins do jQuery.

CVOM fornece um JavasScript tudo em um (sap.viz.js). Os parceiros podem fornecer uma extensão JavaScript (por exemplo, partner.newchart.js) para conter novas implementações de tipo de gráfico usando APIs CVOM. Um CVOM Client (por exemplo, SAP Lumira) utilizará ambos arquivos JavaScript para obter um conjunto completo de gráficos fornecidos pelo CVOM e pelo parceiro. O seguinte exemplo mostra um snippet de código de inclusão:

<script type="text/javascript" src="libs/require.js"></script> <script type="text/javascript" src="libs/sap.viz.js"></script>

<script type="text/javascript" src="extension/partner.newchart.js"></script>

Nesse tutorial, definiremos um novo tipo de gráfico e o utilizaremos para criar um gráfico para comparar GDP da China, EUA, e Japão, conforme mostrado neste gráfico:

Um tipo de gráfico consiste em quatro partes:

Definição Parte do gráfico

Utilizado para definir feeds que convertem dados. “Definição de feed”

Utilizado para desenhar vários itens. Um gráfico pode ter vários módulos, inclusive módulos para desenhar títulos, módulos para desenhar legen- das etc.

Definição Parte do gráfico

Utilizado para desenhar um módulo. “Função de módulo”

Utilizado para combinar informações de vários módulos para definir um tipo de gráfico. “Definição de tipo de gráfico”

Observação:

A função de módulo é uma função JavaScript, enquanto todas as definições são objetos JavaScript. Definição de feed

Para definir um feed, crie uma variável JavaScript do tipo de objeto “Feed”. Aqui definimos três feeds: um do tipo Medida e os outros do tipo Dimensão.

var valueFeed = {

'id' : 'partner.modules.samplebar.valueaxis1', 'name' : 'Primary Values',

'type' : 'Measure', 'mgIndex' : 1 }; var countryFeed = { 'id' : 'partner.modules.samplebar.country', 'name' : 'Country', 'type' : 'Dimension', 'aaIndex' : 1 }; var yearFeed = { 'id' : 'partner.modules.samplebar.year', 'name' : 'Year', 'type' : 'Dimension', 'aaIndex' : 2 };

Além disso, especificamos um índice para esses “Feeds”; todos os índices começam com 1 e são acrescidos de 1.

• Para o feed de medida, a propriedade do índice é mgIndex - Índice de grupo de medida. • Para feeds de dimensão, a propriedade do índice é aaIndex - Índice de eixo de análise.

Para simplificar o gráfico de barra de amostras, não utilizamos todas as propriedades do “Feed”. Para obter mais informações sobre as propriedades do “Feed”, consulteCompreendendo os feeds de gráfico eCompreendendo o modelo de dados.

Definição de módulo

Para definir um módulo, crie uma variável JavaScript do tipo de objeto módulo. CVOM suporta diversos tipos de módulos:

• Recipiente • Gráfico • Complementar

• Controlador

Neste caso, definimos um módulo do tipo Gráfico:

var module = {

'id' : 'partner.modules.samplebar', 'type' : 'CHART',

'name' : 'Sample Bar',

'datastructure' : 'DATA STRUCTURE DOC', 'properties' : {

},

'events' : { },

'feeds' : [valueFeed, countryFeed, yearFeed], 'css' : null,

'configure' : null, 'fn' : sampleBarChart };

Observe que valueFeed é adicionado à propriedade feeds com os outros dois feeds. A função de módulo é colocada na propriedade fn.

Também é possível adicionar propriedades e eventos personalizados a propriedades e eventos, respectivamente, e você pode adicionar definições de classe CSS padrão à css se seu módulo suporta CSS. Para este exemplo simples, não atribuiremos nada a essas propriedades.

Depois que você criar um módulo, precisará registrá-lo para que o gráfico possa utilizá-lo.

require (["sap/viz/modules/manifests/Module"],function(moduleManifest){ moduleManifest.register(module);

} );

Função de módulo

Toda a lógica do desenho deve ser colocada em uma função de módulo:

var sampleBarChart = function() { ... //global variables

function chart(selection){...//drawing logic} ... //interfaces

return chart; }

A seleção está desenhando contextos, por exemplo svg ou g (grupo):

function chart(selection){ selection.each(function(){ //get data //drawing ... } return chart; }

Para acessar dados apresentados, você pode invocar getAnalysisAxisDataByIdx() e getMea sureValuesGroupDataByIdx()no objeto de dados:

function chart(selection){ selection.each(function(){

...

var rawYears = data.getAnalysisAxisDataByIdx(1).values[0].rows; var years = [];

for (var i = 0; i < rawYears.length; i++) years.push(rawYears[i].val); var rawCountries = data.getAnalysisAxisDataByIdx(0).values[0].rows; var countries = [];

for (var i = 0; i < rawCountries.length; i++) countries.push(rawCountries[i].val); var rawGDPs = data.getMeasureValuesGroupDataByIdx(0).values[0].rows;

var gdps = [];

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

for (var j = 0; j < rawGDPs[i].length; j++) sub.push(rawGDPs[i][j].val); gdps.push(sub);

} ... } }

O objeto de gráfico retornado precisa suportar diferentes interfaces para diferentes tipos de módulos. Para obter mais informações sobre módulos de gráfico, consulteCompreendendo os módulos de gráfico.

Definição de tipo de gráfico

Para definir um tipo de gráfico, crie uma variável JavaScript do tipo gráfico.

Um tipo de gráfico é definido com parceiro/barras de amostra como id. Este ID é muito importante: seu usuário criará instâncias de gráfico deste tipo passando o ID para o CVOM. Um gráfico consiste em vários módulos. Este gráfico usa o módulo barras de amostra definido anteriormente, bem como os módulos título e legenda fornecidos com CVOM.

Neste exemplo, a paleta de cores está sendo compartilhada entre o módulo barras de amostra e o módulo legenda, por isso é preciso definir este compartilhamento nas dependências. A propriedade colorPaletteé fornecida pelo módulo main.plot (por exemplo, barras de amostra) para o módulo legenda.

var chart = {

id : 'partner/samplebar', name : 'Sample Bar Chart', modules : { title : { id : 'sap.viz.modules.title', configure : { propertyCategory : 'title' } }, legend : { id : 'sap.viz.modules.legend', data : { aa : [ 2 ] }, configure : { propertyCategory : 'legend' } }, main : { id : 'sap.viz.modules.xycontainer', modules : { plot : { id : 'partner.modules.samplebar' } } } }, dependencies : { attributes : [ { targetModule : 'legend', target : 'colorPalette', sourceModule : 'main.plot', source : 'colorPalette' } ], events : []

} };

Você precisa registrar o tipo de gráfico para que você e outros desenvolvedores possam utilizá-lo:

require([sap/viz/manifests/Viz"], function(Viz) { Viz.register(chart);

});

Agora que o novo tipo de gráfico foi criado, você pode utilizá-lo como qualquer gráfico existente para apresentar seus dados.

Para obter mais informações sobre módulos de gráfico, consulteCompreendendo a composição dos móduloseRegistrando um novo tipo de gráfico.

Tópicos relacionados

•Compreendendo o fluxo de trabalho da criação de extensão