svg
24 TopicsPsicología, Integracion PowerApps, PBIR, y Networking! (Powered by Intelequia)
INSCRIPCION PREVIA OBLIGATORIA EN https://www.meetup.com/es-ES/power-bi-barcelona/events/307458612/ 17:30 Apertura de la sala 18:00 Introducción por parte de Intelequia 18:10 Introducción por parte de Power BI & Fabric Barcelona 18:20 Primera sesión: Paola Londoño, Neovantas People analytics en Power BI: personas, no solo números. Caso de uso de análisis de datos en RRHH y Power BI analizando la clásica matriz de evaluación del desempeño (9 box) junto con KPI's transversales sobre la satisfacción, el ajuste al puesto y la situación personal de los equipos. El uso de SVG y DAX en este caso de uso puede servir de inspiración para otros tipos de informes. 18:55 Segunda sesión: Cristina Tosco, Intelequia Analiza, toma decisiones e interactúa con tus datos. Fusiona capacidades de Power BI y Power Apps Power BI transforma tus datos en información clara y visual para entender el rendimiento de tu negocio. Pero ¿y si pudieras ir un paso más allá? Imagina que uno de tus indicadores no solo mostrara información, sino que también te permitiera interactuar con los datos directamente desde el informe: actualizar registros, lanzar procesos o tomar decisiones en tiempo real. En esta charla descubrirás cómo integrar Power Apps dentro de Power BI para crear soluciones interactivas que no solo informan, sino que también permiten actuar. Una combinación poderosa que transformará tus informes en herramientas vivas y conectadas con la realidad de tu negocio. 19:30 Tercera sesión: Samuel Piña, Nestlé Nuevas posibilidades del formato PBI Enhanced Report format (PBIR) En la actualidad, existen múltiples métodos para gestionar el modelo de datos programáticamente. El nuevo formato PBIR de Power BI (aún en fase de vista previa) también permite manipular la parte visual con código. En la charla, presentaremos algunas ideas de las posibilidades que se abren gracias a este nuevo formato. 20:00 Networking con catering gracias a Intelequia! 21:00 Cierre Los ponentes: Paola Londoño, Neovantas Psicóloga especialista en análisis de datos conductuales con experiencia en rrhh, ventas y consultoria. Mi misión es ayudar a empresas a conectar mejor con clientes y equipos, combinando conocimientos técnicos y de negocio con una compresión profunda de los elementos que motivan el comportamiento humano. Cristina Tosco, Intelequia Cristina Tosco, ingeniera informática, con experiencia como desarrolladora full-stack. Solía trabajar como programadora en la implementación de aplicaciones nativas y desarrollo web. Sin embargo, cuando se encontró con las tecnologías de Microsoft Power Platform, quedó fascinada. Decidió hacer un giro en su carrera de inmediato y ahora lleva más de un año formándose y descubriendo este maravilloso mundo. Desde entonces, este cambio de rumbo ha sido, sin duda, su decisión más acertada. Actualmente desempeña el puesto de Business Apps Specialist en Intelequia Technologies, donde junto a su equipo se encarga de proporcionar soluciones para empresas basadas en aplicaciones de modelos y automatismos. Analizamos y desarrollamos iniciativas para optimizar y agilizar procesos empresariales a través de soluciones tecnológicas innovadoras. Samuel Piña, Nestlé +15 años de experiencia en BI, principalmente en SAP BW y, durante los últimos 5, también en Power BI, siempre trabajando para multinacionales. Antes, varias posiciones en Logísitca y Control de Producción. Actualmente, Global Product Manager Reporting & Dashboards T&P, Nestlé65Views0likes0CommentsSVG HTML Charts UDFs
FUNCTION SVG_Shape = (IconIndex:numeric,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='48' height='48'>" & SWITCH(IconIndex, 1,"<rect rx='24' x='0' y='0' width='48' height='48' fill='" & Color & "'/>", 2,"<rect rx='5' x='0' y='0' width='48' height='48' fill='" & Color & "'/>", 3,"<path d='M5.41421 22.5858L22.5858 5.41421C23.3668 4.63317 24.6332 4.63316 25.4142 5.41421L42.5858 22.5858C43.3668 23.3668 43.3668 24.6332 42.5858 25.4142L25.4142 42.5858C24.6332 43.3668 23.3668 43.3668 22.5858 42.5858L5.41421 25.4142C4.63317 24.6332 4.63316 23.3668 5.41421 22.5858Z' fill='" & Color & "'/>", 4,"<circle cx='24' cy='24' r='20' stroke='" & Color & "' fill='none' stroke-width='2'/>") & " </svg>" e.g. Measure = SVG_Shape(3,if([M.KPI]>=0.5,"green","rgb(255,0,0)")) FUNCTION SVG_Text_Icon = (TextIcon:string,BackgroundColor:string,FontColor:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='96' height='96'> <rect rx='5' x='0' y='0' width='96' height='96' fill='" & BackgroundColor & "'/> <text x='48' y='48' text-anchor='middle' dominant-baseline='central' font-size='60' fill='" & FontColor & "'>" & TextIcon & "</text1> </svg>" e.g. Measure = SVG_Text_Icon(IF([M.KPI]>=1,"A","B"), IF([M.KPI]>=1,"green","red") ,"snow") FUNCTION SVG_Rank = (ColumnRank:anyref,MeasureRank:numeric expr,BackgroundColor:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='96' height='96'> <rect rx='48' x='0' y='0' width='96' height='96' fill='" & BackgroundColor & "'/> <text x='48' y='48' text-anchor='middle' dominant-baseline='central' font-size='60' fill='snow'>" & RANKX(ALLSELECTED(ColumnRank),MeasureRank) & "</text> </svg>" e.g. Measure = SVG_Rank('store'[storeID],[M.sales],"brown") FUNCTION SVG_Bar = (ColumnForBar:anyref,MeasureForBar:numeric expr,Color:string)=> VAR MaxValue = MAXX(ALLSELECTED(ColumnForBar), MeasureForBar) VAR Width = 280 * MeasureForBar / MaxValue RETURN "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='300' height='36' > <rect rx='2' x='10' y='16' width='280' height='4' fill='#f0f0f0'/> <rect rx='2' x='"& (300-Width)/2 & "' y='12' width='" & Width & "' height='12' fill='" & Color & "' stroke='none'/> <text x='150' y='8' text-anchor='middle' font-size='11' fill='#333333'> " & FORMAT(MeasureForBar,"#,##") & " </text> </svg>" e.g. Measure= SVG_Bar('store'[storeID],[M.KPI],"Deepskyblue") FUNCTION SVG_Progress_Bar = (PctMeasure:numeric,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='30'> <path id='wujunmin' d='M0 15L200 15' stroke='" & Color & "' stroke-opacity='0.4' stroke-width='10' stroke-dasharray='2'/><path d='M0 15L" & 200 * PctMeasure & " 15' stroke='" & Color & "' stroke-width='10'/> </svg>" e.g. Measure = SVG_Progress_Bar([M.Pct],"brown") FUNCTION SVG_Gradient_Bar = (ColumnForBar:anyref,MeasureForBar:numeric expr,Color:string)=> VAR MaxValue = MAXX ( ALLSELECTED(ColumnForBar), MeasureForBar) VAR LinearGradient= " <defs> <linearGradient id='wujunmin'> <stop offset='0%' style='stop-color:white'/> <stop offset='100%' style='stop-color:" & Color & "'/> </linearGradient> </defs>" VAR SVG = " data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='200' height='30' > " & LinearGradient & " <rect rx='2' x='0' y='5' width='" & 200 * MeasureForBar / MaxValue & "' height='20' fill='url(#wujunmin)' /> </svg>" RETURN SVG e.g. Measure = SVG_Gradient_Bar('Store'[StoreID],[M.KPI],"Brown") FUNCTION SVG_Waffle = (PctMeasure:numeric,Color:string)=> VAR t = GENERATESERIES ( 1, 10 ) VAR tPlus = GENERATE ( SELECTCOLUMNS ( t, "Value1", [Value] ), t ) VAR tPlusPlus = ADDCOLUMNS ( tPlus, "Index", RANKX ( tPlus, [Value] + [Value1] / 100,, ASC ) ) VAR tWaffle = ADDCOLUMNS ( tPlusPlus, "circle", "<circle cx='" & [Value] * 10 -5 & "' cy='" & [Value1] * 10 -5 & "' r='4' fill='" & IF ( [Index] <= ROUND (PctMeasure * 100, 0 ), Color , "LightGrey" ) & "' />") RETURN "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='100' height='100'> <g transform='rotate(-90,50,50)'>" & CONCATENATEX ( tWaffle, [circle] ) & "</g> </svg> " e.g. Measure = SVG_Waffle([M.Pct],IF([M.Pct]<0.5,"Brown","green")) FUNCTION SVG_Bubble = (ColumnForBubble:anyref,MeasureForBubble:numeric expr,Color:string)=> "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='200' height='200'> <circle cx='100' cy='100' r='" & 100 * SQRT ( ABS ( MeasureForBubble ) / MAXX ( ALLSELECTED ( ColumnForBubble ), ABS ( MeasureForBubble ) ) ) & "' fill='" & Color & "'/> </svg>" e.g. Measure = SVG_Bubble('Store'[StoreID],[M.KPI],"Deepskyblue") --------------- HTML UDFs(HTML Content Visual) FUNCTION HTML_CircleBG_Text= (AnyText:string,BackgroundColor:string,TextColor:string)=> "<head> <style> p { font-size: 30px; color: white; font-weight: bold; line-height: 1; font-family: Arial, sans-serif; } .wujunmin { background-color: " & BackgroundColor & "; border-radius: 50%; margin: 3px; width: 60px; height: 60px; color: " & TextColor & "; display: inline-flex; align-items: center; justify-content: center; } </style> </head> <body> <p>" & CONCATENATEX( GENERATESERIES(1,LEN(AnyText)), "<span class='wujunmin'>" & MID(AnyText,[Value],1) & "</span>",,[Value],ASC ) & "</p> </body>" e.g. Measure = HTML_CircleBG_Text("wujunmin","Brown","Snow") FUNCTION HTML_Progress_Bar = (ColumnForPct:anyref,PctMeasure:numeric,Color:string)=> "<p style='font-size: 20px;background: linear-gradient(to right, " & Color & " " & FORMAT(PctMeasure,"0%") & ", lightgrey 0);border-radius: 20px;white-space: nowrap;padding-left:5px;'>" & SELECTEDVALUE(ColumnForPct) & " " & FORMAT(PctMeasure,"0%") & "</p>" e.g. Measure = HTML_Progress_Bar('Store'[StoreID],[M.Pct],"tomato") FUNCTION HTML_Bar_Ring = (ColumnForChart:anyref,MeasureForBar:numeric expr,MeasureForRing:numeric)=> VAR MaxSales = MAXX(ALLSELECTED(ColumnForChart), MeasureForBar) VAR SalesPercentage = MeasureForBar / MaxSales * 100 VAR AchievementRate = MeasureForRing VAR CityName = SELECTEDVALUE(ColumnForChart) VAR SalesFormatted = FORMAT(MeasureForBar, "#,#") VAR DonutChart = "<svg width='50' height='50' viewBox='0 0 42 42'> <circle cx='21' cy='21' r='15' fill='none' stroke='lightgrey' stroke-width='4'/> <circle cx='21' cy='21' r='15' fill='none' stroke='#2196F3' stroke-width='4' stroke-linecap='round' stroke-dasharray='" & AchievementRate * 100 & ",100' transform='rotate(-90 21 21)'/> <text x='21' y='26' font-family='Arial' font-size='10' text-anchor='middle' fill='#333'>" & FORMAT(AchievementRate, "0%") & "</text> </svg>" --公众号wujunmin VAR BarChart = "<div style='display: flex; align-items: center; width: 100%; gap: 10px;'> <div style='flex-shrink: 0;'>" & DonutChart & "</div> <div style='flex-grow: 1; position: relative;'> <div style='height: 30px; background: #f0f0f0; border-radius: 15px; overflow: hidden;'> <div style='height: 100%; width: " & SalesPercentage & "%; background: linear-gradient(90deg, #2196F3, #64B5F6); border-radius: 15px 0 0 15px; display: flex; align-items: center; padding-left: 15px; color: white; font-family: Arial; font-weight: bold; font-size: 15px;'> " & CityName & " " & SalesFormatted & " </div> </div> </div> </div>" RETURN BarChart e.g. Measure = HTML_Bar_Ring('Store'[StoreID],[M.Sales],[M.Pct])609Views1like2CommentsSVG icons in matrix not showing up
Hi all, I need some help with my matrix. For the matrix outlined in pink, the SVG icons do not show up 😞 The column [svg_url] has values formatted like this : "data:image/svg+xml;utf8," & "<svg fill='#4E8BA1' width='800px' height='800px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'><path d='M213.333 960c0-167.36 56-321.707 149.44-446.4L1406.4 1557.227c-124.693 93.44-279.04 149.44-446.4 149.44-411.627 0-746.667-335.04-746.667-746.667m1493.334 0c0 167.36-56 321.707-149.44 446.4L513.6 362.773c124.693-93.44 279.04-149.44 446.4-149.44 411.627 0 746.667 335.04 746.667 746.667M960 0C429.76 0 0 429.76 0 960s429.76 960 960 960 960-429.76 960-960S1490.24 0 960 0' fill-rule='evenodd'/></svg>" The data category is set as Image URL I've had success with the matrix outlined in yellow (using http links), but wanted to use a different method for linking svg icons as I wanted fuller control over the icons' colour. I've also tested out the same values using a DAX measure [svg_url_DAX] and displaying it as a table (outlined in green), it shows up just fine, I wonder what went wrong. 😬 Link to .pbix file + svg icons : https://drive.google.com/drive/folders/1d_6_pT5TJtg5KpRC79plvzXfako83upA?usp=sharing Appreciate any help and pointers! Much thanks!Dispaly SVG Image or Text Within Same Matrix Column
I have a DAX expression which renders a SVG image or displays a number depending on the scope of the row. I am able to get the number to display, but instead of the image displaying, the SVG markup gets displayed. InScope is categorized correctly as an Image URL and I am able to display only the image if I program my DAX expression as InScope = [BlueBox]. This tells me that the measure is defined and categorized correctly. I am scratching my head trying to get this to work. I know it shouldn't be this problematic. Any suggestions? TIA Dax Expression: InScope = IF ( AND ( ISINSCOPE('Employee'[Name]), [Assigned] = 1 ), [BlueBox] , [Assigned] ) Resulting Matrix (also showing that my SVG images do render correctly):Solved1.3KViews0likes3CommentsAdd conditional formatting to sparkline by DAX
Measure1(mark it as image URL): Sparkline = VAR MaxValue = MAXX ( VALUES ( 'table'[month]), [KPI]) VAR MinValue= MINX ( VALUES ( 'table'[month]), [KPI]) VAR Max_Width= IF(MinValue<0,IF(MaxValue<0, ABS(MinValue),MaxValue-MinValue),MaxValue) VAR BarTable= ADDCOLUMNS( SUMMARIZE('table','table'[year],'table'[month], "Color",IF([KPI]=MaxValue,"Green",IF([KPI]=MinValue,"Red","Grey"))), "Rect", "<rect x='"&IF(MinValue>0,0, IF(MaxValue>0, IF([KPI]<0,120-120*(MaxValue-[KPI])/Max_Width,120*ABS(MinValue)/Max_Width),120-120*ABS([KPI])/Max_Width)) &"' y='" & ( [month] - 1 ) * 10 & "' width='" & 120*ABS([KPI]) / Max_Width & "' height='9' fill='" & [Color] & " '/>") Return "data:image/svg+xml;utf8,"&" <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' > <g transform='rotate(-90,60,60)'>"& CONCATENATEX(BarTable,[Rect])&"</g> </svg> "Triangle style bar chart by DAX+SVG
Result: Mark the measure below as image URL: Chart = VAR Max_Value = MAXX ( ALLSELECTED ('table'),[KPI] ) VAR SVG =" data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='300' height='30'> <polygon fill='deepskyblue' points=' " & 300 * [KPI] / Max_Value & ",15 0,0 0,30' /> </svg>" RETURN SVGDumbbell bar chart in table and matrix
Result: Mark the SVG measure below as image URL: 表格哑铃图 = VAR MAX1 = MAXX ( ALL ( 'table' ), [M.今年] ) VAR MAX2 = MAXX ( ALL ( 'table' ), [M.去年] ) VAR W = IF ( MAX1 >= MAX2, MAX1, MAX2) VAR Value_Left= MIN ( [M.今年], [M.去年] ) VAR Value_Right=MAX ( [M.今年], [M.去年] ) VAR Color_Circle_Left=IF ( [M.今年] <= [M.去年], "DeepSkyBlue", "Black" ) VAR Color_Circle_Right=IF ( [M.今年] > [M.去年], "DeepSkyBlue", "Black") VAR Line="<line x1='" & Value_Left / W*130+10 & "' y1='15' x2='" & Value_Right / W*130+10 & "' y2='15' style='stroke:DimGray;stroke-width:2' />" VAR Circle_Left= "<circle cx='" & Value_Left / W*130+10 & "' cy='15' r='5'" & " fill='" & Color_Circle_Left & "'/>" VAR Circle_Right= "<circle cx='" & Value_Right / W*130+10 & "' cy='15' r='5'" & " fill='" & Color_Circle_Right & "'/>" VAR Bar = Line& Circle_Left & Circle_Right VAR SVG = "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' height='30' width='150' >" & Bar & "</svg>" RETURN SVGAdd average line to bar chart (table & matrix)
Result: Mark the SVG measure below as Image URL: chart = VAR Max_Value = MAXX ( ALLSELECTED ('table'),[KPI] ) VAR Avg_Value = AVERAGEX ( ALLSELECTED ('table'),[KPI] ) VAR SVG =" data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='150' height='30'> <g> <title>公众号wujunmin</title> <rect x='0' y='5' width='" & 150 * [KPI] / Max_Value & "' height='20' fill='deepskyblue' /> <line x1='" & 150 * Avg_Value / Max_Value & "' x2='" & 150 * Avg_Value / Max_Value & "' y1='0' y2='30' stroke-width='1' stroke='black' stroke-dasharray='5' /> </g> </svg>" RETURN SVGMcKinsey‘s waffle chart by DAX
Mark this measure as ImageURL and put it in table or matrix Waffle = VAR t = GENERATESERIES ( 1, 10 ) VAR tPlus = GENERATE ( SELECTCOLUMNS ( t, "Value1", [Value] ), t ) VAR tPlusPlus = ADDCOLUMNS ( tPlus, "Index", RANKX ( tPlus, [Value] + [Value1] / 100,, ASC ) ) VAR tWaffle = ADDCOLUMNS ( tPlusPlus, "circle", "<circle cx='" & [Value] * 10 + 15 & "' cy='" & [Value1] * 10 + 15 & "' r='4' fill='" & IF ( [Index] <= ROUND ( [percent] * 100, 0 ), "Black", "LightGrey" ) & "' />" ) VAR Chart = "data:image/svg+xml;utf8," & " <svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>" & " <g transform='rotate(-90,75,75)'>" & CONCATENATEX ( tWaffle, [circle] ) & " </g> <text x='70' y='20' font-size='15' text-anchor='middle' >" & ROUND ( [percent] * 100, 0 ) & "</text> <text x='70' y='148' font-size='15' text-anchor='middle' >" & SELECTEDVALUE ( 'table'[store] ) & "</text> </svg> " RETURN IF ( HASONEVALUE ( 'table'[store] ), Chart, BLANK () )