Desarrollo visual personalizado: fuente de representación de problemas «DIN»

Un usuario Pregunto ✅

inserv

Hola a todos.
Tenemos un problema con la representación de la fuente DIN en nuestro visual personalizado.

Problema: la fuente DIN representada por nuestro visual personalizado no coincide con la misma fuente
(con el mismo color, tamaño…) mediante tarjeta visual integrada.

Código:
eleDinTest privado: d3.Selection ;

esto.eleDinTest
.text(«Prueba DIN»)
.style(«tamaño de fuente», 20 + «pt») // o .style(«tamaño de fuente», 20 + «px»)
.style(«familia de fuentes», «DIN»)
.style(«peso de fuente», «Normal»)
.style(«rellenar», «#000000»);

¿Se requiere alguna configuración adicional de estilo y/o atributo?
Cualquier ayuda es muy apreciada.
Gracias por adelantado.

En respuesta a inserv

Hola,

1. La última API admite la definición estándar de la lista de fuentes

Familia de fuentes.PNG

Sin embargo, agregará todas las fuentes posibles para Power BI (incluidas las que no funcionan en la zona de pruebas).

Sin embargo, la lista de fuentes se puede definir manualmente como cualquier enumeración en capacidades.json

Desafortunadamente, no estoy familiarizado con todas las fuentes que no funcionan en sandbox, solo DIN, pero puede haber un par de otras.

Honestamente, no recomiendo definirlas manualmente porque he discutido esta pregunta con las personas a cargo de esta pregunta y existe la posibilidad de que estas fuentes sean compatibles con sandbox en el futuro.

Además, las imágenes pueden funcionar en diferentes modos, por lo que es mejor dejar estas fuentes como están.

2. El tamaño de la fuente se define en ‘pt’ (si se describe correctamente en las capacidades.json)

Tamaño de fuente.PNG

Sin embargo, dentro de la imagen puede transformarse en ‘px’ por el código (si el desarrollador lo decide, pero el tamaño original se almacena en ‘pt’ de todos modos)

ptConverter.PNG

Saludos cordiales,

evgenii elkin,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com

dm-p

Hola @inserv,

Al inspeccionar la tarjeta visual con las propiedades predeterminadas configuradas (DIN es la fuente en el menú desplegable), se configuran los siguientes atributos de estilo:

{
    text-anchor: middle;
    fill: rgb(51, 51, 51);
    font-family: wf_standard-font, helvetica, arial, sans-serif;
    font-size: 36px;
    font-weight: normal;
}

Sugeriría intentar intercambiar su apropiado .estilo funcionar de la siguiente manera:

.style("font-family", "wf_standard-font, helvetica, arial, sans-serif")

Tuve problemas para que algunas fuentes se representaran según otras imágenes: Segoe (negrita) es un ejemplo, pero este parece funcionar.

Aquí hay un visual personalizado producido rápidamente con su código (intercambiado con el cambio sugerido para Familia tipográfica), en comparación con una tarjeta visual:

imagen.png

Con suerte, esto debería ser todo lo que necesitas.

¡Buena suerte!

Daniel

inserv

En respuesta a dm-p

Hola Daniel,
Muchas gracias por su tiempo y ayuda.

Con la configuración de familia de fuentes sugerida, la fuente está más cerca de coincidir con la tarjeta visual integrada.
Todavía hay una diferencia en el tamaño.
A continuación se muestra la comparación de fuentes.

TamañoDIN.png

El lado izquierdo muestra una fuente visual personalizada con la familia de fuentes configurada como «wf_standard-font, helvetica, arial, sans-serif»
y tamaño establecido como 26px. El lado derecho muestra el tamaño de fuente visual personalizado establecido en 26 puntos y el color de relleno como #000000 para ambos.

Con la tarjeta integrada se utilizan los siguientes ajustes.
Título de la tarjeta establecido como «Ventas hasta la fecha»:
Familia de fuentes: DIN
Color de fuente: Negro (#000000)
Color de fondo: Sin relleno
Tamaño del texto: 26 puntos

Como la solución está funcionando de su parte, estamos verificando nuestro código visual personalizado para ver cualquier otra configuración que cause este problema.

En caso de que tenga alguna otra sugerencia, por favor háganoslo saber.

Gracias. Agradezco su ayuda y tiempo.

En respuesta a inserv

Hola,

Si su visual funciona en modo Sandbox, la fuente DIN no se aplicará, por lo que se aplicará la siguiente fuente de la secuencia de la familia de fuentes.

La fuente DIN es una fuente no pública y se define fuera de la zona de pruebas, por lo tanto, solo funciona para imágenes principales y sin iframe.

Saludos cordiales,

evgenii elkin,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com

inserv

En respuesta a v-evelk

Hola Evgenii Elkin,
Gracias por su respuesta, tiempo y ayuda.
Perdón por la demora en nuestra respuesta.

Algunas de nuestras imágenes están disponibles en la tienda de aplicaciones. Tenemos DIN como valor para la fuente DIN.
Estamos tratando de probar la sugerencia de Daniel.

Agradezco si puede compartir sus pensamientos sobre el seguimiento.
(Disculpas en caso de que las preguntas estén fuera de tu alcance).

1. Sería útil conocer el nombre/valor (Nombre y valor especificados en capacidades.json) para todas las fuentes admitidas por PBI.
En caso de que tenga la lista, ¿puede compartirla?
Además, si la lista incluye fuentes no públicas, las excluiremos de nuestras imágenes personalizadas por el momento.

2. ¿Sabe cómo se especifica el tamaño de la fuente, px o pt, en las imágenes de PBI?
Creo que se notó un error en el tamaño de fuente y se estaba solucionando.
Enlace de referencia relacionado:
https://community.powerbi.com/t5/Issues/Font-size-not-consistent-across-visuals/idi-p/581490

Agradezco su ayuda y tiempo.
Gracias.

En respuesta a inserv

Hola,

1. La última API admite la definición estándar de la lista de fuentes

Familia de fuentes.PNG

Sin embargo, agregará todas las fuentes posibles para Power BI (incluidas las que no funcionan en la zona de pruebas).

Sin embargo, la lista de fuentes se puede definir manualmente como cualquier enumeración en capacidades.json

Desafortunadamente, no estoy familiarizado con todas las fuentes que no funcionan en sandbox, solo DIN, pero puede haber un par de otras.

Honestamente, no recomiendo definirlas manualmente porque he discutido esta pregunta con las personas a cargo de esta pregunta y existe la posibilidad de que estas fuentes sean compatibles con sandbox en el futuro.

Además, las imágenes pueden funcionar en diferentes modos, por lo que es mejor dejar estas fuentes como están.

2. El tamaño de la fuente se define en ‘pt’ (si se describe correctamente en las capacidades.json)

Tamaño de fuente.PNG

Sin embargo, dentro de la imagen puede transformarse en ‘px’ por el código (si el desarrollador lo decide, pero el tamaño original se almacena en ‘pt’ de todos modos)

ptConverter.PNG

Saludos cordiales,

evgenii elkin,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com

inserv

En respuesta a v-evelk

Hola Evgenii Elkin,

Muchas gracias por responder y proporcionar detalles.

Intentaremos actualizar nuestro visual a la última versión.

Agradezco su ayuda y tiempo.

Gracias.

dm-p

En respuesta a inserv

Hola @inserv,

Aquí está el código que usé: solo tomé el tuyo y agregué el estilo al inspeccionar el elemento en el navegador según mi captura de pantalla anterior, aunque modifiqué la fuente según el valor en el panel de propiedades:

this.eleDinTest
    .text("Test DIN")
    .style("font-size", "27pt") // or .style("font-size", 20 + "px")
    .style("font-family", "wf_standard-font, helvetica, arial, sans-serif")
    .style("font-weight", "normal")
    .style("fill", "rgb(51, 51, 51)");

Dos cosas adicionales que podrían ayudar:

  • Tenga en cuenta que normal por peso de fuente es una ‘n’ minúscula. Su ejemplo usa mayúsculas, que CSS ignorará.
  • Si está utilizando ‘pt’ frente a ‘px’ al comparar, su unidad de medida CSS tendrá una diferencia. Si está utilizando una propiedad visual como referencia, todas las principales usan ‘pt’ ahora, por lo que le sugiero que reemplace su código para que coincida con eso.

Espero que sea eso. Si no es así, siéntete libre de publicar tu código actualizado y lo buscaré de nuevo.

Salud,

Daniel

inserv

En respuesta a dm-p

Hola Daniel,
Muchas gracias por la respuesta rápida.
Perdón por la demora en nuestra respuesta.

Probamos con un nuevo proyecto de pbiviz. El problema aún persiste.
Para mantenerlo simple, cambiamos el código en constructor() como se indica y eliminamos el código de update().

El tamaño fijo renderizado no coincide Tarjeta PBI visual.

***Código****
constructor(opciones: VisualConstructorOptions) {
este.objetivo = opciones.elemento;
if (tipo de documento !== «indefinido») {
const new_p: HTMLElement = document.createElement(«p»);
new_p.appendChild(document.createTextNode(«Ventas YTD»));
new_p.style.fontSize = «26px»;
new_p.style.fontFamily = «wf_standard-font, helvetica, arial, sans-serif»;
new_p.style.fill = «#000000»;
new_p.style.fontWeight = «normal»;
este.objetivo.appendChild(nuevo_p);
}
}
actualización pública (opciones: VisualUpdateOptions) {

}

**********

Como siempre, agradezco su ayuda y tiempo.
Gracias.

inserv

En respuesta a inserv

Hola Daniel,

Gracias por toda su ayuda y tiempo.

Intentaremos actualizar nuestras imágenes a la última versión de la API.

Intentaremos su sugerencia hasta que actualicemos.

Gracias y un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *