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

cssThemeName name options theme

Methods

externalizeLegends externalizePopover getChartOptions getThemeOptions manageChartResize setDataOptions getThemeManager

Properties

cssThemeName

cssThemeName: ODSChartsCSSThemesNames

name

name: string

options

options: ODSChartsThemeOptions

theme

theme: EChartsProject

Methods

externalizeLegends

  • externalizeLegends(echart, legendHolderSelector, dataOptions?): ODSChartsTheme

  • 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:

    • echart: the initialized eCharts object
    • legendHolderSelector: the CSS selector of the legends container

    optionally you can use this call to set dataOptions

    Parameters

    • echart: any
    • legendHolderSelector: string
    • OptionaldataOptions: any

    Returns ODSChartsTheme

    returns back the theme manager object

externalizePopover

  • externalizePopover(popoverConfig?, popoverDefinition?, dataOptions?): ODSChartsTheme

  • 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

  • getChartOptions(dataOptions?): any

  • 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

  • getThemeOptions(dataOptions?): any

  • 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

  • manageChartResize(echart, chartId, dataOptions?): ODSChartsTheme

  • 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

  • setDataOptions(options): ODSChartsTheme

  • 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

StaticgetThemeManager

  • getThemeManager(options?): ODSChartsTheme

  • 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

Settings

Member Visibility

On This Page

Properties
Methods