549 changed files with 346981 additions and 15 deletions
@ -0,0 +1,113 @@ |
|||||
|
@{ ViewData["Title"] = "REP012A"; |
||||
|
Layout = "~/Views/Shared/_AMESLayout.cshtml"; } |
||||
|
|
||||
|
<script src="~/Highcharts-7.1.2/highcharts.js"></script> |
||||
|
<script src="~/Highcharts-7.1.2/modules/exporting.js"></script> |
||||
|
<script src="~/Highcharts-7.1.2/modules/export-data.js"></script> |
||||
|
|
||||
|
<style> |
||||
|
.control-label { |
||||
|
justify-content: flex-end !important; |
||||
|
} |
||||
|
|
||||
|
.text-error { |
||||
|
color: #dc3545 !important; |
||||
|
} |
||||
|
|
||||
|
.my-read-only-class { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<div class="layui-card"> |
||||
|
<div class="col-sm-12"> |
||||
|
<form enctype="multipart/form-data" class="layui-form" method="post"> |
||||
|
<div class="layui-form-item"> |
||||
|
<div class="layui-inline"> |
||||
|
<div id="divChart" style="width: 600px; height: 400px; margin: 0 auto"></div> |
||||
|
<input type="hidden" id="param_list" value="@ViewData["ParamList"]" /> |
||||
|
<table class="layui-hide" id="query" lay-filter="query"></table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
@section Scripts { |
||||
|
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); |
||||
|
await Html.RenderPartialAsync("_FileinputScriptsPartial"); } |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
$(document).ready(function () { |
||||
|
//alert(param_list.value); |
||||
|
$.ajax({ |
||||
|
type: "Post", |
||||
|
url: '/REP/GetErrorCode4REP012?id=' + param_list.value, |
||||
|
contentType: "application/json; charset=utf-8", |
||||
|
dataType: 'json', |
||||
|
success: function (response) { |
||||
|
var errorData = new Array(); |
||||
|
var idx = 0; |
||||
|
$.each(response, function (i, item) { |
||||
|
errorData[idx] = new Array(); |
||||
|
errorData[idx][0] = item["errorCode"]; |
||||
|
errorData[idx][1] = item["errorQty"]; |
||||
|
idx = idx + 1; |
||||
|
}); |
||||
|
|
||||
|
Highcharts.chart('divChart', { |
||||
|
chart: { |
||||
|
type: 'pie' |
||||
|
}, |
||||
|
title: { |
||||
|
text: '不良代碼統計' |
||||
|
}, |
||||
|
subtitle: { |
||||
|
text: '' |
||||
|
}, |
||||
|
plotOptions: { |
||||
|
pie: { |
||||
|
allowPointSelect: true, |
||||
|
cursor: 'pointer', |
||||
|
dataLabels: { |
||||
|
enabled: false |
||||
|
}, |
||||
|
showInLegend: true |
||||
|
} |
||||
|
}, |
||||
|
series: [{ |
||||
|
type: 'pie', |
||||
|
name: '不良數量', |
||||
|
data: errorData |
||||
|
}] |
||||
|
}); |
||||
|
}, |
||||
|
error: function () { |
||||
|
alert("查無不良代碼統計資料!"); |
||||
|
$("#divChart").empty(); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
var tableCols = [[ |
||||
|
{ |
||||
|
field: 'errorCode', |
||||
|
title: '不良代碼', |
||||
|
sort: true |
||||
|
}, |
||||
|
{ |
||||
|
field: 'errorQty', |
||||
|
width: 160, |
||||
|
title: '不良次數', |
||||
|
sort: true |
||||
|
}] |
||||
|
]; |
||||
|
|
||||
|
//基本数据表格 |
||||
|
var table = hg.table.datatable('query', '不良代碼統計', '/REP/GetErrorCode4REP012List/' + param_list.value, {}, tableCols, toolbar, true, 'full-100', ['filter', 'print', 'exports']); |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
@ -0,0 +1,231 @@ |
|||||
|
.highcharts-popup.highcharts-annotation-toolbar { |
||||
|
right: 10%; |
||||
|
left: auto; |
||||
|
height: 40px; |
||||
|
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: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/close.svg") no-repeat 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: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/edit.svg") no-repeat 50% 50% transparent; |
||||
|
text-indent: -9999px; |
||||
|
} |
||||
|
|
||||
|
.highcharts-popup button.highcharts-annotation-remove-button { |
||||
|
background: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/destroy.svg") no-repeat 50% 50% transparent; |
||||
|
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; |
||||
|
} |
||||
@ -0,0 +1,237 @@ |
|||||
|
$version: "7.1.2"; |
||||
|
|
||||
|
// Colors for buttons. |
||||
|
$button-background-color: #f7f7f7; |
||||
|
$button-hover-color: #e6ebf5; |
||||
|
|
||||
|
|
||||
|
.highcharts-popup.highcharts-annotation-toolbar { |
||||
|
right: 10%; |
||||
|
left: auto; |
||||
|
height: 40px; |
||||
|
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: url("https://code.highcharts.com/#{$version}/gfx/stock-icons/close.svg") no-repeat 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:url("https://code.highcharts.com/#{$version}/gfx/stock-icons/edit.svg") no-repeat 50% 50% transparent; |
||||
|
text-indent: -9999px; |
||||
|
} |
||||
|
|
||||
|
.highcharts-popup button.highcharts-annotation-remove-button { |
||||
|
background:url("https://code.highcharts.com/#{$version}/gfx/stock-icons/destroy.svg") no-repeat 50% 50% transparent; |
||||
|
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; |
||||
|
} |
||||
@ -0,0 +1,895 @@ |
|||||
|
/** |
||||
|
* @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; |
||||
|
} |
||||
|
|
||||
|
.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-state-hover path { |
||||
|
transition: stroke-width 50; |
||||
|
/* 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-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; |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
@ -0,0 +1,791 @@ |
|||||
|
/** |
||||
|
* @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; |
||||
|
} |
||||
|
|
||||
|
.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-state-hover path { |
||||
|
transition: stroke-width 50; /* 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-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; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
@ -0,0 +1,268 @@ |
|||||
|
.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-image: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/arrow-right.svg"); |
||||
|
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-image: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/arrow-right.svg"); |
||||
|
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: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/arrow-bottom.svg") no-repeat 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 { |
||||
|
background-image: url("https://code.highcharts.com/7.1.2/gfx/stock-icons/arrow-right.svg"); |
||||
|
/* 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-image: url("https://code.highcharts.com/gfx/7.1.2/stock-icons/arrow-right.svg"); |
||||
|
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; |
||||
|
} |
||||
@ -0,0 +1,270 @@ |
|||||
|
$version: "7.1.2"; |
||||
|
|
||||
|
// 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-image: url("https://code.highcharts.com/#{$version}/gfx/stock-icons/arrow-right.svg"); |
||||
|
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-image: url("https://code.highcharts.com/#{$version}/gfx/stock-icons/arrow-right.svg"); |
||||
|
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: url("https://code.highcharts.com/#{$version}/gfx/stock-icons/arrow-bottom.svg") no-repeat 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 { |
||||
|
background-image: url("https://code.highcharts.com/#{$version}/gfx/stock-icons/arrow-right.svg"); |
||||
|
/* 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-image: url("https://code.highcharts.com/gfx/#{$version}/stock-icons/arrow-right.svg"); |
||||
|
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; |
||||
|
} |
||||
@ -0,0 +1,956 @@ |
|||||
|
@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; |
||||
|
} |
||||
|
|
||||
|
.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-state-hover path { |
||||
|
transition: stroke-width 50; |
||||
|
/* 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-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; |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
@ -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'; |
||||
|
|
||||
|
|
||||
@ -0,0 +1,909 @@ |
|||||
|
@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; |
||||
|
} |
||||
|
|
||||
|
.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-state-hover path { |
||||
|
transition: stroke-width 50; |
||||
|
/* 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-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; |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
@ -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'; |
||||
@ -0,0 +1,925 @@ |
|||||
|
@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; |
||||
|
} |
||||
|
|
||||
|
.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-state-hover path { |
||||
|
transition: stroke-width 50; |
||||
|
/* 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-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; |
||||
|
} |
||||
|
|
||||
|
/* 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; |
||||
|
} |
||||
@ -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'; |
||||
@ -0,0 +1,138 @@ |
|||||
|
import H from './../parts/Globals.js'; |
||||
|
import './../parts/Utilities.js'; |
||||
|
import eventEmitterMixin from './eventEmitterMixin.js'; |
||||
|
|
||||
|
/** |
||||
|
* A control point class which is a connection between controllable |
||||
|
* transform methods and a user actions. |
||||
|
* |
||||
|
* @constructor |
||||
|
* @mixes eventEmitterMixin |
||||
|
* @memberOf Annotation |
||||
|
* |
||||
|
* @param {Highcharts.Chart} chart a chart instance |
||||
|
* @param {Object} target a controllable instance which is a target for |
||||
|
* a control point |
||||
|
* @param {Annotation.ControlPoint.Options} options an options object |
||||
|
* @param {number} [index] |
||||
|
*/ |
||||
|
function ControlPoint(chart, target, options, index) { |
||||
|
this.chart = chart; |
||||
|
this.target = target; |
||||
|
this.options = options; |
||||
|
this.index = H.pick(options.index, index); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.ControlPoint.Position |
||||
|
* @property {number} x |
||||
|
* @property {number} y |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* @callback Annotation.ControlPoint.Positioner |
||||
|
* @param {Object} e event |
||||
|
* @param {Controllable} target |
||||
|
* @return {Annotation.ControlPoint.Position} position |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.ControlPoint.Options |
||||
|
* @property {string} symbol |
||||
|
* @property {number} width |
||||
|
* @property {number} height |
||||
|
* @property {Object} style |
||||
|
* @property {boolean} visible |
||||
|
* @property {Annotation.ControlPoint.Positioner} positioner |
||||
|
* @property {Object} events |
||||
|
*/ |
||||
|
|
||||
|
H.extend( |
||||
|
ControlPoint.prototype, |
||||
|
eventEmitterMixin |
||||
|
); |
||||
|
|
||||
|
/** |
||||
|
* List of events for `anntation.options.events` that should not be |
||||
|
* added to `annotation.graphic` but to the `annotation`. |
||||
|
* |
||||
|
* @type {Array<string>} |
||||
|
*/ |
||||
|
ControlPoint.prototype.nonDOMEvents = ['drag']; |
||||
|
|
||||
|
/** |
||||
|
* Set the visibility. |
||||
|
* |
||||
|
* @param {boolean} [visible] |
||||
|
**/ |
||||
|
ControlPoint.prototype.setVisibility = function (visible) { |
||||
|
this.graphic.attr('visibility', visible ? 'visible' : 'hidden'); |
||||
|
|
||||
|
this.options.visible = visible; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* Render the control point. |
||||
|
*/ |
||||
|
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); |
||||
|
this.addEvents(); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* Redraw the control point. |
||||
|
* |
||||
|
* @param {boolean} [animation] |
||||
|
*/ |
||||
|
ControlPoint.prototype.redraw = function (animation) { |
||||
|
this.graphic[animation ? 'animate' : 'attr']( |
||||
|
this.options.positioner.call(this, this.target) |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Destroy the control point. |
||||
|
*/ |
||||
|
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. |
||||
|
*/ |
||||
|
ControlPoint.prototype.update = function (userOptions) { |
||||
|
var chart = this.chart, |
||||
|
target = this.target, |
||||
|
index = this.index, |
||||
|
options = H.merge(true, this.options, userOptions); |
||||
|
|
||||
|
this.destroy(); |
||||
|
this.constructor(chart, target, options, index); |
||||
|
this.render(chart.controlPointsGroup); |
||||
|
this.redraw(); |
||||
|
}; |
||||
|
|
||||
|
export default ControlPoint; |
||||
@ -0,0 +1,448 @@ |
|||||
|
import H from '../parts/Globals.js'; |
||||
|
import '../parts/Axis.js'; |
||||
|
import '../parts/Series.js'; |
||||
|
|
||||
|
/** |
||||
|
* A mock point label configuration. |
||||
|
* |
||||
|
* @interface Annotation.MockLabelOptionsObject |
||||
|
*//**
|
||||
|
* X value translated to x axis scale |
||||
|
* @name Annotation.MockLabelOptionsObject#x |
||||
|
* @type {number|undefined} |
||||
|
*//**
|
||||
|
* Y value translated to y axis scale |
||||
|
* @name Annotation.MockLabelOptionsObject#y |
||||
|
* @type {number|undefined} |
||||
|
*//**
|
||||
|
* @name Annotation.MockLabelOptionsObject#point |
||||
|
* @type {Highcharts.Point} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A mock point configuration. |
||||
|
* |
||||
|
* @interface Highcharts.MockPointOptionsObject |
||||
|
*//**
|
||||
|
* x value for the point in xAxis scale or pixels |
||||
|
* @name Highcharts.MockPointOptionsObject#x |
||||
|
* @type {number} |
||||
|
*//**
|
||||
|
* y value for the point in yAxis scale or pixels |
||||
|
* @name Highcharts.MockPointOptionsObject#y |
||||
|
* @type {number} |
||||
|
*//**
|
||||
|
* xAxis index or id |
||||
|
* @name Highcharts.MockPointOptionsObject#xAxis |
||||
|
* @type {Highcharts.Axis|number|string|undefined} |
||||
|
*//**
|
||||
|
* yAxis index or id |
||||
|
* @name Highcharts.MockPointOptionsObject#yAxis |
||||
|
* @property {Highcharts.Axis|number|string|undefined} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A point-like object, a mock point or a point uses in series. |
||||
|
* |
||||
|
* @private |
||||
|
* @typedef {Highcharts.Point|Highcharts.MockPoint} Highcharts.PointLike |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* 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 |
||||
|
* |
||||
|
* @private |
||||
|
* @class |
||||
|
* @name Highcharts.MockPoint |
||||
|
* |
||||
|
* @param {Highcharts.Chart} chart |
||||
|
* The chart object |
||||
|
* |
||||
|
* @param {Highcharts.MockPointOptionsObject} options |
||||
|
* The options object |
||||
|
*/ |
||||
|
function MockPoint(chart, target, options) { |
||||
|
/** |
||||
|
* A mock series instance imitating a real series from a real point. |
||||
|
* |
||||
|
* @type {Object} |
||||
|
* @property {boolean} series.visible=true - whether a series is visible |
||||
|
* @property {Chart} series.chart - a chart instance |
||||
|
* @property {function} series.getPlotBox |
||||
|
*/ |
||||
|
this.series = { |
||||
|
visible: true, |
||||
|
chart: chart, |
||||
|
getPlotBox: H.Series.prototype.getPlotBox |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @type {?Controllable} |
||||
|
*/ |
||||
|
this.target = target || null; |
||||
|
|
||||
|
/** |
||||
|
* Options for the mock point. |
||||
|
* |
||||
|
* @type {Highcharts.MockPointOptionsObject} |
||||
|
*/ |
||||
|
this.options = options; |
||||
|
|
||||
|
/** |
||||
|
* If an xAxis is set it represents the point's value in terms of the xAxis. |
||||
|
* |
||||
|
* @name Annotation.MockPoint#x |
||||
|
* @type {?number} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* If an yAxis is set it represents the point's value in terms of the yAxis. |
||||
|
* |
||||
|
* @name Annotation.MockPoint#y |
||||
|
* @type {?number} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* It represents the point's pixel x coordinate relative to its plot box. |
||||
|
* |
||||
|
* @name Annotation.MockPoint#plotX |
||||
|
* @type {?number} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* It represents the point's pixel y position relative to its plot box. |
||||
|
* |
||||
|
* @name Annotation.MockPoint#plotY |
||||
|
* @type {?number} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Whether the point is inside the plot box. |
||||
|
* |
||||
|
* @name Annotation.MockPoint#isInside |
||||
|
* @type {boolean} |
||||
|
*/ |
||||
|
|
||||
|
this.applyOptions(this.getOptions()); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Create a mock point from a real Highcharts point. |
||||
|
* |
||||
|
* @param {Point} point |
||||
|
* |
||||
|
* @return {Annotation.MockPoint} 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 |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @typedef Annotation.MockPoint.Position |
||||
|
* @property {number} x |
||||
|
* @property {number} y |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Get the pixel position from the point like object. |
||||
|
* |
||||
|
* @param {Annotation.PointLike} point |
||||
|
* @param {boolean} [paneCoordinates] |
||||
|
* whether the pixel position should be relative |
||||
|
* |
||||
|
* @return {Annotation.MockPoint.Position} 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. |
||||
|
* |
||||
|
* @param {Annotation.PointLike} point |
||||
|
* |
||||
|
* @return {Annotation.MockPoint.Options} mock point's options |
||||
|
*/ |
||||
|
MockPoint.pointToOptions = function (point) { |
||||
|
return { |
||||
|
x: point.x, |
||||
|
y: point.y, |
||||
|
xAxis: point.series.xAxis, |
||||
|
yAxis: point.series.yAxis |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
H.extend(MockPoint.prototype, /** @lends Annotation.MockPoint# */ { |
||||
|
/** |
||||
|
* A flag indicating that a point is not the real one. |
||||
|
* |
||||
|
* @type {boolean} |
||||
|
* @default true |
||||
|
*/ |
||||
|
mock: true, |
||||
|
|
||||
|
/** |
||||
|
* Check if the point has dynamic options. |
||||
|
* |
||||
|
* @return {boolean} A positive flag if the point has dynamic options. |
||||
|
*/ |
||||
|
hasDynamicOptions: function () { |
||||
|
return typeof this.options === 'function'; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get the point's options. |
||||
|
* |
||||
|
* @return {Annotation.MockPoint.Options} the mock point's options. |
||||
|
*/ |
||||
|
getOptions: function () { |
||||
|
return this.hasDynamicOptions() ? |
||||
|
this.options(this.target) : |
||||
|
this.options; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Apply options for the point. |
||||
|
* |
||||
|
* @param {Annotation.MockPoint.Options} options |
||||
|
*/ |
||||
|
applyOptions: function (options) { |
||||
|
this.command = options.command; |
||||
|
|
||||
|
this.setAxis(options, 'x'); |
||||
|
this.setAxis(options, 'y'); |
||||
|
|
||||
|
this.refresh(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Set x or y axis. |
||||
|
* |
||||
|
* @param {Annotation.MockPoint.Options} options |
||||
|
* @param {string} xOrY 'x' or 'y' string literal |
||||
|
*/ |
||||
|
setAxis: function (options, xOrY) { |
||||
|
var axisName = xOrY + 'Axis', |
||||
|
axisOptions = options[axisName], |
||||
|
chart = this.series.chart; |
||||
|
|
||||
|
this.series[axisName] = |
||||
|
axisOptions instanceof H.Axis ? |
||||
|
axisOptions : |
||||
|
H.defined(axisOptions) ? |
||||
|
chart[axisName][axisOptions] || chart.get(axisOptions) : |
||||
|
null; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Transform the mock point to an anchor |
||||
|
* (relative position on the chart). |
||||
|
* |
||||
|
* @return {Array<number>} A quadruple of numbers which denotes x, y, |
||||
|
* width and height of the box |
||||
|
**/ |
||||
|
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; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.MockPoint.LabelConfig |
||||
|
* @property {number|undefined} x x value translated to x axis scale |
||||
|
* @property {number|undefined} y y value translated to y axis scale |
||||
|
* @property {Annotation.MockPoint} point instance of the point |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Returns a label config object - |
||||
|
* the same as Highcharts.Point.prototype.getLabelConfig |
||||
|
* |
||||
|
* @return {Annotation.MockPoint.LabelConfig} the point's label config |
||||
|
*/ |
||||
|
getLabelConfig: function () { |
||||
|
return { |
||||
|
x: this.x, |
||||
|
y: this.y, |
||||
|
point: this |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Check if the point is inside its pane. |
||||
|
* |
||||
|
* @return {boolean} A flag indicating whether the point is inside the pane. |
||||
|
*/ |
||||
|
isInsidePane: function () { |
||||
|
var plotX = this.plotX, |
||||
|
plotY = this.plotY, |
||||
|
xAxis = this.series.xAxis, |
||||
|
yAxis = this.series.yAxis, |
||||
|
isInside = true; |
||||
|
|
||||
|
if (xAxis) { |
||||
|
isInside = H.defined(plotX) && plotX >= 0 && plotX <= xAxis.len; |
||||
|
} |
||||
|
|
||||
|
if (yAxis) { |
||||
|
isInside = |
||||
|
isInside && |
||||
|
H.defined(plotY) && |
||||
|
plotY >= 0 && plotY <= yAxis.len; |
||||
|
} |
||||
|
|
||||
|
return isInside; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Refresh point values and coordinates based on its options. |
||||
|
*/ |
||||
|
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.isInsidePane(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Translate the point. |
||||
|
* |
||||
|
* @param {number} [cx] origin x transformation |
||||
|
* @param {number} [cy] origin y transformation |
||||
|
* @param {number} dx translation for x coordinate |
||||
|
* @param {number} dy translation for y coordinate |
||||
|
**/ |
||||
|
translate: function (cx, cy, dx, dy) { |
||||
|
if (!this.hasDynamicOptions()) { |
||||
|
this.plotX += dx; |
||||
|
this.plotY += dy; |
||||
|
|
||||
|
this.refreshOptions(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Scale the point. |
||||
|
* |
||||
|
* @param {number} cx origin x transformation |
||||
|
* @param {number} cy origin y transformation |
||||
|
* @param {number} sx scale factor x |
||||
|
* @param {number} sy scale factor y |
||||
|
*/ |
||||
|
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. |
||||
|
* |
||||
|
* @param {number} cx origin x rotation |
||||
|
* @param {number} cy origin y rotation |
||||
|
* @param {number} radians |
||||
|
*/ |
||||
|
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. |
||||
|
*/ |
||||
|
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; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
export default MockPoint; |
||||
File diff suppressed because it is too large
@ -0,0 +1,84 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Utilities.js'; |
||||
|
import controllableMixin from './controllableMixin.js'; |
||||
|
import ControllablePath from './ControllablePath.js'; |
||||
|
|
||||
|
/** |
||||
|
* A controllable circle class. |
||||
|
* |
||||
|
* @constructor |
||||
|
* @mixes Annotation.controllableMixin |
||||
|
* @memberOf Annotation |
||||
|
* |
||||
|
* @param {Highcharts.Annotation} annotation an annotation instance |
||||
|
* @param {Object} options a shape's options |
||||
|
* @param {number} index of the circle |
||||
|
**/ |
||||
|
function ControllableCircle(annotation, options, index) { |
||||
|
this.init(annotation, options, index); |
||||
|
this.collection = 'shapes'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* A map object which allows to map options attributes to element attributes. |
||||
|
*/ |
||||
|
ControllableCircle.attrsMap = H.merge(ControllablePath.attrsMap, { |
||||
|
r: 'r' |
||||
|
}); |
||||
|
|
||||
|
H.merge( |
||||
|
true, |
||||
|
ControllableCircle.prototype, |
||||
|
controllableMixin, /** @lends Annotation.ControllableCircle# */ { |
||||
|
/** |
||||
|
* @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; |
||||
@ -0,0 +1,93 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Utilities.js'; |
||||
|
import controllableMixin from './controllableMixin.js'; |
||||
|
import ControllableLabel from './ControllableLabel.js'; |
||||
|
|
||||
|
/** |
||||
|
* A controllable image class. |
||||
|
* |
||||
|
* @class |
||||
|
* @mixes Annotation.controllableMixin |
||||
|
* @memberOf Annotation |
||||
|
* |
||||
|
* @param {Highcharts.Annotation} annotation - an annotation instance |
||||
|
* @param {Object} options a controllable's options |
||||
|
* @param {number} index of the image |
||||
|
**/ |
||||
|
function ControllableImage(annotation, options, index) { |
||||
|
this.init(annotation, options, index); |
||||
|
this.collection = 'shapes'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.ControllableImage.AttrsMap |
||||
|
* @property {string} width=width |
||||
|
* @property {string} height=height |
||||
|
* @property {string} zIndex=zIndex |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A map object which allows to map options attributes to element attributes |
||||
|
* |
||||
|
* @type {Annotation.ControllableImage.AttrsMap} |
||||
|
*/ |
||||
|
ControllableImage.attrsMap = { |
||||
|
width: 'width', |
||||
|
height: 'height', |
||||
|
zIndex: 'zIndex' |
||||
|
}; |
||||
|
|
||||
|
H.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; |
||||
@ -0,0 +1,497 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Utilities.js'; |
||||
|
import './../../parts/SvgRenderer.js'; |
||||
|
import controllableMixin from './controllableMixin.js'; |
||||
|
import MockPoint from './../MockPoint.js'; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* @private |
||||
|
* @interface Highcharts.AnnotationAnchorObject |
||||
|
*//**
|
||||
|
* Relative to the plot area position |
||||
|
* @name Highcharts.AnnotationAnchorObject#relativePosition |
||||
|
* @type {Highcharts.AnnotationAnchorPositionObject} |
||||
|
*//**
|
||||
|
* Absolute position |
||||
|
* @name Highcharts.AnnotationAnchorObject#absolutePosition |
||||
|
* @type {Highcharts.AnnotationAnchorPositionObject} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* An object which denotes an anchor position |
||||
|
* |
||||
|
* @private |
||||
|
* @interface Highcharts.AnnotationAnchorPositionObject |
||||
|
*//**
|
||||
|
* @name Highcharts.AnnotationAnchorPositionObject#x |
||||
|
* @property {number} |
||||
|
*//**
|
||||
|
* @name Highcharts.AnnotationAnchorPositionObject#y |
||||
|
* @property {number} |
||||
|
*//**
|
||||
|
* @name Highcharts.AnnotationAnchorPositionObject#height |
||||
|
* @property {number} |
||||
|
*//**
|
||||
|
* @name Highcharts.AnnotationAnchorPositionObject#width |
||||
|
* @property {number} |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A controllable label class. |
||||
|
* |
||||
|
* @private |
||||
|
* @class |
||||
|
* @name Annotation.ControllableLabel |
||||
|
* |
||||
|
* @mixes Annotation.controllableMixin |
||||
|
* |
||||
|
* @param {Highcharts.Annotation} annotation an annotation instance |
||||
|
* @param {object} options a label's options |
||||
|
* @param {number} index of the label |
||||
|
**/ |
||||
|
function ControllableLabel(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 {Object} alignOptions |
||||
|
* @param {Object} box |
||||
|
* @return {Annotation.controllableMixin.Position} 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. |
||||
|
* |
||||
|
* @param {Object} label |
||||
|
* @param {Object} alignOptions |
||||
|
* @param {Object} alignAttr |
||||
|
* @return {Object} justified options |
||||
|
**/ |
||||
|
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; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.ControllableLabel.AttrsMap |
||||
|
* @property {string} backgroundColor=fill |
||||
|
* @property {string} borderColor=stroke |
||||
|
* @property {string} borderWidth=stroke-width |
||||
|
* @property {string} zIndex=zIndex |
||||
|
* @property {string} borderRadius=r |
||||
|
* @property {string} padding=padding |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A map object which allows to map options attributes to element attributes |
||||
|
* |
||||
|
* @type {Annotation.ControllableLabel.AttrsMap} |
||||
|
*/ |
||||
|
ControllableLabel.attrsMap = { |
||||
|
backgroundColor: 'fill', |
||||
|
borderColor: 'stroke', |
||||
|
borderWidth: 'stroke-width', |
||||
|
zIndex: 'zIndex', |
||||
|
borderRadius: 'r', |
||||
|
padding: 'padding' |
||||
|
}; |
||||
|
|
||||
|
H.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]; |
||||
|
|
||||
|
// 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 ? |
||||
|
H.format( |
||||
|
text, |
||||
|
point.getLabelConfig(), |
||||
|
this.annotation.chart.time |
||||
|
) : |
||||
|
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.AnnotationAnchorPositionObject|null} position |
||||
|
*/ |
||||
|
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.isInsidePane.call(point); |
||||
|
|
||||
|
if (showItem) { |
||||
|
|
||||
|
if (itemOptions.distance) { |
||||
|
itemPosition = H.Tooltip.prototype.getPosition.call( |
||||
|
{ |
||||
|
chart: chart, |
||||
|
distance: H.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( |
||||
|
H.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 (H.isNumber(anchorX) && H.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; |
||||
@ -0,0 +1,175 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Utilities.js'; |
||||
|
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) + ')'; |
||||
|
|
||||
|
/** |
||||
|
* A controllable path class. |
||||
|
* |
||||
|
* @class |
||||
|
* @mixes Annotation.controllableMixin |
||||
|
* @mixes Annotation.markerMixin |
||||
|
* @memberOf Annotation |
||||
|
* |
||||
|
* @param {Highcharts.Annotation} |
||||
|
* @param {Object} options a path's options object |
||||
|
* @param {number} index of the path |
||||
|
**/ |
||||
|
function ControllablePath(annotation, options, index) { |
||||
|
this.init(annotation, options, index); |
||||
|
this.collection = 'shapes'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.ControllablePath.AttrsMap |
||||
|
* @property {string} dashStyle=dashstyle |
||||
|
* @property {string} strokeWidth=stroke-width |
||||
|
* @property {string} stroke=stroke |
||||
|
* @property {string} fill=fill |
||||
|
* @property {string} zIndex=zIndex |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* A map object which allows to map options attributes to element attributes |
||||
|
* |
||||
|
* @type {Annotation.ControllablePath.AttrsMap} |
||||
|
*/ |
||||
|
ControllablePath.attrsMap = { |
||||
|
dashStyle: 'dashstyle', |
||||
|
strokeWidth: 'stroke-width', |
||||
|
stroke: 'stroke', |
||||
|
fill: 'fill', |
||||
|
zIndex: 'zIndex' |
||||
|
}; |
||||
|
|
||||
|
H.merge( |
||||
|
true, |
||||
|
ControllablePath.prototype, |
||||
|
controllableMixin, /** @lends Annotation.ControllablePath# */ { |
||||
|
/** |
||||
|
* @type 'path' |
||||
|
*/ |
||||
|
type: 'path', |
||||
|
|
||||
|
setMarkers: markerMixin.setItemMarkers, |
||||
|
|
||||
|
/** |
||||
|
* Map the controllable path to 'd' path attribute |
||||
|
* |
||||
|
* @return {Array<(string|number)>} a path's d attribute |
||||
|
*/ |
||||
|
toD: function () { |
||||
|
var d = this.options.d; |
||||
|
|
||||
|
if (d) { |
||||
|
return typeof d === 'function' ? |
||||
|
d.call(this) : |
||||
|
d; |
||||
|
} |
||||
|
|
||||
|
var points = this.points, |
||||
|
len = points.length, |
||||
|
showPath = len, |
||||
|
point = points[0], |
||||
|
position = showPath && this.anchor(point).absolutePosition, |
||||
|
pointIndex = 0, |
||||
|
dIndex = 2, |
||||
|
command; |
||||
|
|
||||
|
d = position && ['M', position.x, position.y]; |
||||
|
|
||||
|
while (++pointIndex < len && showPath) { |
||||
|
point = points[pointIndex]; |
||||
|
command = point.command || 'L'; |
||||
|
position = this.anchor(point).absolutePosition; |
||||
|
|
||||
|
if (command === 'Z') { |
||||
|
d[++dIndex] = command; |
||||
|
} else { |
||||
|
if (command !== points[pointIndex - 1].command) { |
||||
|
d[++dIndex] = command; |
||||
|
} |
||||
|
|
||||
|
d[++dIndex] = position.x; |
||||
|
d[++dIndex] = position.y; |
||||
|
} |
||||
|
|
||||
|
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', // #1225
|
||||
|
stroke: TRACKER_FILL, |
||||
|
fill: TRACKER_FILL, |
||||
|
'stroke-width': this.graphic.strokeWidth() + |
||||
|
options.snap * 2 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
controllableMixin.render.call(this); |
||||
|
|
||||
|
H.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; |
||||
@ -0,0 +1,85 @@ |
|||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
import controllableMixin from './controllableMixin.js'; |
||||
|
import ControllablePath from './ControllablePath.js'; |
||||
|
|
||||
|
/** |
||||
|
* A controllable rect class. |
||||
|
* |
||||
|
* @class |
||||
|
* @mixes Annotation.controllableMixin |
||||
|
* @memberOf Annotation |
||||
|
* |
||||
|
* @param {Highcharts.Annotation} annotation an annotation instance |
||||
|
* @param {Object} options a rect's options |
||||
|
* @param {number} index of the rectangle |
||||
|
**/ |
||||
|
function ControllableRect(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 = H.merge(ControllablePath.attrsMap, { |
||||
|
width: 'width', |
||||
|
height: 'height' |
||||
|
}); |
||||
|
|
||||
|
H.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; |
||||
@ -0,0 +1,439 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Utilities.js'; |
||||
|
import './../../parts/Tooltip.js'; |
||||
|
import ControlPoint from './../ControlPoint.js'; |
||||
|
import MockPoint from './../MockPoint.js'; |
||||
|
|
||||
|
/** |
||||
|
* It provides methods for handling points, control points |
||||
|
* and points transformations. |
||||
|
* |
||||
|
* @private |
||||
|
* @mixin |
||||
|
* @memberOf Annotation |
||||
|
*/ |
||||
|
var controllableMixin = { |
||||
|
/** |
||||
|
* Init the controllable |
||||
|
* |
||||
|
* @param {Annotation} annotation - an annotation instance |
||||
|
* @param {Object} options - options specific for controllable |
||||
|
* @param {number} index - index of the controllable element |
||||
|
**/ |
||||
|
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<PointLikeOptions>} - an array of points' options. |
||||
|
* |
||||
|
*/ |
||||
|
getPointsOptions: function () { |
||||
|
var options = this.options; |
||||
|
|
||||
|
return options.points || (options.point && H.splat(options.point)); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Utility function for mapping item's options |
||||
|
* to element's attribute |
||||
|
* |
||||
|
* @param {Object} options |
||||
|
* @return {Object} mapped options |
||||
|
**/ |
||||
|
attrsFromOptions: function (options) { |
||||
|
var map = this.constructor.attrsMap, |
||||
|
attrs = {}, |
||||
|
key, |
||||
|
mappedKey, |
||||
|
styledMode = this.chart.styledMode; |
||||
|
|
||||
|
for (key in options) { |
||||
|
mappedKey = map[key]; |
||||
|
|
||||
|
if ( |
||||
|
mappedKey && |
||||
|
( |
||||
|
!styledMode || |
||||
|
['fill', 'stroke', 'stroke-width'] |
||||
|
.indexOf(mappedKey) === -1 |
||||
|
) |
||||
|
) { |
||||
|
attrs[mappedKey] = options[key]; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return attrs; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* @typedef {Object} Annotation.controllableMixin.Position |
||||
|
* @property {number} x |
||||
|
* @property {number} y |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* An object which denotes an anchor position |
||||
|
* |
||||
|
* @typedef Annotation.controllableMixin.AnchorPosition |
||||
|
* Annotation.controllableMixin.Position |
||||
|
* @property {number} height |
||||
|
* @property {number} width |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* An object which denots a controllable's anchor positions |
||||
|
* - relative and absolute. |
||||
|
* |
||||
|
* @typedef {Object} Annotation.controllableMixin.Anchor |
||||
|
* @property {Annotation.controllableMixin.AnchorPosition} relativePosition |
||||
|
* @property {Annotation.controllableMixin.AnchorPosition} absolutePosition |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Returns object which denotes anchor position - relative and absolute. |
||||
|
* |
||||
|
* @param {Annotation.PointLike} point a point like object |
||||
|
* @return {Annotation.controllableMixin.Anchor} a controllable anchor |
||||
|
*/ |
||||
|
anchor: function (point) { |
||||
|
var plotBox = point.series.getPlotBox(), |
||||
|
|
||||
|
box = point.mock ? |
||||
|
point.toAnchor() : |
||||
|
H.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: H.merge(anchor, { |
||||
|
x: anchor.x + plotBox.translateX, |
||||
|
y: anchor.y + plotBox.translateY |
||||
|
}) |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Map point's options to a point-like object. |
||||
|
* |
||||
|
* @param {Highcharts.MockPointOptionsObject} pointOptions |
||||
|
* point's options |
||||
|
* @param {Highcharts.PointLike} point |
||||
|
* a point like instance |
||||
|
* |
||||
|
* @return {Highcharts.PointLike|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 (H.isObject(pointOptions)) { |
||||
|
point = new MockPoint( |
||||
|
this.chart, |
||||
|
this, |
||||
|
pointOptions |
||||
|
); |
||||
|
} else if (H.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 = H.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 () { |
||||
|
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} cx origin x transformation |
||||
|
* @param {number} 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} cx origin x transformation |
||||
|
* @param {number} cy origin y transformation |
||||
|
* @param {number} p1 param for the transformation |
||||
|
* @param {number} 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 = H.merge(true, this.options, newOptions), |
||||
|
parentGroup = this.graphic.parentGroup; |
||||
|
|
||||
|
this.destroy(); |
||||
|
this.constructor(annotation, options); |
||||
|
this.render(parentGroup); |
||||
|
this.redraw(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export default controllableMixin; |
||||
@ -0,0 +1,215 @@ |
|||||
|
'use strict'; |
||||
|
import H from './../../parts/Globals.js'; |
||||
|
import './../../parts/Chart.js'; |
||||
|
import './../../parts/Utilities.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> |
||||
|
* @type {Object} |
||||
|
* @sample highcharts/annotations/custom-markers/ |
||||
|
* Define a custom marker for annotations |
||||
|
* @sample highcharts/css/annotations-markers/ |
||||
|
* Define markers in a styled mode |
||||
|
* @since 6.0.0 |
||||
|
* @apioption defs |
||||
|
*/ |
||||
|
var defaultMarkers = { |
||||
|
arrow: { |
||||
|
tagName: 'marker', |
||||
|
render: false, |
||||
|
id: 'arrow', |
||||
|
refY: 5, |
||||
|
refX: 9, |
||||
|
markerWidth: 10, |
||||
|
markerHeight: 10, |
||||
|
children: [{ |
||||
|
tagName: 'path', |
||||
|
d: 'M 0 0 L 10 5 L 0 10 Z', // triangle (used as an arrow)
|
||||
|
strokeWidth: 0 |
||||
|
}] |
||||
|
}, |
||||
|
|
||||
|
'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 H.merge(attrs, child); |
||||
|
}); |
||||
|
|
||||
|
var marker = this.definition(H.merge(true, { |
||||
|
markerWidth: 20, |
||||
|
markerHeight: 20, |
||||
|
refX: 0, |
||||
|
refY: 0, |
||||
|
orient: 'auto' |
||||
|
}, markerOptions, options)); |
||||
|
|
||||
|
marker.id = id; |
||||
|
|
||||
|
return marker; |
||||
|
}; |
||||
|
|
||||
|
var createMarkerSetter = function (markerType) { |
||||
|
return function (value) { |
||||
|
this.attr(markerType, 'url(#' + value + ')'); |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @private |
||||
|
* @mixin |
||||
|
*/ |
||||
|
var markerMixin = { |
||||
|
markerEndSetter: createMarkerSetter('marker-end'), |
||||
|
markerStartSetter: createMarkerSetter('marker-start'), |
||||
|
|
||||
|
/* |
||||
|
* Set markers. |
||||
|
* |
||||
|
* @param {Controllable} item |
||||
|
*/ |
||||
|
setItemMarkers: function (item) { |
||||
|
var itemOptions = item.options, |
||||
|
chart = item.chart, |
||||
|
defs = chart.options.defs, |
||||
|
fill = itemOptions.fill, |
||||
|
color = H.defined(fill) && fill !== 'none' ? |
||||
|
fill : |
||||
|
itemOptions.stroke, |
||||
|
|
||||
|
setMarker = function (markerType) { |
||||
|
var markerId = itemOptions[markerType], |
||||
|
def, |
||||
|
predefinedMarker, |
||||
|
key, |
||||
|
marker; |
||||
|
|
||||
|
if (markerId) { |
||||
|
for (key in defs) { |
||||
|
def = defs[key]; |
||||
|
|
||||
|
if ( |
||||
|
markerId === def.id && def.tagName === 'marker' |
||||
|
) { |
||||
|
predefinedMarker = def; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (predefinedMarker) { |
||||
|
marker = item[markerType] = chart.renderer |
||||
|
.addMarker( |
||||
|
(itemOptions.id || H.uniqueKey()) + '-' + |
||||
|
predefinedMarker.id, |
||||
|
H.merge(predefinedMarker, { color: color }) |
||||
|
); |
||||
|
|
||||
|
item.attr(markerType, marker.attr('id')); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
['markerStart', 'markerEnd'].forEach(setMarker); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// In a styled mode definition is implemented
|
||||
|
H.SVGRenderer.prototype.definition = function (def) { |
||||
|
var ren = this; |
||||
|
|
||||
|
function recurse(config, parent) { |
||||
|
var ret; |
||||
|
|
||||
|
H.splat(config).forEach(function (item) { |
||||
|
var node = ren.createElement(item.tagName), |
||||
|
attr = {}; |
||||
|
|
||||
|
// Set attributes
|
||||
|
H.objectEach(item, function (val, key) { |
||||
|
if ( |
||||
|
key !== 'tagName' && |
||||
|
key !== 'children' && |
||||
|
key !== 'textContent' |
||||
|
) { |
||||
|
attr[key] = val; |
||||
|
} |
||||
|
}); |
||||
|
node.attr(attr); |
||||
|
|
||||
|
// Add to the tree
|
||||
|
node.add(parent || ren.defs); |
||||
|
|
||||
|
// Add text content
|
||||
|
if (item.textContent) { |
||||
|
node.element.appendChild( |
||||
|
H.doc.createTextNode(item.textContent) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// Recurse
|
||||
|
recurse(item.children || [], node); |
||||
|
|
||||
|
ret = node; |
||||
|
}); |
||||
|
|
||||
|
// Return last node added (on top level it's the only one)
|
||||
|
return ret; |
||||
|
} |
||||
|
return recurse(def); |
||||
|
}; |
||||
|
|
||||
|
H.addEvent(H.Chart, 'afterGetContainer', function () { |
||||
|
this.options.defs = H.merge(defaultMarkers, this.options.defs || {}); |
||||
|
|
||||
|
H.objectEach(this.options.defs, function (def) { |
||||
|
if (def.tagName === 'marker' && def.render !== false) { |
||||
|
this.renderer.addMarker(def.id, def); |
||||
|
} |
||||
|
}, this); |
||||
|
}); |
||||
|
|
||||
|
export default markerMixin; |
||||
@ -0,0 +1,283 @@ |
|||||
|
import H from '../parts/Globals.js'; |
||||
|
import '../parts/Utilities.js'; |
||||
|
|
||||
|
var fireEvent = H.fireEvent; |
||||
|
|
||||
|
/** |
||||
|
* 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; |
||||
|
|
||||
|
H.addEvent( |
||||
|
emitter.graphic.element, |
||||
|
'mousedown', |
||||
|
function (e) { |
||||
|
emitter.onMouseDown(e); |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
H.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 (H.inArray(type, emitter.nonDOMEvents || []) === -1) { |
||||
|
emitter.graphic.on(type, eventHandler); |
||||
|
} else { |
||||
|
H.addEvent(emitter, type, eventHandler); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (emitter.options.draggable) { |
||||
|
H.addEvent(emitter, 'drag', emitter.onDrag); |
||||
|
|
||||
|
if (!emitter.graphic.renderer.styledMode) { |
||||
|
emitter.graphic.css({ |
||||
|
cursor: { |
||||
|
x: 'ew-resize', |
||||
|
y: 'ns-resize', |
||||
|
xy: 'move' |
||||
|
}[emitter.options.draggable] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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. |
||||
|
* |
||||
|
* @param {Object} e event |
||||
|
*/ |
||||
|
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.stopPropagation(); |
||||
|
|
||||
|
e = pointer.normalize(e); |
||||
|
prevChartX = e.chartX; |
||||
|
prevChartY = e.chartY; |
||||
|
|
||||
|
emitter.cancelClick = false; |
||||
|
|
||||
|
emitter.removeDrag = H.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 = H.addEvent( |
||||
|
H.doc, |
||||
|
'mouseup', |
||||
|
function (e) { |
||||
|
emitter.cancelClick = emitter.hasDragged; |
||||
|
emitter.hasDragged = false; |
||||
|
// ControlPoints vs Annotation:
|
||||
|
fireEvent(H.pick(emitter.target, emitter), 'afterUpdate'); |
||||
|
emitter.onMouseUp(e); |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Mouse up handler. |
||||
|
* |
||||
|
* @param {Object} e event |
||||
|
*/ |
||||
|
onMouseUp: function () { |
||||
|
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. |
||||
|
* |
||||
|
* @param {Object} e event |
||||
|
*/ |
||||
|
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. |
||||
|
* |
||||
|
* @param {Object} e event |
||||
|
* @param {number} cx center x |
||||
|
* @param {number} cy center y |
||||
|
*/ |
||||
|
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. |
||||
|
* |
||||
|
* @param {Object} e event |
||||
|
*/ |
||||
|
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(); |
||||
|
|
||||
|
H.removeEvent(this); |
||||
|
|
||||
|
this.hcEvents = null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export default eventEmitterMixin; |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,203 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
MockPoint = Annotation.MockPoint, |
||||
|
ControlPoint = Annotation.ControlPoint; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation |
||||
|
* @memberOf Annotation |
||||
|
*/ |
||||
|
function CrookedLine() { |
||||
|
Annotation.apply(this, arguments); |
||||
|
} |
||||
|
|
||||
|
H.extendAnnotation( |
||||
|
CrookedLine, |
||||
|
null, |
||||
|
/** @lends Annotation.CrookedLine# */ |
||||
|
{ |
||||
|
/** |
||||
|
* Overrides default setter to get axes from typeOptions. |
||||
|
*/ |
||||
|
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, |
||||
|
H.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( |
||||
|
H.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; |
||||
@ -0,0 +1,77 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
CrookedLine = Annotation.types.crookedLine; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation.CrookedLine |
||||
|
* @memberOf Annotation |
||||
|
*/ |
||||
|
function ElliottWave() { |
||||
|
CrookedLine.apply(this, arguments); |
||||
|
} |
||||
|
|
||||
|
H.extendAnnotation(ElliottWave, CrookedLine, |
||||
|
/** Annotation.CrookedLine# */ |
||||
|
{ |
||||
|
addLabels: function () { |
||||
|
this.getPointsOptions().forEach(function (point, i) { |
||||
|
var label = this.initLabel(H.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; |
||||
@ -0,0 +1,247 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
MockPoint = Annotation.MockPoint, |
||||
|
Tunnel = Annotation.types.tunnel; |
||||
|
|
||||
|
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; |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation.Tunnel |
||||
|
* @memberOf Annotation |
||||
|
**/ |
||||
|
function Fibonacci() { |
||||
|
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, |
||||
|
/** @lends Annotation.Fibonacci# */ |
||||
|
{ |
||||
|
linkPoints: function () { |
||||
|
Tunnel.prototype.linkPoints.call(this); |
||||
|
|
||||
|
this.linkRetracementsPoints(); |
||||
|
}, |
||||
|
|
||||
|
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( |
||||
|
H.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<object>} |
||||
|
* @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; |
||||
@ -0,0 +1,185 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
MockPoint = Annotation.MockPoint, |
||||
|
CrookedLine = Annotation.types.crookedLine; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation.CrookedLine |
||||
|
* @memberOf Annotation |
||||
|
*/ |
||||
|
function InfinityLine() { |
||||
|
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, |
||||
|
/** @lends Annotation.InfinityLine# */ |
||||
|
{ |
||||
|
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( |
||||
|
H.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; |
||||
@ -0,0 +1,928 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
ControlPoint = Annotation.ControlPoint, |
||||
|
merge = H.merge, |
||||
|
isNumber = H.isNumber; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation |
||||
|
* @memberOf Annotation |
||||
|
*/ |
||||
|
function Measure() { |
||||
|
Annotation.apply(this, arguments); |
||||
|
} |
||||
|
|
||||
|
Annotation.types.measure = Measure; |
||||
|
|
||||
|
H.extendAnnotation(Measure, null, |
||||
|
/** @lends Annotation.Measure# */ |
||||
|
{ |
||||
|
/** |
||||
|
* Init annotation object. |
||||
|
*/ |
||||
|
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. |
||||
|
*/ |
||||
|
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. |
||||
|
* |
||||
|
* @return {Array<Highcharts.MockPointOptions>} |
||||
|
*/ |
||||
|
pointsOptions: function () { |
||||
|
return this.options.options.points; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get points configuration objects for shapes. |
||||
|
* |
||||
|
* @return {Array<Highcharts.MockPointOptions>} |
||||
|
*/ |
||||
|
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). |
||||
|
* |
||||
|
* @param {boolean} resize - the flag for resize shape |
||||
|
*/ |
||||
|
addValues: function (resize) { |
||||
|
var options = this.options.typeOptions, |
||||
|
formatter = options.label.formatter, |
||||
|
typeOptions = this.options.typeOptions, |
||||
|
chart = this.chart, |
||||
|
inverted = chart.options.chart.inverted, |
||||
|
xAxis = chart.xAxis[typeOptions.xAxis], |
||||
|
yAxis = chart.yAxis[typeOptions.yAxis]; |
||||
|
|
||||
|
// set xAxisMin, xAxisMax, yAxisMin, yAxisMax
|
||||
|
this.calculations.recalculate.call(this, resize); |
||||
|
|
||||
|
if (!options.label.enabled) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.labels.length > 0) { |
||||
|
this.labels[0].text = (formatter && formatter.call(this)) || |
||||
|
this.calculations.defaultFormatter.call(this); |
||||
|
|
||||
|
} else { |
||||
|
this.initLabel(H.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, |
||||
|
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) |
||||
|
}, options.label)); |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* Crosshair, background (rect) |
||||
|
*/ |
||||
|
addShapes: function () { |
||||
|
this.addCrosshairs(); |
||||
|
this.addBackground(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Add background shape. |
||||
|
*/ |
||||
|
addBackground: function () { |
||||
|
var shapePoints = this.shapePointsOptions(); |
||||
|
|
||||
|
if (shapePoints[0].x === undefined) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.initShape(H.extend({ |
||||
|
type: 'path', |
||||
|
points: this.shapePointsOptions() |
||||
|
}, this.options.typeOptions.background), false); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Add internal crosshair shapes (on top and bottom) |
||||
|
*/ |
||||
|
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.options.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; |
||||
|
|
||||
|
if (inverted) { |
||||
|
xAxisMin = yAxis.toPixels(this.yAxisMin); |
||||
|
xAxisMax = yAxis.toPixels(this.yAxisMax); |
||||
|
yAxisMin = xAxis.toPixels(this.xAxisMin); |
||||
|
yAxisMax = xAxis.toPixels(this.xAxisMax); |
||||
|
} |
||||
|
// 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(H.extend({ |
||||
|
d: pathH |
||||
|
}, crosshairOptionsX), false); |
||||
|
|
||||
|
this.initShape(H.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) |
||||
|
* |
||||
|
* @param {number} dx - the amount of x translation |
||||
|
* @param {number} dy - the amount of y translation |
||||
|
* @param {number} cpIndex - index of control point |
||||
|
* @param {number} 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 |
||||
|
* |
||||
|
* @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); |
||||
|
} |
||||
|
|
||||
|
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.options.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 = chart.plotTop, |
||||
|
left = 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 + chart.plotHeight); |
||||
|
} else if (selectType === 'y') { |
||||
|
this.startXMin = xAxis.toValue(left); |
||||
|
this.startXMax = xAxis.toValue(left + chart.plotWidth); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
/** |
||||
|
* 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 {Object} 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 {Boolean} 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: undefined |
||||
|
}, |
||||
|
/** |
||||
|
* 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: undefined |
||||
|
} |
||||
|
}, |
||||
|
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.options.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; |
||||
@ -0,0 +1,204 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
MockPoint = Annotation.MockPoint, |
||||
|
InfinityLine = Annotation.types.infinityLine; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Highcharts.InfinityLine |
||||
|
* @memberOf Highcharts |
||||
|
**/ |
||||
|
function Pitchfork() { |
||||
|
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( |
||||
|
H.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( |
||||
|
H.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; |
||||
@ -0,0 +1,242 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
CrookedLine = Annotation.types.crookedLine, |
||||
|
ControlPoint = Annotation.ControlPoint, |
||||
|
MockPoint = Annotation.MockPoint; |
||||
|
|
||||
|
function getSecondCoordinate(p1, p2, x) { |
||||
|
return (p2.y - p1.y) / (p2.x - p1.x) * (x - p1.x) + p1.y; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation.CrookedLine |
||||
|
* @memberOf Annotation |
||||
|
**/ |
||||
|
function Tunnel() { |
||||
|
CrookedLine.apply(this, arguments); |
||||
|
} |
||||
|
|
||||
|
H.extendAnnotation( |
||||
|
Tunnel, |
||||
|
CrookedLine, |
||||
|
/** @lends Annotation.Tunnel# */ |
||||
|
{ |
||||
|
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 = H.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, |
||||
|
H.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( |
||||
|
H.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(H.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. |
||||
|
* |
||||
|
* @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. |
||||
|
* |
||||
|
* @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; |
||||
@ -0,0 +1,158 @@ |
|||||
|
'use strict'; |
||||
|
import H from '../../parts/Globals.js'; |
||||
|
import '../../parts/Utilities.js'; |
||||
|
|
||||
|
var Annotation = H.Annotation, |
||||
|
MockPoint = Annotation.MockPoint; |
||||
|
|
||||
|
/** |
||||
|
* @class |
||||
|
* @extends Annotation |
||||
|
* @memberOf Highcharts |
||||
|
*/ |
||||
|
function VerticalLine() { |
||||
|
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, |
||||
|
|
||||
|
/** @lends Annotation.VerticalLine# */ |
||||
|
{ |
||||
|
getPointsOptions: function () { |
||||
|
return [this.options.typeOptions.point]; |
||||
|
}, |
||||
|
|
||||
|
addShapes: function () { |
||||
|
var typeOptions = this.options.typeOptions, |
||||
|
connector = this.initShape( |
||||
|
H.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( |
||||
|
H.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; |
||||
@ -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>.</p>", |
||||
|
"enduser": "<h1>Can't plot zero or subzero values on a logarithmic axis</h1><p>This error occurs in the following situations:</p><p>* If a zero or subzero data value is added to a logarithmic axis</p><p>* If the minimum of a logarithimic axis is set to 0 or less</p><p>* If the threshold is set to 0 or less</p><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>.</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 series.data 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>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: ["3", "5", "1", "6"]\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</p><p>from a XML source, and the implementer forgot to run <code>parseFloat</code></p><p>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</p><p>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</p><p>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 (`#FFFFFF`), rgb (<code>rgba(255,255,255)</code>) and rgba (<code>rgba(255,255,255,1)</code>). If any other format, like 3-digit colors (`#FFF`), named colors (<code>white</code>) or gradient structures are used in for example a heatmap, Highcharts will fail to interpolate and will</p><p>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</p><p>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</p><p>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><!--[if lt IE 9]>\n <script src='https://code.highcharts.com/modules/oldie.js'></script>\n<![endif]--></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</p><p>export successfully, and the fallback to the online export server is disabled. The offline exporting module will fail for certain browsers, and certain</p><p>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" |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1 @@ |
|||||
|
console.error('code.highcharts.local has moved to the /code folder'); // eslint-disable-line no-console
|
||||
@ -0,0 +1,19 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/highcharts-3d |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* 3D features for Highcharts JS |
||||
|
* |
||||
|
* @license: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../parts-3d/Math.js'; |
||||
|
import '../parts-3d/SVGRenderer.js'; |
||||
|
import '../parts-3d/Chart.js'; |
||||
|
import '../parts-3d/Axis.js'; |
||||
|
import '../parts-3d/Series.js'; |
||||
|
import '../parts-3d/Column.js'; |
||||
|
import '../parts-3d/Pie.js'; |
||||
|
import '../parts-3d/Scatter.js'; |
||||
|
import '../parts-3d/VMLRenderer.js'; |
||||
@ -0,0 +1,24 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/highcharts-more |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* (c) 2009-2018 Torstein Honsi |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../parts-more/Pane.js'; |
||||
|
import '../parts-more/RadialAxis.js'; |
||||
|
import '../parts-more/AreaRangeSeries.js'; |
||||
|
import '../parts-more/AreaSplineRangeSeries.js'; |
||||
|
import '../parts-more/ColumnRangeSeries.js'; |
||||
|
import '../parts-more/ColumnPyramidSeries.js'; |
||||
|
import '../parts-more/GaugeSeries.js'; |
||||
|
import '../parts-more/BoxPlotSeries.js'; |
||||
|
import '../parts-more/ErrorBarSeries.js'; |
||||
|
import '../parts-more/WaterfallSeries.js'; |
||||
|
import '../parts-more/PolygonSeries.js'; |
||||
|
import '../parts-more/BubbleSeries.js'; |
||||
|
import '../parts-more/PackedBubbleSeries.js'; |
||||
|
import '../parts-more/Polar.js'; |
||||
@ -0,0 +1,37 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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/TouchPointer.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; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,23 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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/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'; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/boost |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* Boost module |
||||
|
* |
||||
|
* (c) 2010-2019 Highsoft AS |
||||
|
* Author: Torstein Honsi |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../modules/boost/boost.js'; |
||||
@ -0,0 +1,11 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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; |
||||
@ -0,0 +1,16 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,11 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/drilldown |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* Highcharts Drilldown module |
||||
|
* |
||||
|
* Author: Torstein Honsi |
||||
|
* License: www.highcharts.com/license |
||||
|
* |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../modules/drilldown.src.js'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,17 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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/ColorSeriesMixin.js'; |
||||
|
import '../../parts-map/HeatmapSeries.js'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* 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'; |
||||
@ -0,0 +1,11 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/pathfinder |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* Pathfinder |
||||
|
* |
||||
|
* (c) 2016-2019 Øystein Moseng |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../parts-gantt/Pathfinder.js'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,16 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,11 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/series-label |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* (c) 2009-2019 Torstein Honsi |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../modules/series-label.src.js'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/solid-gauge |
||||
|
* @requires highcharts |
||||
|
* @requires highcharts/highcharts-more |
||||
|
* |
||||
|
* Solid angular gauge module |
||||
|
* |
||||
|
* (c) 2010-2019 Torstein Honsi |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../modules/solid-gauge.src.js'; |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,16 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,22 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/stock |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* Highstock as a plugin for Highcharts |
||||
|
* |
||||
|
* (c) 2010-2019 Torstein Honsi |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../parts/OrdinalAxis.js'; |
||||
|
import './broken-axis.src.js'; |
||||
|
import '../../parts/DataGrouping.js'; |
||||
|
import '../../parts/OHLCSeries.js'; |
||||
|
import '../../parts/CandlestickSeries.js'; |
||||
|
import '../../parts/FlagsSeries.js'; |
||||
|
import '../../parts/Scrollbar.js'; |
||||
|
import '../../parts/Navigator.js'; |
||||
|
import '../../parts/RangeSelector.js'; |
||||
|
import '../../parts/StockChart.js'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,12 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @module highcharts/modules/treegrid |
||||
|
* @requires highcharts |
||||
|
* |
||||
|
* Tree Grid |
||||
|
* |
||||
|
* (c) 2016-2019 Jon Arild Nygard |
||||
|
* |
||||
|
* License: www.highcharts.com/license |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
import '../../parts-gantt/TreeGrid.js'; |
||||
@ -0,0 +1,12 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
@ -0,0 +1,13 @@ |
|||||
|
/** |
||||
|
* @license @product.name@ JS v@product.version@ (@product.date@) |
||||
|
* @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'; |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue