@ -22,6 +22,8 @@ import 'flot/src/jquery.flot';
import 'flot/src/plugins/jquery.flot.time' ;
import 'flot/src/plugins/jquery.flot.selection' ;
import 'flot/src/plugins/jquery.flot.pie' ;
import 'flot/src/plugins/jquery.flot.crosshair' ;
import 'flot/src/plugins/jquery.flot.stack' ;
/* eslint-disable angular/angularelement */
export default class TbFlot {
@ -38,8 +40,8 @@ export default class TbFlot {
var keySettings = series . dataKey . settings ;
series . lines = {
fill : keySettings . fillLines || fals e,
show : keySettings . showLines || true
fill : keySettings . fillLines === tru e,
show : this . chartType === 'line' ? keySettings . showLines !== false : keySettings . showLines === true
} ;
series . points = {
@ -58,36 +60,34 @@ export default class TbFlot {
series . highlightColor = lineColor . toRgbString ( ) ;
}
var tbFlot = this ;
ctx . tooltip = $ ( '#flot-series-tooltip' ) ;
if ( ctx . tooltip . length === 0 ) {
ctx . tooltip = $ ( "<div id=flot-series-tooltip' class='flot-mouse-value'></div>" ) ;
ctx . tooltip . css ( {
fontSize : "12px" ,
fontFamily : "Roboto" ,
lineHeight : "24px" ,
fontWeight : "300" ,
lineHeight : "18px" ,
opacity : "1" ,
backgroundColor : "rgba(0,0,0,0.7)" ,
color : "#fff " ,
color : "#D9DADB " ,
position : "absolute" ,
display : "none" ,
zIndex : "100" ,
padding : "2px 8 px" ,
padding : "4px 10 px" ,
borderRadius : "4px"
} ) . appendTo ( "body" ) ;
}
ctx . tooltipFormatter = function ( item ) {
var label = item . series . label ;
var color = item . series . color ;
var content = '' ;
if ( tbFlot . chartType === 'line' ) {
var timestamp = parseInt ( item . datapoint [ 0 ] ) ;
var date = moment ( timestamp ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ;
content += '<b>' + date + '</b></br>' ;
}
var tbFlot = this ;
function seriesInfoDiv ( label , color , value , units , trackDecimals , active , percent ) {
var divElement = $ ( '<div></div>' ) ;
divElement . css ( {
display : "flex" ,
alignItems : "center" ,
justifyContent : "center"
} ) ;
var lineSpan = $ ( '<span></span>' ) ;
lineSpan . css ( {
backgroundColor : color ,
@ -97,27 +97,76 @@ export default class TbFlot {
verticalAlign : "middle" ,
marginRight : "5px"
} ) ;
content += lineSpan . prop ( 'outerHTML' ) ;
divElement . append ( lineSpan ) ;
var labelSpan = $ ( '<span>' + label + ':</span>' ) ;
labelSpan . css ( {
marginRight : "10px"
} ) ;
content += labelSpan . prop ( 'outerHTML' ) ;
var value = tbFlot . chartType === 'line' ? item . datapoint [ 1 ] : item . datapoint [ 1 ] [ 0 ] [ 1 ] ;
content += ' <b>' + value . toFixed ( ctx . trackDecimals ) ;
if ( settings . units ) {
content += ' ' + settings . units ;
if ( active ) {
labelSpan . css ( {
color : "#FFF" ,
fontWeight : "700"
} ) ;
}
if ( tbFlot . chartType === 'pie' ) {
content += ' (' + Math . round ( item . series . percent ) + ' %)' ;
divElement . append ( labelSpan ) ;
var valueContent = value . toFixed ( trackDecimals ) ;
if ( units ) {
valueContent += ' ' + units ;
}
content += '</b>' ;
return content ;
} ;
if ( angular . isNumber ( percent ) ) {
valueContent += ' (' + Math . round ( percent ) + ' %)' ;
}
var valueSpan = $ ( '<span>' + valueContent + '</span>' ) ;
valueSpan . css ( {
marginLeft : "auto" ,
fontWeight : "700"
} ) ;
if ( active ) {
valueSpan . css ( {
color : "#FFF"
} ) ;
}
divElement . append ( valueSpan ) ;
return divElement ;
}
if ( this . chartType === 'pie' ) {
ctx . tooltipFormatter = function ( item ) {
var divElement = seriesInfoDiv ( item . series . label , item . series . color ,
item . datapoint [ 1 ] [ 0 ] [ 1 ] , tbFlot . ctx . settings . units , tbFlot . ctx . trackDecimals , true , item . series . percent ) ;
return divElement . prop ( 'outerHTML' ) ;
} ;
} else {
ctx . tooltipFormatter = function ( hoverInfo , seriesIndex ) {
var content = '' ;
var timestamp = parseInt ( hoverInfo . time ) ;
var date = moment ( timestamp ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ;
var dateDiv = $ ( '<div>' + date + '</div>' ) ;
dateDiv . css ( {
display : "flex" ,
alignItems : "center" ,
justifyContent : "center" ,
padding : "4px" ,
fontWeight : "700"
} ) ;
content += dateDiv . prop ( 'outerHTML' ) ;
for ( var i in hoverInfo . seriesHover ) {
var seriesHoverInfo = hoverInfo . seriesHover [ i ] ;
if ( tbFlot . ctx . tooltipIndividual && seriesHoverInfo . index !== seriesIndex ) {
continue ;
}
var divElement = seriesInfoDiv ( seriesHoverInfo . label , seriesHoverInfo . color ,
seriesHoverInfo . value , tbFlot . ctx . settings . units , tbFlot . ctx . trackDecimals , seriesHoverInfo . index === seriesIndex ) ;
content += divElement . prop ( 'outerHTML' ) ;
}
return content ;
} ;
}
var settings = ctx . settings ;
ctx . trackDecimals = angular . isDefined ( settings . decimals ) ? settings . decimals : 1 ;
ctx . tooltipIndividual = this . chartType === 'pie' || ( angular . isDefined ( settings . tooltipIndividual ) ? settings . tooltipIndividual : false ) ;
var font = {
color : settings . fontColor || "#545454" ,
@ -134,7 +183,7 @@ export default class TbFlot {
grid : {
hoverable : true ,
mouseActiveRadius : 10 ,
autoHighlight : true
autoHighlight : ctx . tooltipIndividual === true
} ,
selection : { mode : ctx . isMobile ? null : 'x' } ,
legend : {
@ -155,7 +204,7 @@ export default class TbFlot {
settings . legend . backgroundOpacity : 0.85 ;
}
if ( this . chartType === 'line' ) {
if ( this . chartType === 'line' || this . chartType === 'bar' ) {
options . xaxis = {
mode : 'time' ,
timezone : 'browser' ,
@ -208,6 +257,28 @@ export default class TbFlot {
}
}
options . crosshair = {
mode : 'x'
}
options . series = {
stack : settings . stack === true
}
if ( this . chartType === 'bar' ) {
options . series . lines = {
show : false ,
fill : false ,
steps : false
}
options . series . bars = {
show : true ,
barWidth : ctx . timeWindow . interval * 0.6 ,
lineWidth : 0 ,
fill : 0.9
}
}
options . xaxis . min = ctx . timeWindow . minTime ;
options . xaxis . max = ctx . timeWindow . maxTime ;
} else if ( this . chartType === 'pie' ) {
@ -271,11 +342,12 @@ export default class TbFlot {
update ( ) {
if ( ! this . isMouseInteraction ) {
if ( this . chartType === 'line' ) {
if ( this . chartType === 'line' || this . chartType === 'bar' ) {
this . ctx . plot . getOptions ( ) . xaxes [ 0 ] . min = this . ctx . timeWindow . minTime ;
this . ctx . plot . getOptions ( ) . xaxes [ 0 ] . max = this . ctx . timeWindow . maxTime ;
}
if ( this . chartType === 'line' ) {
if ( this . chartType === 'bar' ) {
this . ctx . plot . getOptions ( ) . series . bars . barWidth = this . ctx . timeWindow . interval * 0.6 ;
}
this . ctx . plot . setData ( this . ctx . data ) ;
this . ctx . plot . setupGrid ( ) ;
this . ctx . plot . draw ( ) ;
@ -290,75 +362,475 @@ export default class TbFlot {
}
}
pieDataRendered ( ) {
for ( var i in this . ctx . pieTargetData ) {
var value = this . ctx . pieTargetData [ i ] ? this . ctx . pieTargetData [ i ] : 0 ;
this . ctx . pieRenderedData [ i ] = value ;
if ( ! this . ctx . pieData [ i ] . data [ 0 ] ) {
this . ctx . pieData [ i ] . data [ 0 ] = [ 0 , 0 ] ;
}
this . ctx . pieData [ i ] . data [ 0 ] [ 1 ] = value ;
resize ( ) {
this . ctx . plot . resize ( ) ;
if ( this . chartType !== 'pie' ) {
this . ctx . plot . setupGrid ( ) ;
}
this . ctx . plot . draw ( ) ;
}
nextPieDataAnimation ( start ) {
if ( start ) {
this . finishPieDataAnimation ( ) ;
this . ctx . pieAnimationStartTime = this . ctx . pieAnimationLastTime = Date . now ( ) ;
for ( var i in this . ctx . data ) {
this . ctx . pieTargetData [ i ] = ( this . ctx . data [ i ] . data && this . ctx . data [ i ] . data [ 0 ] )
? this . ctx . data [ i ] . data [ 0 ] [ 1 ] : 0 ;
}
}
if ( this . ctx . pieAnimationCaf ) {
this . ctx . pieAnimationCaf ( ) ;
this . ctx . pieAnimationCaf = null ;
static get pieSettingsSchema ( ) {
return {
"schema" : {
"type" : "object" ,
"title" : "Settings" ,
"properties" : {
"radius" : {
"title" : "Radius" ,
"type" : "number" ,
"default" : 1
} ,
"innerRadius" : {
"title" : "Inner radius" ,
"type" : "number" ,
"default" : 0
} ,
"tilt" : {
"title" : "Tilt" ,
"type" : "number" ,
"default" : 1
} ,
"animatedPie" : {
"title" : "Enable pie animation (experimental)" ,
"type" : "boolean" ,
"default" : false
} ,
"stroke" : {
"title" : "Stroke" ,
"type" : "object" ,
"properties" : {
"color" : {
"title" : "Color" ,
"type" : "string" ,
"default" : ""
} ,
"width" : {
"title" : "Width (pixels)" ,
"type" : "number" ,
"default" : 0
}
}
} ,
"showLabels" : {
"title" : "Show labels" ,
"type" : "boolean" ,
"default" : false
} ,
"fontColor" : {
"title" : "Font color" ,
"type" : "string" ,
"default" : "#545454"
} ,
"fontSize" : {
"title" : "Font size" ,
"type" : "number" ,
"default" : 10
} ,
"decimals" : {
"title" : "Number of digits after floating point" ,
"type" : "number" ,
"default" : 1
} ,
"units" : {
"title" : "Special symbol to show next to value" ,
"type" : "string" ,
"default" : ""
} ,
"legend" : {
"title" : "Legend settings" ,
"type" : "object" ,
"properties" : {
"show" : {
"title" : "Show legend" ,
"type" : "boolean" ,
"default" : true
} ,
"position" : {
"title" : "Position" ,
"type" : "string" ,
"default" : "nw"
} ,
"labelBoxBorderColor" : {
"title" : "Label box border color" ,
"type" : "string" ,
"default" : "#CCCCCC"
} ,
"backgroundColor" : {
"title" : "Background color" ,
"type" : "string" ,
"default" : "#F0F0F0"
} ,
"backgroundOpacity" : {
"title" : "Background opacity" ,
"type" : "number" ,
"default" : 0.85
}
}
}
} ,
"required" : [ ]
} ,
"form" : [
"radius" ,
"innerRadius" ,
"animatedPie" ,
"tilt" ,
{
"key" : "stroke" ,
"items" : [
{
"key" : "stroke.color" ,
"type" : "color"
} ,
"stroke.width"
]
} ,
"showLabels" ,
{
"key" : "fontColor" ,
"type" : "color"
} ,
"fontSize" ,
"decimals" ,
"units" ,
{
"key" : "legend" ,
"items" : [
"legend.show" ,
{
"key" : "legend.position" ,
"type" : "rc-select" ,
"multiple" : false ,
"items" : [
{
"value" : "nw" ,
"label" : "North-west"
} ,
{
"value" : "ne" ,
"label" : "North-east"
} ,
{
"value" : "sw" ,
"label" : "South-west"
} ,
{
"value" : "se" ,
"label" : "Soth-east"
}
]
} ,
{
"key" : "legend.labelBoxBorderColor" ,
"type" : "color"
} ,
{
"key" : "legend.backgroundColor" ,
"type" : "color"
} ,
"legend.backgroundOpacity"
]
}
]
}
var self = this ;
this . ctx . pieAnimationCaf = this . ctx . $scope . tbRaf (
function ( ) {
self . onPieDataAnimation ( ) ;
}
) ;
}
onPieDataAnimation ( ) {
var time = Date . now ( ) ;
var elapsed = time - this . ctx . pieAnimationLastTime ; //this.ctx.pieAnimationStartTime;
var progress = ( time - this . ctx . pieAnimationStartTime ) / this . ctx . pieDataAnimationDuration ;
if ( progress >= 1 ) {
this . finishPieDataAnimation ( ) ;
} else {
if ( elapsed >= 40 ) {
for ( var i in this . ctx . pieTargetData ) {
var prevValue = this . ctx . pieRenderedData [ i ] ;
var targetValue = this . ctx . pieTargetData [ i ] ;
var value = prevValue + ( targetValue - prevValue ) * progress ;
if ( ! this . ctx . pieData [ i ] . data [ 0 ] ) {
this . ctx . pieData [ i ] . data [ 0 ] = [ 0 , 0 ] ;
static get settingsSchema ( ) {
return {
"schema" : {
"type" : "object" ,
"title" : "Settings" ,
"properties" : {
"stack" : {
"title" : "Stacking" ,
"type" : "boolean" ,
"default" : false
} ,
"shadowSize" : {
"title" : "Shadow size" ,
"type" : "number" ,
"default" : 4
} ,
"fontColor" : {
"title" : "Font color" ,
"type" : "string" ,
"default" : "#545454"
} ,
"fontSize" : {
"title" : "Font size" ,
"type" : "number" ,
"default" : 10
} ,
"decimals" : {
"title" : "Number of digits after floating point" ,
"type" : "number" ,
"default" : 1
} ,
"units" : {
"title" : "Special symbol to show next to value" ,
"type" : "string" ,
"default" : ""
} ,
"tooltipIndividual" : {
"title" : "Hover individual points" ,
"type" : "boolean" ,
"default" : false
} ,
"grid" : {
"title" : "Grid settings" ,
"type" : "object" ,
"properties" : {
"color" : {
"title" : "Primary color" ,
"type" : "string" ,
"default" : "#545454"
} ,
"backgroundColor" : {
"title" : "Background color" ,
"type" : "string" ,
"default" : null
} ,
"tickColor" : {
"title" : "Ticks color" ,
"type" : "string" ,
"default" : "#DDDDDD"
} ,
"outlineWidth" : {
"title" : "Grid outline/border width (px)" ,
"type" : "number" ,
"default" : 1
} ,
"verticalLines" : {
"title" : "Show vertical lines" ,
"type" : "boolean" ,
"default" : true
} ,
"horizontalLines" : {
"title" : "Show horizontal lines" ,
"type" : "boolean" ,
"default" : true
}
}
} ,
"legend" : {
"title" : "Legend settings" ,
"type" : "object" ,
"properties" : {
"show" : {
"title" : "Show legend" ,
"type" : "boolean" ,
"default" : true
} ,
"position" : {
"title" : "Position" ,
"type" : "string" ,
"default" : "nw"
} ,
"labelBoxBorderColor" : {
"title" : "Label box border color" ,
"type" : "string" ,
"default" : "#CCCCCC"
} ,
"backgroundColor" : {
"title" : "Background color" ,
"type" : "string" ,
"default" : "#F0F0F0"
} ,
"backgroundOpacity" : {
"title" : "Background opacity" ,
"type" : "number" ,
"default" : 0.85
}
}
} ,
"xaxis" : {
"title" : "X axis settings" ,
"type" : "object" ,
"properties" : {
"showLabels" : {
"title" : "Show labels" ,
"type" : "boolean" ,
"default" : true
} ,
"title" : {
"title" : "Axis title" ,
"type" : "string" ,
"default" : null
} ,
"titleAngle" : {
"title" : "Axis title's angle in degrees" ,
"type" : "number" ,
"default" : 0
} ,
"color" : {
"title" : "Ticks color" ,
"type" : "string" ,
"default" : null
}
}
} ,
"yaxis" : {
"title" : "Y axis settings" ,
"type" : "object" ,
"properties" : {
"showLabels" : {
"title" : "Show labels" ,
"type" : "boolean" ,
"default" : true
} ,
"title" : {
"title" : "Axis title" ,
"type" : "string" ,
"default" : null
} ,
"titleAngle" : {
"title" : "Axis title's angle in degrees" ,
"type" : "number" ,
"default" : 0
} ,
"color" : {
"title" : "Ticks color" ,
"type" : "string" ,
"default" : null
}
}
}
this . ctx . pieData [ i ] . data [ 0 ] [ 1 ] = value ;
} ,
"required" : [ ]
} ,
"form" : [
"stack" ,
"shadowSize" ,
{
"key" : "fontColor" ,
"type" : "color"
} ,
"fontSize" ,
"decimals" ,
"units" ,
"tooltipIndividual" ,
{
"key" : "grid" ,
"items" : [
{
"key" : "grid.color" ,
"type" : "color"
} ,
{
"key" : "grid.backgroundColor" ,
"type" : "color"
} ,
{
"key" : "grid.tickColor" ,
"type" : "color"
} ,
"grid.outlineWidth" ,
"grid.verticalLines" ,
"grid.horizontalLines"
]
} ,
{
"key" : "legend" ,
"items" : [
"legend.show" ,
{
"key" : "legend.position" ,
"type" : "rc-select" ,
"multiple" : false ,
"items" : [
{
"value" : "nw" ,
"label" : "North-west"
} ,
{
"value" : "ne" ,
"label" : "North-east"
} ,
{
"value" : "sw" ,
"label" : "South-west"
} ,
{
"value" : "se" ,
"label" : "Soth-east"
}
]
} ,
{
"key" : "legend.labelBoxBorderColor" ,
"type" : "color"
} ,
{
"key" : "legend.backgroundColor" ,
"type" : "color"
} ,
"legend.backgroundOpacity"
]
} ,
{
"key" : "xaxis" ,
"items" : [
"xaxis.showLabels" ,
"xaxis.title" ,
"xaxis.titleAngle" ,
{
"key" : "xaxis.color" ,
"type" : "color"
}
]
} ,
{
"key" : "yaxis" ,
"items" : [
"yaxis.showLabels" ,
"yaxis.title" ,
"yaxis.titleAngle" ,
{
"key" : "yaxis.color" ,
"type" : "color"
}
]
}
this . ctx . plot . setData ( this . ctx . pieData ) ;
this . ctx . plot . draw ( ) ;
this . ctx . pieAnimationLastTime = time ;
}
this . nextPieDataAnimation ( false ) ;
]
}
}
finishPieDataAnimation ( ) {
this . pieDataRendered ( ) ;
this . ctx . plot . setData ( this . ctx . pieData ) ;
this . ctx . plot . draw ( ) ;
static get pieDatakeySettingsSchema ( ) {
return { }
}
resize ( ) {
this . ctx . plot . resize ( ) ;
if ( this . chartType === 'line' ) {
this . ctx . plot . setupGrid ( ) ;
static datakeySettingsSchema ( defaultShowLines ) {
return {
"schema" : {
"type" : "object" ,
"title" : "DataKeySettings" ,
"properties" : {
"showLines" : {
"title" : "Show lines" ,
"type" : "boolean" ,
"default" : defaultShowLines
} ,
"fillLines" : {
"title" : "Fill lines" ,
"type" : "boolean" ,
"default" : false
} ,
"showPoints" : {
"title" : "Show points" ,
"type" : "boolean" ,
"default" : false
}
} ,
"required" : [ "showLines" , "fillLines" , "showPoints" ]
} ,
"form" : [
"showLines" ,
"fillLines" ,
"showPoints"
]
}
this . ctx . plot . draw ( ) ;
}
checkMouseEvents ( ) {
@ -378,24 +850,58 @@ export default class TbFlot {
if ( ! this . flotHoverHandler ) {
this . flotHoverHandler = function ( event , pos , item ) {
if ( item ) {
var pageX = item . pageX || pos . pageX ;
var pageY = item . pageY || pos . pageY ;
tbFlot . ctx . tooltip . html ( tbFlot . ctx . tooltipFormatter ( item ) )
. css ( { top : pageY + 5 , left : 0 } )
. fadeIn ( 200 ) ;
var windowWidth = $ ( window ) . width ( ) ; //eslint-disable-line
var tooltipWidth = tbFlot . ctx . tooltip . width ( ) ;
var left = pageX + 5 ;
if ( windowWidth - pageX < tooltipWidth + 50 ) {
left = pageX - tooltipWidth - 10 ;
if ( ! tbFlot . ctx . tooltipIndividual || item ) {
var multipleModeTooltip = ! tbFlot . ctx . tooltipIndividual ;
if ( multipleModeTooltip ) {
tbFlot . ctx . plot . unhighlight ( ) ;
}
tbFlot . ctx . tooltip . css ( {
left : left
} ) ;
var pageX = pos . pageX ;
var pageY = pos . pageY ;
var tooltipHtml ;
if ( tbFlot . chartType === 'pie' ) {
tooltipHtml = tbFlot . ctx . tooltipFormatter ( item ) ;
} else {
var hoverInfo = tbFlot . getHoverInfo ( tbFlot . ctx . plot . getData ( ) , pos ) ;
if ( angular . isNumber ( hoverInfo . time ) ) {
hoverInfo . seriesHover . sort ( function ( a , b ) {
return b . value - a . value ;
} ) ;
tooltipHtml = tbFlot . ctx . tooltipFormatter ( hoverInfo , item ? item . seriesIndex : - 1 ) ;
}
}
if ( tooltipHtml ) {
tbFlot . ctx . tooltip . html ( tooltipHtml )
. css ( { top : pageY + 5 , left : 0 } )
. fadeIn ( 200 ) ;
var windowWidth = $ ( window ) . width ( ) ; //eslint-disable-line
var tooltipWidth = tbFlot . ctx . tooltip . width ( ) ;
var left = pageX + 5 ;
if ( windowWidth - pageX < tooltipWidth + 50 ) {
left = pageX - tooltipWidth - 10 ;
}
tbFlot . ctx . tooltip . css ( {
left : left
} ) ;
if ( multipleModeTooltip ) {
for ( var i = 0 ; i < hoverInfo . seriesHover . length ; i ++ ) {
var seriesHoverInfo = hoverInfo . seriesHover [ i ] ;
tbFlot . ctx . plot . highlight ( seriesHoverInfo . index , seriesHoverInfo . hoverIndex ) ;
}
}
}
} else {
tbFlot . ctx . tooltip . stop ( true ) ;
tbFlot . ctx . tooltip . hide ( ) ;
tbFlot . ctx . plot . unhighlight ( ) ;
}
} ;
this . ctx . $container . bind ( 'plothover' , this . flotHoverHandler ) ;
@ -430,6 +936,7 @@ export default class TbFlot {
this . mouseleaveHandler = function ( ) {
tbFlot . ctx . tooltip . stop ( true ) ;
tbFlot . ctx . tooltip . hide ( ) ;
tbFlot . ctx . plot . unhighlight ( ) ;
tbFlot . isMouseInteraction = false ;
} ;
this . ctx . $container . bind ( 'mouseleave' , this . mouseleaveHandler ) ;
@ -467,6 +974,152 @@ export default class TbFlot {
this . mouseleaveHandler = null ;
}
}
findHoverIndexFromData ( posX , series ) {
var lower = 0 ;
var upper = series . data . length - 1 ;
var middle ;
var index = null ;
while ( index === null ) {
if ( lower > upper ) {
return Math . max ( upper , 0 ) ;
}
middle = Math . floor ( ( lower + upper ) / 2 ) ;
if ( series . data [ middle ] [ 0 ] === posX ) {
return middle ;
} else if ( series . data [ middle ] [ 0 ] < posX ) {
lower = middle + 1 ;
} else {
upper = middle - 1 ;
}
}
}
findHoverIndexFromDataPoints ( posX , series , last ) {
var ps = series . datapoints . pointsize ;
var initial = last * ps ;
var len = series . datapoints . points . length ;
for ( var j = initial ; j < len ; j += ps ) {
if ( ( ! series . lines . steps && series . datapoints . points [ initial ] != null && series . datapoints . points [ j ] == null )
|| series . datapoints . points [ j ] > posX ) {
return Math . max ( j - ps , 0 ) / ps ;
}
}
return j / ps - 1 ;
}
getHoverInfo ( seriesList , pos ) {
var i , series , value , hoverIndex , hoverDistance , pointTime , minDistance , minTime ;
var last_value = 0 ;
var results = {
seriesHover : [ ]
} ;
for ( i = 0 ; i < seriesList . length ; i ++ ) {
series = seriesList [ i ] ;
hoverIndex = this . findHoverIndexFromData ( pos . x , series ) ;
if ( series . data [ hoverIndex ] && series . data [ hoverIndex ] [ 0 ] ) {
hoverDistance = pos . x - series . data [ hoverIndex ] [ 0 ] ;
pointTime = series . data [ hoverIndex ] [ 0 ] ;
if ( ! minDistance
|| ( hoverDistance >= 0 && ( hoverDistance < minDistance || minDistance < 0 ) )
|| ( hoverDistance < 0 && hoverDistance > minDistance ) ) {
minDistance = hoverDistance ;
minTime = pointTime ;
}
if ( series . stack ) {
if ( this . ctx . tooltipIndividual ) {
value = series . data [ hoverIndex ] [ 1 ] ;
} else {
last_value += series . data [ hoverIndex ] [ 1 ] ;
value = last_value ;
}
} else {
value = series . data [ hoverIndex ] [ 1 ] ;
}
if ( series . stack ) {
hoverIndex = this . findHoverIndexFromDataPoints ( pos . x , series , hoverIndex ) ;
}
results . seriesHover . push ( {
value : value ,
hoverIndex : hoverIndex ,
color : series . dataKey . color ,
label : series . label ,
time : pointTime ,
distance : hoverDistance ,
index : i
} ) ;
}
}
results . time = minTime ;
return results ;
}
pieDataRendered ( ) {
for ( var i in this . ctx . pieTargetData ) {
var value = this . ctx . pieTargetData [ i ] ? this . ctx . pieTargetData [ i ] : 0 ;
this . ctx . pieRenderedData [ i ] = value ;
if ( ! this . ctx . pieData [ i ] . data [ 0 ] ) {
this . ctx . pieData [ i ] . data [ 0 ] = [ 0 , 0 ] ;
}
this . ctx . pieData [ i ] . data [ 0 ] [ 1 ] = value ;
}
}
nextPieDataAnimation ( start ) {
if ( start ) {
this . finishPieDataAnimation ( ) ;
this . ctx . pieAnimationStartTime = this . ctx . pieAnimationLastTime = Date . now ( ) ;
for ( var i in this . ctx . data ) {
this . ctx . pieTargetData [ i ] = ( this . ctx . data [ i ] . data && this . ctx . data [ i ] . data [ 0 ] )
? this . ctx . data [ i ] . data [ 0 ] [ 1 ] : 0 ;
}
}
if ( this . ctx . pieAnimationCaf ) {
this . ctx . pieAnimationCaf ( ) ;
this . ctx . pieAnimationCaf = null ;
}
var self = this ;
this . ctx . pieAnimationCaf = this . ctx . $scope . tbRaf (
function ( ) {
self . onPieDataAnimation ( ) ;
}
) ;
}
onPieDataAnimation ( ) {
var time = Date . now ( ) ;
var elapsed = time - this . ctx . pieAnimationLastTime ; //this.ctx.pieAnimationStartTime;
var progress = ( time - this . ctx . pieAnimationStartTime ) / this . ctx . pieDataAnimationDuration ;
if ( progress >= 1 ) {
this . finishPieDataAnimation ( ) ;
} else {
if ( elapsed >= 40 ) {
for ( var i in this . ctx . pieTargetData ) {
var prevValue = this . ctx . pieRenderedData [ i ] ;
var targetValue = this . ctx . pieTargetData [ i ] ;
var value = prevValue + ( targetValue - prevValue ) * progress ;
if ( ! this . ctx . pieData [ i ] . data [ 0 ] ) {
this . ctx . pieData [ i ] . data [ 0 ] = [ 0 , 0 ] ;
}
this . ctx . pieData [ i ] . data [ 0 ] [ 1 ] = value ;
}
this . ctx . plot . setData ( this . ctx . pieData ) ;
this . ctx . plot . draw ( ) ;
this . ctx . pieAnimationLastTime = time ;
}
this . nextPieDataAnimation ( false ) ;
}
}
finishPieDataAnimation ( ) {
this . pieDataRendered ( ) ;
this . ctx . plot . setData ( this . ctx . pieData ) ;
this . ctx . plot . draw ( ) ;
}
}
/* eslint-enable angular/angularelement */
Igor Kulikov
10 years ago