Kurz: Vytvorenie vizuálu služby Power BI pomocou knižnice React
Ako vývojár môžete vytvárať vlastné vizuály služby Power BI. Tieto vizuály môžete používať vy, vaša organizácia alebo tretie strany.
V tomto kurze vytvoríte vizuál služby Power BI pomocou knižnice React. Vizuál zobrazuje formátovanú hodnotu mierky vnútri kruhu. Vizuál má adaptívnu veľkosť a umožňuje prispôsobiť jeho nastavenia.
V tomto kurze sa naučíte:
- Vytvorte vývojový projekt svojho vizuálu.
- Vyvíjajte vizuál pomocou knižnice React.
- Nakonfigurujte svoj vizuál na spracovanie údajov.
- Nakonfigurujte vizuál tak, aby sa prispôsobil zmenám veľkosti.
- Nakonfigurujte nastavenia adaptívnej farby a orámovania pre svoj vizuál.
Poznámka
Úplný zdrojový kód tohto vizuálu nájdete v téme Vizuál kruhovej karty react v službe Power BI.
Požiadavky
Skôr než začnete vyvíjať vizuál služby Power BI, overte, či máte všetko, čo je uvedené v tejto časti.
Konto Power BI Pro alebo Premium na používateľa . Ak ho nemáte, zaregistrujte si bezplatnú skúšobnú verziu.
Visual Studio Code (VS Code). VS Code je ideálne integrované vývojové prostredie (IDE) na vývoj aplikácií v jazykoch JavaScript a TypeScript.
Prostredie Windows PowerShell verzie 4 alebo novšej (pre Windows). Alebo Terminal (pre OSX).
Prostredie na vývoj vizuálu služby Power BI. Nastavenie prostredia na vývoj vizuálu služby Power BI.
V tomto kurze sa používa zostava US Sales Analysis (Analýza predaja v USA). Stiahnite si túto zostavu a nahrajte ju do služba Power BI alebo môžete použiť vlastnú zostavu. Ak potrebujete ďalšie informácie o služba Power BI a nahrávaní súborov, pozrite si kurz Začíname tvoriť v téme služba Power BI.
Vytvorenie vývojového projektu
V tejto časti vytvoríte projekt pre vizuál kruhovej karty knižnice React.
Otvorte prostredie PowerShell a prejdite do priečinka, vom si chcete projekt vytvoriť.
Zadajte nasledujúci príkaz:
pbiviz new ReactCircleCard
Prejdite do priečinka projektu.
cd ReactCircleCard
Spustite vizuál kruhovej karty knižnice React. Vizuál je teraz spustený a hosťovaný vo vašom počítači.
pbiviz start
Dôležité
Ak chcete zastaviť spúšťanie vizuálu, v prostredí PowerShell zadajte kláves Ctrl+C, po zobrazení výzvy na ukončenie dávkovej úlohy stlačte kláves Y a potom enter.
Zobrazte kruhovú kartu knižnice React v služba Power BI
Na otestovanie vizuálu v služba Power BI použijeme zostavu US Sales Analysis (Analýza predaja v USA). Stiahnite si túto zostavu a nahrajte ju do služba Power BI.
Na otestovanie vizuálu môžete použiť aj vlastnú zostavu.
Poznámka
Skôr než budete pokračovať, overte, či ste povolili nastavenia pre vývojára vizuálov.
Prihláste sa do PowerBI.com a otvorte zostavu US Sales Analysis (Analýza predaja v USA).
Vyberte Upraviť.
Kliknutím na tlačidlo Nová stránka v dolnej časti rozhrania služba Power BI vytvorte novú stránku na testovanie.
Na table Vizualizácie vyberte položku Vizuál vývojára.
Tento vizuál predstavuje vlastný vizuál, ktorý ste spustili v počítači. Je k dispozícii len v prípade, že je povolené ladenie vlastných vizuálov.
Overte, či sa na plátno zostavy pridal vizuál.
Toto je jednoduchý vizuál, ktorý zobrazuje počet volaní metódy aktualizácie. V tejto fáze vizuál nenačítava žiadne údaje.
Poznámka
Ak sa vo vizuáli zobrazí chybové hlásenie o pripojení, otvorte vo svojom prehliadači novú kartu, prejdite na
https://localhost:8080/assets
stránku a povoľte prehliadaču používať túto adresu.Keď je vybratý nový vizuál, prejdite na tablu Polia , rozbaľte položku Predaj a vyberte položku Množstvo.
Ak chcete otestovať, ako vizuál reaguje, zmeňte jeho veľkosť a všimnite si, že hodnota Počet aktualizácií sa pri každej veľkosti vizuálu zvýši.
Nastavenie knižnice React v projekte
V tejto časti sa dozviete, ako nastaviť knižnicu React pre svoj projekt vizuálu v službe Power BI.
Otvorte prostredie PowerShell a zastavte spustenie vizuálu stlačením kombinácie klávesov Ctrl + C. Ak sa zobrazí výzva na ukončenie dávkovej úlohy, zadajte Y a stlačte kláves Enter.
Inštalácia knižnice React
Ak chcete nainštalovať požadované závislosti knižnice React, otvorte prostredie PowerShell v priečinku ReactCircleCard a spustite nasledujúci príkaz:
npm i react react-dom
Inštalácia definícií typu knižnice React
Ak chcete nainštalovať definície typov pre knižnicu React, otvorte prostredie PowerShell vo svojom priečinku reactCircleCard a spustite nasledujúci príkaz:
npm i @types/react @types/react-dom
Vytvorenie triedy súčastí knižnice React
Ak chcete vytvoriť triedu súčastí knižnice React, postupujte podľa týchto krokov.
Otvorte nástroj VS Code a prejdite do priečinka reactCircleCard .
Výberom položky Súbor>Nový súbor vytvorte nový súbor.
Skopírujte do nového súboru nasledujúci kód.
import * as React from "react"; export class ReactCircleCard extends React.Component<{}>{ render(){ return ( <div className="circleCard"> Hello, React! </div> ) } } export default ReactCircleCard;
Vyberte položku Uložiť ako a prejdite do priečinka src .
Uložte súbor takto:
- Do poľa Názov súboru zadajte komponent.
- V rozbaľovacej ponuke Uložiť ako typ vyberte položku TypeScript React.
Pridanie knižnice React do súboru vizuálu
Nahraďte kód v súbore visual.ts kódom, ktorý umožňuje používať knižnicu React.
V priečinku src otvorte visual.ts a nahraďte kód v súbore nasledujúcim kódom:
"use strict"; import powerbi from "powerbi-visuals-api"; import DataView = powerbi.DataView; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; // Import React dependencies and the added component import * as React from "react"; import * as ReactDOM from "react-dom"; import ReactCircleCard from "./component"; import "./../style/visual.less"; export class Visual implements IVisual { constructor(options: VisualConstructorOptions) { } public update(options: VisualUpdateOptions) { } }
Poznámka
Keďže predvolené nastavenia Power BI TypeScript nerozpoznávajú súbory knižnice React vo formáte tsx , nástroj VS Code zvýrazní
component
ako chybu.Ak chcete súčasť vykresliť, pridajte cieľový prvok HTML do súboru visual.ts. Ide o prvok
HTMLElement
vVisualConstructorOptions
časti , ktorý prechádza do konštruktora.V priečinku src otvorte súbor visual.ts.
Do triedy pridajte
Visual
nasledujúci kód:
private target: HTMLElement; private reactRoot: React.ComponentElement<any, any>;
- Do konštruktora pridajte
VisualConstructorOptions
nasledujúce riadky:
this.reactRoot = React.createElement(ReactCircleCard, {}); this.target = options.element; ReactDOM.render(this.reactRoot, this.target);
Súbor visual.ts by mal teraz vyzerať takto:
"use strict"; import powerbi from "powerbi-visuals-api"; import DataView = powerbi.DataView; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import * as React from "react"; import * as ReactDOM from "react-dom"; import ReactCircleCard from "./component"; import "./../style/visual.less"; export class Visual implements IVisual { private target: HTMLElement; private reactRoot: React.ComponentElement<any, any>; constructor(options: VisualConstructorOptions) { this.reactRoot = React.createElement(ReactCircleCard, {}); this.target = options.element; ReactDOM.render(this.reactRoot, this.target); } public update(options: VisualUpdateOptions) { } }
Uložte súbor visual.ts.
Úprava súboru tsconfig
Upravte parameter tsconfig.json tak, aby fungoval s knižnicou React.
V priečinku reactCircleCard otvorte súbor tsconfig.json a pridajte dva riadky na začiatok
compilerOptions
položky."jsx": "react", "types": ["react", "react-dom"],
Súbor tsconfig.json by mal teraz vyzerať takto a chyba v súbore
component
visual.ts by mala byť odstránená.{ "compilerOptions": { "jsx": "react", "types": ["react", "react-dom"], "allowJs": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es6", "sourceMap": true, "outDir": "./.tmp/build/", "moduleResolution": "node", "declaration": true, "lib": [ "es2015", "dom" ] }, "files": [ "./src/visual.ts" ] }
Uložte tsconfig.json.
Otestovanie vizuálu
Otvorte prostredie PowerShell v priečinku CircleCardVisual a spustite projekt:
pbiviz start
Keď do zostavy v služba Power BI pridáte nový vizuál vývojára, bude vyzerať takto:
Konfigurácia údajového poľa vizuálu
Nakonfigurujte súbor možností vizuálu tak, aby bolo možné odoslať do údajového poľa vizuálu Measure iba jedno údajové pole.
V nástroji VS Code otvorte z priečinka reactCircleCard súbor capabilities.json.
Zobrazí
ReactCircleCard
jednu hodnotu .Measure Data
Category Data
Odstráňte objekt z častidataRoles
.Po odstránení
Category Data
objektudataRoles
bude kľúč vyzerať takto:"dataRoles": [ { "displayName": "Measure Data", "name": "measure", "kind": "Measure" } ],
Odstráňte všetok obsah kľúča
objects
(vyplníte ho neskôr).Po odstránení jeho obsahu
objects
bude kľúč vyzerať takto:"objects": {},
dataViewMappings
Nahraďte vlastnosť nasledujúcim kódom.max: 1
inmeasure
určuje, že do údajového poľa Mierka vizuálu možno odoslať iba jedno údajové pole."dataViewMappings": [ { "conditions": [ { "measure": { "max": 1 } } ], "single": { "role": "measure" } } ]
Uložte zmeny, ktoré ste vykonali v súbore capabilities.json.
Overte, či
pbiviz start
je aplikácia spustená a v služba Power BI, obnovte vizuál Kruhová karta knižnice React. Údajové pole Mierka môže prijať iba jedno údajové pole, ako je to uvedené v .max: 1
Aktualizácia štýlu vizuálu
V tejto časti zmeníte tvar vizuálu na kruh. Štýl vizuálu môžete ovládať použitím súboru visual.less .
V priečinku style otvorte súbor visual.less.
Nahraďte obsah súboru visual.less nasledujúcim kódom.
.circleCard { position: relative; box-sizing: border-box; border: 1px solid #000; border-radius: 50%; width: 200px; height: 200px; } p { text-align: center; line-height: 30px; font-size: 20px; font-weight: bold; position: relative; top: -30px; margin: 50% 0 0 0; }
Uložiť súbor visual.less.
Nastavenie vizuálu na prijímanie vlastností zo služby Power BI
V tejto časti nakonfigurujete vizuál na prijímanie údajov zo služby Power BI a odosielanie aktualizácií inštancií v súbore component.tsx .
Vykreslenie údajov pomocou knižnice React
Údaje môžete vykresliť pomocou knižnice React. Súčasť môže zobraziť údaje z vlastného stavu.
V nástroji VS Code otvorte z priečinka reactCircleCard súbor component.tsx.
Nahraďte obsah súboru component.tsx nasledujúcim kódom.
import * as React from "react"; export interface State { textLabel: string, textValue: string } export const initialState: State = { textLabel: "", textValue: "" } export class ReactCircleCard extends React.Component<{}, State>{ constructor(props: any){ super(props); this.state = initialState; } render(){ const { textLabel, textValue } = this.state; return ( <div className="circleCard"> <p> {textLabel} <br/> <em>{textValue}</em> </p> </div> ) } }
Uložte component.tsx.
Nastavenie vizuálu na prijímanie údajov
Vizuály prijímajú údaje ako argument update
metódy . V tejto časti aktualizujete túto metódu na prijímanie údajov.
Nasledujúci kód vyberie textLabel
položky a textValue
z DataView
časti . Ak existujú údaje, aktualizuje stav súčasti.
V nástroji VS Code otvorte z priečinkasrc súbor visual.ts.
Nahraďte riadok
import ReactCircleCard from "./component";
nasledujúcim kódom:import { ReactCircleCard, initialState } from "./component";
Do metódy pridajte
update
nasledujúci kód.if(options.dataViews && options.dataViews[0]){ const dataView: DataView = options.dataViews[0]; ReactCircleCard.update({ textLabel: dataView.metadata.columns[0].displayName, textValue: dataView.single.value.toString() }); } else { this.clear(); }
Vytvorte metódu
clear
pridaním nasledujúceho kódu pod metóduupdate
.private clear() { ReactCircleCard.update(initialState); }
Uloženie súbor visual.ts
Nastavenie vizuálu na odosielanie údajov
V tejto časti aktualizujete vizuál tak, aby odosielal aktualizácie inštancií v súbore súčasti .
V nástroji VS Code otvorte z priečinka src súbor component.tsx.
Do triedy pridajte
ReactCircleCard
nasledujúci kód:private static updateCallback: (data: object) => void = null; public static update(newState: State) { if(typeof ReactCircleCard.updateCallback === 'function'){ ReactCircleCard.updateCallback(newState); } } public state: State = initialState; public componentWillMount() { ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); }; } public componentWillUnmount() { ReactCircleCard.updateCallback = null; }
Uložte component.tsx.
Zobrazenie zmien vo vizuáli
Otestujte vizuál Circle Card knižnice React a zobrazte si vykonané zmeny.
Overte, či
pbiviz start
je spustený, a v služba Power BI obnovte vizuál Kruhová karta knižnice React.Pridajte položku Predaj do údajového poľa Mierka vizuálu.
Zmena prispôsobenia vizuálu
V súčasnosti má vizuál pevnú šírku a výšku. Na zmenu veľkosť vizuálu je potrebné definovať size
premennú v súboroch visual.ts aj component.tsx. V tejto časti zmeníte veľkosť vizuálu na možnosť .
Po dokončení krokov uvedených v tejto časti bude priemer kruhu vo vizuáli zodpovedať minimálnej šírke alebo veľkosti výšky a budete môcť zmeniť jeho veľkosť v služba Power BI.
Konfigurácia súboru visual.ts
Aktuálnu veľkosť zobrazenia vizuálu options
získate z objektu .
V nástroji VS Code otvorte z priečinkasrc súbor visual.ts.
Vložte tento kód na import
IViewport
rozhrania.import IViewport = powerbi.IViewport;
viewport
Pridajte vlastnosť dovisual
triedy .private viewport: IViewport;
V metóde
update
predReactCircleCard.update
pridajte nasledujúci kód.this.viewport = options.viewport; const { width, height } = this.viewport; const size = Math.min(width, height);
V metóde
update
pridajte doReactCircleCard.update
poľasize
.size,
Uložte súbor visual.ts.
Konfigurácia súboru component.tsx
V nástroji VS Code otvorte z priečinka src súbor component.tsx.
Do časti pridajte nasledujúci kód.
export interface State
size: number
Do časti pridajte nasledujúci kód.
export const initialState: State
size: 200
V metóde
render
vykonajte nasledujúce zmeny kódu:Pridajte
size
do .const { textLabel, textValue, size } = this.state;
Toto vyhlásenie by teraz malo vyzerať takto:const { textLabel, textValue, size } = this.state;
Pridajte nasledujúci kód nad .
return
const style: React.CSSProperties = { width: size, height: size };
Nahraďte prvý vrátený riadok
<div className="circleCard">
nasledujúcim riadkom:<div className="circleCard" style={style}>
Uložte component.tsx.
Konfigurácia súboru vizuálu
V nástroji VS Code otvorte v priečinku style súbor visual.less.
V
.circleCard
parametri nahraďtewidth
reťazce aheight
znakmimin-width
amin-height
.min-width: 200px; min-height: 200px;
Uložiť súbor visual.less.
Prispôsobenie vizuálu služby Power BI
V tejto časti pridáte možnosť prispôsobiť vizuál a umožníte používateľom vykonať zmeny v jeho farbe a hrúbke orámovania.
Pridanie farby a hrúbky do súboru možností
Pridajte hrúbku farby a orámovania do object
vlastnosti capabilities.json.
V nástroji VS Code otvorte z priečinka reactCircleCard súbor capabilities.json.
Do vlastnosti pridajte nasledujúce nastavenia
objects
."circle": { "properties": { "circleColor": { "type": { "fill": { "solid": { "color": true } } } }, "circleThickness": { "type": { "numeric": true } } } }
Uložte súbor capabilities.json.
Pridanie triedy nastavení formátovania kruhu do súboru nastavení
Pridajte nastavenia formátovania Circle
do časti settings.ts. Ďalšie informácie o tom, ako vytvoriť nastavenia modelu formátovania, nájdete v téme Pomôcky formátovania.
V nástroji VS Code otvorte v priečinkusrc súbor settings.ts.
Nahraďte kód v časti settings.ts nasledujúcim kódom:
"use strict"; import { formattingSettings } from "powerbi-visuals-utils-formattingmodel"; import FormattingSettingsCard = formattingSettings.SimpleCard; import FormattingSettingsSlice = formattingSettings.Slice; import FormattingSettingsModel = formattingSettings.Model; /** * Circle Formatting Card */ class CircleCardSettings extends FormattingSettingsCard { circleColor = new formattingSettings.ColorPicker({ name: "circleColor", // circle color name should match circle color property name in capabilities.json displayName: "Color", description: "The fill color of the circle.", show: true, value: { value: "white" } }); circleThickness = new formattingSettings.NumUpDown({ name: "circleThickness", // circle thickness name should match circle color property name in capabilities.json displayName: "Thickness", description: "The circle thickness.", show: true, value: 2 }); name: string = "circle"; // circle card name should match circle object name in capabilities.json displayName: string = "Circle"; show: boolean = true; slices: Array<FormattingSettingsSlice> = [this.circleColor, this.circleThickness]; } /** * visual settings model class * */ export class VisualFormattingSettingsModel extends FormattingSettingsModel { // Create formatting settings model circle formatting card circleCard = new CircleCardSettings(); cards = [this.circleCard]; }
Uložte položku settings.ts.
Pridanie metódy na použitie nastavení vizuálu
Pridajte metódu použitú getFormattingModel
na použitie nastavení vizuálu a požadovaných importov do súboru visual.ts .
V nástroji VS Code otvorte z priečinkasrc súbor visual.ts.
Pridajte tieto
import
príkazy na začiatok príkazu visual.ts.import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel"; import { VisualFormattingSettingsModel } from "./settings";
Do vizuálu pridajte nasledujúcu deklaráciu.
private formattingSettings: VisualFormattingSettingsModel; private formattingSettingsService: FormattingSettingsService;
Pridajte metódu do vizuálu
getFormattingModel
.public getFormattingModel(): powerbi.visuals.FormattingModel { return this.formattingSettingsService.buildFormattingModel(this.formattingSettings); }
Visual
Do triedy pridajte na inicializáciu nasledujúci riadokconstructor
kóduformattingSettingsService
this.formattingSettingsService = new FormattingSettingsService();
Visual
V triede pridajte nasledujúci kód naupdate
aktualizáciu nastavení formátovania vizuálu na najnovšie hodnoty vlastností formátovania.Tento kód pridajte do príkazu if po
const size = Math.min(width, height);
.this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]); const circleSettings = this.formattingSettings.circleCard;
Tento kód pridajte do časti
ReactCircleCard.update
po :size
borderWidth: circleSettings.circleThickness.value, background: circleSettings.circleColor.value.value, }
Uložte súbor visual.ts.
Úprava súboru súčasti
Upravte súbor súčasti tak, aby mohol vykresliť zmeny v hrúbke farby a orámovania vizuálu.
V nástroji VS Code otvorte z priečinka src súbor component.tsx.
Pridajte tieto hodnoty do časti
State
:background?: string, borderWidth?: number
V metóde nahraďte
render
nasledujúce riadky kódu:const { textLabel, textValue, size } = this.state;
S:const { textLabel, textValue, size, background, borderWidth } = this.state;
const style: React.CSSProperties = { width: size, height: size };
S:const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
Uložte component.tsx.
Skontrolujte svoje zmeny
Experimentujte s hrúbkou farby a orámovania vizuálu, ktoré teraz môžete ovládať.
Overte, či
pbiviz start
je spustený, a v služba Power BI obnovte vizuál Kruhová karta knižnice React.Vyberte kartu Formát a rozbaľte položku Kruh.
Upravte nastavenia Farba a Hrúbka vizuálu a skontrolujte ich vplyv na vizuál.
Súvisiaci obsah
Pripomienky
https://aka.ms/ContentUserFeedback.
Pripravujeme: V priebehu roka 2024 postupne zrušíme službu Problémy v službe GitHub ako mechanizmus pripomienok týkajúcich sa obsahu a nahradíme ju novým systémom pripomienok. Ďalšie informácie nájdete na stránke:Odoslať a zobraziť pripomienky pre