@zeedhi/zd-crosstab

ZdCrosstab

Componente de Crosstab para ser usado com o Zeedhi, construído sobre o vue-pivot-table.

Features

• [x] Suporte a agregações personalizadas
• [x] Formatação personalizada das células
• [x] Ordenação de colunas
• [x] Filtros de colunas
• [ ] Configuração de largura/altura e alinhamento dos cabeçalhos
• [ ] Permitir esconder os sub-cabeçalhos

Getting Started

Instalação

O ZdCrosstab é composto pelos pacotes @zeedhi/zd-crosstab-common e @zeedhi/zd-crosstab-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-crosstab

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-crosstab-vue @zeedhi/zd-crosstab-common

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdCrosstab } from '@zeedhi/zd-crosstab';

Vue.component('ZdCrosstab', ZdCrosstab);

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdCrosstab". Use a propriedade cols para definir os campos que representam as colunas e a propriedade rows para definir as linhas:

{
  "name": "crosstab",
  "component": "ZdCrosstab",
  "rows": [
    {
      "name": "type",
      "label": "Type"
    },
    {
      "name": "genre",
      "label": "Genre"
    }
  ],
  "cols": [
    {
      "name": "nationality",
      "label": "Nationality"
    }
  ],
  "datasource": {
    "loadAll": true,
    "data": [
      { "type": "Book", "genre": "Fantasy", "name": "Harry Potter", "nationality": "International" },
      { "type": "Book", "genre": "Fantasy", "name": "The Name of the Wind", "nationality": "International" },
      { "type": "Book", "genre": "Romance", "name": "O Alquimista", "nationality": "National" },
      { "type": "Book", "genre": "Romance", "name": "Capitães da Areia", "nationality": "National" },
      { "type": "Book", "genre": "Comic Strip", "name": "It's a Magical World", "nationality": "International" },
      { "type": "Movie", "genre": "Drama", "name": "The Shawshank Redemption", "nationality": "International" },
      { "type": "Movie", "genre": "Drama", "name": "The Godfather", "nationality": "International" },
      { "type": "Movie", "genre": "Action", "name": "The Dark Knight", "nationality": "International" },
      { "type": "Movie", "genre": "Drama", "name": "Cidade de Deus", "nationality": "National" },
      { "type": "Movie", "genre": "Action", "name": "Tropa de Elite", "nationality": "National" },
      { "type": "Movie", "genre": "Drama", "name": "Schindler's List", "nationality": "International" }
    ]
  }
}

Agregação, Formatação e Ordenação

O próximo exemplo mostra as funcionalidades de agregação (propriedade reducer), formatação (propriedades componentProps ou formatter) e ordenação (propriedade sort)

{
  "component": "ZdCard",
  "name": "gdpCard",
  "children": [
    {
      "name": "title",
      "component": "ZdText",
      "text": "GDP of various Countries",
      "tag": "h3"
    },
    {
      "name": "crosstab",
      "component": "ZdCrosstab",
      "rows": [
        {
          "name": "continent",
          "label": "Continent",
          "sort": "{{AppController.sort}}"
        },
        {
          "name": "country",
          "label": "Country",
          "sort": "{{AppController.sort}}"
        }
      ],
      "cols": [
        {
          "name": "year",
          "label": "Year",
          "showFooter": true
        }
      ],
      "cell": {
        "name": "gdp",
        "reducer": "SUM",
        "componentProps": {
          "component": "ZdNumber",
          "mask": {
            "currencySymbol": " (bi USD)",
            "currencySymbolPlacement": "s"
          }
        }
      },
      "datasource": {
        "loadAll": true,
        "data": [
          { "country": "United States", "year": 2010, "continent": "America", "gdp": 14990 },
          { "country": "United States", "year": 2011, "continent": "America", "gdp": 15540 },
          { "country": "China", "year": 2010, "continent": "Asia", "gdp": 6087 },
          { "country": "China", "year": 2011, "continent": "Asia", "gdp": 7552 },
          { "country": "India", "year": 2010, "continent": "Asia", "gdp": 1676 },
          { "country": "India", "year": 2011, "continent": "Asia", "gdp": 1823 },
          { "country": "Brazil", "year": 2010, "continent": "America", "gdp": 2209 },
          { "country": "Brazil", "year": 2011, "continent": "America", "gdp": 2616 },
          { "country": "Australia", "year": 2010, "continent": "Oceania", "gdp": 1146 },
          { "country": "Australia", "year": 2011, "continent": "Oceania", "gdp": 1397 }
        ]
      }
    }
  ]
}

// AppController.ts
export class AppController {
  // Order items reversely
  public sort = (a: number, b: number) => {
    if (a < b) return 1;

    if (a === b) return 0;

    return -1;
  };
}

Também é possível formatar as células de forma manual usando a propridade formatter:

"cell": {
  "name": "gdp",
  "reducer": "SUM",
  "formatter": "{{AppController.formatter}}"
}

// AppController.ts
export class AppController {
  public formatter = (value: number, labels: ILabel[]) => {
    return `$ ${value}`;
  };
}

Propriedades

Crosstab

Nome	Tipo	Padrão	Descrição
datasource	IDatasource		Fonte de dados do componente
cell	ICell	{ reducerInitialValue: 0, align: 'right' }	Configuração de exibição das células
rows	IField[]	[]	Campos que serão utilizados como linhas
cols	IField[]	[]	Campos que serão utilizados como colunas
noDataText	string	'NO_DATA'	Texto a ser exibido quando o datasource não possuir dados
loadingSlot	IComponentRender[]	[{ name: 'name-loading', component: 'ZdText', text: 'Loading items...' }]	Componente a ser renderizado enquanto o datasource estiver carregando
height	string | number	'auto'	Altura do componente
dense	boolean	true	Define se a altura das linhas será densa

Eventos

Nome	Parâmetros	Descrição
cellClick	{ component, event, element, value, labels }: IEventParam<Crosstab>	Evento disparado ao clicar em uma célula

IField

Nome	Tipo	Padrão	Descrição
name	string		Nome do campo
label	string		Label a ser exibida no Crosstab
showFooter	boolean	false	Exibe a coluna no footer
showHeader	boolean	true	Exibe a coluna no header
sort	string | ((a: number, b: number) => number)		Função utilizada para ordenar os campos. Esta função deve retornar 1, 0 ou -1, seguindo o mesmo padrão do Arrays.sort
valuesFiltered	string[]		Filtro de valores que podem ser renderizados. Deve ser um array de strings contendo os possíveis valores

ICell

Nome	Tipo	Padrão	Descrição
name	string		Nome do campo a ser utilizado para agregar as células
align	string	'right'	Alinhamento dos valores das células
componentProps	IDictionary		Propriedades utilizadas para formatar as células. Elas serão formatadas de acordo com o componente utilizado
formatter	string | ((value: number, labels: ILabel[]) => string | number)		Função utilizada para formatar as células. Os parâmetros value e labels são passados por parâmetro para a função de formatação
reducer	string | ((sum: number, item: IDictionary) => number)	'COUNT'	Função utilizada para agregar os valores. Existem duas funções predefinidas, basta passar o nome delas para a propriedade: COUNT e SUM. Também é possível passar uma função personalizada para agregar os valores, utilizando um Accessor
reducerInitialValue	number	0	Valor inicial do agregador

ILabel

Nome	Tipo
field	any
value	string