diagrama de grand

This commit is contained in:
humano 2020-05-23 15:45:54 -05:00
parent af1aabd94c
commit 4abbf01908
583 changed files with 355764 additions and 6 deletions

173
gantt.php Normal file
View File

@ -0,0 +1,173 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Gantt Example</title>
<style type="text/css">
#container {
max-width: 800px;
margin: 1em auto;
}
</style>
</head>
<body>
<script src="./librerias/gantt/code/highcharts-gantt.js"></script>
<script src="./librerias/gantt/code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
var today = new Date(),
day = 1000 * 60 * 60 * 24,
// Utility functions
dateFormat = Highcharts.dateFormat,
defined = Highcharts.defined,
isObject = Highcharts.isObject,
reduce = Highcharts.reduce;
Highcharts.ganttChart('container', {
series: [{
name: 'Offices',
data: [
{
"id": "8e647b88953955a0526144a01296188c",
"name": "Proyectos"
},
{
"id": "aa228450be56fb1943f2eb40bb687d98",
"name": "Kepe",
"start": 1588309200,
"end": 1593493200,
"restante": "38 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "8e647b88953955a0526144a01296188c",
"parent_nombre": "Proyectos"
},
{
"id": "a9881b5e7c205f3e5dbba8ba6a40ed19",
"name": "Recolección de requerimientos",
"start": 1590123600,
"end": 1590901200,
"restante": "8 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "aa228450be56fb1943f2eb40bb687d98",
"parent_nombre": "Kepe"
},
{
"id": "22b3e978f3d4d4cc89e9f0cb195a144d",
"name": "Montaje de servicios"
},
{
"id": "4fbde6339780a402349ddc0d307c7b86",
"name": "Gestor de usuarios y tareas",
"start": 1590937800,
"end": null,
"restante": "-1590194073 segundos",
"parent": "22b3e978f3d4d4cc89e9f0cb195a144d",
"parent_nombre": "Montaje de servicios"
},
{
"id": "03fe81aa14f23f47b952b6f1d36637b5",
"name": "Otra tarea",
"start": 1590037200,
"end": 1590642000,
"restante": "5 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "4fbde6339780a402349ddc0d307c7b86",
"parent_nombre": "Gestor de usuarios y tareas"
},
{
"id": "8ae8e207a2a997ed7ec93d3457f6f32e",
"name": "Socialización con los coordinadores",
"start": 1588309200,
"end": 1590901200,
"restante": "8 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "4fbde6339780a402349ddc0d307c7b86",
"parent_nombre": "Gestor de usuarios y tareas"
},
{
"id": "1b068f6ce2f85897a2f163e1fd1078bc",
"name": "Coordinación y administración"
},
{
"id": "b5281d5b30cb046b081a039f7e383d6d",
"name": "Convenio universidad del Quindio",
"start": 1588309200,
"end": 1590901200,
"restante": "8 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "1b068f6ce2f85897a2f163e1fd1078bc",
"parent_nombre": "Coordinación y administración"
},
{
"id": "cf499f210d28afdb86c4e83456fbf605",
"name": "buscar contacto",
"start": 1590123600,
"end": 1590728400,
"restante": "6 d\u00edas, 4 horas, 25 minutos, 27 segundos",
"parent": "b5281d5b30cb046b081a039f7e383d6d",
"parent_nombre": "Convenio universidad del Quindio"
}
]
}],
tooltip: {
pointFormatter: function () {
var point = this,
format = '%e. %b',
options = point.options,
completed = options.completed,
amount = isObject(completed) ? completed.amount : completed,
status = ((amount || 0) * 100) + '%',
lines;
lines = [{
value: point.name,
style: 'font-weight: bold;'
}, {
title: 'Start',
value: dateFormat(format, point.start)
}, {
visible: !options.milestone,
title: 'End',
value: dateFormat(format, point.end)
}, {
title: 'Completed',
value: status
}, {
title: 'Owner',
value: options.owner || 'unassigned'
}];
return reduce(lines, function (str, line) {
var s = '',
style = (
defined(line.style) ? line.style : 'font-size: 0.8em;'
);
if (line.visible !== false) {
s = (
'<span style="' + style + '">' +
(defined(line.title) ? line.title + ': ' : '') +
(defined(line.value) ? line.value : '') +
'</span><br/>'
);
}
return str + s;
}, '');
}
},
title: {
text: ''
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
}
});
</script>
</body>
</html>

158
index.php
View File

@ -155,11 +155,16 @@ if($plantilla_inicio[0] =="grid"){}else{
$logo = remplacetas('empresa','id',"$v[1]",'imagen','') ;
$modo="minimalista";
$plantilla_inicio[0]='grid';
$librerias = "
<script src='./librerias/gantt/code/highcharts-gantt.js'></script>
<script src='./librerias/gantt/code/modules/exporting.js'></script>
";
//$no_mostrar="display:none; ";
$asistento="hide ";
/// datos proyecto
$formulario_proyectos ="1070";
$campo_proyectos ="3705";
/// datos equipo
$formulario_equipo ="998";
$campo_equipo ="316";
@ -169,8 +174,10 @@ if($plantilla_inicio[0] =="grid"){}else{
$campo_rol ="325";
/// datos tareas
$formulario_tareas ="1069";
$campo_tareas ="3715";
/// datos microtareas
$formulario_microtarea ="1071";
$campo_microtarea ="3710";
$formulario_microtarea_asignacion ="1075";
$campo_microtareas_asignacion = "3722";
@ -188,13 +195,19 @@ if($plantilla_inicio[0] =="grid"){}else{
/// microtareas ///
$formularios_microtareas['formulario_proyectos']=$formulario_proyectos;
$formularios_microtareas['campo_proyectos']=$campo_proyectos;
$formularios_microtareas['formulario_tareas']=$formulario_tareas;
$formularios_microtareas['campo_tareas']=$campo_tareas;
$formularios_microtareas['formulario_microtarea']=$formulario_microtarea;
$formularios_microtareas['formulario_microtarea_asignacion']=$formulario_microtarea_asignacion;
$formularios_microtareas['campo_microtarea_asignacion']=$campo_microtarea_asignacion;
$formularios_microtareas['campo_microtarea']=$campo_microtarea;
$formularios_microtareas['campo_microtareas_asignacion']=$campo_microtareas_asignacion;
$formularios_microtareas['formulario_microtarea_asignacion']="$formulario_microtarea_asignacion";
$formularios_microtareas['formulario_equipo']="$formulario_equipo";
$formularios_microtareas['campo_equipo']="$campo_equipo";
$microtareas_planilla = planilla("$formulario_microtarea","10",'exportable');
//$microtareas_planilla = planilla("$formulario_microtarea","10",'exportable');
$gantt_array = gantt($formularios_microtareas,"array","");
$microtarea_titulo = remplacetas('form_id','id',"$formulario_microtarea",'nombre',"") ;
$microtarea_descripcion = remplacetas('form_id','id',"$formulario_microtarea",'descripcion',"") ;
@ -246,7 +259,7 @@ foreach($proyectos as $control_proyecto => $valor_proyecto)
$microtarea_listado = microtareas($formularios_microtareas,"","");
$pagina_inicio="
$librerias
<style>
.avatar {
vertical-align: middle;
@ -308,8 +321,143 @@ foreach($proyectos as $control_proyecto => $valor_proyecto)
<p></p>
</div>
<div class='container'>
<div class='columna_informes' style='height:600px; overflow: auto;'>
$microtareas_planilla
<div class='columna_informes' style='height:800px; overflow: auto;'>
<div id='container_gantt'></div>
<script type='text/javascript'>
var today = new Date(),
day = 1000 * 60 * 60 * 24,
dateFormat = Highcharts.dateFormat,
defined = Highcharts.defined,
isObject = Highcharts.isObject,
reduce = Highcharts.reduce;
Highcharts.setOptions({
lang: {
months: [
'Enero', 'Febrero', 'Marzo', 'Abril',
'Mayo', 'Junio', 'Julio', 'Agosto',
'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
],
weekdays: [
'Domingo', 'Lunes', 'Martes', 'Mmiercoles',
'Jueves', 'Viernes', 'Sabado'
]
}
});
var myDateFormat = '%e/%m/%y';
Highcharts.ganttChart('container_gantt', {
series: [{
name: 'Proyecto',
data: [ $gantt_array ]
}],
tooltip: {
pointFormatter: function () {
var point = this,
format = '%e. %b',
options = point.options,
completed = options.completed,
amount = isObject(completed) ? completed.amount : completed,
status = ((amount || 0) * 100) + '%',
lines;
lines = [{
value: point.name,
style: 'font-weight: bold;'
}, {
title: 'Inicio',
value: dateFormat(format, point.start)
}, {
visible: !options.milestone,
title: 'Fin',
value: dateFormat(format, point.end)
}, {
title: 'Completed',
value: status
}, {
title: 'Owner',
value: options.owner || 'unassigned'
}];
return reduce(lines, function (str, line) {
var s = '',
style = (
defined(line.style) ? line.style : 'font-size: 0.8em;'
);
if (line.visible !== false) {
s = (
'<span style=\"' + style + '\">' +
(defined(line.title) ? line.title + ': ' : '') +
(defined(line.value) ? line.value : '') +
'</span><br/>'
);
}
return str + s;
}, '');
}
},
title: {
text: ''
},
yAxis: [{
uniqueNames: true
}],
xAxis: [
{dateTimeLabelFormats: {week: 'Semana %W'}},
{id: 'bottom-datetime-axis',
currentDateIndicator: {
width: 3,
dashStyle: '',
color: 'red',
label: {
format: '%Y-%M-%d'
}
},
tickInterval: day,
labels: {
format: '{value:%a}'
}
},
{dateTimeLabelFormats: {month: ' %b' }}
],
navigator: {
enabled: true,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25
},
yAxis: {
min: 0,
max: 3,
reversed: true,
categories: []
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 0
},
});
</script>
</div>
</div>

View File

@ -0,0 +1,235 @@
.highcharts-popup.highcharts-annotation-toolbar {
right: 10%;
left: auto;
height: 40px;
overflow: hidden;
padding-right: 40px;
width: auto;
min-width: 0;
}
.highcharts-popup.highcharts-annotation-toolbar button {
margin-top: 0px;
}
.highcharts-popup.highcharts-annotation-toolbar > span {
display: block;
float: left;
padding: 12px;
}
.highcharts-popup {
background-color: #fff;
color: #666;
display: none;
font-size: 0.876em;
max-height: 90%;
top: 5%;
left: 15%;
overflow-x: hidden;
overflow-y: auto;
width: 75%;
min-width: 300px;
max-width: 600px;
position: absolute;
z-index: 100;
-webkit-box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
box-shadow: 0px 0px 8px 0px rgba(61, 61, 61, 0.3);
}
.highcharts-popup div, .highcharts-popup span {
box-sizing: content-box;
}
.highcharts-popup input, .highcharts-popup label, .highcharts-popup select {
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
.highcharts-popup input {
border: 1px solid #e6e6e6;
padding: 5px;
width: calc(100% - 12px);
}
.highcharts-popup-lhs-col, .highcharts-popup-rhs-col {
padding: 20px;
height: calc(100% - 84px);
/* 44px - padding, 40px - tabs*/
float: left;
}
.highcharts-popup-lhs-col.highcharts-popup-lhs-full {
width: calc(100% - 52px);
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 140px);
border: none;
padding: 0px 20px 20px 20px;
}
.highcharts-popup-lhs-col.highcharts-popup-lhs-full + .highcharts-popup-bottom-row {
width: calc(100% - 32px);
}
.highcharts-popup-lhs-col {
clear: both;
width: calc(30% - 44px);
border-right: 1px solid #e6e6e6;
}
.highcharts-popup-bottom-row {
float: left;
padding: 0px 20px;
width: calc(100% - 40px);
}
.highcharts-popup-rhs-col {
width: calc(70% - 40px);
}
.highcharts-popup-rhs-col-wrapper {
float: left;
width: calc(100% - 20px);
padding-right: 20px;
height: calc(100% - 40px);
overflow-y: auto;
overflow-x: hidden;
}
.highcharts-popup-rhs-col-wrapper h3 {
margin-top: 0px;
padding-bottom: 0px;
}
.highcharts-bindings-wrapper ul.highcharts-indicator-list,
.highcharts-indicator-list {
float: left;
color: #666;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.highcharts-indicator-list li {
cursor: pointer;
padding: 0px 0px 5px 0px;
margin: 0px;
width: 100%;
height: auto;
overflow: hidden;
word-break: break-all;
}
.highcharts-indicator-list li:hover {
background-color: #e6ebf5;
}
.highcharts-tab-item {
background-color: #f7f7f7;
cursor: pointer;
display: block;
float: left;
padding: 10px;
height: 20px;
}
.highcharts-tab-item.highcharts-tab-item-active {
background-color: #e6ebf5;
}
.highcharts-tab-item-content {
display: none;
float: left;
height: 100%;
overflow: hidden;
width: 100%;
border-top: 1px solid #e6e6e6;
}
.highcharts-tab-item-show {
display: block;
}
.highcharts-popup-close {
background-repeat: no-repeat;
background-position: 50% 50%;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
padding: 10px;
top: 0%;
right: 0%;
color: #333333;
}
.highcharts-popup-close:hover,
.highcharts-popup button:hover,
.highcharts-popup button.highcharts-annotation-edit-button:hover,
.highcharts-popup button.highcharts-annotation-remove-button:hover {
background-color: #e6ebf5;
}
.highcharts-popup button {
float: right;
border: none;
background: #f7f7f7;
color: #666;
margin-left: 5px;
margin-top: 12px;
}
.highcharts-popup button:first-child {
margin-left: 0;
}
.highcharts-tab-disabled {
color: #ccc;
}
/* annotation edit small popup */
.highcharts-popup button.highcharts-annotation-edit-button,
.highcharts-popup button.highcharts-annotation-remove-button {
width: 20px;
height: 40px;
padding: 20px;
}
.highcharts-popup button.highcharts-annotation-edit-button {
background-repeat: no-repeat;
background-position: 50% 50%;
text-indent: -9999px;
}
.highcharts-popup button.highcharts-annotation-remove-button {
background-repeat: no-repeat;
background-position: 50% 50%;
text-indent: -9999px;
}
.highcharts-popup .highcharts-annotation-title {
display: block;
float: left;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
width: 100%;
}
.highcharts-popup .highcharts-popup-main-title {
border-bottom: 1px solid #e6e6e6;
margin: 0px 0px 20px 0px;
padding: 8px 0px 6px 20px;
}
.highcharts-indicator-title {
float: left;
padding-bottom: 15px;
}

View File

@ -0,0 +1,239 @@
// Colors for buttons.
$button-background-color: #f7f7f7;
$button-hover-color: #e6ebf5;
.highcharts-popup.highcharts-annotation-toolbar {
right: 10%;
left: auto;
height: 40px;
overflow: hidden;
padding-right: 40px;
width: auto;
min-width: 0;
}
.highcharts-popup.highcharts-annotation-toolbar button {
margin-top:0px;
}
.highcharts-popup.highcharts-annotation-toolbar > span {
display:block;
float:left;
padding: 12px;
}
.highcharts-popup {
background-color: #fff;
color: #666;
display: none;
font-size: 0.876em;
max-height: 90%;
top: 5%;
left: 15%;
overflow-x: hidden;
overflow-y: auto;
width: 75%;
min-width: 300px;
max-width: 600px;
position: absolute;
z-index: 100;
-webkit-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
-moz-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
}
.highcharts-popup div, .highcharts-popup span {
box-sizing: content-box;
}
.highcharts-popup input, .highcharts-popup label, .highcharts-popup select {
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
.highcharts-popup input {
border: 1px solid #e6e6e6;
padding: 5px;
width: calc(100% - 12px);
}
.highcharts-popup-lhs-col, .highcharts-popup-rhs-col {
padding: 20px;
height: calc(100% - 84px); /* 44px - padding, 40px - tabs*/
float: left;
}
.highcharts-popup-lhs-col.highcharts-popup-lhs-full {
width: calc(100% - 52px);
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 140px);
border: none;
padding: 0px 20px 20px 20px;
}
.highcharts-popup-lhs-col.highcharts-popup-lhs-full + .highcharts-popup-bottom-row {
width: calc(100% - 32px);
}
.highcharts-popup-lhs-col {
clear: both;
width: calc(30% - 44px);
border-right: 1px solid #e6e6e6;
}
.highcharts-popup-bottom-row {
float: left;
padding: 0px 20px;
width: calc(100% - 40px);
}
.highcharts-popup-rhs-col {
width: calc(70% - 40px);
}
.highcharts-popup-rhs-col-wrapper {
float: left;
width: calc(100% - 20px);
padding-right: 20px;
height: calc(100% - 40px);
overflow-y: auto;
overflow-x: hidden;
}
.highcharts-popup-rhs-col-wrapper h3 {
margin-top:0px;
padding-bottom:0px;
}
.highcharts-bindings-wrapper ul.highcharts-indicator-list,
.highcharts-indicator-list {
float: left;
color: #666;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.highcharts-indicator-list li {
cursor: pointer;
padding: 0px 0px 5px 0px;
margin: 0px;
width: 100%;
height: auto;
overflow: hidden;
word-break: break-all;
}
.highcharts-indicator-list li:hover {
background-color: $button-hover-color;
}
.highcharts-tab-item {
background-color: $button-background-color;
cursor: pointer;
display: block;
float:left;
padding: 10px;
height: 20px;
}
.highcharts-tab-item.highcharts-tab-item-active {
background-color: $button-hover-color;
}
.highcharts-tab-item-content {
display: none;
float: left;
height: 100%;
overflow: hidden;
width: 100%;
border-top: 1px solid #e6e6e6;
}
.highcharts-tab-item-show {
display: block;
}
.highcharts-popup-close {
background-repeat: no-repeat;
background-position: 50% 50%;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
padding: 10px;
top: 0%;
right: 0%;
color: #333333;
}
.highcharts-popup-close:hover,
.highcharts-popup button:hover,
.highcharts-popup button.highcharts-annotation-edit-button:hover,
.highcharts-popup button.highcharts-annotation-remove-button:hover {
background-color: $button-hover-color;
}
.highcharts-popup button {
float: right;
border: none;
background: $button-background-color;
color: #666;
margin-left:5px;
margin-top:12px;
}
.highcharts-popup button:first-child {
margin-left: 0;
}
.highcharts-tab-disabled {
color: #ccc;
}
/* annotation edit small popup */
.highcharts-popup button.highcharts-annotation-edit-button,
.highcharts-popup button.highcharts-annotation-remove-button {
width: 20px;
height: 40px;
padding: 20px;
}
.highcharts-popup button.highcharts-annotation-edit-button {
background-repeat: no-repeat;
background-position: 50% 50%;
text-indent: -9999px;
}
.highcharts-popup button.highcharts-annotation-remove-button {
background-repeat: no-repeat;
background-position: 50% 50%;
text-indent: -9999px;
}
.highcharts-popup .highcharts-annotation-title {
display: block;
float: left;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
width: 100%;
}
.highcharts-popup .highcharts-popup-main-title {
border-bottom: 1px solid #e6e6e6;
margin: 0px 0px 20px 0px;
padding: 8px 0px 6px 20px;
}
.highcharts-indicator-title {
float: left;
padding-bottom: 15px;
}

View File

@ -0,0 +1,938 @@
/**
* @license Highcharts
*
* (c) 2009-2016 Torstein Honsi
*
* License: www.highcharts.com/license
*/
.highcharts-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
line-height: normal;
z-index: 0;
/* #1072 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root {
display: block;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-emphasized {
font-style: italic;
}
.highcharts-anchor {
cursor: pointer;
}
.highcharts-background {
fill: #ffffff;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
.highcharts-tracker-line {
stroke-linejoin: round;
stroke: rgba(192, 192, 192, 0.0001);
stroke-width: 22;
fill: none;
}
.highcharts-tracker-area {
fill: rgba(192, 192, 192, 0.0001);
stroke-width: 0;
}
/* Titles */
.highcharts-title {
fill: #333333;
font-size: 1.5em;
}
.highcharts-subtitle {
fill: #666666;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: #666666;
}
.highcharts-axis-labels {
fill: #666666;
cursor: default;
font-size: 0.9em;
}
.highcharts-grid-line {
fill: none;
stroke: #e6e6e6;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 0px;
}
.highcharts-tick {
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: #f2f2f2;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: #cccccc;
}
.highcharts-crosshair-category {
stroke: #ccd6eb;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
cursor: pointer;
fill: #999999;
font-size: 0.7em;
transition: fill 250ms, font-size 250ms;
}
.highcharts-credits:hover {
fill: black;
font-size: 1em;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: #333333;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 1px;
fill: #f7f7f7;
fill-opacity: 0.85;
}
.highcharts-tooltip-box .highcharts-label-box {
fill: #f7f7f7;
fill-opacity: 0.85;
}
div.highcharts-tooltip {
filter: none;
}
.highcharts-selection-marker {
fill: #335cad;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-point-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-series-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-state-hover path {
transition: stroke-width 50ms;
/* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms;
/* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
.highcharts-color-0 {
fill: #7cb5ec;
stroke: #7cb5ec;
}
.highcharts-color-1 {
fill: #434348;
stroke: #434348;
}
.highcharts-color-2 {
fill: #90ed7d;
stroke: #90ed7d;
}
.highcharts-color-3 {
fill: #f7a35c;
stroke: #f7a35c;
}
.highcharts-color-4 {
fill: #8085e9;
stroke: #8085e9;
}
.highcharts-color-5 {
fill: #f15c80;
stroke: #f15c80;
}
.highcharts-color-6 {
fill: #e4d354;
stroke: #e4d354;
}
.highcharts-color-7 {
fill: #2b908f;
stroke: #2b908f;
}
.highcharts-color-8 {
fill: #f45b5b;
stroke: #f45b5b;
}
.highcharts-color-9 {
fill: #91e8e1;
stroke: #91e8e1;
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: #ffffff;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
fill: #333333;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-data-label-hidden {
pointer-events: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
fill: #cccccc;
stroke: #000000;
}
.highcharts-column-series rect.highcharts-point {
stroke: #ffffff;
}
.highcharts-column-series .highcharts-point {
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: #e6e6e6;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: #999999;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
.highcharts-vector-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-windbarb-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-lollipop-stem {
stroke: #000000;
}
.highcharts-focus-border {
fill: none;
stroke-width: 2px;
}
.highcharts-legend-item-hidden .highcharts-focus-border {
fill: none !important;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item > text {
fill: #333333;
font-weight: bold;
font-size: 1em;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: #000000;
}
.highcharts-legend-item-hidden * {
fill: #cccccc !important;
stroke: #cccccc !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: #003399;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: #cccccc;
}
circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
/* tracker */
fill: rgba(192, 192, 192, 0.0001);
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Bubble legend */
.highcharts-bubble-legend-symbol {
stroke-width: 2;
fill-opacity: 0.5;
}
.highcharts-bubble-legend-connectors {
stroke-width: 1;
}
.highcharts-bubble-legend-labels {
fill: #333333;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: #ffffff;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band, .highcharts-pane {
fill: #000000;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: #999999;
stroke-width: 1px;
}
/* Highcharts More and modules */
.highcharts-boxplot-box {
fill: #ffffff;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: #000000;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: #000000;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: #333333;
stroke-dasharray: 1, 3;
}
.highcharts-sankey-series .highcharts-point {
stroke-width: 0;
}
.highcharts-sankey-series .highcharts-link {
transition: fill 250ms, fill-opacity 250ms;
fill-opacity: 0.5;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
transition: fill 50ms, fill-opacity 50ms;
fill-opacity: 1;
}
.highcharts-venn-series .highcharts-point {
fill-opacity: 0.75;
stroke: #cccccc;
transition: stroke 250ms, fill-opacity 250ms;
}
.highcharts-venn-series .highcharts-point-hover {
fill-opacity: 1;
stroke: #cccccc;
}
/* Highstock */
.highcharts-navigator-mask-outside {
fill-opacity: 0;
}
.highcharts-navigator-mask-inside {
fill: #6685c2;
/* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: #cccccc;
fill: none;
}
.highcharts-navigator-handle {
stroke: #cccccc;
fill: #f2f2f2;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: #335cad;
stroke: #335cad;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: #e6e6e6;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: #999999;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: #cccccc;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: #e6e6e6;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: #666666;
}
.highcharts-scrollbar-rifles {
stroke: #666666;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: #f2f2f2;
stroke: #f2f2f2;
stroke-width: 1px;
}
.highcharts-button {
fill: #f7f7f7;
stroke: #cccccc;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: #333333;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: #e6e6e6;
stroke: #cccccc;
}
.highcharts-button-hover text {
fill: #333333;
}
.highcharts-button-pressed {
font-weight: bold;
fill: #e6ebf5;
stroke: #cccccc;
}
.highcharts-button-pressed text {
fill: #333333;
font-weight: bold;
}
.highcharts-button-disabled text {
fill: #333333;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0px;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: #666666;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: #333333;
}
.highcharts-range-input {
stroke-width: 1px;
stroke: #cccccc;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px;
/* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em;
/* #4798 */
}
.highcharts-crosshair-label text {
fill: #ffffff;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: #000000;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: #ffffff;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point .highcharts-label-box {
stroke: #999999;
fill: #ffffff;
transition: fill 250ms;
}
.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
stroke: #000000;
fill: #ccd6eb;
}
.highcharts-flags-series .highcharts-point text {
fill: #000000;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: #cccccc;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: #999999;
}
.highcharts-null-point {
fill: #f7f7f7;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
/* Exporting module */
.highcharts-contextbutton {
fill: #ffffff;
/* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: #e6e6e6;
stroke: #e6e6e6;
}
.highcharts-button-symbol {
stroke: #666666;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid #999999;
background: #ffffff;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: #333333;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: #335cad;
color: #ffffff;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
cursor: pointer;
fill: #003399;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: #666666;
}
/* Drag-panes module */
.highcharts-axis-resizer {
cursor: ns-resize;
stroke: black;
stroke-width: 2px;
}
/* Bullet type series */
.highcharts-bullet-target {
stroke-width: 0;
}
/* Lineargauge type series */
.highcharts-lineargauge-target {
stroke-width: 1px;
stroke: #333333;
}
.highcharts-lineargauge-target-line {
stroke-width: 1px;
stroke: #333333;
}
/* Annotations module */
.highcharts-annotation-label-box {
stroke-width: 1px;
stroke: #000000;
fill: #000000;
fill-opacity: 0.75;
}
.highcharts-annotation-label text {
fill: #e6e6e6;
}
/* Gantt */
.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
cursor: pointer;
}
.highcharts-point-connecting-path {
fill: none;
}
.highcharts-grid-axis .highcharts-tick {
stroke-width: 1px;
}
.highcharts-grid-axis .highcharts-axis-line {
stroke-width: 1px;
}

View File

@ -0,0 +1,829 @@
/**
* @license Highcharts
*
* (c) 2009-2016 Torstein Honsi
*
* License: www.highcharts.com/license
*/
// Colors for data series and points.
$colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1 !default;
// Chart background, point stroke for markers and columns etc
$background-color: #ffffff !default;
// Neutral colors, grayscale by default. The default colors are defined by mixing the
// background-color with neutral, with a weight corresponding to the number in the name.
$neutral-color-100: #000000 !default; // Strong text.
$neutral-color-80: #333333 !default; // Main text and some strokes.
$neutral-color-60: #666666 !default; // Axis labels, axis title, connector fallback.
$neutral-color-40: #999999 !default; // Credits text, export menu stroke.
$neutral-color-20: #cccccc !default; // Disabled texts, button strokes, crosshair etc.
$neutral-color-10: #e6e6e6 !default; // Grid lines etc.
$neutral-color-5: #f2f2f2 !default; // Minor grid lines etc.
$neutral-color-3: #f7f7f7 !default; // Tooltip backgroud, button fills, map null points.
// Colored, shades of blue by default
$highlight-color-100: #003399 !default; // Drilldown clickable labels, color axis max color.
$highlight-color-80: #335cad !default; // Selection marker, menu hover, button hover, chart border, navigator series.
$highlight-color-60: #6685c2 !default; // Navigator mask fill.
$highlight-color-20: #ccd6eb !default; // Ticks and axis line.
$highlight-color-10: #e6ebf5 !default; // Pressed button, color axis min color.
// Fonts
$font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif !default;
$title-font-size: 1.5em !default;
$subtitle-font-size: 1em !default;
$legend-font-size: 1em !default;
$axis-labels-font-size: 0.9em !default;
// Tooltip
$tooltip-border: 1px !default;
$tooltip-background: $neutral-color-3 !default;
// Axes
$xaxis-grid-line: 0px !default;
// Range-selector
$range-selector-button-border: 0px !default;
$range-selector-input-text: $neutral-color-80 !default;
$range-selector-input-border: $neutral-color-20 !default;
// Data-labels
$data-label-color: $neutral-color-80 !default;
// Buttons
$context-button-background: $background-color !default;
$highcharts-button-background: $neutral-color-3 !default;
$highcharts-button-border: $neutral-color-20 !default;
$highcharts-button-text: $neutral-color-80 !default;
$highcharts-button-pressed-background: $highlight-color-10 !default;
$highcharts-button-pressed-border: $neutral-color-20 !default;
$highcharts-button-pressed-text: $neutral-color-80 !default;
$highcharts-button-hover-background: $neutral-color-10 !default;
$highcharts-button-hover-border: $neutral-color-20 !default;
$highcharts-button-hover-text: $neutral-color-80 !default;
// Navigator
$navigator-series-fill: $highlight-color-80 !default;
$navigator-series-border: $highlight-color-80 !default;
// Scrollbar
$scrollbar-track-background: $neutral-color-5 !default;
$scrollbar-track-border: $neutral-color-5 !default;
// Indicators
$indicator-positive-line: #06B535;
$indicator-negative-line: #F21313;
.highcharts-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
line-height: normal;
z-index: 0; /* #1072 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-family: $font-family;
font-size: 12px;
}
.highcharts-root {
display: block;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-emphasized {
font-style: italic;
}
.highcharts-anchor {
cursor: pointer;
}
.highcharts-background {
fill: $background-color;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
.highcharts-tracker-line {
stroke-linejoin: round;
stroke: rgba(192, 192, 192, 0.0001);
stroke-width: 22;
fill: none;
}
.highcharts-tracker-area {
fill: rgba(192, 192, 192, 0.0001);
stroke-width: 0;
}
/* Titles */
.highcharts-title {
fill: $neutral-color-80;
font-size: $title-font-size;
}
.highcharts-subtitle {
fill: $neutral-color-60;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: $neutral-color-60;
}
.highcharts-axis-labels {
fill: $neutral-color-60;
cursor: default;
font-size: $axis-labels-font-size;
}
.highcharts-grid-line {
fill: none;
stroke: $neutral-color-10;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: $xaxis-grid-line;
}
.highcharts-tick {
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: $neutral-color-5;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: $neutral-color-20;
}
.highcharts-crosshair-category {
stroke: $highlight-color-20;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
cursor: pointer;
fill: $neutral-color-40;
font-size: 0.7em;
transition: fill 250ms, font-size 250ms;
}
.highcharts-credits:hover {
fill: black;
font-size: 1em;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: $neutral-color-80;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: $tooltip-border;
fill: $tooltip-background;
fill-opacity: 0.85;
}
.highcharts-tooltip-box .highcharts-label-box {
fill: $tooltip-background;
fill-opacity: 0.85;
}
div.highcharts-tooltip {
filter: none;
}
.highcharts-selection-marker {
fill: $highlight-color-80;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-point-inactive {
opacity: 0.2;
transition: opacity 50ms; /* quick in */
}
.highcharts-series-inactive {
opacity: 0.2;
transition: opacity 50ms; /* quick in */
}
.highcharts-state-hover path {
transition: stroke-width 50ms; /* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms; /* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
@for $i from 1 through length($colors) {
$color: nth($colors, $i);
.highcharts-color-#{$i - 1} {
fill: $color;
stroke: $color;
}
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: $background-color;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
fill: $data-label-color;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-data-label-hidden {
pointer-events: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
fill: $neutral-color-20;
stroke: $neutral-color-100;
}
.highcharts-column-series rect.highcharts-point {
// rect to prevent stroke on 3D columns
stroke: $background-color;
}
.highcharts-column-series .highcharts-point {
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: $neutral-color-10;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: $neutral-color-40;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
.highcharts-vector-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-windbarb-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-lollipop-stem {
stroke: $neutral-color-100;
}
.highcharts-focus-border {
fill: none;
stroke-width: 2px;
}
.highcharts-legend-item-hidden .highcharts-focus-border {
fill: none !important;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item > text {
fill: $neutral-color-80;
font-weight: bold;
font-size: $legend-font-size;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: $neutral-color-100;
}
.highcharts-legend-item-hidden * {
fill: $neutral-color-20 !important;
stroke: $neutral-color-20 !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: $highlight-color-100;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: $neutral-color-20;
}
circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive { /* tracker */
fill: rgba(192, 192, 192, 0.0001);
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Bubble legend */
.highcharts-bubble-legend-symbol {
stroke-width: 2;
fill-opacity: 0.5;
}
.highcharts-bubble-legend-connectors {
stroke-width: 1;
}
.highcharts-bubble-legend-labels {
fill: $neutral-color-80;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: $background-color;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band, .highcharts-pane {
fill: $neutral-color-100;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: $neutral-color-40;
stroke-width: 1px;
}
/* Highcharts More and modules */
.highcharts-boxplot-box {
fill: $background-color;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: $neutral-color-100;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: $neutral-color-100;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: $neutral-color-80;
stroke-dasharray: 1, 3;
}
.highcharts-sankey-series .highcharts-point {
stroke-width: 0;
}
.highcharts-sankey-series .highcharts-link {
transition: fill 250ms, fill-opacity 250ms;
fill-opacity: 0.5;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
transition: fill 50ms, fill-opacity 50ms;
fill-opacity: 1;
}
.highcharts-venn-series .highcharts-point {
fill-opacity: 0.75;
stroke: $neutral-color-20;
transition: stroke 250ms, fill-opacity 250ms;
}
.highcharts-venn-series .highcharts-point-hover {
fill-opacity: 1;
stroke: $neutral-color-20;
}
/* Highstock */
.highcharts-navigator-mask-outside {
fill-opacity: 0;
}
.highcharts-navigator-mask-inside {
fill: $highlight-color-60; /* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: $neutral-color-20;
fill: none;
}
.highcharts-navigator-handle {
stroke: $neutral-color-20;
fill: $neutral-color-5;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: $navigator-series-fill;
stroke: $navigator-series-border;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: $neutral-color-10;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: $neutral-color-40;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: $neutral-color-20;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: $neutral-color-10;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: $neutral-color-60;
}
.highcharts-scrollbar-rifles {
stroke: $neutral-color-60;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: $scrollbar-track-background;
stroke: $scrollbar-track-border;
stroke-width: 1px;
}
.highcharts-button {
fill: $highcharts-button-background;
stroke: $highcharts-button-border;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: $highcharts-button-text;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: $highcharts-button-hover-background;
stroke: $highcharts-button-hover-border;
}
.highcharts-button-hover text {
fill: $highcharts-button-hover-text;
}
.highcharts-button-pressed {
font-weight: bold;
fill: $highcharts-button-pressed-background;
stroke: $highcharts-button-pressed-border;
}
.highcharts-button-pressed text {
fill: $highcharts-button-pressed-text;
font-weight: bold;
}
.highcharts-button-disabled text {
fill: $highcharts-button-text;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: $range-selector-button-border;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: $neutral-color-60;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: $range-selector-input-text;
}
.highcharts-range-input {
stroke-width:1px;
stroke: $range-selector-input-border;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px; /* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em; /* #4798 */
}
.highcharts-crosshair-label text {
fill: $background-color;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: $neutral-color-100;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: $background-color;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point .highcharts-label-box {
stroke: $neutral-color-40;
fill: $background-color;
transition: fill 250ms;
}
.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
stroke: $neutral-color-100;
fill: $highlight-color-20;
}
.highcharts-flags-series .highcharts-point text {
fill: $neutral-color-100;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: $neutral-color-20;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: $neutral-color-40;
}
.highcharts-null-point {
fill: $neutral-color-3;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
/* Exporting module */
.highcharts-contextbutton {
fill: $context-button-background; /* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: $neutral-color-10;
stroke: $neutral-color-10;
}
.highcharts-button-symbol {
stroke: $neutral-color-60;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid $neutral-color-40;
background: $background-color;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: $neutral-color-80;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: $highlight-color-80;
color: $background-color;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
cursor: pointer;
fill: $highlight-color-100;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: $neutral-color-60;
}
/* Drag-panes module */
.highcharts-axis-resizer {
cursor: ns-resize;
stroke: black;
stroke-width: 2px;
}
/* Bullet type series */
.highcharts-bullet-target {
stroke-width: 0;
}
/* Lineargauge type series */
.highcharts-lineargauge-target {
stroke-width: 1px;
stroke: $neutral-color-80;
}
.highcharts-lineargauge-target-line {
stroke-width: 1px;
stroke: $neutral-color-80;
}
/* Annotations module */
.highcharts-annotation-label-box {
stroke-width: 1px;
stroke: $neutral-color-100;
fill: $neutral-color-100;
fill-opacity: 0.75;
}
.highcharts-annotation-label text {
fill: $neutral-color-10;
}
/* Gantt */
.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
cursor: pointer;
}
.highcharts-point-connecting-path {
fill: none;
}
.highcharts-grid-axis .highcharts-tick {
stroke-width: 1px;
}
.highcharts-grid-axis .highcharts-axis-line {
stroke-width: 1px;
}

View File

@ -0,0 +1,265 @@
.chart:-webkit-full-screen {
width: 100%;
height: 100%;
}
.chart:-moz-full-screen {
width: 100%;
height: 100%;
}
.chart:-ms-fullscreen {
width: 100%;
height: 100%;
}
.chart:fullscreen {
width: 100%;
height: 100%;
}
.chart {
width: 100%;
float: left;
height: 400px;
position: relative;
}
.highcharts-draw-mode {
cursor: crosshair;
}
.highcharts-bindings-wrapper * {
box-sizing: content-box;
}
.highcharts-bindings-wrapper {
display: block;
width: 40px;
height: 100%;
position: absolute;
z-index: 10;
}
.highcharts-stocktools-popup {
width: 100%;
}
.highcharts-menu-wrapper {
float: left;
width: 40px;
height: calc(100% - 50px);
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
.highcharts-bindings-wrapper .highcharts-submenu-wrapper {
display: none;
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
background: #fff;
width: 40px;
}
.highcharts-bindings-wrapper .highcharts-arrow-wrapper {
text-align: center;
width: 40px;
position: absolute;
left: 10px;
bottom: 10px;
font-size: 1.5em;
}
.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div {
cursor: pointer;
}
.highcharts-bindings-wrapper .highcharts-arrow-down {
background-size: cover;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
transform: rotate(90deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-up {
background-size: cover;
outline: none;
display: inline-block;
width: 25px;
cursor: pointer;
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-right {
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
.highcharts-bindings-wrapper .highcharts-arrow-left.highcharts-arrow-right {
/* Safari */
-webkit-transform: rotate(0deg);
/* Firefox */
-moz-transform: rotate(0deg);
/* IE */
-ms-transform: rotate(0deg);
/* Opera */
-o-transform: rotate(0deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
transform: rotate(0deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-left {
/* Safari */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
transform: rotate(180deg);
}
.highcharts-bindings-wrapper ul {
width: 40px;
/* 30px spacing for arrows to scroll */
margin: 0px;
padding: 0px;
float: left;
transition: margin 250ms;
}
.highcharts-bindings-wrapper > ul {
width: 40px;
position: relative;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li {
list-style: none;
margin-bottom: 3px;
padding: 0px;
clear: both;
width: 100%;
height: 40px;
cursor: pointer;
position: relative;
background-color: #f7f7f7;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
cursor: default;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn > .highcharts-menu-item-btn {
opacity: 0.5;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
background: #f7f7f7;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
background-color: transparent;
}
.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn {
display: block;
float: left;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.highcharts-submenu-wrapper li > span.highcharts-menu-item-btn {
width: 40px;
}
.highcharts-bindings-wrapper li > span.highcharts-submenu-item-arrow {
float: left;
width: 10px;
height: 100%;
cursor: pointer;
position: absolute;
bottom: 0px;
right: 0px;
}
.highcharts-bindings-wrapper li.highcharts-separator {
height: 15px;
background-color: transparent;
width: 36px;
pointer-events: none;
}
.highcharts-bindings-wrapper li.highcharts-separator > span.highcharts-menu-item-btn {
width: 100%;
}
.highcharts-bindings-wrapper li.highcharts-active > span.highcharts-menu-item-btn,
.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn:hover,
.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
.highcharts-bindings-wrapper li.highcharts-active,
.highcharts-toggle-toolbar:hover {
background-color: #e6ebf5;
transition: background-color 100ms;
}
.highcharts-toggle-toolbar {
position: absolute;
cursor: pointer;
width: 10px;
height: 10px;
background-color: #f7f7f7;
background-size: cover;
}
.highcharts-hide {
display: none;
}
.highcharts-bindings-wrapper li:hover, .highcharts-submenu-item-arrow:hover {
background-color: #e6ebf5;
}
.highcharts-bindings-wrapper .highcharts-arrow-down, .highcharts-bindings-wrapper .highcharts-arrow-up {
width: 50%;
height: 20px;
float: left;
}

View File

@ -0,0 +1,265 @@
// Colors for buttons.
$button-background-color: #f7f7f7;
$button-hover-color: #e6ebf5;
.chart:-webkit-full-screen {
width: 100%;
height: 100%;
}
.chart:-moz-full-screen {
width: 100%;
height: 100%;
}
.chart:-ms-fullscreen {
width: 100%;
height: 100%;
}
.chart:fullscreen {
width: 100%;
height: 100%;
}
.chart {
width: 100%;
float: left;
height: 400px;
position: relative;
}
.highcharts-draw-mode { cursor: crosshair; }
.highcharts-bindings-wrapper * {
box-sizing: content-box;
}
.highcharts-bindings-wrapper {
display: block;
width: 40px;
height: 100%;
position: absolute;
z-index: 10;
}
.highcharts-stocktools-popup {
width: 100%;
}
.highcharts-menu-wrapper {
float: left;
width: 40px;
height: calc(100% - 50px);
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
.highcharts-bindings-wrapper .highcharts-submenu-wrapper {
display: none;
position: absolute;
z-index: 10;
left: 0px;
top: 0px;
background: #fff;
width: 40px;
}
.highcharts-bindings-wrapper .highcharts-arrow-wrapper {
text-align: center;
width: 40px;
position: absolute;
left: 10px;
bottom: 10px;
font-size: 1.5em;
}
.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div {
cursor: pointer;
}
.highcharts-bindings-wrapper .highcharts-arrow-down {
background-size: cover;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
transform: rotate(90deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-up {
background-size: cover;
outline: none;
display: inline-block;
width: 25px;
cursor: pointer;
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-right {
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
.highcharts-bindings-wrapper .highcharts-arrow-left.highcharts-arrow-right {
/* Safari */
-webkit-transform: rotate(0deg);
/* Firefox */
-moz-transform: rotate(0deg);
/* IE */
-ms-transform: rotate(0deg);
/* Opera */
-o-transform: rotate(0deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
transform: rotate(0deg);
}
.highcharts-bindings-wrapper .highcharts-arrow-left {
/* Safari */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
transform: rotate(180deg);
}
.highcharts-bindings-wrapper ul {
width: 40px;
/* 30px spacing for arrows to scroll */
margin: 0px;
padding: 0px;
float: left;
transition: margin 250ms;
}
.highcharts-bindings-wrapper>ul {
width: 40px;
position: relative;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li {
list-style: none;
margin-bottom: 3px;
padding: 0px;
clear: both;
width: 100%;
height: 40px;
cursor: pointer;
position: relative;
background-color: $button-background-color;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
cursor: default;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn > .highcharts-menu-item-btn {
opacity: 0.5;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
background: $button-background-color;
}
.highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
background-color: transparent;
}
.highcharts-bindings-wrapper li>span.highcharts-menu-item-btn {
display: block;
float: left;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.highcharts-submenu-wrapper li>span.highcharts-menu-item-btn {
width: 40px;
}
.highcharts-bindings-wrapper li>span.highcharts-submenu-item-arrow {
float: left;
width: 10px;
height: 100%;
cursor: pointer;
position: absolute;
bottom: 0px;
right: 0px;
}
.highcharts-bindings-wrapper li.highcharts-separator {
height: 15px;
background-color: transparent;
width: 36px;
pointer-events: none;
}
.highcharts-bindings-wrapper li.highcharts-separator>span.highcharts-menu-item-btn {
width: 100%;
}
.highcharts-bindings-wrapper li.highcharts-active>span.highcharts-menu-item-btn,
.highcharts-bindings-wrapper li>span.highcharts-menu-item-btn:hover,
.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
.highcharts-bindings-wrapper li.highcharts-active,
.highcharts-toggle-toolbar:hover {
background-color: $button-hover-color;
transition: background-color 100ms;
}
.highcharts-toggle-toolbar {
position: absolute;
cursor: pointer;
width: 10px;
height: 10px;
background-color: $button-background-color;
background-size: cover;
}
.highcharts-hide {
display: none;
}
.highcharts-bindings-wrapper li:hover, .highcharts-submenu-item-arrow:hover {
background-color: $button-hover-color;
}
.highcharts-bindings-wrapper .highcharts-arrow-down, .highcharts-bindings-wrapper .highcharts-arrow-up {
width: 50%;
height: 20px;
float: left;
}

View File

@ -0,0 +1,999 @@
@import 'https://fonts.googleapis.com/css?family=Unica+One';
.highcharts-title, .highcharts-subtitle {
text-transform: uppercase;
}
.highcharts-tooltip text {
fill: #F0F0F0;
}
.highcharts-range-selector-buttons text {
fill: silver;
}
.highcharts-yaxis-grid {
stroke-width: 1px;
}
.highcharts-axis-labels, .highcharts-axis-title {
fill: #E0E0E3;
}
.highcharts-navigator .highcharts-navigator-handle {
fill: #666;
stroke: #aaa;
}
.highcharts-navigator .highcharts-navigator-outline {
stroke: #CCC;
}
.highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
stroke: #505053;
}
.highcharts-scrollbar .highcharts-scrollbar-rifles {
stroke: #fff;
}
.highcharts-scrollbar .highcharts-scrollbar-button {
stroke: #606063;
fill: #606063;
}
.highcharts-scrollbar .highcharts-scrollbar-arrow {
fill: #CCC;
}
.highcharts-scrollbar .highcharts-scrollbar-thumb {
fill: #808083;
stroke: #808083;
}
.highcharts-contextbutton .highcharts-button-symbol {
stroke: #DDDDDD;
}
/**
* @license Highcharts
*
* (c) 2009-2016 Torstein Honsi
*
* License: www.highcharts.com/license
*/
.highcharts-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
line-height: normal;
z-index: 0;
/* #1072 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "Unica One", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root {
display: block;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-emphasized {
font-style: italic;
}
.highcharts-anchor {
cursor: pointer;
}
.highcharts-background {
fill: #2a2a2b;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
.highcharts-tracker-line {
stroke-linejoin: round;
stroke: rgba(192, 192, 192, 0.0001);
stroke-width: 22;
fill: none;
}
.highcharts-tracker-area {
fill: rgba(192, 192, 192, 0.0001);
stroke-width: 0;
}
/* Titles */
.highcharts-title {
fill: #E0E0E3;
font-size: 20px;
}
.highcharts-subtitle {
fill: #E0E0E3;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: #707073;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: #E0E0E3;
}
.highcharts-axis-labels {
fill: #E0E0E3;
cursor: default;
font-size: 0.9em;
}
.highcharts-grid-line {
fill: none;
stroke: #707073;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 0px;
}
.highcharts-tick {
stroke: #707073;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: #505053;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: #606063;
}
.highcharts-crosshair-category {
stroke: #707073;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
cursor: pointer;
fill: #666;
font-size: 0.7em;
transition: fill 250ms, font-size 250ms;
}
.highcharts-credits:hover {
fill: black;
font-size: 1em;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: #E0E0E3;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 1px;
fill: rgba(0, 0, 0, 0.85);
fill-opacity: 0.85;
}
.highcharts-tooltip-box .highcharts-label-box {
fill: rgba(0, 0, 0, 0.85);
fill-opacity: 0.85;
}
div.highcharts-tooltip {
filter: none;
}
.highcharts-selection-marker {
fill: #335cad;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-point-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-series-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-state-hover path {
transition: stroke-width 50ms;
/* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms;
/* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
.highcharts-color-0 {
fill: #2b908f;
stroke: #2b908f;
}
.highcharts-color-1 {
fill: #90ee7e;
stroke: #90ee7e;
}
.highcharts-color-2 {
fill: #f45b5b;
stroke: #f45b5b;
}
.highcharts-color-3 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-4 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-color-5 {
fill: #ff0066;
stroke: #ff0066;
}
.highcharts-color-6 {
fill: #eeaaee;
stroke: #eeaaee;
}
.highcharts-color-7 {
fill: #55BF3B;
stroke: #55BF3B;
}
.highcharts-color-8 {
fill: #DF5353;
stroke: #DF5353;
}
.highcharts-color-9 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-10 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: #2a2a2b;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
fill: #B0B0B3;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-data-label-hidden {
pointer-events: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
fill: #606063;
stroke: #fff;
}
.highcharts-column-series rect.highcharts-point {
stroke: #2a2a2b;
}
.highcharts-column-series .highcharts-point {
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: #2a2a2b;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: #2a2a2b;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: #2a2a2b;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: #707073;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: #666;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
.highcharts-vector-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-windbarb-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-lollipop-stem {
stroke: #fff;
}
.highcharts-focus-border {
fill: none;
stroke-width: 2px;
}
.highcharts-legend-item-hidden .highcharts-focus-border {
fill: none !important;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item > text {
fill: #E0E0E3;
font-weight: bold;
font-size: 1em;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: #fff;
}
.highcharts-legend-item-hidden * {
fill: #606063 !important;
stroke: #606063 !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: #F0F0F3;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: #606063;
}
circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
/* tracker */
fill: rgba(192, 192, 192, 0.0001);
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Bubble legend */
.highcharts-bubble-legend-symbol {
stroke-width: 2;
fill-opacity: 0.5;
}
.highcharts-bubble-legend-connectors {
stroke-width: 1;
}
.highcharts-bubble-legend-labels {
fill: #E0E0E3;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: #2a2a2b;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band, .highcharts-pane {
fill: #fff;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: #666;
stroke-width: 1px;
}
/* Highcharts More and modules */
.highcharts-boxplot-box {
fill: #2a2a2b;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: #fff;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: #606063;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: #fff;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: #E0E0E3;
stroke-dasharray: 1, 3;
}
.highcharts-sankey-series .highcharts-point {
stroke-width: 0;
}
.highcharts-sankey-series .highcharts-link {
transition: fill 250ms, fill-opacity 250ms;
fill-opacity: 0.5;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
transition: fill 50ms, fill-opacity 50ms;
fill-opacity: 1;
}
.highcharts-venn-series .highcharts-point {
fill-opacity: 0.75;
stroke: #606063;
transition: stroke 250ms, fill-opacity 250ms;
}
.highcharts-venn-series .highcharts-point-hover {
fill-opacity: 1;
stroke: #606063;
}
/* Highstock */
.highcharts-navigator-mask-outside {
fill-opacity: 0;
}
.highcharts-navigator-mask-inside {
fill: rgba(255, 255, 255, 0.1);
/* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: #606063;
fill: none;
}
.highcharts-navigator-handle {
stroke: #606063;
fill: #505053;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: #7798BF;
stroke: #A6C7ED;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: #707073;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: #666;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: #606063;
stroke: #606063;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: #707073;
stroke: #606063;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: #E0E0E3;
}
.highcharts-scrollbar-rifles {
stroke: #E0E0E3;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: #404043;
stroke: #404043;
stroke-width: 1px;
}
.highcharts-button {
fill: #505053;
stroke: #606063;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: #ccc;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: #707073;
stroke: #606063;
}
.highcharts-button-hover text {
fill: #fff;
}
.highcharts-button-pressed {
font-weight: bold;
fill: #000003;
stroke: #606063;
}
.highcharts-button-pressed text {
fill: #fff;
font-weight: bold;
}
.highcharts-button-disabled text {
fill: #ccc;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0px;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: #E0E0E3;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: silver;
}
.highcharts-range-input {
stroke-width: 1px;
stroke: #505053;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px;
/* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em;
/* #4798 */
}
.highcharts-crosshair-label text {
fill: #2a2a2b;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: #fff;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: #2a2a2b;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point .highcharts-label-box {
stroke: #666;
fill: #2a2a2b;
transition: fill 250ms;
}
.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
stroke: #fff;
fill: #707073;
}
.highcharts-flags-series .highcharts-point text {
fill: #fff;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: #606063;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: #666;
}
.highcharts-null-point {
fill: #f7f7f7;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
/* Exporting module */
.highcharts-contextbutton {
fill: #505053;
/* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: #707073;
stroke: #707073;
}
.highcharts-button-symbol {
stroke: #E0E0E3;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid #666;
background: #2a2a2b;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: #E0E0E3;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: #335cad;
color: #2a2a2b;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
cursor: pointer;
fill: #F0F0F3;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: #E0E0E3;
}
/* Drag-panes module */
.highcharts-axis-resizer {
cursor: ns-resize;
stroke: black;
stroke-width: 2px;
}
/* Bullet type series */
.highcharts-bullet-target {
stroke-width: 0;
}
/* Lineargauge type series */
.highcharts-lineargauge-target {
stroke-width: 1px;
stroke: #E0E0E3;
}
.highcharts-lineargauge-target-line {
stroke-width: 1px;
stroke: #E0E0E3;
}
/* Annotations module */
.highcharts-annotation-label-box {
stroke-width: 1px;
stroke: #fff;
fill: #fff;
fill-opacity: 0.75;
}
.highcharts-annotation-label text {
fill: #707073;
}
/* Gantt */
.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
cursor: pointer;
}
.highcharts-point-connecting-path {
fill: none;
}
.highcharts-grid-axis .highcharts-tick {
stroke-width: 1px;
}
.highcharts-grid-axis .highcharts-axis-line {
stroke-width: 1px;
}

View File

@ -0,0 +1,122 @@
// Global font
@import 'https://fonts.googleapis.com/css?family=Unica+One';
// Chart background, point stroke for markers and columns etc
$background-color: #2a2a2b;
// Colors for data series and points.
$colors: #2b908f #90ee7e #f45b5b #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
// Neutral colors
$neutral-color-100: #fff;
$neutral-color-80: #E0E0E3;
$neutral-color-60: #E0E0E3;
$neutral-color-40: #666;
$neutral-color-20: #606063;
$neutral-color-10: #707073;
$neutral-color-5: #505053;
// Colored, shades
$highlight-color-100: #F0F0F3;
$highlight-color-60: rgba(255,255,255,0.1);
$highlight-color-20: $neutral-color-10;
// Data-labels
$data-label-color: #B0B0B3;
// Fonts
$font-family: 'Unica One', Arial, Helvetica, sans-serif;
$title-font-size: 20px;
// Tooltip
$tooltip-background: rgba(0, 0, 0, 0.85);
// Range-selector
$range-selector-input-text: silver;
$range-selector-input-border: $neutral-color-5;
// Buttons
$highcharts-button-background: $neutral-color-5;
$highcharts-button-text: #ccc;
$highcharts-button-pressed-background: #000003;
$highcharts-button-pressed-text: $neutral-color-100;
$highcharts-button-hover-background: $neutral-color-10;
$highcharts-button-hover-text: $neutral-color-100;
$context-button-background: $neutral-color-5;
// Navigator
$navigator-series-fill: #7798BF;
$navigator-series-border: #A6C7ED;
// Navigator
$scrollbar-track-background: #404043;
$scrollbar-track-border: #404043;
// Titles
.highcharts-title, .highcharts-subtitle {
text-transform: uppercase;
}
// Tooltip
.highcharts-tooltip text {
fill: #F0F0F0
}
// Range-selector
.highcharts-range-selector-buttons text {
fill: silver;
}
// Axes
.highcharts-yaxis-grid {
stroke-width: 1px;
}
.highcharts-axis-labels, .highcharts-axis-title {
fill: #E0E0E3;
}
// Navigator
.highcharts-navigator .highcharts-navigator-handle {
fill: $neutral-color-40;
stroke: #aaa;
}
.highcharts-navigator .highcharts-navigator-outline {
stroke: #CCC;
}
.highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
stroke: $neutral-color-5;
}
// Scrollbar
.highcharts-scrollbar .highcharts-scrollbar-rifles {
stroke: $neutral-color-100;
}
.highcharts-scrollbar .highcharts-scrollbar-button {
stroke: #606063;
fill: #606063;
}
.highcharts-scrollbar .highcharts-scrollbar-arrow {
fill: #CCC;
}
.highcharts-scrollbar .highcharts-scrollbar-thumb {
fill: #808083;
stroke: #808083;
}
// Navigation
.highcharts-contextbutton .highcharts-button-symbol {
stroke: #DDDDDD;
}
@import '../highcharts';

View File

@ -0,0 +1,952 @@
@import 'https://fonts.googleapis.com/css?family=Dosis:400,600';
.highcharts-title, .highcharts-subtitle, .highcharts-yaxis .highcharts-axis-title {
text-transform: uppercase;
}
.highcharts-title {
font-weight: bold;
}
/**
* @license Highcharts
*
* (c) 2009-2016 Torstein Honsi
*
* License: www.highcharts.com/license
*/
.highcharts-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
line-height: normal;
z-index: 0;
/* #1072 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "Dosis", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root {
display: block;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-emphasized {
font-style: italic;
}
.highcharts-anchor {
cursor: pointer;
}
.highcharts-background {
fill: #ffffff;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
.highcharts-tracker-line {
stroke-linejoin: round;
stroke: rgba(192, 192, 192, 0.0001);
stroke-width: 22;
fill: none;
}
.highcharts-tracker-area {
fill: rgba(192, 192, 192, 0.0001);
stroke-width: 0;
}
/* Titles */
.highcharts-title {
fill: #000;
font-size: 16px;
}
.highcharts-subtitle {
fill: #666666;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: #666666;
}
.highcharts-axis-labels {
fill: #666666;
cursor: default;
font-size: 12px;
}
.highcharts-grid-line {
fill: none;
stroke: #e6e6e6;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 1px;
}
.highcharts-tick {
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: #f2f2f2;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: #cccccc;
}
.highcharts-crosshair-category {
stroke: #ccd6eb;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
cursor: pointer;
fill: #999999;
font-size: 0.7em;
transition: fill 250ms, font-size 250ms;
}
.highcharts-credits:hover {
fill: black;
font-size: 1em;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: #000;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 0px;
fill: rgba(219, 219, 216, 0.8);
fill-opacity: 0.85;
}
.highcharts-tooltip-box .highcharts-label-box {
fill: rgba(219, 219, 216, 0.8);
fill-opacity: 0.85;
}
div.highcharts-tooltip {
filter: none;
}
.highcharts-selection-marker {
fill: #335cad;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-point-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-series-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-state-hover path {
transition: stroke-width 50ms;
/* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms;
/* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
.highcharts-color-0 {
fill: #7cb5ec;
stroke: #7cb5ec;
}
.highcharts-color-1 {
fill: #f7a35c;
stroke: #f7a35c;
}
.highcharts-color-2 {
fill: #90ee7e;
stroke: #90ee7e;
}
.highcharts-color-3 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-4 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-color-5 {
fill: #ff0066;
stroke: #ff0066;
}
.highcharts-color-6 {
fill: #eeaaee;
stroke: #eeaaee;
}
.highcharts-color-7 {
fill: #55BF3B;
stroke: #55BF3B;
}
.highcharts-color-8 {
fill: #DF5353;
stroke: #DF5353;
}
.highcharts-color-9 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-10 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: #ffffff;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
fill: #000;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-data-label-hidden {
pointer-events: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
fill: #cccccc;
stroke: #404048;
}
.highcharts-column-series rect.highcharts-point {
stroke: #ffffff;
}
.highcharts-column-series .highcharts-point {
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: #ffffff;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: #e6e6e6;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: #999999;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
.highcharts-vector-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-windbarb-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-lollipop-stem {
stroke: #404048;
}
.highcharts-focus-border {
fill: none;
stroke-width: 2px;
}
.highcharts-legend-item-hidden .highcharts-focus-border {
fill: none !important;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item > text {
fill: #000;
font-weight: bold;
font-size: 13px;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: #404048;
}
.highcharts-legend-item-hidden * {
fill: #cccccc !important;
stroke: #cccccc !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: #003399;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: #cccccc;
}
circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
/* tracker */
fill: rgba(192, 192, 192, 0.0001);
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Bubble legend */
.highcharts-bubble-legend-symbol {
stroke-width: 2;
fill-opacity: 0.5;
}
.highcharts-bubble-legend-connectors {
stroke-width: 1;
}
.highcharts-bubble-legend-labels {
fill: #000;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: #ffffff;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band, .highcharts-pane {
fill: #404048;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: #999999;
stroke-width: 1px;
}
/* Highcharts More and modules */
.highcharts-boxplot-box {
fill: #ffffff;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: #404048;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: #404048;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: #000;
stroke-dasharray: 1, 3;
}
.highcharts-sankey-series .highcharts-point {
stroke-width: 0;
}
.highcharts-sankey-series .highcharts-link {
transition: fill 250ms, fill-opacity 250ms;
fill-opacity: 0.5;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
transition: fill 50ms, fill-opacity 50ms;
fill-opacity: 1;
}
.highcharts-venn-series .highcharts-point {
fill-opacity: 0.75;
stroke: #cccccc;
transition: stroke 250ms, fill-opacity 250ms;
}
.highcharts-venn-series .highcharts-point-hover {
fill-opacity: 1;
stroke: #cccccc;
}
/* Highstock */
.highcharts-navigator-mask-outside {
fill-opacity: 0;
}
.highcharts-navigator-mask-inside {
fill: #6685c2;
/* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: #cccccc;
fill: none;
}
.highcharts-navigator-handle {
stroke: #cccccc;
fill: #f2f2f2;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: #335cad;
stroke: #335cad;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: #e6e6e6;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: #999999;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: #cccccc;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: #e6e6e6;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: #666666;
}
.highcharts-scrollbar-rifles {
stroke: #666666;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: #f2f2f2;
stroke: #f2f2f2;
stroke-width: 1px;
}
.highcharts-button {
fill: #f7f7f7;
stroke: #cccccc;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: #000;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: #e6e6e6;
stroke: #cccccc;
}
.highcharts-button-hover text {
fill: #000;
}
.highcharts-button-pressed {
font-weight: bold;
fill: #e6ebf5;
stroke: #cccccc;
}
.highcharts-button-pressed text {
fill: #000;
font-weight: bold;
}
.highcharts-button-disabled text {
fill: #000;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0px;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: #666666;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: #000;
}
.highcharts-range-input {
stroke-width: 1px;
stroke: #cccccc;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px;
/* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em;
/* #4798 */
}
.highcharts-crosshair-label text {
fill: #ffffff;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: #404048;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: #ffffff;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point .highcharts-label-box {
stroke: #999999;
fill: #ffffff;
transition: fill 250ms;
}
.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
stroke: #404048;
fill: #ccd6eb;
}
.highcharts-flags-series .highcharts-point text {
fill: #404048;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: #cccccc;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: #999999;
}
.highcharts-null-point {
fill: #f7f7f7;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
/* Exporting module */
.highcharts-contextbutton {
fill: #ffffff;
/* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: #e6e6e6;
stroke: #e6e6e6;
}
.highcharts-button-symbol {
stroke: #666666;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid #999999;
background: #ffffff;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: #000;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: #335cad;
color: #ffffff;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
cursor: pointer;
fill: #003399;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: #666666;
}
/* Drag-panes module */
.highcharts-axis-resizer {
cursor: ns-resize;
stroke: black;
stroke-width: 2px;
}
/* Bullet type series */
.highcharts-bullet-target {
stroke-width: 0;
}
/* Lineargauge type series */
.highcharts-lineargauge-target {
stroke-width: 1px;
stroke: #000;
}
.highcharts-lineargauge-target-line {
stroke-width: 1px;
stroke: #000;
}
/* Annotations module */
.highcharts-annotation-label-box {
stroke-width: 1px;
stroke: #404048;
fill: #404048;
fill-opacity: 0.75;
}
.highcharts-annotation-label text {
fill: #e6e6e6;
}
/* Gantt */
.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
cursor: pointer;
}
.highcharts-point-connecting-path {
fill: none;
}
.highcharts-grid-axis .highcharts-tick {
stroke-width: 1px;
}
.highcharts-grid-axis .highcharts-axis-line {
stroke-width: 1px;
}

View File

@ -0,0 +1,33 @@
// Global font
@import 'https://fonts.googleapis.com/css?family=Dosis:400,600';
// Colors for data series and points.
$colors: #7cb5ec #f7a35c #90ee7e #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
// Neutral colors
$neutral-color-100: #404048;
$neutral-color-80: #000;
// Fonts
$font-family: 'Dosis', Arial, Helvetica, sans-serif;
$title-font-size: 16px;
$legend-font-size: 13px;
$axis-labels-font-size: 12px;
// Tooltip
$tooltip-border: 0px;
$tooltip-background: rgba(219,219,216,0.8);
// Axes
$xaxis-grid-line: 1px !default;
// Title
.highcharts-title, .highcharts-subtitle, .highcharts-yaxis .highcharts-axis-title {
text-transform: uppercase;
}
.highcharts-title {
font-weight: bold;
}
@import '../highcharts';

View File

@ -0,0 +1,968 @@
@import 'https://fonts.googleapis.com/css?family=Signika:400,700';
.highcharts-container {
background: url(https://www.highcharts.com/samples/graphics/sand.png);
}
.highcharts-boxplot-box {
fill: #505053;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke: #D0D0D8;
}
.highcharts-scrollbar-track {
stroke: #C0C0C8;
}
.highcharts-title {
font-weight: bold;
}
.highcharts-button-box {
stroke-width: 1px;
}
/**
* @license Highcharts
*
* (c) 2009-2016 Torstein Honsi
*
* License: www.highcharts.com/license
*/
.highcharts-container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
line-height: normal;
z-index: 0;
/* #1072 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "Signika", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root {
display: block;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-strong {
font-weight: bold;
}
.highcharts-emphasized {
font-style: italic;
}
.highcharts-anchor {
cursor: pointer;
}
.highcharts-background {
fill: none;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
.highcharts-tracker-line {
stroke-linejoin: round;
stroke: rgba(192, 192, 192, 0.0001);
stroke-width: 22;
fill: none;
}
.highcharts-tracker-area {
fill: rgba(192, 192, 192, 0.0001);
stroke-width: 0;
}
/* Titles */
.highcharts-title {
fill: #000;
font-size: 16px;
}
.highcharts-subtitle {
fill: #666666;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: #666666;
}
.highcharts-axis-labels {
fill: #666666;
cursor: default;
font-size: 12px;
}
.highcharts-grid-line {
fill: none;
stroke: #e6e6e6;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 0px;
}
.highcharts-tick {
stroke: #ccd6eb;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: #f2f2f2;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: #cccccc;
}
.highcharts-crosshair-category {
stroke: #ccd6eb;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
cursor: pointer;
fill: #999999;
font-size: 0.7em;
transition: fill 250ms, font-size 250ms;
}
.highcharts-credits:hover {
fill: black;
font-size: 1em;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: #000;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 0px;
fill: #fff;
fill-opacity: 0.85;
}
.highcharts-tooltip-box .highcharts-label-box {
fill: #fff;
fill-opacity: 0.85;
}
div.highcharts-tooltip {
filter: none;
}
.highcharts-selection-marker {
fill: #335cad;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-point-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-series-inactive {
opacity: 0.2;
transition: opacity 50ms;
/* quick in */
}
.highcharts-state-hover path {
transition: stroke-width 50ms;
/* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms;
/* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series,
.highcharts-point,
.highcharts-markers,
.highcharts-data-labels {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
.highcharts-color-0 {
fill: #f45b5b;
stroke: #f45b5b;
}
.highcharts-color-1 {
fill: #8085e9;
stroke: #8085e9;
}
.highcharts-color-2 {
fill: #8d4654;
stroke: #8d4654;
}
.highcharts-color-3 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-4 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-color-5 {
fill: #ff0066;
stroke: #ff0066;
}
.highcharts-color-6 {
fill: #eeaaee;
stroke: #eeaaee;
}
.highcharts-color-7 {
fill: #55BF3B;
stroke: #55BF3B;
}
.highcharts-color-8 {
fill: #DF5353;
stroke: #DF5353;
}
.highcharts-color-9 {
fill: #7798BF;
stroke: #7798BF;
}
.highcharts-color-10 {
fill: #aaeeee;
stroke: #aaeeee;
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: none;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text, text.highcharts-data-label {
fill: #000;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-data-label-hidden {
pointer-events: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,
.highcharts-markers .highcharts-point-select {
fill: #cccccc;
stroke: #fff;
}
.highcharts-column-series rect.highcharts-point {
stroke: none;
}
.highcharts-column-series .highcharts-point {
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: none;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: none;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: none;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: #e6e6e6;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: #999999;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
.highcharts-vector-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-windbarb-series .highcharts-point {
fill: none;
stroke-width: 2px;
}
.highcharts-lollipop-stem {
stroke: #fff;
}
.highcharts-focus-border {
fill: none;
stroke-width: 2px;
}
.highcharts-legend-item-hidden .highcharts-focus-border {
fill: none !important;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item > text {
fill: #000;
font-weight: bold;
font-size: 13px;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: #fff;
}
.highcharts-legend-item-hidden * {
fill: #cccccc !important;
stroke: #cccccc !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: #003399;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: #cccccc;
}
circle.highcharts-legend-nav-active, circle.highcharts-legend-nav-inactive {
/* tracker */
fill: rgba(192, 192, 192, 0.0001);
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Bubble legend */
.highcharts-bubble-legend-symbol {
stroke-width: 2;
fill-opacity: 0.5;
}
.highcharts-bubble-legend-connectors {
stroke-width: 1;
}
.highcharts-bubble-legend-labels {
fill: #000;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: none;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band, .highcharts-pane {
fill: #fff;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: #999999;
stroke-width: 1px;
}
/* Highcharts More and modules */
.highcharts-boxplot-box {
fill: none;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: #fff;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: #fff;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: #000;
stroke-dasharray: 1, 3;
}
.highcharts-sankey-series .highcharts-point {
stroke-width: 0;
}
.highcharts-sankey-series .highcharts-link {
transition: fill 250ms, fill-opacity 250ms;
fill-opacity: 0.5;
}
.highcharts-sankey-series .highcharts-point-hover.highcharts-link {
transition: fill 50ms, fill-opacity 50ms;
fill-opacity: 1;
}
.highcharts-venn-series .highcharts-point {
fill-opacity: 0.75;
stroke: #cccccc;
transition: stroke 250ms, fill-opacity 250ms;
}
.highcharts-venn-series .highcharts-point-hover {
fill-opacity: 1;
stroke: #cccccc;
}
/* Highstock */
.highcharts-navigator-mask-outside {
fill-opacity: 0;
}
.highcharts-navigator-mask-inside {
fill: #6685c2;
/* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: #cccccc;
fill: none;
}
.highcharts-navigator-handle {
stroke: #cccccc;
fill: #f2f2f2;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: #f45b5b;
stroke: #f45b5b;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: #e6e6e6;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: #999999;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: #cccccc;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: #e6e6e6;
stroke: #cccccc;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: #666666;
}
.highcharts-scrollbar-rifles {
stroke: #666666;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: #f2f2f2;
stroke: #C0C0C8;
stroke-width: 1px;
}
.highcharts-button {
fill: #fff;
stroke: #C0C0C8;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: #000;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: #e6e6e6;
stroke: #cccccc;
}
.highcharts-button-hover text {
fill: #000;
}
.highcharts-button-pressed {
font-weight: bold;
fill: #D0D0D8;
stroke: #cccccc;
}
.highcharts-button-pressed text {
fill: #000;
font-weight: bold;
}
.highcharts-button-disabled text {
fill: #000;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0px;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: #666666;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: #000;
}
.highcharts-range-input {
stroke-width: 1px;
stroke: #cccccc;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px;
/* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em;
/* #4798 */
}
.highcharts-crosshair-label text {
fill: none;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: #fff;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: none;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point .highcharts-label-box {
stroke: #999999;
fill: none;
transition: fill 250ms;
}
.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
stroke: #fff;
fill: #ccd6eb;
}
.highcharts-flags-series .highcharts-point text {
fill: #fff;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: #cccccc;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: #999999;
}
.highcharts-null-point {
fill: #f7f7f7;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
/* Exporting module */
.highcharts-contextbutton {
fill: #fff;
/* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: #e6e6e6;
stroke: #e6e6e6;
}
.highcharts-button-symbol {
stroke: #666666;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid #999999;
background: none;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: #000;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: #335cad;
color: none;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text,
text.highcharts-drilldown-data-label,
.highcharts-drilldown-axis-label {
cursor: pointer;
fill: #003399;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: #666666;
}
/* Drag-panes module */
.highcharts-axis-resizer {
cursor: ns-resize;
stroke: black;
stroke-width: 2px;
}
/* Bullet type series */
.highcharts-bullet-target {
stroke-width: 0;
}
/* Lineargauge type series */
.highcharts-lineargauge-target {
stroke-width: 1px;
stroke: #000;
}
.highcharts-lineargauge-target-line {
stroke-width: 1px;
stroke: #000;
}
/* Annotations module */
.highcharts-annotation-label-box {
stroke-width: 1px;
stroke: #fff;
fill: #fff;
fill-opacity: 0.75;
}
.highcharts-annotation-label text {
fill: #e6e6e6;
}
/* Gantt */
.highcharts-treegrid-node-collapsed, .highcharts-treegrid-node-expanded {
cursor: pointer;
}
.highcharts-point-connecting-path {
fill: none;
}
.highcharts-grid-axis .highcharts-tick {
stroke-width: 1px;
}
.highcharts-grid-axis .highcharts-axis-line {
stroke-width: 1px;
}

View File

@ -0,0 +1,74 @@
// Global font
@import 'https://fonts.googleapis.com/css?family=Signika:400,700';
// Chart background, point stroke for markers and columns etc
$background-color: none;
// Colors for data series and points.
$colors: #f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
// Neutral colors
$neutral-color-100: #fff;
$neutral-color-80: #000;
// Data-labels
$data-label-color: #000;
// Fonts
$font-family: 'Signika', Arial, Helvetica, sans-serif;
$title-font-size: 16px;
$legend-font-size: 13px;
$axis-labels-font-size: 12px;
// Tooltip
$tooltip-border: 0px;
$tooltip-background: $neutral-color-100;
// Buttons
$highcharts-button-background: $neutral-color-100;
$highcharts-button-border: #C0C0C8;
$highcharts-button-text: #000;
$highcharts-button-pressed-background: #D0D0D8;
$highcharts-button-pressed-text: #000;
$context-button-background: $neutral-color-100;
// Navigator
$navigator-series-fill: #f45b5b;
$navigator-series-border: #f45b5b;
// Scrollbar
$scrollbar-track-border: #C0C0C8;
// General
.highcharts-container {
background: url(https://www.highcharts.com/samples/graphics/sand.png);
}
// Boxplot
.highcharts-boxplot-box {
fill: #505053;
}
// Navigator
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke: #D0D0D8;
}
// Scrollbar
.highcharts-scrollbar-track {
stroke: #C0C0C8;
}
// Title
.highcharts-title {
font-weight: bold;
}
// Buttons
.highcharts-button-box {
stroke-width: 1px;
}
@import '../highcharts';

View File

@ -0,0 +1,143 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/**
* Callback to modify annotation's possitioner controls.
*
* @callback Highcharts.AnnotationControlPointPositionerFunction
* @param {Highcharts.AnnotationControlPoint} this
* @param {Highcharts.AnnotationControllable} target
* @return {Highcharts.PositionObject}
*/
import U from './../parts/Utilities.js';
var extend = U.extend, merge = U.merge, pick = U.pick;
import eventEmitterMixin from './eventEmitterMixin.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A control point class which is a connection between controllable
* transform methods and a user actions.
*
* @requires modules/annotations
*
* @class
* @name Highcharts.AnnotationControlPoint
*
* @hideconstructor
*
* @param {Highcharts.Chart} chart
* A chart instance.
*
* @param {Highcharts.AnnotationControllable} target
* A controllable instance which is a target for a control point.
*
* @param {Highcharts.AnnotationControlPointOptionsObject} options
* An options object.
*
* @param {number} [index]
* Point index.
*/
var ControlPoint = /** @class */ (function () {
function ControlPoint(chart, target, options, index) {
/**
*
* Properties
*
*/
this.addEvents = eventEmitterMixin.addEvents;
this.graphic = void 0;
this.mouseMoveToRadians = eventEmitterMixin.mouseMoveToRadians;
this.mouseMoveToScale = eventEmitterMixin.mouseMoveToScale;
this.mouseMoveToTranslation = eventEmitterMixin.mouseMoveToTranslation;
this.onDrag = eventEmitterMixin.onDrag;
this.onMouseDown = eventEmitterMixin.onMouseDown;
this.onMouseUp = eventEmitterMixin.onMouseUp;
this.removeDocEvents = eventEmitterMixin.removeDocEvents;
/**
*
* Functions
*
*/
/**
* List of events for `anntation.options.events` that should not be
* added to `annotation.graphic` but to the `annotation`.
* @private
* @name Highcharts.AnnotationControlPoint#nonDOMEvents
* @type {Array<string>}
*/
this.nonDOMEvents = ['drag'];
this.chart = chart;
this.target = target;
this.options = options;
this.index = pick(options.index, index);
}
/**
* Set the visibility of the control point.
*
* @function Highcharts.AnnotationControlPoint#setVisibility
*
* @param {boolean} visible
* Visibility of the control point.
*
* @return {void}
*/
ControlPoint.prototype.setVisibility = function (visible) {
this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
this.options.visible = visible;
};
/**
* Render the control point.
* @private
*/
ControlPoint.prototype.render = function () {
var chart = this.chart, options = this.options;
this.graphic = chart.renderer
.symbol(options.symbol, 0, 0, options.width, options.height)
.add(chart.controlPointsGroup)
.css(options.style);
this.setVisibility(options.visible);
// npm test -- --tests "highcharts/annotations-advanced/*"
this.addEvents();
};
/**
* Redraw the control point.
* @private
* @param {boolean} [animation]
*/
ControlPoint.prototype.redraw = function (animation) {
this.graphic[animation ? 'animate' : 'attr'](this.options.positioner.call(this, this.target));
};
/**
* Destroy the control point.
* @private
*/
ControlPoint.prototype.destroy = function () {
eventEmitterMixin.destroy.call(this);
if (this.graphic) {
this.graphic = this.graphic.destroy();
}
this.chart = null;
this.target = null;
this.options = null;
};
/**
* Update the control point.
*
* @function Highcharts.AnnotationControlPoint#update
*
* @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
* New options for the control point.
*
* @return {void}
*/
ControlPoint.prototype.update = function (userOptions) {
var chart = this.chart, target = this.target, index = this.index, options = merge(true, this.options, userOptions);
this.destroy();
this.constructor(chart, target, options, index);
this.render(chart.controlPointsGroup);
this.redraw();
};
return ControlPoint;
}());
export default ControlPoint;

View File

@ -0,0 +1,426 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
import H from '../parts/Globals.js';
/**
* @private
* @interface Highcharts.AnnotationMockLabelOptionsObject
*/ /**
* Point instance of the point.
* @name Highcharts.AnnotationMockLabelOptionsObject#point
* @type {Highcharts.AnnotationMockPoint}
*/ /**
* X value translated to x axis scale.
* @name Highcharts.AnnotationMockLabelOptionsObject#x
* @type {number|null}
*/ /**
* Y value translated to y axis scale.
* @name Highcharts.AnnotationMockLabelOptionsObject#y
* @type {number|null}
*/
/**
* A mock series instance imitating a real series from a real point.
* @private
* @interface Highcharts.AnnotationMockSeries
*/ /**
* Whether a series is visible.
* @name Highcharts.AnnotationMockSeries#visible
* @type {boolean}
*/ /**
* A chart instance.
* @name Highcharts.AnnotationMockSeries#chart
* @type {Highcharts.Chart}
*/ /**
* @name Highcharts.AnnotationMockSeries#getPlotBox
* @type {Function}
*/
/**
* Indicates if this is a mock point for an annotation.
* @name Highcharts.Point#mock
* @type {boolean|undefined}
*/
import U from '../parts/Utilities.js';
var defined = U.defined, extend = U.extend, fireEvent = U.fireEvent;
import '../parts/Axis.js';
import '../parts/Series.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A trimmed point object which imitates {@link Highchart.Point} class. It is
* created when there is a need of pointing to some chart's position using axis
* values or pixel values
*
* @requires modules/annotations
*
* @private
* @class
* @name Highcharts.AnnotationMockPoint
*
* @hideconstructor
*
* @param {Highcharts.Chart} chart
* The chart instance.
*
* @param {Highcharts.AnnotationControllable|null} target
* The related controllable.
*
* @param {Highcharts.AnnotationMockPointOptionsObject|Function} options
* The options object.
*/
var MockPoint = /** @class */ (function () {
function MockPoint(chart, target, options) {
this.isInside = void 0;
this.plotX = void 0;
this.plotY = void 0;
this.x = void 0;
this.y = void 0;
/* *
*
* Functions
*
* */
/**
* A flag indicating that a point is not the real one.
*
* @type {boolean}
* @default true
*/
this.mock = true;
/**
* A mock series instance imitating a real series from a real point.
*
* @name Annotation.AnnotationMockPoint#series
* @type {Highcharts.AnnotationMockSeries}
*/
this.series = {
visible: true,
chart: chart,
getPlotBox: H.Series.prototype.getPlotBox
};
/**
* @name Annotation.AnnotationMockPoint#target
* @type {Highcharts.AnnotationControllable|null}
*/
this.target = target || null;
/**
* Options for the mock point.
*
* @name Annotation.AnnotationMockPoint#options
* @type {Highcharts.AnnotationsMockPointOptionsObject}
*/
this.options = options;
/**
* If an xAxis is set it represents the point's value in terms of the
* xAxis.
*
* @name Annotation.AnnotationMockPoint#x
* @type {number|undefined}
*/
/**
* If an yAxis is set it represents the point's value in terms of the
* yAxis.
*
* @name Annotation.AnnotationMockPoint#y
* @type {number|undefined}
*/
/**
* It represents the point's pixel x coordinate relative to its plot
* box.
*
* @name Annotation.AnnotationMockPoint#plotX
* @type {number|undefined}
*/
/**
* It represents the point's pixel y position relative to its plot box.
*
* @name Annotation.AnnotationMockPoint#plotY
* @type {number|undefined}
*/
/**
* Whether the point is inside the plot box.
*
* @name Annotation.AnnotationMockPoint#isInside
* @type {boolean|undefined}
*/
this.applyOptions(this.getOptions());
}
/**
* Create a mock point from a real Highcharts point.
*
* @private
* @static
*
* @param {Highcharts.Point} point
*
* @return {Highcharts.AnnotationMockPoint}
* A mock point instance.
*/
MockPoint.fromPoint = function (point) {
return new MockPoint(point.series.chart, null, {
x: point.x,
y: point.y,
xAxis: point.series.xAxis,
yAxis: point.series.yAxis
});
};
/**
* Get the pixel position from the point like object.
*
* @private
* @static
*
* @param {Highcharts.AnnotationPointType} point
*
* @param {boolean} [paneCoordinates]
* whether the pixel position should be relative
*
* @return {Highcharts.PositionObject} pixel position
*/
MockPoint.pointToPixels = function (point, paneCoordinates) {
var series = point.series, chart = series.chart, x = point.plotX, y = point.plotY, plotBox;
if (chart.inverted) {
if (point.mock) {
x = point.plotY;
y = point.plotX;
}
else {
x = chart.plotWidth - point.plotY;
y = chart.plotHeight - point.plotX;
}
}
if (series && !paneCoordinates) {
plotBox = series.getPlotBox();
x += plotBox.translateX;
y += plotBox.translateY;
}
return {
x: x,
y: y
};
};
/**
* Get fresh mock point options from the point like object.
*
* @private
* @static
*
* @param {Highcharts.AnnotationPointType} point
*
* @return {Highcharts.AnnotationMockPointOptionsObject}
* A mock point's options.
*/
MockPoint.pointToOptions = function (point) {
return {
x: point.x,
y: point.y,
xAxis: point.series.xAxis,
yAxis: point.series.yAxis
};
};
/**
* Check if the point has dynamic options.
* @private
* @return {boolean}
* A positive flag if the point has dynamic options.
*/
MockPoint.prototype.hasDynamicOptions = function () {
return typeof this.options === 'function';
};
/**
* Get the point's options.
* @private
* @return {Highcharts.AnnotationMockPointOptionsObject}
* The mock point's options.
*/
MockPoint.prototype.getOptions = function () {
return this.hasDynamicOptions() ?
this.options(this.target) :
this.options;
};
/**
* Apply options for the point.
* @private
* @param {Highcharts.AnnotationMockPointOptionsObject} options
*/
MockPoint.prototype.applyOptions = function (options) {
this.command = options.command;
this.setAxis(options, 'x');
this.setAxis(options, 'y');
this.refresh();
};
/**
* Set x or y axis.
* @private
* @param {Highcharts.AnnotationMockPointOptionsObject} options
* @param {string} xOrY
* 'x' or 'y' string literal
*/
MockPoint.prototype.setAxis = function (options, xOrY) {
var axisName = (xOrY + 'Axis'), axisOptions = options[axisName], chart = this.series.chart;
this.series[axisName] =
axisOptions instanceof H.Axis ?
axisOptions :
defined(axisOptions) ?
(chart[axisName][axisOptions] ||
chart.get(axisOptions)) :
null;
};
/**
* Transform the mock point to an anchor (relative position on the chart).
* @private
* @return {Array<number>}
* A quadruple of numbers which denotes x, y, width and height of the box
**/
MockPoint.prototype.toAnchor = function () {
var anchor = [this.plotX, this.plotY, 0, 0];
if (this.series.chart.inverted) {
anchor[0] = this.plotY;
anchor[1] = this.plotX;
}
return anchor;
};
/**
* Returns a label config object - the same as
* Highcharts.Point.prototype.getLabelConfig
* @private
* @return {Annotation.MockPoint.LabelConfig} the point's label config
*/
MockPoint.prototype.getLabelConfig = function () {
return {
x: this.x,
y: this.y,
point: this
};
};
/**
* Check if the point is inside its pane.
* @private
* @return {boolean} A flag indicating whether the point is inside the pane.
*/
MockPoint.prototype.isInsidePlot = function () {
var plotX = this.plotX, plotY = this.plotY, xAxis = this.series.xAxis, yAxis = this.series.yAxis, e = {
x: plotX,
y: plotY,
isInsidePlot: true
};
if (xAxis) {
e.isInsidePlot = defined(plotX) && plotX >= 0 && plotX <= xAxis.len;
}
if (yAxis) {
e.isInsidePlot =
e.isInsidePlot &&
defined(plotY) &&
plotY >= 0 && plotY <= yAxis.len;
}
fireEvent(this.series.chart, 'afterIsInsidePlot', e);
return e.isInsidePlot;
};
/**
* Refresh point values and coordinates based on its options.
* @private
*/
MockPoint.prototype.refresh = function () {
var series = this.series, xAxis = series.xAxis, yAxis = series.yAxis, options = this.getOptions();
if (xAxis) {
this.x = options.x;
this.plotX = xAxis.toPixels(options.x, true);
}
else {
this.x = null;
this.plotX = options.x;
}
if (yAxis) {
this.y = options.y;
this.plotY = yAxis.toPixels(options.y, true);
}
else {
this.y = null;
this.plotY = options.y;
}
this.isInside = this.isInsidePlot();
};
/**
* Translate the point.
*
* @private
*
* @param {number|undefined} cx
* Origin x transformation.
*
* @param {number|undefined} cy
* Origin y transformation.
*
* @param {number} dx
* Translation for x coordinate.
*
* @param {number} dy
* Translation for y coordinate.
**/
MockPoint.prototype.translate = function (_cx, _cy, dx, dy) {
if (!this.hasDynamicOptions()) {
this.plotX += dx;
this.plotY += dy;
this.refreshOptions();
}
};
/**
* Scale the point.
*
* @private
*
* @param {number} cx
* Origin x transformation.
*
* @param {number} cy
* Origin y transformation.
*
* @param {number} sx
* Scale factor x.
*
* @param {number} sy
* Scale factor y.
*/
MockPoint.prototype.scale = function (cx, cy, sx, sy) {
if (!this.hasDynamicOptions()) {
var x = this.plotX * sx, y = this.plotY * sy, tx = (1 - sx) * cx, ty = (1 - sy) * cy;
this.plotX = tx + x;
this.plotY = ty + y;
this.refreshOptions();
}
};
/**
* Rotate the point.
* @private
* @param {number} cx origin x rotation
* @param {number} cy origin y rotation
* @param {number} radians
*/
MockPoint.prototype.rotate = function (cx, cy, radians) {
if (!this.hasDynamicOptions()) {
var cos = Math.cos(radians), sin = Math.sin(radians), x = this.plotX, y = this.plotY, tx, ty;
x -= cx;
y -= cy;
tx = x * cos - y * sin;
ty = x * sin + y * cos;
this.plotX = tx + cx;
this.plotY = ty + cy;
this.refreshOptions();
}
};
/**
* Refresh point options based on its plot coordinates.
* @private
*/
MockPoint.prototype.refreshOptions = function () {
var series = this.series, xAxis = series.xAxis, yAxis = series.yAxis;
this.x = this.options.x = xAxis ?
this.options.x = xAxis.toValue(this.plotX, true) :
this.plotX;
this.y = this.options.y = yAxis ?
yAxis.toValue(this.plotY, true) :
this.plotY;
};
return MockPoint;
}());
export default MockPoint;

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,79 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import U from './../../parts/Utilities.js';
var merge = U.merge;
import controllableMixin from './controllableMixin.js';
import ControllablePath from './ControllablePath.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A controllable circle class.
*
* @requires modules/annotations
*
* @private
* @constructor
* @name Highcharts.AnnotationControllableCircle
*
* @param {Highcharts.Annotation} annotation an annotation instance
* @param {Highcharts.AnnotationsShapeOptions} options a shape's options
* @param {number} index of the circle
**/
var ControllableCircle = function (annotation, options, index) {
this.init(annotation, options, index);
this.collection = 'shapes';
};
/**
* A map object which allows to map options attributes to element attributes.
*
* @name Highcharts.AnnotationControllableCircle.attrsMap
* @type {Highcharts.Dictionary<string>}
*/
ControllableCircle.attrsMap = merge(ControllablePath.attrsMap, {
r: 'r'
});
merge(true, ControllableCircle.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllableCircle# */ {
/**
* @type 'circle'
*/
type: 'circle',
translate: controllableMixin.translateShape,
render: function (parent) {
var attrs = this.attrsFromOptions(this.options);
this.graphic = this.annotation.chart.renderer
.circle(0, -9e9, 0)
.attr(attrs)
.add(parent);
controllableMixin.render.call(this);
},
redraw: function (animation) {
var position = this.anchor(this.points[0]).absolutePosition;
if (position) {
this.graphic[animation ? 'animate' : 'attr']({
x: position.x,
y: position.y,
r: this.options.r
});
}
else {
this.graphic.attr({
x: 0,
y: -9e9
});
}
this.graphic.placed = Boolean(position);
controllableMixin.redraw.call(this, animation);
},
/**
* Set the radius.
*
* @param {number} r a radius to be set
*/
setRadius: function (r) {
this.options.r = r;
}
});
export default ControllableCircle;

View File

@ -0,0 +1,79 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import U from './../../parts/Utilities.js';
var merge = U.merge;
import controllableMixin from './controllableMixin.js';
import ControllableLabel from './ControllableLabel.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A controllable image class.
*
* @requires modules/annotations
*
* @private
* @class
* @name Highcharts.AnnotationControllableImage
*
* @param {Highcharts.Annotation} annotation
* An annotation instance.
*
* @param {Highcharts.AnnotationsShapeOptions} options
* A controllable's options.
*
* @param {number} index
* Index of the image.
**/
var ControllableImage = function (annotation, options, index) {
this.init(annotation, options, index);
this.collection = 'shapes';
};
/**
* A map object which allows to map options attributes to element attributes
*
* @name Highcharts.AnnotationControllableImage.attrsMap
* @type {Highcharts.Dictionary<string>}
*/
ControllableImage.attrsMap = {
width: 'width',
height: 'height',
zIndex: 'zIndex'
};
merge(true, ControllableImage.prototype, controllableMixin, /** @lends Annotation.ControllableImage# */ {
/**
* @type 'image'
*/
type: 'image',
translate: controllableMixin.translateShape,
render: function (parent) {
var attrs = this.attrsFromOptions(this.options), options = this.options;
this.graphic = this.annotation.chart.renderer
.image(options.src, 0, -9e9, options.width, options.height)
.attr(attrs)
.add(parent);
this.graphic.width = options.width;
this.graphic.height = options.height;
controllableMixin.render.call(this);
},
redraw: function (animation) {
var anchor = this.anchor(this.points[0]), position = ControllableLabel.prototype.position.call(this, anchor);
if (position) {
this.graphic[animation ? 'animate' : 'attr']({
x: position.x,
y: position.y
});
}
else {
this.graphic.attr({
x: 0,
y: -9e9
});
}
this.graphic.placed = Boolean(position);
controllableMixin.redraw.call(this, animation);
}
});
export default ControllableImage;

View File

@ -0,0 +1,338 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from './../../parts/Globals.js';
import U from './../../parts/Utilities.js';
var extend = U.extend, format = U.format, isNumber = U.isNumber, merge = U.merge, pick = U.pick;
import './../../parts/SvgRenderer.js';
import controllableMixin from './controllableMixin.js';
import MockPoint from './../MockPoint.js';
import Tooltip from '../../parts/Tooltip.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A controllable label class.
*
* @requires modules/annotations
*
* @private
* @class
* @name Highcharts.AnnotationControllableLabel
*
* @param {Highcharts.Annotation} annotation
* An annotation instance.
* @param {Highcharts.AnnotationsLabelOptions} options
* A label's options.
* @param {number} index
* Index of the label.
*/
var ControllableLabel = function (annotation, options, index) {
this.init(annotation, options, index);
this.collection = 'labels';
};
/**
* Shapes which do not have background - the object is used for proper
* setting of the contrast color.
*
* @type {Array<string>}
*/
ControllableLabel.shapesWithoutBackground = ['connector'];
/**
* Returns new aligned position based alignment options and box to align to.
* It is almost a one-to-one copy from SVGElement.prototype.align
* except it does not use and mutate an element
*
* @param {Highcharts.AnnotationAlignObject} alignOptions
*
* @param {Highcharts.BBoxObject} box
*
* @return {Highcharts.PositionObject}
* Aligned position.
*/
ControllableLabel.alignedPosition = function (alignOptions, box) {
var align = alignOptions.align, vAlign = alignOptions.verticalAlign, x = (box.x || 0) + (alignOptions.x || 0), y = (box.y || 0) + (alignOptions.y || 0), alignFactor, vAlignFactor;
if (align === 'right') {
alignFactor = 1;
}
else if (align === 'center') {
alignFactor = 2;
}
if (alignFactor) {
x += (box.width - (alignOptions.width || 0)) / alignFactor;
}
if (vAlign === 'bottom') {
vAlignFactor = 1;
}
else if (vAlign === 'middle') {
vAlignFactor = 2;
}
if (vAlignFactor) {
y += (box.height - (alignOptions.height || 0)) / vAlignFactor;
}
return {
x: Math.round(x),
y: Math.round(y)
};
};
/**
* Returns new alignment options for a label if the label is outside the
* plot area. It is almost a one-to-one copy from
* Series.prototype.justifyDataLabel except it does not mutate the label and
* it works with absolute instead of relative position.
*/
ControllableLabel.justifiedOptions = function (chart, label, alignOptions, alignAttr) {
var align = alignOptions.align, verticalAlign = alignOptions.verticalAlign, padding = label.box ? 0 : (label.padding || 0), bBox = label.getBBox(), off,
//
options = {
align: align,
verticalAlign: verticalAlign,
x: alignOptions.x,
y: alignOptions.y,
width: label.width,
height: label.height
},
//
x = alignAttr.x - chart.plotLeft, y = alignAttr.y - chart.plotTop;
// Off left
off = x + padding;
if (off < 0) {
if (align === 'right') {
options.align = 'left';
}
else {
options.x = -off;
}
}
// Off right
off = x + bBox.width - padding;
if (off > chart.plotWidth) {
if (align === 'left') {
options.align = 'right';
}
else {
options.x = chart.plotWidth - off;
}
}
// Off top
off = y + padding;
if (off < 0) {
if (verticalAlign === 'bottom') {
options.verticalAlign = 'top';
}
else {
options.y = -off;
}
}
// Off bottom
off = y + bBox.height - padding;
if (off > chart.plotHeight) {
if (verticalAlign === 'top') {
options.verticalAlign = 'bottom';
}
else {
options.y = chart.plotHeight - off;
}
}
return options;
};
/**
* A map object which allows to map options attributes to element attributes
*
* @type {Highcharts.Dictionary<string>}
*/
ControllableLabel.attrsMap = {
backgroundColor: 'fill',
borderColor: 'stroke',
borderWidth: 'stroke-width',
zIndex: 'zIndex',
borderRadius: 'r',
padding: 'padding'
};
merge(true, ControllableLabel.prototype, controllableMixin,
/** @lends Annotation.ControllableLabel# */ {
/**
* Translate the point of the label by deltaX and deltaY translations.
* The point is the label's anchor.
*
* @param {number} dx translation for x coordinate
* @param {number} dy translation for y coordinate
**/
translatePoint: function (dx, dy) {
controllableMixin.translatePoint.call(this, dx, dy, 0);
},
/**
* Translate x and y position relative to the label's anchor.
*
* @param {number} dx translation for x coordinate
* @param {number} dy translation for y coordinate
**/
translate: function (dx, dy) {
var chart = this.annotation.chart,
// Annotation.options
labelOptions = this.annotation.userOptions,
// Chart.options.annotations
annotationIndex = chart.annotations.indexOf(this.annotation), chartAnnotations = chart.options.annotations, chartOptions = chartAnnotations[annotationIndex], temp;
if (chart.inverted) {
temp = dx;
dx = dy;
dy = temp;
}
// Local options:
this.options.x += dx;
this.options.y += dy;
// Options stored in chart:
chartOptions[this.collection][this.index].x = this.options.x;
chartOptions[this.collection][this.index].y = this.options.y;
labelOptions[this.collection][this.index].x = this.options.x;
labelOptions[this.collection][this.index].y = this.options.y;
},
render: function (parent) {
var options = this.options, attrs = this.attrsFromOptions(options), style = options.style;
this.graphic = this.annotation.chart.renderer
.label('', 0, -9999, // #10055
options.shape, null, null, options.useHTML, null, 'annotation-label')
.attr(attrs)
.add(parent);
if (!this.annotation.chart.styledMode) {
if (style.color === 'contrast') {
style.color = this.annotation.chart.renderer.getContrast(ControllableLabel.shapesWithoutBackground.indexOf(options.shape) > -1 ? '#FFFFFF' : options.backgroundColor);
}
this.graphic
.css(options.style)
.shadow(options.shadow);
}
if (options.className) {
this.graphic.addClass(options.className);
}
this.graphic.labelrank = options.labelrank;
controllableMixin.render.call(this);
},
redraw: function (animation) {
var options = this.options, text = this.text || options.format || options.text, label = this.graphic, point = this.points[0], show = false, anchor, attrs;
label.attr({
text: text ?
format(text, point.getLabelConfig(), this.annotation.chart) :
options.formatter.call(point, this)
});
anchor = this.anchor(point);
attrs = this.position(anchor);
show = attrs;
if (show) {
label.alignAttr = attrs;
attrs.anchorX = anchor.absolutePosition.x;
attrs.anchorY = anchor.absolutePosition.y;
label[animation ? 'animate' : 'attr'](attrs);
}
else {
label.attr({
x: 0,
y: -9999 // #10055
});
}
label.placed = Boolean(show);
controllableMixin.redraw.call(this, animation);
},
/**
* All basic shapes don't support alignTo() method except label.
* For a controllable label, we need to subtract translation from
* options.
*/
anchor: function () {
var anchor = controllableMixin.anchor.apply(this, arguments), x = this.options.x || 0, y = this.options.y || 0;
anchor.absolutePosition.x -= x;
anchor.absolutePosition.y -= y;
anchor.relativePosition.x -= x;
anchor.relativePosition.y -= y;
return anchor;
},
/**
* Returns the label position relative to its anchor.
*
* @param {Highcharts.AnnotationAnchorObject} anchor
*
* @return {Highcharts.PositionObject|null}
*/
position: function (anchor) {
var item = this.graphic, chart = this.annotation.chart, point = this.points[0], itemOptions = this.options, anchorAbsolutePosition = anchor.absolutePosition, anchorRelativePosition = anchor.relativePosition, itemPosition, alignTo, itemPosRelativeX, itemPosRelativeY, showItem = point.series.visible &&
MockPoint.prototype.isInsidePlot.call(point);
if (showItem) {
if (itemOptions.distance) {
itemPosition = Tooltip.prototype.getPosition.call({
chart: chart,
distance: pick(itemOptions.distance, 16)
}, item.width, item.height, {
plotX: anchorRelativePosition.x,
plotY: anchorRelativePosition.y,
negative: point.negative,
ttBelow: point.ttBelow,
h: (anchorRelativePosition.height || anchorRelativePosition.width)
});
}
else if (itemOptions.positioner) {
itemPosition = itemOptions.positioner.call(this);
}
else {
alignTo = {
x: anchorAbsolutePosition.x,
y: anchorAbsolutePosition.y,
width: 0,
height: 0
};
itemPosition = ControllableLabel.alignedPosition(extend(itemOptions, {
width: item.width,
height: item.height
}), alignTo);
if (this.options.overflow === 'justify') {
itemPosition = ControllableLabel.alignedPosition(ControllableLabel.justifiedOptions(chart, item, itemOptions, itemPosition), alignTo);
}
}
if (itemOptions.crop) {
itemPosRelativeX = itemPosition.x - chart.plotLeft;
itemPosRelativeY = itemPosition.y - chart.plotTop;
showItem =
chart.isInsidePlot(itemPosRelativeX, itemPosRelativeY) &&
chart.isInsidePlot(itemPosRelativeX + item.width, itemPosRelativeY + item.height);
}
}
return showItem ? itemPosition : null;
}
});
/* ********************************************************************** */
/**
* General symbol definition for labels with connector
* @private
*/
H.SVGRenderer.prototype.symbols.connector = function (x, y, w, h, options) {
var anchorX = options && options.anchorX, anchorY = options && options.anchorY, path, yOffset, lateral = w / 2;
if (isNumber(anchorX) && isNumber(anchorY)) {
path = [['M', anchorX, anchorY]];
// Prefer 45 deg connectors
yOffset = y - anchorY;
if (yOffset < 0) {
yOffset = -h - yOffset;
}
if (yOffset < w) {
lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
}
// Anchor below label
if (anchorY > y + h) {
path.push(['L', x + lateral, y + h]);
// Anchor above label
}
else if (anchorY < y) {
path.push(['L', x + lateral, y]);
// Anchor left of label
}
else if (anchorX < x) {
path.push(['L', x, y + h / 2]);
// Anchor right of label
}
else if (anchorX > x + w) {
path.push(['L', x + w, y + h / 2]);
}
}
return path || [];
};
export default ControllableLabel;

View File

@ -0,0 +1,141 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from './../../parts/Globals.js';
import U from './../../parts/Utilities.js';
var extend = U.extend, merge = U.merge;
import controllableMixin from './controllableMixin.js';
import markerMixin from './markerMixin.js';
// See TRACKER_FILL in highcharts.src.js
var TRACKER_FILL = 'rgba(192,192,192,' + (H.svg ? 0.0001 : 0.002) + ')';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A controllable path class.
*
* @requires modules/annotations
*
* @private
* @class
* @name Highcharts.AnnotationControllablePath
*
* @param {Highcharts.Annotation}
* Related annotation.
*
* @param {Highcharts.AnnotationsShapeOptions} options
* A path's options object.
*
* @param {number} index
* Index of the path.
**/
var ControllablePath = function (annotation, options, index) {
this.init(annotation, options, index);
this.collection = 'shapes';
};
/**
* A map object which allows to map options attributes to element attributes
*
* @name Highcharts.AnnotationControllablePath.attrsMap
* @type {Highcharts.Dictionary<string>}
*/
ControllablePath.attrsMap = {
dashStyle: 'dashstyle',
strokeWidth: 'stroke-width',
stroke: 'stroke',
fill: 'fill',
zIndex: 'zIndex'
};
merge(true, ControllablePath.prototype, controllableMixin, /** @lends Highcharts.AnnotationControllablePath# */ {
/**
* @type 'path'
*/
type: 'path',
setMarkers: markerMixin.setItemMarkers,
/**
* Map the controllable path to 'd' path attribute.
*
* @return {Highcharts.SVGPathArray|null}
* A path's d attribute.
*/
toD: function () {
var dOption = this.options.d;
if (dOption) {
return typeof dOption === 'function' ?
dOption.call(this) :
dOption;
}
var points = this.points, len = points.length, showPath = len, point = points[0], position = showPath && this.anchor(point).absolutePosition, pointIndex = 0, command, d = [];
if (position) {
d.push(['M', position.x, position.y]);
while (++pointIndex < len && showPath) {
point = points[pointIndex];
command = point.command || 'L';
position = this.anchor(point).absolutePosition;
if (command === 'M') {
d.push([command, position.x, position.y]);
}
else if (command === 'L') {
d.push([command, position.x, position.y]);
}
else if (command === 'Z') {
d.push([command]);
}
showPath = point.series.visible;
}
}
return showPath ?
this.chart.renderer.crispLine(d, this.graphic.strokeWidth()) :
null;
},
shouldBeDrawn: function () {
return (controllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
},
render: function (parent) {
var options = this.options, attrs = this.attrsFromOptions(options);
this.graphic = this.annotation.chart.renderer
.path([['M', 0, 0]])
.attr(attrs)
.add(parent);
if (options.className) {
this.graphic.addClass(options.className);
}
this.tracker = this.annotation.chart.renderer
.path([['M', 0, 0]])
.addClass('highcharts-tracker-line')
.attr({
zIndex: 2
})
.add(parent);
if (!this.annotation.chart.styledMode) {
this.tracker.attr({
'stroke-linejoin': 'round',
stroke: TRACKER_FILL,
fill: TRACKER_FILL,
'stroke-width': this.graphic.strokeWidth() +
options.snap * 2
});
}
controllableMixin.render.call(this);
extend(this.graphic, {
markerStartSetter: markerMixin.markerStartSetter,
markerEndSetter: markerMixin.markerEndSetter
});
this.setMarkers(this);
},
redraw: function (animation) {
var d = this.toD(), action = animation ? 'animate' : 'attr';
if (d) {
this.graphic[action]({ d: d });
this.tracker[action]({ d: d });
}
else {
this.graphic.attr({ d: 'M 0 ' + -9e9 });
this.tracker.attr({ d: 'M 0 ' + -9e9 });
}
this.graphic.placed = this.tracker.placed = Boolean(d);
controllableMixin.redraw.call(this, animation);
}
});
export default ControllablePath;

View File

@ -0,0 +1,82 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
import U from '../../parts/Utilities.js';
var merge = U.merge;
import controllableMixin from './controllableMixin.js';
import ControllablePath from './ControllablePath.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* A controllable rect class.
*
* @requires modules/annotations
*
* @private
* @class
* @name Highcharts.AnnotationControllableRect
*
* @param {Highcharts.Annotation} annotation
* An annotation instance.
*
* @param {Highcharts.AnnotationsShapeOptions} options
* A rect's options.
*
* @param {number} index
* Index of the rectangle
*/
var ControllableRect = function (annotation, options, index) {
this.init(annotation, options, index);
this.collection = 'shapes';
};
/**
* @typedef {Annotation.ControllablePath.AttrsMap}
* Annotation.ControllableRect.AttrsMap
* @property {string} width=width
* @property {string} height=height
*/
/**
* A map object which allows to map options attributes to element attributes
*
* @type {Annotation.ControllableRect.AttrsMap}
*/
ControllableRect.attrsMap = merge(ControllablePath.attrsMap, {
width: 'width',
height: 'height'
});
merge(true, ControllableRect.prototype, controllableMixin, /** @lends Annotation.ControllableRect# */ {
/**
* @type 'rect'
*/
type: 'rect',
translate: controllableMixin.translateShape,
render: function (parent) {
var attrs = this.attrsFromOptions(this.options);
this.graphic = this.annotation.chart.renderer
.rect(0, -9e9, 0, 0)
.attr(attrs)
.add(parent);
controllableMixin.render.call(this);
},
redraw: function (animation) {
var position = this.anchor(this.points[0]).absolutePosition;
if (position) {
this.graphic[animation ? 'animate' : 'attr']({
x: position.x,
y: position.y,
width: this.options.width,
height: this.options.height
});
}
else {
this.attr({
x: 0,
y: -9e9
});
}
this.graphic.placed = Boolean(position);
controllableMixin.redraw.call(this, animation);
}
});
export default ControllableRect;

View File

@ -0,0 +1,370 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
/**
* An object which denots a controllable's anchor positions - relative and
* absolute.
*
* @private
* @interface Highcharts.AnnotationAnchorObject
*/ /**
* Relative to the plot area position
* @name Highcharts.AnnotationAnchorObject#relativePosition
* @type {Highcharts.BBoxObject}
*/ /**
* Absolute position
* @name Highcharts.AnnotationAnchorObject#absolutePosition
* @type {Highcharts.BBoxObject}
*/
/**
* @interface Highcharts.AnnotationControllable
*/ /**
* @name Highcharts.AnnotationControllable#annotation
* @type {Highcharts.Annotation}
*/ /**
* @name Highcharts.AnnotationControllable#chart
* @type {Highcharts.Chart}
*/ /**
* @name Highcharts.AnnotationControllable#collection
* @type {string}
*/ /**
* @private
* @name Highcharts.AnnotationControllable#controlPoints
* @type {Array<Highcharts.AnnotationControlPoint>}
*/ /**
* @name Highcharts.AnnotationControllable#points
* @type {Array<Highcharts.Point>}
*/
import U from './../../parts/Utilities.js';
var isObject = U.isObject, isString = U.isString, merge = U.merge, splat = U.splat;
import './../../parts/Tooltip.js';
import ControlPoint from './../ControlPoint.js';
import MockPoint from './../MockPoint.js';
import Tooltip from '../../parts/Tooltip.js';
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* It provides methods for handling points, control points
* and points transformations.
*
* @private
* @mixin
* @name Highcharts.AnnotationControllableMixin
*/
var controllableMixin = {
/**
* Init the controllable
*/
init: function (annotation, options, index) {
this.annotation = annotation;
this.chart = annotation.chart;
this.options = options;
this.points = [];
this.controlPoints = [];
this.index = index;
this.linkPoints();
this.addControlPoints();
},
/**
* Redirect attr usage on the controllable graphic element.
*/
attr: function () {
this.graphic.attr.apply(this.graphic, arguments);
},
/**
* Get the controllable's points options.
*
* @return {Array<Highcharts.PointOptionsObject>}
* An array of points' options.
*/
getPointsOptions: function () {
var options = this.options;
return (options.points || (options.point && splat(options.point)));
},
/**
* Utility function for mapping item's options
* to element's attribute
*
* @param {Highcharts.AnnotationsLabelsOptions|Highcharts.AnnotationsShapesOptions} options
*
* @return {Highcharts.SVGAttributes}
* Mapped options.
*/
attrsFromOptions: function (options) {
var map = this.constructor.attrsMap, attrs = {}, key, mappedKey, styledMode = this.chart.styledMode;
for (key in options) { // eslint-disable-line guard-for-in
mappedKey = map[key];
if (mappedKey &&
(!styledMode ||
['fill', 'stroke', 'stroke-width']
.indexOf(mappedKey) === -1)) {
attrs[mappedKey] = options[key];
}
}
return attrs;
},
/**
* Returns object which denotes anchor position - relative and absolute.
*
* @param {Highcharts.AnnotationPointType} point
* A point like object.
*
* @return {Highcharts.AnnotationAnchorObject} a controllable anchor
*/
anchor: function (point) {
var plotBox = point.series.getPlotBox(), box = point.mock ?
point.toAnchor() :
Tooltip.prototype.getAnchor.call({
chart: point.series.chart
}, point), anchor = {
x: box[0] + (this.options.x || 0),
y: box[1] + (this.options.y || 0),
height: box[2] || 0,
width: box[3] || 0
};
return {
relativePosition: anchor,
absolutePosition: merge(anchor, {
x: anchor.x + plotBox.translateX,
y: anchor.y + plotBox.translateY
})
};
},
/**
* Map point's options to a point-like object.
*
* @param {string|Function|Highcharts.AnnotationMockPointOptionsObject|Highcharts.AnnotationPointType} pointOptions
* Point's options.
*
* @param {Highcharts.AnnotationPointType} point
* A point-like instance.
*
* @return {Highcharts.AnnotationPointType|null}
* if the point is found/set returns this point, otherwise null
*/
point: function (pointOptions, point) {
if (pointOptions && pointOptions.series) {
return pointOptions;
}
if (!point || point.series === null) {
if (isObject(pointOptions)) {
point = new MockPoint(this.chart, this, pointOptions);
}
else if (isString(pointOptions)) {
point = this.chart.get(pointOptions) || null;
}
else if (typeof pointOptions === 'function') {
var pointConfig = pointOptions.call(point, this);
point = pointConfig.series ?
pointConfig :
new MockPoint(this.chart, this, pointOptions);
}
}
return point;
},
/**
* Find point-like objects based on points options.
*
* @return {Array<Annotation.PointLike>} an array of point-like objects
*/
linkPoints: function () {
var pointsOptions = this.getPointsOptions(), points = this.points, len = (pointsOptions && pointsOptions.length) || 0, i, point;
for (i = 0; i < len; i++) {
point = this.point(pointsOptions[i], points[i]);
if (!point) {
points.length = 0;
return;
}
if (point.mock) {
point.refresh();
}
points[i] = point;
}
return points;
},
/**
* Add control points to a controllable.
*/
addControlPoints: function () {
var controlPointsOptions = this.options.controlPoints;
(controlPointsOptions || []).forEach(function (controlPointOptions, i) {
var options = merge(this.options.controlPointOptions, controlPointOptions);
if (!options.index) {
options.index = i;
}
controlPointsOptions[i] = options;
this.controlPoints.push(new ControlPoint(this.chart, this, options));
}, this);
},
/**
* Check if a controllable should be rendered/redrawn.
*
* @return {boolean}
* Whether a controllable should be drawn.
*/
shouldBeDrawn: function () {
return Boolean(this.points.length);
},
/**
* Render a controllable.
*/
render: function (_parentGroup) {
this.controlPoints.forEach(function (controlPoint) {
controlPoint.render();
});
},
/**
* Redraw a controllable.
*
* @param {boolean} [animation]
*/
redraw: function (animation) {
this.controlPoints.forEach(function (controlPoint) {
controlPoint.redraw(animation);
});
},
/**
* Transform a controllable with a specific transformation.
*
* @param {string} transformation a transformation name
* @param {number|null} cx origin x transformation
* @param {number|null} cy origin y transformation
* @param {number} p1 param for the transformation
* @param {number} [p2] param for the transformation
*/
transform: function (transformation, cx, cy, p1, p2) {
if (this.chart.inverted) {
var temp = cx;
cx = cy;
cy = temp;
}
this.points.forEach(function (point, i) {
this.transformPoint(transformation, cx, cy, p1, p2, i);
}, this);
},
/**
* Transform a point with a specific transformation
* If a transformed point is a real point it is replaced with
* the mock point.
*
* @param {string} transformation a transformation name
* @param {number|null} cx origin x transformation
* @param {number|null} cy origin y transformation
* @param {number} p1 param for the transformation
* @param {number|undefined} p2 param for the transformation
* @param {number} i index of the point
*/
transformPoint: function (transformation, cx, cy, p1, p2, i) {
var point = this.points[i];
if (!point.mock) {
point = this.points[i] = MockPoint.fromPoint(point);
}
point[transformation](cx, cy, p1, p2);
},
/**
* Translate a controllable.
*
* @param {number} dx translation for x coordinate
* @param {number} dy translation for y coordinate
**/
translate: function (dx, dy) {
this.transform('translate', null, null, dx, dy);
},
/**
* Translate a specific point within a controllable.
*
* @param {number} dx translation for x coordinate
* @param {number} dy translation for y coordinate
* @param {number} i index of the point
**/
translatePoint: function (dx, dy, i) {
this.transformPoint('translate', null, null, dx, dy, i);
},
/**
* Translate shape within controllable item.
* Replaces `controllable.translate` method.
*
* @param {number} dx translation for x coordinate
* @param {number} dy translation for y coordinate
*/
translateShape: function (dx, dy) {
var chart = this.annotation.chart,
// Annotation.options
shapeOptions = this.annotation.userOptions,
// Chart.options.annotations
annotationIndex = chart.annotations.indexOf(this.annotation), chartOptions = chart.options.annotations[annotationIndex];
this.translatePoint(dx, dy, 0);
// Options stored in:
// - chart (for exporting)
// - current config (for redraws)
chartOptions[this.collection][this.index].point = this.options.point;
shapeOptions[this.collection][this.index].point = this.options.point;
},
/**
* Rotate a controllable.
*
* @param {number} cx origin x rotation
* @param {number} cy origin y rotation
* @param {number} radians
**/
rotate: function (cx, cy, radians) {
this.transform('rotate', cx, cy, radians);
},
/**
* Scale a controllable.
*
* @param {number} cx origin x rotation
* @param {number} cy origin y rotation
* @param {number} sx scale factor x
* @param {number} sy scale factor y
*/
scale: function (cx, cy, sx, sy) {
this.transform('scale', cx, cy, sx, sy);
},
/**
* Set control points' visibility.
*
* @param {boolean} visible
*/
setControlPointsVisibility: function (visible) {
this.controlPoints.forEach(function (controlPoint) {
controlPoint.setVisibility(visible);
});
},
/**
* Destroy a controllable.
*/
destroy: function () {
if (this.graphic) {
this.graphic = this.graphic.destroy();
}
if (this.tracker) {
this.tracker = this.tracker.destroy();
}
this.controlPoints.forEach(function (controlPoint) {
controlPoint.destroy();
});
this.chart = null;
this.points = null;
this.controlPoints = null;
this.options = null;
if (this.annotation) {
this.annotation = null;
}
},
/**
* Update a controllable.
*
* @param {Object} newOptions
*/
update: function (newOptions) {
var annotation = this.annotation, options = merge(true, this.options, newOptions), parentGroup = this.graphic.parentGroup;
this.destroy();
this.constructor(annotation, options);
this.render(parentGroup);
this.redraw();
}
};
export default controllableMixin;

View File

@ -0,0 +1,157 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from './../../parts/Globals.js';
import U from './../../parts/Utilities.js';
var addEvent = U.addEvent, defined = U.defined, merge = U.merge, objectEach = U.objectEach, uniqueKey = U.uniqueKey;
import './../../parts/Chart.js';
import './../../parts/SvgRenderer.js';
/**
* Options for configuring markers for annotations.
*
* An example of the arrow marker:
* <pre>
* {
* arrow: {
* id: 'arrow',
* tagName: 'marker',
* refY: 5,
* refX: 5,
* markerWidth: 10,
* markerHeight: 10,
* children: [{
* tagName: 'path',
* attrs: {
* d: 'M 0 0 L 10 5 L 0 10 Z',
* strokeWidth: 0
* }
* }]
* }
* }
* </pre>
*
* @sample highcharts/annotations/custom-markers/
* Define a custom marker for annotations
*
* @sample highcharts/css/annotations-markers/
* Define markers in a styled mode
*
* @type {Highcharts.Dictionary<Highcharts.SVGDefinitionObject>}
* @since 6.0.0
* @optionparent defs
*/
var defaultMarkers = {
/**
* @type {Highcharts.SVGDefinitionObject}
*/
arrow: {
tagName: 'marker',
render: false,
id: 'arrow',
refY: 5,
refX: 9,
markerWidth: 10,
markerHeight: 10,
/**
* @type {Array<Highcharts.DefsOptions>}
*/
children: [{
tagName: 'path',
d: 'M 0 0 L 10 5 L 0 10 Z',
strokeWidth: 0
}]
},
/**
* @type {Highcharts.SVGDefinitionObject}
*/
'reverse-arrow': {
tagName: 'marker',
render: false,
id: 'reverse-arrow',
refY: 5,
refX: 1,
markerWidth: 10,
markerHeight: 10,
children: [{
tagName: 'path',
// reverse triangle (used as an arrow)
d: 'M 0 5 L 10 0 L 10 10 Z',
strokeWidth: 0
}]
}
};
H.SVGRenderer.prototype.addMarker = function (id, markerOptions) {
var options = { id: id };
var attrs = {
stroke: markerOptions.color || 'none',
fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
};
options.children = markerOptions.children.map(function (child) {
return merge(attrs, child);
});
var marker = this.definition(merge(true, {
markerWidth: 20,
markerHeight: 20,
refX: 0,
refY: 0,
orient: 'auto'
}, markerOptions, options));
marker.id = id;
return marker;
};
/* eslint-disable no-invalid-this, valid-jsdoc */
var createMarkerSetter = function (markerType) {
return function (value) {
this.attr(markerType, 'url(#' + value + ')');
};
};
/**
* @private
* @mixin
* @name Highcharts.AnnotaitonMarkerMixin
*/
var markerMixin = {
markerEndSetter: createMarkerSetter('marker-end'),
markerStartSetter: createMarkerSetter('marker-start'),
/**
* Set markers.
* @private
* @param {Highcharts.AnnotationControllablePath} item
*/
setItemMarkers: function (item) {
var itemOptions = item.options, chart = item.chart, defs = chart.options.defs, fill = itemOptions.fill, color = defined(fill) && fill !== 'none' ?
fill :
itemOptions.stroke, setMarker = function (markerType) {
var markerId = itemOptions[markerType], def, predefinedMarker, key, marker;
if (markerId) {
for (key in defs) { // eslint-disable-line guard-for-in
def = defs[key];
if (markerId === def.id &&
def.tagName === 'marker') {
predefinedMarker = def;
break;
}
}
if (predefinedMarker) {
marker = item[markerType] = chart.renderer
.addMarker((itemOptions.id || uniqueKey()) + '-' +
predefinedMarker.id, merge(predefinedMarker, { color: color }));
item.attr(markerType, marker.attr('id'));
}
}
};
['markerStart', 'markerEnd'].forEach(setMarker);
}
};
addEvent(H.Chart, 'afterGetContainer', function () {
this.options.defs = merge(defaultMarkers, this.options.defs || {});
objectEach(this.options.defs, function (def) {
if (def.tagName === 'marker' && def.render !== false) {
this.renderer.addMarker(def.id, def);
}
}, this);
});
export default markerMixin;

View File

@ -0,0 +1,212 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
import H from '../parts/Globals.js';
import U from '../parts/Utilities.js';
var addEvent = U.addEvent, fireEvent = U.fireEvent, inArray = U.inArray, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent;
/* eslint-disable valid-jsdoc */
/**
* It provides methods for:
* - adding and handling DOM events and a drag event,
* - mapping a mouse move event to the distance between two following events.
* The units of the distance are specific to a transformation,
* e.g. for rotation they are radians, for scaling they are scale factors.
*
* @private
* @mixin
* @memberOf Annotation
*/
var eventEmitterMixin = {
/**
* Add emitter events.
*/
addEvents: function () {
var emitter = this, addMouseDownEvent = function (element) {
addEvent(element, 'mousedown', function (e) {
emitter.onMouseDown(e);
});
};
addMouseDownEvent(this.graphic.element);
(emitter.labels || []).forEach(function (label) {
if (label.options.useHTML && label.graphic.text) {
// Mousedown event bound to HTML element (#13070).
addMouseDownEvent(label.graphic.text.element);
}
});
objectEach(emitter.options.events, function (event, type) {
var eventHandler = function (e) {
if (type !== 'click' || !emitter.cancelClick) {
event.call(emitter, emitter.chart.pointer.normalize(e), emitter.target);
}
};
if (inArray(type, emitter.nonDOMEvents || []) === -1) {
emitter.graphic.on(type, eventHandler);
}
else {
addEvent(emitter, type, eventHandler);
}
});
if (emitter.options.draggable) {
addEvent(emitter, 'drag', emitter.onDrag);
if (!emitter.graphic.renderer.styledMode) {
var cssPointer_1 = {
cursor: {
x: 'ew-resize',
y: 'ns-resize',
xy: 'move'
}[emitter.options.draggable]
};
emitter.graphic.css(cssPointer_1);
(emitter.labels || []).forEach(function (label) {
if (label.options.useHTML && label.graphic.text) {
label.graphic.text.css(cssPointer_1);
}
});
}
}
if (!emitter.isUpdating) {
fireEvent(emitter, 'add');
}
},
/**
* Remove emitter document events.
*/
removeDocEvents: function () {
if (this.removeDrag) {
this.removeDrag = this.removeDrag();
}
if (this.removeMouseUp) {
this.removeMouseUp = this.removeMouseUp();
}
},
/**
* Mouse down handler.
*/
onMouseDown: function (e) {
var emitter = this, pointer = emitter.chart.pointer, prevChartX, prevChartY;
if (e.preventDefault) {
e.preventDefault();
}
// On right click, do nothing:
if (e.button === 2) {
return;
}
e = pointer.normalize(e);
prevChartX = e.chartX;
prevChartY = e.chartY;
emitter.cancelClick = false;
emitter.chart.hasDraggedAnnotation = true;
emitter.removeDrag = addEvent(H.doc, 'mousemove', function (e) {
emitter.hasDragged = true;
e = pointer.normalize(e);
e.prevChartX = prevChartX;
e.prevChartY = prevChartY;
fireEvent(emitter, 'drag', e);
prevChartX = e.chartX;
prevChartY = e.chartY;
});
emitter.removeMouseUp = addEvent(H.doc, 'mouseup', function (e) {
emitter.cancelClick = emitter.hasDragged;
emitter.hasDragged = false;
emitter.chart.hasDraggedAnnotation = false;
// ControlPoints vs Annotation:
fireEvent(pick(emitter.target, emitter), 'afterUpdate');
emitter.onMouseUp(e);
});
},
/**
* Mouse up handler.
*/
onMouseUp: function (_e) {
var chart = this.chart, annotation = this.target || this, annotationsOptions = chart.options.annotations, index = chart.annotations.indexOf(annotation);
this.removeDocEvents();
annotationsOptions[index] = annotation.options;
},
/**
* Drag and drop event. All basic annotations should share this
* capability as well as the extended ones.
*/
onDrag: function (e) {
if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
var translation = this.mouseMoveToTranslation(e);
if (this.options.draggable === 'x') {
translation.y = 0;
}
if (this.options.draggable === 'y') {
translation.x = 0;
}
if (this.points.length) {
this.translate(translation.x, translation.y);
}
else {
this.shapes.forEach(function (shape) {
shape.translate(translation.x, translation.y);
});
this.labels.forEach(function (label) {
label.translate(translation.x, translation.y);
});
}
this.redraw(false);
}
},
/**
* Map mouse move event to the radians.
*/
mouseMoveToRadians: function (e, cx, cy) {
var prevDy = e.prevChartY - cy, prevDx = e.prevChartX - cx, dy = e.chartY - cy, dx = e.chartX - cx, temp;
if (this.chart.inverted) {
temp = prevDx;
prevDx = prevDy;
prevDy = temp;
temp = dx;
dx = dy;
dy = temp;
}
return Math.atan2(dy, dx) - Math.atan2(prevDy, prevDx);
},
/**
* Map mouse move event to the distance between two following events.
*/
mouseMoveToTranslation: function (e) {
var dx = e.chartX - e.prevChartX, dy = e.chartY - e.prevChartY, temp;
if (this.chart.inverted) {
temp = dy;
dy = dx;
dx = temp;
}
return {
x: dx,
y: dy
};
},
/**
* Map mouse move to the scale factors.
*
* @param {Object} e event
* @param {number} cx center x
* @param {number} cy center y
**/
mouseMoveToScale: function (e, cx, cy) {
var prevDx = e.prevChartX - cx, prevDy = e.prevChartY - cy, dx = e.chartX - cx, dy = e.chartY - cy, sx = (dx || 1) / (prevDx || 1), sy = (dy || 1) / (prevDy || 1), temp;
if (this.chart.inverted) {
temp = sy;
sy = sx;
sx = temp;
}
return {
x: sx,
y: sy
};
},
/**
* Destroy the event emitter.
*/
destroy: function () {
this.removeDocEvents();
removeEvent(this);
this.hcEvents = null;
}
};
export default eventEmitterMixin;

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,732 @@
/* *
*
* Popup generator for Stock tools
*
* (c) 2009-2017 Sebastian Bochan
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../parts/Globals.js';
import NavigationBindings from '../annotations/navigationBindings.js';
import U from '../parts/Utilities.js';
var addEvent = U.addEvent, createElement = U.createElement, defined = U.defined, isArray = U.isArray, isObject = U.isObject, isString = U.isString, objectEach = U.objectEach, pick = U.pick, wrap = U.wrap;
var indexFilter = /\d/g, PREFIX = 'highcharts-', DIV = 'div', INPUT = 'input', LABEL = 'label', BUTTON = 'button', SELECT = 'select', OPTION = 'option', SPAN = 'span', UL = 'ul', LI = 'li', H3 = 'h3';
/* eslint-disable no-invalid-this, valid-jsdoc */
// onContainerMouseDown blocks internal popup events, due to e.preventDefault.
// Related issue #4606
wrap(H.Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
var popupClass = e.target && e.target.className;
// elements is not in popup
if (!(isString(popupClass) &&
popupClass.indexOf(PREFIX + 'popup-field') >= 0)) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
H.Popup = function (parentDiv, iconsURL) {
this.init(parentDiv, iconsURL);
};
H.Popup.prototype = {
/**
* Initialize the popup. Create base div and add close button.
* @private
* @param {Highcharts.HTMLDOMElement} parentDiv
* Container where popup should be placed
* @param {string} iconsURL
* Icon URL
*/
init: function (parentDiv, iconsURL) {
// create popup div
this.container = createElement(DIV, {
className: PREFIX + 'popup'
}, null, parentDiv);
this.lang = this.getLangpack();
this.iconsURL = iconsURL;
// add close button
this.addCloseBtn();
},
/**
* Create HTML element and attach click event (close popup).
* @private
*/
addCloseBtn: function () {
var _self = this, closeBtn;
// create close popup btn
closeBtn = createElement(DIV, {
className: PREFIX + 'popup-close'
}, null, this.container);
closeBtn.style['background-image'] = 'url(' +
this.iconsURL + 'close.svg)';
['click', 'touchstart'].forEach(function (eventName) {
addEvent(closeBtn, eventName, function () {
_self.closePopup();
});
});
},
/**
* Create two columns (divs) in HTML.
* @private
* @param {Highcharts.HTMLDOMElement} container
* Container of columns
* @return {Highcharts.Dictionary<Highcharts.HTMLDOMElement>}
* Reference to two HTML columns (lhsCol, rhsCol)
*/
addColsContainer: function (container) {
var rhsCol, lhsCol;
// left column
lhsCol = createElement(DIV, {
className: PREFIX + 'popup-lhs-col'
}, null, container);
// right column
rhsCol = createElement(DIV, {
className: PREFIX + 'popup-rhs-col'
}, null, container);
// wrapper content
createElement(DIV, {
className: PREFIX + 'popup-rhs-col-wrapper'
}, null, rhsCol);
return {
lhsCol: lhsCol,
rhsCol: rhsCol
};
},
/**
* Create input with label.
* @private
* @param {string} option
* Chain of fields i.e params.styles.fontSize
* @param {string} type
* Indicator type
* @param {Highhcharts.HTMLDOMElement}
* Container where elements should be added
* @param {string} value
* Default value of input i.e period value is 14, extracted from
* defaultOptions (ADD mode) or series options (EDIT mode)
*/
addInput: function (option, type, parentDiv, value) {
var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = PREFIX + type + '-' + optionName;
if (!inputName.match(indexFilter)) {
// add label
createElement(LABEL, {
innerHTML: lang[optionName] || optionName,
htmlFor: inputName
}, null, parentDiv);
}
// add input
createElement(INPUT, {
name: inputName,
value: value[0],
type: value[1],
className: PREFIX + 'popup-field'
}, null, parentDiv).setAttribute(PREFIX + 'data-name', option);
},
/**
* Create button.
* @private
* @param {Highcharts.HTMLDOMElement} parentDiv
* Container where elements should be added
* @param {string} label
* Text placed as button label
* @param {string} type
* add | edit | remove
* @param {Function} callback
* On click callback
* @param {Highcharts.HTMLDOMElement} fieldsDiv
* Container where inputs are generated
* @return {Highcharts.HTMLDOMElement}
* HTML button
*/
addButton: function (parentDiv, label, type, callback, fieldsDiv) {
var _self = this, closePopup = this.closePopup, getFields = this.getFields, button;
button = createElement(BUTTON, {
innerHTML: label
}, null, parentDiv);
['click', 'touchstart'].forEach(function (eventName) {
addEvent(button, eventName, function () {
closePopup.call(_self);
return callback(getFields(fieldsDiv, type));
});
});
return button;
},
/**
* Get values from all inputs and create JSON.
* @private
* @param {Highcharts.HTMLDOMElement} - container where inputs are created
* @param {string} - add | edit | remove
* @return {Highcharts.PopupFieldsObject} - fields
*/
getFields: function (parentDiv, type) {
var inputList = parentDiv.querySelectorAll('input'), optionSeries = '#' + PREFIX + 'select-series > option:checked', optionVolume = '#' + PREFIX + 'select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0], seriesId, param, fieldsOutput;
fieldsOutput = {
actionType: type,
linkedTo: linkedTo && linkedTo.getAttribute('value'),
fields: {}
};
[].forEach.call(inputList, function (input) {
param = input.getAttribute(PREFIX + 'data-name');
seriesId = input.getAttribute(PREFIX + 'data-series-id');
// params
if (seriesId) {
fieldsOutput.seriesId = input.value;
}
else if (param) {
fieldsOutput.fields[param] = input.value;
}
else {
// type like sma / ema
fieldsOutput.type = input.value;
}
});
if (volumeTo) {
fieldsOutput.fields['params.volumeSeriesID'] = volumeTo.getAttribute('value');
}
return fieldsOutput;
},
/**
* Reset content of the current popup and show.
* @private
*/
showPopup: function () {
var popupDiv = this.container, toolbarClass = PREFIX + 'annotation-toolbar', popupCloseBtn = popupDiv
.querySelectorAll('.' + PREFIX + 'popup-close')[0];
// reset content
popupDiv.innerHTML = '';
// reset toolbar styles if exists
if (popupDiv.className.indexOf(toolbarClass) >= 0) {
popupDiv.classList.remove(toolbarClass);
// reset toolbar inline styles
popupDiv.removeAttribute('style');
}
// add close button
popupDiv.appendChild(popupCloseBtn);
popupDiv.style.display = 'block';
},
/**
* Hide popup.
* @private
*/
closePopup: function () {
this.popup.container.style.display = 'none';
},
/**
* Create content and show popup.
* @private
* @param {string} - type of popup i.e indicators
* @param {Highcharts.Chart} - chart
* @param {Highcharts.AnnotationsOptions} - options
* @param {Function} - on click callback
*/
showForm: function (type, chart, options, callback) {
this.popup = chart.navigationBindings.popup;
// show blank popup
this.showPopup();
// indicator form
if (type === 'indicators') {
this.indicators.addForm.call(this, chart, options, callback);
}
// annotation small toolbar
if (type === 'annotation-toolbar') {
this.annotations.addToolbar.call(this, chart, options, callback);
}
// annotation edit form
if (type === 'annotation-edit') {
this.annotations.addForm.call(this, chart, options, callback);
}
// flags form - add / edit
if (type === 'flag') {
this.annotations.addForm.call(this, chart, options, callback, true);
}
},
/**
* Return lang definitions for popup.
* @private
* @return {Highcharts.Dictionary<string>} - elements translations.
*/
getLangpack: function () {
return H.getOptions().lang.navigation.popup;
},
annotations: {
/**
* Create annotation simple form. It contains two buttons
* (edit / remove) and text label.
* @private
* @param {Highcharts.Chart} - chart
* @param {Highcharts.AnnotationsOptions} - options
* @param {Function} - on click callback
*/
addToolbar: function (chart, options, callback) {
var _self = this, lang = this.lang, popupDiv = this.popup.container, showForm = this.showForm, toolbarClass = PREFIX + 'annotation-toolbar', button;
// set small size
if (popupDiv.className.indexOf(toolbarClass) === -1) {
popupDiv.className += ' ' + toolbarClass;
}
// set position
popupDiv.style.top = chart.plotTop + 10 + 'px';
// create label
createElement(SPAN, {
innerHTML: pick(
// Advanced annotations:
lang[options.langKey] || options.langKey,
// Basic shapes:
options.shapes && options.shapes[0].type)
}, null, popupDiv);
// add buttons
button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', callback, popupDiv);
button.className += ' ' + PREFIX + 'annotation-remove-button';
button.style['background-image'] = 'url(' +
this.iconsURL + 'destroy.svg)';
button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', function () {
showForm.call(_self, 'annotation-edit', chart, options, callback);
}, popupDiv);
button.className += ' ' + PREFIX + 'annotation-edit-button';
button.style['background-image'] = 'url(' +
this.iconsURL + 'edit.svg)';
},
/**
* Create annotation simple form.
* It contains fields with param names.
* @private
* @param {Highcharts.Chart} chart
* Chart
* @param {Object} options
* Options
* @param {Function} callback
* On click callback
* @param {boolean} [isInit]
* If it is a form declared for init annotation
*/
addForm: function (chart, options, callback, isInit) {
var popupDiv = this.popup.container, lang = this.lang, bottomRow, lhsCol;
// create title of annotations
lhsCol = createElement('h2', {
innerHTML: lang[options.langKey] || options.langKey,
className: PREFIX + 'popup-main-title'
}, null, popupDiv);
// left column
lhsCol = createElement(DIV, {
className: PREFIX + 'popup-lhs-col ' + PREFIX + 'popup-lhs-full'
}, null, popupDiv);
bottomRow = createElement(DIV, {
className: PREFIX + 'popup-bottom-row'
}, null, popupDiv);
this.annotations.addFormFields.call(this, lhsCol, chart, '', options, [], true);
this.addButton(bottomRow, isInit ?
(lang.addButton || 'add') :
(lang.saveButton || 'save'), isInit ? 'add' : 'save', callback, popupDiv);
},
/**
* Create annotation's form fields.
* @private
* @param {Highcharts.HTMLDOMElement} parentDiv
* Div where inputs are placed
* @param {Highcharts.Chart} chart
* Chart
* @param {string} parentNode
* Name of parent to create chain of names
* @param {Highcharts.AnnotationsOptions} options
* Options
* @param {Array<unknown>} storage
* Array where all items are stored
* @param {boolean} [isRoot]
* Recursive flag for root
*/
addFormFields: function (parentDiv, chart, parentNode, options, storage, isRoot) {
var _self = this, addFormFields = this.annotations.addFormFields, addInput = this.addInput, lang = this.lang, parentFullName, titleName;
objectEach(options, function (value, option) {
// create name like params.styles.fontSize
parentFullName = parentNode !== '' ?
parentNode + '.' + option : option;
if (isObject(value)) {
if (
// value is object of options
!isArray(value) ||
// array of objects with params. i.e labels in Fibonacci
(isArray(value) && isObject(value[0]))) {
titleName = lang[option] || option;
if (!titleName.match(indexFilter)) {
storage.push([
true,
titleName,
parentDiv
]);
}
addFormFields.call(_self, parentDiv, chart, parentFullName, value, storage, false);
}
else {
storage.push([
_self,
parentFullName,
'annotation',
parentDiv,
value
]);
}
}
});
if (isRoot) {
storage = storage.sort(function (a) {
return a[1].match(/format/g) ? -1 : 1;
});
storage.forEach(function (genInput) {
if (genInput[0] === true) {
createElement(SPAN, {
className: PREFIX + 'annotation-title',
innerHTML: genInput[1]
}, null, genInput[2]);
}
else {
addInput.apply(genInput[0], genInput.splice(1));
}
});
}
}
},
indicators: {
/**
* Create indicator's form. It contains two tabs (ADD and EDIT) with
* content.
* @private
*/
addForm: function (chart, _options, callback) {
var tabsContainers, indicators = this.indicators, lang = this.lang, buttonParentDiv;
// add tabs
this.tabs.init.call(this, chart);
// get all tabs content divs
tabsContainers = this.popup.container
.querySelectorAll('.' + PREFIX + 'tab-item-content');
// ADD tab
this.addColsContainer(tabsContainers[0]);
indicators.addIndicatorList.call(this, chart, tabsContainers[0], 'add');
buttonParentDiv = tabsContainers[0]
.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
this.addButton(buttonParentDiv, lang.addButton || 'add', 'add', callback, buttonParentDiv);
// EDIT tab
this.addColsContainer(tabsContainers[1]);
indicators.addIndicatorList.call(this, chart, tabsContainers[1], 'edit');
buttonParentDiv = tabsContainers[1]
.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
this.addButton(buttonParentDiv, lang.saveButton || 'save', 'edit', callback, buttonParentDiv);
this.addButton(buttonParentDiv, lang.removeButton || 'remove', 'remove', callback, buttonParentDiv);
},
/**
* Create HTML list of all indicators (ADD mode) or added indicators
* (EDIT mode).
* @private
*/
addIndicatorList: function (chart, parentDiv, listType) {
var _self = this, lhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0], isEdit = listType === 'edit', series = (isEdit ?
chart.series : // EDIT mode
chart.options.plotOptions // ADD mode
), addFormFields = this.indicators.addFormFields, rhsColWrapper, indicatorList, item;
// create wrapper for list
indicatorList = createElement(UL, {
className: PREFIX + 'indicator-list'
}, null, lhsCol);
rhsColWrapper = rhsCol
.querySelectorAll('.' + PREFIX + 'popup-rhs-col-wrapper')[0];
objectEach(series, function (serie, value) {
var seriesOptions = serie.options;
if (serie.params ||
seriesOptions && seriesOptions.params) {
var indicatorNameType = _self.indicators.getNameType(serie, value), indicatorType = indicatorNameType.type;
item = createElement(LI, {
className: PREFIX + 'indicator-list',
innerHTML: indicatorNameType.name
}, null, indicatorList);
['click', 'touchstart'].forEach(function (eventName) {
addEvent(item, eventName, function () {
addFormFields.call(_self, chart, isEdit ? serie : series[indicatorType], indicatorNameType.type, rhsColWrapper);
// add hidden input with series.id
if (isEdit && serie.options) {
createElement(INPUT, {
type: 'hidden',
name: PREFIX + 'id-' + indicatorType,
value: serie.options.id
}, null, rhsColWrapper)
.setAttribute(PREFIX + 'data-series-id', serie.options.id);
}
});
});
}
});
// select first item from the list
if (indicatorList.childNodes.length > 0) {
indicatorList.childNodes[0].click();
}
},
/**
* Extract full name and type of requested indicator.
* @private
* @param {Highcharts.Series} series
* Series which name is needed. (EDIT mode - defaultOptions.series, ADD
* mode - indicator series).
* @param {string} - indicator type like: sma, ema, etc.
* @return {Object} - series name and type like: sma, ema, etc.
*/
getNameType: function (series, type) {
var options = series.options, seriesTypes = H.seriesTypes,
// add mode
seriesName = seriesTypes[type] &&
seriesTypes[type].prototype.nameBase || type.toUpperCase(), seriesType = type;
// edit
if (options && options.type) {
seriesType = series.options.type;
seriesName = series.name;
}
return {
name: seriesName,
type: seriesType
};
},
/**
* List all series with unique ID. Its mandatory for indicators to set
* correct linking.
* @private
* @param {string} type
* Indicator type like: sma, ema, etc.
* @param {string} optionName
* Type of select i.e series or volume.
* @param {Highcharts.Chart} chart
* Chart
* @param {Highcharts.HTMLDOMElement} parentDiv
* Element where created HTML list is added
* @param {string} selectedOption
* optional param for default value in dropdown
*/
listAllSeries: function (type, optionName, chart, parentDiv, selectedOption) {
var selectName = PREFIX + optionName + '-type-' + type, lang = this.lang, selectBox, seriesOptions;
createElement(LABEL, {
innerHTML: lang[optionName] || optionName,
htmlFor: selectName
}, null, parentDiv);
// select type
selectBox = createElement(SELECT, {
name: selectName,
className: PREFIX + 'popup-field'
}, null, parentDiv);
selectBox.setAttribute('id', PREFIX + 'select-' + optionName);
// list all series which have id - mandatory for creating indicator
chart.series.forEach(function (serie) {
seriesOptions = serie.options;
if (!seriesOptions.params &&
seriesOptions.id &&
seriesOptions.id !== PREFIX + 'navigator-series') {
createElement(OPTION, {
innerHTML: seriesOptions.name || seriesOptions.id,
value: seriesOptions.id
}, null, selectBox);
}
});
if (defined(selectedOption)) {
selectBox.value = selectedOption;
}
},
/**
* Create typical inputs for chosen indicator. Fields are extracted from
* defaultOptions (ADD mode) or current indicator (ADD mode). Two extra
* fields are added:
* - hidden input - contains indicator type (required for callback)
* - select - list of series which can be linked with indicator
* @private
* @param {Highcharts.Chart} chart
* Chart
* @param {Highcharts.Series} series
* Indicator
* @param {string} seriesType
* Indicator type like: sma, ema, etc.
* @param {Highcharts.HTMLDOMElement} rhsColWrapper
* Element where created HTML list is added
*/
addFormFields: function (chart, series, seriesType, rhsColWrapper) {
var fields = series.params || series.options.params, getNameType = this.indicators.getNameType;
// reset current content
rhsColWrapper.innerHTML = '';
// create title (indicator name in the right column)
createElement(H3, {
className: PREFIX + 'indicator-title',
innerHTML: getNameType(series, seriesType).name
}, null, rhsColWrapper);
// input type
createElement(INPUT, {
type: 'hidden',
name: PREFIX + 'type-' + seriesType,
value: seriesType
}, null, rhsColWrapper);
// list all series with id
this.indicators.listAllSeries.call(this, seriesType, 'series', chart, rhsColWrapper, series.linkedParent && fields.volumeSeriesID);
if (fields.volumeSeriesID) {
this.indicators.listAllSeries.call(this, seriesType, 'volume', chart, rhsColWrapper, series.linkedParent && series.linkedParent.options.id);
}
// add param fields
this.indicators.addParamInputs.call(this, chart, 'params', fields, seriesType, rhsColWrapper);
},
/**
* Recurent function which lists all fields, from params object and
* create them as inputs. Each input has unique `data-name` attribute,
* which keeps chain of fields i.e params.styles.fontSize.
* @private
* @param {Highcharts.Chart} chart
* Chart
* @param {string} parentNode
* Name of parent to create chain of names
* @param {Highcharts.PopupFieldsDictionary<string>} fields
* Params which are based for input create
* @param {string} type
* Indicator type like: sma, ema, etc.
* @param {Highcharts.HTMLDOMElement} parentDiv
* Element where created HTML list is added
*/
addParamInputs: function (chart, parentNode, fields, type, parentDiv) {
var _self = this, addParamInputs = this.indicators.addParamInputs, addInput = this.addInput, parentFullName;
objectEach(fields, function (value, fieldName) {
// create name like params.styles.fontSize
parentFullName = parentNode + '.' + fieldName;
if (isObject(value)) {
addParamInputs.call(_self, chart, parentFullName, value, type, parentDiv);
}
else if (
// skip volume field which is created by addFormFields
parentFullName !== 'params.volumeSeriesID') {
addInput.call(_self, parentFullName, type, parentDiv, [value, 'text'] // all inputs are text type
);
}
});
},
/**
* Get amount of indicators added to chart.
* @private
* @return {number} - Amount of indicators
*/
getAmount: function () {
var series = this.series, counter = 0;
objectEach(series, function (serie) {
var seriesOptions = serie.options;
if (serie.params ||
seriesOptions && seriesOptions.params) {
counter++;
}
});
return counter;
}
},
tabs: {
/**
* Init tabs. Create tab menu items, tabs containers
* @private
* @param {Highcharts.Chart} chart
* Reference to current chart
*/
init: function (chart) {
var tabs = this.tabs, indicatorsCount = this.indicators.getAmount.call(chart), firstTab; // run by default
// create menu items
firstTab = tabs.addMenuItem.call(this, 'add');
tabs.addMenuItem.call(this, 'edit', indicatorsCount);
// create tabs containers
tabs.addContentItem.call(this, 'add');
tabs.addContentItem.call(this, 'edit');
tabs.switchTabs.call(this, indicatorsCount);
// activate first tab
tabs.selectTab.call(this, firstTab, 0);
},
/**
* Create tab menu item
* @private
* @param {string} tabName
* `add` or `edit`
* @param {number} [disableTab]
* Disable tab when 0
* @return {Highcharts.HTMLDOMElement}
* Created HTML tab-menu element
*/
addMenuItem: function (tabName, disableTab) {
var popupDiv = this.popup.container, className = PREFIX + 'tab-item', lang = this.lang, menuItem;
if (disableTab === 0) {
className += ' ' + PREFIX + 'tab-disabled';
}
// tab 1
menuItem = createElement(SPAN, {
innerHTML: lang[tabName + 'Button'] || tabName,
className: className
}, null, popupDiv);
menuItem.setAttribute(PREFIX + 'data-tab-type', tabName);
return menuItem;
},
/**
* Create tab content
* @private
* @return {HTMLDOMElement} - created HTML tab-content element
*/
addContentItem: function () {
var popupDiv = this.popup.container;
return createElement(DIV, {
className: PREFIX + 'tab-item-content'
}, null, popupDiv);
},
/**
* Add click event to each tab
* @private
* @param {number} disableTab
* Disable tab when 0
*/
switchTabs: function (disableTab) {
var _self = this, popupDiv = this.popup.container, tabs = popupDiv.querySelectorAll('.' + PREFIX + 'tab-item'), dataParam;
tabs.forEach(function (tab, i) {
dataParam = tab.getAttribute(PREFIX + 'data-tab-type');
if (dataParam === 'edit' && disableTab === 0) {
return;
}
['click', 'touchstart'].forEach(function (eventName) {
addEvent(tab, eventName, function () {
// reset class on other elements
_self.tabs.deselectAll.call(_self);
_self.tabs.selectTab.call(_self, this, i);
});
});
});
},
/**
* Set tab as visible
* @private
* @param {globals.Element} - current tab
* @param {number} - Index of tab in menu
*/
selectTab: function (tab, index) {
var allTabs = this.popup.container
.querySelectorAll('.' + PREFIX + 'tab-item-content');
tab.className += ' ' + PREFIX + 'tab-item-active';
allTabs[index].className += ' ' + PREFIX + 'tab-item-show';
},
/**
* Set all tabs as invisible.
* @private
*/
deselectAll: function () {
var popupDiv = this.popup.container, tabs = popupDiv
.querySelectorAll('.' + PREFIX + 'tab-item'), tabsContent = popupDiv
.querySelectorAll('.' + PREFIX + 'tab-item-content'), i;
for (i = 0; i < tabs.length; i++) {
tabs[i].classList.remove(PREFIX + 'tab-item-active');
tabsContent[i].classList.remove(PREFIX + 'tab-item-show');
}
}
}
};
addEvent(NavigationBindings, 'showPopup', function (config) {
if (!this.popup) {
// Add popup to main container
this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
(this.chart.options.stockTools &&
this.chart.options.stockTools.gui.iconsURL) ||
'https://code.highcharts.com/8.1.0/gfx/stock-icons/'));
}
this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
});
addEvent(NavigationBindings, 'closePopup', function () {
if (this.popup) {
this.popup.closePopup();
}
});

View File

@ -0,0 +1,130 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
var Annotation = H.Annotation;
/* eslint-disable no-invalid-this */
var BasicAnnotation = function () {
Annotation.apply(this, arguments);
};
H.extendAnnotation(BasicAnnotation, null, {
basicControlPoints: {
label: [{
symbol: 'triangle-down',
positioner: function (target) {
if (!target.graphic.placed) {
return {
x: 0,
y: -9e7
};
}
var xy = H.Annotation.MockPoint
.pointToPixels(target.points[0]);
return {
x: xy.x - this.graphic.width / 2,
y: xy.y - this.graphic.height / 2
};
},
// TRANSLATE POINT/ANCHOR
events: {
drag: function (e, target) {
var xy = this.mouseMoveToTranslation(e);
target.translatePoint(xy.x, xy.y);
target.annotation.userOptions.labels[0].point =
target.options.point;
target.redraw(false);
}
}
}, {
symbol: 'square',
positioner: function (target) {
if (!target.graphic.placed) {
return {
x: 0,
y: -9e7
};
}
return {
x: target.graphic.alignAttr.x -
this.graphic.width / 2,
y: target.graphic.alignAttr.y -
this.graphic.height / 2
};
},
// TRANSLATE POSITION WITHOUT CHANGING THE
// ANCHOR
events: {
drag: function (e, target) {
var xy = this.mouseMoveToTranslation(e);
target.translate(xy.x, xy.y);
target.annotation.userOptions.labels[0].point =
target.options.point;
target.redraw(false);
}
}
}],
rectangle: [{
positioner: function (annotation) {
var xy = H.Annotation.MockPoint
.pointToPixels(annotation.points[2]);
return {
x: xy.x - 4,
y: xy.y - 4
};
},
events: {
drag: function (e, target) {
var annotation = target.annotation, coords = this.chart.pointer.getCoordinates(e), x = coords.xAxis[0].value, y = coords.yAxis[0].value, points = target.options.points;
// Top right point
points[1].x = x;
// Bottom right point (cursor position)
points[2].x = x;
points[2].y = y;
// Bottom left
points[3].y = y;
annotation.userOptions.shapes[0].points =
target.options.points;
annotation.redraw(false);
}
}
}],
circle: [{
positioner: function (target) {
var xy = H.Annotation.MockPoint.pointToPixels(target.points[0]), r = target.options.r;
return {
x: xy.x + r * Math.cos(Math.PI / 4) -
this.graphic.width / 2,
y: xy.y + r * Math.sin(Math.PI / 4) -
this.graphic.height / 2
};
},
events: {
// TRANSFORM RADIUS ACCORDING TO Y
// TRANSLATION
drag: function (e, target) {
var annotation = target.annotation, position = this.mouseMoveToTranslation(e);
target.setRadius(Math.max(target.options.r +
position.y /
Math.sin(Math.PI / 4), 5));
annotation.userOptions.shapes[0].r = target.options.r;
annotation.userOptions.shapes[0].point =
target.options.point;
target.redraw(false);
}
}
}]
},
addControlPoints: function () {
var options = this.options, controlPoints = this.basicControlPoints, langKey = options.langKey, optionsGroup = options.labels || options.shapes;
optionsGroup.forEach(function (group) {
if (langKey) {
group.controlPoints = controlPoints[langKey];
}
});
}
});
Annotation.types.basicAnnotation = BasicAnnotation;
export default BasicAnnotation;

View File

@ -0,0 +1,144 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, MockPoint = Annotation.MockPoint, ControlPoint = Annotation.ControlPoint;
/* eslint-disable no-invalid-this, valid-jsdoc */
var CrookedLine = function () {
Annotation.apply(this, arguments);
};
H.extendAnnotation(CrookedLine, null, {
/**
* Overrides default setter to get axes from typeOptions.
* @private
*/
setClipAxes: function () {
this.clipXAxis = this.chart.xAxis[this.options.typeOptions.xAxis];
this.clipYAxis = this.chart.yAxis[this.options.typeOptions.yAxis];
},
getPointsOptions: function () {
var typeOptions = this.options.typeOptions;
return typeOptions.points.map(function (pointOptions) {
pointOptions.xAxis = typeOptions.xAxis;
pointOptions.yAxis = typeOptions.yAxis;
return pointOptions;
});
},
getControlPointsOptions: function () {
return this.getPointsOptions();
},
addControlPoints: function () {
this.getControlPointsOptions().forEach(function (pointOptions, i) {
var controlPoint = new ControlPoint(this.chart, this, merge(this.options.controlPointOptions, pointOptions.controlPoint), i);
this.controlPoints.push(controlPoint);
pointOptions.controlPoint = controlPoint.options;
}, this);
},
addShapes: function () {
var typeOptions = this.options.typeOptions, shape = this.initShape(merge(typeOptions.line, {
type: 'path',
points: this.points.map(function (_point, i) {
return function (target) {
return target.annotation.points[i];
};
})
}), false);
typeOptions.line = shape.options;
}
},
/**
* A crooked line annotation.
*
* @sample highcharts/annotations-advanced/crooked-line/
* Crooked line
*
* @product highstock
* @optionparent annotations.crookedLine
*/
{
/**
* @extends annotations.labelOptions
* @apioption annotations.crookedLine.labelOptions
*/
/**
* @extends annotations.shapeOptions
* @apioption annotations.crookedLine.shapeOptions
*/
/**
* Additional options for an annotation with the type.
*/
typeOptions: {
/**
* This number defines which xAxis the point is connected to.
* It refers to either the axis id or the index of the axis
* in the xAxis array.
*/
xAxis: 0,
/**
* This number defines which yAxis the point is connected to.
* It refers to either the axis id or the index of the axis
* in the xAxis array.
*/
yAxis: 0,
/**
* @type {Array<*>}
* @apioption annotations.crookedLine.typeOptions.points
*/
/**
* The x position of the point.
*
* @type {number}
* @apioption annotations.crookedLine.typeOptions.points.x
*/
/**
* The y position of the point.
*
* @type {number}
* @apioption annotations.crookedLine.typeOptions.points.y
*/
/**
* @type {number}
* @excluding positioner, events
* @apioption annotations.crookedLine.typeOptions.points.controlPoint
*/
/**
* Line options.
*
* @excluding height, point, points, r, type, width
*/
line: {
fill: 'none'
}
},
/**
* @excluding positioner, events
*/
controlPointOptions: {
positioner: function (target) {
var graphic = this.graphic, xy = MockPoint.pointToPixels(target.points[this.index]);
return {
x: xy.x - graphic.width / 2,
y: xy.y - graphic.height / 2
};
},
events: {
drag: function (e, target) {
if (target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop)) {
var translation = this.mouseMoveToTranslation(e);
target.translatePoint(translation.x, translation.y, this.index);
// Update options:
target.options.typeOptions.points[this.index].x = target.points[this.index].x;
target.options.typeOptions.points[this.index].y = target.points[this.index].y;
target.redraw(false);
}
}
}
}
});
Annotation.types.crookedLine = CrookedLine;
export default CrookedLine;

View File

@ -0,0 +1,64 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, CrookedLine = Annotation.types.crookedLine;
/* eslint-disable no-invalid-this, valid-jsdoc */
var ElliottWave = function () {
CrookedLine.apply(this, arguments);
};
H.extendAnnotation(ElliottWave, CrookedLine, {
addLabels: function () {
this.getPointsOptions().forEach(function (point, i) {
var label = this.initLabel(merge(point.label, {
text: this.options.typeOptions.labels[i],
point: function (target) {
return target.annotation.points[i];
}
}), false);
point.label = label.options;
}, this);
}
},
/**
* An elliott wave annotation.
*
* @sample highcharts/annotations-advanced/elliott-wave/
* Elliott wave
*
* @extends annotations.crookedLine
* @product highstock
* @optionparent annotations.elliottWave
*/
{
typeOptions: {
/**
* @extends annotations.crookedLine.labelOptions
* @apioption annotations.elliottWave.typeOptions.points.label
*/
/**
* @ignore-options
*/
labels: ['(0)', '(A)', '(B)', '(C)', '(D)', '(E)'],
line: {
strokeWidth: 1
}
},
labelOptions: {
align: 'center',
allowOverlap: true,
crop: true,
overflow: 'none',
type: 'rect',
backgroundColor: 'none',
borderWidth: 0,
y: -5
}
});
Annotation.types.elliottWave = ElliottWave;
export default ElliottWave;

View File

@ -0,0 +1,162 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, MockPoint = Annotation.MockPoint, Tunnel = Annotation.types.tunnel;
/* eslint-disable no-invalid-this, valid-jsdoc */
var createPathDGenerator = function (retracementIndex, isBackground) {
return function () {
var annotation = this.annotation, leftTop = this.anchor(annotation.startRetracements[retracementIndex]).absolutePosition, rightTop = this.anchor(annotation.endRetracements[retracementIndex]).absolutePosition, d = [
['M', Math.round(leftTop.x), Math.round(leftTop.y)],
['L', Math.round(rightTop.x), Math.round(rightTop.y)]
], rightBottom, leftBottom;
if (isBackground) {
rightBottom = this.anchor(annotation.endRetracements[retracementIndex - 1]).absolutePosition;
leftBottom = this.anchor(annotation.startRetracements[retracementIndex - 1]).absolutePosition;
d.push(['L', Math.round(rightBottom.x), Math.round(rightBottom.y)], ['L', Math.round(leftBottom.x), Math.round(leftBottom.y)]);
}
return d;
};
};
var Fibonacci = function () {
this.startRetracements = [];
this.endRetracements = [];
Tunnel.apply(this, arguments);
};
Fibonacci.levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
H.extendAnnotation(Fibonacci, Tunnel, {
linkPoints: function () {
Tunnel.prototype.linkPoints.call(this);
this.linkRetracementsPoints();
return;
},
linkRetracementsPoints: function () {
var points = this.points, startDiff = points[0].y - points[3].y, endDiff = points[1].y - points[2].y, startX = points[0].x, endX = points[1].x;
Fibonacci.levels.forEach(function (level, i) {
var startRetracement = points[0].y - startDiff * level, endRetracement = points[1].y - endDiff * level;
this.linkRetracementPoint(i, startX, startRetracement, this.startRetracements);
this.linkRetracementPoint(i, endX, endRetracement, this.endRetracements);
}, this);
},
linkRetracementPoint: function (pointIndex, x, y, retracements) {
var point = retracements[pointIndex], typeOptions = this.options.typeOptions;
if (!point) {
retracements[pointIndex] = new MockPoint(this.chart, this, {
x: x,
y: y,
xAxis: typeOptions.xAxis,
yAxis: typeOptions.yAxis
});
}
else {
point.options.x = x;
point.options.y = y;
point.refresh();
}
},
addShapes: function () {
Fibonacci.levels.forEach(function (_level, i) {
this.initShape({
type: 'path',
d: createPathDGenerator(i)
}, false);
if (i > 0) {
this.initShape({
type: 'path',
fill: this.options.typeOptions.backgroundColors[i - 1],
strokeWidth: 0,
d: createPathDGenerator(i, true)
});
}
}, this);
},
addLabels: function () {
Fibonacci.levels.forEach(function (level, i) {
var options = this.options.typeOptions, label = this.initLabel(merge(options.labels[i], {
point: function (target) {
var point = MockPoint.pointToOptions(target.annotation.startRetracements[i]);
return point;
},
text: level.toString()
}));
options.labels[i] = label.options;
}, this);
}
},
/**
* A fibonacci annotation.
*
* @sample highcharts/annotations-advanced/fibonacci/
* Fibonacci
*
* @extends annotations.crookedLine
* @product highstock
* @optionparent annotations.fibonacci
*/
{
typeOptions: {
/**
* The height of the fibonacci in terms of yAxis.
*/
height: 2,
/**
* An array of background colors:
* Default to:
* ```
* [
* 'rgba(130, 170, 255, 0.4)',
* 'rgba(139, 191, 216, 0.4)',
* 'rgba(150, 216, 192, 0.4)',
* 'rgba(156, 229, 161, 0.4)',
* 'rgba(162, 241, 130, 0.4)',
* 'rgba(169, 255, 101, 0.4)'
* ]
* ```
*/
backgroundColors: [
'rgba(130, 170, 255, 0.4)',
'rgba(139, 191, 216, 0.4)',
'rgba(150, 216, 192, 0.4)',
'rgba(156, 229, 161, 0.4)',
'rgba(162, 241, 130, 0.4)',
'rgba(169, 255, 101, 0.4)'
],
/**
* The color of line.
*/
lineColor: 'grey',
/**
* An array of colors for the lines.
*/
lineColors: [],
/**
* An array with options for the labels.
*
* @type {Array<*>}
* @extends annotations.crookedLine.labelOptions
* @apioption annotations.fibonacci.typeOptions.labels
*/
labels: []
},
labelOptions: {
allowOverlap: true,
align: 'right',
backgroundColor: 'none',
borderWidth: 0,
crop: false,
overflow: 'none',
shape: 'rect',
style: {
color: 'grey'
},
verticalAlign: 'middle',
y: 0
}
});
Annotation.types.fibonacci = Fibonacci;
export default Fibonacci;

View File

@ -0,0 +1,110 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, MockPoint = Annotation.MockPoint, CrookedLine = Annotation.types.crookedLine;
/* eslint-disable no-invalid-this, valid-jsdoc */
var InfinityLine = function () {
CrookedLine.apply(this, arguments);
};
InfinityLine.findEdgeCoordinate = function (firstPoint, secondPoint, xOrY, edgePointFirstCoordinate) {
var xOrYOpposite = xOrY === 'x' ? 'y' : 'x';
// solves equation for x or y
// y - y1 = (y2 - y1) / (x2 - x1) * (x - x1)
return ((secondPoint[xOrY] - firstPoint[xOrY]) *
(edgePointFirstCoordinate - firstPoint[xOrYOpposite]) /
(secondPoint[xOrYOpposite] - firstPoint[xOrYOpposite]) +
firstPoint[xOrY]);
};
InfinityLine.findEdgePoint = function (firstPoint, secondPoint) {
var xAxis = firstPoint.series.xAxis, yAxis = secondPoint.series.yAxis, firstPointPixels = MockPoint.pointToPixels(firstPoint), secondPointPixels = MockPoint.pointToPixels(secondPoint), deltaX = secondPointPixels.x - firstPointPixels.x, deltaY = secondPointPixels.y - firstPointPixels.y, xAxisMin = xAxis.left, xAxisMax = xAxisMin + xAxis.width, yAxisMin = yAxis.top, yAxisMax = yAxisMin + yAxis.height, xLimit = deltaX < 0 ? xAxisMin : xAxisMax, yLimit = deltaY < 0 ? yAxisMin : yAxisMax, edgePoint = {
x: deltaX === 0 ? firstPointPixels.x : xLimit,
y: deltaY === 0 ? firstPointPixels.y : yLimit
}, edgePointX, edgePointY, swap;
if (deltaX !== 0 && deltaY !== 0) {
edgePointY = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'y', xLimit);
edgePointX = InfinityLine.findEdgeCoordinate(firstPointPixels, secondPointPixels, 'x', yLimit);
if (edgePointY >= yAxisMin && edgePointY <= yAxisMax) {
edgePoint.x = xLimit;
edgePoint.y = edgePointY;
}
else {
edgePoint.x = edgePointX;
edgePoint.y = yLimit;
}
}
edgePoint.x -= xAxisMin;
edgePoint.y -= yAxisMin;
if (firstPoint.series.chart.inverted) {
swap = edgePoint.x;
edgePoint.x = edgePoint.y;
edgePoint.y = swap;
}
return edgePoint;
};
var edgePoint = function (startIndex, endIndex) {
return function (target) {
var annotation = target.annotation, points = annotation.points, type = annotation.options.typeOptions.type;
if (type === 'horizontalLine') {
// Horizontal line has only one point,
// make a copy of it:
points = [
points[0],
new MockPoint(annotation.chart, points[0].target, {
x: points[0].x + 1,
y: points[0].y,
xAxis: points[0].options.xAxis,
yAxis: points[0].options.yAxis
})
];
}
else if (type === 'verticalLine') {
// The same for verticalLine type:
points = [
points[0],
new MockPoint(annotation.chart, points[0].target, {
x: points[0].x,
y: points[0].y + 1,
xAxis: points[0].options.xAxis,
yAxis: points[0].options.yAxis
})
];
}
return InfinityLine.findEdgePoint(points[startIndex], points[endIndex]);
};
};
InfinityLine.endEdgePoint = edgePoint(0, 1);
InfinityLine.startEdgePoint = edgePoint(1, 0);
H.extendAnnotation(InfinityLine, CrookedLine, {
addShapes: function () {
var typeOptions = this.options.typeOptions, points = [
this.points[0],
InfinityLine.endEdgePoint
];
if (typeOptions.type.match(/Line/g)) {
points[0] = InfinityLine.startEdgePoint;
}
var line = this.initShape(merge(typeOptions.line, {
type: 'path',
points: points
}), false);
typeOptions.line = line.options;
}
});
/**
* An infinity line annotation.
*
* @sample highcharts/annotations-advanced/infinity-line/
* Infinity Line
*
* @extends annotations.crookedLine
* @product highstock
* @apioption annotations.infinityLine
*/
Annotation.types.infinityLine = InfinityLine;
export default InfinityLine;

View File

@ -0,0 +1,736 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var extend = U.extend, isNumber = U.isNumber, merge = U.merge;
var Annotation = H.Annotation, ControlPoint = Annotation.ControlPoint;
/* eslint-disable no-invalid-this, valid-jsdoc */
var Measure = function () {
Annotation.apply(this, arguments);
};
Annotation.types.measure = Measure;
H.extendAnnotation(Measure, null, {
/**
* Init annotation object.
* @private
*/
init: function () {
Annotation.prototype.init.apply(this, arguments);
this.offsetX = 0;
this.offsetY = 0;
this.resizeX = 0;
this.resizeY = 0;
this.calculations.init.call(this);
this.addValues();
this.addShapes();
},
/**
* Overrides default setter to get axes from typeOptions.
* @private
*/
setClipAxes: function () {
this.clipXAxis = this.chart.xAxis[this.options.typeOptions.xAxis];
this.clipYAxis = this.chart.yAxis[this.options.typeOptions.yAxis];
},
/**
* Get measure points configuration objects.
* @private
* @return {Array<Highcharts.AnnotationMockPointOptionsObject>}
*/
pointsOptions: function () {
return this.options.points;
},
/**
* Get points configuration objects for shapes.
* @private
* @return {Array<Highcharts.AnnotationMockPointOptionsObject>}
*/
shapePointsOptions: function () {
var options = this.options.typeOptions, xAxis = options.xAxis, yAxis = options.yAxis;
return [
{
x: this.xAxisMin,
y: this.yAxisMin,
xAxis: xAxis,
yAxis: yAxis
},
{
x: this.xAxisMax,
y: this.yAxisMin,
xAxis: xAxis,
yAxis: yAxis
},
{
x: this.xAxisMax,
y: this.yAxisMax,
xAxis: xAxis,
yAxis: yAxis
},
{
x: this.xAxisMin,
y: this.yAxisMax,
xAxis: xAxis,
yAxis: yAxis
}
];
},
addControlPoints: function () {
var selectType = this.options.typeOptions.selectType, controlPoint;
controlPoint = new ControlPoint(this.chart, this, this.options.controlPointOptions, 0);
this.controlPoints.push(controlPoint);
// add extra controlPoint for horizontal and vertical range
if (selectType !== 'xy') {
controlPoint = new ControlPoint(this.chart, this, this.options.controlPointOptions, 1);
this.controlPoints.push(controlPoint);
}
},
/**
* Add label with calculated values (min, max, average, bins).
* @private
* @param {boolean} [resize]
* The flag for resize shape
*/
addValues: function (resize) {
var typeOptions = this.options.typeOptions, formatter = typeOptions.label.formatter;
// set xAxisMin, xAxisMax, yAxisMin, yAxisMax
this.calculations.recalculate.call(this, resize);
if (!typeOptions.label.enabled) {
return;
}
if (this.labels.length > 0) {
this.labels[0].text = (formatter && formatter.call(this)) ||
this.calculations.defaultFormatter.call(this);
}
else {
this.initLabel(extend({
shape: 'rect',
backgroundColor: 'none',
color: 'black',
borderWidth: 0,
dashStyle: 'dash',
overflow: 'none',
align: 'left',
vertical: 'top',
crop: true,
point: function (target) {
var annotation = target.annotation, chart = annotation.chart, inverted = chart.inverted, xAxis = chart.xAxis[typeOptions.xAxis], yAxis = chart.yAxis[typeOptions.yAxis], top = chart.plotTop, left = chart.plotLeft;
return {
x: (inverted ? top : 10) +
xAxis.toPixels(annotation.xAxisMin, !inverted),
y: (inverted ? -left + 10 : top) +
yAxis.toPixels(annotation.yAxisMin)
};
},
text: (formatter && formatter.call(this)) ||
this.calculations.defaultFormatter.call(this)
}, typeOptions.label));
}
},
/**
* Crosshair, background (rect).
* @private
*/
addShapes: function () {
this.addCrosshairs();
this.addBackground();
},
/**
* Add background shape.
* @private
*/
addBackground: function () {
var shapePoints = this.shapePointsOptions();
if (typeof shapePoints[0].x === 'undefined') {
return;
}
this.initShape(extend({
type: 'path',
points: this.shapePointsOptions()
}, this.options.typeOptions.background), false);
},
/**
* Add internal crosshair shapes (on top and bottom).
* @private
*/
addCrosshairs: function () {
var chart = this.chart, options = this.options.typeOptions, point = this.options.typeOptions.point, xAxis = chart.xAxis[options.xAxis], yAxis = chart.yAxis[options.yAxis], inverted = chart.inverted, xAxisMin = xAxis.toPixels(this.xAxisMin), xAxisMax = xAxis.toPixels(this.xAxisMax), yAxisMin = yAxis.toPixels(this.yAxisMin), yAxisMax = yAxis.toPixels(this.yAxisMax), defaultOptions = {
point: point,
type: 'path'
}, pathH = [], pathV = [], crosshairOptionsX, crosshairOptionsY, temp;
if (inverted) {
temp = xAxisMin;
xAxisMin = yAxisMin;
yAxisMin = temp;
temp = xAxisMax;
xAxisMax = yAxisMax;
yAxisMax = temp;
}
// horizontal line
if (options.crosshairX.enabled) {
pathH = [[
'M',
xAxisMin,
yAxisMin + ((yAxisMax - yAxisMin) / 2)
], [
'L',
xAxisMax,
yAxisMin + ((yAxisMax - yAxisMin) / 2)
]];
}
// vertical line
if (options.crosshairY.enabled) {
pathV = [[
'M',
xAxisMin + ((xAxisMax - xAxisMin) / 2),
yAxisMin
], [
'L',
xAxisMin + ((xAxisMax - xAxisMin) / 2),
yAxisMax
]];
}
// Update existed crosshair
if (this.shapes.length > 0) {
this.shapes[0].options.d = pathH;
this.shapes[1].options.d = pathV;
}
else {
// Add new crosshairs
crosshairOptionsX = merge(defaultOptions, options.crosshairX);
crosshairOptionsY = merge(defaultOptions, options.crosshairY);
this.initShape(extend({
d: pathH
}, crosshairOptionsX), false);
this.initShape(extend({
d: pathV
}, crosshairOptionsY), false);
}
},
onDrag: function (e) {
var translation = this.mouseMoveToTranslation(e), selectType = this.options.typeOptions.selectType, x = selectType === 'y' ? 0 : translation.x, y = selectType === 'x' ? 0 : translation.y;
this.translate(x, y);
this.offsetX += x;
this.offsetY += y;
// animation, resize, setStartPoints
this.redraw(false, false, true);
},
/**
* Translate start or end ("left" or "right") side of the measure.
* Update start points (startXMin, startXMax, startYMin, startYMax)
* @private
* @param {number} dx - the amount of x translation
* @param {number} dy - the amount of y translation
* @param {number} cpIndex - index of control point
* @param {Highcharts.AnnotationDraggableValue} selectType - x / y / xy
*/
resize: function (dx, dy, cpIndex, selectType) {
// background shape
var bckShape = this.shapes[2];
if (selectType === 'x') {
if (cpIndex === 0) {
bckShape.translatePoint(dx, 0, 0);
bckShape.translatePoint(dx, dy, 3);
}
else {
bckShape.translatePoint(dx, 0, 1);
bckShape.translatePoint(dx, dy, 2);
}
}
else if (selectType === 'y') {
if (cpIndex === 0) {
bckShape.translatePoint(0, dy, 0);
bckShape.translatePoint(0, dy, 1);
}
else {
bckShape.translatePoint(0, dy, 2);
bckShape.translatePoint(0, dy, 3);
}
}
else {
bckShape.translatePoint(dx, 0, 1);
bckShape.translatePoint(dx, dy, 2);
bckShape.translatePoint(0, dy, 3);
}
this.calculations.updateStartPoints
.call(this, false, true, cpIndex, dx, dy);
this.options.typeOptions.background.height = Math.abs(this.startYMax - this.startYMin);
this.options.typeOptions.background.width = Math.abs(this.startXMax - this.startXMin);
},
/**
* Redraw event which render elements and update start points if needed.
* @private
* @param {boolean} animation
* @param {boolean} [resize] - flag if resized
* @param {boolean} [setStartPoints] - update position of start points
*/
redraw: function (animation, resize, setStartPoints) {
this.linkPoints();
if (!this.graphic) {
this.render();
}
if (setStartPoints) {
this.calculations.updateStartPoints.call(this, true, false);
}
// #11174 - clipBox was not recalculate during resize / redraw
if (this.clipRect) {
this.clipRect.animate(this.getClipBox());
}
this.addValues(resize);
this.addCrosshairs();
this.redrawItems(this.shapes, animation);
this.redrawItems(this.labels, animation);
// redraw control point to run positioner
this.controlPoints.forEach(function (controlPoint) {
controlPoint.redraw();
});
},
translate: function (dx, dy) {
this.shapes.forEach(function (item) {
item.translate(dx, dy);
});
this.options.typeOptions.point.x = this.startXMin;
this.options.typeOptions.point.y = this.startYMin;
},
calculations: {
/**
* Set starting points
* @private
*/
init: function () {
var options = this.options.typeOptions, chart = this.chart, getPointPos = this.calculations.getPointPos, inverted = chart.inverted, xAxis = chart.xAxis[options.xAxis], yAxis = chart.yAxis[options.yAxis], bck = options.background, width = inverted ? bck.height : bck.width, height = inverted ? bck.width : bck.height, selectType = options.selectType, top = inverted ? chart.plotLeft : chart.plotTop, left = inverted ? chart.plotTop : chart.plotLeft;
this.startXMin = options.point.x;
this.startYMin = options.point.y;
if (isNumber(width)) {
this.startXMax = this.startXMin + width;
}
else {
this.startXMax = getPointPos(xAxis, this.startXMin, parseFloat(width));
}
if (isNumber(height)) {
this.startYMax = this.startYMin - height;
}
else {
this.startYMax = getPointPos(yAxis, this.startYMin, parseFloat(height));
}
// x / y selection type
if (selectType === 'x') {
this.startYMin = yAxis.toValue(top);
this.startYMax = yAxis.toValue(top + yAxis.len);
}
else if (selectType === 'y') {
this.startXMin = xAxis.toValue(left);
this.startXMax = xAxis.toValue(left + xAxis.len);
}
},
/**
* Set current xAxisMin, xAxisMax, yAxisMin, yAxisMax.
* Calculations of measure values (min, max, average, bins).
* @private
* @param {boolean} [resize]
* Flag if shape is resized.
*/
recalculate: function (resize) {
var calc = this.calculations, options = this.options.typeOptions, xAxis = this.chart.xAxis[options.xAxis], yAxis = this.chart.yAxis[options.yAxis], getPointPos = this.calculations.getPointPos, offsetX = this.offsetX, offsetY = this.offsetY;
this.xAxisMin = getPointPos(xAxis, this.startXMin, offsetX);
this.xAxisMax = getPointPos(xAxis, this.startXMax, offsetX);
this.yAxisMin = getPointPos(yAxis, this.startYMin, offsetY);
this.yAxisMax = getPointPos(yAxis, this.startYMax, offsetY);
this.min = calc.min.call(this);
this.max = calc.max.call(this);
this.average = calc.average.call(this);
this.bins = calc.bins.call(this);
if (resize) {
this.resize(0, 0);
}
},
/**
* Set current xAxisMin, xAxisMax, yAxisMin, yAxisMax.
* Calculations of measure values (min, max, average, bins).
* @private
* @param {Highcharts.Axis} axis
* X or y axis reference
* @param {number} value
* Point's value (x or y)
* @param {number} offset
* Amount of pixels
*/
getPointPos: function (axis, value, offset) {
return axis.toValue(axis.toPixels(value) + offset);
},
/**
* Update position of start points
* (startXMin, startXMax, startYMin, startYMax)
* @private
* @param {boolean} redraw
* Flag if shape is redraw
* @param {boolean} resize
* Flag if shape is resized
* @param {number} cpIndex
* Index of controlPoint
*/
updateStartPoints: function (redraw, resize, cpIndex, dx, dy) {
var options = this.options.typeOptions, selectType = options.selectType, xAxis = this.chart.xAxis[options.xAxis], yAxis = this.chart.yAxis[options.yAxis], getPointPos = this.calculations.getPointPos, startXMin = this.startXMin, startXMax = this.startXMax, startYMin = this.startYMin, startYMax = this.startYMax, offsetX = this.offsetX, offsetY = this.offsetY;
if (resize) {
if (selectType === 'x') {
if (cpIndex === 0) {
this.startXMin = getPointPos(xAxis, startXMin, dx);
}
else {
this.startXMax = getPointPos(xAxis, startXMax, dx);
}
}
else if (selectType === 'y') {
if (cpIndex === 0) {
this.startYMin = getPointPos(yAxis, startYMin, dy);
}
else {
this.startYMax = getPointPos(yAxis, startYMax, dy);
}
}
else {
this.startXMax = getPointPos(xAxis, startXMax, dx);
this.startYMax = getPointPos(yAxis, startYMax, dy);
}
}
if (redraw) {
this.startXMin = getPointPos(xAxis, startXMin, offsetX);
this.startXMax = getPointPos(xAxis, startXMax, offsetX);
this.startYMin = getPointPos(yAxis, startYMin, offsetY);
this.startYMax = getPointPos(yAxis, startYMax, offsetY);
this.offsetX = 0;
this.offsetY = 0;
}
},
/**
* Default formatter of label's content
* @private
*/
defaultFormatter: function () {
return 'Min: ' + this.min +
'<br>Max: ' + this.max +
'<br>Average: ' + this.average +
'<br>Bins: ' + this.bins;
},
/**
* Set values for xAxisMin, xAxisMax, yAxisMin, yAxisMax, also
* when chart is inverted
* @private
*/
getExtremes: function (xAxisMin, xAxisMax, yAxisMin, yAxisMax) {
return {
xAxisMin: Math.min(xAxisMax, xAxisMin),
xAxisMax: Math.max(xAxisMax, xAxisMin),
yAxisMin: Math.min(yAxisMax, yAxisMin),
yAxisMax: Math.max(yAxisMax, yAxisMin)
};
},
/**
* Definitions of calculations (min, max, average, bins)
* @private
*/
min: function () {
var min = Infinity, series = this.chart.series, ext = this.calculations.getExtremes(this.xAxisMin, this.xAxisMax, this.yAxisMin, this.yAxisMax), isCalculated = false; // to avoid Infinity in formatter
series.forEach(function (serie) {
if (serie.visible &&
serie.options.id !== 'highcharts-navigator-series') {
serie.points.forEach(function (point) {
if (!point.isNull &&
point.y < min &&
point.x > ext.xAxisMin &&
point.x <= ext.xAxisMax &&
point.y > ext.yAxisMin &&
point.y <= ext.yAxisMax) {
min = point.y;
isCalculated = true;
}
});
}
});
if (!isCalculated) {
min = '';
}
return min;
},
max: function () {
var max = -Infinity, series = this.chart.series, ext = this.calculations.getExtremes(this.xAxisMin, this.xAxisMax, this.yAxisMin, this.yAxisMax), isCalculated = false; // to avoid Infinity in formatter
series.forEach(function (serie) {
if (serie.visible &&
serie.options.id !== 'highcharts-navigator-series') {
serie.points.forEach(function (point) {
if (!point.isNull &&
point.y > max &&
point.x > ext.xAxisMin &&
point.x <= ext.xAxisMax &&
point.y > ext.yAxisMin &&
point.y <= ext.yAxisMax) {
max = point.y;
isCalculated = true;
}
});
}
});
if (!isCalculated) {
max = '';
}
return max;
},
average: function () {
var average = '';
if (this.max !== '' && this.min !== '') {
average = (this.max + this.min) / 2;
}
return average;
},
bins: function () {
var bins = 0, series = this.chart.series, ext = this.calculations.getExtremes(this.xAxisMin, this.xAxisMax, this.yAxisMin, this.yAxisMax), isCalculated = false; // to avoid Infinity in formatter
series.forEach(function (serie) {
if (serie.visible &&
serie.options.id !== 'highcharts-navigator-series') {
serie.points.forEach(function (point) {
if (!point.isNull &&
point.x > ext.xAxisMin &&
point.x <= ext.xAxisMax &&
point.y > ext.yAxisMin &&
point.y <= ext.yAxisMax) {
bins++;
isCalculated = true;
}
});
}
});
if (!isCalculated) {
bins = '';
}
return bins;
}
}
},
/**
* A measure annotation.
*
* @extends annotations.crookedLine
* @excluding labels, labelOptions, shapes, shapeOptions
* @sample highcharts/annotations-advanced/measure/
* Measure
* @product highstock
* @optionparent annotations.measure
*/
{
typeOptions: {
/**
* Decides in what dimensions the user can resize by dragging the
* mouse. Can be one of x, y or xy.
*/
selectType: 'xy',
/**
* This number defines which xAxis the point is connected to.
* It refers to either the axis id or the index of the axis
* in the xAxis array.
*/
xAxis: 0,
/**
* This number defines which yAxis the point is connected to.
* It refers to either the axis id or the index of the axis
* in the yAxis array.
*/
yAxis: 0,
background: {
/**
* The color of the rectangle.
*/
fill: 'rgba(130, 170, 255, 0.4)',
/**
* The width of border.
*/
strokeWidth: 0,
/**
* The color of border.
*/
stroke: void 0
},
/**
* Configure a crosshair that is horizontally placed in middle of
* rectangle.
*
*/
crosshairX: {
/**
* Enable or disable the horizontal crosshair.
*
*/
enabled: true,
/**
* The Z index of the crosshair in annotation.
*/
zIndex: 6,
/**
* The dash or dot style of the crosshair's line. For possible
* values, see
* [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
*
* @type {Highcharts.DashStyleValue}
* @default Dash
*/
dashStyle: 'Dash',
/**
* The marker-end defines the arrowhead that will be drawn
* at the final vertex of the given crosshair's path.
*
* @type {string}
* @default arrow
*/
markerEnd: 'arrow'
},
/**
* Configure a crosshair that is vertically placed in middle of
* rectangle.
*/
crosshairY: {
/**
* Enable or disable the vertical crosshair.
*
*/
enabled: true,
/**
* The Z index of the crosshair in annotation.
*/
zIndex: 6,
/**
* The dash or dot style of the crosshair's line. For possible
* values, see [this demonstration](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
*
* @type {Highcharts.DashStyleValue}
* @default Dash
* @apioption annotations.measure.typeOptions.crosshairY.dashStyle
*
*/
dashStyle: 'Dash',
/**
* The marker-end defines the arrowhead that will be drawn
* at the final vertex of the given crosshair's path.
*
* @type {string}
* @default arrow
* @validvalue ["none", "arrow"]
*
*/
markerEnd: 'arrow'
},
label: {
/**
* Enable or disable the label text (min, max, average,
* bins values).
*
* Defaults to true.
*/
enabled: true,
/**
* CSS styles for the measure label.
*
* @type {Highcharts.CSSObject}
* @default {"color": "#666666", "fontSize": "11px"}
*/
style: {
fontSize: '11px',
color: '#666666'
},
/**
* Formatter function for the label text.
*
* Available data are:
*
* <table>
*
* <tbody>
*
* <tr>
*
* <td>`this.min`</td>
*
* <td>The mininimum value of the points in the selected
* range.</td>
*
* </tr>
*
* <tr>
*
* <td>`this.max`</td>
*
* <td>The maximum value of the points in the selected
* range.</td>
*
* </tr>
*
* <tr>
*
* <td>`this.average`</td>
*
* <td>The average value of the points in the selected
* range.</td>
*
* </tr>
*
* <tr>
*
* <td>`this.bins`</td>
*
* <td>The amount of the points in the selected range.</td>
*
* </tr>
*
* </table>
*
* @type {function}
*
*/
formatter: void 0
}
},
controlPointOptions: {
positioner: function (target) {
var cpIndex = this.index, chart = target.chart, options = target.options, typeOptions = options.typeOptions, selectType = typeOptions.selectType, controlPointOptions = options.controlPointOptions, inverted = chart.inverted, xAxis = chart.xAxis[typeOptions.xAxis], yAxis = chart.yAxis[typeOptions.yAxis], targetX = target.xAxisMax, targetY = target.yAxisMax, ext = target.calculations.getExtremes(target.xAxisMin, target.xAxisMax, target.yAxisMin, target.yAxisMax), x, y;
if (selectType === 'x') {
targetY = (ext.yAxisMax - ext.yAxisMin) / 2;
// first control point
if (cpIndex === 0) {
targetX = target.xAxisMin;
}
}
if (selectType === 'y') {
targetX = ext.xAxisMin +
((ext.xAxisMax - ext.xAxisMin) / 2);
// first control point
if (cpIndex === 0) {
targetY = target.yAxisMin;
}
}
if (inverted) {
x = yAxis.toPixels(targetY);
y = xAxis.toPixels(targetX);
}
else {
x = xAxis.toPixels(targetX);
y = yAxis.toPixels(targetY);
}
return {
x: x - (controlPointOptions.width / 2),
y: y - (controlPointOptions.height / 2)
};
},
events: {
drag: function (e, target) {
var translation = this.mouseMoveToTranslation(e), selectType = target.options.typeOptions.selectType, index = this.index, x = selectType === 'y' ? 0 : translation.x, y = selectType === 'x' ? 0 : translation.y;
target.resize(x, y, index, selectType);
target.resizeX += x;
target.resizeY += y;
target.redraw(false, true);
}
}
}
});
Annotation.types.measure = Measure;
export default Measure;

View File

@ -0,0 +1,146 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, MockPoint = Annotation.MockPoint, InfinityLine = Annotation.types.infinityLine;
/* eslint-disable no-invalid-this, valid-jsdoc */
var Pitchfork = function () {
InfinityLine.apply(this, arguments);
};
Pitchfork.findEdgePoint = function (point, firstAnglePoint, secondAnglePoint) {
var angle = Math.atan2(secondAnglePoint.plotY - firstAnglePoint.plotY, secondAnglePoint.plotX - firstAnglePoint.plotX), distance = 1e7;
return {
x: point.plotX + distance * Math.cos(angle),
y: point.plotY + distance * Math.sin(angle)
};
};
Pitchfork.middleLineEdgePoint = function (target) {
var annotation = target.annotation, points = annotation.points;
return InfinityLine.findEdgePoint(points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
};
var outerLineEdgePoint = function (firstPointIndex) {
return function (target) {
var annotation = target.annotation, points = annotation.points;
return Pitchfork.findEdgePoint(points[firstPointIndex], points[0], new MockPoint(annotation.chart, target, annotation.midPointOptions()));
};
};
Pitchfork.topLineEdgePoint = outerLineEdgePoint(1);
Pitchfork.bottomLineEdgePoint = outerLineEdgePoint(0);
H.extendAnnotation(Pitchfork, InfinityLine, {
midPointOptions: function () {
var points = this.points;
return {
x: (points[1].x + points[2].x) / 2,
y: (points[1].y + points[2].y) / 2,
xAxis: points[0].series.xAxis,
yAxis: points[0].series.yAxis
};
},
addShapes: function () {
this.addLines();
this.addBackgrounds();
},
addLines: function () {
this.initShape({
type: 'path',
points: [
this.points[0],
Pitchfork.middleLineEdgePoint
]
}, false);
this.initShape({
type: 'path',
points: [
this.points[1],
Pitchfork.topLineEdgePoint
]
}, false);
this.initShape({
type: 'path',
points: [
this.points[2],
Pitchfork.bottomLineEdgePoint
]
}, false);
},
addBackgrounds: function () {
var shapes = this.shapes, typeOptions = this.options.typeOptions;
var innerBackground = this.initShape(merge(typeOptions.innerBackground, {
type: 'path',
points: [
function (target) {
var annotation = target.annotation, points = annotation.points, midPointOptions = annotation.midPointOptions();
return {
x: (points[1].x + midPointOptions.x) / 2,
y: (points[1].y + midPointOptions.y) / 2,
xAxis: midPointOptions.xAxis,
yAxis: midPointOptions.yAxis
};
},
shapes[1].points[1],
shapes[2].points[1],
function (target) {
var annotation = target.annotation, points = annotation.points, midPointOptions = annotation.midPointOptions();
return {
x: (midPointOptions.x + points[2].x) / 2,
y: (midPointOptions.y + points[2].y) / 2,
xAxis: midPointOptions.xAxis,
yAxis: midPointOptions.yAxis
};
}
]
}));
var outerBackground = this.initShape(merge(typeOptions.outerBackground, {
type: 'path',
points: [
this.points[1],
shapes[1].points[1],
shapes[2].points[1],
this.points[2]
]
}));
typeOptions.innerBackground = innerBackground.options;
typeOptions.outerBackground = outerBackground.options;
}
},
/**
* A pitchfork annotation.
*
* @sample highcharts/annotations-advanced/pitchfork/
* Pitchfork
*
* @extends annotations.infinityLine
* @product highstock
* @optionparent annotations.pitchfork
*/
{
typeOptions: {
/**
* Inner background options.
*
* @extends annotations.crookedLine.shapeOptions
* @excluding height, r, type, width
*/
innerBackground: {
fill: 'rgba(130, 170, 255, 0.4)',
strokeWidth: 0
},
/**
* Outer background options.
*
* @extends annotations.crookedLine.shapeOptions
* @excluding height, r, type, width
*/
outerBackground: {
fill: 'rgba(156, 229, 161, 0.4)',
strokeWidth: 0
}
}
});
Annotation.types.pitchfork = Pitchfork;
export default Pitchfork;

View File

@ -0,0 +1,166 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, CrookedLine = Annotation.types.crookedLine, ControlPoint = Annotation.ControlPoint, MockPoint = Annotation.MockPoint;
/* eslint-disable no-invalid-this, valid-jsdoc */
/**
* @private
*/
function getSecondCoordinate(p1, p2, x) {
return (p2.y - p1.y) / (p2.x - p1.x) * (x - p1.x) + p1.y;
}
var Tunnel = function () {
CrookedLine.apply(this, arguments);
};
H.extendAnnotation(Tunnel, CrookedLine, {
getPointsOptions: function () {
var pointsOptions = CrookedLine.prototype.getPointsOptions.call(this);
pointsOptions[2] = this.heightPointOptions(pointsOptions[1]);
pointsOptions[3] = this.heightPointOptions(pointsOptions[0]);
return pointsOptions;
},
getControlPointsOptions: function () {
return this.getPointsOptions().slice(0, 2);
},
heightPointOptions: function (pointOptions) {
var heightPointOptions = merge(pointOptions);
heightPointOptions.y += this.options.typeOptions.height;
return heightPointOptions;
},
addControlPoints: function () {
CrookedLine.prototype.addControlPoints.call(this);
var options = this.options, controlPoint = new ControlPoint(this.chart, this, merge(options.controlPointOptions, options.typeOptions.heightControlPoint), 2);
this.controlPoints.push(controlPoint);
options.typeOptions.heightControlPoint = controlPoint.options;
},
addShapes: function () {
this.addLine();
this.addBackground();
},
addLine: function () {
var line = this.initShape(merge(this.options.typeOptions.line, {
type: 'path',
points: [
this.points[0],
this.points[1],
function (target) {
var pointOptions = MockPoint.pointToOptions(target.annotation.points[2]);
pointOptions.command = 'M';
return pointOptions;
},
this.points[3]
]
}), false);
this.options.typeOptions.line = line.options;
},
addBackground: function () {
var background = this.initShape(merge(this.options.typeOptions.background, {
type: 'path',
points: this.points.slice()
}));
this.options.typeOptions.background = background.options;
},
/**
* Translate start or end ("left" or "right") side of the tunnel.
* @private
* @param {number} dx - the amount of x translation
* @param {number} dy - the amount of y translation
* @param {boolean} [end] - whether to translate start or end side
*/
translateSide: function (dx, dy, end) {
var topIndex = Number(end), bottomIndex = topIndex === 0 ? 3 : 2;
this.translatePoint(dx, dy, topIndex);
this.translatePoint(dx, dy, bottomIndex);
},
/**
* Translate height of the tunnel.
* @private
* @param {number} dh - the amount of height translation
*/
translateHeight: function (dh) {
this.translatePoint(0, dh, 2);
this.translatePoint(0, dh, 3);
this.options.typeOptions.height = this.points[3].y - this.points[0].y;
}
},
/**
* A tunnel annotation.
*
* @extends annotations.crookedLine
* @sample highcharts/annotations-advanced/tunnel/
* Tunnel
* @product highstock
* @optionparent annotations.tunnel
*/
{
typeOptions: {
xAxis: 0,
yAxis: 0,
/**
* Background options.
*
* @type {Object}
* @excluding height, point, points, r, type, width, markerEnd,
* markerStart
*/
background: {
fill: 'rgba(130, 170, 255, 0.4)',
strokeWidth: 0
},
line: {
strokeWidth: 1
},
/**
* The height of the annotation in terms of yAxis.
*/
height: -2,
/**
* Options for the control point which controls
* the annotation's height.
*
* @extends annotations.crookedLine.controlPointOptions
* @excluding positioner, events
*/
heightControlPoint: {
positioner: function (target) {
var startXY = MockPoint.pointToPixels(target.points[2]), endXY = MockPoint.pointToPixels(target.points[3]), x = (startXY.x + endXY.x) / 2;
return {
x: x - this.graphic.width / 2,
y: getSecondCoordinate(startXY, endXY, x) -
this.graphic.height / 2
};
},
events: {
drag: function (e, target) {
if (target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop)) {
target.translateHeight(this.mouseMoveToTranslation(e).y);
target.redraw(false);
}
}
}
}
},
/**
* @extends annotations.crookedLine.controlPointOptions
* @excluding positioner, events
*/
controlPointOptions: {
events: {
drag: function (e, target) {
if (target.chart.isInsidePlot(e.chartX - target.chart.plotLeft, e.chartY - target.chart.plotTop)) {
var translation = this.mouseMoveToTranslation(e);
target.translateSide(translation.x, translation.y, this.index);
target.redraw(false);
}
}
}
}
});
Annotation.types.tunnel = Tunnel;
export default Tunnel;

View File

@ -0,0 +1,116 @@
/* *
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
'use strict';
import H from '../../parts/Globals.js';
import U from '../../parts/Utilities.js';
var merge = U.merge;
var Annotation = H.Annotation, MockPoint = Annotation.MockPoint;
/* eslint-disable no-invalid-this, valid-jsdoc */
var VerticalLine = function () {
H.Annotation.apply(this, arguments);
};
VerticalLine.connectorFirstPoint = function (target) {
var annotation = target.annotation, point = annotation.points[0], xy = MockPoint.pointToPixels(point, true), y = xy.y, offset = annotation.options.typeOptions.label.offset;
if (annotation.chart.inverted) {
y = xy.x;
}
return {
x: point.x,
xAxis: point.series.xAxis,
y: y + offset
};
};
VerticalLine.connectorSecondPoint = function (target) {
var annotation = target.annotation, typeOptions = annotation.options.typeOptions, point = annotation.points[0], yOffset = typeOptions.yOffset, xy = MockPoint.pointToPixels(point, true), y = xy[annotation.chart.inverted ? 'x' : 'y'];
if (typeOptions.label.offset < 0) {
yOffset *= -1;
}
return {
x: point.x,
xAxis: point.series.xAxis,
y: y + yOffset
};
};
H.extendAnnotation(VerticalLine, null, {
getPointsOptions: function () {
return [this.options.typeOptions.point];
},
addShapes: function () {
var typeOptions = this.options.typeOptions, connector = this.initShape(merge(typeOptions.connector, {
type: 'path',
points: [
VerticalLine.connectorFirstPoint,
VerticalLine.connectorSecondPoint
]
}), false);
typeOptions.connector = connector.options;
},
addLabels: function () {
var typeOptions = this.options.typeOptions, labelOptions = typeOptions.label, x = 0, y = labelOptions.offset, verticalAlign = labelOptions.offset < 0 ? 'bottom' : 'top', align = 'center';
if (this.chart.inverted) {
x = labelOptions.offset;
y = 0;
verticalAlign = 'middle';
align = labelOptions.offset < 0 ? 'right' : 'left';
}
var label = this.initLabel(merge(labelOptions, {
verticalAlign: verticalAlign,
align: align,
x: x,
y: y
}));
typeOptions.label = label.options;
}
},
/**
* A vertical line annotation.
*
* @sample highcharts/annotations-advanced/vertical-line/
* Vertical line
*
* @extends annotations.crookedLine
* @excluding labels, shapes, controlPointOptions
* @product highstock
* @optionparent annotations.verticalLine
*/
{
typeOptions: {
/**
* @ignore
*/
yOffset: 10,
/**
* Label options.
*
* @extends annotations.crookedLine.labelOptions
*/
label: {
offset: -40,
point: function (target) {
return target.annotation.points[0];
},
allowOverlap: true,
backgroundColor: 'none',
borderWidth: 0,
crop: true,
overflow: 'none',
shape: 'rect',
text: '{y:.2f}'
},
/**
* Connector options.
*
* @extends annotations.crookedLine.shapeOptions
* @excluding height, r, type, width
*/
connector: {
strokeWidth: 1,
markerEnd: 'arrow'
}
}
});
Annotation.types.verticalLine = VerticalLine;
export default VerticalLine;

View File

@ -0,0 +1,133 @@
/* eslint-disable */
/* *
* Error information for the debugger module
* (c) 2010-2019 Torstein Honsi
* License: www.highcharts.com/license
*/
// DO NOT EDIT!
// Automatically generated by ./tools/error-messages.js
// Sources can be found in ./errors/*/*.md
'use strict';
import H from './parts/Globals.js';
H.errorMessages = {
"10": {
"title": "Can't plot zero or subzero values on a logarithmic axis",
"text": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations: </p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithimic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>Note: As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to true, and add custom conversion functions. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/yaxis/type-log-negative/\">View live demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>",
"enduser": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations:</p><ul><li>If a zero or subzero data value is added to a logarithmic axis</li><li>If the minimum of a logarithimic axis is set to 0 or less</li><li>If the threshold is set to 0 or less</li></ul><p>As of Highcharts 5.0.8 it's possible to bypass this error message by setting <code>Axis.prototype.allowNegativeLog</code> to <code>true</code> and add custom conversion functions. <a href=\"http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/yaxis/type-log-negative/\">\">View Live Demo</a>. It is also possible to use a similar workaround for colorAxis. <a href=\"https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/samples/highcharts/coloraxis/logarithmic-with-emulate-negative-values/\">View live demo</a>.</p>"
},
"11": {
"title": "Can't link axes of different type",
"text": "<h1>Can't link axes of different type</h1><p>This error occurs when using the <code>linkedTo</code> option to link two axes of different types, for example a logarithmic axis to a linear axis. Highcharts can't link these because the calculation of ticks, extremes, padding etc. is different.</p>"
},
"12": {
"title": "Highcharts expects point configuration to be numbers or arrays in turbo mode",
"text": "<h1>Highcharts expects point configuration to be numbers or arrays in turbo mode</h1><p>This error occurs if the <code>series.data</code> option contains object configurations and the number of points exceeds the turboThreshold. It can be fixed by either setting <code>turboThreshold</code> to a higher value, or changing the point configurations to numbers or arrays.</p><p>In boost mode, turbo mode is always on, which means only array of numbers or two dimensional arrays are allowed.</p><p>See <a href=\"https://api.highcharts.com/highcharts#plotOptions.series.turboThreshold\">plotOptions.series.turboThreshold</a></p>"
},
"13": {
"title": "Rendering div not found",
"text": "<h1>Rendering div not found</h1><p>This error occurs if the <a href=\"https://api.highcharts.com/highcharts#chart.renderTo\">chart.renderTo</a> option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.</p><p>If using a DOM ID when creating the chart, make sure a node with the same ID exists somewhere in the DOM.</p>"
},
"14": {
"title": "String value sent to series.data, expected Number",
"text": "<h1>String value sent to series.data, expected Number</h1><p>This happens if using a string as a data point, for example in a setup like this: </p><pre>series: [{\n data: [&quot;3&quot;, &quot;5&quot;, &quot;1&quot;, &quot;6&quot;]\n}]</pre><p>Highcharts expects numerical data values.</p><p>The most common reason for this error this is that data is parsed from CSV or from a XML source, and the implementer forgot to run <code>parseFloat</code> on the parsed value.</p><p>Note: For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).</p>"
},
"15": {
"title": "Highcharts expects data to be sorted",
"text": "<h1>Highcharts expects data to be sorted</h1><p>This happens when creating a line series or a stock chart where the data is not sorted in ascending X order.</p><p>For performance reasons, Highcharts does not sort the data, instead it requires that the implementer pre-sorts the data.</p>"
},
"16": {
"title": "Highcharts already defined in the page",
"text": "<h1>Highcharts already defined in the page</h1><p>This error happens if the <code>Highcharts</code> namespace already exists when loading Highcharts or Highstock.</p><p>This is caused by including Highcharts or Highstock more than once.</p><p>Keep in mind that the <code>Highcharts.Chart</code> constructor and all features of Highcharts are included in Highstock, so if using the <code>Chart</code> and <code>StockChart</code> constructors in combination, only the <code>highstock.js</code> file is required.</p>"
},
"17": {
"title": "The requested series type does not exist",
"text": "<h1>The requested series type does not exist</h1><p>This error happens when setting <code>chart.type</code> or <code>series.type</code> to a series type that isn't defined in Highcharts. A typical reason may be that the module or extension where the series type is defined isn't included.</p><p>For example in order to create an <code>arearange</code> series, the <code>highcharts-more.js</code> file must be loaded.</p>"
},
"18": {
"title": "The requested axis does not exist",
"text": "<h1>The requested axis does not exist</h1><p>This error happens when setting a series' <code>xAxis</code> or <code>yAxis</code> property to point to an axis that does not exist.</p>"
},
"19": {
"title": "Too many ticks",
"text": "<h1>Too many ticks</h1><p>This error happens when applying too many ticks to an axis, specifically when adding more ticks than the axis pixel length.</p><p>With default value this won't happen, but there are edge cases, for example when setting axis categories and <code>xAxis.labels.step</code> in combination with a long data range, when the axis is instructed to create a great number of ticks.</p>"
},
"20": {
"title": "Can't add object point configuration to a long data series",
"text": "<h1>Can't add object point configuration to a long data series</h1><p>In Highstock, when trying to add a point using the object literal configuration syntax, it will only work when the number of data points is below the series' <a href=\"https://api.highcharts.com/highstock#plotOptions.series.turboThreshold\">turboThreshold</a>. Instead of the object syntax, use the Array syntax.</p>"
},
"21": {
"title": "Can't find Proj4js library",
"text": "<h1>Can't find Proj4js library</h1><p>Using latitude/longitude functionality in Highmaps requires the <a href=\"http://proj4js.org\">Proj4js</a> library to be loaded.</p>"
},
"22": {
"title": "Map does not support latitude/longitude",
"text": "<h1>Map does not support latitude/longitude</h1><p>The loaded map does not support latitude/longitude functionality. This is only supported with maps from the <a href=\"https://code.highcharts.com/mapdata\">official Highmaps map collection</a> from version 1.1.0 onwards. If you are using a custom map, consider using the <a href=\"https://proj4js.org\">Proj4js</a> library to convert between projections.</p>"
},
"23": {
"title": "Unsupported color format used for color interpolation",
"text": "<h1>Unsupported color format used for color interpolation</h1><p>Highcharts supports three color formats primarily: hex (<code>#FFFFFF</code>), rgb (<code>rgba(255,255,255)</code>) and rgba (<code>rgba(255,255,255,1)</code>). If any other format, like 3-digit colors (<code>#FFF</code>), named colors (<code>white</code>) or gradient structures are used in for example a heatmap, Highcharts will fail to interpolate and will instead use the end-color with no interpolation applied.</p><p>We've chosen to preserve this limitation in order to keep the weight of the implementation at a minimum.</p>"
},
"24": {
"title": "Cannot run Point.update on a grouped point",
"text": "<h1>Cannot run Point.update on a grouped point</h1><p>Running <code>Point.update</code> in Highstock when a point is grouped by data grouping is not supported.</p><p>This is not supported because when data grouping is enabled, there won't be any references to the raw points, which is required by the <code>Point.update</code> function.</p>"
},
"25": {
"title": "Can't find Moment.js library",
"text": "<h1>Can't find Moment.js library</h1><p>Using the global.timezone option requires the <a href=\"https://momentjs.com/\">Moment.js</a> library to be loaded.</p>"
},
"26": {
"title": "WebGL not supported, and no fallback module included",
"text": "<h1>WebGL not supported, and no fallback module included</h1><p>This happens when the browser doesn't support WebGL,<b>and</b> the canvas fallback module (<code>boost-canvas.js</code>) hasn't been included OR if the fallback module was included<b>after</b> the boost module.</p><p>If a fallback is required, make sure to include <code>boost-canvas.js</code>, and that it's included before <code>boost.js</code>.</p><p>Please note that the fallback module is not intended as a fully-featured one. Rather, it's a minimal implementation of the WebGL counterpart.</p>"
},
"27": {
"title": "This browser does not support SVG",
"text": "<h1>This browser does not support SVG</h1><p>This happens in old IE when the <code>oldie.js</code> module isn't loaded.</p><p>If compatibility with IE versions 6, 7 and 8 is required, add the module after loading <code>highcharts.js</code>. In a website context, it's a good idea to load it in a conditional comment to avoid traffic overhead and dead code in modern browsers: </p><pre>&lt;!--[if lt IE 9]&gt;\n &lt;script src='https://code.highcharts.com/modules/oldie.js'&gt;&lt;/script&gt;\n&lt;![endif]--&gt;</pre>"
},
"28": {
"title": "Fallback to export server disabled",
"text": "<h1>Fallback to export server disabled</h1><p>This happens when the offline export module encounters a chart that it can't export successfully, and the fallback to the online export server is disabled. The offline exporting module will fail for certain browsers, and certain features (e.g. <a href=\"https://api.highcharts.com/highcharts/exporting.allowHTML\">exporting.allowHTML</a> ), depending on the type of image exporting to. For a compatibility overview, see <a href=\"https://www.highcharts.com/docs/export-module/client-side-export\">Client Side Export</a>.</p><p>For very complex charts, it's possible that exporting fail in browsers that don't support Blob objects, due to data URL length limits. It's always recommended to define the <a href=\"https://api.highcharts.com/highcharts/exporting.error\">exporting.error</a> callback when disabling the fallback, so that details can be provided to the end-user if offline export isn't working for them.</p>"
},
"29": {
"title": "Browser does not support WebAudio",
"text": "<h1>Browser does not support WebAudio</h1><p>This happens when you attempt to use the sonification module on a chart in a browser or environment that does not support the WebAudio API. This API is supported on all modern browsers, including Microsoft Edge, Google Chrome and Mozilla Firefox.</p>"
},
"30": {
"title": "Invalid instrument",
"text": "<h1>Invalid instrument</h1><p>This happens when you try to use a sonification instrument that is not valid. If you are using a predefined instrument, make sure your spelling is correct.</p>"
},
"31": {
"title": "Non-unique point or node id",
"text": "<h1>Non-unique point or node id</h1><p>This error occurs when using the same <code>id</code> for two or more points or nodes.</p>"
},
"meta": {
"files": [
"errors/10/readme.md",
"errors/10/enduser.md",
"errors/11/readme.md",
"errors/12/readme.md",
"errors/13/readme.md",
"errors/14/readme.md",
"errors/15/readme.md",
"errors/16/readme.md",
"errors/17/readme.md",
"errors/18/readme.md",
"errors/19/readme.md",
"errors/20/readme.md",
"errors/21/readme.md",
"errors/22/readme.md",
"errors/23/readme.md",
"errors/24/readme.md",
"errors/25/readme.md",
"errors/26/readme.md",
"errors/27/readme.md",
"errors/28/readme.md",
"errors/29/readme.md",
"errors/30/readme.md",
"errors/31/readme.md"
]
}
};

View File

@ -0,0 +1 @@
console.error('code.highcharts.local has moved to the /code folder'); // eslint-disable-line no-console

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/highcharts-gantt
*
* (c) 2017-2018 Lars Cabrera, Torstein Honsi, Jon Arild Nygard & Oystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import Highcharts from './highcharts.src.js';
import './modules/gantt.src.js';
Highcharts.product = 'Highcharts Gantt';
export default Highcharts;

View File

@ -0,0 +1,36 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/highcharts
*
* (c) 2009-2018 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import Highcharts from '../parts/Globals.js';
import '../parts/SvgRenderer.js';
import '../parts/Html.js';
import '../parts/Axis.js';
import '../parts/DateTimeAxis.js';
import '../parts/LogarithmicAxis.js';
import '../parts/PlotLineOrBand.js';
import '../parts/Tooltip.js';
import '../parts/Pointer.js';
import '../parts/MSPointer.js';
import '../parts/Legend.js';
import '../parts/Chart.js';
import '../parts/ScrollablePlotArea.js';
import '../parts/Stacking.js';
import '../parts/Dynamics.js';
import '../parts/AreaSeries.js';
import '../parts/SplineSeries.js';
import '../parts/AreaSplineSeries.js';
import '../parts/ColumnSeries.js';
import '../parts/BarSeries.js';
import '../parts/ScatterSeries.js';
import '../parts/PieSeries.js';
import '../parts/DataLabels.js';
import '../modules/overlapping-datalabels.src.js';
import '../parts/Interaction.js';
import '../parts/Responsive.js';
export default Highcharts;

View File

@ -0,0 +1,15 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/accessibility
* @requires highcharts
*
* Accessibility module
*
* (c) 2010-2019 Highsoft AS
* Author: Oystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/accessibility/accessibility.js';

View File

@ -0,0 +1,24 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/annotations-advanced
* @requires highcharts
*
* Annotations module
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../annotations/annotations.src.js';
import '../../annotations/types/BasicAnnotation.js';
import '../../annotations/types/CrookedLine.js';
import '../../annotations/types/ElliottWave.js';
import '../../annotations/types/Tunnel.js';
import '../../annotations/types/InfinityLine.js';
import '../../annotations/types/Fibonacci.js';
import '../../annotations/types/Pitchfork.js';
import '../../annotations/types/VerticalLine.js';
import '../../annotations/types/Measure.js';
import '../../annotations/navigationBindings.js';
import '../../annotations/popup.js';

View File

@ -0,0 +1,15 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/annotations
* @requires highcharts
*
* Annotations module
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../annotations/annotations.src.js';
import '../../annotations/navigationBindings.js';
import '../../annotations/popup.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/arrow-symbols
* @requires highcharts
*
* Arrow Symbols
*
* (c) 2017-2019 Lars A. V. Cabrera
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/ArrowSymbols.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/boost-canvas
* @requires highcharts
*
* Boost module
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/boost-canvas.src.js';

View File

@ -0,0 +1,122 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/boost
* @requires highcharts
*
* Boost module
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*
* This is a Highcharts module that draws long data series on a canvas in order
* to increase performance of the initial load time and tooltip responsiveness.
*
* Compatible with WebGL compatible browsers (not IE < 11).
*
* If this module is taken in as part of the core
* - All the loading logic should be merged with core. Update styles in the
* core.
* - Most of the method wraps should probably be added directly in parent
* methods.
*
* Notes for boost mode
* - Area lines are not drawn
* - Lines are not drawn on scatter charts
* - Zones and negativeColor don't work
* - Dash styles are not rendered on lines.
* - Columns are always one pixel wide. Don't set the threshold too low.
* - Disable animations
* - Marker shapes are not supported: markers will always be circles, except
* heatmap series, where markers are always rectangles.
*
* Optimizing tips for users
* - Set extremes (min, max) explicitly on the axes in order for Highcharts to
* avoid computing extremes.
* - Set enableMouseTracking to false on the series to improve total rendering
* time.
* - The default threshold is set based on one series. If you have multiple,
* dense series, the combined number of points drawn gets higher, and you may
* want to set the threshold lower in order to use optimizations.
* - If drawing large scatter charts, it's beneficial to set the marker radius
* to a value less than 1. This is to add additional spacing to make the chart
* more readable.
* - If the value increments on both the X and Y axis aren't small, consider
* setting useGPUTranslations to true on the boost settings object. If you do
* this and the increments are small (e.g. datetime axis with small time
* increments) it may cause rendering issues due to floating point rounding
* errors, so your millage may vary.
*
* Settings
* There are two ways of setting the boost threshold:
* - Per series: boost based on number of points in individual series
* - Per chart: boost based on the number of series
*
* To set the series boost threshold, set seriesBoostThreshold on the chart
* object.
* To set the series-specific threshold, set boostThreshold on the series
* object.
*
* In addition, the following can be set in the boost object:
* {
* //Wether or not to use alpha blending
* useAlpha: boolean - default: true
* //Set to true to perform translations on the GPU.
* //Much faster, but may cause rendering issues
* //when using values far from 0 due to floating point
* //rounding issues
* useGPUTranslations: boolean - default: false
* //Use pre-allocated buffers, much faster,
* //but may cause rendering issues with some data sets
* usePreallocated: boolean - default: false
* }
*/
/* *
* Options for the Boost module. The Boost module allows certain series types
* to be rendered by WebGL instead of the default SVG. This allows hundreds of
* thousands of data points to be rendered in milliseconds. In addition to the
* WebGL rendering it saves time by skipping processing and inspection of the
* data wherever possible. This introduces some limitations to what features are
* available in boost mode. See [the docs](
* https://www.highcharts.com/docs/advanced-chart-features/boost-module) for
* details.
*
* In addition to the global `boost` option, each series has a
* [boostThreshold](#plotOptions.series.boostThreshold) that defines when the
* boost should kick in.
*
* Requires the `modules/boost.js` module.
*
* @sample {highstock} highcharts/boost/line-series-heavy-stock
* Stock chart
* @sample {highstock} highcharts/boost/line-series-heavy-dynamic
* Dynamic stock chart
* @sample highcharts/boost/line
* Line chart
* @sample highcharts/boost/line-series-heavy
* Line chart with hundreds of series
* @sample highcharts/boost/scatter
* Scatter chart
* @sample highcharts/boost/area
* Area chart
* @sample highcharts/boost/arearange
* Area range chart
* @sample highcharts/boost/column
* Column chart
* @sample highcharts/boost/columnrange
* Column range chart
* @sample highcharts/boost/bubble
* Bubble chart
* @sample highcharts/boost/heatmap
* Heat map
* @sample highcharts/boost/treemap
* Tree map
*
* @product highcharts highstock
* @apioption boost
* */
'use strict';
import '../../modules/boost/boost.js';

View File

@ -0,0 +1,11 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/broken-axis
* @requires highcharts
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/broken-axis.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/bullet
* @requires highcharts
*
* Bullet graph series type for Highcharts
*
* (c) 2010-2019 Kacper Madej
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/bullet.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/color-axis
* @requires highcharts
*
* ColorAxis module
*
* (c) 2012-2019 Pawel Potaczek
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-map/ColorAxis.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/current-date-indicator
* @requires highcharts
*
* CurrentDateIndicator
*
* (c) 2010-2019 Lars A. V. Cabrera
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/CurrentDateIndicator.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/cylinder
* @requires highcharts
* @requires highcharts/highcharts-3d
*
* Highcharts cylinder module
*
* (c) 2010-2019 Kacper Madej
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/cylinder.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/data
* @requires highcharts
*
* Data module
*
* (c) 2012-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/data.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highstock JS v8.1.0 (2020-05-05)
* @module highcharts/modules/datagrouping
* @requires highcharts
*
* Data grouping module
*
* (c) 2010-2019 Torstein Hønsi
*
* License: www.highcharts.com/license
*/
'use strict';
import dataGrouping from '../../parts/DataGrouping.js';
export default dataGrouping;

View File

@ -0,0 +1,16 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/debugger
* @requires highcharts
*
* Debugger module
*
* (c) 2012-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../error-messages.js';
import '../../modules/debugger.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/dependency-wheel
* @requires highcharts
* @requires highcharts/modules/sankey
*
* Dependency wheel module
*
* (c) 2010-2018 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/dependency-wheel.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/dotplot
* @requires highcharts
*
* Dot plot series type for Highcharts
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/dotplot.src.js';

View File

@ -0,0 +1,15 @@
/**
* @license Highstock JS v8.1.0 (2020-05-05)
* @module highcharts/modules/drag-panes
* @requires highcharts
* @requires highcharts/modules/stock
*
* Drag-panes module
*
* (c) 2010-2019 Highsoft AS
* Author: Kacper Madej
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/drag-panes.src.js';

View File

@ -0,0 +1,11 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/draggable-points
* @requires highcharts
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/draggable-points.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/drilldown
* @requires highcharts
*
* Highcharts Drilldown module
*
* Author: Torstein Honsi
* License: www.highcharts.com/license
*
*/
'use strict';
import '../../modules/drilldown.src.js';

View File

@ -0,0 +1,11 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/dumbbell
* @requires highcharts
*
* (c) 2009-2019 Sebastian Bochan, Rafal Sebestjanski
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/dumbbell.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/export-data
* @requires highcharts
* @requires highcharts/modules/exporting
*
* Exporting module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/export-data.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/exporting
* @requires highcharts
*
* Exporting module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/full-screen.src.js';
import '../../modules/exporting.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highstock JS v8.1.0 (2020-05-05)
* @module highcharts/modules/full-screen
* @requires highcharts
*
* Advanced Highstock tools
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/full-screen.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/funnel
* @requires highcharts
*
* Highcharts funnel module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/funnel.src.js';

View File

@ -0,0 +1,15 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/funnel3d
* @requires highcharts
* @requires highcharts/highcharts-3d
* @requires highcharts/modules/cylinder
*
* Highcharts funnel module
*
* (c) 2010-2019 Kacper Madej
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/funnel3d.src.js';

View File

@ -0,0 +1,17 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/gantt
* @requires highcharts
*
* Gantt series
*
* (c) 2016-2019 Lars A. V. Cabrera
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/GanttSeries.js';
import '../../parts-gantt/GanttChart.js';
import '../../parts/Scrollbar.js';
import '../../parts/RangeSelector.js';
import '../../parts/Navigator.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/grid-axis
* @requires highcharts
*
* GridAxis
*
* (c) 2016-2019 Lars A. V. Cabrera
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/GridAxis.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highmaps JS v8.1.0 (2020-05-05)
* @module highcharts/modules/heatmap
* @requires highcharts
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-map/ColorAxis.js';
import '../../parts-map/ColorMapSeriesMixin.js';
import '../../parts-map/HeatmapSeries.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/histogram-bellcurve
* @requires highcharts
*
* (c) 2010-2019 Highsoft AS
* Author: Sebastian Domas
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/histogram.src.js';
import '../../modules/bellcurve.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/item-series
* @requires highcharts
*
* Item series type for Highcharts
*
* (c) 2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/item-series.src.js';

View File

@ -0,0 +1,11 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/lollipop
* @requires highcharts
*
* (c) 2009-2019 Sebastian Bochan, Rafal Sebestjanski
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/lollipop.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/marker-clusters
* @requires highcharts
*
* Marker clusters module for Highcharts
*
* (c) 2010-2019 Wojciech Chmiel
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/marker-clusters.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/networkgraph
* @requires highcharts
*
* Force directed graph module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/networkgraph/networkgraph.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/no-data-to-display
* @requires highcharts
*
* Plugin for displaying a message when there is no data visible in chart.
*
* (c) 2010-2019 Highsoft AS
* Author: Oystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/no-data-to-display.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/offline-exporting
* @requires highcharts
* @requires highcharts/modules/exporting
*
* Client side exporting module
*
* (c) 2015-2019 Torstein Honsi / Oystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/offline-exporting.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/oldie-polyfills
* @requires highcharts
*
* Old IE (v6, v7, v8) array polyfills for Highcharts v7+.
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/oldie-polyfills.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/oldie
* @requires highcharts
*
* Old IE (v6, v7, v8) module for Highcharts v6+.
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/oldie.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* Organization chart series type
* @module highcharts/modules/organization
* @requires highcharts
* @requires highcharts/modules/sankey
*
* (c) 2019-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/organization.src.js';

View File

@ -0,0 +1,11 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/overlapping-datalabels
* @requires highcharts
*
* (c) 2009-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/overlapping-datalabels.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/parallel-coordinates
* @requires highcharts
*
* Support for parallel coordinates in Highcharts
*
* (c) 2010-2019 Pawel Fus
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/parallel-coordinates.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/pareto
* @requires highcharts
*
* Pareto series type for Highcharts
*
* (c) 2010-2019 Sebastian Bochan
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/pareto.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/pathfinder
* @requires highcharts
*
* Pathfinder
*
* (c) 2016-2019 Øystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/Pathfinder.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/pattern-fill
* @requires highcharts
*
* Module for adding patterns and images as point fills.
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Hønsi, Øystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/pattern-fill.src.js';

View File

@ -0,0 +1,15 @@
/**
* @license Highstock JS v8.1.0 (2020-05-05)
* @module highcharts/modules/price-indicator
* @requires highcharts
* @requires highcharts/modules/stock
*
* Advanced Highstock tools
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/price-indicator.src.js';

View File

@ -0,0 +1,16 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/pyramid3d
* @requires highcharts
* @requires highcharts/highcharts-3d
* @requires highcharts/modules/cylinder
* @requires highcharts/modules/funnel3d
*
* Highcharts 3D funnel module
*
* (c) 2010-2019 Kacper Madej
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/pyramid3d.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/sankey
* @requires highcharts
*
* Sankey diagram module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/sankey.src.js';

View File

@ -0,0 +1,15 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/sonification
* @requires highcharts
*
* Sonification module
*
* (c) 2012-2019 Øystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/sonification/sonification.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/static-scale
* @requires highcharts
*
* StaticScale
*
* (c) 2016-2019 Torstein Honsi, Lars A. V. Cabrera
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/static-scale.src.js';

View File

@ -0,0 +1,16 @@
/**
* @license Highstock JS v8.1.0 (2020-05-05)
* @module highcharts/modules/stock-tools
* @requires highcharts
* @requires highcharts/modules/stock
*
* Advanced Highstock tools
*
* (c) 2010-2019 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/stock-tools-bindings.js';
import '../../modules/stock-tools-gui.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/streamgraph
* @requires highcharts
*
* Streamgraph module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/streamgraph.src.js';

View File

@ -0,0 +1,12 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/sunburst
* @requires highcharts
*
* (c) 2016-2019 Highsoft AS
* Authors: Jon Arild Nygard
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/sunburst.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highmaps JS v8.1.0 (2020-05-05)
* @module highcharts/modules/tilemap
* @requires highcharts
* @requires highcharts/modules/map
*
* Tilemap module
*
* (c) 2010-2019 Highsoft AS
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/tilemap.src.js';

View File

@ -0,0 +1,14 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/timeline
* @requires highcharts
*
* Timeline series
*
* (c) 2010-2019 Highsoft AS
* Author: Daniel Studencki
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/timeline.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts Gantt JS v8.1.0 (2020-05-05)
* @module highcharts/modules/treegrid
* @requires highcharts
*
* Tree Grid
*
* (c) 2016-2019 Jon Arild Nygard
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../parts-gantt/TreeGridAxis.js';

View File

@ -0,0 +1,12 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/treemap
* @requires highcharts
*
* (c) 2014-2019 Highsoft AS
* Authors: Jon Arild Nygard / Oystein Moseng
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/treemap.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/variable-pie
* @requires highcharts
*
* Variable Pie module for Highcharts
*
* (c) 2010-2019 Grzegorz Blachliński
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/variable-pie.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/variwide
* @requires highcharts
*
* Highcharts variwide module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/variwide.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/vector
* @requires highcharts
*
* Vector plot series module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/vector.src.js';

View File

@ -0,0 +1,12 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/venn
* @requires highcharts
*
* (c) 2017-2019 Highsoft AS
* Authors: Jon Arild Nygard
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/venn.src.js';

View File

@ -0,0 +1,13 @@
/**
* @license Highcharts JS v8.1.0 (2020-05-05)
* @module highcharts/modules/windbarb
* @requires highcharts
*
* Wind barb series module
*
* (c) 2010-2019 Torstein Honsi
*
* License: www.highcharts.com/license
*/
'use strict';
import '../../modules/windbarb.src.js';

Some files were not shown because too many files have changed in this diff Show More