UNPKG

@syncfusion/ej2-heatmap

Version:

Feature rich data visulization control used to visualize the matrix data where the individual values are represented as colors

225 lines (181 loc) 8.17 kB
import { Component, Property, NotifyPropertyChanges, Internationalization, Complex, isNullOrUndefined, TapEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { ModuleDeclaration, EmitType, remove, Event, EventHandler, Touch } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, setCulture, Browser } from '@syncfusion/ej2-base';import { SvgRenderer, CanvasRenderer, Tooltip as tool } from '@syncfusion/ej2-svg-base';import { Size, stringToNumber, RectOption, Rect, TextBasic, measureText, CurrentRect, LegendRange, ToggleVisibility, removeMeasureElement } from './utils/helper';import { DrawSvgCanvas, TextOption, titlePositionX, getTitle, showTooltip, getElement, SelectedCellDetails } from './utils/helper';import { removeElement, CanvasTooltip, getTooltipText } from './utils/helper';import { FontModel, MarginModel, TitleModel } from './model/base-model';import { Margin, Title, ColorCollection, LegendColorCollection } from './model/base';import { Theme, getThemeColor } from './model/theme';import { IThemeStyle, ILoadedEventArgs, ICellClickEventArgs, ITooltipEventArgs, IResizeEventArgs } from './model/interface';import { ICellEventArgs, ISelectedEventArgs } from './model/interface';import { DrawType, HeatMapTheme, ColorGradientMode } from './utils/enum';import { Axis } from './axis/axis';import { AxisModel } from './axis/axis-model';import { AxisHelper } from './axis/axis-helpers';import { Series, CellSettings } from './series/series';import { CellSettingsModel } from './series/series-model';import { PaletteSettingsModel } from './utils/colorMapping-model';import { PaletteSettings, CellColor } from './utils/colorMapping';import { TooltipSettings } from './utils/tooltip';import { TooltipSettingsModel } from './utils/tooltip-model';import { TwoDimensional } from './datasource/twodimensional';import { Tooltip } from './utils/tooltip';import { LegendSettingsModel } from '../heatmap/legend/legend-model';import { LegendSettings, Legend } from '../heatmap/legend/legend';import { Adaptor, Data } from './datasource/adaptor';import { DataModel } from './datasource/adaptor-model';import { ILegendRenderEventArgs } from './model/interface';import { ExportUtils } from '../heatmap/utils/export';import { ExportType } from '../heatmap/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export'; import {ComponentModel} from '@syncfusion/ej2-base'; /** * Interface for a class HeatMap */ export interface HeatMapModel extends ComponentModel{ /** * Sets and gets the width of the heatmap. The width of the heatmap accepts pixel or percentage values given in string format. * * If specified as '100%, heatmap renders to the full width of its parent element. * * @default null */ width?: string; /** * Sets and gets the height of the heatmap. The height of the heatmap accepts pixel or percentage values given in string format. * * @default null */ height?: string; /** * Enable or disable the visibility of the tooltip for heatmap. * * @default true */ showTooltip?: boolean; /** * Triggers before the tooltip of the heatmap is rendered on the heatmap cell. * * {% codeBlock src='heatmap/tooltipRender/index.md' %}{% endcodeBlock %} * * @event 'object' */ tooltipRender?: EmitType<ITooltipEventArgs>; /** * Triggers to notify the resize of the heatmap when the window is resized. * * @event 'object' */ resized?: EmitType<IResizeEventArgs>; /** * Triggers after heatmap is loaded. * * @event 'object' */ loaded?: EmitType<ILoadedEventArgs>; /** * Triggers before each heatmap cell renders. * {% codeBlock src='heatmap/cellRender/index.md' %}{% endcodeBlock %} * * @event 'object' */ cellRender?: EmitType<ICellEventArgs>; /** * Triggers when heatmap cell gets selected. * * @event 'object' */ cellSelected?: EmitType<ISelectedEventArgs>; /** * Specifies the rendering mode of heatmap. The following are the available rendering modes. * * SVG - Heatmap is rendered using SVG element. * * Canvas - Heatmap is rendered using Canvas element. * * Auto - Automatically switches the rendering mode based on number of records in the data source. * * @default SVG */ renderingMode?: DrawType; /** * Sets and gets the data to visualize in the heatmap. * * @isDataManager false * @default null */ dataSource?: Object; /** * Sets and gets the options to customize the data mapping for the data in the heatmap. * {% codeBlock src='heatmap/dataSourceSettings/index.md' %}{% endcodeBlock %} */ dataSourceSettings?: DataModel; /** * Specifies the background color of the entire heatmap. * * @default null */ backgroundColor?: string; /** * Sets and gets the theme styles supported for heatmap. When the theme is set, the styles associated with the theme will be set in the heatmap. * * @default 'Material' */ theme?: HeatMapTheme; /** * Enable or disable the selection of cells in heatmap. * {% codeBlock src='heatmap/allowSelection/index.md' %}{% endcodeBlock %} * * @default false */ allowSelection?: boolean; /** * Enable or disable the multiple selection of cells in heatmap. * * @default true */ enableMultiSelect?: boolean; /** * Specifies whether to enable the rendering of untrusted HTML values in the HeatMap. If `enableHtmlSanitizer` set to **true**, the component will sanitize any suspected untrusted strings and scripts before rendering them. * * @default false */ enableHtmlSanitizer?: boolean; /** * Sets and gets the options to customize left, right, top and bottom margins of the heatmap. */ margin?: MarginModel; /** * Sets and gets the options to customize the title of the heatmap. * {% codeBlock src='heatmap/titleSettings/index.md' %}{% endcodeBlock %} */ titleSettings?: TitleModel; /** * Sets and gets the options to configure the horizontal axis. */ xAxis?: AxisModel; /** * Sets and gets the options for customizing the legend of the heatmap. * {% codeBlock src='heatmap/legendSettings/index.md' %}{% endcodeBlock %} */ legendSettings?: LegendSettingsModel; /** * Sets and gets the options for customizing the cell color of the heatmap. * {% codeBlock src='heatmap/paletteSettings/index.md' %}{% endcodeBlock %} */ paletteSettings?: PaletteSettingsModel; /** * Sets and gets the options for customizing the tooltip of the heatmap. * {% codeBlock src='heatmap/tooltipSettings/index.md' %}{% endcodeBlock %} */ tooltipSettings?: TooltipSettingsModel; /** * Sets and gets the options to configure the vertical axis. */ yAxis?: AxisModel; /** * Sets and gets the options to customize the heatmap cells. * {% codeBlock src='heatmap/cellSettings/index.md' %}{% endcodeBlock %} */ cellSettings?: CellSettingsModel; /** * Triggers after heatmap is completely rendered. * * @event 'object' */ created?: EmitType<Object>; /** * Triggers before heatmap gets loaded. * {% codeBlock src='heatmap/load/index.md' %}{% endcodeBlock %} * * @event 'object' */ load?: EmitType<ILoadedEventArgs>; /** * Triggers when clicking on the heatmap cell. * * @event 'object' */ cellClick?: EmitType<ICellClickEventArgs>; /** * Triggers when performing the double click operation on the cells in the HeatMap. * * @event cellDoubleClick */ cellDoubleClick?: EmitType<ICellClickEventArgs>; /** * Triggers before the legend is rendered. * {% codeBlock src='heatmap/legendRender/index.md' %}{% endcodeBlock %} * * @event 'object' */ legendRender?: EmitType<ILegendRenderEventArgs>; }