Class SvgChart

SvgChart class.

var chart = new SvgChart();

Hierarchy

  • SvgChart

Constructors

constructor

Properties

#chartTypeControllers colorPalettes #cssAdded #activeColorPalette width height chartWidth chartHeight svg config #controller unselectedSeries #data #defsElement #drawOnDataGroup serieGroupElement focusedValueForeignObject focusedValueDiv #onLegendClickScoped #onLegendKeypressScoped #onSerieGroupTransitionendScoped #onSerieGroupFocusScoped #onSerieGroupBlurScoped #listenersToRemoveAfterConfigChange

Accessors

controller data

Methods

setActiveColorPalette setConfig chart saveAsPng #addSerieGroup #addLegend #addTitle getSeriePropertyColor getSeriePointColor getSerieStrokeColor getSerieFill addEventListener #onLegendToggle #onLegendKeypress #onLegendClick #onSerieGroupTransitionend #onSerieGroupBlur #onSerieGroupFocus

Constructors

constructor

  • Constructor - create a new chart instance.

    Actions during the constructor:

    • Adding CSS rules (for dynamic styling)
    • Create and add SVG element.
    • Call setConfig.

    Parameters

    • parent: HTMLElement

      Parent DOM node the SVG element will be attached to.

    • config: SvgChartConfig

      Configuration object.

    Returns SvgChart

Properties

Static Private #chartTypeControllers

#chartTypeControllers: {
    ChartType: typeof Controller;
} = ...

Mapper for chart types and chart controllers.

Type declaration

Static colorPalettes

colorPalettes: {
    dutchFieldColorPalette: string[];
    retroMetroColorPalette: string[];
    riverNightsColorPalette: string[];
    springPastelsColorPalette: string[];
} = colors

All embedded color palettes. Set another with setActiveColorPalette.

Type declaration

  • dutchFieldColorPalette: string[]
  • retroMetroColorPalette: string[]
  • riverNightsColorPalette: string[]
  • springPastelsColorPalette: string[]

Static Private #cssAdded

#cssAdded: boolean = false

Some CSS rules for synamic styles are added to the HEAD of the document.

Static Private #activeColorPalette

#activeColorPalette: string[] = colors.dutchFieldColorPalette

Current color palette. Set another one with setActiveColorPalette.

width

width: number

Width of parent element.

height

height: number

Height of parent element.

chartWidth

chartWidth: number

Width of chart without paddings.

chartHeight

chartHeight: number

Height of chart without paddings.s

svg

svg: SVGElement

The generated root SVG element.

config

config: SvgChartConfig

Config object that is created in the constrructor or setConfig() methiod.

Private #controller

#controller: Controller

Controller that is in charge of drawing the chart.

unselectedSeries

unselectedSeries: StringBooleanHash

Hash where key = serie and value = whether it is selected or nor not.

Private #data

#data: ChartData

Chart data object. Set during the chart() method.

Private #defsElement

#defsElement: SVGElement

Element that contains definitions, for example for gradients.

Private #drawOnDataGroup

#drawOnDataGroup: SVGElement

Element where the config.drawOnDarta method will paint in. Only created when config.drawOnData is specified.

serieGroupElement

serieGroupElement: SVGElement

Element where series will be attached to.

focusedValueForeignObject

focusedValueForeignObject: SVGElement

SVG group element that wraps the focused value element.

focusedValueDiv

focusedValueDiv: HTMLElement

Private #onLegendClickScoped

#onLegendClickScoped: ScopedEventCallback = null

Scoped callback to call when a legend item gets clicked.

Private #onLegendKeypressScoped

#onLegendKeypressScoped: ScopedEventCallback = null

Scoped callback to call when a legend items receives a keyboard ENTER press.

Private #onSerieGroupTransitionendScoped

#onSerieGroupTransitionendScoped: ScopedEventCallback = null

Private #onSerieGroupFocusScoped

#onSerieGroupFocusScoped: ScopedEventCallback = null

Private #onSerieGroupBlurScoped

#onSerieGroupBlurScoped: ScopedEventCallback = null

Private #listenersToRemoveAfterConfigChange

#listenersToRemoveAfterConfigChange: ChartEventInfo[]

Accessors

controller

data

Methods

Static setActiveColorPalette

  • Set a color palette for all chart instances.

    Parameters

    • colors: string[]

      Array of colors.

    Returns void

setConfig

  • Set the configuration for this chart instance. The idea is that this method does things that need to be done only once for a chart and that chart does things for drawing the charts and can happen multiple times, for example if you need to display a new set of data.

    Actions during this method:

    • Merge config from parameter with default config.
    • Create chart controller for this charttype.
    • Remove all child element and event listeners for this chart (only does something when this method is called multiple times).
    • Adding elements like title, legend, etc.
    • Add the serieGroupElement.

    Parameters

    Returns void

chart

  • Writing the chart data.

    Parameters

    Returns void

saveAsPng

  • Saves chart as PNG file.

    Parameters

    • filename: string

      Filename.

    Returns void

Private #addSerieGroup

  • #addSerieGroup(): void

  • Add serie group element. This is a SVG group element where the series data will be attached to.

    Returns void

Private #addLegend

  • #addLegend(): void

  • Add legend.

    Returns void

Private #addTitle

  • #addTitle(): void

  • Add chart title.

    Returns void

getSeriePropertyColor

  • Get the color or gradient for this serie for a specific property.

    Parameters

    • props: any[]
    • serie: ChartConfigSerie

      Serie object.

    • serieIndex: number

      Serie index.

    Returns string

    Color or gradient.

getSeriePointColor

  • Get the point color or gradient for this serie.

    Parameters

    Returns string

    Color or gradient.

getSerieStrokeColor

  • Get the stroke color or gradient for this serie.

    Parameters

    Returns string

    Color or gradient.

getSerieFill

  • Get the fill color or gradient for this serie.

    Parameters

    Returns string

    Color or gradient.

addEventListener

  • Adds an event listener to a node and adds it to the #listenersToRemoveAfterConfigChange array as well, so we can remove them in one place.

    Parameters

    • node: Node

      Node to add the listener to.

    • eventName: string

      Name of event.

    • callback: EventListenerOrEventListenerObject

      Function that needs to be executed.

    • capture: boolean

      Capture or not.

    Returns void

Private #onLegendToggle

  • #onLegendToggle(target): void

  • When legend gets toggled (selected / deselected).

    Parameters

    • target: SVGElement

      Legend node that gets toggled.

    Returns void

Private #onLegendKeypress

  • #onLegendKeypress(e): void

  • When a key is pressed on a focussed legend node.

    Parameters

    • e: KeyboardEvent

      Event object.

    Returns void

Private #onLegendClick

  • #onLegendClick(e): void

  • When a focussed legend node is clicked.

    Parameters

    • e: Event

      Event object.

    Returns void

Private #onSerieGroupTransitionend

  • #onSerieGroupTransitionend(e): void

  • When the tranisiton of a serie group has ended.

    Parameters

    • e: Event

      Event object.

    Returns void

Private #onSerieGroupBlur

  • #onSerieGroupBlur(e): void

  • When a serie group node is blurred (this means loses focus).

    Parameters

    • e: Event

      Event object.

    Returns void

Private #onSerieGroupFocus

  • #onSerieGroupFocus(e): void

  • When a serie group node gets focussed.

    Parameters

    • e: Event

      Event object.

    Returns void

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc