com.vaadin.flow.component.charts.model.Tooltip Maven / Gradle / Ivy
/**
* Copyright 2000-2024 Vaadin Ltd.
*
* This program is available under Vaadin Commercial License and Service Terms.
*
* See {@literal } for the full
* license.
*/
package com.vaadin.flow.component.charts.model;
import com.vaadin.flow.component.charts.model.style.Color;
import com.vaadin.flow.component.charts.model.style.Style;
/**
* Options for the tooltip that appears when the user hovers over a series or
* point.
*/
public class Tooltip extends AbstractConfigurationObject {
private Boolean animation;
private Color backgroundColor;
private Color borderColor;
private Number borderRadius;
private Number borderWidth;
private DateTimeLabelFormats dateTimeLabelFormats;
private Boolean enabled;
private Boolean followPointer;
private Boolean followTouchMove;
private String footerFormat;
private String _fn_formatter;
private String headerFormat;
private Number hideDelay;
private Number padding;
private String pointFormat;
private String _fn_pointFormatter;
private String _fn_positioner;
private Boolean shadow;
private Shape shape;
private Boolean shared;
private Number snap;
private Boolean split;
private Style style;
private Boolean useHTML;
private Number valueDecimals;
private String valuePrefix;
private String valueSuffix;
private String xDateFormat;
private Number changeDecimals;
private Boolean outside;
public Tooltip() {
}
/**
* @see #setAnimation(Boolean)
*/
public Boolean getAnimation() {
return animation;
}
/**
* Enable or disable animation of the tooltip. In slow legacy IE browsers
* the animation is disabled by default.
*
* Defaults to: true
*/
public void setAnimation(Boolean animation) {
this.animation = animation;
}
/**
* @see #setBackgroundColor(Color)
*/
public Color getBackgroundColor() {
return backgroundColor;
}
/**
*
* The background color or gradient for the tooltip.
*
*
*
* In styled mode, the stroke width is set in the
* .highcharts-tooltip-box class.
*
*
* Defaults to: rgba(247,247,247,0.85)
*/
public void setBackgroundColor(Color backgroundColor) {
this.backgroundColor = backgroundColor;
}
/**
* @see #setBorderColor(Color)
*/
public Color getBorderColor() {
return borderColor;
}
/**
* The color of the tooltip border. When null, the border takes
* the color of the corresponding series or point.
*
* Defaults to: null
*/
public void setBorderColor(Color borderColor) {
this.borderColor = borderColor;
}
/**
* @see #setBorderRadius(Number)
*/
public Number getBorderRadius() {
return borderRadius;
}
/**
* The radius of the rounded border corners.
*
* Defaults to: 3
*/
public void setBorderRadius(Number borderRadius) {
this.borderRadius = borderRadius;
}
/**
* @see #setBorderWidth(Number)
*/
public Number getBorderWidth() {
return borderWidth;
}
/**
*
* The pixel width of the tooltip border.
*
*
*
* In styled mode, the stroke width is set in the
* .highcharts-tooltip-box class.
*
*
* Defaults to: 1
*/
public void setBorderWidth(Number borderWidth) {
this.borderWidth = borderWidth;
}
/**
* @see #setDateTimeLabelFormats(DateTimeLabelFormats)
*/
public DateTimeLabelFormats getDateTimeLabelFormats() {
if (dateTimeLabelFormats == null) {
dateTimeLabelFormats = new DateTimeLabelFormats();
}
return dateTimeLabelFormats;
}
/**
*
* For series on a datetime axes, the date format in the tooltip's header
* will by default be guessed based on the closest data points. This member
* gives the default string representations used for each unit. For an
* overview of the replacement codes, see
* dateFormat.
*
*
*
* Defaults to:
*
*
* {
* millisecond:"%A, %b %e, %H:%M:%S.%L",
* second:"%A, %b %e, %H:%M:%S",
* minute:"%A, %b %e, %H:%M",
* hour:"%A, %b %e, %H:%M",
* day:"%A, %b %e, %Y",
* week:"Week from %A, %b %e, %Y",
* month:"%B %Y",
* year:"%Y"
* }
*
*
*
*/
public void setDateTimeLabelFormats(
DateTimeLabelFormats dateTimeLabelFormats) {
this.dateTimeLabelFormats = dateTimeLabelFormats;
}
public Tooltip(Boolean enabled) {
this.enabled = enabled;
}
/**
* @see #setEnabled(Boolean)
*/
public Boolean getEnabled() {
return enabled;
}
/**
* Enable or disable the tooltip.
*
* Defaults to: true
*/
public void setEnabled(Boolean enabled) {
this.enabled = enabled;
}
/**
* @see #setFollowPointer(Boolean)
*/
public Boolean getFollowPointer() {
return followPointer;
}
/**
*
* Whether the tooltip should follow the mouse as it moves across columns,
* pie slices and other point types with an extent. By default it behaves
* this way for scatter, bubble and pie series by override in the
* plotOptions for those series types.
*
*
* For touch moves to behave the same way,
* followTouchMove must be
* true also.
*
*
* Defaults to: false
*/
public void setFollowPointer(Boolean followPointer) {
this.followPointer = followPointer;
}
/**
* @see #setFollowTouchMove(Boolean)
*/
public Boolean getFollowTouchMove() {
return followTouchMove;
}
/**
* Whether the tooltip should follow the finger as it moves on a touch
* device. If this is true and
* chart.panning is set,
* followTouchMove will take over one-finger touches, so the
* user needs to use two fingers for zooming and panning.
*
* Defaults to: true
*/
public void setFollowTouchMove(Boolean followTouchMove) {
this.followTouchMove = followTouchMove;
}
/**
* @see #setFooterFormat(String)
*/
public String getFooterFormat() {
return footerFormat;
}
/**
* A string to append to the tooltip format.
*
* Defaults to: false
*/
public void setFooterFormat(String footerFormat) {
this.footerFormat = footerFormat;
}
public String getFormatter() {
return _fn_formatter;
}
public void setFormatter(String _fn_formatter) {
this._fn_formatter = _fn_formatter;
}
/**
* @see #setHeaderFormat(String)
*/
public String getHeaderFormat() {
return headerFormat;
}
/**
*
* The HTML of the tooltip header line. Variables are enclosed by curly
* brackets. Available variables are point.key,
* series.name, series.color and other members
* from the point and series objects. The
* point.key variable contains the category name, x value or
* datetime string depending on the type of axis. For datetime axes, the
* point.key date format can be set using tooltip.xDateFormat.
*
*
*
* Defaults to
* <span style="font-size: 10px">{point.key}</span><br/>
*
*/
public void setHeaderFormat(String headerFormat) {
this.headerFormat = headerFormat;
}
/**
* @see #setHideDelay(Number)
*/
public Number getHideDelay() {
return hideDelay;
}
/**
* The number of milliseconds to wait until the tooltip is hidden when mouse
* out from a point or chart.
*
* Defaults to: 500
*/
public void setHideDelay(Number hideDelay) {
this.hideDelay = hideDelay;
}
/**
* @see #setPadding(Number)
*/
public Number getPadding() {
return padding;
}
/**
* Padding inside the tooltip, in pixels.
*
* Defaults to: 8
*/
public void setPadding(Number padding) {
this.padding = padding;
}
/**
* @see #setPointFormat(String)
*/
public String getPointFormat() {
return pointFormat;
}
/**
*
* The HTML of the point's line in the tooltip. Variables are enclosed by
* curly brackets. Available variables are point.x, point.y, series.name and
* series.color and other properties on the same form. Furthermore, point.y
* can be extended by the tooltip.valuePrefix and
* tooltip.valueSuffix variables. This can also be overridden
* for each series, which makes it a good hook for displaying units.
*
*
* In styled mode, the dot is colored by a class name rather than the
* point color.
*
*
* Defaults to: \u25CF
* {series.name}: {point.y}
*/
public void setPointFormat(String pointFormat) {
this.pointFormat = pointFormat;
}
public String getPointFormatter() {
return _fn_pointFormatter;
}
public void setPointFormatter(String _fn_pointFormatter) {
this._fn_pointFormatter = _fn_pointFormatter;
}
public String getPositioner() {
return _fn_positioner;
}
public void setPositioner(String _fn_positioner) {
this._fn_positioner = _fn_positioner;
}
/**
* @see #setShadow(Boolean)
*/
public Boolean getShadow() {
return shadow;
}
/**
* Whether to apply a drop shadow to the tooltip.
*
* Defaults to: true
*/
public void setShadow(Boolean shadow) {
this.shadow = shadow;
}
/**
* @see #setShape(Shape)
*/
public Shape getShape() {
return shape;
}
/**
* The name of a symbol to use for the border around the tooltip. In
* Highcharts 3.x and less, the shape was square.
*
* Defaults to: callout
*/
public void setShape(Shape shape) {
this.shape = shape;
}
/**
* @see #setShared(Boolean)
*/
public Boolean getShared() {
return shared;
}
/**
*
* When the tooltip is shared, the entire plot area will capture mouse
* movement or touch events. Tooltip texts for series types with ordered
* data (not pie, scatter, flags etc) will be shown in a single bubble. This
* is recommended for single series charts and for tablet/mobile optimized
* charts.
*
*
*
* See also tooltip.split, that is better
* suited for charts with many series, especially line-type series.
*
*
* Defaults to: false
*/
public void setShared(Boolean shared) {
this.shared = shared;
}
/**
* @see #setSnap(Number)
*/
public Number getSnap() {
return snap;
}
/**
*
* Proximity snap for graphs or single points. It defaults to 10 for
* mouse-powered devices and 25 for touch devices.
*
*
*
* Note that in most cases the whole plot area captures the mouse movement,
* and in these cases tooltip.snap doesn't make sense. This
* applies when
* stickyTracking is
* true (default) and when the tooltip is
* shared or
* split.
*
*/
public void setSnap(Number snap) {
this.snap = snap;
}
/**
* @see #setSplit(Boolean)
*/
public Boolean getSplit() {
return split;
}
/**
* Split the tooltip into one label per series, with the header close to the
* axis. This is recommended over shared
* tooltips for charts with multiple line series, generally making them
* easier to read.
*
* Defaults to: false
*/
public void setSplit(Boolean split) {
this.split = split;
}
/**
* @see #setStyle(Style)
*/
public Style getStyle() {
if (style == null) {
style = new Style();
}
return style;
}
/**
* CSS styles for the tooltip. The tooltip can also be styled through the
* CSS class .highcharts-tooltip.
*
* Defaults to: { "color": "#333333", "cursor": "default", "fontSize":
* "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }
*/
public void setStyle(Style style) {
this.style = style;
}
/**
* @see #setUseHTML(Boolean)
*/
public Boolean getUseHTML() {
return useHTML;
}
/**
* Use HTML to render the contents of the tooltip instead of SVG. Using HTML
* allows advanced formatting like tables and images in the tooltip. It is
* also recommended for rtl languages as it works around rtl bugs in early
* Firefox.
*
* Defaults to: false
*/
public void setUseHTML(Boolean useHTML) {
this.useHTML = useHTML;
}
/**
* @see #setValueDecimals(Number)
*/
public Number getValueDecimals() {
return valueDecimals;
}
/**
* How many decimals to show in each series' y value. This is overridable in
* each series' tooltip options object. The default is to preserve all
* decimals.
*/
public void setValueDecimals(Number valueDecimals) {
this.valueDecimals = valueDecimals;
}
/**
* @see #setValuePrefix(String)
*/
public String getValuePrefix() {
return valuePrefix;
}
/**
* A string to prepend to each series' y value. Overridable in each series'
* tooltip options object.
*/
public void setValuePrefix(String valuePrefix) {
this.valuePrefix = valuePrefix;
}
/**
* @see #setValueSuffix(String)
*/
public String getValueSuffix() {
return valueSuffix;
}
/**
* A string to append to each series' y value. Overridable in each series'
* tooltip options object.
*/
public void setValueSuffix(String valueSuffix) {
this.valueSuffix = valueSuffix;
}
/**
* @see #setXDateFormat(String)
*/
public String getXDateFormat() {
return xDateFormat;
}
/**
* The format for the date in the tooltip header if the X axis is a datetime
* axis. The default is a best guess based on the smallest distance between
* points in the chart.
*/
public void setXDateFormat(String xDateFormat) {
this.xDateFormat = xDateFormat;
}
/**
* @see #setChangeDecimals(Number)
*/
public Number getChangeDecimals() {
return changeDecimals;
}
/**
* How many decimals to show for the point.change value when
* the series.compare option is set. This is overridable in
* each series' tooltip options object. The default is to preserve all
* decimals.
*/
public void setChangeDecimals(Number changeDecimals) {
this.changeDecimals = changeDecimals;
}
/**
* @see #setOutside(Boolean)
*/
public Boolean getOutside() {
return outside;
}
/**
*
* Whether to allow the tooltip to render outside the chart's SVG element
* box. By default (false), the tooltip is rendered within the chart's SVG
* element, which results in the tooltip being aligned inside the chart
* area. For small charts, this may result in clipping or overlapping. When
* true, a separate SVG element is created and overlaid on the page,
* allowing the tooltip to be aligned inside the page itself.
*/
public void setOutside(Boolean outside) {
this.outside = outside;
}
}