Class ODSChartsTheme

cssThemeName

name

options

theme

externalizeLegends

• externalizeLegends(
      echart: any,
      legendHolderSelector:
          | string
          | ODSChartsLegendHolderDefinition
          | ODSChartsLegendHolderDefinition[],
  ): 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

  • echart: any

    the initialized eCharts object
  • legendHolderSelector: string | ODSChartsLegendHolderDefinition | ODSChartsLegendHolderDefinition[]

    legendHolderSelector can be:

    • a string, and then is interpreted as the CSS selector of the legends container
    • a ODSChartsLegendHolderDefinition if you want to sepcify the orientation of the legends holder or specify the series to be displayed in the legends holder
    • an array of ODSChartsLegendHolderDefinition if you want to group legends in several legends holders

  Returns ODSChartsTheme

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

externalizePopover

• externalizePopover(
      popoverConfig?: ODSChartsPopoverConfig,
      popoverDefinition?: ODSChartsPopoverDefinition,
  ): 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.

  Returns ODSChartsTheme

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

getChartOptions

• getChartOptions(addGlobalThemeOptions?: boolean): any

  getChartOptions() build the eCharts options merging

  • options implementing the Orange Design System ODSChartsThemeOptions
  • optionally options implementing externalizeLegends,
  • optionally options implementing externalizePopover,
  • optionally options implementing manageChartResize,
  • optionally options implementing manageThemeObserver,
  • data from setDataOptions

  Parameters

  • addGlobalThemeOptions: boolean = false

    indicates if the specificities of the global theme used in the chart init method must be added in the options of the chart

  Returns any

  the Apache ECharts options to use in Apache Echarts setOption() call.

manageChartResize

• manageChartResize(echart: any, chartId: string): 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.

  Returns ODSChartsTheme

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

manageThemeObserver

• manageThemeObserver(echart: any): ODSChartsTheme

  manageThemeObserver() is used to enable auto-switch between dark and light mode. It observe the closest element with a data-bs-theme indicator to adapt the graph colour to the new theme.

  Parameters

  • echart: any

    the initialized eCharts object

  Returns ODSChartsTheme

  returns back the theme manager object

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],
            },
          ],
        })
  Copy

  Parameters

  • options: any

    the Apache Echarts data options of your graph.

  Returns ODSChartsTheme

  the theme manager object

StaticgetThemeManager

• getThemeManager(options?: ODSChartsThemeOptions): ODSChartsTheme

  Entry point of the library.

  Once the library integrated, via

  • script <script src="...ods-charts.js">
  • or an import \* as ODSCharts from 'ods-charts'

  use ODSCharts.getThemeManager(ODSChartsThemeOptions) to get the ODSChartsTheme.

  It returns the generated theme manager.

  Parameters

  • Optionaloptions: ODSChartsThemeOptions

    options used to generate the theme.

    • ODSChartsThemeOptions.colors: colors to be used to graph the chart.
    • ODSChartsThemeOptions.cssTheme: optionaly indicates a external theme to be used like boosted.
    • ODSChartsThemeOptions.lineStyle: style of line in lineCharts.
    • ODSChartsThemeOptions.mode: fixes the light or dark mode.

  Returns ODSChartsTheme

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

  • ODSChartsTheme.externalizeLegends: to add Orange Design System theme to legends.
  • ODSChartsTheme.externalizePopover: to add Orange Design System theme to popover or tooltip.
  • ODSChartsTheme.manageChartResize`: to dynamically adapt graph size the its container.