@zeedhi/zd-crosstab-vue v1.10.2

ZdCrosstab

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

Features

• Suporte a agregações personalizadas
• Formatação personalizada das células
• Ordenação de colunas
• 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

Eventos

IField

ICell

ILabel