Como usar um Power BI custom visual para renderizar um componente React!
CENÁRIO:
Olá!
Essa semana precisei criar um filtro para um relatório no Power BI que o usuário pudesse filtrar digitando os valores. Muito próximo do que vemos constantemente em aplicações web.
Link demo: https://youtu.be/7hETqVpe-yc
Mas, isso é um relatório. Como fazer isso? Eu até encontrei um componente pronto da Microsoft que faz isso, mas ele não faz tudo que eu precisava. O componente da Microsoft é esse aqui:
https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381309?src=office&tab=Overview – Text Filter
Mas eu queria uma experiência um pouco melhor, “buscando” os resultados a medida ia digitando… Tipo esse componente aqui:
Foi então que descobri que era possível renderizar componentes React dentro dos Power BI Custom Visual! Aí ficou “fácil” 😀
Um pequeno tutorial da Microsoft:
https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial
SOLUÇÃO:
Vamos lá então!
Prepare o ambiente de desenvolvimento instalando:
- Node.js
- Power BI Visuals Tools (pbiviz)
- Instale o certificado pra dev
Com o ambiente de desenvolvimento pronto. Vamos começar nosso componente React:
pbiviz new myreact
Este comando irá criar um projeto com nome ‘myreact’. Navegue até a pasta do projeto para instalar os pacotes necessários.
cd myreact
Vamos instalar os pacotes necessários para o react.
npm i react react-dom
npm i @types/react @types/react-dom
npm i @babel/polyfill
Configure o tsconfig.json para react (compilerOptions), adicione:
“jsx”: “react”,
“types”: [“react”, “react-dom”],
Pronto. Agora vamos criar o componente react “component.tsx”:
import * as React from “react”;
export default class MyReact extends React.Component<{}>{
render() {
return (
<div>
Hello, React!
</div>
)
}
}
No arquivo “visual.ts” substitua o conteúdo do arquivo por este conteúdo abaixo:
“use strict”;
import “@babel/polyfill”;
import powerbi from “powerbi-visuals-api”;
import * as React from “react”;
import * as ReactDOM from “react-dom”;
import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import “./../style/visual.less”;
import MyReact from ‘./component’;
export class Visual implements IVisual {
private target: HTMLElement;
private reactRoot: React.ComponentElement<any, any>;
constructor(options: VisualConstructorOptions) {
this.reactRoot = React.createElement(MyReact, {});
this.target = options.element;
ReactDOM.render(this.reactRoot, this.target);
}
public update(options: VisualUpdateOptions) {
}
}
Vamos testar! No prompt de comando, rode a aplicação:
pbiviz start
Navegue até o report no Power BI para testar:
E é isso! Um componente React dentro do Power BI Custom Visual! 😊
Código completo no GitHub:
https://github.com/thiagottss/pbi-customvisuals
Partindo deste exemplo podemos criar inúmeras possibilidades. Eu criei o componente que precisava, mas esse será tema para outro post:
Link demo: https://youtu.be/7hETqVpe-yc
Abraço!
How to add another repo/remote to the same folder directory
Overview
Usually all source code version control is done inside our company repo but in some situations we need to publish the code to the customer’s repo when a new version is ready to production.
It’s not rare to send over the code zipped but then the customer will not be able to track the changes made on those files.
But now that DevOps concepts is on the spot we are also entitled to publish the release version to the customers’ repo and this action will trigger some code analysis, tests, and deployment!
So why not push the code/branch directly to customer’s repo maintaining the commits that had been made during development.
Solução
In this post I’ll use two repos that I created previously:
- One on GitHub as “primary” (Consulting);
- Another one on Azure DevOps as “secondary” (Customer).
I’ve published a .NET Core project with some initial commits on GitHub’s repo:
Now, to push these files to Azure DevOps repo with the commits history we need to add another remote to our local repo:
- Git remote add <alias> <remote-git-url>
To push the “secondary” repo:
- Git push secondary
Done! We can see our code (with history) on Azure DevOps repo!
Como adicionar outro repositório ao mesmo diretório de arquivos usando git
Overview
Normalmente todo controle de código é feito no repositório da consultoria, mas em algumas situações é necessário entregar a versão do código no repositório do cliente nos releases para produção.
Nessa ocasiações é comum enviar um arquivo .zip para o cliente, mas com o cliente não tem um controle ou uma visão dos commits realizados naquela versão.
Mais importante ainda, o ideal é que quando há uma esteira de implantação e promoção do código em questão para os ambientes de qualidade, staging e produção possamos realizar o commit to código e iniciar um gatilho de análise, testes e deployment do código.
Como fazer para dar commit/push do mesmo código em repositórios diferentes? A solução é adicionar diversos “remote” no seu repositório local.
Solução
Neste post utilizarei dois repositórios que criei previamente:
- 1 no GitHub como “primário” (consultoria);
- Outro no Azure DevOps como “secundário” (cliente).
Eu já criei um projeto .NET Core no meu computador e já publiquei versões iniciais no repositório do GitHub:
Agora, para enviar este mesmo repositório para outro repositório, com o histórico de commits, adicionamos outro remote ao nosso repositório local:
- Git remote add <alias> <remote-git-url>
Para atualizar o repositório secundário:
- Git push secondary
Agora temos os código no repositório secundário, com o histórico de commits!
AuthenticationException: Authentication failed, see inner exception
CENÁRIO:
Olá!
De uns tempos pra cá meu Mac (OSX) parou de funcionar a funcionalidade de rodar aplicações “localhost” com HTTPS embutido no ASP.NET Core.
Pra contornar, estava montando o Kestrel com certificado auto assinado gerado por mim mesmo (https://docs.microsoft.com/pt-br/aspnet/core/fundamentals/servers/kestrel?view=aspnetcore-2.2#kestrel-options), mas o outro jeito era tão mais fácil e simples que resolvi procurar e há um jeito de resolver! J
ERRO:
Deixando default, e tentando acessar a URL “localhost” com HTTPS obtinha a seguinte mensagem de erro:
fail: Microsoft.AspNetCore.Server.Kestrel[0]
Uncaught exception from the OnConnectionAsync method of an IConnectionAdapter.
System.Security.Authentication.AuthenticationException: Authentication failed, see inner exception. —> Interop+AppleCrypto+SslException: Internal error
— End of inner exception stack trace —
SOLUÇÃO:
Para resolver, há um comando do próprio dotnet para corrigir os certificados e voltar a funcionar tudo perfeitamente:
dotnet dev-certs https
No meu mac, não resolveu de primeira. Tive que limpar os certificados antes com este comando:
dotnet dev-certs https –clean
e depois:
dotnet dev-certs https
Pronto!
Tudo funcionando perfeitamente novamente. 🙂
Abraço!
Como juntar (merge) vários arquivos CSV em um único arquivo CSV
CENÁRIO:
Olá!
Por várias vezes precisei consolidar arquivos CSV em um único arquivo para facilitar análises de dados e indicadores. Quase sempre realizava o bom e velho copy/paste em um novo arquivo.
Mas, chegou o derradeiro dia de realizar essa operação com mais de 20 arquivos…
SOLUÇÃO:
Pra facilitar, coloque todos os seus arquivos CSV em uma pasta separada.
Agora vá no “Terminal” (Mac OS) ou “prompt de comando” (Windows) e use o respectivo comando para juntar os arquivos em um único arquivo novo.
Dica: Se os seus arquivos possuem “cabeçalho” (headers), remova-os antes, pois o comando irá juntar todos os arquivos e os cabeçalhos ficarão no meio das linhas.
Mac:
cat *.csv > novoarquivo.csv
Windows:
copy *.csv novoarquivo-win.csv
Abraço!
Como buscar informações de status do Workflow no SharePoint Online (365)
CENÁRIO:
Olá!
Nas versões antigas (on-premises) do SharePoint Server é bem fácil obter o status do workflow bastando apenas adicionar uma coluna na view que contém o nome do Workflow.
Entretanto, no SharePoint Online (365) é um pouco diferente. Ainda temos a coluna do workflow (WorkflowColumnStatus), mas ela fica “em branco”. Como fazer para verificar, programaticamente, o status do workflow que foi desenvolvido dentro de um SharePoint Add-in?
ERRO:
Colunas em branco:
SOLUÇÃO:
Utilizando o SharePoint CSOM ou JSOM (Javascript Object Model) é possível instanciar o WorkflowServicesManager e obter as informações do workflow.
Em texto:
var workflowServicesManager = new WorkflowServicesManager(ctx, ctx.Web);
// connect to the instance service
var workflowInstanceService = workflowServicesManager.GetWorkflowInstanceService();
// get all instances
var workflowInstances = workflowInstanceService.EnumerateInstancesForListItem(listId, itemId);
ctx.Load(workflowInstances, i => i.Include(f => f.Id, f => f.LastUpdated, f => f.Status));
ctx.ExecuteQuery();
foreach (var instance in workflowInstances)
{
try
{
if (instance.Status.ToString() != “Completed”)
{
Console.WriteLine(“{0} – {1} – {2}”,
instance.Id.ToString(),
instance.LastUpdated,
instance.Status.ToString());
}
}
catch (Exception ex)
{
_telemetry.TrackException(ex);
}
}
. J
Abraço!
Como forçar o Azure App utilizar o horário do Brasil (ou qualquer outro de sua preferência)
CENÁRIO:
Olá!
Desde que o Azure mudou para o “ARM” tenho usado muito o Azure App Service para rodar minhas aplicações como serviço (PaaS) e não precisar “gerenciar” o Windows/IIS.
Mas, como nem tudo são flores, algumas coisas precisam de ajustes/configurações para que funcione exatamente como se você estive utilizando um servidor hospedado no Brasil.
Um exemplo disso é o horário. Se for implantar sua aplicação e começar a utilizar vai perceber que para funções que utilize data e horário, a configuração utilizada, por padrão, será UTC (ou GMT +0).
ERRO:
Então, ao salvar um registro no banco de dados a coluna “criado” ficará com data 3 horas pra frente, agora que estamos fora do horário de verão, e o horário oficial de Brasília é GMT -3.
SOLUÇÃO:
Há outras alternativas de configurar, mas o que eu acho mais prático é setar o “Application settings” do App para o seu “time_zone”. Ou adicionar ao web.config.
Key: WEBSITE_TIME_ZONE
Value: E. South America Standard Time
Pronto, agora sua aplicação está utilizando o horário oficial da América do Sul.
Lista de Zonas que funcionam no Windows (Linux é diferente):
[
“Dateline Standard Time”,
“UTC-11”,
“Aleutian Standard Time”,
“Hawaiian Standard Time”,
“Marquesas Standard Time”,
“Alaskan Standard Time”,
“UTC-09”,
“Pacific Standard Time (Mexico)”,
“UTC-08”,
“Pacific Standard Time”,
“US Mountain Standard Time”,
“Mountain Standard Time (Mexico)”,
“Mountain Standard Time”,
“Central America Standard Time”,
“Central Standard Time”,
“Easter Island Standard Time”,
“Central Standard Time (Mexico)”,
“Canada Central Standard Time”,
“SA Pacific Standard Time”,
“Eastern Standard Time (Mexico)”,
“Eastern Standard Time”,
“Haiti Standard Time”,
“Cuba Standard Time”,
“US Eastern Standard Time”,
“Turks And Caicos Standard Time”,
“Paraguay Standard Time”,
“Atlantic Standard Time”,
“Venezuela Standard Time”,
“Central Brazilian Standard Time”,
“SA Western Standard Time”,
“Pacific SA Standard Time”,
“Newfoundland Standard Time”,
“Tocantins Standard Time”,
“E. South America Standard Time”,
“SA Eastern Standard Time”,
“Argentina Standard Time”,
“Greenland Standard Time”,
“Montevideo Standard Time”,
“Magallanes Standard Time”,
“Saint Pierre Standard Time”,
“Bahia Standard Time”,
“UTC-02”,
“Mid-Atlantic Standard Time”,
“Azores Standard Time”,
“Cape Verde Standard Time”,
“UTC”,
“Morocco Standard Time”,
“GMT Standard Time”,
“Greenwich Standard Time”,
“W. Europe Standard Time”,
“Central Europe Standard Time”,
“Romance Standard Time”,
“Central European Standard Time”,
“W. Central Africa Standard Time”,
“Jordan Standard Time”,
“GTB Standard Time”,
“Middle East Standard Time”,
“Egypt Standard Time”,
“E. Europe Standard Time”,
“Syria Standard Time”,
“West Bank Standard Time”,
“South Africa Standard Time”,
“FLE Standard Time”,
“Israel Standard Time”,
“Kaliningrad Standard Time”,
“Sudan Standard Time”,
“Libya Standard Time”,
“Namibia Standard Time”,
“Arabic Standard Time”,
“Turkey Standard Time”,
“Arab Standard Time”,
“Belarus Standard Time”,
“Russian Standard Time”,
“E. Africa Standard Time”,
“Iran Standard Time”,
“Arabian Standard Time”,
“Astrakhan Standard Time”,
“Azerbaijan Standard Time”,
“Russia Time Zone 3”,
“Mauritius Standard Time”,
“Saratov Standard Time”,
“Georgian Standard Time”,
“Caucasus Standard Time”,
“Afghanistan Standard Time”,
“West Asia Standard Time”,
“Ekaterinburg Standard Time”,
“Pakistan Standard Time”,
“India Standard Time”,
“Sri Lanka Standard Time”,
“Nepal Standard Time”,
“Central Asia Standard Time”,
“Bangladesh Standard Time”,
“Omsk Standard Time”,
“Myanmar Standard Time”,
“SE Asia Standard Time”,
“Altai Standard Time”,
“W. Mongolia Standard Time”,
“North Asia Standard Time”,
“N. Central Asia Standard Time”,
“Tomsk Standard Time”,
“China Standard Time”,
“North Asia East Standard Time”,
“Singapore Standard Time”,
“W. Australia Standard Time”,
“Taipei Standard Time”,
“Ulaanbaatar Standard Time”,
“North Korea Standard Time”,
“Aus Central W. Standard Time”,
“Transbaikal Standard Time”,
“Tokyo Standard Time”,
“Korea Standard Time”,
“Yakutsk Standard Time”,
“Cen. Australia Standard Time”,
“AUS Central Standard Time”,
“E. Australia Standard Time”,
“AUS Eastern Standard Time”,
“West Pacific Standard Time”,
“Tasmania Standard Time”,
“Vladivostok Standard Time”,
“Lord Howe Standard Time”,
“Bougainville Standard Time”,
“Russia Time Zone 10”,
“Magadan Standard Time”,
“Norfolk Standard Time”,
“Sakhalin Standard Time”,
“Central Pacific Standard Time”,
“Russia Time Zone 11”,
“New Zealand Standard Time”,
“UTC+12”,
“Fiji Standard Time”,
“Kamchatka Standard Time”,
“Chatham Islands Standard Time”,
“UTC+13”,
“Tonga Standard Time”,
“Samoa Standard Time”,
“Line Islands Standard Time”
]
E, não menos importante, vale lembro que, ainda, não tem como configurar o fuso horário do Azure SQL Database (Paas). Ou seja, as colunas de data serão armazenadas com UTC (GMT +0). Então, você precisa tratar isso na aplicação.
Abraço!
