initial commit
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
.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%;
|
||||
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.0.3/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.0.3/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.0.3/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,235 @@
|
||||
$version: "7.0.3";
|
||||
|
||||
// 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%;
|
||||
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,890 @@
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
|
||||
.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,788 @@
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
.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.0.3/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.0.3/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.0.3/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.0.3/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.0.3/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.0.3";
|
||||
|
||||
// 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,951 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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,904 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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,920 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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,130 @@
|
||||
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
|
||||
);
|
||||
|
||||
/**
|
||||
* 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,415 @@
|
||||
import H from '../parts/Globals.js';
|
||||
import '../parts/Axis.js';
|
||||
import '../parts/Series.js';
|
||||
|
||||
/**
|
||||
* A point-like object, a mock point or a point uses in series.
|
||||
*
|
||||
* @typedef {Highcharts.Point | Annotation.MockPoint} Annotation.PointLike
|
||||
*/
|
||||
|
||||
/**
|
||||
* A mock point configuration.
|
||||
*
|
||||
* @typedef {Object} Annotation.MockPoint.Options
|
||||
* @property {number} x x value for the point in xAxis scale or pixels
|
||||
* @property {number} y y value for the point in yAxis scale or pixels
|
||||
* @property {string|number|Highcharts.Axis} [xAxis] xAxis instance, index or id
|
||||
* @property {string|number|Highcharts.Axis} [yAxis] yAxis instance, index or id
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
* @class
|
||||
* @memberOf Annotation
|
||||
*
|
||||
* @param {Chart} chart a chart instance
|
||||
* @param {Controllable} [target] a controllable instance
|
||||
* @param {Annotation.MockPoint.Options} options an 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 {Annotation.MockPoint.Options}
|
||||
*/
|
||||
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
Load Diff
+92
@@ -0,0 +1,92 @@
|
||||
'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',
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
translate: function (dx, dy) {
|
||||
var annotationOptions = this.annotation.userOptions,
|
||||
shapeOptions = annotationOptions[this.collection][this.index];
|
||||
|
||||
this.translatePoint(dx, dy, 0);
|
||||
|
||||
// Options stored in chart:
|
||||
shapeOptions.point = this.options.point;
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the radius.
|
||||
*
|
||||
* @param {number} r a radius to be set
|
||||
*/
|
||||
setRadius: function (r) {
|
||||
this.options.r = r;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default ControllableCircle;
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
'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',
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
translate: function (dx, dy) {
|
||||
var annotationOptions = this.annotation.userOptions,
|
||||
shapeOptions = annotationOptions[this.collection][this.index];
|
||||
|
||||
this.translatePoint(dx, dy, 0);
|
||||
|
||||
// Options stored in chart:
|
||||
shapeOptions.point = this.options.point;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default ControllableImage;
|
||||
+452
@@ -0,0 +1,452 @@
|
||||
'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';
|
||||
|
||||
/**
|
||||
* A controllable label class.
|
||||
*
|
||||
* @class
|
||||
* @mixes Annotation.controllableMixin
|
||||
* @memberOf Annotation
|
||||
*
|
||||
* @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 annotationOptions = this.annotation.userOptions,
|
||||
labelOptions = annotationOptions[this.collection][this.index];
|
||||
|
||||
// Local options:
|
||||
this.options.x += dx;
|
||||
this.options.y += dy;
|
||||
|
||||
// Options stored in chart:
|
||||
labelOptions.x = this.options.x;
|
||||
labelOptions.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,
|
||||
-9e9,
|
||||
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: -9e9
|
||||
});
|
||||
}
|
||||
|
||||
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 {Annotation.controllableMixin.Anchor} anchor
|
||||
* @return {Annotation.controllableMixin.Position|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
|
||||
*/
|
||||
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;
|
||||
+175
@@ -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,93 @@
|
||||
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',
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
translate: function (dx, dy) {
|
||||
var annotationOptions = this.annotation.userOptions,
|
||||
shapeOptions = annotationOptions[this.collection][this.index];
|
||||
|
||||
this.translatePoint(dx, dy, 0);
|
||||
|
||||
// Options stored in chart:
|
||||
shapeOptions.point = this.options.point;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default ControllableRect;
|
||||
+411
@@ -0,0 +1,411 @@
|
||||
'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.
|
||||
*
|
||||
* @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 {Annotation.MockPoint.Options} pointOptions point's options
|
||||
* @param {Annotation.PointLike} point a point like instance
|
||||
* @return {Annotation.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);
|
||||
},
|
||||
|
||||
/**
|
||||
* 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,214 @@
|
||||
'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 + ')');
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @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,271 @@
|
||||
import H from '../parts/Globals.js';
|
||||
import '../parts/Utilities.js';
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @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 (type !== 'drag') {
|
||||
emitter.graphic.on(type, eventHandler);
|
||||
} else {
|
||||
H.addEvent(emitter, 'drag', 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]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
// 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;
|
||||
|
||||
H.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;
|
||||
|
||||
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
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,191 @@
|
||||
'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.
|
||||
*
|
||||
* @excluding labels, shapes
|
||||
* @sample highcharts/annotations-advanced/crooked-line/
|
||||
* Crooked line
|
||||
* @product highstock
|
||||
* @optionparent annotations.crookedLine
|
||||
*/
|
||||
{
|
||||
/**
|
||||
* 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<Object>}
|
||||
* @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.
|
||||
*
|
||||
* @type {Object}
|
||||
* @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,76 @@
|
||||
'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.
|
||||
*
|
||||
* @extends annotations.crookedLine
|
||||
* @sample highcharts/annotations-advanced/elliott-wave/
|
||||
* Elliott wave
|
||||
* @product highstock
|
||||
* @optionparent annotations.elliottWave
|
||||
*/
|
||||
{
|
||||
typeOptions: {
|
||||
/**
|
||||
* @type {Object}
|
||||
* @extends annotations.crookedLine.labelOptions
|
||||
* @apioption annotations.crookedLine.typeOptions.points.label
|
||||
*/
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
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.
|
||||
*
|
||||
* @extends annotations.crookedLine
|
||||
* @sample highcharts/annotations-advanced/fibonacci/
|
||||
* Fibonacci
|
||||
*
|
||||
* @product highstock
|
||||
* @optionparent annotations.fibonacci
|
||||
*/
|
||||
{
|
||||
typeOptions: {
|
||||
/**
|
||||
* The height of the fibonacci in terms of yAxis.
|
||||
*/
|
||||
height: 2,
|
||||
|
||||
/**
|
||||
* An array of background colors:
|
||||
* Default to:
|
||||
* <pre>
|
||||
[
|
||||
'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)'
|
||||
]
|
||||
</pre>
|
||||
*/
|
||||
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.
|
||||
*
|
||||
* @extends annotations.crookedLine
|
||||
* @sample highcharts/annotations-advanced/infinity-line/
|
||||
* Infinity Line
|
||||
*
|
||||
* @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));
|
||||
}
|
||||
},
|
||||
/**
|
||||
* add shapes - 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
|
||||
*/
|
||||
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).
|
||||
*
|
||||
* @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).
|
||||
*
|
||||
* @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)
|
||||
*
|
||||
* @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
|
||||
*/
|
||||
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
|
||||
*/
|
||||
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)
|
||||
*/
|
||||
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.DashStyleType}
|
||||
* @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.DashStyleType}
|
||||
* @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,203 @@
|
||||
'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.
|
||||
*
|
||||
* @extends annotations.infinityLine
|
||||
* @sample highcharts/annotations-advanced/pitchfork/
|
||||
* Pitchfork
|
||||
* @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,157 @@
|
||||
'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.
|
||||
*
|
||||
* @extends annotations.crookedLine
|
||||
* @excluding labels, shapes, controlPointOptions
|
||||
* @sample highcharts/annotations-advanced/vertical-line/
|
||||
* Vertical line
|
||||
* @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,128 @@
|
||||
/* 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>"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
console.error('code.highcharts.local has moved to the /code folder'); // eslint-disable-line no-console
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* 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,22 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (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,36 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (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,13 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Accessibility module
|
||||
*
|
||||
* (c) 2010-2019 Highsoft AS
|
||||
* Author: Oystein Moseng
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/a11y-i18n.src.js';
|
||||
import '../../modules/screen-reader.src.js';
|
||||
import '../../modules/keyboard-navigation.src.js';
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,12 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Arrow Symbols
|
||||
*
|
||||
* (c) 2017-2019 Lars A. V. Cabrera
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../parts-gantt/ArrowSymbols.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Boost module
|
||||
*
|
||||
* (c) 2010-2019 Highsoft AS
|
||||
* Author: Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/boost.src.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/broken-axis.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* Bullet graph series type for Highcharts
|
||||
*
|
||||
* (c) 2010-2019 Kacper Madej
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/bullet.src.js';
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* CurrentDateIndicator
|
||||
*
|
||||
* (c) 2010-2019 Lars A. V. Cabrera
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../parts-gantt/CurrentDateIndicator.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Highcharts cylinder module
|
||||
*
|
||||
* (c) 2010-2019 Kacper Madej
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/cylinder.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Data module
|
||||
*
|
||||
* (c) 2012-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/data.src.js';
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* 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,13 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Dependency wheel module
|
||||
*
|
||||
* (c) 2010-2018 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/dependency-wheel.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/draggable-points.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Highcharts Drilldown module
|
||||
*
|
||||
* Author: Torstein Honsi
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/drilldown.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Exporting module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/export-data.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Exporting module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/exporting.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Highcharts funnel module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/funnel.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* GridAxis
|
||||
*
|
||||
* (c) 2016-2019 Lars A. V. Cabrera
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../parts-gantt/GridAxis.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* Item series type for Highcharts
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/item-series.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/overlapping-datalabels.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Pathfinder
|
||||
*
|
||||
* (c) 2016-2019 Øystein Moseng
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../parts-gantt/Pathfinder.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Sankey diagram module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/sankey.src.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/series-label.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,12 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Sonification module
|
||||
*
|
||||
* (c) 2012-2019 Øystein Moseng
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import '../../modules/sonification/sonification.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,12 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,19 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Streamgraph module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/streamgraph.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2016-2019 Highsoft AS
|
||||
* Authors: Jon Arild Nygard
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/sunburst.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Tilemap module
|
||||
*
|
||||
* (c) 2010-2019 Highsoft AS
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/tilemap.src.js';
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Tree Grid
|
||||
*
|
||||
* (c) 2016-2019 Jon Arild Nygard
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../parts-gantt/TreeGrid.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (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,11 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* 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,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Highcharts variwide module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/variwide.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Vector plot series module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/vector.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2017-2019 Highsoft AS
|
||||
* Authors: Jon Arild Nygard
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/venn.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* Wind barb series module
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/windbarb.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2016-2019 Highsoft AS
|
||||
* Authors: Jon Arild Nygard
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/wordcloud.src.js';
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
* X-range series
|
||||
*
|
||||
* (c) 2010-2019 Torstein Honsi, Lars A. V. Cabrera
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../modules/xrange.src.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Highsoft AS
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../themes/avocado.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Highsoft AS
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../themes/avocado.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../themes/dark-blue.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../themes/dark-green.js';
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license @product.name@ JS v@product.version@ (@product.date@)
|
||||
*
|
||||
* (c) 2009-2019 Torstein Honsi
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*/
|
||||
'use strict';
|
||||
import '../../themes/dark-unica.js';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user