@progress/kendo-charts
Version:
Kendo UI platform-independent Charts library
340 lines (277 loc) • 11.8 kB
JavaScript
import { drawing as draw } from '@progress/kendo-drawing';
import { BoxElement, FloatElement, TextBox } from '../../core';
import { AREA, LEGEND_ITEM_ARIA_ROLE_DESCRIPTION, LEGEND_ITEM_CLASSNAME, LEGEND_ITEM_CLICK, LEGEND_ITEM_HOVER, LEGEND_ITEM_LEAVE, LEGEND_ITEM_ROLE, LINE } from '../constants';
import { BOTTOM, CENTER, WHITE } from '../../common/constants';
import { deepExtend, eventElement, setDefaultOptions } from '../../common';
import addAccessibilityAttributesToVisual from '../../core/utils/add-accessibility-attributes-to-visual';
import guid from '../../core/utils/guid';
import LegendItemMarker from './legend-item-marker';
import MarkerLineArea from './legend-item-line-area';
import LegendItemLine from './legend-item-line';
import LegendItemSquare from './legend-item-square';
var LegendItem = (function (BoxElement) {
function LegendItem(options) {
BoxElement.call(this, options);
this.createContainer();
if (!options.rtl) {
this.createMarker();
this.createLabel();
} else {
this.createLabel();
this.createMarker();
}
this._id = guid();
this.options.accessibility.ariaChecked = options.active;
}
if ( BoxElement ) LegendItem.__proto__ = BoxElement;
LegendItem.prototype = Object.create( BoxElement && BoxElement.prototype );
LegendItem.prototype.constructor = LegendItem;
LegendItem.prototype.createContainer = function createContainer () {
this.container = new FloatElement({ vertical: false, wrap: false, align: CENTER, spacing: this.options.spacing });
this.append(this.container);
};
LegendItem.prototype.createMarker = function createMarker () {
this.markerWrap = new BoxElement({ vertical: false, shrinkToFit: true, wrap: false, margin: 1, width: 22, height: 22 });
this.container.append(this.markerWrap);
this.createMarkerArea();
if (this.options.markers.visible) {
this._marker = this._createMarker();
this.markerWrap.append(this._marker);
}
};
LegendItem.prototype.createMarkerArea = function createMarkerArea () {
var options = this.options;
var markerColor = options.markerColor;
var line = options.line; if ( line === void 0 ) line = {};
var lineOptions = {
border: {
color: line.color || markerColor,
opacity: line.opacity,
dashType: line.dashType
}
};
return this._createLine(lineOptions) ||
this._createMarkerLine(lineOptions, line) ||
this._createSquare();
};
LegendItem.prototype.markerOptions = function markerOptions () {
var options = this.options;
var markers = options.markers; if ( markers === void 0 ) markers = {};
var markerColor = options.markerColor;
var border = markers.border; if ( border === void 0 ) border = {};
markers.zIndex = undefined;
return deepExtend({}, markers, {
border: { color: border.color || markerColor },
highlight: options.highlight.markers
});
};
LegendItem.prototype._highlightOptions = function _highlightOptions () {
var options = this.options;
return deepExtend(
{ markers: { type: options.markers.type } },
options.highlight
);
};
LegendItem.prototype._createLine = function _createLine (lineOptions) {
var options = this.options;
if (options.type === LINE && !options.markers.visible) {
this._line = new LegendItemLine(deepExtend({}, {
background: options.markerColor,
highlight: this._highlightOptions(),
}, lineOptions, options.line));
this.markerWrap.append(this._line);
}
return this._line;
};
LegendItem.prototype._createMarkerLine = function _createMarkerLine (lineOptions, line) {
var options = this.options;
if (options.type === LINE) {
this._markerLineArea = new MarkerLineArea(deepExtend({}, {
border: {
width: line.height
}
}, lineOptions));
this.markerWrap.append(this._markerLineArea);
}
return this._markerLineArea;
};
LegendItem.prototype._reduceSize = function _reduceSize (object, prop, factor) {
if ( factor === void 0 ) factor = 0.6;
if (typeof object[prop] === 'number') {
object[prop] = object[prop] * factor;
}
};
LegendItem.prototype._createSquare = function _createSquare () {
var options = this.options;
if (options.type === AREA) {
var pattern = options.pattern || (options.series || {}).pattern;
if (pattern) {
if (typeof pattern === 'function') {
pattern = pattern(options.series);
}
pattern = structuredClone(pattern);
this._reduceSize(pattern, 'gap');
this._reduceSize(pattern, 'width');
this._reduceSize(pattern, 'radius');
}
this._square = new LegendItemSquare(Object.assign({}, {border: options.border,
vAlign: options.markers.visible ? BOTTOM : CENTER,
highlight: this._highlightOptions()},
options.area,
{pattern: pattern,
background: options.area.background || options.markerColor}));
this.markerWrap.append(this._square);
}
return this._square;
};
LegendItem.prototype._createMarker = function _createMarker () {
return new LegendItemMarker(this.markerOptions());
};
LegendItem.prototype._highlightMarkers = function _highlightMarkers () {
if (this.options.active) {
this._toggleHighlight(true);
}
};
LegendItem.prototype._restoreMarkers = function _restoreMarkers () {
this._toggleHighlight(false);
};
LegendItem.prototype._toggleHighlight = function _toggleHighlight (show) {
var this$1 = this;
if (!this.options.highlight.visible) {
return;
}
var element = this._marker || this._square || this._line;
if (element && element === this._line) {
this._line.visual.visible(!show);
}
if (element) {
var highlight = element.highlight;
if (!highlight) {
highlight = element.createHighlight();
highlight.forEach(function (h) { return h && this$1.markerWrap.appendVisual(h); });
}
highlight.forEach(function (h) { return h && h.visible(show); });
}
};
LegendItem.prototype.createLabel = function createLabel () {
var options = this.options;
var labelOptions = deepExtend({}, options.labels);
this.container.append(new TextBox(options.text, labelOptions));
};
LegendItem.prototype.getAriaLabelText = function getAriaLabelText () {
return this.options.text;
};
LegendItem.prototype.focusVisual = function focusVisual () {
this.visual.options.set("id", this._id);
this.toggleFocusHighlight(true);
this._highlightMarkers();
};
LegendItem.prototype.clearFocusFromVisual = function clearFocusFromVisual () {
this.visual.options.set("id", "");
this.toggleFocusHighlight(false);
this._restoreMarkers();
};
LegendItem.prototype.renderComplete = function renderComplete () {
BoxElement.prototype.renderComplete.call(this);
var cursor = this.options.cursor || {};
var eventSink = this._itemOverlay = draw.Path.fromRect(this.container.box.toRect(), {
fill: {
color: WHITE,
opacity: 0
},
stroke: null,
cursor: cursor.style || cursor
});
this.appendVisual(eventSink);
};
LegendItem.prototype.click = function click (widget, e) {
var args = this.eventArgs(e);
if (!widget.trigger(LEGEND_ITEM_CLICK, args) && e && e.type === 'contextmenu') {
e.preventDefault();
}
};
LegendItem.prototype.over = function over (widget, e) {
var args = this.eventArgs(e);
if (!widget.trigger(LEGEND_ITEM_HOVER, args)) {
widget._legendItemHover(args.seriesIndex, args.pointIndex);
this._highlightMarkers();
}
// Don't trigger point hover for legend items
return true;
};
LegendItem.prototype.out = function out (widget, e) {
widget._unsetActivePoint();
this._restoreMarkers();
widget.trigger(LEGEND_ITEM_LEAVE, this.eventArgs(e));
};
LegendItem.prototype.eventArgs = function eventArgs (e) {
var options = this.options;
return {
element: eventElement(e),
text: options.text,
series: options.series,
seriesIndex: options.series.index,
pointIndex: options.pointIndex
};
};
LegendItem.prototype.createVisual = function createVisual () {
BoxElement.prototype.createVisual.call(this);
var options = this.options;
if (this.options.visible) {
var accessibilityOptions = deepExtend({
ariaLabel: options.accessibility.ariaLabel !== undefined ? options.accessibility.ariaLabel : options.text
}, options.accessibility);
addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
}
};
LegendItem.prototype.renderVisual = function renderVisual () {
var this$1 = this;
var options = this.options;
var customVisual = options.visual;
if (customVisual) {
this.visual = customVisual({
active: options.active,
series: options.series,
sender: this.getSender(),
pointIndex: options.pointIndex,
options: {
type: options.type,
// Passing the markerColor as a background option for backwards compatibility.
// Example in jq docs - https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/legend.item#legenditemvisual
markers: deepExtend({ background: this.options.markerColor }, this.markerOptions()),
labels: options.labels
},
createVisual: function () {
this$1.createVisual();
this$1.renderChildren();
this$1.renderComplete();
var defaultVisual = this$1.visual;
delete this$1.visual;
return defaultVisual;
}
});
this._marker = this._markerLineArea = this._square = this._line = null;
this.addVisual();
} else {
BoxElement.prototype.renderVisual.call(this);
}
};
LegendItem.prototype.createFocusHighlight = function createFocusHighlight (style) {
var borderWidth = style.stroke.width;
return draw.Path.fromRect(this.container.box.pad(borderWidth / 2).toRect(), style);
};
return LegendItem;
}(BoxElement));
setDefaultOptions(LegendItem, {
accessibility: {
role: LEGEND_ITEM_ROLE,
className: LEGEND_ITEM_CLASSNAME,
ariaRoleDescription: LEGEND_ITEM_ARIA_ROLE_DESCRIPTION
},
markers: {},
highlight: {
visible: true,
markers: {}
}
});
export default LegendItem;