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 |