highcharts
Version:
JavaScript charting framework
558 lines (557 loc) • 16.3 kB
JavaScript
/* *
*
* (c) 2010-2025 Torstein Honsi
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
/* *
*
* Declarations
*
* */
/**
* An object containing language-related strings and settings. A typical setup
* uses `Highcharts.setOptions` to make the options apply to all charts in the
* same page.
*
* ```js
* Highcharts.setOptions({
* lang: {
* locale: 'fr'
* }
* });
* ```
*
* @optionparent lang
*/
const lang = {
/**
* The text for the label for the range selector buttons.
*
* @product highstock gantt
*/
rangeSelectorZoom: 'Zoom',
/**
* The text for the label for the "from" input box in the range
* selector. Since v9.0, this string is empty as the label is not
* rendered by default.
*
* @product highstock gantt
*/
rangeSelectorFrom: '',
/**
* The text for the label for the "to" input box in the range selector.
*
* @product highstock gantt
*/
rangeSelectorTo: '→',
/**
* The default text for the rangeselector buttons.
*
* @since 12.2.0
*/
rangeSelector: {
allText: 'All',
allTitle: 'View all',
monthText: '{count}m',
monthTitle: 'View {count} {#eq count 1}month{else}months{/eq}',
yearText: '{count}y',
yearTitle: 'View {count} {#eq count 1}year{else}years{/eq}',
ytdText: 'YTD',
ytdTitle: 'View year to date'
}
};
/**
* The range selector is a tool for selecting ranges to display within
* the chart. It provides buttons to select preconfigured ranges in
* the chart, like 1 day, 1 week, 1 month etc. It also provides input
* boxes where min and max dates can be manually input.
*
* @product highstock gantt
* @optionparent rangeSelector
*/
const rangeSelector = {
/**
* Whether to enable all buttons from the start. By default buttons are
* only enabled if the corresponding time range exists on the X axis,
* but enabling all buttons allows for dynamically loading different
* time ranges.
*
* @sample {highstock} stock/rangeselector/allbuttonsenabled-true/
* All buttons enabled
*
* @since 2.0.3
*/
allButtonsEnabled: false,
/**
* An array of configuration objects for the buttons.
*
* Defaults to:
* ```js
* buttons: [{
* type: 'month',
* count: 1,
* text: '1m',
* title: 'View 1 month'
* }, {
* type: 'month',
* count: 3,
* text: '3m',
* title: 'View 3 months'
* }, {
* type: 'month',
* count: 6,
* text: '6m',
* title: 'View 6 months'
* }, {
* type: 'ytd',
* text: 'YTD',
* title: 'View year to date'
* }, {
* type: 'year',
* count: 1,
* text: '1y',
* title: 'View 1 year'
* }, {
* type: 'all',
* text: 'All',
* title: 'View all'
* }]
* ```
*
* @sample {highstock} stock/demo/rangeselector-datagrouping/
* Data grouping by buttons
*
* @type {Array<*>}
*/
buttons: [{
type: 'month',
count: 1
}, {
type: 'month',
count: 3
}, {
type: 'month',
count: 6
}, {
type: 'ytd'
}, {
type: 'year',
count: 1
}, {
type: 'all'
}],
/**
* How many units of the defined type the button should span. If `type`
* is "month" and `count` is 3, the button spans three months.
*
* @type {number}
* @default 1
* @apioption rangeSelector.buttons.count
*/
/**
* Fires when clicking on the rangeSelector button. One parameter,
* event, is passed to the function, containing common event
* information.
*
* ```js
* click: function(e) {
* console.log(this);
* }
* ```
*
* Return false to stop default button's click action.
*
* @sample {highstock} stock/rangeselector/button-click/
* Click event on the button
*
* @type {Highcharts.RangeSelectorClickCallbackFunction}
* @apioption rangeSelector.buttons.events.click
*/
/**
* Additional range (in milliseconds) added to the end of the calculated
* time span.
*
* @sample {highstock} stock/rangeselector/min-max-offsets/
* Button offsets
*
* @type {number}
* @default 0
* @since 6.0.0
* @apioption rangeSelector.buttons.offsetMax
*/
/**
* Additional range (in milliseconds) added to the start of the
* calculated time span.
*
* @sample {highstock} stock/rangeselector/min-max-offsets/
* Button offsets
*
* @type {number}
* @default 0
* @since 6.0.0
* @apioption rangeSelector.buttons.offsetMin
*/
/**
* When buttons apply dataGrouping on a series, by default zooming
* in/out will deselect buttons and unset dataGrouping. Enable this
* option to keep buttons selected when extremes change.
*
* @sample {highstock} stock/rangeselector/preserve-datagrouping/
* Different preserveDataGrouping settings
*
* @type {boolean}
* @default false
* @since 6.1.2
* @apioption rangeSelector.buttons.preserveDataGrouping
*/
/**
* A custom data grouping object for each button.
*
* @see [series.dataGrouping](#plotOptions.series.dataGrouping)
*
* @sample {highstock} stock/demo/rangeselector-datagrouping/
* Data grouping by range selector buttons
*
* @type {*}
* @extends plotOptions.series.dataGrouping
* @apioption rangeSelector.buttons.dataGrouping
*/
/**
* The text for the button itself.
*
* @type {string}
* @apioption rangeSelector.buttons.text
*/
/**
* Explanation for the button, shown as a tooltip on hover, and used by
* assistive technology.
*
* @type {string}
* @apioption rangeSelector.buttons.title
*/
/**
* Defined the time span for the button. Can be one of `millisecond`,
* `second`, `minute`, `hour`, `day`, `week`, `month`, `year`, `ytd`,
* and `all`.
*
* @type {Highcharts.RangeSelectorButtonTypeValue}
* @apioption rangeSelector.buttons.type
*/
/**
* The space in pixels between the buttons in the range selector.
*/
buttonSpacing: 5,
/**
* Whether to collapse the range selector buttons into a dropdown when
* there is not enough room to show everything in a single row, instead
* of dividing the range selector into multiple rows.
* Can be one of the following:
* - `always`: Always collapse
* - `responsive`: Only collapse when there is not enough room
* - `never`: Never collapse
*
* @sample {highstock} stock/rangeselector/dropdown/
* Dropdown option
*
* @validvalue ["always", "responsive", "never"]
* @since 9.0.0
*/
dropdown: 'responsive',
/**
* Enable or disable the range selector. Default to `true` for stock
* charts, using the `stockChart` factory.
*
* @sample {highstock} stock/rangeselector/enabled/
* Disable the range selector
*
* @type {boolean|undefined}
* @default {highstock} true
*/
enabled: void 0,
/**
* The vertical alignment of the rangeselector box. Allowed properties
* are `top`, `middle`, `bottom`.
*
* @sample {highstock} stock/rangeselector/vertical-align-middle/
* Middle
* @sample {highstock} stock/rangeselector/vertical-align-bottom/
* Bottom
*
* @type {Highcharts.VerticalAlignValue}
* @since 6.0.0
*/
verticalAlign: 'top',
/**
* A collection of attributes for the buttons. The object takes SVG
* attributes like `fill`, `stroke`, `stroke-width`, as well as `style`,
* a collection of CSS properties for the text.
*
* The object can also be extended with states, so you can set
* presentational options for `hover`, `select` or `disabled` button
* states.
*
* CSS styles for the text label.
*
* In styled mode, the buttons are styled by the
* `.highcharts-range-selector-buttons .highcharts-button` rule with its
* different states.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @type {Highcharts.SVGAttributes}
*/
buttonTheme: {
/** @ignore */
width: 28,
/** @ignore */
height: 18,
/** @ignore */
padding: 2,
/** @ignore */
zIndex: 7 // #484, #852
},
/**
* When the rangeselector is floating, the plot area does not reserve
* space for it. This opens for positioning anywhere on the chart.
*
* @sample {highstock} stock/rangeselector/floating/
* Placing the range selector between the plot area and the
* navigator
*
* @since 6.0.0
*/
floating: false,
/**
* The x offset of the range selector relative to its horizontal
* alignment within `chart.spacingLeft` and `chart.spacingRight`.
*
* @since 6.0.0
*/
x: 0,
/**
* The y offset of the range selector relative to its horizontal
* alignment within `chart.spacingLeft` and `chart.spacingRight`.
*
* @since 6.0.0
*/
y: 0,
/**
* Deprecated. The height of the range selector. Currently it is
* calculated dynamically.
*
* @deprecated
* @type {number|undefined}
* @since 2.1.9
*/
height: void 0, // Reserved space for buttons and input
/**
* The border color of the date input boxes.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @type {Highcharts.ColorString}
* @since 1.3.7
*/
inputBoxBorderColor: 'none',
/**
* The pixel height of the date input boxes.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @since 1.3.7
*/
inputBoxHeight: 17,
/**
* The pixel width of the date input boxes. When `undefined`, the width
* is fitted to the rendered content.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @type {number|undefined}
* @since 1.3.7
*/
inputBoxWidth: void 0,
/**
* The date format in the input boxes when not selected for editing.
* Defaults to `%e %b %Y`.
*
* This is used to determine which type of input to show,
* `datetime-local`, `date` or `time` and falling back to `text` when
* the browser does not support the input type or the format contains
* milliseconds.
*
* @sample {highstock} stock/rangeselector/input-type/
* Input types
* @sample {highstock} stock/rangeselector/input-format/
* Milliseconds in the range selector
*
*/
inputDateFormat: '%[ebY]',
/**
* A custom callback function to parse values entered in the input boxes and
* return a valid JavaScript time as milliseconds since 1970. The first
* argument passed is the value to parse, second is a boolean indicating use
* of UTC time. The third is a reference to the `time` object. Time zone can
* be read from `time.timezone`.
*
* This will only get called for inputs of type `text`. Since v8.2.3, the
* input type is dynamically determined based on the granularity of the
* `inputDateFormat` and the browser support.
*
* @sample {highstock} stock/rangeselector/input-format/
* Milliseconds in the range selector
*
* @type {Highcharts.RangeSelectorParseCallbackFunction}
* @since 1.3.3
*/
inputDateParser: void 0,
/**
* The date format in the input boxes when they are selected for
* editing. This must be a format that is recognized by JavaScript
* Date.parse.
*
* This will only be used for inputs of type `text`. Since v8.2.3,
* the input type is dynamically determined based on the granularity
* of the `inputDateFormat` and the browser support.
*
* @sample {highstock} stock/rangeselector/input-format/
* Milliseconds in the range selector
*
*/
inputEditDateFormat: '%Y-%m-%d',
/**
* Enable or disable the date input boxes.
*/
inputEnabled: true,
/**
* Positioning for the input boxes. Allowed properties are `align`,
* `x` and `y`.
*
* @since 1.2.4
*/
inputPosition: {
/**
* The alignment of the input box. Allowed properties are `left`,
* `center`, `right`.
*
* @sample {highstock} stock/rangeselector/input-button-opposite-alignment/
* Opposite alignment
*
* @sample {highstock} stock/rangeselector/input-button-same-alignment/
* Same alignment for buttons and input
*
* @type {Highcharts.AlignValue}
* @since 6.0.0
*/
align: 'right',
/**
* X offset of the input row.
*/
x: 0,
/**
* Y offset of the input row.
*/
y: 0
},
/**
* The space in pixels between the labels and the date input boxes in
* the range selector.
*
* @since 9.0.0
*/
inputSpacing: 5,
/**
* The index of the button to appear pre-selected. If the selected range
* exceeds the total data range and the 'all' option is available,
* the 'all' option, showing the full range, is automatically selected.
*
* @type {number}
*/
selected: void 0,
/**
* Positioning for the button row.
*
* @since 1.2.4
*/
buttonPosition: {
/**
* The alignment of the input box. Allowed properties are `left`,
* `center`, `right`.
*
* @sample {highstock} stock/rangeselector/input-button-opposite-alignment/
* Opposite alignment
*
* @sample {highstock} stock/rangeselector/input-button-same-alignment/
* Same alignment for buttons and input
*
* @type {Highcharts.AlignValue}
* @since 6.0.0
*/
align: 'left',
/**
* X offset of the button row.
*/
x: 0,
/**
* Y offset of the button row.
*/
y: 0
},
/**
* CSS for the HTML inputs in the range selector.
*
* In styled mode, the inputs are styled by the
* `.highcharts-range-input text` rule in SVG mode, and
* `input.highcharts-range-selector` when active.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @type {Highcharts.CSSObject}
* @apioption rangeSelector.inputStyle
*/
inputStyle: {
/** @ignore */
color: "#334eff" /* Palette.highlightColor80 */,
/** @ignore */
cursor: 'pointer',
/** @ignore */
fontSize: '0.8em'
},
/**
* CSS styles for the labels - the Zoom, From and To texts.
*
* In styled mode, the labels are styled by the
* `.highcharts-range-label` class.
*
* @sample {highstock} stock/rangeselector/styling/
* Styling the buttons and inputs
*
* @type {Highcharts.CSSObject}
*/
labelStyle: {
/** @ignore */
color: "#666666" /* Palette.neutralColor60 */,
/** @ignore */
fontSize: '0.8em'
}
};
/* *
*
* Default Export
*
* */
const RangeSelectorDefaults = {
lang,
rangeSelector
};
export default RangeSelectorDefaults;