Como criar VISUAIS 100% CUSTOMIZÁVEIS no Power BI utilizando HTML e CSS
No vídeo de hoje, vou mostrar como é possível implementar HTML e CSS dentro do Power BI e como isso pode ajudar na criação de visuais personalizados.
O Power BI já possui uma série de visuais prontos e personalizáveis, mas às vezes precisamos de algo que vá além do que está disponível na biblioteca padrão. É aí que entra a capacidade de adicionar HTML e CSS aos seus visuais.
Vou demonstrar como é possível criar um visual personalizado do zero, utilizando apenas o Power BI e algumas habilidades básicas de HTML e CSS. Com isso, você poderá criar visuais totalmente personalizados e adaptados às suas necessidades específicas.
Além disso, vou explicar as vantagens de utilizar visuais personalizados dentro do Power BI. Com visuais personalizados, você pode adicionar recursos e funcionalidades exclusivas que não estão disponíveis nos visuais padrão. Isso pode ajudar a aprimorar a análise de dados e a tomada de decisões.
Por fim, peço que deixem seu like no vídeo e se inscrevam no meu canal para receber mais conteúdos como esse. Também gostaria de convidá-los a me adicionarem no LinkedIn, onde compartilho dicas e truques sobre tecnologia e análise de dados. O link está na descrição abaixo.
Então, sem mais delongas, vamos mergulhar em como implementar HTML e CSS dentro do Power BI e criar visuais personalizados. Espero que gostem e obrigado por assistir!
Link do site utilizado: openxbi.vercel.app/
Linkedin: / pedroenzzomartins
Canal: / @enzzotech
Пікірлер: 91
Muito bom, continue gravando videos e ensinando a todos, você tem uma exelente didática!
@EnzzoTech
Жыл бұрын
Muito obrigado, men, agradeço demais!!
qualidade melhorando cade vez mais no conteudo , e o som melhorou muito , parabanes !
@EnzzoTech
Жыл бұрын
Muito obrigado, Pedro!! Sempre melhorando!
Muito bom mano! parabéns pelo conteúdo 👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽
@EnzzoTech
Жыл бұрын
Vlw, Ezequiel!!
Cara, que top, vou testar! Obrigado!
@EnzzoTech
Жыл бұрын
Muito útil mesmo, Eduardo, espero que goste!!
Muito bom, você é bastante objetivo, foi ótimo.
@EnzzoTech
Жыл бұрын
Muito obrigado pelo feedback, Estevão!!
Show de bola o conteúdo Pedro!
@EnzzoTech
Жыл бұрын
Obrigadão, Rapha!!
Excelente conteúdo! Obrigado! 👏🏻🔝
@EnzzoTech
Жыл бұрын
Vlw, Luiz, obrigadão pelo feedback!!
Curti D+ Parabéns pelo vídeo !!!
@EnzzoTech
Жыл бұрын
Vlw pelo feedback, Alex!!
Muito legal, vou usar certo, melhor vídeo explicando e mostrando o site. Ganhou escrito.
@EnzzoTech
Жыл бұрын
Obrigado pelo comentário, Greg!!!
Muito bom! Parabéns pelo conteúdo!
@EnzzoTech
8 ай бұрын
Vlw, Will!!
conteúdo muito útil e de fácil entendimento!!
@EnzzoTech
Жыл бұрын
Muito obrigado, Alissa!
Muito bom, obrigado por compartilhar
@EnzzoTech
Жыл бұрын
Vlw, Ronaldo!!
Foi muito claro, gostei do vídeo
@EnzzoTech
8 ай бұрын
Vlw, Carlos!!
muito bom, cara! Parabéns!
@EnzzoTech
Жыл бұрын
Obrigado, André!!
Muito fodaaa!! Me ajudou numa dúvida que tava aqui
@EnzzoTech
Жыл бұрын
Vlw, Yuri, que bom!!
Shoow demais isso
@EnzzoTech
9 ай бұрын
Vlw, Lucas!!
Ficou muito bom!
@EnzzoTech
Жыл бұрын
Espero que tenha gostado!!
O cara é fera!!
@EnzzoTech
9 ай бұрын
kkkkkkkkk. Depois de você!!
Conteúdo que faz a diferença!
@EnzzoTech
Жыл бұрын
Vlw, Victor!!
Magnifico!
@EnzzoTech
Жыл бұрын
😄
Excelente dica, parabéns!
@EnzzoTech
11 ай бұрын
Muito obrigado, Andre!
Muito bom!
@EnzzoTech
Жыл бұрын
Vlw, Ivo!!!
Conteúdo excelente.
@EnzzoTech
Жыл бұрын
Muito obrigado, Alessandro, espero que tenha gostado!
Obrigado. Show
@EnzzoTech
6 ай бұрын
Vlw, Rodrigo!!
Brabo!
@EnzzoTech
Жыл бұрын
Vlw, Evaristo!!
o cara é bom demais
@EnzzoTech
Жыл бұрын
Vlw, Zz!!
Top
@EnzzoTech
9 ай бұрын
Obrigado!!
HTML e CSS gostei da para brincar! Isso pode deixar o power BI super pesado.
massa demais
@EnzzoTech
Жыл бұрын
Vlw men, espero que tenha gostado!!
Gostei
@EnzzoTech
Жыл бұрын
Muito obrigado!!
Poste mais vídeos sobre, estou pesquisando sobre e esta difícil achar conteudo falando sobre HTML no Power Bi
@EnzzoTech
8 ай бұрын
Ok, Carlos, obrigado pelo feedback!
👏👏👏
@EnzzoTech
Жыл бұрын
😄😄😄
mas a barra de % não esta correto, como faz pra barra corresponder ao valor real ?
não sabia que dava pra fazer isso
@EnzzoTech
Жыл бұрын
Sim, é uma dica de visual muito útil!!
se botar um scriptzinho em js ali pra brincar com DOM vai funcionar delicinha!!! estou incrédulo que isso da certo kkk
@EnzzoTech
6 ай бұрын
Simm!
@JoaoVitor-ct5cc
6 ай бұрын
@@EnzzoTech Mano, eu náo consegui converter dados das tabelas do Power BI para dentro desse visual na minha tag de script. Tu faz ideia de como fazer isso? tentei converter as tabelas pra json, tentei importar com DAX, não consegui, tu manja como fazer isso?
@EnzzoTech
6 ай бұрын
@@JoaoVitor-ct5cc Nunca fiz isso também!
Parabéns pelo vídeo, meu amigo! Agora me tira uma dúvida, no vídeo você não mostrou como deixamos o preenchimento da barra dinâmico. Criei uma medida pra substituir no css, antes estava assim. 100% { width: calc(0.5 * 210px); } depois da medida feita coloquei assim { width: calc("& Medida % &" * 210px); } porém, não tá dando errado, poderia me ajudar?
@EnzzoTech
8 ай бұрын
Eaew, conseguiu resolver??
@eusoudemis
8 ай бұрын
@@EnzzoTech Eu tbm nao estou conseguindo, quando colocar a medida o tamanho da barra fica sempre preenchido como se fosse 100%
@walterjenkins8598
Ай бұрын
Coloquei uma medida para calcular os PXs (valor*210) e depois armazenei ela concatenando com "px", ai só chamar a VAR no cálculo. Tive que arredondar pra dar certo VAR PxPercImoveis = CONCATENATE(ROUND([Calcula Px Imoveis],0),"px") -- arredondei calculo de pixels sem casas decimais (percent * 210px) e concatenei com px. "&PercImoveis&"
Bom dia! entrei no site para pegar os cards porem não aparecem mesmo eu logado como procedo? obrigado
@EnzzoTech
Жыл бұрын
Mandei!
Enzzo, como faz para colocar nas barras o valor da quantidade / pelo total para dar o valor correto? as duas barras se movem com o mesmo percentual, porém, eu tenho uma quantidade realizada de 333 entregas vs meta de 380 daria 87%. Como fazer isso aparecer? Obrigado pleo conteúdo!
@EnzzoTech
9 ай бұрын
Basta substituir no local onde temos o tamanho de 50% por essa sua conta que ele ja vai ajustar!
@user-si4kx4rk4i
9 ай бұрын
Show, mas agora não fica em formato de percentual, rs da um número com casas decimais Obrigado pelo seu retorno imediato.
@EnzzoTech
9 ай бұрын
Coloca a função FORMAT antes@@user-si4kx4rk4i
Alguém poderia por favor colocar o código deste card aqui para eu pegar por favor, pois não estou conseguindo pegar no site. Obrigado.
@EnzzoTech
Жыл бұрын
Link: openxbi.vercel.app/ openxbi.vercel.app/componentCode Received gross $25,459,234.00 Received by category T-shirt $10,183,693.60 _ 35% Pants $12,729,617.00 _ 50% @import url('fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); * { font-family: 'Inter', sans-serif; /* Font do component, remova para usar a font nativa do PBI */ margin: 0; /* Remove todas as margens iniciais */ box-sizing: border-box; } .card-container { display: flex; align-items: center; justify-content: center; height: 100%; } .card-container, .card-content, .received-gross { display: flex; justify-content: center; } .card-content { align-items: flex; flex-direction: column; padding: 1rem; margin: .5rem; height: auto; width: 250px; background: white; /* Background do card principal */ border-radius: 11px; /* Raio da borda */ border: 1px solid rgba(136, 136, 136, 0.1); box-shadow: 1px 1px 2px 1px rgba(133, 133, 133, 0.1); } /* received gross styles */ .received-gross { flex-direction: column; justify-content: flex-start; } .received-gross p { margin: .3rem 0 1rem 0; /* margens em volta do valor de received gross */ } /* Category */ .title-about-categorys { font-size: .875rem; color: rgb(1, 3, 116); /* Cor do Título das categorias */ margin-bottom: .5rem; } .category-name-value { display: flex; justify-content: space-between; /* Define um espaço entre os dois elementos na tag */ margin-bottom: .5rem; /* Margin abaixo do nome da categoria */ } .category-name-value p { font-size: 0.875rem; /* Tamanho da font do valor a frente da categoria */ } .bar-progress1, .bar-progress2 { display: flex; margin-bottom: 1rem; /* Margem abaixo de cada barra */ } /* barras de fundo */ .back-bar, .back-bar2 { --bar-width: 216px; color: transparent; background: rgb(255, 237, 237); /* Cor de fundo da barra */ max-width: var(--bar-width); /* largura máxima da barra, depende da variavel ali em cima */ width: 100%; /* faz com que as barras ocupem 100% do espaço disponivel */ border-radius: 8px; } /* estiliza as duas barras de valores */ .front-bar, .front-bar2 { position: absolute; font-size: .7rem; /* Tamanho da fonte da porcentagem */ margin: .2rem; /* margem ao redor das barras */ text-align: center; /* alinha as % ao centro das barras */ color: white; /* Cor da porcentagem */ border-radius: 8px; animation-fill-mode: forwards; /* forwards - define que a animação deve permanecer com a estilização do final da animação */ animation-delay: 1s; /* delay para iniciar a animação */ } .front-bar { animation: anim1 1.5s forwards; /* 1.5s é o tempo da animação */ background: #29a2e3; /* Cor da barra 1 */ } .front-bar2 { animation: anim2 1.5s forwards; background: #FF8C00; /* Cor da barra 2 */ } @keyframes anim1 { 0% { width: 0;} 100% { width: calc(0.35 * 210px); } /* Barra 1: Altere o 0.35 pela sua porcentagem */ } @keyframes anim2 { 0% { width: 0;} 100% { width: calc(0.5 * 210px); } /* Barra 2: Altere o 0.5 pela sua porcentagem */ }
Quando insiro os cards no Power Bi eles ficam embaçados, com uma qualidade de imagem ruim, sabe como resolver isso?
@EnzzoTech
9 ай бұрын
Como estão as configurações do seu BI?
@user-yt3wh1hg2f
9 ай бұрын
Está com as configurações que vem padrão, tem alguma especifica que preciso habilitar? @@EnzzoTech
e barra, como faço para ela ficar dinâmica?
@EnzzoTech
Ай бұрын
Opa, Luan! Basta no código ao contrario de colocar o valor direto, colocar o valor da divisão ou multiplicação do % do seu valor resultante.
Ótimo conteúdo, Parabéns!!!
@EnzzoTech
Жыл бұрын
Vlw pelo feedback, Daniel!
Muito bom!!
@EnzzoTech
Жыл бұрын
Vlw, Yuri!!