Class ODSChartsTheme

ODSChartsTheme is the object get by ODSCharts.getThemeManager(ODSChartsThemeOptions)

This manager is used to

  • get the ODS theme, register it, and use it
// register this theme to echarts
echarts.registerTheme(themeManager.name , themeManager.theme);
// initiate the with the generated theme
var myChart = echarts.init(div, themeManager.name)
  • to build the graph options
// Set the data to be displayed.
themeManager.setDataOptions(<dataOptions>);
// Register the externalization of the legend.
themeManager.externalizeLegends(...);
// Manage window size changed
themeManager.manageChartResize(...);
// Register the externalization of the tooltip/popup
themeManager.externalizePopover(...);
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());

Properties

name: string

Methods

  • externalizeLegends() configure the manager to externalize the legends from the graphs to put it directly in your HTML document.

    The generated legends

    • will implement the Orange Design System
    • will be link with the graph.

    externalizeLegends() needs:

    optionally you can use this call to set dataOptions

    Parameters

    Returns ODSChartsTheme

    returns back the theme manager object

  • externalizePopover() configure the manager to externalize the management of popover or tooltip.

    The generated tooltips or popover will implement the Orange Design System.

    externalizePopover() needs:

    • popoverConfig: the configuration of the externalizePopover feature ODSChartsPopoverConfig

    • popoverDefinition: a renderer ODSChartsPopoverDefinition of the popover/tooltip

      ODSChartsPopoverManagers gives preconfigured renderer

      default value is ODSChartsPopoverManagers.NONE: uses default Apache ECharts template to externalize tooltip/popover HTML element, implementing Orange Design system

    optionally you can use this call to set dataOptions

    Parameters

    Returns ODSChartsTheme

    returns back the theme manager object

  • getChartOptions() build the eCharts options merging

    optionally you can use this call to set dataOptions

    Parameters

    • OptionaldataOptions: any

    Returns any

    the Apache ECharts options

  • getThemeOptions() can be used to get the options that should be added to charts options to implement the Orange Design System.

    getThemeOptions() does not need to be called if you use getChartOptions() as getChartOptions() internally already calls it.

    getThemeOptions() needs graph data, already set or given in the dataOptions parameter

    Parameters

    • OptionaldataOptions: any

    Returns any

    returns back the theme manager object

  • manageChartResize() ensures that the graph resizes correctly when the window is resized

    manageChartResize() needs:

    • echart: the initialized eCharts object
    • chartId: an unique id to identify the chart

    optionally you can use this call to set dataOptions

    Parameters

    • echart: any
    • chartId: string
    • OptionaldataOptions: any

    Returns ODSChartsTheme

    returns back the theme manager object

  • setDataOptions is used to set the graph data.

    Example:

        lineChartODSTheme
    .setDataOptions({
    xAxis: {
    data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks'],
    },
    series: [
    {
    name: 'sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    },
    ],
    })

    Parameters

    • options: any

    Returns ODSChartsTheme

    returns back the theme manager object

  • Entry point of the library. It returns the generated theme manager.

    This manager is used to retrieve the Apache ECharts theme and manage the chart options in accordance with the Orange Design System.

    The method takes the theme configuration as a parameter ODSChartsThemeOptions.

    Parameters

    Returns ODSChartsTheme

    the theme manager