Lav en brugerdefineret visualisering til Lucky Templates ved hjælp af Deneb

Jeg vil gerne tale om den nye Deneb brugerdefinerede visual, der for nylig blev udgivet til LuckyTemplates. Dette giver en grænseflade til Vega-Lite-sproget, der skal bruges til at skabe en interaktiv brugerdefineret visualisering til LuckyTemplates.

Vega-Lite-sproget er baseret på JSON-syntaks. Det er lettere at implementere og forstå end programmeringssprog på lavere niveau. Derudover har forfatteren Daniel Marsh-Patrick inkluderet et par skabeloner for at fremskynde designprocessen.

Jeg tror, ​​at dette visuelle bliver enormt, da det giver en fuld kodeoplevelse og er ekstremt tilpasselig. Jeg vil gerne benytte lejligheden til at vise et par enkle eksempler på Deneb Vega-Lite-visuals og sammenligne dem med LuckyTemplates-standard-visuals. Du kan se den fulde video af denne tutorial nederst på denne blog.

Indholdsfortegnelse

• Sådan bruges Deneb som en tilpasset visualisering til Lucky Templates
• Generelle punkter at lære om Deneb
• Oprettelse af et søjlediagram med Deneb
• Lav et linjediagram med Deneb
• Lav et områdediagram med Deneb
• Brug af et overlappende søjlediagram med Deneb
• Producerer et ringdiagram med Deneb
• Konklusion

Sådan bruges Deneb som en tilpasset visualisering til Lucky Templates

Deneb er en grænseflade, der gør det muligt at kode et visuelt fuldt ud ved hjælp af JSON-syntaks i henhold til Vega-Lite-sproget. Denne præsentation er ikke tænkt som en introduktion til Vega-Lite sproget, men er snarere et lille udstillingsvindue for, hvordan sproget tillader billeder, der ligner nogle af standarderneog kan tilpasses fuldt ud, så det passer til dit scenarie.

De grundlæggende visuals, der er udviklet i denne præsentation, udnytter nogle af de tilgængelige eksempler på skabeloner i Deneb-grænsefladen. De brugerdefinerede visuals er introduktionseksempler på, hvad der kan opnås med en lille indsats i Vega-Lite gennem trial and error modifikationer af andre eksempler, som nemt kan findes online.

Her er Denebs hjemmeside. Du kan finde noget referencemateriale her .

Der er et galleri på Vega-Lite GitHub-siden, der viser eksempler på ting, der kan oprettes med Vega-Lite.

Her er endnu et eksempel på nogle brugerdefinerede KPI-kort , der kan oprettes med Deneb brugerdefinerede visual.

Generelle punkter at lære om Deneb

Her er nogle af de generelle punkter, jeg har lært om Vega-Lite under mine indledende undersøgelser. Data er bundet til et mærke. Der er adskillige mærker tilgængelige i Vega-Lite, inklusive streg, linje, bue, punkt, tekst og mange andre. Et mærke har kodning. For eksempel har tekstmærket mange tilgængelige kodninger, herunder justering, skrifttype, størrelse, vægt og farve.

Flere mærker kan kombineres for at skabe en sammensat visuel oplevelse, herunder lag (flere mærker, der overlapper hinanden og deler det samme ankerpunkt eller akse), sammenkædning (flere mærker arrangeret vandret eller lodret) eller facet (små multipla tilgængelige i mange power BI visuals, hvor en række lignende plots bruges til at vise delmængder af de samme data, hvilket letter sammenligning på tværs af delmængder).

Oprettelse af et søjlediagram med Deneb

Lad os nu tage et kig på, hvordan en brugerdefineret visual til LuckyTemplates oprettes ved hjælp af skabeloner fra Deneb, og hvordan de sammenlignes med LuckyTemplates standard-visuals.

I dette eksempel har jeg tilføjet et standard LuckyTemplates-søjlediagram for at vise det samlede salg efter kanal i venstre side. Lad os bygge noget lignende ved hjælp af Deneb og Vega-Lite.

Vi tilføjer Deneb visual på højre side.

Det første, vi skal gøre, er at tilføje vores data, så lad os tilføje vores kanaler og samlede salg .

Bare for sjovs skyld, lad os slå Shadow til.

Så vælger vi Rediger .

Vi vælger de enkle søjlediagramskabeloner, der findes i grænsefladen. Til kategorien vælger vi Kanal og for målet Samlet salg .

Når vi klikker på Opret , kan vi se vores Deneb-visuel.

Vi kan se, at der er mange ting, der ligner LuckyTemplates og Deneb. En ting, der ikke ligner lige ud af boksen, er, at vi har dataetiketterne vist på LuckyTemplates visual. For Deneb visual kan disse dataetiketter nemt tilføjes til visual, hvilket vi vil gøre ved at tilføje et andet lag.

Når vi klikker på Rediger fra Deneb-visualen, ser vi et enkelt mærke her.

Jeg tager et kodestykke for at tilføje dataetiketterne og erstatter koden for det enkelte mærke med to mærker.

Når vi kører dette, har vi dataetiketter.

Den anden ting, vi kan gøre, er at formatere disse dataetiketter. Igen har jeg en citatblok her, som jeg kan indsætte i stedet for blot at bruge den blotte kodning til det samlede salg .

Den anden ting, der er rigtig cool ved Deneb og Vega-lite, er, at vi nemt kan ændre et søjlediagram til et søjlediagram. Lad os klikke på Rediger igen. Alt vi skal gøre er at vende X'et og Y'et.

Det er klart, at der er noget arbejde at gøre, og der er behov for justeringer, men jeg ville vise, hvor nemt tingene kan ændres i Vega-Lite.

Lav et linjediagram med Deneb

Dernæst har jeg tilføjet et standard LuckyTemplates-linjediagram, der viser det samlede salg efter dato . Lad os bygge noget lignende ved hjælp af Deneb Vega-lite. Lad os tilføje en Deneb-visual, tilføje vores Dato og Samlet Salg .

Lad os vælge et linjediagram med et intervalbånd, vælge Dato for vores X-akse og vælge Samlet salg for de næste tre værdier.

Her er den resulterende basisvisual for Deneb. Du kan se, at der er mange ligheder mellem de to. Der er nogle få forskelle, såsom at X-aksen vises numerisk i Deneb-visualen.

Der er noget, vi kan gøre for nemt at rette op på det. Lad os bare vende over til Deneb og ændre kodningen for X-datoen til temporal .

Den anden forskel er titlen. Lad os tilføje en titel til Deneb-visualen. Vi redigerer koden endnu en gang, tilføjer titelblokken og formaterer JSON.

Og her er vores titel. Vi har fuld kontrol over titlens skrifttype, størrelse, farve mv.

Lav et områdediagram med Deneb

Lad os også prøve et områdediagram. Jeg har tilføjet et standard LuckyTemplates-områdediagram, der viser Salg efter dato .

Lad os nu bygge noget lignende ved hjælp af Deneb Vega-Lite. Lad os indsætte Deneb-visualen og derefter tilføje dato og kumulativt samlet salg .

Lad os få kodeblokken til et selvstændigt områdediagram og anvende det.

Områdediagrammet nederst er resultatet.

En af de ekstra funktioner ved Vega-Lite er, at du kan bruge børster . Det er det ord, de bruger til at vælge et bestemt interval på dit diagram.

En af de ting, der er virkelig seje, er, at du kan bruge pensler på linkede billeder. Lad os lave en ny Deneb-visuel, tilføje de samme data Of Date og Cumulative Sales . Klik på Rediger på det visuelle billede, og vælg Tom specifikation .

Kopier koden til dobbelte diagrammer, der er forbundet med rektangulær børste. Indsæt derefter og kør koden.

Vi har nu vores primære visual, hvor vi kan bruge en pensel til at vise et udvalgt interval fra det første til vores sekundære visual.

Brug af et overlappende søjlediagram med Deneb

Her er et eksempel på noget, jeg har ledt efter i et stykke tid nu. Dette er et overlappende søjlediagram eller søjlepunktdiagram , der viser et forhold mellem to værdier for samme kategori. Jeg har også lavet denne i Deneb.

Jeg tilføjede noget kode fra Notepad++ for at gøre den overlappende kolonne visuel.

Det, vi har her, er en fire-lags visualisering, der er sammensat af fire lag, der er lagt oven på hinanden: en til den bagerste kolonne, en til den forreste kolonne, en til den bagerste etiket og en til den forreste etiket. Vi kan se, at diagrammet reagerer med de valg, der er foretaget i LuckyTemplates, og justerer i overensstemmelse hermed.

Producerer et ringdiagram med Deneb

En anden ting, som jeg har ledt efter et stykke tid nu, er et ringdiagram, der ligner aktivitetsringene på et Apple-ur. Jeg lavede noget som dette til at bruge Python, men det var ikke så godt, som jeg gerne ville have det.

Jeg prøvede at gøre det samme i Deneb og havde stor succes med det. I denne Deneb visual har vi en ni-lags visualisering, hvor vi har tilføjet separate mål for ringe 1, 2 og 3, værdier for ringe 1, 2 og 3, farver for ringe 1, 2 og 3 og kategorier for ringe 1, 2 og 3.

Lad os lige se på den kode, jeg brugte her. Den bruger et koncept i Vega-Lite kaldet Transform and Params til at udvide de data, der stilles til rådighed for de forskellige mærker. Så har jeg lagt ni mærker oven på hinanden ved hjælp af den samme akse for at lave ringdiagrammet. Dette er fuldt interaktivt med LuckyTemplates værktøjstip.

En anden ting af interesse er, at du kan bruge til at udvikle dine Vega-Lite visuals. Først skal du have en udvidelse for at se Vega-Lite-koden. Jeg bruger i øjeblikket Vega Viewer-udvidelsen .

Så skal du opsætte en tech-fil med udvidelsen vl.json. Bare højreklik på koden for at se et eksempel på Vega Graph .

Da Vega-Lite visual er en fuld kodeoplevelse, finder jeg faktisk Visual Studio Code-miljøet meget nyttigt i min udvikling.

Konklusion

Jeg håber, du finder denne tutorial oplysende, og at den vil få dig til at udforske mulighederne for at bruge Deneb og Vega-Lite til at udvikle visualiseringer ud over, hvad der i øjeblikket er tilgængeligt i LuckyTemplates.

Hvis du kunne lide det tilpassede visuelle indhold til LuckyTemplates-indhold, der er dækket i denne særlige vejledning, så glem ikke at abonnere på LuckyTemplates-tv-kanalen .

Vi har en enorm mængde indhold, der kommer ud hele tiden fra mig selv og en række indholdsskabere, alle dedikeret til at forbedre den måde, du bruger LuckyTemplates og Power Platform på.

Greg