Pomôcky pre formátovanie

Článok
11/10/2023

Pomôcky formátovania obsahujú triedy, rozhrania a metódy na formátovanie hodnôt. Obsahuje aj metódy rozšírenia na spracovanie reťazcov a meranie veľkosti textu dokumentu vo formáte SVG/HTML.

Služba merania textu

Modul poskytuje nasledujúce funkcie a rozhrania:

Rozhranie TextProperties

Toto rozhranie popisuje bežné vlastnosti textu.

interface TextProperties {
    text?: string;
    fontFamily: string;
    fontSize: string;
    fontWeight?: string;
    fontStyle?: string;
    fontVariant?: string;
    whiteSpace?: string;
}

measureSvgTextWidth

Táto funkcia meria šírku textu pomocou konkrétnych vlastností textu vo formáte SVG.

function measureSvgTextWidth(textProperties: TextProperties, text?: string): number;

Príklad použitia measureSvgTextWidth:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextWidth(textProperties);

// returns: 194.71875

measureSvgTextRect

Táto funkcia vráti rect s danými vlastnosťami textu vo formáte SVG.

function measureSvgTextRect(textProperties: TextProperties, text?: string): SVGRect;

Príklad použitia measureSvgTextRect:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextRect(textProperties);

// returns: { x: 0, y: -22, width: 194.71875, height: 27 }

measureSvgTextHeight

Táto funkcia meria výšku textu pomocou konkrétnych vlastností textu vo formáte SVG.

function measureSvgTextHeight(textProperties: TextProperties, text?: string): number;

Príklad použitia measureSvgTextHeight:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...


let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.measureSvgTextHeight(textProperties);

// returns: 27

estimateSvgTextBaselineDelta

Táto funkcia vráti východiskovú hodnotu konkrétnych vlastností textu vo formáte SVG.

function estimateSvgTextBaselineDelta(textProperties: TextProperties): number;

Príklad:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.estimateSvgTextBaselineDelta(textProperties);

// returns: 5

estimateSvgTextHeight

Táto funkcia odhadne výšku textu pomocou konkrétnych vlastností textu vo formáte SVG.

function estimateSvgTextHeight(textProperties: TextProperties, tightFightForNumeric?: boolean): number;

Príklad použitia estimateSvgTextHeight:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.estimateSvgTextHeight(textProperties);

// returns: 27

Príklad nájdete v kóde vlastného vizuálu.

measureSvgTextElementWidth

Táto funkcia meria šírku rozhrania svgElement.

function measureSvgTextElementWidth(svgElement: SVGTextElement): number;

Príklad použitia funkcie measureSvgTextElementWidth:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: D3.Selection = d3.select("body").append("svg");

svg.append("text")
    .text("Microsoft PowerBI")
    .attr({
        "x": 25,
        "y": 25
    })
    .style({
        "font-family": "sans-serif",
        "font-size": "24px"
    });

let textElement: D3.Selection = svg.select("text");

textMeasurementService.measureSvgTextElementWidth(textElement.node());

// returns: 194.71875

getMeasurementProperties

Táto funkcia načíta vlastnosti merania textu daného prvku DOM.

function getMeasurementProperties(element: Element): TextProperties;

Príklad použitia getMeasurementProperties:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let element: JQuery = $(document.createElement("div"));

element.text("Microsoft PowerBI");

element.css({
    "width": 500,
    "height": 500,
    "font-family": "sans-serif",
    "font-size": "32em",
    "font-weight": "bold",
    "font-style": "italic",
    "white-space": "nowrap"
});

textMeasurementService.getMeasurementProperties(element.get(0));

/* returns: {
    fontFamily:"sans-serif",
    fontSize: "32em",
    fontStyle: "italic",
    fontVariant: "",
    fontWeight: "bold",
    text: "Microsoft PowerBI",
    whiteSpace: "nowrap"
}*/

getSvgMeasurementProperties

Táto funkcia načíta vlastnosti merania textu daného textového prvku vo formáte SVG.

function getSvgMeasurementProperties(svgElement: SVGTextElement): TextProperties;

Príklad použitia getSvgMeasurementProperties:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: D3.Selection = d3.select("body").append("svg");

let textElement: D3.Selection = svg.append("text")
    .text("Microsoft PowerBI")
    .attr({
        "x": 25,
        "y": 25
    })
    .style({
        "font-family": "sans-serif",
        "font-size": "24px"
    });

textMeasurementService.getSvgMeasurementProperties(textElement.node());

/* returns: {
    "text": "Microsoft PowerBI",
    "fontFamily": "sans-serif",
    "fontSize": "24px",
    "fontWeight": "normal",
    "fontStyle": "normal",
    "fontVariant": "normal",
    "whiteSpace": "nowrap"
}*/

getDivElementWidth

Táto funkcia vráti šírku prvku div.

function getDivElementWidth(element: JQuery): string;

Príklad použitia getDivElementWidth:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
// ...

let svg: Element = d3.select("body")
    .append("div")
    .style({
        "width": "150px",
        "height": "150px"
    })
    .node();

textMeasurementService.getDivElementWidth(svg)

// returns: 150px

getTailoredTextOrDefault

Porovná veľkosť textu označenia s dostupnou veľkosťou a vykreslí tri bodky, keď je dostupná veľkosť menšia.

function getTailoredTextOrDefault(textProperties: TextProperties, maxWidth: number): string;

Príklad použitia getTailoredTextOrDefault:

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import TextProperties = textMeasurementService.TextProperties;
// ...

let textProperties: TextProperties = {
    text: "Microsoft PowerBI!",
    fontFamily: "sans-serif",
    fontSize: "24px"
};

textMeasurementService.getTailoredTextOrDefault(textProperties, 100);

// returns: Micros...

Rozšírenia reťazcov

Modul poskytuje nasledujúce funkcie:

endsWith

Táto funkcia skontroluje, či reťazec končí podreťazecom.

function endsWith(str: string, suffix: string): boolean;

Príklad použitia endsWith:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.endsWith("Power BI", "BI");

// returns: true

equalIgnoreCase

Táto funkcia porovnáva reťazce, pričom ignoruje malé a veľké písmená.

function equalIgnoreCase(a: string, b: string): boolean;

Príklad použitia equalIgnoreCase:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.equalIgnoreCase("Power BI", "power bi");

// returns: true

startsWith

Táto funkcia skontroluje, či reťazec začína podreťazec.

function startsWith(a: string, b: string): boolean;

Príklad použitia startsWith:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.startsWith("Power BI", "Power");

// returns: true

obsahuje

Táto funkcia skontroluje, či reťazec obsahuje zadaný podreťazec.

function contains(source: string, substring: string): boolean;

Príklad spôsobu použitia contains :

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.contains("Microsoft Power BI Visuals", "Power BI");

// returns: true

isNullOrEmpty

Skontroluje, či má reťazec hodnotu null, je nedefinovaný alebo prázdny.

function isNullOrEmpty(value: string): boolean;

isNullOrEmpty Príklad metódy:

import { stringExtensions } from "powerbi-visuals-utils-formattingutils";
// ...

stringExtensions.isNullOrEmpty(null);

// returns: true

Formátovač hodnôt

Modul poskytuje nasledujúce funkcie, rozhrania a triedy:

IValueFormatter

Toto rozhranie opisuje verejné metódy a vlastnosti formátovača.

interface IValueFormatter {
    format(value: any): string;
    displayUnit?: DisplayUnit;
    options?: ValueFormatterOptions;
}

IValueFormatter.format

Táto metóda formátuje zadanú hodnotu.

function format(value: any, format?: string, allowFormatBeautification?: boolean): string;

Príklady:IValueFormatter.format

Formáty tisícov

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1001 });

iValueFormatter.format(5678);

// returns: "5.68K"

Formáty miliónov

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e6 });

iValueFormatter.format(1234567890);

// returns: "1234.57M"

Formáty miliárd

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e9 });

iValueFormatter.format(1234567891236);

// returns: 1234.57bn

Formát bilióna

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 1e12 });

iValueFormatter.format(1234567891236);

// returns: 1.23T

Exponenciálny formát

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ format: "E" });

iValueFormatter.format(1234567891236);

// returns: 1.234568E+012

Selektor jazykovej verzie

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let valueFormatterUK = valueFormatter.create({ cultureSelector: "en-GB" });

valueFormatterUK.format(new Date(2007, 2, 3, 17, 42, 42));

// returns: 03/03/2007 17:42:42

let valueFormatterUSA = valueFormatter.create({ cultureSelector: "en-US" });

valueFormatterUSA.format(new Date(2007, 2, 3, 17, 42, 42));

// returns: 3/3/2007 5:42:42 PM

Formát percent

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ format: "0.00 %;-0.00 %;0.00 %" });

iValueFormatter.format(0.54);

// returns: 54.00 %

Formát dátumov

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let date = new Date(2016, 10, 28, 15, 36, 0),
    iValueFormatter = valueFormatter.create({});

iValueFormatter.format(date);

// returns: 11/28/2016 3:36:00 PM

Booleovský formát

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({});

iValueFormatter.format(true);

// returns: True

Prispôsobená presnosť

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

let iValueFormatter = valueFormatter.create({ value: 0, precision: 3 });

iValueFormatter.format(3.141592653589793);

// returns: 3.142

Príklad nájdete v kóde vlastného vizuálu.

ValueFormatterMožnosti

Toto rozhranie opisuje options funkcie IValueFormatter a možnosti create funkcie .

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
import ValueFormatterOptions = valueFormatter.ValueFormatterOptions;

interface ValueFormatterOptions {
    /** The format string to use. */
    format?: string;
    /** The data value. */
    value?: any;
    /** The data value. */
    value2?: any;
    /** The number of ticks. */
    tickCount?: any;
    /** The display unit system to use */
    displayUnitSystemType?: DisplayUnitSystemType;
    /** True if we are formatting single values in isolation (e.g. card), as opposed to multiple values with a common base (e.g. chart axes) */
    formatSingleValues?: boolean;
    /** True if we want to trim off unnecessary zeroes after the decimal and remove a space before the % symbol */
    allowFormatBeautification?: boolean;
    /** Specifies the maximum number of decimal places to show*/
    precision?: number;
    /** Detect axis precision based on value */
    detectAxisPrecision?: boolean;
    /** Specifies the column type of the data value */
    columnType?: ValueTypeDescriptor;
    /** Specifies the culture */
    cultureSelector?: string;
}

vytvoriť

Táto metóda vytvorí inštanciu funkcie IValueFormatter.

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
import create = valueFormatter.create;

function create(options: ValueFormatterOptions): IValueFormatter;

Príklad použitia funkcie vytvoriť

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

valueFormatter.create({});

// returns: an instance of IValueFormatter.

Formát

Alternatívny spôsob formátovania hodnoty bez vytvorenia IValueFormatter. Užitočné pre prípady s reťazcom dynamických formátov

import { format } from "powerbi-visuals-utils-formattingutils";
import format = valueFormatter.format;

function format(value: any, format?: string, allowFormatBeautification?: boolean, cultureSelector?: string): string;

Príklad použitia formátu

import { valueFormatter } from "powerbi-visuals-utils-formattingutils";

const value = 12
const format = '¥ #,0'
valueFormatter.format(value, format);

// returns: formatted value as string (¥ 12)

Pridanie lokálneho jazyka do vizuálu služby Power BI

Pomôcky pre formátovanie

Služba merania textu

Rozhranie TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Rozšírenia reťazcov

endsWith

equalIgnoreCase

startsWith

obsahuje

isNullOrEmpty

Formátovač hodnôt

IValueFormatter

IValueFormatter.format

Formáty tisícov

Formáty miliónov

Formáty miliárd

Formát bilióna

Exponenciálny formát

Selektor jazykovej verzie

Formát percent

Formát dátumov

Booleovský formát

Prispôsobená presnosť

ValueFormatterMožnosti

vytvoriť

Príklad použitia funkcie vytvoriť

Formát

Príklad použitia formátu

Pripomienky

Pripomienky

Ďalšie zdroje informácií

Pomôcky pre formátovanie

Služba merania textu

Rozhranie TextProperties

measureSvgTextWidth

measureSvgTextRect

measureSvgTextHeight

estimateSvgTextBaselineDelta

estimateSvgTextHeight

measureSvgTextElementWidth

getMeasurementProperties

getSvgMeasurementProperties

getDivElementWidth

getTailoredTextOrDefault

Rozšírenia reťazcov

endsWith

equalIgnoreCase

startsWith

obsahuje

isNullOrEmpty

Formátovač hodnôt

IValueFormatter

IValueFormatter.format

Formáty tisícov

Formáty miliónov

Formáty miliárd

Formát bilióna

Exponenciálny formát

Selektor jazykovej verzie

Formát percent

Formát dátumov

Booleovský formát

Prispôsobená presnosť

ValueFormatterMožnosti

vytvoriť

Príklad použitia funkcie vytvoriť

Formát

Príklad použitia formátu

Súvisiaci obsah

Pripomienky

Pripomienky

Ďalšie zdroje informácií