@mwater/visualization 5.0.0

package/lib/richtext/FontSizePaletteItem.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const react_onclickout_1 = __importDefault(require("react-onclickout"));
+// Palette item that allows picking a size from dropdown
+class FontSizePaletteItem extends react_1.default.Component {
+    static defaultProps = { position: "under" };
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false
+        };
+    }
+    handleMouseDown = (ev) => {
+        // Don't lose focus from editor
+        ev.preventDefault();
+        return this.setState({ open: !this.state.open });
+    };
+    renderSize(label, value) {
+        return R("div", {
+            className: "font-size-palette-menu-item",
+            onMouseDown: (ev) => {
+                ev.preventDefault();
+                this.props.onSetSize(value);
+                return this.setState({ open: false });
+            },
+            key: value
+        }, label);
+    }
+    renderSizes() {
+        return R("div", null, this.renderSize("Tiny", "50%"), this.renderSize("Small", "66%"), this.renderSize("Normal", "100%"), this.renderSize("Large", "150%"), this.renderSize("Huge", "200%"));
+    }
+    render() {
+        const popupPosition = {
+            position: "absolute",
+            left: 0,
+            zIndex: 1000,
+            backgroundColor: "white",
+            border: "solid 1px #AAA",
+            borderRadius: 3
+        };
+        if (this.props.position === "under") {
+            popupPosition["top"] = 26;
+        }
+        else {
+            popupPosition["bottom"] = 26;
+        }
+        return R(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) }, R("div", {
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleMouseDown,
+            style: { position: "relative" }
+        }, R("style", null, `\
+.font-size-palette-menu-item {
+color: black;
+background-color: white;
+text-align: left;
+padding: 5px 15px 5px 15px;
+cursor: pointer;
+}
+.font-size-palette-menu-item:hover {
+background-color: #DDD;
+}\
+`), this.state.open ? R("div", { style: popupPosition }, this.renderSizes()) : undefined, R("i", { className: "fa fa-arrows-v" })));
+    }
+}
+exports.default = FontSizePaletteItem;

package/lib/richtext/ItemsHtmlConverter.d.ts

@@ -0,0 +1,31 @@
+export type HtmlItem = string | HtmlItemBase;
+export interface HtmlItemBase {
+    type: string;
+    items?: HtmlItem[];
+}
+export interface HtmlItemElement extends HtmlItemBase {
+    type: "element";
+    tag: string;
+    items?: HtmlItem[];
+    style?: any;
+    href?: string;
+    target?: string;
+}
+/** Converts items (JSON contents of rich text) to HTML and back to allow editing
+ * Items are array of:
+ *  string (html text)
+ *  { type: "element", tag: "h1", items: [nested items] }
+ *  elements can contain style (object), href, target
+ */
+export default class ItemsHtmlConverter {
+    static isBlank: (items: HtmlItem[] | undefined) => boolean;
+    namedStrings: {
+        [key: string]: string;
+    } | undefined;
+    constructor(namedStrings?: {
+        [key: string]: string;
+    });
+    convertItemsToHtml(items: any): string;
+    convertSpecialItemToHtml(item: HtmlItemBase): string;
+    convertElemToItems(elem: HTMLElement): HtmlItem[];
+}

package/lib/richtext/ItemsHtmlConverter.js

@@ -0,0 +1,209 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+/** Converts items (JSON contents of rich text) to HTML and back to allow editing
+ * Items are array of:
+ *  string (html text)
+ *  { type: "element", tag: "h1", items: [nested items] }
+ *  elements can contain style (object), href, target
+ */
+class ItemsHtmlConverter {
+    static isBlank = (items) => {
+        if (!items) {
+            return true;
+        }
+        return lodash_1.default.all(items, (item) => {
+            if (lodash_1.default.isString(item)) {
+                return item.length === 0;
+            }
+            if (lodash_1.default.isObject(item) && item.type === "element") {
+                return ItemsHtmlConverter.isBlank(item.items);
+            }
+            return false;
+        });
+    };
+    namedStrings;
+    // namedStrings: Optional lookup of string name to value. Used for {{branding}} and other replacement strings
+    constructor(namedStrings) {
+        this.namedStrings = namedStrings;
+    }
+    // Converts list of items to html
+    convertItemsToHtml(items) {
+        let html = "";
+        for (let item of items || []) {
+            if (lodash_1.default.isString(item)) {
+                // Replace named strings
+                let itemStr = item;
+                itemStr = itemStr.replace(/\{\{.+?\}\}/g, (match) => {
+                    const name = match.substr(2, match.length - 4);
+                    if (this.namedStrings && this.namedStrings[name] != null) {
+                        return this.namedStrings[name];
+                    }
+                    else {
+                        return match;
+                    }
+                });
+                // Escape HTML
+                html += lodash_1.default.escape(itemStr);
+            }
+            else if (item.type === "element") {
+                if (!allowedTags[item.tag]) {
+                    // Ignore and do contents
+                    html += this.convertItemsToHtml(item.items);
+                    continue;
+                }
+                let attrs = "";
+                // Add style
+                if (item.style) {
+                    attrs += ' style="';
+                    let first = true;
+                    for (let key in item.style) {
+                        const value = item.style[key];
+                        if (!allowedStyles[key]) {
+                            continue;
+                        }
+                        if (!first) {
+                            attrs += " ";
+                        }
+                        attrs += lodash_1.default.escape(key) + ": " + lodash_1.default.escape(value) + ";";
+                        first = false;
+                    }
+                    attrs += '"';
+                }
+                // Add href
+                if (item.href) {
+                    attrs += ' href="' + item.href + '"';
+                }
+                // Add target
+                if (item.target) {
+                    attrs += ' target="' + lodash_1.default.escape(item.target) + '"';
+                }
+                // Special case for self-closing tags
+                if (["br"].includes(item.tag)) {
+                    html += `<${item.tag}${attrs}>`;
+                }
+                else {
+                    html += `<${item.tag}${attrs}>` + this.convertItemsToHtml(item.items) + `</${item.tag}>`;
+                }
+            }
+            else {
+                html += this.convertSpecialItemToHtml(item);
+            }
+        }
+        // If empty, put placeholder
+        if (html.length === 0) {
+            html = "\u2060";
+        }
+        // console.log "createHtml: #{html}"
+        return html;
+    }
+    // Converts an item that is not an element to html. Override in subclass.
+    // To be reversible, should contain data-embed which contains JSON of item
+    convertSpecialItemToHtml(item) {
+        // To be implemented by subclasses
+        return "";
+    }
+    // Converts an HTML DOM element to items
+    convertElemToItems(elem) {
+        // console.log elem.outerHTML
+        // Walk DOM tree, adding strings and expressions
+        let items = [];
+        for (let node of elem.childNodes) {
+            if (node.nodeType === 1) {
+                // Element
+                // Handle embeds
+                var style;
+                if (node.dataset?.embed) {
+                    items.push(JSON.parse(node.dataset.embed));
+                    continue;
+                }
+                let tag = node.tagName.toLowerCase();
+                // Strip namespace
+                if (tag.match(/:/)) {
+                    tag = tag.split(":")[1];
+                }
+                // Whitelist tags
+                if (!allowedTags[tag]) {
+                    // Just add contents
+                    items = items.concat(this.convertElemToItems(node));
+                    continue;
+                }
+                const item = { type: "element", tag, items: this.convertElemToItems(node) };
+                // Add style
+                if (node.style != null) {
+                    for (style of node.style) {
+                        if (!allowedStyles[style]) {
+                            continue;
+                        }
+                        item.style = item.style || {};
+                        item.style[style] = node.style[style];
+                    }
+                }
+                // Convert align (Firefox)
+                if (node.align) {
+                    item.style = item.style || {};
+                    item.style["text-align"] = node.align;
+                }
+                // Add href and target
+                if (node.href) {
+                    // There is a quirk of the href property that it includes the complete url, even if
+                    // it is just an anchor. Use outerHTML to bypass the problem
+                    const hrefMatches = node.outerHTML.match('href="(.*?)"');
+                    const href = hrefMatches?.[1];
+                    if (href) {
+                        item.href = href;
+                    }
+                }
+                if (node.target) {
+                    item.target = node.target;
+                }
+                items.push(item);
+                // Handle text
+            }
+            else if (node.nodeType === 3) {
+                let text = node.nodeValue;
+                // Strip word joiner used to allow editing at end of string
+                text = text.replace(/\u2060/g, "");
+                if (text.length > 0) {
+                    items.push(text);
+                }
+            }
+        }
+        // console.log JSON.stringify(items, null, 2)
+        return items;
+    }
+}
+exports.default = ItemsHtmlConverter;
+// Whitelist allowed tags and styles
+var allowedTags = {
+    div: 1,
+    p: 1,
+    ul: 1,
+    ol: 1,
+    li: 1,
+    span: 1,
+    b: 1,
+    u: 1,
+    em: 1,
+    i: 1,
+    br: 1,
+    h1: 1,
+    h2: 1,
+    h3: 1,
+    h4: 1,
+    h5: 1,
+    a: 1,
+    strong: 1,
+    font: 1
+};
+var allowedStyles = {
+    "text-align": 1,
+    "font-weight": 1,
+    "font-style": 1,
+    "text-decoration": 1,
+    color: 1,
+    "font-size": 1
+};

package/lib/richtext/README.md

@@ -0,0 +1,3 @@
+# Rich text editor
+
+Rich text stored as pseudo-html with embeddable expressions as an option

package/lib/richtext/RichTextComponent.d.ts

@@ -0,0 +1,84 @@
+import React, { ReactNode } from "react";
+import { ContentEditableComponent } from "@mwater/expressions-ui";
+import ItemsHtmlConverter, { HtmlItem } from "./ItemsHtmlConverter";
+export interface RichTextComponentProps {
+    items?: HtmlItem[];
+    onItemsChange: (items: HtmlItem[]) => void;
+    onItemClick?: (item: HtmlItem) => void;
+    /** Optional className of editor wrapper */
+    className?: string;
+    /** Optional style of editor wrapper */
+    style?: any;
+    /** Converter to use for editing */
+    itemsHtmlConverter?: ItemsHtmlConverter;
+    /** True (default) to include heading h1, h2 in palette */
+    includeHeadings?: boolean;
+    /** Extra buttons to put in palette */
+    extraPaletteButtons?: ReactNode;
+}
+export default class RichTextComponent extends React.Component<RichTextComponentProps, {
+    focused: boolean;
+}> {
+    static defaultProps: {
+        includeHeadings: boolean;
+        items: never[];
+        itemsHtmlConverter: ItemsHtmlConverter;
+    };
+    entireComponent: HTMLElement | null;
+    contentEditable: ContentEditableComponent | null;
+    paletteComponent: HTMLElement | null;
+    constructor(props: any);
+    handleClick: (ev: any) => void;
+    pasteHTML(html: any): void;
+    focus(): void;
+    handleInsertExpr: (item: any) => void;
+    handleSetFontSize: (size: any) => any;
+    handleSetFontColor: (color: any) => void;
+    handleChange: (elem: any) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleCommand: (command: any, param: any, ev?: any) => boolean;
+    handleCreateLink: (ev: any) => void;
+    handleEditorClick: (ev: any) => void;
+    createHtml(): string;
+    renderPalette(): React.CElement<{
+        style: {
+            zIndex: number | null;
+        };
+        edges: string;
+        align: string;
+        render: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
+            key: string;
+            className: string;
+            ref: (c: HTMLElement | null) => void;
+        }, HTMLElement>;
+    }, React.Component<{
+        style: {
+            zIndex: number | null;
+        };
+        edges: string;
+        align: string;
+        render: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
+            key: string;
+            className: string;
+            ref: (c: HTMLElement | null) => void;
+        }, HTMLElement>;
+    }, any, any>>;
+    renderPaletteContent: (schemeName: any, { edges }: any) => React.DetailedReactHTMLElement<{
+        key: string;
+        className: string;
+        ref: (c: HTMLElement | null) => void;
+    }, HTMLElement>;
+    refContentEditable: (c: ContentEditableComponent | null) => void;
+    renderHtml(): React.DetailedReactHTMLElement<{
+        key: string;
+        style: any;
+        className: string | undefined;
+    }, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "relative";
+        };
+        ref: (c: HTMLElement | null) => void;
+    }, HTMLElement>;
+}

package/lib/richtext/RichTextComponent.js

@@ -0,0 +1,255 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const ItemsHtmlConverter_1 = __importDefault(require("./ItemsHtmlConverter"));
+const react_float_affixed_1 = __importDefault(require("react-float-affixed"));
+const FontColorPaletteItem_1 = __importDefault(require("./FontColorPaletteItem"));
+const FontSizePaletteItem_1 = __importDefault(require("./FontSizePaletteItem"));
+class RichTextComponent extends react_1.default.Component {
+    static defaultProps = {
+        includeHeadings: true,
+        items: [],
+        itemsHtmlConverter: new ItemsHtmlConverter_1.default(),
+    };
+    entireComponent;
+    contentEditable;
+    paletteComponent;
+    constructor(props) {
+        super(props);
+        this.state = {
+            focused: false,
+        };
+    }
+    handleClick = (ev) => {
+        // If click is in component or in palette component, ignore, otherwise remove focus
+        if (!this.entireComponent.contains(ev.target) &&
+            (!this.paletteComponent || !this.paletteComponent.contains(ev.target))) {
+            return this.setState({ focused: false });
+        }
+    };
+    // Paste HTML in
+    pasteHTML(html) {
+        this.contentEditable.pasteHTML(html);
+    }
+    focus() {
+        this.contentEditable.focus();
+    }
+    handleInsertExpr = (item) => {
+        const html = '<div data-embed="' + lodash_1.default.escape(JSON.stringify(item)) + '"></div>';
+        this.contentEditable.pasteHTML(html);
+    };
+    handleSetFontSize = (size) => {
+        // Requires a selection
+        let html = this.contentEditable.getSelectedHTML();
+        if (!html) {
+            return alert("Please select text first to set size");
+        }
+        // Clear existing font-size styles. This is clearly a hack, but font sizes are absolute in execCommand which
+        // doesn't mix with our various dashboard stylings, so we need to use percentages
+        html = html.replace(/font-size:\s*\d+%;?/g, "");
+        return this.contentEditable.pasteHTML(`<span style=\"font-size:${size}\">` + html + "</span>");
+    };
+    handleSetFontColor = (color) => {
+        // Requires a selection
+        const html = this.contentEditable.getSelectedHTML();
+        if (!html) {
+            return alert("Please select text first to set color");
+        }
+        this.handleCommand("foreColor", color);
+    };
+    handleChange = (elem) => {
+        const items = this.props.itemsHtmlConverter.convertElemToItems(elem);
+        // Check if changed
+        if (!lodash_1.default.isEqual(items, this.props.items)) {
+            this.props.onItemsChange(items);
+        }
+        else {
+            // Re-render as HTML may have been mangled and needs a round-trip
+            this.forceUpdate();
+        }
+    };
+    handleFocus = () => {
+        return this.setState({ focused: true });
+    };
+    handleBlur = () => {
+        return this.setState({ focused: false });
+    };
+    // Perform a command such as bold, underline, etc.
+    handleCommand = (command, param, ev) => {
+        // Don't lose focus
+        ev?.preventDefault();
+        // Use CSS for some commands
+        if (["foreColor"].includes(command)) {
+            document.execCommand("styleWithCSS", null, true);
+            document.execCommand(command, false, param);
+            return document.execCommand("styleWithCSS", null, false);
+        }
+        else {
+            return document.execCommand(command, false, param);
+        }
+    };
+    handleCreateLink = (ev) => {
+        // Don't lose focus
+        ev.preventDefault();
+        // Ask for url
+        const url = window.prompt("Enter URL to link to");
+        if (url) {
+            document.execCommand("createLink", false, url);
+        }
+    };
+    handleEditorClick = (ev) => {
+        // Be sure focused
+        if (!this.state.focused) {
+            this.setState({ focused: true });
+        }
+        if (ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed) {
+            const item = JSON.parse(ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed);
+            if (item != null) {
+                return this.props.onItemClick?.(item);
+            }
+        }
+    };
+    createHtml() {
+        return this.props.itemsHtmlConverter.convertItemsToHtml(this.props.items);
+    }
+    renderPalette() {
+        // Determine current z-index to be able to float above it
+        let zIndex = null;
+        let elem = this.entireComponent;
+        while (elem != null) {
+            const elemZIndex = window.getComputedStyle(elem).zIndex;
+            if (!isNaN(parseInt(elemZIndex))) {
+                zIndex = parseInt(elemZIndex);
+                break;
+            }
+            elem = elem.parentElement;
+        }
+        return R(react_float_affixed_1.default, {
+            style: { zIndex },
+            edges: "over,under,left,right",
+            align: "center",
+            render: this.renderPaletteContent,
+        });
+    }
+    renderPaletteContent = (schemeName, { edges }) => {
+        return R("div", {
+            key: "palette",
+            className: "mwater-visualization-text-palette",
+            ref: (c) => {
+                this.paletteComponent = c;
+            },
+        }, R("div", {
+            key: "bold",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "bold", null),
+        }, R("b", null, "B")), R("div", {
+            key: "italic",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "italic", null),
+        }, R("i", null, "I")), R("div", {
+            key: "underline",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "underline", null),
+        }, R("span", { style: { textDecoration: "underline" } }, "U")), R(FontColorPaletteItem_1.default, {
+            key: "foreColor",
+            onSetColor: this.handleSetFontColor,
+            position: schemeName === "over" ? "under" : "over",
+        }), R(FontSizePaletteItem_1.default, {
+            key: "fontSize",
+            onSetSize: this.handleSetFontSize,
+            position: schemeName === "over" ? "under" : "over",
+        }), R("div", { key: "link", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleCreateLink }, R("i", { className: "fa fa-link" })), R("div", {
+            key: "justifyLeft",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "justifyLeft", null),
+        }, R("i", { className: "fa fa-align-left" })), R("div", {
+            key: "justifyCenter",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "justifyCenter", null),
+        }, R("i", { className: "fa fa-align-center" })), R("div", {
+            key: "justifyRight",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "justifyRight", null),
+        }, R("i", { className: "fa fa-align-right" })), R("div", {
+            key: "justifyFull",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "justifyFull", null),
+        }, R("i", { className: "fa fa-align-justify" })), R("div", {
+            key: "insertUnorderedList",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "insertUnorderedList", null),
+        }, R("i", { className: "fa fa-list-ul" })), R("div", {
+            key: "insertOrderedList",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "insertOrderedList", null),
+        }, R("i", { className: "fa fa-list-ol" })), this.props.includeHeadings
+            ? [
+                R("div", {
+                    key: "h1",
+                    className: "mwater-visualization-text-palette-item",
+                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H1>"),
+                }, R("i", { className: "fa fa-header" })),
+                R("div", {
+                    key: "h2",
+                    className: "mwater-visualization-text-palette-item",
+                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H2>"),
+                }, R("i", { className: "fa fa-header", style: { fontSize: "80%" } })),
+                R("div", {
+                    key: "p",
+                    className: "mwater-visualization-text-palette-item",
+                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<div>"),
+                }, "\u00b6"),
+            ]
+            : undefined, R("div", {
+            key: "removeFormat",
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleCommand.bind(null, "removeFormat", null),
+            style: { paddingLeft: 5, paddingRight: 5 },
+        }, R("img", { src: removeFormatIcon, style: { height: 20 } })), this.props.extraPaletteButtons);
+    };
+    refContentEditable = (c) => {
+        this.contentEditable = c;
+    };
+    renderHtml() {
+        if (this.props.onItemsChange != null) {
+            return R("div", { key: "contents", style: this.props.style, className: this.props.className }, R(expressions_ui_1.ContentEditableComponent, {
+                ref: this.refContentEditable,
+                style: { outline: "none" },
+                html: this.createHtml(),
+                onChange: this.handleChange,
+                onClick: this.handleEditorClick,
+                onFocus: this.handleFocus,
+                onBlur: this.handleBlur,
+            }), this.props.items?.[0] == null
+                ? R("div", {
+                    key: "placeholder",
+                    style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" },
+                }, "Click to Edit")
+                : undefined);
+        }
+        else {
+            return R("div", {
+                key: "contents",
+                style: this.props.style,
+                className: this.props.className,
+                dangerouslySetInnerHTML: { __html: this.createHtml() },
+            });
+        }
+    }
+    render() {
+        return R("div", {
+            style: { position: "relative" },
+            ref: (c) => {
+                this.entireComponent = c;
+            },
+        }, this.renderHtml(), this.state.focused ? this.renderPalette() : undefined);
+    }
+}
+exports.default = RichTextComponent;
+var removeFormatIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAr0lEQVQ4y91U2w3CMAy8VB0kbFA2YYVuABOZbsAmGaFscnzgSlGSBgfCB1g6OXbkkx+yHUn0lgFfkN8hHSt/lma71kxdhIv6Dom/HGicflB97NVTD2ACsPQc1En1zUpqKb+pdEumzaVbSNPSRRFL7iNZQ1BstvApsmODZJXUa8A58W9Ea4nwFWkNa0Sc/Q+F1dyDRD30AO6qJV/wtgxNPR3fOEJXALO+5092/0+P9APt7i9xOIlepwAAAABJRU5ErkJggg==";

package/lib/valueFormatter.d.ts

@@ -0,0 +1,16 @@
+import { LiteralType } from "@mwater/expressions";
+/** Option for list of format options */
+export interface FormatOption {
+    value: string;
+    label: string;
+}
+/** Determine if can format type */
+export declare function canFormatType(type: LiteralType): boolean;
+/** Get available options for formatting a type. Null if not available */
+export declare function getFormatOptions(type: LiteralType): FormatOption[] | null;
+/** Get default format */
+export declare function getDefaultFormat(type: LiteralType): string;
+/** Format a value of a specified type as a string. For historical reasons,
+ * LayeredCharts multiply by 100 before adding the % sign. Set legacyPercentFormat to true to replicate
+ */
+export declare function formatValue(type: LiteralType, value: any, format: string | null | undefined, locale?: string, legacyPercentFormat?: boolean): string;