devexpress-reporting/designer/controls/metadata/xrSparkline.js

DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.

/**
* DevExpress HTML/JS Reporting (designer\controls\metadata\xrSparkline.js)
* Version:  26.1.3
* Build date: Jun 16, 2026
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/universal.xml
*/
import { colorFromString, colorToString, parseBool } from '@devexpress/analytics-core/analytics-utils';
import { editorTemplates } from '@devexpress/analytics-core/analytics-widgets';
import { dataBindings } from '../../dataObjects/metadata/dataBinding';
import { designerEditorTemplates } from '../../widgets/editorTemplates';
import { spartlineTypes } from '../spartlineTypes';
import { anchorHorizontal, anchorVertical } from './properties/anchoring';
import { dataAdapter, dataMember, dataSource, imageType, lineWidth } from './properties/metadata';
import { commonControlProperties, navigationGroup, sizeLocation } from './properties/metadataGroups';
import { controlScripts } from './properties/scriptMetadata';
import { action } from './properties/action';
export const valueMember = { propertyName: 'valueMember', modelName: '@ValueMember', displayName: 'Value Member', localizationId: 'DevExpress.XtraReports.UI.XRSparkline.ValueMember', editor: editorTemplates.getEditor('field') };
const highlightMinPoint = { modelName: '@HighlightMinPoint', defaultVal: false, from: parseBool, propertyName: 'highlightMinPoint', displayName: 'Highlight Min Point', localizationId: 'DevExpress.Sparkline.SparklineViewBase.HighlightMinPoint', editor: editorTemplates.getEditor('bool') }, highlightMaxPoint = { modelName: '@HighlightMaxPoint', defaultVal: false, from: parseBool, propertyName: 'highlightMaxPoint', displayName: 'Highlight Max Point', localizationId: 'DevExpress.Sparkline.SparklineViewBase.HighlightMaxPoint', editor: editorTemplates.getEditor('bool') }, highlightStartPoint = { modelName: '@HighlightStartPoint', defaultVal: false, from: parseBool, propertyName: 'highlightStartPoint', displayName: 'Highlight Start Point', localizationId: 'DevExpress.Sparkline.SparklineViewBase.HighlightStartPoint', editor: editorTemplates.getEditor('bool') }, highlightEndPoint = { modelName: '@HighlightEndPoint', defaultVal: false, from: parseBool, propertyName: 'highlightEndPoint', displayName: 'Highlight End Point', localizationId: 'DevExpress.Sparkline.SparklineViewBase.HighlightEndPoint', editor: editorTemplates.getEditor('bool') }, highlightNegativePoints = { modelName: '@HighlightNegativePoints', defaultVal: false, from: parseBool, propertyName: 'highlightNegativePoints', displayName: 'Highlight Negative Points', localizationId: 'DevExpress.Sparkline.LineSparklineView.HighlightNegativePoints', editor: editorTemplates.getEditor('bool') }, color = { modelName: '@Color', from: colorFromString, toJsonObject: colorToString, propertyName: 'color', displayName: 'Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.Color', editor: editorTemplates.getEditor('customColorEditor') }, maxPointColor = { modelName: '@MaxPointColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'maxPointColor', displayName: 'Max Point Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.MaxPointColor', editor: editorTemplates.getEditor('customColorEditor') }, minPointColor = { modelName: '@MinPointColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'minPointColor', displayName: 'Min Point Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.MinPointColor', editor: editorTemplates.getEditor('customColorEditor') }, startPointColor = { modelName: '@StartPointColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'startPointColor', displayName: 'Start Point Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.StartPointColor', editor: editorTemplates.getEditor('customColorEditor') }, negativePointColor = { modelName: '@NegativePointColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'negativePointColor', displayName: 'Negative Point Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.NegativePointColor', editor: editorTemplates.getEditor('customColorEditor') }, endPointColor = { modelName: '@EndPointColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'endPointColor', displayName: 'End Point Color', localizationId: 'DevExpress.Sparkline.SparklineViewBase.EndPointColor', editor: editorTemplates.getEditor('customColorEditor') }, sparklineViewType = {
    modelName: '@Type', propertyName: 'type'
}, enableAntialiasing = { modelName: '@EnableAntialiasing', propertyName: 'enableAntialiasing', displayName: 'Enable Antialiasing', localizationId: 'DevExpress.Sparkline.LineSparklineView.EnableAntialiasing', editor: editorTemplates.getEditor('bool'), from: parseBool, defaultVal: true }, maxPointMarkerSize = { modelName: '@MaxPointMarkerSize', defaultVal: 5, propertyName: 'maxPointMarkerSize', displayName: 'Max Point Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.MaxPointMarkerSize', editor: editorTemplates.getEditor('numeric') }, minPointMarkerSize = { modelName: '@MinPointMarkerSize', defaultVal: 5, propertyName: 'minPointMarkerSize', displayName: 'Min Point Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.MinPointMarkerSize', editor: editorTemplates.getEditor('numeric') }, startPointMarkerSize = { modelName: '@StartPointMarkerSize', defaultVal: 5, propertyName: 'startPointMarkerSize', displayName: 'Start Point Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.StartPointMarkerSize', editor: editorTemplates.getEditor('numeric') }, negativePointMarkerSize = { modelName: '@NegativePointMarkerSize', defaultVal: 5, propertyName: 'negativePointMarkerSize', displayName: 'Negative Point Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.NegativePointMarkerSize', editor: editorTemplates.getEditor('numeric') }, endPointMarkerSize = { modelName: '@EndPointMarkerSize', defaultVal: 5, propertyName: 'endPointMarkerSize', displayName: 'End Point Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.EndPointMarkerSize', editor: editorTemplates.getEditor('numeric') }, markerSize = { modelName: '@MarkerSize', propertyName: 'markerSize', defaultVal: 5, displayName: 'Marker Size', localizationId: 'DevExpress.Sparkline.LineSparklineView.MarkerSize', editor: editorTemplates.getEditor('numeric') }, showMarkers = { modelName: '@ShowMarkers', propertyName: 'showMarkers', displayName: 'Show Markers', localizationId: 'DevExpress.Sparkline.LineSparklineView.ShowMarkers', from: parseBool, editor: editorTemplates.getEditor('bool'), defaultVal: false }, markerColor = { modelName: '@MarkerColor', from: colorFromString, toJsonObject: colorToString, propertyName: 'markerColor', displayName: 'Marker Color', localizationId: 'DevExpress.Sparkline.LineSparklineView.MarkerColor', editor: editorTemplates.getEditor('customColorEditor') };
const barDistance = { modelName: '@BarDistance', propertyName: 'barDistance', defaultVal: 2, displayName: 'Bar Distance', localizationId: 'DevExpress.Sparkline.BarSparklineViewBase.BarDistance', editor: editorTemplates.getEditor('numeric') };
const areaOpacity = { modelName: '@AreaOpacity', propertyName: 'areaOpacity', defaultVal: 135, displayName: 'Area Opacity', localizationId: 'DevExpress.Sparkline.AreaSparklineView.AreaOpacity', editor: editorTemplates.getEditor('numeric') };
const commonSparklineViewProperties = [highlightStartPoint, highlightEndPoint, highlightMaxPoint, highlightMinPoint, color, maxPointColor, minPointColor, startPointColor, endPointColor, negativePointColor, sparklineViewType];
const viewLineSerializationsInfo = [].concat(commonSparklineViewProperties, [highlightNegativePoints, enableAntialiasing, negativePointMarkerSize, endPointMarkerSize, startPointMarkerSize, minPointMarkerSize, maxPointMarkerSize, markerSize, showMarkers, lineWidth, markerColor]);
const viewWinLoseSerializationsInfo = [].concat(commonSparklineViewProperties, [barDistance]);
const viewBarSerializationsInfo = [].concat(commonSparklineViewProperties, [barDistance, highlightNegativePoints]);
const viewAreaSerializationsInfo = [].concat(commonSparklineViewProperties, [enableAntialiasing, areaOpacity, negativePointMarkerSize, lineWidth, highlightNegativePoints, showMarkers, markerSize, maxPointMarkerSize, markerColor, minPointMarkerSize, endPointMarkerSize, startPointMarkerSize]);
export const sparklineViewMap = {
    'Line': viewLineSerializationsInfo,
    'Bar': viewBarSerializationsInfo,
    'WinLoss': viewWinLoseSerializationsInfo,
    'Area': viewAreaSerializationsInfo
};
const limit1 = { propertyName: 'limit1', modelName: '@Limit1', displayName: 'Limit 1', localizationId: 'DevExpress.Sparkline.SparklineRange.Limit1', defaultVal: 0, editor: editorTemplates.getEditor('numeric') }, limit2 = { propertyName: 'limit2', modelName: '@Limit2', displayName: 'Limit 2', localizationId: 'DevExpress.Sparkline.SparklineRange.Limit2', defaultVal: 1, editor: editorTemplates.getEditor('numeric') }, isAuto = { propertyName: 'isAuto', modelName: '@IsAuto', displayName: 'Is Auto', localizationId: 'DevExpress.Sparkline.SparklineRange.IsAuto', defaultVal: true, editor: editorTemplates.getEditor('bool') };
export const valueRange = { propertyName: 'valueRange', modelName: 'ValueRange', displayName: 'Value Range', localizationId: 'DevExpress.XtraReports.UI.XRSparkline.ValueRange', info: [limit1, limit2, isAuto], editor: editorTemplates.getEditor('objecteditor') };
const sparklineView = { propertyName: 'view', modelName: 'View' };
export const sparklineFake = { propertyName: 'sparklineFake', editor: designerEditorTemplates.getEditor('contentByType'), valuesArray: spartlineTypes, displayName: 'View', localizationId: 'DevExpress.XtraReports.UI.XRSparkline.View' };
export const sparklineSerializationsInfo = [
    sparklineFake, sparklineView, valueMember, valueRange, imageType, anchorVertical, anchorHorizontal, dataBindings(['Bookmark', 'NavigateUrl', 'Tag']),
    action, dataAdapter, dataMember, dataSource, controlScripts
].concat(commonControlProperties, sizeLocation, navigationGroup);
export const popularPropertiesSparkline = ['dataSource', 'dataMember', 'dataAdapter', 'valueMemberEditable', 'sparklineFake'];