Class ODSChartsTheme

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

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 chart container 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());

See ODSChartsTheme.getThemeManager for details.

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: any,
        legendHolderSelector:
            | string
            | ODSChartsLegendHolderDefinition
            | ODSChartsLegendHolderDefinition[],
        dataOptions?: any,
    ): 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.

    Parameters

    Returns ODSChartsTheme

    the theme manager object itself to be able to chain calls.

externalizePopover

  • externalizePopover(
        popoverConfig?: ODSChartsPopoverConfig,
        popoverDefinition?: ODSChartsPopoverDefinition,
        dataOptions?: any,
    ): ODSChartsTheme

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

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

    Parameters

    • popoverConfig: ODSChartsPopoverConfig = {}

      the configuration of the externalizePopover feature ODSChartsPopoverConfig

    • OptionalpopoverDefinition: ODSChartsPopoverDefinition

      renderer ODSChartsPopoverDefinition of the popover/tooltip. ODSChartsPopoverManagers is used to specify preconfigured renderer for Apache ECharts, Boosted 5 or Boosted 4.

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

      WARNING: Boosted 4 or Boosted 5 rendering requires dependency on the boosted library and access to the boosted global variable.

    • OptionaldataOptions: any

      optionally you can use this call to set dataOptions, if not already set.

    Returns ODSChartsTheme

    the theme manager object itself to be able to chain calls.

getChartOptions

getThemeOptions

  • getThemeOptions(dataOptions?: any): 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

      optionally you can use this call to set dataOptions, if not already set.

    Returns any

    modifications to be made to the Apache Echarts data options to implement the Orange Design System.

manageChartResize

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

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

    Parameters

    • echart: any

      the initialized eCharts object.

    • chartId: string

      an unique id that identify the chart container in the DOM.

    • OptionaldataOptions: any

      optionally you can use this call to set dataOptions, if not already set.

    Returns ODSChartsTheme

    the theme manager object itself to be able to chain calls.

setDataOptions

  • setDataOptions(options: any): ODSChartsTheme

  • Set the original Apache Echarts data options of your graph.

    Example:

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

    Parameters

    Returns ODSChartsTheme

    the theme manager object

StaticgetThemeManager

Settings

Member Visibility

On This Page

Properties
Methods