Hola,
Estoy creando una imagen personalizada como se muestra a continuación,
En la columna de entrada doy algunos números y calcula el porcentaje como Totalsalescost/Input
Pero en la columna de porcentaje, el resultado se refleja solo cuando aumento o disminuyo el tamaño de la tabla creada. ¿Cómo puedo resolver esto para que la columna de porcentaje se refleje tan pronto como ingrese el valor de entrada?
Este es el fragmento que usé
Por favor, ayúdame con esto
Hola, @sheetalshettiga: es mucho más útil si puede pegar su código como texto en lugar de como una captura de pantalla para que sea más fácil copiarlo en mi entorno de desarrollo. 🙂
Parece que está usando d3, por lo que puede consultar la documentación de manejo de eventos para obtener más detalles, pero no hay muchos recursos sobre cómo hacer esto, ya que no es un caso de uso común para d3 (particularmente con TypeScript), entonces He tenido que averiguar algo de eso.
Aquí hay un código de trabajo con un solo elemento de texto y un
elemento que prueba que podemos actualizar el valor una vez que salgamos de la caja (por lo que deberá adaptarse a su código):
Esto se activará una vez que se elimine el elemento, por lo que es posible que deba adaptarse a un tipo de evento diferente, pero tomará el elemento en el que escribió, obtendrá el valor y lo pasará a la función de porcentaje (que acabo de apagar para mostrar el mensaje con el número interpolado; me llevaría demasiado tiempo escribir manualmente su código de función y no tengo su DOM de todos modos, por lo que no funcionaría según lo previsto).
Como referencia, aquí está mi código: acabo de crear una imagen en blanco y trabajé desde allí:
/** Visual.ts */
"use strict";
import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import * as d3 from 'd3';
import { VisualSettings } from "./settings";
export class Visual implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
console.log('Visual update', options);
/** This is just a quick PoC */
const container = d3.select(this.target);
container.selectAll('*').remove();
/** Simple test element to add output to */
const display = container
.append('p')
.attr('id', 'myReplacedValue')
.text('Initial');
/** input with initial value */
const inp = container
.append('input')
.attr('type', 'text')
.attr('value', 0)
/** I'm doing as a fat arrow function so that 'this' is still the visual class */
.on('change', () => {
const
keyEvent: KeyboardEvent = <KeyboardEvent>d3.event,
eventTarget: EventTarget = keyEvent.target,
value = d3.select(<HTMLInputElement>eventTarget).node().value;
this.percent(Number.parseFloat(value));
});
}
private percent(n: number) {
/**
* This is a stub, to prove we can get and use the number from the box
*/
d3.select('#myReplacedValue')
.text(`The entered percentage was ${n}.`);
}
private static parseSettings(dataView: DataView): VisualSettings {
return <VisualSettings>VisualSettings.parse(dataView);
}
/**
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
*/
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}Si necesita más ayuda, esta es más una pregunta de desarrollo web en lugar de imágenes personalizadas específicamente, por lo que puede obtener asistencia disponible más fácilmente (y mejor que la mía) en un foro más amplio más orientado a JavaScript y TypeScript en general, pero yo Espero que esto pueda hacer que te muevas y gracias por la pregunta. No es algo que haya intentado antes. 🙂
¡Buena suerte!
Daniel
Gracias por la respuesta @dm-p
Estoy creando un cuadro de texto como se muestra a continuación, ¿cómo puedo agregar un evento a esto?
Mi tabla se refleja solo cuando la cambio de tamaño.
Hola, @sheetalshettiga: es mucho más útil si puede pegar su código como texto en lugar de como una captura de pantalla para que sea más fácil copiarlo en mi entorno de desarrollo. 🙂
Parece que está usando d3, por lo que puede consultar la documentación de manejo de eventos para obtener más detalles, pero no hay muchos recursos sobre cómo hacer esto, ya que no es un caso de uso común para d3 (particularmente con TypeScript), entonces He tenido que averiguar algo de eso.
Aquí hay un código de trabajo con un solo elemento de texto y un
elemento que prueba que podemos actualizar el valor una vez que salgamos de la caja (por lo que deberá adaptarse a su código):
Esto se activará una vez que se elimine el elemento, por lo que es posible que deba adaptarse a un tipo de evento diferente, pero tomará el elemento en el que escribió, obtendrá el valor y lo pasará a la función de porcentaje (que acabo de apagar para mostrar el mensaje con el número interpolado; me llevaría demasiado tiempo escribir manualmente su código de función y no tengo su DOM de todos modos, por lo que no funcionaría según lo previsto).
Como referencia, aquí está mi código: acabo de crear una imagen en blanco y trabajé desde allí:
/** Visual.ts */
"use strict";
import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import * as d3 from 'd3';
import { VisualSettings } from "./settings";
export class Visual implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
console.log('Visual update', options);
/** This is just a quick PoC */
const container = d3.select(this.target);
container.selectAll('*').remove();
/** Simple test element to add output to */
const display = container
.append('p')
.attr('id', 'myReplacedValue')
.text('Initial');
/** input with initial value */
const inp = container
.append('input')
.attr('type', 'text')
.attr('value', 0)
/** I'm doing as a fat arrow function so that 'this' is still the visual class */
.on('change', () => {
const
keyEvent: KeyboardEvent = <KeyboardEvent>d3.event,
eventTarget: EventTarget = keyEvent.target,
value = d3.select(<HTMLInputElement>eventTarget).node().value;
this.percent(Number.parseFloat(value));
});
}
private percent(n: number) {
/**
* This is a stub, to prove we can get and use the number from the box
*/
d3.select('#myReplacedValue')
.text(`The entered percentage was ${n}.`);
}
private static parseSettings(dataView: DataView): VisualSettings {
return <VisualSettings>VisualSettings.parse(dataView);
}
/**
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
*/
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}Si necesita más ayuda, esta es más una pregunta de desarrollo web en lugar de imágenes personalizadas específicamente, por lo que puede obtener asistencia disponible más fácilmente (y mejor que la mía) en un foro más amplio más orientado a JavaScript y TypeScript en general, pero yo Espero que esto pueda hacer que te muevas y gracias por la pregunta. No es algo que haya intentado antes. 🙂
¡Buena suerte!
Daniel
