Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Common/utils/viz/ below:

Vue Common - Utils - viz

Gets the current palette's name.

import { DxPaletteTypes } from "devextreme-vue/palette"

The current palette's name.

var paletteName = DevExpress.viz.currentPalette();
// ===== or when using modules =====
import { currentPalette } from 'devextreme/viz/palette';

let paletteName = currentPalette();

import { currentPalette } from 'devextreme/viz/palette';

let paletteName = currentPalette();

import { currentPalette } from 'devextreme/viz/palette';

let paletteName = currentPalette();

import { currentPalette } from 'devextreme/viz/palette';

let paletteName = currentPalette();

Changes the current palette for all data visualization UI components on the page.

import { DxPaletteTypes } from "devextreme-vue/palette"

Gets the current theme's name.

import { DxThemesTypes } from "devextreme-vue/themes"

The current theme's name.

Changes the current theme for all data visualization UI components on the page. The color scheme is defined separately.

import { DxThemesTypes } from "devextreme-vue/themes"

The platform name or "generic".

The color scheme: "light" or "dark".

Changes the current theme for all data visualization UI components on the page.

import { DxThemesTypes } from "devextreme-vue/themes"

Allows you to export UI components using their SVG markup.

import { DxExportTypes } from "devextreme-vue/export"

The SVG markup of the UI components you want to export.

Export properties.

Object structure:

String

The color that fills transparent regions.

String

The name of the file to be saved.

String

The file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
PNG is used if the browser does not support exporting to the specified format.

Number

The SVG block's height in pixels. This field is required.

Number

An empty space to be added around the exported SVG block; measured in pixels.

Function

Allows you to notify a user when exporting completes.

Function

Allows you to request exporting details and prevent exporting.
The parameter contains the following fields:

• fileName - the name of the file to be saved.
• format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
• cancel - when assigned true, prevents exporting.

Function

Allows you to access exported data and/or prevent it from being saved to a file on the user's local storage.
The parameter contains the following fields:

• fileName - the name of the file to be saved.
• format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
• data - exported data as a BLOB.
• cancel - when assigned true, prevents the file from being saved.

Function

A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details.

Number

The SVG block's width in pixels. This field is required.

Exports one or several UI components to PNG.

import { DxExportTypes } from "devextreme-vue/export"

An array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]

Each nested array contains UI component instances that should be in the same row in the exported document.

Exports one or several UI components.

import { DxExportTypes } from "devextreme-vue/export"

An array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]

Each nested array contains UI component instances that should be in the same row in the exported document.

Export properties.

Object structure:

String

The background color.

String

The name of the file to be saved.

ExportFormat

The file's format. PNG is used if the browser cannot export the file in the specified format.

Boolean

If true, UI components are arranged in columns with equal widths (the width of the widest UI component).
If false, UI components are placed next to each other in rows (default).
In any case, each row has the height of the highest UI component in it.

HorizontalAlignment

Horizontally aligns UI components in their columns. Applies only when gridLayout is true.

Number

Margins to be added to each side of the document; measured in pixels.

Function

Allows you to notify a user when the export is completed.

Function

Allows you to request export details and prevent export.
The parameter contains the following fields:

• fileName - the name of the file to be saved.
• format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
• cancel - prevents export when assigned true.

Function

Allows you to access exported data and/or prevent it from being saved to a file in the user's local storage.
The parameter contains the following fields:

• fileName - the name of the file to be saved.
• format - the file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'.
• data - exported data as a BLOB.
• cancel - when assigned true, prevents the file from being saved.

Function

A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details.

VerticalAlignment

Vertically aligns UI components in their rows.

Returns a subset of palette colors.

import { DxPaletteTypes } from "devextreme-vue/palette"

A palette name or an array of colors. See palette for more information.

The number of colors in the resulting subset.

Optional settings.

Object structure:

PaletteColorSet

The color set that provides the colors. The default value is "simpleSet".
See getPalette(paletteName) for more information.

PaletteExtensionMode

The mode in which the palette should be extended when it contains less colors than specified in the count parameter. The default value is "blend".
See paletteExtensionMode for more information.

Colors in hexadecimal format.

The following code generates ten colors from the Material palette's gradient color set:

var colors = DevExpress.viz.generateColors('Material', 10, { baseColorSet: 'gradientSet' });
// ===== or when using modules =====
import { generateColors } from 'devextreme/viz/palette';

let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });

import { generateColors } from 'devextreme/viz/palette';

let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });

import { generateColors } from 'devextreme/viz/palette';

let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });

import { generateColors } from 'devextreme/viz/palette';

let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });

Use the generated colors to paint elements of different UI components in identical colors. For instance, you can assign the same colors to series in two different charts to indicate the visualized information is connected.

Gets the SVG markup of specific UI components for their subsequent export.

import { DxExportTypes } from "devextreme-vue/export"

The UI component instances.

Gets the color sets of a predefined or registered palette.

import { DxPaletteTypes } from "devextreme-vue/palette"

The returned value is an object of the following structure:

{
    // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], 
    // Applies in the CircularGauge and LinearGauge
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], 
    // Applies in the VectorMap and TreeMap with a gradient or range colorizer 
    gradientSet: ['#78b6d9', '#eeba69'] 
}

The built-in palettes are listed in the Appearance Customization topic.

Gets a predefined or registered theme's settings.

import { DxThemesTypes } from "devextreme-vue/themes"

An object that serves as a namespace for the VectorMap UI component.

The method to be called every time the active entry in the browser history is modified without reloading the current page.

import { DxUtilsTypes } from "devextreme-vue/utils"

Each data visualization UI component addresses its inner elements by their URLs. Those URLs break when the active history entry is modified without reloading the current page (see Adding and modifying history entries). As a result, some UI component elements may get mixed up or disappear completely. To fix the URLs, call the refreshPaths() method right after the history entry modification, and in the onpopstate event handler or, if you use a routing library, in its counterpart.

window.history.pushState({ foo: "bar" }, "title", "?foo=bar");
DevExpress.viz.refreshPaths();

window.onpopstate = function(event) {
    DevExpress.viz.refreshPaths();
}

The problem with broken URLs may also emerge if the page uses a path modifying HTML tag; for example, <base> or <iframe>. To resolve it, set the pathModified property of the UI component to true.

Refreshes the current theme and palette in all data visualization UI components on the page.

import { DxThemesTypes } from "devextreme-vue/themes"

Registers a new gradient.

Gradient type: 'linear' or 'radial'.

Gradient's settings.

Object structure:

Array<GradientColor>

An array of gradient colors.

Number

Linear gradient rotation angle.

Call this method to register a gradient ID. Assign the ID to a component's color.fillId field.

const registerGradient = DevExpress.common.charts.registerGradient;

$(() => {
    $('#chart').dxChart({
        // ...
        commonSeriesSettings: {
            color: {
                base: "#f5564a",
                fillId: registerGradient("linear", {
                    colors: [{
                        offset: "20%",
                        color: "#97c95c"
                    }, {
                        offset: "90%",
                        color: "#eb3573"
                    }]
                })
            }
        }
    });
});

<dx-chart ... >
    <dxo-common-series-settings [color]="seriesColor">
    </dxo-common-series-settings>
</dx-chart>

import { registerGradient } from "devextreme/common/charts";

export class AppComponent {
    seriesColor = {
        base: "#f5564a",
        fillId: registerGradient("linear", {
            colors: [{
                offset: "20%",
                color: "#97c95c"
            }, {
                offset: "90%",
                color: "#eb3573"
            }]
        });
    };
}

App.vue (Composition API)

<template>
    <DxChart ... >
        <DxCommonSeriesSettings 
            :color="seriesColor"
        />
    </DxChart>
</template>
<script>
    import DxChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart';
    import { registerGradient } from 'devextreme/common/charts';

    export default {
        components: {
            DxChart,
            DxCommonSeriesSettings
        },
        data() {
            return {
                // ...
                seriesColor: {
                    base: '#f5564a',
                    fillId: registerGradient("linear", {
                        colors: [{
                            offset: "20%",
                            color: "#97c95c"
                        }, {
                            offset: "90%",
                            color: "#eb3573"
                        }]
                    })
                }
            }
        }
    };
</script>

<template>
    <DxChart ... >
        <DxCommonSeriesSettings 
            :color="seriesColor"
        />
    </DxChart>
</template>
<script setup>
    import DxChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart';
    import { registerGradient } from 'devextreme/common/charts';

    // ...

    const seriesColor = {
        base: '#f5564a',
        fillId: registerGradient("linear", {
            colors: [{
                offset: "20%",
                color: "#97c95c"
            }, {
                offset: "90%",
                color: "#eb3573"
            }]
        })
    };
</script>

import Chart, { CommonSeriesSettings } from 'devextreme-react/chart';
import { registerGradient } from 'devextreme/common/charts';

const seriesColor = {
    base: "#f5564a",
    fillId: registerGradient("linear", {
        colors: [{
            offset: "20%",
            color: "#97c95c"
        }, {
            offset: "90%",
            color: "#eb3573"
        }]
    })
};

export default function App() {
    return (
        <Chart ... >
            <CommonSeriesSettings 
                color={seriesColor}
            />
        </Chart>
    );
}

• To correctly export a component with transparent gradient, specify gradient colors in RGBA format.

• Radial and rotated linear gradients may look slightly different when exported.

View Demo

Registers a new palette.

import { DxPaletteTypes } from "devextreme-vue/palette"

The palette's name.

The palette's settings.

The palette settings is an object of the following structure:

{
    // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer
    simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], 
    // Applies in the CircularGauge and LinearGauge
    indicatingSet: ['#90ba58', '#eeba69', '#a37182'], 
    // Applies in the VectorMap and TreeMap with a gradient or range colorizer 
    gradientSet: ['#78b6d9', '#eeba69'] 
}

Registers a new pattern.

Pattern settings.

Object structure:

Call this method to register a pattern ID. Assign the ID to a component's color.fillId field.

The following example demonstrates how to create a stroke pattern. Use a d SVG attribute to draw a path for a pattern.

const registerPattern = DevExpress.common.charts.registerPattern;

$(() => {
    $('#chart').dxChart({
        // ...
        commonSeriesSettings: {
            color: {
                base: "#f5564a",
                fillId: registerPattern({
                    width: 5,
                    height: 5,
                    template: (container) => {
                        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                        path.setAttribute('stroke', '#97c95c');
                        path.setAttribute('stroke-width', 1.5);
                        path.setAttribute('d', `M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5`);
                        container.appendChild(path);
                    },
                })
            }
        }
    });
});

<dx-chart ... >
    <dxo-common-series-settings [color]="seriesColor">
    </dxo-common-series-settings>
</dx-chart>

import { registerPattern } from "devextreme/common/charts";

export class AppComponent {
    seriesColor = {
        base: "#f5564a",
        fillId: registerPattern({
            width: 5,
            height: 5,
            template: (container) => {
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('stroke', '#97c95c');
                path.setAttribute('stroke-width', 1.5);
                path.setAttribute('d', `M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5`);
                container.appendChild(path);
            },
        })
    };
}

App.vue (Composition API)

<template>
    <DxChart ... >
        <DxCommonSeriesSettings 
            :color="seriesColor"
        />
    </DxChart>
</template>
<script>
    import DxChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart';
    import { registerPattern } from 'devextreme/common/charts';

    export default {
        components: {
            DxChart,
            DxCommonSeriesSettings
        },
        data() {
            return {
                // ...
                seriesColor: {
                    base: '#f5564a',
                    fillId: registerPattern({
                        width: 5,
                        height: 5,
                        template: (container) => {
                            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                            path.setAttribute('stroke', '#97c95c');
                            path.setAttribute('stroke-width', 1.5);
                            path.setAttribute('d', `M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5`);
                            container.appendChild(path);
                        },
                    })
                }
            }
        }
    };
</script>

<template>
    <DxChart ... >
        <DxCommonSeriesSettings 
            :color="seriesColor"
        />
    </DxChart>
</template>
<script setup>
    import DxChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart';
    import { registerPattern } from 'devextreme/common/charts';

    // ...

    const seriesColor = {
        base: '#f5564a',
        fillId: registerPattern({
            width: 5,
            height: 5,
            template: (container) => {
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('stroke', '#97c95c');
                path.setAttribute('stroke-width', 1.5);
                path.setAttribute('d', `M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5`);
                container.appendChild(path);
            },
        })
    };
</script>

import Chart, { CommonSeriesSettings } from 'devextreme-react/chart';
import { registerPattern } from 'devextreme/common/charts';

const seriesColor = {
    base: "#f5564a",
    fillId: registerPattern({
        width: 5,
        height: 5,
        template: (container) => {
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('stroke', '#97c95c');
            path.setAttribute('stroke-width', 1.5);
            path.setAttribute('d', `M 2.5 -2.5 L -2.5 2.5 M 0 5 L 5 0 M 7.5 2.5 L 2.5 7.5`);
            container.appendChild(path);
        },
    })
};

export default function App() {
    return (
        <Chart ... >
            <CommonSeriesSettings 
                color={seriesColor}
            />
        </Chart>
    );
}

For the component export to work correctly, the size of a pattern template must be specified in pixels or a CSS-specified measure of size (excluding percent).

View Demo

Registers a new theme based on the existing one.

import { DxThemesTypes } from "devextreme-vue/themes"

The theme's settings.

The base theme's name.

For details on how to customize a theme, refer to the Themes article.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4