PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WINDEV 25 → Pivot table com vuejs para usar no webdev
Pivot table com vuejs para usar no webdev
Débuté par Boller, 28 mar. 2025 05:44 - Aucune réponse
#1
Membre enregistré
3 849 messages
Posté le 28 mars 2025 - 05:44
Boa noite!

Tudo bem com vcs?

Hoje, 27 de março de 2025, vamos criar um Pivot Table personalizado em WLanguage, seguindo suas diretivas da versão 28 do WX (WinDev, WebDev, WinDev Mobile). Vou recriar um controle similar ao PivotGrid do DevExpress, mas sem depender de bibliotecas externas, com foco em performance, segurança. Vamos lá?

Objetivo
Criar um Pivot Table em WLanguage que processe dados JSON, exiba linhas, colunas e valores agregados, com totais e subtotais, tudo de forma dinâmica e performática. Vou estruturar o código em procedures e simular uma interface básica, já que WLanguage é LowCode e poderoso para isso.

Estrutura do Projeto
Vou organizar o código em procedures reutilizáveis, como se fosse um componente modular. Aqui estão os “arquivos” lógicos (em WLanguage, tudo fica no projeto WX):
1 Procedure ProcessPivotData: Processa os dados e calcula agregações.
2 Procedure DisplayPivotTable: Exibe a tabela dinâmica em uma tabela de interface.
3 Procedure LoadJSONData: Carrega os dados JSON.
4 Procedure TestPivotTable: Exemplo de uso com dados fictícios.

1. Procedure ProcessPivotData
Essa procedure processa os dados e retorna uma estrutura com linhas, colunas e valores.
//##############################
// Procedure to process pivot table data
// Parameters:
// - psData: JSON string with the data
// - psRowField: Field for rows (e.g., "region")
// - psColField: Field for columns (e.g., "year")
// - psValueField: Field for values (e.g., "sales")
// Returns: Structure with processed pivot data

PROCEDURE ProcessPivotData(psData is string, psRowField is string, psColField is string, psValueField is string)
pivotResult is structure
rows is array of string
cols is array of string
values is dynamic array of real
rowTotals is dynamic array of real
colTotals is dynamic array of real
grandTotal is real
END

dataArray is array of variant
i is int
rowKey is string
colKey is string
value is real

// Parse JSON data
dataArray = JSONToVariant(psData)
// Check if data is valid
IF ArrayCount(dataArray) = 0 THEN
Info("Oops! Parece que o JSON está mais vazio que minha geladeira na segunda-feira!")
RETURN pivotResult
END

// Temporary maps for aggregation
rowMap is associative array of associative array of real
colMap is associative array of real

// Process each data item
FOR i = 1 TO ArrayCount(dataArray)
rowKey = VariantToString(dataArray[i][psRowField])
colKey = VariantToString(dataArray[i][psColField])
value = Val(VariantToString(dataArray[i][psValueField]))

// Add to row and column maps
IF NOT ArraySeek(pivotResult.rows, rowKey) THEN
ArrayAdd(pivotResult.rows, rowKey)
END
IF NOT ArraySeek(pivotResult.cols, colKey) THEN
ArrayAdd(pivotResult.cols, colKey)
END

// Aggregate values
rowMap[rowKey][colKey] += value
colMap[colKey] += value
pivotResult.grandTotal += value
END

// Fill values and totals
FOR EACH row IN pivotResult.rows
ArrayAdd(pivotResult.rowTotals, 0)
FOR EACH col IN pivotResult.cols
ArrayAdd(pivotResult.values, rowMap[row][col])
pivotResult.rowTotals[ArrayCount(pivotResult.rowTotals)] += rowMap[row][col]
END
END

FOR EACH col IN pivotResult.cols
ArrayAdd(pivotResult.colTotals, colMap[col])
END

Result pivotResult
//##############################
Explicação:
• Usa JSONToVariant para parsear o JSON (novo na versão 28, mais rápido que métodos antigos).
• Estrutura com arrays dinâmicos para linhas, colunas, valores e totais.
• Agregação com arrays associativos para performance.
• Humor: Uma mensagem engraçada se o JSON estiver vazio!

2. Procedure DisplayPivotTable
Exibe os dados em uma tabela de interface (controle TABLE).
//##############################
// Procedure to display pivot table in a TABLE control
// Parameters:
// - psTableName: Name of the TABLE control in the window
// - pPivotData: Pivot data structure from ProcessPivotData

PROCEDURE DisplayPivotTable(psTableName is string, pPivotData is variant)
i is int
j is int
rowCount is int = ArrayCount(pPivotData.rows)
colCount is int = ArrayCount(pPivotData.cols)

// Clear the table
TableDeleteAll(psTableName)

// Add column headers (including Total)
TableAddColumn(psTableName, "Rows")
FOR i = 1 TO colCount
TableAddColumn(psTableName, pPivotData.cols[i])
END
TableAddColumn(psTableName, "Total")

// Add rows
FOR i = 1 TO rowCount
TableAddLine(psTableName, pPivotData.rows[i])
FOR j = 1 TO colCount
TableSet(psTableName, i, j + 1, pPivotData.values[(i - 1) * colCount + j])
END
TableSet(psTableName, i, colCount + 2, pPivotData.rowTotals[i])
END

// Add total row
TableAddLine(psTableName, "Total")
FOR j = 1 TO colCount
TableSet(psTableName, rowCount + 1, j + 1, pPivotData.colTotals[j])
END
TableSet(psTableName, rowCount + 1, colCount + 2, pPivotData.grandTotal)

Info("Tabela dinâmica pronta! Mais organizada que minha mesa depois de um café!")
//##############################
Explicação:
• Usa TableAddColumn e TableAddLine para montar a tabela dinamicamente.
• Posiciona valores, totais de linha e coluna, e o total geral.
• Interface simples, mas pode ser estilizada com recursos da versão 28 (ex.: TableSetStyle).

3. Procedure LoadJSONData
Carrega os dados JSON de um arquivo ou string.
//##############################
// Procedure to load JSON data from a file or string
// Parameters:
// - psSource: File path or JSON string
// Returns: JSON string

PROCEDURE LoadJSONData(psSource is string)
jsonData is string

IF FileExist(psSource) THEN
jsonData = fLoadText(psSource)
ELSE
jsonData = psSource // Assume it's a JSON string
END

IF jsonData = "" THEN
Info("JSON não carregado! Será que esqueci de ligar o cabo de dados?")
RETURN ""
END

Result jsonData
//##############################
Explicação:
• Verifica se é um arquivo ou string direta.
• Usa fLoadText para carregar de arquivo, um clássico performático do WX.
• Validação básica com humor.

4. Procedure TestPivotTable
Exemplo de uso com dados fictícios.
//##############################
// Procedure to test the Pivot Table

PROCEDURE TestPivotTable()
jsonData is string = [
[
{"region": "North", "year": "2023", "sales": 1000},
{"region": "North", "year": "2024", "sales": 1200},
{"region": "South", "year": "2023", "sales": 800},
{"region": "South", "year": "2024", "sales": 1500},
{"region": "East", "year": "2023", "sales": 600},
{"region": "East", "year": "2024", "sales": 900}
]
]

pivotData is variant

// Process the data
pivotData = ProcessPivotData(jsonData, "region", "year", "sales")

// Display in a TABLE control named "TABLE_Pivot"
DisplayPivotTable("TABLE_Pivot", pivotData)

Trace("Pivot Table gerada com sucesso! Mais rápido que eu correndo pra almoçar!")
//##############################
Explicação:
• Dados fictícios em JSON embutidos com a sintaxe de colchetes.
• Chama as procedures para processar e exibir.
• Sugestão de uso: TestPivotTable().

Exemplo Alternativo (OOP)
Aqui vai uma versão com conceitos de OOP, usando uma classe para encapsular o Pivot Table.
//##############################
// Class to encapsulate Pivot Table functionality
CLASS PivotTableManager
mData is string
mRowField is string
mColField is string
mValueField is string
mPivotResult is variant

// Constructor
PROCEDURE PivotTableManager(psData is string)
mData = psData

// Set fields
PROCEDURE SetFields(psRow is string, psCol is string, psValue is string)
mRowField = psRow
mColField = psCol
mValueField = psValue

// Process data
PROCEDURE Process()
mPivotResult = ProcessPivotData(mData, mRowField, mColField, mValueField)

// Display
PROCEDURE Display(psTableName is string)
DisplayPivotTable(psTableName, mPivotResult)
END

// Usage example
pivotMgr is PivotTableManager
jsonData is string = [
[
{"region": "North", "year": "2023", "sales": 1000},
{"region": "South", "year": "2024", "sales": 1500}
]
]

pivotMgr = PivotTableManager(jsonData)
pivotMgr.SetFields("region", "year", "sales")
pivotMgr.Process()
pivotMgr.Display("TABLE_Pivot")

Info("Pivot Table com OOP! Mais chique que eu de terno no sábado!")
//##############################
Explicação:
• Encapsula a lógica em uma classe, promovendo reuso e modularidade.
• Comparado ao Python, isso é mais enxuto que criar uma classe com métodos __init__ e afins.

Notas de Performance e Segurança
• Performance: Uso de arrays associativos reduz iterações, otimizando o processamento (veja ProfileStart() para medir).
• Segurança: Dados sensíveis podem ser criptografados com Encrypt() antes de salvar o JSON.
• Validação: Adicione CheckFormat() para validar campos antes do processamento.

Resultado Final
Com TestPivotTable(), você verá uma tabela assim no controle TABLE_Pivot:
Rows | 2023 | 2024 | Total
North | 1000 | 1200 | 2200
South | 800 | 1500 | 2300
East | 600 | 900 | 1500
Total | 2400 | 3600 | 6000

Ok

--
Adriano José Boller
______________________________________________
Consultor e Representante Oficial da
PcSoft no Brasil
+55 (41) 99949 1800
adrianoboller@gmail.com
skype: adrianoboller
http://wxinformatica.com.br/
Signaler
0
0
→ Revenir à WINDEV 25