rozetko
7 years ago
46 changed files with 20539 additions and 0 deletions
@ -0,0 +1,38 @@ |
|||||||
|
node_modules |
||||||
|
dist |
||||||
|
npm-debug.log |
||||||
|
coverage/ |
||||||
|
.aws-config.json |
||||||
|
awsconfig |
||||||
|
/emails/dist |
||||||
|
/public_gen |
||||||
|
/tmp |
||||||
|
vendor/phantomjs/phantomjs |
||||||
|
|
||||||
|
docs/AWS_S3_BUCKET |
||||||
|
docs/GIT_BRANCH |
||||||
|
docs/VERSION |
||||||
|
docs/GITCOMMIT |
||||||
|
docs/changed-files |
||||||
|
docs/changed-files |
||||||
|
|
||||||
|
# locally required config files |
||||||
|
public/css/*.min.css |
||||||
|
|
||||||
|
# Editor junk |
||||||
|
*.sublime-workspace |
||||||
|
*.swp |
||||||
|
.idea/ |
||||||
|
*.iml |
||||||
|
|
||||||
|
/data/* |
||||||
|
/bin/* |
||||||
|
|
||||||
|
conf/custom.ini |
||||||
|
fig.yml |
||||||
|
profile.cov |
||||||
|
.notouch |
||||||
|
.DS_Store |
||||||
|
.tscache |
||||||
|
|
||||||
|
.vscode/ |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
# Hastic Graph Panel |
||||||
|
|
||||||
|
A better version of default Grafana's Graph Panel |
||||||
|
|
||||||
|
Can render Anomalies & more. |
||||||
|
|
||||||
|
# Build |
||||||
|
|
||||||
|
``` |
||||||
|
npm install |
||||||
|
npm run build |
||||||
|
``` |
||||||
|
|
||||||
|
# Changelog |
||||||
|
|
||||||
|
[Improvements] |
||||||
|
|
||||||
|
* You can zoom during update |
||||||
|
|
||||||
|
|
||||||
|
# Credits |
||||||
|
|
||||||
|
Based on |
||||||
|
|
||||||
|
* [grafana-plugin-template-webpack-typescript](https://github.com/CorpGlory/grafana-plugin-template-webpack-typescript) |
||||||
|
* [@types/grafana](https://github.com/CorpGlory/types-grafana) |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
const path = require('path'); |
||||||
|
const webpack = require('webpack'); |
||||||
|
const CopyWebpackPlugin = require('copy-webpack-plugin'); |
||||||
|
|
||||||
|
function resolve(dir) { |
||||||
|
return path.join(__dirname, '..', dir) |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
target: 'node', |
||||||
|
context: resolve('src'), |
||||||
|
entry: './module.ts', |
||||||
|
output: { |
||||||
|
filename: "module.js", |
||||||
|
path: resolve('dist'), |
||||||
|
libraryTarget: "amd" |
||||||
|
}, |
||||||
|
externals: [ |
||||||
|
// remove the line below if you don't want to use buildin versions
|
||||||
|
'jquery', 'lodash', 'moment', 'angular', |
||||||
|
function(context, request, callback) { |
||||||
|
var prefix = 'grafana/'; |
||||||
|
if (request.indexOf(prefix) === 0) { |
||||||
|
return callback(null, request.substr(prefix.length)); |
||||||
|
} |
||||||
|
callback(); |
||||||
|
} |
||||||
|
], |
||||||
|
plugins: [ |
||||||
|
new webpack.optimize.OccurrenceOrderPlugin(), |
||||||
|
new CopyWebpackPlugin([ |
||||||
|
{ from: 'plugin.json' }, |
||||||
|
{ from: 'img/*' }, |
||||||
|
{ from: 'partials/*' } |
||||||
|
]) |
||||||
|
], |
||||||
|
resolve: { |
||||||
|
extensions: [".ts", ".js"], |
||||||
|
}, |
||||||
|
module: { |
||||||
|
rules: [ |
||||||
|
{ |
||||||
|
test: /\.tsx?$/,
|
||||||
|
loaders: [ |
||||||
|
"ts-loader" |
||||||
|
], |
||||||
|
exclude: /node_modules/, |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
const baseWebpackConfig = require('./webpack.base.conf'); |
||||||
|
|
||||||
|
var conf = baseWebpackConfig; |
||||||
|
conf.devtool = "source-map"; |
||||||
|
conf.watch = true; |
||||||
|
conf.mode = 'development'; |
||||||
|
|
||||||
|
module.exports = conf; |
||||||
|
|
||||||
@ -0,0 +1,6 @@ |
|||||||
|
const baseWebpackConfig = require('./webpack.base.conf'); |
||||||
|
|
||||||
|
var conf = baseWebpackConfig; |
||||||
|
conf.mode = 'development'; // cuz production wont work
|
||||||
|
|
||||||
|
module.exports = baseWebpackConfig; |
||||||
@ -0,0 +1,158 @@ |
|||||||
|
|
||||||
|
{ |
||||||
|
"alert": { |
||||||
|
"conditions": [ |
||||||
|
{ |
||||||
|
"evaluator": { |
||||||
|
"params": [ |
||||||
|
0.5 |
||||||
|
], |
||||||
|
"type": "gt" |
||||||
|
}, |
||||||
|
"operator": { |
||||||
|
"type": "and" |
||||||
|
}, |
||||||
|
"query": { |
||||||
|
"params": [ |
||||||
|
"A", |
||||||
|
"5m", |
||||||
|
"now" |
||||||
|
] |
||||||
|
}, |
||||||
|
"reducer": { |
||||||
|
"params": [], |
||||||
|
"type": "avg" |
||||||
|
}, |
||||||
|
"type": "query" |
||||||
|
} |
||||||
|
], |
||||||
|
"executionErrorState": "alerting", |
||||||
|
"frequency": "60s", |
||||||
|
"handler": 1, |
||||||
|
"name": "OkAlert", |
||||||
|
"noDataState": "no_data", |
||||||
|
"notifications": [] |
||||||
|
}, |
||||||
|
"aliasColors": {}, |
||||||
|
"analyticsType": "Anomaly detection", |
||||||
|
"anomalyType": "", |
||||||
|
"anomalyTypes": [ |
||||||
|
{ |
||||||
|
"algorithm": "unsupervised", |
||||||
|
"color": "rgba(214, 131, 206, 0.95)", |
||||||
|
"name": "cpu_utilization_unsupervised" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"algorithm": "unsupervised", |
||||||
|
"color": "red", |
||||||
|
"name": "AnomalyNamefff" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"algorithm": "unsupervised", |
||||||
|
"color": "red", |
||||||
|
"name": "AnomalyName" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"algorithm": "unsupervised", |
||||||
|
"color": "red", |
||||||
|
"name": "anomaly_nameret" |
||||||
|
} |
||||||
|
], |
||||||
|
"backendURL": "http://corpglory.com:8000", |
||||||
|
"bars": false, |
||||||
|
"dashLength": 10, |
||||||
|
"dashes": false, |
||||||
|
"datasource": "accelerometer", |
||||||
|
"fill": 1, |
||||||
|
"gridPos": { |
||||||
|
"h": 13, |
||||||
|
"w": 24, |
||||||
|
"x": 0, |
||||||
|
"y": 0 |
||||||
|
}, |
||||||
|
"id": 2, |
||||||
|
"legend": { |
||||||
|
"avg": false, |
||||||
|
"current": false, |
||||||
|
"max": false, |
||||||
|
"min": false, |
||||||
|
"show": true, |
||||||
|
"total": false, |
||||||
|
"values": false |
||||||
|
}, |
||||||
|
"lines": true, |
||||||
|
"linewidth": 1, |
||||||
|
"nullPointMode": "null", |
||||||
|
"percentage": false, |
||||||
|
"pointradius": 5, |
||||||
|
"points": false, |
||||||
|
"renderer": "flot", |
||||||
|
"seriesOverrides": [], |
||||||
|
"spaceLength": 10, |
||||||
|
"stack": false, |
||||||
|
"steppedLine": false, |
||||||
|
"targets": [ |
||||||
|
{ |
||||||
|
"groupBy": [], |
||||||
|
"measurement": "ec2_cpu_utilization", |
||||||
|
"orderByTime": "ASC", |
||||||
|
"policy": "default", |
||||||
|
"refId": "A", |
||||||
|
"resultFormat": "time_series", |
||||||
|
"select": [ |
||||||
|
[ |
||||||
|
{ |
||||||
|
"params": [ |
||||||
|
"value" |
||||||
|
], |
||||||
|
"type": "field" |
||||||
|
} |
||||||
|
] |
||||||
|
], |
||||||
|
"tags": [] |
||||||
|
} |
||||||
|
], |
||||||
|
"thresholds": [ |
||||||
|
{ |
||||||
|
"colorMode": "critical", |
||||||
|
"fill": true, |
||||||
|
"line": true, |
||||||
|
"op": "gt", |
||||||
|
"value": 0.5 |
||||||
|
} |
||||||
|
], |
||||||
|
"timeFrom": null, |
||||||
|
"timeShift": null, |
||||||
|
"title": "Panel Title", |
||||||
|
"tooltip": { |
||||||
|
"shared": true, |
||||||
|
"sort": 0, |
||||||
|
"value_type": "individual" |
||||||
|
}, |
||||||
|
"type": "corpglory-grafalys-graph-panel", |
||||||
|
"xaxis": { |
||||||
|
"buckets": null, |
||||||
|
"mode": "time", |
||||||
|
"name": null, |
||||||
|
"show": true, |
||||||
|
"values": [] |
||||||
|
}, |
||||||
|
"yaxes": [ |
||||||
|
{ |
||||||
|
"format": "short", |
||||||
|
"label": null, |
||||||
|
"logBase": 1, |
||||||
|
"max": null, |
||||||
|
"min": null, |
||||||
|
"show": true |
||||||
|
}, |
||||||
|
{ |
||||||
|
"format": "short", |
||||||
|
"label": null, |
||||||
|
"logBase": 1, |
||||||
|
"max": null, |
||||||
|
"min": null, |
||||||
|
"show": true |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
{ |
||||||
|
"name": "hastic-graph-panel", |
||||||
|
"version": "0.1.0", |
||||||
|
"description": "Grafalys default panel for rendering and interaction with analytic unit", |
||||||
|
"main": "dist/module", |
||||||
|
"scripts": { |
||||||
|
"build": "webpack --config build/webpack.prod.conf.js", |
||||||
|
"dev": "webpack --config build/webpack.dev.conf.js" |
||||||
|
}, |
||||||
|
"keywords": [], |
||||||
|
"author": "Alexey Velikiy", |
||||||
|
"license": "MIT", |
||||||
|
"repository": "https://github.com/CorpGlory/hastic/hastic-grafana-graph-panel", |
||||||
|
"devDependencies": { |
||||||
|
"@types/angular": "^1.6.43", |
||||||
|
"@types/flot": "0.0.31", |
||||||
|
"@types/grafana": "github:CorpGlory/types-grafana", |
||||||
|
"@types/jquery": "^3.3.0", |
||||||
|
"@types/lodash": "^4.14.104", |
||||||
|
"@types/moment": "^2.13.0", |
||||||
|
"@types/perfect-scrollbar": "^1.3.0", |
||||||
|
"@types/tinycolor2": "^1.4.0", |
||||||
|
"@types/md5": "^2.1.32", |
||||||
|
"babel-core": "^6.26.0", |
||||||
|
"babel-loader": "^7.1.2", |
||||||
|
"babel-preset-env": "^1.6.0", |
||||||
|
"copy-webpack-plugin": "^4.0.1", |
||||||
|
"loader-utils": "^1.1.0", |
||||||
|
"ts-loader": "^4.2.0", |
||||||
|
"typescript": "^2.8.3", |
||||||
|
"webpack": "^4.7.0", |
||||||
|
"webpack-cli": "^2.1.2", |
||||||
|
"md5": "^2.2.1" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"perfect-scrollbar": "^1.3.0", |
||||||
|
"tether-drop": "^1.4.2", |
||||||
|
"tinycolor2": "^1.4.1" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
import kbn from 'grafana/app/core/utils/kbn'; |
||||||
|
|
||||||
|
|
||||||
|
export class AxesEditorCtrl { |
||||||
|
panel: any; |
||||||
|
panelCtrl: any; |
||||||
|
unitFormats: any; |
||||||
|
logScales: any; |
||||||
|
xAxisModes: any; |
||||||
|
xAxisStatOptions: any; |
||||||
|
xNameSegment: any; |
||||||
|
|
||||||
|
/** @ngInject **/ |
||||||
|
constructor(private $scope, private $q) { |
||||||
|
this.panelCtrl = $scope.ctrl; |
||||||
|
this.panel = this.panelCtrl.panel; |
||||||
|
this.$scope.ctrl = this; |
||||||
|
|
||||||
|
this.unitFormats = kbn.getUnitFormats(); |
||||||
|
|
||||||
|
this.logScales = { |
||||||
|
linear: 1, |
||||||
|
'log (base 2)': 2, |
||||||
|
'log (base 10)': 10, |
||||||
|
'log (base 32)': 32, |
||||||
|
'log (base 1024)': 1024, |
||||||
|
}; |
||||||
|
|
||||||
|
this.xAxisModes = { |
||||||
|
Time: 'time', |
||||||
|
Series: 'series', |
||||||
|
Histogram: 'histogram', |
||||||
|
// 'Data field': 'field',
|
||||||
|
}; |
||||||
|
|
||||||
|
this.xAxisStatOptions = [ |
||||||
|
{ text: 'Avg', value: 'avg' }, |
||||||
|
{ text: 'Min', value: 'min' }, |
||||||
|
{ text: 'Max', value: 'max' }, |
||||||
|
{ text: 'Total', value: 'total' }, |
||||||
|
{ text: 'Count', value: 'count' }, |
||||||
|
{ text: 'Current', value: 'current' }, |
||||||
|
]; |
||||||
|
|
||||||
|
if (this.panel.xaxis.mode === 'custom') { |
||||||
|
if (!this.panel.xaxis.name) { |
||||||
|
this.panel.xaxis.name = 'specify field'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setUnitFormat(axis, subItem) { |
||||||
|
axis.format = subItem.value; |
||||||
|
this.panelCtrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
this.panelCtrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
xAxisModeChanged() { |
||||||
|
this.panelCtrl.processor.setPanelDefaultsForNewXAxisMode(); |
||||||
|
this.panelCtrl.onDataReceived(this.panelCtrl.dataList); |
||||||
|
} |
||||||
|
|
||||||
|
xAxisValueChanged() { |
||||||
|
this.panelCtrl.onDataReceived(this.panelCtrl.dataList); |
||||||
|
} |
||||||
|
|
||||||
|
getDataFieldNames(onlyNumbers) { |
||||||
|
var props = this.panelCtrl.processor.getDataFieldNames(this.panelCtrl.dataList, onlyNumbers); |
||||||
|
var items = props.map(prop => { |
||||||
|
return { text: prop, value: prop }; |
||||||
|
}); |
||||||
|
return this.$q.when(items); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** @ngInject **/ |
||||||
|
export function axesEditorComponent() { |
||||||
|
'use strict'; |
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
scope: true, |
||||||
|
templateUrl: 'public/plugins/corpglory-grafalys-graph-panel/partials/axes_editor.html', |
||||||
|
controller: AxesEditorCtrl, |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
import _ from 'lodash'; |
||||||
|
import tinycolor from 'tinycolor2'; |
||||||
|
|
||||||
|
export const PALETTE_ROWS = 4; |
||||||
|
export const PALETTE_COLUMNS = 14; |
||||||
|
export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)'; |
||||||
|
export const OK_COLOR = 'rgba(11, 237, 50, 1)'; |
||||||
|
export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)'; |
||||||
|
export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)'; |
||||||
|
export const REGION_FILL_ALPHA = 0.09; |
||||||
|
|
||||||
|
let colors = [ |
||||||
|
'#7EB26D', |
||||||
|
'#EAB839', |
||||||
|
'#6ED0E0', |
||||||
|
'#EF843C', |
||||||
|
'#E24D42', |
||||||
|
'#1F78C1', |
||||||
|
'#BA43A9', |
||||||
|
'#705DA0', |
||||||
|
'#508642', |
||||||
|
'#CCA300', |
||||||
|
'#447EBC', |
||||||
|
'#C15C17', |
||||||
|
'#890F02', |
||||||
|
'#0A437C', |
||||||
|
'#6D1F62', |
||||||
|
'#584477', |
||||||
|
'#B7DBAB', |
||||||
|
'#F4D598', |
||||||
|
'#70DBED', |
||||||
|
'#F9BA8F', |
||||||
|
'#F29191', |
||||||
|
'#82B5D8', |
||||||
|
'#E5A8E2', |
||||||
|
'#AEA2E0', |
||||||
|
'#629E51', |
||||||
|
'#E5AC0E', |
||||||
|
'#64B0C8', |
||||||
|
'#E0752D', |
||||||
|
'#BF1B00', |
||||||
|
'#0A50A1', |
||||||
|
'#962D82', |
||||||
|
'#614D93', |
||||||
|
'#9AC48A', |
||||||
|
'#F2C96D', |
||||||
|
'#65C5DB', |
||||||
|
'#F9934E', |
||||||
|
'#EA6460', |
||||||
|
'#5195CE', |
||||||
|
'#D683CE', |
||||||
|
'#806EB7', |
||||||
|
'#3F6833', |
||||||
|
'#967302', |
||||||
|
'#2F575E', |
||||||
|
'#99440A', |
||||||
|
'#58140C', |
||||||
|
'#052B51', |
||||||
|
'#511749', |
||||||
|
'#3F2B5B', |
||||||
|
'#E0F9D7', |
||||||
|
'#FCEACA', |
||||||
|
'#CFFAFF', |
||||||
|
'#F9E2D2', |
||||||
|
'#FCE2DE', |
||||||
|
'#BADFF4', |
||||||
|
'#F9D9F9', |
||||||
|
'#DEDAF7', |
||||||
|
]; |
||||||
|
|
||||||
|
|
||||||
|
export function hexToHsl(color) { |
||||||
|
return tinycolor(color).toHsl(); |
||||||
|
} |
||||||
|
|
||||||
|
export function hslToHex(color) { |
||||||
|
return tinycolor(color).toHexString(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export default colors; |
||||||
@ -0,0 +1,348 @@ |
|||||||
|
import { AnomalyService } from '../services/anomaly_service' |
||||||
|
|
||||||
|
import { |
||||||
|
AnomalyKey, AnomalyType, |
||||||
|
AnomalyTypesSet, AnomalySegment, AnomalySegmentsSearcher, AnomalySermentPair |
||||||
|
} from '../model/anomaly'; |
||||||
|
import { MetricExpanded } from '../model/metric' |
||||||
|
import { Segment, SegmentKey } from '../model/segment'; |
||||||
|
import { SegmentsSet } from '../model/segment_set'; |
||||||
|
import { SegmentArray } from '../model/segment_array'; |
||||||
|
import { Emitter } from 'grafana/app/core/utils/emitter' |
||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
export const REGION_FILL_ALPHA = 0.7; |
||||||
|
export const REGION_STROKE_ALPHA = 0.9; |
||||||
|
export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; |
||||||
|
export const REGION_DELETE_COLOR_DARK = 'white'; |
||||||
|
|
||||||
|
|
||||||
|
export class AnomalyController { |
||||||
|
|
||||||
|
private _anomalyTypesSet: AnomalyTypesSet; |
||||||
|
private _selectedAnomalyKey: AnomalyKey = null; |
||||||
|
|
||||||
|
private _labelingDataAddedSegments: SegmentsSet<AnomalySegment>; |
||||||
|
private _labelingDataDeletedSegments: SegmentsSet<AnomalySegment>; |
||||||
|
private _newAnomalyType: AnomalyType = null; |
||||||
|
private _creatingNewAnomalyType: boolean = false; |
||||||
|
private _savingNewAnomalyType: boolean = false; |
||||||
|
private _tempIdCounted = -1; |
||||||
|
private _graphLocked = false; |
||||||
|
|
||||||
|
private _statusRunners: Set<AnomalyKey> = new Set<AnomalyKey>(); |
||||||
|
|
||||||
|
|
||||||
|
constructor(private _panelObject: any, private _anomalyService: AnomalyService, private _emitter: Emitter) { |
||||||
|
if(_panelObject.anomalyTypes === undefined) { |
||||||
|
_panelObject.anomalyTypes = []; |
||||||
|
} |
||||||
|
this._labelingDataAddedSegments = new SegmentArray<AnomalySegment>(); |
||||||
|
this._labelingDataDeletedSegments = new SegmentArray<AnomalySegment>(); |
||||||
|
this._anomalyTypesSet = new AnomalyTypesSet(this._panelObject.anomalyTypes); |
||||||
|
this.anomalyTypes.forEach(a => this.runAnomalyTypeAlertEnabledWaiter(a)); |
||||||
|
} |
||||||
|
|
||||||
|
getAnomalySegmentsSearcher(): AnomalySegmentsSearcher { |
||||||
|
return this._anomalySegmentsSearcher.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
private _anomalySegmentsSearcher(point: number): AnomalySermentPair[] { |
||||||
|
var result: AnomalySermentPair[] = []; |
||||||
|
this._anomalyTypesSet.anomalyTypes.forEach(at => { |
||||||
|
var segs = at.segments.findSegments(point); |
||||||
|
segs.forEach(s => { |
||||||
|
result.push({ anomalyType: at, segment: s }); |
||||||
|
}) |
||||||
|
}) |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
createAnomalyType() { |
||||||
|
this._newAnomalyType = new AnomalyType(); |
||||||
|
this._creatingNewAnomalyType = true; |
||||||
|
this._savingNewAnomalyType = false; |
||||||
|
} |
||||||
|
|
||||||
|
async saveNewAnomalyType(metricExpanded: MetricExpanded, panelId: number) { |
||||||
|
this._savingNewAnomalyType = true; |
||||||
|
await this._anomalyService.postNewAnomalyType(metricExpanded, this._newAnomalyType, panelId); |
||||||
|
this._anomalyTypesSet.addAnomalyType(this._newAnomalyType); |
||||||
|
this._creatingNewAnomalyType = false; |
||||||
|
this._savingNewAnomalyType = false; |
||||||
|
this.runAnomalyTypeAlertEnabledWaiter(this._newAnomalyType); |
||||||
|
} |
||||||
|
|
||||||
|
get creatingAnomalyType() { return this._creatingNewAnomalyType; } |
||||||
|
get savingAnomalyType() { return this._savingNewAnomalyType; } |
||||||
|
get newAnomalyType(): AnomalyType { return this._newAnomalyType; } |
||||||
|
|
||||||
|
get graphLocked() { return this._graphLocked; } |
||||||
|
set graphLocked(value) { |
||||||
|
this._graphLocked = value; |
||||||
|
} |
||||||
|
|
||||||
|
get labelingAnomaly(): AnomalyType { |
||||||
|
if(this._selectedAnomalyKey === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
return this._anomalyTypesSet.byKey(this._selectedAnomalyKey); |
||||||
|
} |
||||||
|
|
||||||
|
async toggleAnomalyTypeLabelingMode(key: AnomalyKey) { |
||||||
|
if(this.labelingAnomaly && this.labelingAnomaly.saving) { |
||||||
|
throw new Error('Can`t toggel during saving'); |
||||||
|
} |
||||||
|
if(this._selectedAnomalyKey === key) { |
||||||
|
return this.disableAnomalyLabeling(); |
||||||
|
} |
||||||
|
await this.disableAnomalyLabeling(); |
||||||
|
this._selectedAnomalyKey = key; |
||||||
|
this.labelingAnomaly.selected = true; |
||||||
|
this.toggleAnomalyVisibility(key, true); |
||||||
|
} |
||||||
|
|
||||||
|
async disableAnomalyLabeling() { |
||||||
|
if(this._selectedAnomalyKey === null) { |
||||||
|
return; |
||||||
|
} |
||||||
|
this.labelingAnomaly.saving = true; |
||||||
|
var newIds = await this._saveLabelingData(); |
||||||
|
this._labelingDataAddedSegments.getSegments().forEach((s, i) => { |
||||||
|
this.labelingAnomaly.segments.updateKey(s.key, newIds[i]); |
||||||
|
}) |
||||||
|
this.labelingAnomaly.saving = false; |
||||||
|
|
||||||
|
var anomaly = this.labelingAnomaly; |
||||||
|
this.dropLabeling(); |
||||||
|
this._runAnomalyTypeStatusWaiter(anomaly); |
||||||
|
} |
||||||
|
|
||||||
|
undoLabeling() { |
||||||
|
this._labelingDataAddedSegments.getSegments().forEach(s => { |
||||||
|
this.labelingAnomaly.segments.remove(s.key); |
||||||
|
}); |
||||||
|
this._labelingDataDeletedSegments.getSegments().forEach(s => { |
||||||
|
this.labelingAnomaly.segments.addSegment(s); |
||||||
|
}); |
||||||
|
this.dropLabeling(); |
||||||
|
} |
||||||
|
|
||||||
|
dropLabeling() { |
||||||
|
this._labelingDataAddedSegments.clear(); |
||||||
|
this._labelingDataDeletedSegments.clear(); |
||||||
|
this.labelingAnomaly.selected = false; |
||||||
|
this._selectedAnomalyKey = null; |
||||||
|
this._tempIdCounted = -1; |
||||||
|
} |
||||||
|
|
||||||
|
get labelingMode(): boolean { |
||||||
|
return this._selectedAnomalyKey !== null; |
||||||
|
} |
||||||
|
|
||||||
|
get labelingDeleteMode(): boolean { |
||||||
|
if(!this.labelingMode) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
return this.labelingAnomaly.deleteMode; |
||||||
|
} |
||||||
|
|
||||||
|
addLabelSegment(segment: Segment) { |
||||||
|
var asegment = this.labelingAnomaly.addLabeledSegment(segment); |
||||||
|
this._labelingDataAddedSegments.addSegment(asegment); |
||||||
|
} |
||||||
|
|
||||||
|
get anomalyTypes(): AnomalyType[] { |
||||||
|
return this._anomalyTypesSet.anomalyTypes; |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyColorChange(key: AnomalyKey, value) { |
||||||
|
this._anomalyTypesSet.byKey(key).color = value; |
||||||
|
} |
||||||
|
|
||||||
|
fetchAnomalyTypesStatuses() { |
||||||
|
this.anomalyTypes.forEach(a => this._runAnomalyTypeStatusWaiter(a)); |
||||||
|
} |
||||||
|
|
||||||
|
async fetchAnomalyTypesSegments(from: number, to: number) { |
||||||
|
if(!_.isNumber(from)) { |
||||||
|
throw new Error('from isn`t number'); |
||||||
|
} |
||||||
|
if(!_.isNumber(+to)) { |
||||||
|
throw new Error('to isn`t number'); |
||||||
|
} |
||||||
|
var tasks = this.anomalyTypes.map(a => this.fetchSegments(a, from, to)); |
||||||
|
return Promise.all(tasks); |
||||||
|
} |
||||||
|
|
||||||
|
async fetchSegments(anomalyType: AnomalyType, from: number, to: number): Promise<void> { |
||||||
|
if(!_.isNumber(from)) { |
||||||
|
throw new Error('from isn`t number'); |
||||||
|
} |
||||||
|
if(!_.isNumber(+to)) { |
||||||
|
throw new Error('to isn`t number'); |
||||||
|
} |
||||||
|
var allSegmentsList = await this._anomalyService.getSegments(anomalyType.key, from, to); |
||||||
|
var allSegmentsSet = new SegmentArray(allSegmentsList); |
||||||
|
if(anomalyType.selected) { |
||||||
|
this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s)); |
||||||
|
this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.key)); |
||||||
|
} |
||||||
|
anomalyType.segments = allSegmentsSet; |
||||||
|
} |
||||||
|
|
||||||
|
private async _saveLabelingData(): Promise<SegmentKey[]> { |
||||||
|
var anomaly = this.labelingAnomaly; |
||||||
|
if(anomaly === null) { |
||||||
|
throw new Error('anomaly is not selected'); |
||||||
|
} |
||||||
|
|
||||||
|
if( |
||||||
|
this._labelingDataAddedSegments.length === 0 && |
||||||
|
this._labelingDataDeletedSegments.length === 0 |
||||||
|
) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
return this._anomalyService.updateSegments( |
||||||
|
anomaly.key, this._labelingDataAddedSegments, this._labelingDataDeletedSegments |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: move to renderer
|
||||||
|
updateFlotEvents(isEditMode, options) { |
||||||
|
if(options.grid.markings === undefined) { |
||||||
|
options.markings = []; |
||||||
|
} |
||||||
|
|
||||||
|
for(var i = 0; i < this.anomalyTypes.length; i++) { |
||||||
|
var anomalyType = this.anomalyTypes[i]; |
||||||
|
var borderColor = addAlphaToRGB(anomalyType.color, REGION_STROKE_ALPHA); |
||||||
|
var fillColor = addAlphaToRGB(anomalyType.color, REGION_FILL_ALPHA); |
||||||
|
var segments = anomalyType.segments.getSegments(); |
||||||
|
if(!anomalyType.visible) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
if(isEditMode && this.labelingMode) { |
||||||
|
if(anomalyType.selected) { |
||||||
|
borderColor = addAlphaToRGB(borderColor, 0.7); |
||||||
|
fillColor = addAlphaToRGB(borderColor, 0.7); |
||||||
|
} else { |
||||||
|
continue; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var rangeDist = +options.xaxis.max - +options.xaxis.min; |
||||||
|
segments.forEach(s => { |
||||||
|
var expanded = s.expandDist(rangeDist, 0.01); |
||||||
|
options.grid.markings.push({ |
||||||
|
xaxis: { from: expanded.from, to: expanded.to }, |
||||||
|
color: fillColor |
||||||
|
}); |
||||||
|
options.grid.markings.push({ |
||||||
|
xaxis: { from: expanded.from, to: expanded.from }, |
||||||
|
color: borderColor |
||||||
|
}); |
||||||
|
options.grid.markings.push({ |
||||||
|
xaxis: { from: expanded.to, to: expanded.to }, |
||||||
|
color: borderColor |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
deleteLabelingAnomalySegmentsInRange(from: number, to: number) { |
||||||
|
var allRemovedSegs = this.labelingAnomaly.removeSegmentsInRange(from, to); |
||||||
|
allRemovedSegs.forEach(s => { |
||||||
|
if(!this._labelingDataAddedSegments.has(s.key)) { |
||||||
|
this._labelingDataDeletedSegments.addSegment(s); |
||||||
|
} |
||||||
|
}); |
||||||
|
this._labelingDataAddedSegments.removeInRange(from, to); |
||||||
|
} |
||||||
|
|
||||||
|
toggleDeleteMode() { |
||||||
|
if(!this.labelingMode) { |
||||||
|
throw new Error('Cant enter delete mode is labeling mode disabled'); |
||||||
|
} |
||||||
|
this.labelingAnomaly.deleteMode = !this.labelingAnomaly.deleteMode; |
||||||
|
} |
||||||
|
|
||||||
|
removeAnomalyType(key) { |
||||||
|
if(key === this._selectedAnomalyKey) { |
||||||
|
this.dropLabeling(); |
||||||
|
} |
||||||
|
this._anomalyTypesSet.removeAnomalyType(key); |
||||||
|
} |
||||||
|
|
||||||
|
private async _runAnomalyTypeStatusWaiter(anomalyType: AnomalyType) { |
||||||
|
if(anomalyType === undefined || anomalyType === null) { |
||||||
|
throw new Error('anomalyType not defined'); |
||||||
|
} |
||||||
|
|
||||||
|
if(this._statusRunners.has(anomalyType.key)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this._statusRunners.add(anomalyType.key); |
||||||
|
|
||||||
|
var statusGenerator = this._anomalyService.getAnomalyTypeStatusGenerator( |
||||||
|
anomalyType.key, 1000 |
||||||
|
); |
||||||
|
|
||||||
|
for await (const status of statusGenerator) { |
||||||
|
if(anomalyType.status !== status) { |
||||||
|
anomalyType.status = status; |
||||||
|
this._emitter.emit('anomaly-type-status-change', anomalyType); |
||||||
|
} |
||||||
|
if(!anomalyType.isActiveStatus) { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
this._statusRunners.delete(anomalyType.key); |
||||||
|
} |
||||||
|
|
||||||
|
async runAnomalyTypeAlertEnabledWaiter(anomalyType: AnomalyType) { |
||||||
|
var enabled = await this._anomalyService.getAlertEnabled(anomalyType.key); |
||||||
|
if(anomalyType.alertEnabled !== enabled) { |
||||||
|
anomalyType.alertEnabled = enabled; |
||||||
|
this._emitter.emit('anomaly-type-alert-change', anomalyType); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async toggleAnomalyTypeAlertEnabled(anomalyType: AnomalyType) { |
||||||
|
var enabled = anomalyType.alertEnabled; |
||||||
|
anomalyType.alertEnabled = undefined; |
||||||
|
await this._anomalyService.setAlertEnabled(anomalyType.key, enabled); |
||||||
|
anomalyType.alertEnabled = enabled; |
||||||
|
this._emitter.emit('anomaly-type-alert-change', anomalyType); |
||||||
|
} |
||||||
|
|
||||||
|
public getIdForNewLabelSegment() { |
||||||
|
this._tempIdCounted--; |
||||||
|
return this._tempIdCounted; |
||||||
|
} |
||||||
|
|
||||||
|
public toggleAnomalyVisibility(key: AnomalyKey, value?: boolean) { |
||||||
|
var anomaly = this._anomalyTypesSet.byKey(key); |
||||||
|
if(value !== undefined) { |
||||||
|
anomaly.visible = value; |
||||||
|
} else { |
||||||
|
anomaly.visible = !anomaly.visible; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function addAlphaToRGB(colorString: string, alpha: number): string { |
||||||
|
let color = tinycolor(colorString); |
||||||
|
if (color.isValid()) { |
||||||
|
color.setAlpha(color.getAlpha() * alpha); |
||||||
|
return color.toRgbString(); |
||||||
|
} else { |
||||||
|
return colorString; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,214 @@ |
|||||||
|
import _ from 'lodash'; |
||||||
|
import TimeSeries from 'grafana/app/core/time_series2'; |
||||||
|
import colors from './colors'; |
||||||
|
|
||||||
|
export class DataProcessor { |
||||||
|
constructor(private panel) {} |
||||||
|
|
||||||
|
getSeriesList(options) { |
||||||
|
if (!options.dataList || options.dataList.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
// auto detect xaxis mode
|
||||||
|
var firstItem; |
||||||
|
if (options.dataList && options.dataList.length > 0) { |
||||||
|
firstItem = options.dataList[0]; |
||||||
|
let autoDetectMode = this.getAutoDetectXAxisMode(firstItem); |
||||||
|
if (this.panel.xaxis.mode !== autoDetectMode) { |
||||||
|
this.panel.xaxis.mode = autoDetectMode; |
||||||
|
this.setPanelDefaultsForNewXAxisMode(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
switch (this.panel.xaxis.mode) { |
||||||
|
case 'series': |
||||||
|
case 'time': { |
||||||
|
return options.dataList.map((item, index) => { |
||||||
|
return this.timeSeriesHandler(item, index, options); |
||||||
|
}); |
||||||
|
} |
||||||
|
case 'histogram': { |
||||||
|
let histogramDataList = [ |
||||||
|
{ |
||||||
|
target: 'count', |
||||||
|
datapoints: _.concat([], _.flatten(_.map(options.dataList, 'datapoints'))), |
||||||
|
}, |
||||||
|
]; |
||||||
|
return histogramDataList.map((item, index) => { |
||||||
|
return this.timeSeriesHandler(item, index, options); |
||||||
|
}); |
||||||
|
} |
||||||
|
case 'field': { |
||||||
|
return this.customHandler(firstItem); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getAutoDetectXAxisMode(firstItem) { |
||||||
|
switch (firstItem.type) { |
||||||
|
case 'docs': |
||||||
|
return 'field'; |
||||||
|
case 'table': |
||||||
|
return 'field'; |
||||||
|
default: { |
||||||
|
if (this.panel.xaxis.mode === 'series') { |
||||||
|
return 'series'; |
||||||
|
} |
||||||
|
if (this.panel.xaxis.mode === 'histogram') { |
||||||
|
return 'histogram'; |
||||||
|
} |
||||||
|
return 'time'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setPanelDefaultsForNewXAxisMode() { |
||||||
|
switch (this.panel.xaxis.mode) { |
||||||
|
case 'time': { |
||||||
|
this.panel.bars = false; |
||||||
|
this.panel.lines = true; |
||||||
|
this.panel.points = false; |
||||||
|
this.panel.legend.show = true; |
||||||
|
this.panel.tooltip.shared = true; |
||||||
|
this.panel.xaxis.values = []; |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'series': { |
||||||
|
this.panel.bars = true; |
||||||
|
this.panel.lines = false; |
||||||
|
this.panel.points = false; |
||||||
|
this.panel.stack = false; |
||||||
|
this.panel.legend.show = false; |
||||||
|
this.panel.tooltip.shared = false; |
||||||
|
this.panel.xaxis.values = ['total']; |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'histogram': { |
||||||
|
this.panel.bars = true; |
||||||
|
this.panel.lines = false; |
||||||
|
this.panel.points = false; |
||||||
|
this.panel.stack = false; |
||||||
|
this.panel.legend.show = false; |
||||||
|
this.panel.tooltip.shared = false; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
timeSeriesHandler(seriesData, index, options) { |
||||||
|
var datapoints = seriesData.datapoints || []; |
||||||
|
var alias = seriesData.target; |
||||||
|
|
||||||
|
var colorIndex = index % colors.length; |
||||||
|
var color = seriesData.color || this.panel.aliasColors[alias] || colors[colorIndex]; |
||||||
|
|
||||||
|
var series = new TimeSeries({ |
||||||
|
datapoints: datapoints, |
||||||
|
alias: alias, |
||||||
|
color: color, |
||||||
|
unit: seriesData.unit, |
||||||
|
}); |
||||||
|
|
||||||
|
if (datapoints && datapoints.length > 0) { |
||||||
|
var last = datapoints[datapoints.length - 1][1]; |
||||||
|
var from = options.range.from; |
||||||
|
if (last - from < -10000) { |
||||||
|
series.isOutsideRange = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return series; |
||||||
|
} |
||||||
|
|
||||||
|
customHandler(dataItem) { |
||||||
|
let nameField = this.panel.xaxis.name; |
||||||
|
if (!nameField) { |
||||||
|
throw { |
||||||
|
message: 'No field name specified to use for x-axis, check your axes settings', |
||||||
|
}; |
||||||
|
} |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
validateXAxisSeriesValue() { |
||||||
|
switch (this.panel.xaxis.mode) { |
||||||
|
case 'series': { |
||||||
|
if (this.panel.xaxis.values.length === 0) { |
||||||
|
this.panel.xaxis.values = ['total']; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var validOptions = this.getXAxisValueOptions({}); |
||||||
|
var found = _.find(validOptions, { value: this.panel.xaxis.values[0] }); |
||||||
|
if (!found) { |
||||||
|
this.panel.xaxis.values = ['total']; |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getDataFieldNames(dataList, onlyNumbers) { |
||||||
|
if (dataList.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
let fields = []; |
||||||
|
var firstItem = dataList[0]; |
||||||
|
let fieldParts = []; |
||||||
|
|
||||||
|
function getPropertiesRecursive(obj) { |
||||||
|
_.forEach(obj, (value, key) => { |
||||||
|
if (_.isObject(value)) { |
||||||
|
fieldParts.push(key); |
||||||
|
getPropertiesRecursive(value); |
||||||
|
} else { |
||||||
|
if (!onlyNumbers || _.isNumber(value)) { |
||||||
|
let field = fieldParts.concat(key).join('.'); |
||||||
|
fields.push(field); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
fieldParts.pop(); |
||||||
|
} |
||||||
|
|
||||||
|
if (firstItem.type === 'docs') { |
||||||
|
if (firstItem.datapoints.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
getPropertiesRecursive(firstItem.datapoints[0]); |
||||||
|
} |
||||||
|
|
||||||
|
return fields; |
||||||
|
} |
||||||
|
|
||||||
|
getXAxisValueOptions(options) { |
||||||
|
switch (this.panel.xaxis.mode) { |
||||||
|
case 'series': { |
||||||
|
return [ |
||||||
|
{ text: 'Avg', value: 'avg' }, |
||||||
|
{ text: 'Min', value: 'min' }, |
||||||
|
{ text: 'Max', value: 'max' }, |
||||||
|
{ text: 'Total', value: 'total' }, |
||||||
|
{ text: 'Count', value: 'count' }, |
||||||
|
]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
pluckDeep(obj: any, property: string) { |
||||||
|
let propertyParts = property.split('.'); |
||||||
|
let value = obj; |
||||||
|
for (let i = 0; i < propertyParts.length; ++i) { |
||||||
|
if (value[propertyParts[i]]) { |
||||||
|
value = value[propertyParts[i]]; |
||||||
|
} else { |
||||||
|
return undefined; |
||||||
|
} |
||||||
|
} |
||||||
|
return value; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,253 @@ |
|||||||
|
import PerfectScrollbar from 'perfect-scrollbar'; |
||||||
|
import * as $ from 'jquery'; |
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
|
||||||
|
export class GraphLegend { |
||||||
|
firstRender = true; |
||||||
|
ctrl: any; |
||||||
|
panel: any; |
||||||
|
data; |
||||||
|
seriesList; |
||||||
|
legendScrollbar; |
||||||
|
|
||||||
|
constructor(private $elem: JQuery<HTMLElement>, private popoverSrv, private scope) { |
||||||
|
this.ctrl = scope.ctrl; |
||||||
|
this.panel = this.ctrl.panel; |
||||||
|
scope.$on('$destroy', () => { |
||||||
|
if (this.legendScrollbar) { |
||||||
|
this.legendScrollbar.destroy(); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
getSeriesIndexForElement(el) { |
||||||
|
return el.parents('[data-series-index]').data('series-index'); |
||||||
|
} |
||||||
|
|
||||||
|
openColorSelector(e) { |
||||||
|
// if we clicked inside poup container ignore click
|
||||||
|
if ($(e.target).parents('.popover').length) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var el = $(e.currentTarget).find('.fa-minus'); |
||||||
|
var index = this.getSeriesIndexForElement(el); |
||||||
|
var series = this.seriesList[index]; |
||||||
|
|
||||||
|
this.popoverSrv.show({ |
||||||
|
element: el[0], |
||||||
|
position: 'bottom left', |
||||||
|
targetAttachment: 'top left', |
||||||
|
template: |
||||||
|
'<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected"/>', |
||||||
|
openOn: 'hover', |
||||||
|
model: { |
||||||
|
series: series, |
||||||
|
toggleAxis: () => { |
||||||
|
this.ctrl.toggleAxis(series); |
||||||
|
}, |
||||||
|
colorSelected: color => { |
||||||
|
this.ctrl.changeSeriesColor(series, color); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
toggleSeries(e) { |
||||||
|
var el = $(e.currentTarget); |
||||||
|
var index = this.getSeriesIndexForElement(el); |
||||||
|
var seriesInfo = this.seriesList[index]; |
||||||
|
var scrollPosition = this.$elem.find('tbody').scrollTop(); |
||||||
|
this.ctrl.toggleSeries(seriesInfo, e); |
||||||
|
this.$elem.find('tbody').scrollTop(scrollPosition); |
||||||
|
} |
||||||
|
|
||||||
|
sortLegend(e) { |
||||||
|
var el = $(e.currentTarget); |
||||||
|
var stat = el.data('stat'); |
||||||
|
|
||||||
|
if (stat !== this.panel.legend.sort) { |
||||||
|
this.panel.legend.sortDesc = null; |
||||||
|
} |
||||||
|
|
||||||
|
// if already sort ascending, disable sorting
|
||||||
|
if (this.panel.legend.sortDesc === false) { |
||||||
|
this.panel.legend.sort = null; |
||||||
|
this.panel.legend.sortDesc = null; |
||||||
|
this.ctrl.render(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.panel.legend.sortDesc = !this.panel.legend.sortDesc; |
||||||
|
this.panel.legend.sort = stat; |
||||||
|
this.ctrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
getTableHeaderHtml(statName) { |
||||||
|
if (!this.panel.legend[statName]) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
var html = '<th class="pointer" data-stat="' + statName + '">' + statName; |
||||||
|
|
||||||
|
if (this.panel.legend.sort === statName) { |
||||||
|
var cssClass = this.panel.legend.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'; |
||||||
|
html += ' <span class="' + cssClass + '"></span>'; |
||||||
|
} |
||||||
|
|
||||||
|
return html + '</th>'; |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
this.data = this.ctrl.seriesList; |
||||||
|
if (!this.ctrl.panel.legend.show) { |
||||||
|
this.$elem.empty(); |
||||||
|
this.firstRender = true; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (this.firstRender) { |
||||||
|
this.$elem.on('click', '.graph-legend-icon', this.openColorSelector.bind(this)); |
||||||
|
this.$elem.on('click', '.graph-legend-alias', this.toggleSeries.bind(this)); |
||||||
|
this.$elem.on('click', 'th', this.sortLegend.bind(this)); |
||||||
|
this.firstRender = false; |
||||||
|
} |
||||||
|
|
||||||
|
this.seriesList = this.data; |
||||||
|
|
||||||
|
this.$elem.empty(); |
||||||
|
|
||||||
|
// Set min-width if side style and there is a value, otherwise remove the CSS propery
|
||||||
|
var width = this.panel.legend.rightSide && this.panel.legend.sideWidth ? this.panel.legend.sideWidth + 'px' : ''; |
||||||
|
this.$elem.css('min-width', width); |
||||||
|
|
||||||
|
this.$elem.toggleClass('graph-legend-table', this.panel.legend.alignAsTable === true); |
||||||
|
|
||||||
|
var tableHeaderElem; |
||||||
|
if (this.panel.legend.alignAsTable) { |
||||||
|
var header = '<tr>'; |
||||||
|
header += '<th colspan="2" style="text-align:left"></th>'; |
||||||
|
if (this.panel.legend.values) { |
||||||
|
header += this.getTableHeaderHtml('min'); |
||||||
|
header += this.getTableHeaderHtml('max'); |
||||||
|
header += this.getTableHeaderHtml('avg'); |
||||||
|
header += this.getTableHeaderHtml('current'); |
||||||
|
header += this.getTableHeaderHtml('total'); |
||||||
|
} |
||||||
|
header += '</tr>'; |
||||||
|
tableHeaderElem = $(header); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.panel.legend.sort) { |
||||||
|
this.seriesList = _.sortBy(this.seriesList, function(series) { |
||||||
|
return series.stats[this.panel.legend.sort]; |
||||||
|
}); |
||||||
|
if (this.panel.legend.sortDesc) { |
||||||
|
this.seriesList = this.seriesList.reverse(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// render first time for getting proper legend height
|
||||||
|
if (!this.panel.legend.rightSide) { |
||||||
|
this.renderLegendElement(tableHeaderElem); |
||||||
|
this.$elem.empty(); |
||||||
|
} |
||||||
|
|
||||||
|
this.renderLegendElement(tableHeaderElem); |
||||||
|
} |
||||||
|
|
||||||
|
renderSeriesLegendElements() { |
||||||
|
let seriesElements = []; |
||||||
|
for (let i = 0; i < this.seriesList.length; i++) { |
||||||
|
var series = this.seriesList[i]; |
||||||
|
|
||||||
|
if (series.hideFromLegend(this.panel.legend)) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
var html = '<div class="graph-legend-series'; |
||||||
|
|
||||||
|
if (series.yaxis === 2) { |
||||||
|
html += ' graph-legend-series--right-y'; |
||||||
|
} |
||||||
|
if (this.ctrl.hiddenSeries[series.alias]) { |
||||||
|
html += ' graph-legend-series-hidden'; |
||||||
|
} |
||||||
|
html += '" data-series-index="' + i + '">'; |
||||||
|
html += '<div class="graph-legend-icon">'; |
||||||
|
html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>'; |
||||||
|
html += '</div>'; |
||||||
|
|
||||||
|
html += |
||||||
|
'<a class="graph-legend-alias pointer" title="' + series.aliasEscaped + '">' + series.aliasEscaped + '</a>'; |
||||||
|
|
||||||
|
if (this.panel.legend.values) { |
||||||
|
var avg = series.formatValue(series.stats.avg); |
||||||
|
var current = series.formatValue(series.stats.current); |
||||||
|
var min = series.formatValue(series.stats.min); |
||||||
|
var max = series.formatValue(series.stats.max); |
||||||
|
var total = series.formatValue(series.stats.total); |
||||||
|
|
||||||
|
if (this.panel.legend.min) { |
||||||
|
html += '<div class="graph-legend-value min">' + min + '</div>'; |
||||||
|
} |
||||||
|
if (this.panel.legend.max) { |
||||||
|
html += '<div class="graph-legend-value max">' + max + '</div>'; |
||||||
|
} |
||||||
|
if (this.panel.legend.avg) { |
||||||
|
html += '<div class="graph-legend-value avg">' + avg + '</div>'; |
||||||
|
} |
||||||
|
if (this.panel.legend.current) { |
||||||
|
html += '<div class="graph-legend-value current">' + current + '</div>'; |
||||||
|
} |
||||||
|
if (this.panel.legend.total) { |
||||||
|
html += '<div class="graph-legend-value total">' + total + '</div>'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
html += '</div>'; |
||||||
|
seriesElements.push($(html)); |
||||||
|
} |
||||||
|
return seriesElements; |
||||||
|
} |
||||||
|
|
||||||
|
renderLegendElement(tableHeaderElem) { |
||||||
|
var seriesElements = this.renderSeriesLegendElements(); |
||||||
|
|
||||||
|
if (this.panel.legend.alignAsTable) { |
||||||
|
var tbodyElem = $('<tbody></tbody>'); |
||||||
|
tbodyElem.append(tableHeaderElem); |
||||||
|
tbodyElem.append(seriesElements); |
||||||
|
this.$elem.append(tbodyElem); |
||||||
|
} else { |
||||||
|
this.$elem.append(seriesElements); |
||||||
|
} |
||||||
|
|
||||||
|
if (!this.panel.legend.rightSide) { |
||||||
|
this.addScrollbar(); |
||||||
|
} else { |
||||||
|
this.destroyScrollbar(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
addScrollbar() { |
||||||
|
const scrollbarOptions = { |
||||||
|
// Number of pixels the content height can surpass the container height without enabling the scroll bar.
|
||||||
|
scrollYMarginOffset: 2, |
||||||
|
suppressScrollX: true, |
||||||
|
}; |
||||||
|
|
||||||
|
if (!this.legendScrollbar) { |
||||||
|
this.legendScrollbar = new PerfectScrollbar(this.$elem[0], scrollbarOptions); |
||||||
|
} else { |
||||||
|
this.legendScrollbar.update(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
destroyScrollbar() { |
||||||
|
if (this.legendScrollbar) { |
||||||
|
this.legendScrollbar.destroy(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,843 @@ |
|||||||
|
import { Segment } from './model/segment'; |
||||||
|
import { GraphTooltip } from './graph_tooltip'; |
||||||
|
import { ThresholdManager } from './threshold_manager'; |
||||||
|
import { convertValuesToHistogram, getSeriesValues } from './histogram'; |
||||||
|
import { |
||||||
|
AnomalyController, |
||||||
|
REGION_FILL_ALPHA as ANOMALY_REGION_FILL_ALPHA, |
||||||
|
REGION_STROKE_ALPHA as ANOMALY_REGION_STROKE_ALPHA, |
||||||
|
REGION_DELETE_COLOR_LIGHT as ANOMALY_REGION_DELETE_COLOR_LIGHT, |
||||||
|
REGION_DELETE_COLOR_DARK as ANOMALY_REGION_DELETE_COLOR_DARK |
||||||
|
} from './controllers/anomaly_controller'; |
||||||
|
|
||||||
|
|
||||||
|
import './vendor/flot/jquery.flot'; |
||||||
|
import './vendor/flot/jquery.flot.time'; |
||||||
|
import './vendor/flot/jquery.flot.selection'; |
||||||
|
import './vendor/flot/jquery.flot.stack'; |
||||||
|
import './vendor/flot/jquery.flot.stackpercent'; |
||||||
|
import './vendor/flot/jquery.flot.fillbelow'; |
||||||
|
import './vendor/flot/jquery.flot.crosshair'; |
||||||
|
import './vendor/flot/jquery.flot.dashes'; |
||||||
|
import './vendor/flot/jquery.flot.events'; |
||||||
|
|
||||||
|
// import { EventManager } from 'grafana/app/features/annotations/event_manager';
|
||||||
|
import TimeSeries from 'grafana/app/core/time_series2'; |
||||||
|
import { getFlotTickDecimals } from 'grafana/app/core/utils/ticks'; |
||||||
|
import { tickStep } from 'grafana/app/core/utils/ticks'; |
||||||
|
import { appEvents, coreModule } from 'grafana/app/core/core'; |
||||||
|
import kbn from 'grafana/app/core/utils/kbn'; |
||||||
|
|
||||||
|
import * as $ from 'jquery'; |
||||||
|
import _ from 'lodash'; |
||||||
|
import moment from 'moment'; |
||||||
|
|
||||||
|
|
||||||
|
const COLOR_SELECTION = '#666'; |
||||||
|
|
||||||
|
|
||||||
|
export class GraphRenderer { |
||||||
|
|
||||||
|
private _anomalyController: AnomalyController; |
||||||
|
private data: any; |
||||||
|
private tooltip: GraphTooltip; |
||||||
|
private thresholdManager: ThresholdManager; |
||||||
|
private panelWidth: number; |
||||||
|
private plot: any; |
||||||
|
private sortedSeries: any; |
||||||
|
private ctrl: any; |
||||||
|
private dashboard: any; |
||||||
|
private panel: any; |
||||||
|
// private eventManager;
|
||||||
|
private flotOptions: any = {} |
||||||
|
private $elem: JQuery<HTMLElement>; |
||||||
|
private annotations: any[]; |
||||||
|
private contextSrv: any; |
||||||
|
private popoverSrv: any; |
||||||
|
private scope: any; |
||||||
|
private timeSrv: any; |
||||||
|
private _graphMousePosition: any; |
||||||
|
|
||||||
|
constructor ($elem: JQuery<HTMLElement>, timeSrv, popoverSrv, contextSrv, scope) { |
||||||
|
|
||||||
|
var self = this; |
||||||
|
this.$elem = $elem; |
||||||
|
this.ctrl = scope.ctrl; |
||||||
|
this.dashboard = this.ctrl.dashboard; |
||||||
|
this.panel = this.ctrl.panel; |
||||||
|
|
||||||
|
this.timeSrv = timeSrv; |
||||||
|
this.popoverSrv = popoverSrv; |
||||||
|
this.contextSrv = contextSrv; |
||||||
|
this.scope = scope; |
||||||
|
|
||||||
|
this._anomalyController = this.ctrl.anomalyController; |
||||||
|
if(this._anomalyController === undefined) { |
||||||
|
throw new Error('anomalyController is undefined'); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
this.annotations = []; |
||||||
|
this.panelWidth = 0; |
||||||
|
|
||||||
|
// this.eventManager = new EventManager(this.ctrl);
|
||||||
|
this.flotOptions = {} |
||||||
|
this.thresholdManager = new ThresholdManager(this.ctrl); |
||||||
|
this.tooltip = new GraphTooltip( |
||||||
|
$elem, this.dashboard, scope, () => this.sortedSeries, |
||||||
|
this._anomalyController.getAnomalySegmentsSearcher() |
||||||
|
); |
||||||
|
|
||||||
|
// panel events
|
||||||
|
this.ctrl.events.on('panel-teardown', () => { |
||||||
|
this.thresholdManager = null; |
||||||
|
|
||||||
|
if (this.plot) { |
||||||
|
this.plot.destroy(); |
||||||
|
this.plot = null; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// global events
|
||||||
|
appEvents.on('graph-hover', this._onGraphHover.bind(this), scope); |
||||||
|
appEvents.on('graph-hover-clear', this._onGraphHoverClear.bind(this), scope); |
||||||
|
|
||||||
|
$elem.bind('plotselected', (event, selectionEvent) => { |
||||||
|
if (this.panel.xaxis.mode !== 'time') { |
||||||
|
// Skip if panel in histogram or series mode
|
||||||
|
this.plot.clearSelection(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if(this._isAnomalyEvent(selectionEvent)) { |
||||||
|
this.plot.clearSelection(); |
||||||
|
var id = this._anomalyController.getIdForNewLabelSegment() |
||||||
|
var segment = new Segment( |
||||||
|
id, |
||||||
|
Math.round(selectionEvent.xaxis.from), |
||||||
|
Math.round(selectionEvent.xaxis.to) |
||||||
|
); |
||||||
|
if(this._anomalyController.labelingDeleteMode) { |
||||||
|
this._anomalyController.deleteLabelingAnomalySegmentsInRange( |
||||||
|
segment.from, segment.to |
||||||
|
); |
||||||
|
} else { |
||||||
|
this._anomalyController.addLabelSegment(segment); |
||||||
|
} |
||||||
|
this._renderPanel(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if ((selectionEvent.ctrlKey || selectionEvent.metaKey) && contextSrv.isEditor) { |
||||||
|
// Add annotation
|
||||||
|
setTimeout(() => { |
||||||
|
// this.eventManager.updateTime(selectionEvent.xaxis);
|
||||||
|
}, 100); |
||||||
|
} else { |
||||||
|
scope.$apply(function() { |
||||||
|
timeSrv.setTime({ |
||||||
|
from: moment.utc(selectionEvent.xaxis.from), |
||||||
|
to: moment.utc(selectionEvent.xaxis.to), |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$elem.bind('plotclick', (event, flotEvent, item) => { |
||||||
|
if (this.panel.xaxis.mode !== 'time') { |
||||||
|
// Skip if panel in histogram or series mode
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if(this._isAnomalyEvent(flotEvent)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if ((flotEvent.ctrlKey || flotEvent.metaKey) && contextSrv.isEditor) { |
||||||
|
// Skip if range selected (added in "plotselected" event handler)
|
||||||
|
let isRangeSelection = flotEvent.x !== flotEvent.x1; |
||||||
|
if (!isRangeSelection) { |
||||||
|
setTimeout(() => { |
||||||
|
// this.eventManager.updateTime({ from: flotEvent.x, to: null });
|
||||||
|
}, 100); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$elem.mouseleave(() => { |
||||||
|
if (this.panel.tooltip.shared) { |
||||||
|
var plot = $elem.data().plot; |
||||||
|
if (plot) { |
||||||
|
this.tooltip.clear(plot); |
||||||
|
} |
||||||
|
} |
||||||
|
appEvents.emit('graph-hover-clear'); |
||||||
|
}); |
||||||
|
|
||||||
|
$elem.bind("plothover", (event, pos, item) => { |
||||||
|
self.tooltip.show(pos, item); |
||||||
|
pos.panelRelY = (pos.pageY - $elem.offset().top) / $elem.height(); |
||||||
|
self._graphMousePosition = this.plot.p2c(pos); |
||||||
|
appEvents.emit('graph-hover', { pos: pos, panel: this.panel }); |
||||||
|
}); |
||||||
|
|
||||||
|
$elem.bind("plotclick", (event, pos, item) => { |
||||||
|
appEvents.emit('graph-click', { pos: pos, panel: this.panel, item: item }); |
||||||
|
}); |
||||||
|
|
||||||
|
$elem.mousedown(e => { |
||||||
|
this._anomalyController.graphLocked = true; |
||||||
|
this._chooseSelectionColor(e); |
||||||
|
}); |
||||||
|
|
||||||
|
$(document).mouseup(e => { |
||||||
|
this._anomalyController.graphLocked = false; |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public render(renderData) { |
||||||
|
this.data = renderData || this.data; |
||||||
|
if (!this.data) { |
||||||
|
return; |
||||||
|
} |
||||||
|
this.annotations = this.ctrl.annotations || []; |
||||||
|
this._buildFlotPairs(this.data); |
||||||
|
updateLegendValues(this.data, this.panel); |
||||||
|
this._renderPanel(); |
||||||
|
if(this.tooltip.visible) { |
||||||
|
var pos = this.plot.c2p(this._graphMousePosition); |
||||||
|
var canvasOffset = this.$elem.find('.flot-overlay').offset(); |
||||||
|
this.tooltip.show(pos); |
||||||
|
this.plot.setCrosshair(pos); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _onGraphHover(evt: any) { |
||||||
|
|
||||||
|
if (!this.dashboard.sharedTooltipModeEnabled()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// ignore if we are the emitter
|
||||||
|
if (!this.plot || evt.panel.id === this.panel.id || this.ctrl.otherPanelInFullscreenMode()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this._graphMousePosition = this.plot.p2c(evt.pos); |
||||||
|
this.tooltip.show(evt.pos); |
||||||
|
} |
||||||
|
|
||||||
|
private _onGraphHoverClear() { |
||||||
|
if (this.plot) { |
||||||
|
this.tooltip.clear(this.plot); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _shouldAbortRender() { |
||||||
|
if (!this.data) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
if (this.panelWidth === 0) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
private _drawHook(plot) { |
||||||
|
// add left axis labels
|
||||||
|
if (this.panel.yaxes[0].label && this.panel.yaxes[0].show) { |
||||||
|
$("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>") |
||||||
|
.text(this.panel.yaxes[0].label) |
||||||
|
.appendTo(this.$elem); |
||||||
|
} |
||||||
|
|
||||||
|
// add right axis labels
|
||||||
|
if (this.panel.yaxes[1].label && this.panel.yaxes[1].show) { |
||||||
|
$("<div class='axisLabel right-yaxis-label flot-temp-elem'></div>") |
||||||
|
.text(this.panel.yaxes[1].label) |
||||||
|
.appendTo(this.$elem); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.ctrl.dataWarning) { |
||||||
|
$(`<div class="datapoints-warning flot-temp-elem">${this.ctrl.dataWarning.title}</div>`).appendTo(this.$elem); |
||||||
|
} |
||||||
|
|
||||||
|
this.thresholdManager.draw(plot); |
||||||
|
} |
||||||
|
|
||||||
|
private _processOffsetHook(plot, gridMargin) { |
||||||
|
var left = this.panel.yaxes[0]; |
||||||
|
var right = this.panel.yaxes[1]; |
||||||
|
if (left.show && left.label) { |
||||||
|
gridMargin.left = 20; |
||||||
|
} |
||||||
|
if (right.show && right.label) { |
||||||
|
gridMargin.right = 20; |
||||||
|
} |
||||||
|
|
||||||
|
// apply y-axis min/max options
|
||||||
|
var yaxis = plot.getYAxes(); |
||||||
|
for (var i = 0; i < yaxis.length; i++) { |
||||||
|
var axis = yaxis[i]; |
||||||
|
var panelOptions = this.panel.yaxes[i]; |
||||||
|
axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max; |
||||||
|
axis.options.min = axis.options.min !== null ? axis.options.min : panelOptions.min; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Series could have different timeSteps,
|
||||||
|
// let's find the smallest one so that bars are correctly rendered.
|
||||||
|
// In addition, only take series which are rendered as bars for this.
|
||||||
|
private _getMinTimeStepOfSeries(data) { |
||||||
|
var min = Number.MAX_VALUE; |
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
if (!data[i].stats.timeStep) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
if (this.panel.bars) { |
||||||
|
if (data[i].bars && data[i].bars.show === false) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (typeof data[i].bars === 'undefined' || typeof data[i].bars.show === 'undefined' || !data[i].bars.show) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (data[i].stats.timeStep < min) { |
||||||
|
min = data[i].stats.timeStep; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return min; |
||||||
|
} |
||||||
|
|
||||||
|
// Function for rendering panel
|
||||||
|
private _renderPanel() { |
||||||
|
|
||||||
|
this.panelWidth = this.$elem.width(); |
||||||
|
if (this._shouldAbortRender()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// give space to alert editing
|
||||||
|
this.thresholdManager.prepare(this.$elem, this.data); |
||||||
|
|
||||||
|
// un-check dashes if lines are unchecked
|
||||||
|
this.panel.dashes = this.panel.lines ? this.panel.dashes : false; |
||||||
|
|
||||||
|
// Populate element
|
||||||
|
this._buildFlotOptions(this.panel); |
||||||
|
this._prepareXAxis(this.panel); |
||||||
|
this._configureYAxisOptions(this.data); |
||||||
|
this.thresholdManager.addFlotOptions(this.flotOptions, this.panel); |
||||||
|
// this.eventManager.addFlotEvents(this.annotations, this.flotOptions);
|
||||||
|
this._anomalyController.updateFlotEvents(this.contextSrv.isEditor, this.flotOptions); |
||||||
|
|
||||||
|
this.sortedSeries = this._sortSeries(this.data, this.panel); |
||||||
|
this._callPlot(true); |
||||||
|
} |
||||||
|
|
||||||
|
private _chooseSelectionColor(e) { |
||||||
|
var color = COLOR_SELECTION; |
||||||
|
var fillAlpha = 0.4; |
||||||
|
var strokeAlpha = 0.4; |
||||||
|
if(this._isAnomalyEvent(e)) { |
||||||
|
if(this._anomalyController.labelingDeleteMode) { |
||||||
|
color = this.contextSrv.user.lightTheme ?
|
||||||
|
ANOMALY_REGION_DELETE_COLOR_LIGHT : |
||||||
|
ANOMALY_REGION_DELETE_COLOR_DARK; |
||||||
|
} else { |
||||||
|
color = this._anomalyController.labelingAnomaly.color; |
||||||
|
} |
||||||
|
fillAlpha = ANOMALY_REGION_FILL_ALPHA; |
||||||
|
strokeAlpha = ANOMALY_REGION_STROKE_ALPHA; |
||||||
|
} |
||||||
|
this.plot.getOptions().selection.color = color |
||||||
|
} |
||||||
|
|
||||||
|
private _buildFlotPairs(data) { |
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
let series = data[i]; |
||||||
|
series.data = series.getFlotPairs(series.nullPointMode || this.panel.nullPointMode); |
||||||
|
|
||||||
|
// if hidden remove points and disable stack
|
||||||
|
if (this.ctrl.hiddenSeries[series.alias]) { |
||||||
|
series.data = []; |
||||||
|
series.stack = false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _prepareXAxis(panel) { |
||||||
|
switch (panel.xaxis.mode) { |
||||||
|
case 'series': { |
||||||
|
this.flotOptions.series.bars.barWidth = 0.7; |
||||||
|
this.flotOptions.series.bars.align = 'center'; |
||||||
|
|
||||||
|
for (let i = 0; i < this.data.length; i++) { |
||||||
|
let series = this.data[i]; |
||||||
|
series.data = [[i + 1, series.stats[panel.xaxis.values[0]]]]; |
||||||
|
} |
||||||
|
|
||||||
|
this._addXSeriesAxis(); |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'histogram': { |
||||||
|
let bucketSize: number; |
||||||
|
let values = getSeriesValues(this.data); |
||||||
|
|
||||||
|
if (this.data.length && values.length) { |
||||||
|
let histMin = _.min(_.map(this.data, (s:any) => s.stats.min)); |
||||||
|
let histMax = _.max(_.map(this.data, (s:any) => s.stats.max)); |
||||||
|
let ticks = panel.xaxis.buckets || this.panelWidth / 50; |
||||||
|
bucketSize = tickStep(histMin, histMax, ticks); |
||||||
|
let histogram = convertValuesToHistogram(values, bucketSize); |
||||||
|
this.data[0].data = histogram; |
||||||
|
this.flotOptions.series.bars.barWidth = bucketSize * 0.8; |
||||||
|
} else { |
||||||
|
bucketSize = 0; |
||||||
|
} |
||||||
|
|
||||||
|
this._addXHistogramAxis(bucketSize); |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'table': { |
||||||
|
this.flotOptions.series.bars.barWidth = 0.7; |
||||||
|
this.flotOptions.series.bars.align = 'center'; |
||||||
|
this._addXTableAxis(); |
||||||
|
break; |
||||||
|
} |
||||||
|
default: { |
||||||
|
this.flotOptions.series.bars.barWidth = this._getMinTimeStepOfSeries(this.data) / 1.5; |
||||||
|
this._addTimeAxis(); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _callPlot(incrementRenderCounter) { |
||||||
|
try { |
||||||
|
this.plot = $.plot(this.$elem, this.sortedSeries, this.flotOptions); |
||||||
|
if (this.ctrl.renderError) { |
||||||
|
delete this.ctrl.error; |
||||||
|
delete this.ctrl.inspector; |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.log('flotcharts error', e); |
||||||
|
this.ctrl.error = e.message || 'Render Error'; |
||||||
|
this.ctrl.renderError = true; |
||||||
|
this.ctrl.inspector = { error: e }; |
||||||
|
} |
||||||
|
|
||||||
|
if (incrementRenderCounter) { |
||||||
|
this.ctrl.renderingCompleted(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _buildFlotOptions(panel) { |
||||||
|
const stack = panel.stack ? true : null; |
||||||
|
this.flotOptions = { |
||||||
|
hooks: { |
||||||
|
draw: [this._drawHook.bind(this)], |
||||||
|
processOffset: [this._processOffsetHook.bind(this)], |
||||||
|
}, |
||||||
|
legend: { show: false }, |
||||||
|
series: { |
||||||
|
stackpercent: panel.stack ? panel.percentage : false, |
||||||
|
stack: panel.percentage ? null : stack, |
||||||
|
lines: { |
||||||
|
show: panel.lines, |
||||||
|
zero: false, |
||||||
|
fill: this._translateFillOption(panel.fill), |
||||||
|
lineWidth: panel.dashes ? 0 : panel.linewidth, |
||||||
|
steps: panel.steppedLine, |
||||||
|
}, |
||||||
|
dashes: { |
||||||
|
show: panel.dashes, |
||||||
|
lineWidth: panel.linewidth, |
||||||
|
dashLength: [panel.dashLength, panel.spaceLength], |
||||||
|
}, |
||||||
|
bars: { |
||||||
|
show: panel.bars, |
||||||
|
fill: 1, |
||||||
|
barWidth: 1, |
||||||
|
zero: false, |
||||||
|
lineWidth: 0, |
||||||
|
}, |
||||||
|
points: { |
||||||
|
show: panel.points, |
||||||
|
fill: 1, |
||||||
|
fillColor: false, |
||||||
|
radius: panel.points ? panel.pointradius : 2, |
||||||
|
}, |
||||||
|
shadowSize: 0, |
||||||
|
}, |
||||||
|
yaxes: [], |
||||||
|
xaxis: {}, |
||||||
|
grid: { |
||||||
|
minBorderMargin: 0, |
||||||
|
markings: [], |
||||||
|
backgroundColor: null, |
||||||
|
borderWidth: 0, |
||||||
|
hoverable: true, |
||||||
|
clickable: true, |
||||||
|
color: '#c8c8c8', |
||||||
|
margin: { left: 0, right: 0 }, |
||||||
|
labelMarginX: 0, |
||||||
|
}, |
||||||
|
selection: { |
||||||
|
mode: 'x' |
||||||
|
}, |
||||||
|
crosshair: { |
||||||
|
mode: 'x', |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
private _sortSeries(series, panel) { |
||||||
|
var sortBy = panel.legend.sort; |
||||||
|
var sortOrder = panel.legend.sortDesc; |
||||||
|
var haveSortBy = sortBy !== null || sortBy !== undefined; |
||||||
|
var haveSortOrder = sortOrder !== null || sortOrder !== undefined; |
||||||
|
var shouldSortBy = panel.stack && haveSortBy && haveSortOrder; |
||||||
|
var sortDesc = panel.legend.sortDesc === true ? -1 : 1; |
||||||
|
|
||||||
|
series.sort((x, y) => { |
||||||
|
if (x.zindex > y.zindex) { |
||||||
|
return 1; |
||||||
|
} |
||||||
|
|
||||||
|
if (x.zindex < y.zindex) { |
||||||
|
return -1; |
||||||
|
} |
||||||
|
|
||||||
|
if (shouldSortBy) { |
||||||
|
if (x.stats[sortBy] > y.stats[sortBy]) { |
||||||
|
return 1 * sortDesc; |
||||||
|
} |
||||||
|
if (x.stats[sortBy] < y.stats[sortBy]) { |
||||||
|
return -1 * sortDesc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return 0; |
||||||
|
}); |
||||||
|
|
||||||
|
return series; |
||||||
|
} |
||||||
|
|
||||||
|
private _translateFillOption(fill) { |
||||||
|
if (this.panel.percentage && this.panel.stack) { |
||||||
|
return fill === 0 ? 0.001 : fill / 10; |
||||||
|
} else { |
||||||
|
return fill / 10; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _addTimeAxis() { |
||||||
|
var ticks = this.panelWidth / 100; |
||||||
|
var min = _.isUndefined(this.ctrl.range.from) ? null : this.ctrl.range.from.valueOf(); |
||||||
|
var max = _.isUndefined(this.ctrl.range.to) ? null : this.ctrl.range.to.valueOf(); |
||||||
|
|
||||||
|
this.flotOptions.xaxis = { |
||||||
|
timezone: this.dashboard.getTimezone(), |
||||||
|
show: this.panel.xaxis.show, |
||||||
|
mode: 'time', |
||||||
|
min: min, |
||||||
|
max: max, |
||||||
|
label: 'Datetime', |
||||||
|
ticks: ticks, |
||||||
|
timeformat: this._timeFormat(ticks, min, max), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
private _addXSeriesAxis() { |
||||||
|
var ticks = _.map(this.data, function(series: any, index) { |
||||||
|
return [index + 1, series.alias]; |
||||||
|
}); |
||||||
|
|
||||||
|
this.flotOptions.xaxis = { |
||||||
|
timezone: this.dashboard.getTimezone(), |
||||||
|
show: this.panel.xaxis.show, |
||||||
|
mode: null, |
||||||
|
min: 0, |
||||||
|
max: ticks.length + 1, |
||||||
|
label: 'Datetime', |
||||||
|
ticks: ticks, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
private _addXHistogramAxis(bucketSize) { |
||||||
|
let ticks, min, max; |
||||||
|
let defaultTicks = this.panelWidth / 50; |
||||||
|
|
||||||
|
if (this.data.length && bucketSize) { |
||||||
|
ticks = _.map(this.data[0].data, point => point[0]); |
||||||
|
min = _.min(ticks); |
||||||
|
max = _.max(ticks); |
||||||
|
|
||||||
|
// Adjust tick step
|
||||||
|
let tickStep = bucketSize; |
||||||
|
let ticks_num = Math.floor((max - min) / tickStep); |
||||||
|
while (ticks_num > defaultTicks) { |
||||||
|
tickStep = tickStep * 2; |
||||||
|
ticks_num = Math.ceil((max - min) / tickStep); |
||||||
|
} |
||||||
|
|
||||||
|
// Expand ticks for pretty view
|
||||||
|
min = Math.floor(min / tickStep) * tickStep; |
||||||
|
max = Math.ceil(max / tickStep) * tickStep; |
||||||
|
|
||||||
|
ticks = []; |
||||||
|
for (let i = min; i <= max; i += tickStep) { |
||||||
|
ticks.push(i); |
||||||
|
} |
||||||
|
} else { |
||||||
|
// Set defaults if no data
|
||||||
|
ticks = defaultTicks / 2; |
||||||
|
min = 0; |
||||||
|
max = 1; |
||||||
|
} |
||||||
|
|
||||||
|
this.flotOptions.xaxis = { |
||||||
|
timezone: this.dashboard.getTimezone(), |
||||||
|
show: this.panel.xaxis.show, |
||||||
|
mode: null, |
||||||
|
min: min, |
||||||
|
max: max, |
||||||
|
label: 'Histogram', |
||||||
|
ticks: ticks, |
||||||
|
}; |
||||||
|
|
||||||
|
// Use 'short' format for histogram values
|
||||||
|
this._configureAxisMode(this.flotOptions.xaxis, 'short'); |
||||||
|
} |
||||||
|
|
||||||
|
private _addXTableAxis() { |
||||||
|
var ticks = _.map(this.data, function(series: any, seriesIndex) { |
||||||
|
return _.map(series.datapoints, function(point, pointIndex) { |
||||||
|
var tickIndex = seriesIndex * series.datapoints.length + pointIndex; |
||||||
|
return [tickIndex + 1, point[1]]; |
||||||
|
}); |
||||||
|
}); |
||||||
|
ticks = _.flatten(ticks, true); |
||||||
|
|
||||||
|
this.flotOptions.xaxis = { |
||||||
|
timezone: this.dashboard.getTimezone(), |
||||||
|
show: this.panel.xaxis.show, |
||||||
|
mode: null, |
||||||
|
min: 0, |
||||||
|
max: ticks.length + 1, |
||||||
|
label: 'Datetime', |
||||||
|
ticks: ticks, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
private _configureYAxisOptions(data) { |
||||||
|
var defaults = { |
||||||
|
position: 'left', |
||||||
|
show: this.panel.yaxes[0].show, |
||||||
|
index: 1, |
||||||
|
logBase: this.panel.yaxes[0].logBase || 1, |
||||||
|
min: this._parseNumber(this.panel.yaxes[0].min), |
||||||
|
max: this._parseNumber(this.panel.yaxes[0].max), |
||||||
|
tickDecimals: this.panel.yaxes[0].decimals, |
||||||
|
}; |
||||||
|
|
||||||
|
this.flotOptions.yaxes.push(defaults); |
||||||
|
|
||||||
|
if (_.find(data, { yaxis: 2 })) { |
||||||
|
var secondY = _.clone(defaults); |
||||||
|
secondY.index = 2; |
||||||
|
secondY.show = this.panel.yaxes[1].show; |
||||||
|
secondY.logBase = this.panel.yaxes[1].logBase || 1; |
||||||
|
secondY.position = 'right'; |
||||||
|
secondY.min = this._parseNumber(this.panel.yaxes[1].min); |
||||||
|
secondY.max = this._parseNumber(this.panel.yaxes[1].max); |
||||||
|
secondY.tickDecimals = this.panel.yaxes[1].decimals; |
||||||
|
this.flotOptions.yaxes.push(secondY); |
||||||
|
|
||||||
|
this._applyLogScale(this.flotOptions.yaxes[1], data); |
||||||
|
this._configureAxisMode(this.flotOptions.yaxes[1], this.panel.percentage && this.panel.stack ? 'percent' : this.panel.yaxes[1].format); |
||||||
|
} |
||||||
|
this._applyLogScale(this.flotOptions.yaxes[0], data); |
||||||
|
this._configureAxisMode(this.flotOptions.yaxes[0], this.panel.percentage && this.panel.stack ? 'percent' : this.panel.yaxes[0].format); |
||||||
|
} |
||||||
|
|
||||||
|
private _parseNumber(value: any) { |
||||||
|
if (value === null || typeof value === 'undefined') { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return _.toNumber(value); |
||||||
|
} |
||||||
|
|
||||||
|
private _applyLogScale(axis, data) { |
||||||
|
if (axis.logBase === 1) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const minSetToZero = axis.min === 0; |
||||||
|
|
||||||
|
if (axis.min < Number.MIN_VALUE) { |
||||||
|
axis.min = null; |
||||||
|
} |
||||||
|
if (axis.max < Number.MIN_VALUE) { |
||||||
|
axis.max = null; |
||||||
|
} |
||||||
|
|
||||||
|
var series, i; |
||||||
|
var max = axis.max, |
||||||
|
min = axis.min; |
||||||
|
|
||||||
|
for (i = 0; i < data.length; i++) { |
||||||
|
series = data[i]; |
||||||
|
if (series.yaxis === axis.index) { |
||||||
|
if (!max || max < series.stats.max) { |
||||||
|
max = series.stats.max; |
||||||
|
} |
||||||
|
if (!min || min > series.stats.logmin) { |
||||||
|
min = series.stats.logmin; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
axis.transform = function(v) { |
||||||
|
return v < Number.MIN_VALUE ? null : Math.log(v) / Math.log(axis.logBase); |
||||||
|
}; |
||||||
|
axis.inverseTransform = function(v) { |
||||||
|
return Math.pow(axis.logBase, v); |
||||||
|
}; |
||||||
|
|
||||||
|
if (!max && !min) { |
||||||
|
max = axis.inverseTransform(+2); |
||||||
|
min = axis.inverseTransform(-2); |
||||||
|
} else if (!max) { |
||||||
|
max = min * axis.inverseTransform(+4); |
||||||
|
} else if (!min) { |
||||||
|
min = max * axis.inverseTransform(-4); |
||||||
|
} |
||||||
|
|
||||||
|
if (axis.min) { |
||||||
|
min = axis.inverseTransform(Math.ceil(axis.transform(axis.min))); |
||||||
|
} else { |
||||||
|
min = axis.min = axis.inverseTransform(Math.floor(axis.transform(min))); |
||||||
|
} |
||||||
|
if (axis.max) { |
||||||
|
max = axis.inverseTransform(Math.floor(axis.transform(axis.max))); |
||||||
|
} else { |
||||||
|
max = axis.max = axis.inverseTransform(Math.ceil(axis.transform(max))); |
||||||
|
} |
||||||
|
|
||||||
|
if (!min || min < Number.MIN_VALUE || !max || max < Number.MIN_VALUE) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (Number.isFinite(min) && Number.isFinite(max)) { |
||||||
|
if (minSetToZero) { |
||||||
|
axis.min = 0.1; |
||||||
|
min = 1; |
||||||
|
} |
||||||
|
|
||||||
|
axis.ticks = this._generateTicksForLogScaleYAxis(min, max, axis.logBase); |
||||||
|
if (minSetToZero) { |
||||||
|
axis.ticks.unshift(0.1); |
||||||
|
} |
||||||
|
if (axis.ticks[axis.ticks.length - 1] > axis.max) { |
||||||
|
axis.max = axis.ticks[axis.ticks.length - 1]; |
||||||
|
} |
||||||
|
} else { |
||||||
|
axis.ticks = [1, 2]; |
||||||
|
delete axis.min; |
||||||
|
delete axis.max; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _generateTicksForLogScaleYAxis(min, max, logBase) { |
||||||
|
let ticks = []; |
||||||
|
|
||||||
|
var nextTick; |
||||||
|
for (nextTick = min; nextTick <= max; nextTick *= logBase) { |
||||||
|
ticks.push(nextTick); |
||||||
|
} |
||||||
|
|
||||||
|
const maxNumTicks = Math.ceil(this.ctrl.height / 25); |
||||||
|
const numTicks = ticks.length; |
||||||
|
if (numTicks > maxNumTicks) { |
||||||
|
const factor = Math.ceil(numTicks / maxNumTicks) * logBase; |
||||||
|
ticks = []; |
||||||
|
|
||||||
|
for (nextTick = min; nextTick <= max * factor; nextTick *= factor) { |
||||||
|
ticks.push(nextTick); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ticks; |
||||||
|
} |
||||||
|
|
||||||
|
private _configureAxisMode(axis, format) { |
||||||
|
axis.tickFormatter = function(val, axis) { |
||||||
|
return kbn.valueFormats[format](val, axis.tickDecimals, axis.scaledDecimals); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
private _timeFormat(ticks, min, max) { |
||||||
|
if (min && max && ticks) { |
||||||
|
var range = max - min; |
||||||
|
var secPerTick = range / ticks / 1000; |
||||||
|
var oneDay = 86400000; |
||||||
|
var oneYear = 31536000000; |
||||||
|
|
||||||
|
if (secPerTick <= 45) { |
||||||
|
return '%H:%M:%S'; |
||||||
|
} |
||||||
|
if (secPerTick <= 7200 || range <= oneDay) { |
||||||
|
return '%H:%M'; |
||||||
|
} |
||||||
|
if (secPerTick <= 80000) { |
||||||
|
return '%m/%d %H:%M'; |
||||||
|
} |
||||||
|
if (secPerTick <= 2419200 || range <= oneYear) { |
||||||
|
return '%m/%d'; |
||||||
|
} |
||||||
|
return '%Y-%m'; |
||||||
|
} |
||||||
|
|
||||||
|
return '%H:%M'; |
||||||
|
} |
||||||
|
|
||||||
|
private _isAnomalyEvent(obj: any) { |
||||||
|
return (obj.ctrlKey || obj.metaKey) && |
||||||
|
this.contextSrv.isEditor && |
||||||
|
this._anomalyController.labelingMode; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function updateLegendValues(data: TimeSeries[], panel) { |
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
let series = data[i]; |
||||||
|
let yaxes = panel.yaxes; |
||||||
|
const seriesYAxis = series.yaxis || 1; |
||||||
|
let axis = yaxes[seriesYAxis - 1]; |
||||||
|
let { tickDecimals, scaledDecimals } = getFlotTickDecimals(data, axis); |
||||||
|
let formater = kbn.valueFormats[panel.yaxes[seriesYAxis - 1].format]; |
||||||
|
|
||||||
|
// decimal override
|
||||||
|
if (_.isNumber(panel.decimals)) { |
||||||
|
series.updateLegendValues(formater, panel.decimals, null); |
||||||
|
} else { |
||||||
|
// auto decimals
|
||||||
|
// legend and tooltip gets one more decimal precision
|
||||||
|
// than graph legend ticks
|
||||||
|
tickDecimals = (tickDecimals || -1) + 1; |
||||||
|
series.updateLegendValues(formater, tickDecimals, scaledDecimals + 2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,310 @@ |
|||||||
|
import { AnomalyType, AnomalySegment, AnomalySegmentsSearcher } from "model/anomaly"; |
||||||
|
|
||||||
|
export class GraphTooltip { |
||||||
|
|
||||||
|
private ctrl: any; |
||||||
|
private panel: any; |
||||||
|
private $tooltip: JQuery<HTMLElement>; |
||||||
|
private _visible = false; |
||||||
|
private _lastItem = undefined; |
||||||
|
|
||||||
|
constructor( |
||||||
|
private $elem: JQuery<HTMLElement>, private dashboard,
|
||||||
|
private scope, private getSeriesFn, |
||||||
|
private _anomalySegmentsSearcher: AnomalySegmentsSearcher |
||||||
|
) { |
||||||
|
this.ctrl = scope.ctrl; |
||||||
|
this.panel = this.ctrl.panel; |
||||||
|
this.$tooltip = $('<div class="graph-tooltip">'); |
||||||
|
} |
||||||
|
|
||||||
|
clear(plot) { |
||||||
|
this._visible = false; |
||||||
|
this.$tooltip.detach(); |
||||||
|
plot.clearCrosshair(); |
||||||
|
plot.unhighlight(); |
||||||
|
}; |
||||||
|
|
||||||
|
show(pos, item?) { |
||||||
|
if(item === undefined) { |
||||||
|
item = this._lastItem; |
||||||
|
} else { |
||||||
|
this._lastItem = item; |
||||||
|
} |
||||||
|
|
||||||
|
this._visible = true; |
||||||
|
var plot = this.$elem.data().plot; |
||||||
|
var plotData = plot.getData(); |
||||||
|
var xAxes = plot.getXAxes(); |
||||||
|
var xMode = xAxes[0].options.mode; |
||||||
|
var seriesList = this.getSeriesFn(); |
||||||
|
var allSeriesMode = this.panel.tooltip.shared; |
||||||
|
var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat; |
||||||
|
|
||||||
|
// if panelRelY is defined another panel wants us to show a tooltip
|
||||||
|
// get pageX from position on x axis and pageY from relative position in original panel
|
||||||
|
if (pos.panelRelY) { |
||||||
|
var pointOffset = plot.pointOffset({x: pos.x}); |
||||||
|
if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > this.$elem.width()) { |
||||||
|
this.clear(plot); |
||||||
|
return; |
||||||
|
} |
||||||
|
pos.pageX = this.$elem.offset().left + pointOffset.left; |
||||||
|
pos.pageY = this.$elem.offset().top + this.$elem.height() * pos.panelRelY; |
||||||
|
var isVisible = pos.pageY >= $(window).scrollTop() &&
|
||||||
|
pos.pageY <= $(window).innerHeight() + $(window).scrollTop(); |
||||||
|
if (!isVisible) { |
||||||
|
this.clear(plot); |
||||||
|
return; |
||||||
|
} |
||||||
|
plot.setCrosshair(pos); |
||||||
|
allSeriesMode = true; |
||||||
|
|
||||||
|
if (this.dashboard.sharedCrosshairModeOnly()) { |
||||||
|
// if only crosshair mode we are done
|
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (seriesList.length === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (seriesList[0].hasMsResolution) { |
||||||
|
tooltipFormat = 'YYYY-MM-DD HH:mm:ss.SSS'; |
||||||
|
} else { |
||||||
|
tooltipFormat = 'YYYY-MM-DD HH:mm:ss'; |
||||||
|
} |
||||||
|
|
||||||
|
if (allSeriesMode) { |
||||||
|
plot.unhighlight(); |
||||||
|
|
||||||
|
var seriesHoverInfo = this._getMultiSeriesPlotHoverInfo(plotData, pos); |
||||||
|
seriesHtml = ''; |
||||||
|
absoluteTime = this.dashboard.formatDate(seriesHoverInfo.time, tooltipFormat); |
||||||
|
|
||||||
|
// Dynamically reorder the hovercard for the current time point if the
|
||||||
|
// option is enabled.
|
||||||
|
if (this.panel.tooltip.sort === 2) { |
||||||
|
seriesHoverInfo.series.sort((a: any, b: any) => b.value - a.value); |
||||||
|
} else if (this.panel.tooltip.sort === 1) { |
||||||
|
seriesHoverInfo.series.sort((a: any, b: any) => a.value - b.value); |
||||||
|
} |
||||||
|
|
||||||
|
for (i = 0; i < seriesHoverInfo.series.length; i++) { |
||||||
|
hoverInfo = seriesHoverInfo.series[i]; |
||||||
|
|
||||||
|
if (hoverInfo.hidden) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
var highlightClass = ''; |
||||||
|
if (item && hoverInfo.index === item.seriesIndex) { |
||||||
|
highlightClass = 'graph-tooltip-list-item--highlight'; |
||||||
|
} |
||||||
|
|
||||||
|
series = seriesList[hoverInfo.index]; |
||||||
|
|
||||||
|
value = series.formatValue(hoverInfo.value); |
||||||
|
|
||||||
|
seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">'; |
||||||
|
seriesHtml += '<i class="fa fa-minus" style="color:' + hoverInfo.color +';"></i> ' + hoverInfo.label + ':</div>'; |
||||||
|
seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>'; |
||||||
|
plot.highlight(hoverInfo.index, hoverInfo.hoverIndex); |
||||||
|
} |
||||||
|
|
||||||
|
seriesHtml += this._appendAnomaliesHTML(pos.x); |
||||||
|
|
||||||
|
this._renderAndShow(absoluteTime, seriesHtml, pos, xMode); |
||||||
|
} |
||||||
|
// single series tooltip
|
||||||
|
else if (item) { |
||||||
|
series = seriesList[item.seriesIndex]; |
||||||
|
group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">'; |
||||||
|
group += '<i class="fa fa-minus" style="color:' + item.series.color +';"></i> ' + series.aliasEscaped + ':</div>'; |
||||||
|
|
||||||
|
if (this.panel.stack && this.panel.tooltip.value_type === 'individual') { |
||||||
|
value = item.datapoint[1] - item.datapoint[2]; |
||||||
|
} |
||||||
|
else { |
||||||
|
value = item.datapoint[1]; |
||||||
|
} |
||||||
|
|
||||||
|
value = series.formatValue(value); |
||||||
|
|
||||||
|
absoluteTime = this.dashboard.formatDate(item.datapoint[0], tooltipFormat); |
||||||
|
|
||||||
|
group += '<div class="graph-tooltip-value">' + value + '</div>'; |
||||||
|
|
||||||
|
group += this._appendAnomaliesHTML(pos.x); |
||||||
|
|
||||||
|
this._renderAndShow(absoluteTime, group, pos, xMode); |
||||||
|
} |
||||||
|
// no hit
|
||||||
|
else { |
||||||
|
this.$tooltip.detach(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
destroy() { |
||||||
|
this._visible = false; |
||||||
|
this.$tooltip.remove(); |
||||||
|
}; |
||||||
|
|
||||||
|
get visible() { return this._visible; } |
||||||
|
|
||||||
|
private _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) { |
||||||
|
// Special case of a non stepped line, highlight the very last point just before a null point
|
||||||
|
if ((!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null) |
||||||
|
//normal case
|
||||||
|
|| series.datapoints.points[j] > posX) { |
||||||
|
return Math.max(j - ps, 0)/ps; |
||||||
|
} |
||||||
|
} |
||||||
|
return j/ps - 1; |
||||||
|
}; |
||||||
|
|
||||||
|
private _findHoverIndexFromData(posX, series) { |
||||||
|
var lower = 0; |
||||||
|
var upper = series.data.length - 1; |
||||||
|
var middle; |
||||||
|
while (true) { |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
private _appendAnomaliesHTML(pos: number): string { |
||||||
|
var result = ''; |
||||||
|
var segments = this._anomalySegmentsSearcher(pos); |
||||||
|
if(segments.length === 0) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
segments.forEach(s => { |
||||||
|
var from = this.dashboard.formatDate(s.segment.from, 'HH:mm:ss.SSS'); |
||||||
|
var to = this.dashboard.formatDate(s.segment.to, 'HH:mm:ss.SSS'); |
||||||
|
|
||||||
|
result += ` |
||||||
|
<div class="graph-tooltip-list-item"> |
||||||
|
<div class="graph-tooltip-series-name"> |
||||||
|
<i class="fa fa-exclamation" style="color:${s.anomalyType.color}"></i> |
||||||
|
${s.anomalyType.name}: |
||||||
|
</div> |
||||||
|
<div class="graph-tooltip-value"> |
||||||
|
<i class="fa ${ s.segment.labeled ? "fa-thumb-tack" : "fa-search-plus" }" aria-hidden="true"></i> |
||||||
|
${from} — ${to} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
private _renderAndShow(absoluteTime, innerHtml, pos, xMode) { |
||||||
|
if (xMode === 'time') { |
||||||
|
innerHtml = '<div class="graph-tooltip-time">'+ absoluteTime + '</div>' + innerHtml; |
||||||
|
} |
||||||
|
(this.$tooltip.html(innerHtml) as any).place_tt(pos.pageX + 20, pos.pageY); |
||||||
|
}; |
||||||
|
|
||||||
|
private _getMultiSeriesPlotHoverInfo(seriesList, pos): { series: any[][], time: any } { |
||||||
|
var value, series, hoverIndex, hoverDistance, pointTime, yaxis; |
||||||
|
// 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
|
||||||
|
var results = [[],[],[]]; |
||||||
|
|
||||||
|
//now we know the current X (j) position for X and Y values
|
||||||
|
var lastValue = 0; //needed for stacked values
|
||||||
|
|
||||||
|
var minDistance, minTime; |
||||||
|
|
||||||
|
for (let i = 0; i < seriesList.length; i++) { |
||||||
|
series = seriesList[i]; |
||||||
|
|
||||||
|
if (!series.data.length || (this.panel.legend.hideEmpty && series.allIsNull)) { |
||||||
|
// Init value so that it does not brake series sorting
|
||||||
|
results[0].push({ hidden: true, value: 0 }); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if (!series.data.length || (this.panel.legend.hideZero && series.allIsZero)) { |
||||||
|
// Init value so that it does not brake series sorting
|
||||||
|
results[0].push({ hidden: true, value: 0 }); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
hoverIndex = this._findHoverIndexFromData(pos.x, series); |
||||||
|
hoverDistance = pos.x - series.data[hoverIndex][0]; |
||||||
|
pointTime = series.data[hoverIndex][0]; |
||||||
|
|
||||||
|
// Take the closest point before the cursor, or if it does not exist, the closest after
|
||||||
|
if (! minDistance |
||||||
|
|| (hoverDistance >=0 && (hoverDistance < minDistance || minDistance < 0)) |
||||||
|
|| (hoverDistance < 0 && hoverDistance > minDistance) |
||||||
|
) { |
||||||
|
minDistance = hoverDistance; |
||||||
|
minTime = pointTime; |
||||||
|
} |
||||||
|
|
||||||
|
if (series.stack) { |
||||||
|
if (this.panel.tooltip.value_type === 'individual') { |
||||||
|
value = series.data[hoverIndex][1]; |
||||||
|
} else if (!series.stack) { |
||||||
|
value = series.data[hoverIndex][1]; |
||||||
|
} else { |
||||||
|
lastValue += series.data[hoverIndex][1]; |
||||||
|
value = lastValue; |
||||||
|
} |
||||||
|
} else { |
||||||
|
value = series.data[hoverIndex][1]; |
||||||
|
} |
||||||
|
|
||||||
|
// Highlighting multiple Points depending on the plot type
|
||||||
|
if (series.lines.steps || series.stack) { |
||||||
|
// stacked and steppedLine plots can have series with different length.
|
||||||
|
// Stacked series can increase its length on each new stacked serie if null points found,
|
||||||
|
// to speed the index search we begin always on the last found hoverIndex.
|
||||||
|
hoverIndex = this._findHoverIndexFromDataPoints(pos.x, series, hoverIndex); |
||||||
|
} |
||||||
|
|
||||||
|
// Be sure we have a yaxis so that it does not brake series sorting
|
||||||
|
yaxis = 0; |
||||||
|
if (series.yaxis) { |
||||||
|
yaxis = series.yaxis.n; |
||||||
|
} |
||||||
|
|
||||||
|
results[yaxis].push({ |
||||||
|
value: value, |
||||||
|
hoverIndex: hoverIndex, |
||||||
|
color: series.color, |
||||||
|
label: series.aliasEscaped, |
||||||
|
time: pointTime, |
||||||
|
distance: hoverDistance, |
||||||
|
index: i |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// Contat the 3 sub-arrays
|
||||||
|
results = results[0].concat(results[1], results[2]); |
||||||
|
|
||||||
|
// Time of the point closer to pointer
|
||||||
|
|
||||||
|
return { series: results, time: minTime }; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,54 @@ |
|||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Convert series into array of series values. |
||||||
|
* @param data Array of series |
||||||
|
*/ |
||||||
|
export function getSeriesValues(dataList: any[]): number[] { |
||||||
|
const VALUE_INDEX = 0; |
||||||
|
let values = []; |
||||||
|
|
||||||
|
// Count histogam stats
|
||||||
|
for (let i = 0; i < dataList.length; i++) { |
||||||
|
let series = dataList[i]; |
||||||
|
let datapoints = series.datapoints; |
||||||
|
for (let j = 0; j < datapoints.length; j++) { |
||||||
|
if (datapoints[j][VALUE_INDEX] !== null) { |
||||||
|
values.push(datapoints[j][VALUE_INDEX]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return values; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Convert array of values into timeseries-like histogram: |
||||||
|
* [[val_1, count_1], [val_2, count_2], ..., [val_n, count_n]] |
||||||
|
* @param values |
||||||
|
* @param bucketSize |
||||||
|
*/ |
||||||
|
export function convertValuesToHistogram(values: number[], bucketSize: number): any[] { |
||||||
|
let histogram = {}; |
||||||
|
|
||||||
|
for (let i = 0; i < values.length; i++) { |
||||||
|
let bound = getBucketBound(values[i], bucketSize); |
||||||
|
if (histogram[bound]) { |
||||||
|
histogram[bound] = histogram[bound] + 1; |
||||||
|
} else { |
||||||
|
histogram[bound] = 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let histogam_series = _.map(histogram, (count, bound) => { |
||||||
|
return [Number(bound), count]; |
||||||
|
}); |
||||||
|
|
||||||
|
// Sort by Y axis values
|
||||||
|
return _.sortBy(histogam_series, point => point[0]); |
||||||
|
} |
||||||
|
|
||||||
|
function getBucketBound(value: number, bucketSize: number): number { |
||||||
|
return Math.floor(value / bucketSize) * bucketSize; |
||||||
|
} |
||||||
@ -0,0 +1,159 @@ |
|||||||
|
import { SegmentsSet } from './segment_set'; |
||||||
|
import { SegmentArray } from './segment_array'; |
||||||
|
import { Segment, SegmentKey } from './segment'; |
||||||
|
import { Metric } from './metric'; |
||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
export type AnomalySermentPair = { anomalyType: AnomalyType, segment: AnomalySegment }; |
||||||
|
export type AnomalySegmentsSearcher = (point: number) => AnomalySermentPair[]; |
||||||
|
|
||||||
|
export type AnomalyKey = string; |
||||||
|
|
||||||
|
export class AnomalySegment extends Segment { |
||||||
|
constructor(public labeled: boolean, key: SegmentKey, from: number, to: number) { |
||||||
|
super(key, from, to); |
||||||
|
if(!_.isBoolean(labeled)) { |
||||||
|
throw new Error('labeled value is not boolean'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class AnomalyType { |
||||||
|
|
||||||
|
private _selected: boolean = false; |
||||||
|
private _deleteMode: boolean = false; |
||||||
|
private _saving: boolean = false; |
||||||
|
private _segmentSet = new SegmentArray<AnomalySegment>(); |
||||||
|
private _status: string; |
||||||
|
private _metric: Metric; |
||||||
|
|
||||||
|
private _alertEnabled?: boolean; |
||||||
|
|
||||||
|
constructor(private _panelObject?: any) { |
||||||
|
if(_panelObject === undefined) { |
||||||
|
this._panelObject = {}; |
||||||
|
} |
||||||
|
_.defaults(this._panelObject, { |
||||||
|
name: 'anomaly_name', confidence: 0.2, color: 'red' |
||||||
|
}); |
||||||
|
|
||||||
|
//this._metric = new Metric(_panelObject.metric);
|
||||||
|
} |
||||||
|
|
||||||
|
get key(): AnomalyKey { return this.name; } |
||||||
|
|
||||||
|
set name(value: string) { this._panelObject.name = value; } |
||||||
|
get name(): string { return this._panelObject.name; } |
||||||
|
|
||||||
|
set confidence(value: number) { this._panelObject.confidence = value; } |
||||||
|
get confidence(): number { return this._panelObject.confidence; } |
||||||
|
|
||||||
|
set color(value: string) { this._panelObject.color = value; } |
||||||
|
get color(): string { return this._panelObject.color; } |
||||||
|
|
||||||
|
get selected(): boolean { return this._selected; } |
||||||
|
set selected(value: boolean) { this._selected = value; } |
||||||
|
|
||||||
|
get deleteMode(): boolean { return this._deleteMode; } |
||||||
|
set deleteMode(value: boolean) { this._deleteMode = value; } |
||||||
|
|
||||||
|
get saving(): boolean { return this._saving; } |
||||||
|
set saving(value: boolean) { this._saving = value; } |
||||||
|
|
||||||
|
get visible(): boolean {
|
||||||
|
return (this._panelObject.visible === undefined) ? true : this._panelObject.visible |
||||||
|
} |
||||||
|
set visible(value: boolean) { |
||||||
|
this._panelObject.visible = value; |
||||||
|
} |
||||||
|
|
||||||
|
get metric() { return this._metric; } |
||||||
|
|
||||||
|
addLabeledSegment(segment: Segment): AnomalySegment { |
||||||
|
var asegment = new AnomalySegment(true, segment.key, segment.from, segment.to); |
||||||
|
this._segmentSet.addSegment(asegment); |
||||||
|
return asegment; |
||||||
|
} |
||||||
|
|
||||||
|
removeSegmentsInRange(from: number, to: number): AnomalySegment[] { |
||||||
|
return this._segmentSet.removeInRange(from, to); |
||||||
|
} |
||||||
|
|
||||||
|
get segments(): SegmentsSet<AnomalySegment> { return this._segmentSet; } |
||||||
|
set segments(value: SegmentsSet<AnomalySegment>) { |
||||||
|
this._segmentSet.setSegments(value.getSegments()); |
||||||
|
} |
||||||
|
|
||||||
|
get status() { return this._status; } |
||||||
|
set status(value) { |
||||||
|
if( |
||||||
|
value !== 'ready' &&
|
||||||
|
value !== 'learning' &&
|
||||||
|
value !== 'pending' &&
|
||||||
|
value !== 'failed' |
||||||
|
) { |
||||||
|
throw new Error('Unsupported status value: ' + value); |
||||||
|
} |
||||||
|
this._status = value; |
||||||
|
} |
||||||
|
|
||||||
|
get isActiveStatus() { |
||||||
|
return this.status !== 'ready' && this.status !== 'failed'; |
||||||
|
} |
||||||
|
|
||||||
|
get panelObject() { return this._panelObject; } |
||||||
|
|
||||||
|
get alertEnabled(): boolean { |
||||||
|
return this._alertEnabled; |
||||||
|
} |
||||||
|
|
||||||
|
set alertEnabled(value) { |
||||||
|
this._alertEnabled = value; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export class AnomalyTypesSet { |
||||||
|
|
||||||
|
private _mapAnomalyKeyIndex: Map<AnomalyKey, number>; |
||||||
|
private _anomalyTypes: AnomalyType[]; |
||||||
|
|
||||||
|
constructor(private _panelObject: any[]) { |
||||||
|
if(_panelObject === undefined) { |
||||||
|
throw new Error('panel object can`t be undefined'); |
||||||
|
} |
||||||
|
this._mapAnomalyKeyIndex = new Map<AnomalyKey, number>(); |
||||||
|
this._anomalyTypes = _panelObject.map(p => new AnomalyType(p)); |
||||||
|
this._rebuildIndex(); |
||||||
|
} |
||||||
|
|
||||||
|
get anomalyTypes() { return this._anomalyTypes; } |
||||||
|
|
||||||
|
addAnomalyType(anomalyType: AnomalyType) { |
||||||
|
this._panelObject.push(anomalyType.panelObject); |
||||||
|
this._mapAnomalyKeyIndex[anomalyType.name] = this._anomalyTypes.length; |
||||||
|
this._anomalyTypes.push(anomalyType); |
||||||
|
} |
||||||
|
|
||||||
|
removeAnomalyType(key: AnomalyKey) { |
||||||
|
var index = this._mapAnomalyKeyIndex[key]; |
||||||
|
this._panelObject.splice(index, 1); |
||||||
|
this._anomalyTypes.splice(index, 1); |
||||||
|
this._rebuildIndex(); |
||||||
|
} |
||||||
|
|
||||||
|
_rebuildIndex() { |
||||||
|
this._anomalyTypes.forEach((a, i) => { |
||||||
|
this._mapAnomalyKeyIndex[a.key] = i; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
byKey(key: AnomalyKey): AnomalyType { |
||||||
|
return this._anomalyTypes[this._mapAnomalyKeyIndex[key]]; |
||||||
|
} |
||||||
|
|
||||||
|
byIndex(index: number): AnomalyType { |
||||||
|
return this._anomalyTypes[index]; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import _ from 'lodash'; |
||||||
|
import md5 from 'md5'; |
||||||
|
|
||||||
|
|
||||||
|
export type TargetHash = string; |
||||||
|
|
||||||
|
export class Target { |
||||||
|
private _data: any; |
||||||
|
constructor(any) { |
||||||
|
this._data = _.cloneDeep(any); |
||||||
|
this._strip(); |
||||||
|
} |
||||||
|
|
||||||
|
private _strip() { |
||||||
|
delete this._data.alias; |
||||||
|
} |
||||||
|
|
||||||
|
getHash(): TargetHash { |
||||||
|
return md5(JSON.stringify(this._data)); |
||||||
|
} |
||||||
|
|
||||||
|
getJSON() { |
||||||
|
return this._data; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class Metric { |
||||||
|
constructor(private _panelObj: any) { |
||||||
|
if(_panelObj === undefined) { |
||||||
|
throw new Error('_panelObj is undefined'); |
||||||
|
} |
||||||
|
} |
||||||
|
get datasource(): string { return this._panelObj.datasource; } |
||||||
|
get targetHashs(): TargetHash[] { return this._panelObj.targetHashs; } |
||||||
|
} |
||||||
|
|
||||||
|
export class MetricExpanded { |
||||||
|
private _targets: Target[]; |
||||||
|
constructor(public datasource: string, targets: any[]) { |
||||||
|
this._targets = targets.map(t => new Target(t)); |
||||||
|
} |
||||||
|
|
||||||
|
toJSON(): any { |
||||||
|
return { |
||||||
|
datasource: this.datasource, |
||||||
|
targets: this._targets.map(t => t.getJSON()) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class MetricMap { |
||||||
|
private _cache: Map<TargetHash, Target> = new Map<TargetHash, Target>(); |
||||||
|
constructor(datasource: string, targets: Target[]) { |
||||||
|
targets.forEach(t => { |
||||||
|
this._cache.set(t.getHash(), t); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
export type SegmentKey = number; |
||||||
|
|
||||||
|
export class Segment { |
||||||
|
constructor(private _key: SegmentKey, public from: number, public to: number) { |
||||||
|
if(isNaN(this._key)) { |
||||||
|
throw new Error('Key can`t be NaN'); |
||||||
|
} |
||||||
|
if(isNaN(+from)) { |
||||||
|
throw new Error('from can`t be NaN'); |
||||||
|
} |
||||||
|
if(isNaN(+to)) { |
||||||
|
throw new Error('to can`t be NaN'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
get key(): SegmentKey { return this._key; } |
||||||
|
set key(value) { this._key = value; } |
||||||
|
|
||||||
|
get middle() { return (this.from + this.to) / 2; } |
||||||
|
|
||||||
|
get length() { |
||||||
|
return Math.max(this.from, this.to) - Math.min(this.from, this.to); |
||||||
|
} |
||||||
|
|
||||||
|
expandDist(allDist: number, portion: number): Segment { |
||||||
|
if(allDist * portion < this.length) { |
||||||
|
return new Segment(this._key, this.from, this.to); |
||||||
|
} |
||||||
|
var p = Math.round(this.middle - allDist * portion / 2); |
||||||
|
var q = Math.round(this.middle + allDist * portion / 2); |
||||||
|
p = Math.min(p, this.from); |
||||||
|
q = Math.max(q, this.to); |
||||||
|
return new Segment(this._key, p, q); |
||||||
|
} |
||||||
|
|
||||||
|
equals(segment: Segment) { |
||||||
|
return this._key === segment._key; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,101 @@ |
|||||||
|
import { SegmentsSet } from './segment_set'; |
||||||
|
import { Segment, SegmentKey } from './segment'; |
||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
|
||||||
|
export class SegmentArray<T extends Segment> implements SegmentsSet<T> { |
||||||
|
private _segments: T[]; |
||||||
|
private _keyToSegment: Map<SegmentKey, T> = new Map<SegmentKey, T>(); |
||||||
|
|
||||||
|
constructor(private segments?: T[]) { |
||||||
|
this.setSegments(segments); |
||||||
|
} |
||||||
|
|
||||||
|
getSegments(from?: number, to?: number): T[] { |
||||||
|
if(from === undefined) { |
||||||
|
from = -Infinity; |
||||||
|
} |
||||||
|
if(to === undefined) { |
||||||
|
to = Infinity; |
||||||
|
} |
||||||
|
var result = []; |
||||||
|
for(var i = 0; i < this._segments.length; i++) { |
||||||
|
var s = this._segments[i]; |
||||||
|
if(from <= s.from && s.to <= to) { |
||||||
|
result.push(s); |
||||||
|
} |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
setSegments(segments: T[]) { |
||||||
|
this._segments = []; |
||||||
|
this._keyToSegment.clear(); |
||||||
|
if(segments) { |
||||||
|
segments.forEach(s => { |
||||||
|
this.addSegment(s); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
addSegment(segment: T) { |
||||||
|
if(this.has(segment.key)) { |
||||||
|
throw new Error(`Segment with key ${segment.key} exists in set`); |
||||||
|
} |
||||||
|
this._keyToSegment.set(segment.key, segment); |
||||||
|
this._segments.push(segment); |
||||||
|
} |
||||||
|
|
||||||
|
findSegments(point: number): T[] { |
||||||
|
return this._segments.filter(s => (s.from <= point) && (point <= s.to)); |
||||||
|
} |
||||||
|
|
||||||
|
removeInRange(from: number, to: number): T[] { |
||||||
|
var deleted = []; |
||||||
|
var newSegments = []; |
||||||
|
for(var i = 0; i < this._segments.length; i++) { |
||||||
|
var s = this._segments[i]; |
||||||
|
if(from <= s.from && s.to <= to) { |
||||||
|
this._keyToSegment.delete(s.key); |
||||||
|
deleted.push(s); |
||||||
|
} else { |
||||||
|
newSegments.push(s); |
||||||
|
} |
||||||
|
} |
||||||
|
this._segments = newSegments; |
||||||
|
return deleted; |
||||||
|
} |
||||||
|
|
||||||
|
get length() { |
||||||
|
return this._segments.length; |
||||||
|
} |
||||||
|
|
||||||
|
clear() { |
||||||
|
this._segments = []; |
||||||
|
this._keyToSegment.clear(); |
||||||
|
} |
||||||
|
|
||||||
|
has(key: SegmentKey): boolean { |
||||||
|
return this._keyToSegment.has(key); |
||||||
|
} |
||||||
|
|
||||||
|
remove(key: SegmentKey): boolean { |
||||||
|
if(!this.has(key)) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
var index = this._segments.findIndex(s => s.key === key); |
||||||
|
this._segments.splice(index, 1); |
||||||
|
this._keyToSegment.delete(key); |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
updateKey(fromKey: SegmentKey, toKey: SegmentKey) { |
||||||
|
var segment = this._keyToSegment.get(fromKey); |
||||||
|
this._keyToSegment.delete(fromKey); |
||||||
|
segment.key = toKey; |
||||||
|
this._keyToSegment.set(toKey, segment); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import { Segment, SegmentKey } from './segment' |
||||||
|
|
||||||
|
export interface SegmentsSet<T extends Segment> { |
||||||
|
getSegments(from?: number, to?: number): T[]; |
||||||
|
setSegments(segments: T[]): void; |
||||||
|
addSegment(segment: T): void; |
||||||
|
findSegments(point: number): T[]; |
||||||
|
removeInRange(from: number, to: number): T[]; |
||||||
|
remove(key: SegmentKey): boolean; |
||||||
|
has(key: SegmentKey): boolean; |
||||||
|
clear(): void; |
||||||
|
updateKey(fromKey: SegmentKey, toKey: SegmentKey): void; |
||||||
|
length: number; |
||||||
|
} |
||||||
@ -0,0 +1,547 @@ |
|||||||
|
import './series_overrides_ctrl'; |
||||||
|
import './thresholds_form'; |
||||||
|
|
||||||
|
import template from './template'; |
||||||
|
|
||||||
|
import { GraphRenderer } from './graph_renderer'; |
||||||
|
import { GraphLegend } from './graph_legend'; |
||||||
|
import { DataProcessor } from './data_processor'; |
||||||
|
import { Metric, MetricExpanded } from './model/metric'; |
||||||
|
import { AnomalyKey, AnomalyType } from './model/anomaly'; |
||||||
|
import { AnomalyService } from './services/anomaly_service'; |
||||||
|
import { AnomalyController } from './controllers/anomaly_controller'; |
||||||
|
|
||||||
|
import { axesEditorComponent } from './axes_editor'; |
||||||
|
|
||||||
|
import { MetricsPanelCtrl, alertTab } from 'grafana/app/plugins/sdk'; |
||||||
|
import { BackendSrv } from 'grafana/app/core/services/backend_srv'; |
||||||
|
import { appEvents } from 'grafana/app/core/core' |
||||||
|
import config from 'grafana/app/core/config'; |
||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
|
||||||
|
class GraphCtrl extends MetricsPanelCtrl { |
||||||
|
static template = template; |
||||||
|
|
||||||
|
hiddenSeries: any = {}; |
||||||
|
seriesList: any = []; |
||||||
|
dataList: any = []; |
||||||
|
annotations: any = []; |
||||||
|
alertState: any; |
||||||
|
|
||||||
|
_panelPath: any; |
||||||
|
|
||||||
|
annotationsPromise: any; |
||||||
|
dataWarning: any; |
||||||
|
colors: any = []; |
||||||
|
subTabIndex: number; |
||||||
|
processor: DataProcessor; |
||||||
|
|
||||||
|
datasourceRequest: Object; |
||||||
|
backendURL: string; |
||||||
|
analyticsTypes: Array<String> = ['Anomaly detection', 'Pettern Detection (not implemented yet)']; |
||||||
|
anomalyTypes = []; // TODO: remove it later. Only for alert tab
|
||||||
|
anomalyController: AnomalyController; |
||||||
|
|
||||||
|
_graphRenderer: GraphRenderer; |
||||||
|
_graphLegend: GraphLegend; |
||||||
|
|
||||||
|
panelDefaults = { |
||||||
|
// datasource name, null = default datasource
|
||||||
|
datasource: null, |
||||||
|
// sets client side (flot) or native graphite png renderer (png)
|
||||||
|
renderer: 'flot', |
||||||
|
yaxes: [ |
||||||
|
{ |
||||||
|
label: null, |
||||||
|
show: true, |
||||||
|
logBase: 1, |
||||||
|
min: null, |
||||||
|
max: null, |
||||||
|
format: 'short', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: null, |
||||||
|
show: true, |
||||||
|
logBase: 1, |
||||||
|
min: null, |
||||||
|
max: null, |
||||||
|
format: 'short', |
||||||
|
}, |
||||||
|
], |
||||||
|
xaxis: { |
||||||
|
show: true, |
||||||
|
mode: 'time', |
||||||
|
name: null, |
||||||
|
values: [], |
||||||
|
buckets: null, |
||||||
|
}, |
||||||
|
// show/hide lines
|
||||||
|
lines: true, |
||||||
|
// fill factor
|
||||||
|
fill: 1, |
||||||
|
// line width in pixels
|
||||||
|
linewidth: 1, |
||||||
|
// show/hide dashed line
|
||||||
|
dashes: false, |
||||||
|
// length of a dash
|
||||||
|
dashLength: 10, |
||||||
|
// length of space between two dashes
|
||||||
|
spaceLength: 10, |
||||||
|
// show hide points
|
||||||
|
points: false, |
||||||
|
// point radius in pixels
|
||||||
|
pointradius: 5, |
||||||
|
// show hide bars
|
||||||
|
bars: false, |
||||||
|
// enable/disable stacking
|
||||||
|
stack: false, |
||||||
|
// stack percentage mode
|
||||||
|
percentage: false, |
||||||
|
// legend options
|
||||||
|
legend: { |
||||||
|
show: true, // disable/enable legend
|
||||||
|
values: false, // disable/enable legend values
|
||||||
|
min: false, |
||||||
|
max: false, |
||||||
|
current: false, |
||||||
|
total: false, |
||||||
|
avg: false, |
||||||
|
}, |
||||||
|
// how null points should be handled
|
||||||
|
nullPointMode: 'null', |
||||||
|
// staircase line mode
|
||||||
|
steppedLine: false, |
||||||
|
// tooltip options
|
||||||
|
tooltip: { |
||||||
|
value_type: 'individual', |
||||||
|
shared: true, |
||||||
|
sort: 0, |
||||||
|
}, |
||||||
|
// time overrides
|
||||||
|
timeFrom: null, |
||||||
|
timeShift: null, |
||||||
|
// metric queries
|
||||||
|
targets: [{}], |
||||||
|
// series color overrides
|
||||||
|
aliasColors: {}, |
||||||
|
// other style overrides
|
||||||
|
seriesOverrides: [], |
||||||
|
thresholds: [], |
||||||
|
anomalyType: '', |
||||||
|
analyticsType: 'Anomaly detection', |
||||||
|
backendURL: 'http://localhost:8000' |
||||||
|
}; |
||||||
|
|
||||||
|
/** @ngInject */ |
||||||
|
constructor( |
||||||
|
$scope, $injector, private annotationsSrv,
|
||||||
|
private keybindingSrv, private backendSrv,
|
||||||
|
private popoverSrv, private contextSrv |
||||||
|
) { |
||||||
|
super($scope, $injector); |
||||||
|
|
||||||
|
_.defaults(this.panel, this.panelDefaults); |
||||||
|
_.defaults(this.panel.tooltip, this.panelDefaults.tooltip); |
||||||
|
_.defaults(this.panel.legend, this.panelDefaults.legend); |
||||||
|
_.defaults(this.panel.xaxis, this.panelDefaults.xaxis); |
||||||
|
|
||||||
|
this.processor = new DataProcessor(this.panel); |
||||||
|
|
||||||
|
var anomalyService = new AnomalyService(this.panel.backendURL, backendSrv as BackendSrv); |
||||||
|
this.anomalyController = new AnomalyController(this.panel, anomalyService, this.events); |
||||||
|
this.anomalyTypes = this.panel.anomalyTypes; |
||||||
|
keybindingSrv.bind('d', this.onDKey.bind(this)); |
||||||
|
|
||||||
|
this.events.on('render', this.onRender.bind(this)); |
||||||
|
this.events.on('data-received', this.onDataReceived.bind(this)); |
||||||
|
this.events.on('data-error', this.onDataError.bind(this)); |
||||||
|
this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this)); |
||||||
|
this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); |
||||||
|
this.events.on('init-panel-actions', this.onInitPanelActions.bind(this)); |
||||||
|
this.events.on('anomaly-type-alert-change', () => { |
||||||
|
this.$scope.$digest() |
||||||
|
}); |
||||||
|
this.events.on('anomaly-type-status-change', async (anomalyType: AnomalyType) => { |
||||||
|
if(anomalyType === undefined) { |
||||||
|
throw new Error('anomalyType is undefined'); |
||||||
|
} |
||||||
|
if(anomalyType.status === 'ready') { |
||||||
|
await this.anomalyController.fetchSegments(anomalyType, +this.range.from, +this.range.to); |
||||||
|
} |
||||||
|
this.render(this.seriesList); |
||||||
|
this.$scope.$digest(); |
||||||
|
}); |
||||||
|
|
||||||
|
appEvents.on('ds-request-response', data => { |
||||||
|
console.log(data) |
||||||
|
let params = data.config.params; |
||||||
|
this.datasourceRequest = { |
||||||
|
url: params.url, |
||||||
|
type: params.inspect.type, |
||||||
|
method: params.method, |
||||||
|
data: params.data, |
||||||
|
...params |
||||||
|
}; |
||||||
|
console.log(this.datasourceRequest) |
||||||
|
}); |
||||||
|
|
||||||
|
this.anomalyController.fetchAnomalyTypesStatuses(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
link(scope, elem, attrs, ctrl) { |
||||||
|
var $graphElem = $(elem[0]).find('#graphPanel'); |
||||||
|
var $legendElem = $(elem[0]).find('#graphLegend'); |
||||||
|
this._graphRenderer = new GraphRenderer( |
||||||
|
$graphElem, this.timeSrv, this.popoverSrv, this.contextSrv,this.$scope |
||||||
|
); |
||||||
|
this._graphLegend = new GraphLegend($legendElem, this.popoverSrv, this.$scope); |
||||||
|
} |
||||||
|
|
||||||
|
onInitEditMode() { |
||||||
|
var partialPath = this.panelPath + 'partials'; |
||||||
|
this.addEditorTab('Analytics', `${partialPath}/tab_analytics.html`, 2); |
||||||
|
this.addEditorTab('Axes', axesEditorComponent, 3); |
||||||
|
this.addEditorTab('Legend', `${partialPath}/tab_legend.html`, 4); |
||||||
|
this.addEditorTab('Display', `${partialPath}/tab_display.html`, 5); |
||||||
|
|
||||||
|
if (config.alertingEnabled) { |
||||||
|
this.addEditorTab('Alert', alertTab, 6); |
||||||
|
} |
||||||
|
|
||||||
|
this.subTabIndex = 0; |
||||||
|
} |
||||||
|
|
||||||
|
onInitPanelActions(actions) { |
||||||
|
actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' }); |
||||||
|
actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()' }); |
||||||
|
} |
||||||
|
|
||||||
|
issueQueries(datasource) { |
||||||
|
this.annotationsPromise = this.annotationsSrv.getAnnotations({ |
||||||
|
dashboard: this.dashboard, |
||||||
|
panel: this.panel, |
||||||
|
range: this.range, |
||||||
|
}); |
||||||
|
return super.issueQueries(datasource); |
||||||
|
} |
||||||
|
|
||||||
|
zoomOut(evt) { |
||||||
|
this.publishAppEvent('zoom-out', 2); |
||||||
|
} |
||||||
|
|
||||||
|
onDataSnapshotLoad(snapshotData) { |
||||||
|
this.annotationsPromise = this.annotationsSrv.getAnnotations({ |
||||||
|
dashboard: this.dashboard, |
||||||
|
panel: this.panel, |
||||||
|
range: this.range, |
||||||
|
}); |
||||||
|
this.onDataReceived(snapshotData); |
||||||
|
} |
||||||
|
|
||||||
|
onDataError(err) { |
||||||
|
this.seriesList = []; |
||||||
|
this.annotations = []; |
||||||
|
this.render([]); |
||||||
|
} |
||||||
|
|
||||||
|
async onDataReceived(dataList) { |
||||||
|
|
||||||
|
this.dataList = dataList; |
||||||
|
this.seriesList = this.processor.getSeriesList({ |
||||||
|
dataList: dataList, |
||||||
|
range: this.range, |
||||||
|
}); |
||||||
|
|
||||||
|
//this.onPredictionReceived(this.seriesList);
|
||||||
|
|
||||||
|
this.dataWarning = null; |
||||||
|
const hasSomePoint = this.seriesList.some(s => s.datapoints.length > 0); |
||||||
|
|
||||||
|
if (!hasSomePoint) { |
||||||
|
this.dataWarning = { |
||||||
|
title: 'No data points', |
||||||
|
tip: 'No datapoints returned from data query', |
||||||
|
}; |
||||||
|
} else { |
||||||
|
for (let series of this.seriesList) { |
||||||
|
if (series.isOutsideRange) { |
||||||
|
this.dataWarning = { |
||||||
|
title: 'Data points outside time range', |
||||||
|
tip: 'Can be caused by timezone mismatch or missing time filter in query', |
||||||
|
}; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var loadTasks = [ |
||||||
|
this.annotationsPromise, |
||||||
|
this.anomalyController.fetchAnomalyTypesSegments(+this.range.from, +this.range.to) |
||||||
|
]; |
||||||
|
|
||||||
|
var results = await Promise.all(loadTasks); |
||||||
|
this.loading = false; |
||||||
|
this.alertState = results[0].alertState; |
||||||
|
this.annotations = results[0].annotations; |
||||||
|
this.render(this.seriesList); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
onPredictionReceived(spanList) { |
||||||
|
var predictions = []; |
||||||
|
for (var span of spanList) { |
||||||
|
var predictionLow = { |
||||||
|
target: '', |
||||||
|
color: '', |
||||||
|
datapoints: [] |
||||||
|
}; |
||||||
|
var predictionHigh = { |
||||||
|
target: '', |
||||||
|
color: '', |
||||||
|
datapoints: [] |
||||||
|
}; |
||||||
|
|
||||||
|
for (var datapoint of span.datapoints) { |
||||||
|
predictionHigh.datapoints.push([datapoint[0] + 2, datapoint[1]]); |
||||||
|
predictionLow.datapoints.push([datapoint[0] - 2, datapoint[1]]); |
||||||
|
} |
||||||
|
|
||||||
|
predictionHigh.target = `${span.label} high`; |
||||||
|
predictionLow.target = `${span.label} low`; |
||||||
|
predictionHigh.color = span.color; |
||||||
|
predictionLow.color = span.color; |
||||||
|
predictions.push(predictionHigh, predictionLow); |
||||||
|
} |
||||||
|
var predictionSeries = this.processor.getSeriesList({ |
||||||
|
dataList: predictions, |
||||||
|
range: this.range |
||||||
|
}); |
||||||
|
for (var serie of predictionSeries) { |
||||||
|
serie.prediction = true; |
||||||
|
this.seriesList.push(serie); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onRender(data) { |
||||||
|
if (!this.seriesList) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
for (let series of this.seriesList) { |
||||||
|
if (series.prediction) { |
||||||
|
var overrideItem = _.find( |
||||||
|
this.panel.seriesOverrides, |
||||||
|
el => el.alias === series.alias |
||||||
|
) |
||||||
|
if (overrideItem !== undefined) { |
||||||
|
this.addSeriesOverride({ |
||||||
|
alias: series.alias, |
||||||
|
linewidth: 0, |
||||||
|
legend: false, |
||||||
|
// if pointradius === 0 -> point still shows, that's why pointradius === -1
|
||||||
|
pointradius: -1, |
||||||
|
fill: 3 |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
series.applySeriesOverrides(this.panel.seriesOverrides); |
||||||
|
|
||||||
|
if (series.unit) { |
||||||
|
this.panel.yaxes[series.yaxis - 1].format = series.unit; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(!this.anomalyController.graphLocked) { |
||||||
|
this._graphLegend.render(); |
||||||
|
this._graphRenderer.render(data); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
changeSeriesColor(series, color) { |
||||||
|
series.color = color; |
||||||
|
this.panel.aliasColors[series.alias] = series.color; |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
toggleSeries(serie, event) { |
||||||
|
if (event.ctrlKey || event.metaKey || event.shiftKey) { |
||||||
|
if (this.hiddenSeries[serie.alias]) { |
||||||
|
delete this.hiddenSeries[serie.alias]; |
||||||
|
} else { |
||||||
|
this.hiddenSeries[serie.alias] = true; |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.toggleSeriesExclusiveMode(serie); |
||||||
|
} |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
toggleSeriesExclusiveMode(serie) { |
||||||
|
var hidden = this.hiddenSeries; |
||||||
|
|
||||||
|
if (hidden[serie.alias]) { |
||||||
|
delete hidden[serie.alias]; |
||||||
|
} |
||||||
|
|
||||||
|
// check if every other series is hidden
|
||||||
|
var alreadyExclusive = _.every(this.seriesList, value => { |
||||||
|
if (value.alias === serie.alias) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
return hidden[value.alias]; |
||||||
|
}); |
||||||
|
|
||||||
|
if (alreadyExclusive) { |
||||||
|
// remove all hidden series
|
||||||
|
_.each(this.seriesList, value => { |
||||||
|
delete this.hiddenSeries[value.alias]; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
// hide all but this serie
|
||||||
|
_.each(this.seriesList, value => { |
||||||
|
if (value.alias === serie.alias) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.hiddenSeries[value.alias] = true; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
toggleAxis(info) { |
||||||
|
var override = _.find(this.panel.seriesOverrides, { alias: info.alias }); |
||||||
|
if (!override) { |
||||||
|
override = { alias: info.alias }; |
||||||
|
this.panel.seriesOverrides.push(override); |
||||||
|
} |
||||||
|
info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2; |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
addSeriesOverride(override) { |
||||||
|
this.panel.seriesOverrides.push(override || {}); |
||||||
|
} |
||||||
|
|
||||||
|
removeSeriesOverride(override) { |
||||||
|
this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override); |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
toggleLegend() { |
||||||
|
this.panel.legend.show = !this.panel.legend.show; |
||||||
|
this.refresh(); |
||||||
|
} |
||||||
|
|
||||||
|
legendValuesOptionChanged() { |
||||||
|
var legend = this.panel.legend; |
||||||
|
legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
exportCsv() { |
||||||
|
var scope = this.$scope.$new(true); |
||||||
|
scope.seriesList = this.seriesList; |
||||||
|
this.publishAppEvent('show-modal', { |
||||||
|
templateHtml: '<export-data-modal data="seriesList"></export-data-modal>', |
||||||
|
scope, |
||||||
|
modalClass: 'modal--narrow', |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
getAnnotationsByTag(tag) { |
||||||
|
var res = []; |
||||||
|
for (var annotation of this.annotations) { |
||||||
|
if (annotation.tags.indexOf(tag) >= 0) { |
||||||
|
res.push(annotation); |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
} |
||||||
|
|
||||||
|
get annotationTags() { |
||||||
|
var res = []; |
||||||
|
for (var annotation of this.annotations) { |
||||||
|
for (var tag of annotation.tags) { |
||||||
|
if (res.indexOf(tag) < 0) { |
||||||
|
res.push(tag); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
} |
||||||
|
|
||||||
|
get panelPath() { |
||||||
|
if (this._panelPath === undefined) { |
||||||
|
this._panelPath = '/public/plugins/' + this.pluginId + '/'; |
||||||
|
} |
||||||
|
return this._panelPath; |
||||||
|
} |
||||||
|
|
||||||
|
createNewAnomalyType() { |
||||||
|
this.anomalyController.createAnomalyType(); |
||||||
|
} |
||||||
|
|
||||||
|
async saveAnomalyType() { |
||||||
|
await this.anomalyController.saveNewAnomalyType( |
||||||
|
new MetricExpanded(this.panel.datasource, this.panel.targets), |
||||||
|
this.panel.id |
||||||
|
); |
||||||
|
this.$scope.$digest(); |
||||||
|
this.render(this.seriesList); |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyColorChange(key: AnomalyKey, value) { |
||||||
|
this.anomalyController.onAnomalyColorChange(key, value); |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyRemove(key) { |
||||||
|
this.anomalyController.removeAnomalyType(key as string); |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyCancelLabeling(key) { |
||||||
|
this.$scope.$root.appEvent('confirm-modal', { |
||||||
|
title: 'Clear anomaly labeling', |
||||||
|
text2: 'Your changes will be lost.', |
||||||
|
yesText: 'Clear', |
||||||
|
icon: 'fa-warning', |
||||||
|
altActionText: 'Save', |
||||||
|
onAltAction: () => { |
||||||
|
this.onToggleAnomalyTypeLabelingMode(key); |
||||||
|
}, |
||||||
|
onConfirm: () => { |
||||||
|
this.anomalyController.undoLabeling(); |
||||||
|
this.render(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
async onToggleAnomalyTypeLabelingMode(key) { |
||||||
|
await this.anomalyController.toggleAnomalyTypeLabelingMode(key as AnomalyKey); |
||||||
|
this.$scope.$digest(); |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
|
||||||
|
onDKey() { |
||||||
|
if(!this.anomalyController.labelingMode) { |
||||||
|
return; |
||||||
|
} |
||||||
|
this.anomalyController.toggleDeleteMode(); |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyAlertChange(anomalyType: AnomalyType) { |
||||||
|
this.anomalyController.toggleAnomalyTypeAlertEnabled(anomalyType); |
||||||
|
} |
||||||
|
|
||||||
|
onAnomalyToggleVisibility(key: AnomalyKey) { |
||||||
|
this.anomalyController.toggleAnomalyVisibility(key); |
||||||
|
this.render(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export { GraphCtrl, GraphCtrl as PanelCtrl }; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
<div class="editor-row"> |
||||||
|
<div class="section gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes"> |
||||||
|
|
||||||
|
<h5 class="section-heading" ng-show="$index === 0">Left Y</h5> |
||||||
|
<h5 class="section-heading" ng-show="$index === 1">Right Y</h5> |
||||||
|
|
||||||
|
<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch> |
||||||
|
|
||||||
|
<div ng-if="yaxis.show"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Unit</label> |
||||||
|
<div |
||||||
|
class="gf-form-dropdown-typeahead max-width-20" ng-model="yaxis.format" |
||||||
|
dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Scale</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-20"> |
||||||
|
<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-inline"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Y-Min</label> |
||||||
|
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Y-Max</label> |
||||||
|
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Decimals</label> |
||||||
|
<input type="number" class="gf-form-input max-width-20" placeholder="auto" empty-to-null bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Label</label> |
||||||
|
<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">X-Axis</h5> |
||||||
|
<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Mode</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-15"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisModeChanged()"> </select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Series mode --> |
||||||
|
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'"> |
||||||
|
<label class="gf-form-label width-6">Value</label> |
||||||
|
<metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisValueChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Histogram mode --> |
||||||
|
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'"> |
||||||
|
<label class="gf-form-label width-6">Buckets</label> |
||||||
|
<input type="number" class="gf-form-input max-width-8" ng-model="ctrl.panel.xaxis.buckets" placeholder="auto" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Number of buckets'" data-placement="right"> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
<h5> Analytics </h5> |
||||||
|
<div class="editor-row"> |
||||||
|
<div class="section gf-form-group"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-8"> Analytics type </label> |
||||||
|
<div class="gf-form-select-wrapper"> |
||||||
|
<select class="gf-form-input width-12" |
||||||
|
ng-model="ctrl.panel.analyticsType" |
||||||
|
ng-options="source as source for source in ctrl.analyticsTypes" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<h5> Anomaly Types </h5> |
||||||
|
<div class="editor-row"> |
||||||
|
<div class="gf-form" ng-repeat="anomalyType in ctrl.anomalyController.anomalyTypes"> |
||||||
|
|
||||||
|
<label class="gf-form-label width-4"> Name </label> |
||||||
|
<input |
||||||
|
type="text" class="gf-form-input max-width-15" |
||||||
|
ng-model="anomalyType.name" |
||||||
|
ng-disabled="true" |
||||||
|
> |
||||||
|
|
||||||
|
<!-- |
||||||
|
<label class="gf-form-label width-6"> Confidence </label> |
||||||
|
<input |
||||||
|
type="number" class="gf-form-input width-5 ng-valid ng-scope ng-empty ng-dirty ng-valid-number ng-touched" |
||||||
|
placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" |
||||||
|
data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur="" data-original-title="" title="" |
||||||
|
/> |
||||||
|
--> |
||||||
|
|
||||||
|
<label class="gf-form-label width-6"> Color </label> |
||||||
|
<span class="gf-form-label"> |
||||||
|
<color-picker |
||||||
|
color="anomalyType.color" |
||||||
|
onChange="ctrl.onAnomalyColorChange.bind(ctrl, anomalyType.key)" |
||||||
|
/> |
||||||
|
</span> |
||||||
|
|
||||||
|
<label class="gf-form-label"> |
||||||
|
<a class="pointer" tabindex="1" ng-click="ctrl.onToggleAnomalyTypeLabelingMode(anomalyType.key)"> |
||||||
|
<i class="fa fa-bar-chart" ng-if="!anomalyType.saving"></i> |
||||||
|
<i class="fa fa-spinner fa-spin" ng-if="anomalyType.saving"></i> |
||||||
|
<b ng-if="anomalyType.selected && !anomalyType.deleteMode && !anomalyType.saving"> labeling </b> |
||||||
|
<b ng-if="anomalyType.selected && anomalyType.deleteMode && !anomalyType.saving"> deleting </b> |
||||||
|
<b ng-if="anomalyType.saving" ng-disabled="true"> saving... </b> |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
|
||||||
|
|
||||||
|
<label class="gf-form-label"> Alerts: </label> |
||||||
|
<label |
||||||
|
class="gf-form-label text-center" |
||||||
|
style="width: 4rem" |
||||||
|
ng-if="anomalyType.alertEnabled === undefined" |
||||||
|
bs-tooltip="'Alarting status isn`t available. Wait please.'" |
||||||
|
> |
||||||
|
<i class="fa fa-spinner fa-spin"></i> |
||||||
|
</label> |
||||||
|
|
||||||
|
<gf-form-switch |
||||||
|
ng-if="anomalyType.alertEnabled !== undefined" |
||||||
|
on-change="ctrl.onAnomalyAlertChange(anomalyType)" |
||||||
|
checked="anomalyType.alertEnabled" |
||||||
|
style="height: 36px;" |
||||||
|
/> |
||||||
|
|
||||||
|
<label class="gf-form-label"> |
||||||
|
<a |
||||||
|
ng-if="anomalyType.visible" |
||||||
|
ng-disabled="anomalyType.selected" |
||||||
|
bs-tooltip="'Hide. It`s visible now.'" |
||||||
|
ng-click="ctrl.onAnomalyToggleVisibility(anomalyType.key)" |
||||||
|
class="pointer" |
||||||
|
> |
||||||
|
<i class="fa fa-eye"></i> |
||||||
|
</a> |
||||||
|
|
||||||
|
<a |
||||||
|
ng-if="!anomalyType.visible" |
||||||
|
ng-disabled="anomalyType.selected" |
||||||
|
bs-tooltip="'Show. It`s hidden now.'" |
||||||
|
ng-click="ctrl.onAnomalyToggleVisibility(anomalyType.key)" |
||||||
|
class="pointer" |
||||||
|
> |
||||||
|
<i class="fa fa-eye-slash"></i> |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
|
||||||
|
<label class="gf-form-label"> |
||||||
|
<a |
||||||
|
ng-if="!anomalyType.selected" |
||||||
|
ng-click="ctrl.onAnomalyRemove(anomalyType.key)" |
||||||
|
class="pointer" |
||||||
|
> |
||||||
|
<i class="fa fa-trash"></i> |
||||||
|
</a> |
||||||
|
|
||||||
|
<a |
||||||
|
ng-if="anomalyType.selected" |
||||||
|
ng-click="ctrl.onAnomalyCancelLabeling(anomalyType.key)" |
||||||
|
class="pointer" |
||||||
|
> |
||||||
|
<i class="fa fa-ban"></i> |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
|
||||||
|
<label> |
||||||
|
<i ng-if="anomalyType.status === 'learning'" class="grafana-tip fa fa-leanpub ng-scope" bs-tooltip="'Learning'"></i> |
||||||
|
<i ng-if="anomalyType.status === 'pending'" class="grafana-tip fa fa-list-ul ng-scope" bs-tooltip="'Pending'"></i> |
||||||
|
<i ng-if="anomalyType.status === 'failed'" class="grafana-tip fa fa-exclamation-circle ng-scope" bs-tooltip="'Failed'"></i> |
||||||
|
</label> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="editor-row" ng-if="ctrl.anomalyController.creatingAnomalyType"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-4"> Name </label> |
||||||
|
<input |
||||||
|
type="text" class="gf-form-input max-width-15" |
||||||
|
ng-model="ctrl.anomalyController.newAnomalyType.name" |
||||||
|
ng-change="ctrl.onAnomalyNameChange()" |
||||||
|
> |
||||||
|
|
||||||
|
<label class="gf-form-label"> |
||||||
|
<a class="pointer" tabindex="1" ng-click="ctrl.saveAnomalyType()"> |
||||||
|
<b ng-if="!ctrl.anomalyController.savingAnomalyType"> create </b> |
||||||
|
<b ng-if="ctrl.anomalyController.savingAnomalyType" ng-disabled="true"> saving... </b> |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-button-row" ng-if="!ctrl.anomalyController.creatingAnomalyType"> |
||||||
|
<button class="btn btn-inverse" ng-click="ctrl.createNewAnomalyType()"> |
||||||
|
<i class="fa fa-plus"></i> |
||||||
|
Add an Anomaly Type |
||||||
|
</button> |
||||||
|
</div> |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
<div class="edit-tab-with-sidemenu"> |
||||||
|
<aside class="edit-sidemenu-aside"> |
||||||
|
<ul class="edit-sidemenu"> |
||||||
|
<li ng-class="{active: ctrl.subTabIndex === 0}"> |
||||||
|
<a ng-click="ctrl.subTabIndex = 0">Draw options</a> |
||||||
|
</li> |
||||||
|
<li ng-class="{active: ctrl.subTabIndex === 1}"> |
||||||
|
<a ng-click="ctrl.subTabIndex = 1"> |
||||||
|
Series overrides <span class="muted">({{ctrl.panel.seriesOverrides.length}})</span> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li ng-class="{active: ctrl.subTabIndex === 2}"> |
||||||
|
<a ng-click="ctrl.subTabIndex = 2"> |
||||||
|
Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</aside> |
||||||
|
|
||||||
|
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0"> |
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Draw Modes</h5> |
||||||
|
<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch> |
||||||
|
</div> |
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Mode Options</h5> |
||||||
|
<div class="gf-form" ng-show="ctrl.panel.lines"> |
||||||
|
<label class="gf-form-label width-8">Fill</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-5"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gf-form" ng-show="(ctrl.panel.lines)"> |
||||||
|
<label class="gf-form-label width-8">Line Width</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-5"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<gf-form-switch ng-show="ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<div class="gf-form" ng-show="ctrl.panel.points"> |
||||||
|
<label class="gf-form-label width-8">Point Radius</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-5"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Hover tooltip</h5> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-9">Mode</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-8"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-9">Sort order</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-8"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gf-form" ng-show="ctrl.panel.stack"> |
||||||
|
<label class="gf-form-label width-9">Stacked value</label> |
||||||
|
<div class="gf-form-select-wrapper max-width-8"> |
||||||
|
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Stacking & Null value</h5> |
||||||
|
<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack" label="Percent" label-class="width-7" checked="ctrl.panel.percentage" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-7">Null value</label> |
||||||
|
<div class="gf-form-select-wrapper"> |
||||||
|
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1"> |
||||||
|
<div class="gf-form-group"> |
||||||
|
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5> |
||||||
|
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label">alias or regex</label> |
||||||
|
</div> |
||||||
|
<div class="gf-form width-15"> |
||||||
|
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15"> |
||||||
|
</div> |
||||||
|
<div class="gf-form" ng-repeat="option in currentOverrides"> |
||||||
|
<label class="gf-form-label"> |
||||||
|
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i> |
||||||
|
<span ng-show="option.propertyName === 'color'"> |
||||||
|
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i> |
||||||
|
</span> |
||||||
|
<span ng-show="option.propertyName !== 'color'"> |
||||||
|
{{option.name}}: {{option.value}} |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)"> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form gf-form--grow"> |
||||||
|
<div class="gf-form-label gf-form-label--grow"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label"> |
||||||
|
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()"> |
||||||
|
<i class="fa fa-plus"></i> Add override |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2"> |
||||||
|
<grafalys-graph-threshold-form panel-ctrl="ctrl"></grafalys-graph-threshold-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
<div class="editor-row"> |
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Options</h5> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="Show" label-class="width-7" |
||||||
|
checked="ctrl.panel.legend.show" on-change="ctrl.refresh()"> |
||||||
|
</gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="As Table" label-class="width-7" |
||||||
|
checked="ctrl.panel.legend.alignAsTable" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="To the right" label-class="width-7" |
||||||
|
checked="ctrl.panel.legend.rightSide" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<div ng-if="ctrl.panel.legend.rightSide" class="gf-form"> |
||||||
|
<label class="gf-form-label width-7">Width</label> |
||||||
|
<input type="number" class="gf-form-input max-width-5" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right" ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Values</h5> |
||||||
|
|
||||||
|
<div class="gf-form-inline"> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="Min" label-class="width-4" |
||||||
|
checked="ctrl.panel.legend.min" on-change="ctrl.legendValuesOptionChanged()"> |
||||||
|
</gf-form-switch> |
||||||
|
|
||||||
|
<gf-form-switch class="gf-form max-width-12" |
||||||
|
label="Max" label-class="width-6" switch-class="max-width-5" |
||||||
|
checked="ctrl.panel.legend.max" on-change="ctrl.legendValuesOptionChanged()"> |
||||||
|
</gf-form-switch> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-inline"> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="Avg" label-class="width-4" |
||||||
|
checked="ctrl.panel.legend.avg" on-change="ctrl.legendValuesOptionChanged()"> |
||||||
|
</gf-form-switch> |
||||||
|
|
||||||
|
<gf-form-switch class="gf-form max-width-12" |
||||||
|
label="Current" label-class="width-6" switch-class="max-width-5" |
||||||
|
checked="ctrl.panel.legend.current" on-change="ctrl.legendValuesOptionChanged()"> |
||||||
|
</gf-form-switch> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-inline"> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="Total" label-class="width-4" |
||||||
|
checked="ctrl.panel.legend.total" on-change="ctrl.legendValuesOptionChanged()"> |
||||||
|
</gf-form-switch> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label width-6">Decimals</label> |
||||||
|
<input type="number" class="gf-form-input width-5" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="section gf-form-group"> |
||||||
|
<h5 class="section-heading">Hide series</h5> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="With only nulls" label-class="width-10" |
||||||
|
checked="ctrl.panel.legend.hideEmpty" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
<gf-form-switch class="gf-form" |
||||||
|
label="With only zeros" label-class="width-10" |
||||||
|
checked="ctrl.panel.legend.hideZero" on-change="ctrl.render()"> |
||||||
|
</gf-form-switch> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"type": "panel", |
||||||
|
"name": "Hastic Graph Panel", |
||||||
|
"id": "hastic-graph-panel", |
||||||
|
|
||||||
|
"info": { |
||||||
|
"author": { |
||||||
|
"name": "CorpGlory Team", |
||||||
|
"url": "https://corpglory.com" |
||||||
|
}, |
||||||
|
"logos": { |
||||||
|
"small": "img/icn-graph-panel.svg", |
||||||
|
"large": "img/icn-graph-panel.svg" |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
"dependencies": { |
||||||
|
"grafanaVersion": "5.1.x" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,160 @@ |
|||||||
|
import _ from 'lodash'; |
||||||
|
import angular from 'angular'; |
||||||
|
|
||||||
|
export class SeriesOverridesCtrl { |
||||||
|
/** @ngInject */ |
||||||
|
constructor($scope, $element, popoverSrv) { |
||||||
|
$scope.overrideMenu = []; |
||||||
|
$scope.currentOverrides = []; |
||||||
|
$scope.override = $scope.override || {}; |
||||||
|
|
||||||
|
$scope.addOverrideOption = function(name, propertyName, values) { |
||||||
|
var option = { |
||||||
|
text: name, |
||||||
|
propertyName: propertyName, |
||||||
|
index: $scope.overrideMenu.lenght, |
||||||
|
values: values, |
||||||
|
submenu: _.map(values, function(value) { |
||||||
|
return { text: String(value), value: value }; |
||||||
|
}), |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.overrideMenu.push(option); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.setOverride = function(item, subItem) { |
||||||
|
// handle color overrides
|
||||||
|
if (item.propertyName === 'color') { |
||||||
|
$scope.openColorSelector($scope.override['color']); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
$scope.override[item.propertyName] = subItem.value; |
||||||
|
|
||||||
|
// automatically disable lines for this series and the fill bellow to series
|
||||||
|
// can be removed by the user if they still want lines
|
||||||
|
if (item.propertyName === 'fillBelowTo') { |
||||||
|
$scope.override['lines'] = false; |
||||||
|
$scope.ctrl.addSeriesOverride({ alias: subItem.value, lines: false }); |
||||||
|
} |
||||||
|
|
||||||
|
$scope.updateCurrentOverrides(); |
||||||
|
$scope.ctrl.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.colorSelected = function(color) { |
||||||
|
$scope.override['color'] = color; |
||||||
|
$scope.updateCurrentOverrides(); |
||||||
|
$scope.ctrl.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.openColorSelector = function(color) { |
||||||
|
var fakeSeries = { color: color }; |
||||||
|
popoverSrv.show({ |
||||||
|
element: $element.find('.dropdown')[0], |
||||||
|
position: 'top center', |
||||||
|
openOn: 'click', |
||||||
|
template: '<series-color-picker series="series" onColorChange="colorSelected" />', |
||||||
|
model: { |
||||||
|
autoClose: true, |
||||||
|
colorSelected: $scope.colorSelected, |
||||||
|
series: fakeSeries, |
||||||
|
}, |
||||||
|
onClose: function() { |
||||||
|
$scope.ctrl.render(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.removeOverride = function(option) { |
||||||
|
delete $scope.override[option.propertyName]; |
||||||
|
$scope.updateCurrentOverrides(); |
||||||
|
$scope.ctrl.refresh(); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.getSeriesNames = function() { |
||||||
|
return _.map($scope.ctrl.seriesList, function(series: any) { |
||||||
|
return series.alias; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.updateCurrentOverrides = function() { |
||||||
|
$scope.currentOverrides = []; |
||||||
|
_.each($scope.overrideMenu, function(option) { |
||||||
|
var value = $scope.override[option.propertyName]; |
||||||
|
if (_.isUndefined(value)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
$scope.currentOverrides.push({ |
||||||
|
name: option.text, |
||||||
|
propertyName: option.propertyName, |
||||||
|
value: String(value), |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.addOverrideOption('Bars', 'bars', [true, false]); |
||||||
|
$scope.addOverrideOption('Lines', 'lines', [true, false]); |
||||||
|
$scope.addOverrideOption('Line fill', 'fill', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); |
||||||
|
$scope.addOverrideOption('Line width', 'linewidth', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); |
||||||
|
$scope.addOverrideOption('Null point mode', 'nullPointMode', ['connected', 'null', 'null as zero']); |
||||||
|
$scope.addOverrideOption('Fill below to', 'fillBelowTo', $scope.getSeriesNames()); |
||||||
|
$scope.addOverrideOption('Staircase line', 'steppedLine', [true, false]); |
||||||
|
$scope.addOverrideOption('Dashes', 'dashes', [true, false]); |
||||||
|
$scope.addOverrideOption('Dash Length', 'dashLength', [ |
||||||
|
1, |
||||||
|
2, |
||||||
|
3, |
||||||
|
4, |
||||||
|
5, |
||||||
|
6, |
||||||
|
7, |
||||||
|
8, |
||||||
|
9, |
||||||
|
10, |
||||||
|
11, |
||||||
|
12, |
||||||
|
13, |
||||||
|
14, |
||||||
|
15, |
||||||
|
16, |
||||||
|
17, |
||||||
|
18, |
||||||
|
19, |
||||||
|
20, |
||||||
|
]); |
||||||
|
$scope.addOverrideOption('Dash Space', 'spaceLength', [ |
||||||
|
1, |
||||||
|
2, |
||||||
|
3, |
||||||
|
4, |
||||||
|
5, |
||||||
|
6, |
||||||
|
7, |
||||||
|
8, |
||||||
|
9, |
||||||
|
10, |
||||||
|
11, |
||||||
|
12, |
||||||
|
13, |
||||||
|
14, |
||||||
|
15, |
||||||
|
16, |
||||||
|
17, |
||||||
|
18, |
||||||
|
19, |
||||||
|
20, |
||||||
|
]); |
||||||
|
$scope.addOverrideOption('Points', 'points', [true, false]); |
||||||
|
$scope.addOverrideOption('Points Radius', 'pointradius', [1, 2, 3, 4, 5]); |
||||||
|
$scope.addOverrideOption('Stack', 'stack', [true, false, 'A', 'B', 'C', 'D']); |
||||||
|
$scope.addOverrideOption('Color', 'color', ['change']); |
||||||
|
$scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]); |
||||||
|
$scope.addOverrideOption('Z-index', 'zindex', [-3, -2, -1, 0, 1, 2, 3]); |
||||||
|
$scope.addOverrideOption('Transform', 'transform', ['negative-Y']); |
||||||
|
$scope.addOverrideOption('Legend', 'legend', [true, false]); |
||||||
|
$scope.updateCurrentOverrides(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
angular.module('grafana.controllers').controller('SeriesOverridesCtrl', SeriesOverridesCtrl); |
||||||
@ -0,0 +1,100 @@ |
|||||||
|
import { Segment, SegmentKey } from '../model/segment'; |
||||||
|
import { MetricExpanded } from '../model/metric'; |
||||||
|
import { SegmentsSet } from '../model/segment_set'; |
||||||
|
import { AnomalyKey, AnomalyType, AnomalySegment } from '../model/anomaly'; |
||||||
|
|
||||||
|
import { BackendSrv } from 'grafana/app/core/services/backend_srv'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export class AnomalyService { |
||||||
|
constructor(private _backendURL: string, private _backendSrv: BackendSrv) { |
||||||
|
} |
||||||
|
|
||||||
|
async postNewAnomalyType(metric: MetricExpanded, newAnomalyType: AnomalyType, panelId: number) { |
||||||
|
return this._backendSrv.post( |
||||||
|
this._backendURL + '/anomalies',
|
||||||
|
{ |
||||||
|
name: newAnomalyType.name, |
||||||
|
metric: metric.toJSON(), |
||||||
|
panelUrl: window.location.origin + window.location.pathname + `?panelId=${panelId}&fullscreen` |
||||||
|
} |
||||||
|
) |
||||||
|
}; |
||||||
|
|
||||||
|
async updateSegments( |
||||||
|
key: AnomalyKey, addedSegments: SegmentsSet<Segment>, removedSegments: SegmentsSet<Segment> |
||||||
|
): Promise<SegmentKey[]> { |
||||||
|
|
||||||
|
const getJSONs = (segs: SegmentsSet<Segment>) => segs.getSegments().map(segment => ({ |
||||||
|
"start": segment.from, |
||||||
|
"finish": segment.to |
||||||
|
})); |
||||||
|
|
||||||
|
var payload = { |
||||||
|
name: key, |
||||||
|
added_segments: getJSONs(addedSegments), |
||||||
|
removed_segments: removedSegments.getSegments().map(s => s.key) |
||||||
|
} |
||||||
|
|
||||||
|
var data = await this._backendSrv.patch(this._backendURL + '/segments', payload); |
||||||
|
if(data.added_ids === undefined) { |
||||||
|
throw new Error('Server didn`t send added_ids'); |
||||||
|
} |
||||||
|
|
||||||
|
return data.added_ids as SegmentKey[]; |
||||||
|
} |
||||||
|
|
||||||
|
async getSegments(key: AnomalyKey, from?: number, to?: number): Promise<AnomalySegment[]> { |
||||||
|
var payload: any = { anomaly_id: key }; |
||||||
|
if(from !== undefined) { |
||||||
|
payload['from'] = from; |
||||||
|
} |
||||||
|
if(to !== undefined) { |
||||||
|
payload['to'] = to; |
||||||
|
} |
||||||
|
var data = await this._backendSrv.get( |
||||||
|
this._backendURL + '/segments', |
||||||
|
payload |
||||||
|
); |
||||||
|
if(data.segments === undefined) { |
||||||
|
throw new Error('Server didn`t return segments array'); |
||||||
|
} |
||||||
|
var segments = data.segments as { id: number, start: number, finish: number, labeled: boolean }[]; |
||||||
|
return segments.map(s => new AnomalySegment(s.labeled, s.id, s.start, s.finish)); |
||||||
|
} |
||||||
|
|
||||||
|
async * getAnomalyTypeStatusGenerator(key: AnomalyKey, duration: number) { |
||||||
|
let statusCheck = async () => { |
||||||
|
var data = await this._backendSrv.get( |
||||||
|
this._backendURL + '/anomalies/status', { name: key } |
||||||
|
); |
||||||
|
return data.status as string; |
||||||
|
} |
||||||
|
|
||||||
|
let timeout = async () => new Promise( |
||||||
|
resolve => setTimeout(resolve, duration) |
||||||
|
); |
||||||
|
|
||||||
|
while(true) { |
||||||
|
yield await statusCheck(); |
||||||
|
await timeout(); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
async getAlertEnabled(key: AnomalyKey): Promise<boolean> { |
||||||
|
var data = await this._backendSrv.get( |
||||||
|
this._backendURL + '/alerts', { anomaly_id: key } |
||||||
|
); |
||||||
|
return data.enable as boolean; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
async setAlertEnabled(key: AnomalyKey, value: boolean): Promise<void> { |
||||||
|
return this._backendSrv.post( |
||||||
|
this._backendURL + '/alerts', { anomaly_id: key, enable: value } |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
var template = ` |
||||||
|
<div class="graph-panel" ng-class="{'graph-panel--legend-right': ctrl.panel.legend.rightSide}"> |
||||||
|
<div class="graph-panel__chart" id="graphPanel" ng-dblclick="ctrl.zoomOut()" /> |
||||||
|
<div class="grafalys-graph-legend" id="graphLegend" /> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
|
||||||
|
export default template; |
||||||
@ -0,0 +1,238 @@ |
|||||||
|
import './vendor/flot/jquery.flot'; |
||||||
|
import * as $ from 'jquery'; |
||||||
|
import _ from 'lodash'; |
||||||
|
|
||||||
|
export class ThresholdManager { |
||||||
|
plot: any; |
||||||
|
placeholder: any; |
||||||
|
height: any; |
||||||
|
thresholds: any; |
||||||
|
needsCleanup: boolean; |
||||||
|
hasSecondYAxis: any; |
||||||
|
|
||||||
|
constructor(private panelCtrl) {} |
||||||
|
|
||||||
|
getHandleHtml(handleIndex, model, valueStr) { |
||||||
|
var stateClass = model.colorMode; |
||||||
|
if (model.colorMode === 'custom') { |
||||||
|
stateClass = 'critical'; |
||||||
|
} |
||||||
|
|
||||||
|
return ` |
||||||
|
<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}"> |
||||||
|
<div class="alert-handle-line alert-handle-line--${stateClass}"> |
||||||
|
</div> |
||||||
|
<div class="alert-handle" data-handle-index="${handleIndex}"> |
||||||
|
<i class="icon-gf icon-gf-${stateClass} alert-state-${stateClass}"></i> |
||||||
|
<span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span> |
||||||
|
</div> |
||||||
|
</div>`;
|
||||||
|
} |
||||||
|
|
||||||
|
initDragging(evt) { |
||||||
|
var handleElem = $(evt.currentTarget).parents('.alert-handle-wrapper'); |
||||||
|
var handleIndex = $(evt.currentTarget).data('handleIndex'); |
||||||
|
|
||||||
|
var lastY = null; |
||||||
|
var posTop; |
||||||
|
var plot = this.plot; |
||||||
|
var panelCtrl = this.panelCtrl; |
||||||
|
var model = this.thresholds[handleIndex]; |
||||||
|
|
||||||
|
function dragging(evt) { |
||||||
|
if (lastY === null) { |
||||||
|
lastY = evt.clientY; |
||||||
|
} else { |
||||||
|
var diff = evt.clientY - lastY; |
||||||
|
posTop = posTop + diff; |
||||||
|
lastY = evt.clientY; |
||||||
|
handleElem.css({ top: posTop + diff }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function stopped() { |
||||||
|
// calculate graph level
|
||||||
|
var graphValue = plot.c2p({ left: 0, top: posTop }).y; |
||||||
|
graphValue = parseInt(graphValue.toFixed(0)); |
||||||
|
model.value = graphValue; |
||||||
|
|
||||||
|
handleElem.off('mousemove', dragging); |
||||||
|
handleElem.off('mouseup', dragging); |
||||||
|
handleElem.off('mouseleave', dragging); |
||||||
|
|
||||||
|
// trigger digest and render
|
||||||
|
panelCtrl.$scope.$apply(function() { |
||||||
|
panelCtrl.render(); |
||||||
|
panelCtrl.events.emit('threshold-changed', { |
||||||
|
threshold: model, |
||||||
|
handleIndex: handleIndex, |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
lastY = null; |
||||||
|
posTop = handleElem.position().top; |
||||||
|
|
||||||
|
handleElem.on('mousemove', dragging); |
||||||
|
handleElem.on('mouseup', stopped); |
||||||
|
handleElem.on('mouseleave', stopped); |
||||||
|
} |
||||||
|
|
||||||
|
cleanUp() { |
||||||
|
this.placeholder.find('.alert-handle-wrapper').remove(); |
||||||
|
this.needsCleanup = false; |
||||||
|
} |
||||||
|
|
||||||
|
renderHandle(handleIndex, defaultHandleTopPos) { |
||||||
|
var model = this.thresholds[handleIndex]; |
||||||
|
var value = model.value; |
||||||
|
var valueStr = value; |
||||||
|
var handleTopPos = 0; |
||||||
|
|
||||||
|
// handle no value
|
||||||
|
if (!_.isNumber(value)) { |
||||||
|
valueStr = ''; |
||||||
|
handleTopPos = defaultHandleTopPos; |
||||||
|
} else { |
||||||
|
var valueCanvasPos = this.plot.p2c({ x: 0, y: value }); |
||||||
|
handleTopPos = Math.round(Math.min(Math.max(valueCanvasPos.top, 0), this.height) - 6); |
||||||
|
} |
||||||
|
|
||||||
|
var handleElem = $(this.getHandleHtml(handleIndex, model, valueStr)); |
||||||
|
this.placeholder.append(handleElem); |
||||||
|
|
||||||
|
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === ''); |
||||||
|
handleElem.css({ top: handleTopPos }); |
||||||
|
} |
||||||
|
|
||||||
|
shouldDrawHandles() { |
||||||
|
return !this.hasSecondYAxis && this.panelCtrl.editingThresholds && this.panelCtrl.panel.thresholds.length > 0; |
||||||
|
} |
||||||
|
|
||||||
|
prepare(elem, data) { |
||||||
|
this.hasSecondYAxis = false; |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
if (data[i].yaxis > 1) { |
||||||
|
this.hasSecondYAxis = true; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (this.shouldDrawHandles()) { |
||||||
|
var thresholdMargin = this.panelCtrl.panel.thresholds.length > 1 ? '220px' : '110px'; |
||||||
|
elem.css('margin-right', thresholdMargin); |
||||||
|
} else if (this.needsCleanup) { |
||||||
|
elem.css('margin-right', '0'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
draw(plot) { |
||||||
|
this.thresholds = this.panelCtrl.panel.thresholds; |
||||||
|
this.plot = plot; |
||||||
|
this.placeholder = plot.getPlaceholder(); |
||||||
|
|
||||||
|
if (this.needsCleanup) { |
||||||
|
this.cleanUp(); |
||||||
|
} |
||||||
|
|
||||||
|
if (!this.shouldDrawHandles()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.height = plot.height(); |
||||||
|
|
||||||
|
if (this.thresholds.length > 0) { |
||||||
|
this.renderHandle(0, 10); |
||||||
|
} |
||||||
|
if (this.thresholds.length > 1) { |
||||||
|
this.renderHandle(1, this.height - 30); |
||||||
|
} |
||||||
|
|
||||||
|
this.placeholder.off('mousedown', '.alert-handle'); |
||||||
|
this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this)); |
||||||
|
this.needsCleanup = true; |
||||||
|
} |
||||||
|
|
||||||
|
addFlotOptions(options, panel) { |
||||||
|
if (!panel.thresholds || panel.thresholds.length === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var gtLimit = Infinity; |
||||||
|
var ltLimit = -Infinity; |
||||||
|
var i, threshold, other; |
||||||
|
|
||||||
|
for (i = 0; i < panel.thresholds.length; i++) { |
||||||
|
threshold = panel.thresholds[i]; |
||||||
|
if (!_.isNumber(threshold.value)) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
var limit; |
||||||
|
switch (threshold.op) { |
||||||
|
case 'gt': { |
||||||
|
limit = gtLimit; |
||||||
|
// if next threshold is less then op and greater value, then use that as limit
|
||||||
|
if (panel.thresholds.length > i + 1) { |
||||||
|
other = panel.thresholds[i + 1]; |
||||||
|
if (other.value > threshold.value) { |
||||||
|
limit = other.value; |
||||||
|
ltLimit = limit; |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'lt': { |
||||||
|
limit = ltLimit; |
||||||
|
// if next threshold is less then op and greater value, then use that as limit
|
||||||
|
if (panel.thresholds.length > i + 1) { |
||||||
|
other = panel.thresholds[i + 1]; |
||||||
|
if (other.value < threshold.value) { |
||||||
|
limit = other.value; |
||||||
|
gtLimit = limit; |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var fillColor, lineColor; |
||||||
|
switch (threshold.colorMode) { |
||||||
|
case 'critical': { |
||||||
|
fillColor = 'rgba(234, 112, 112, 0.12)'; |
||||||
|
lineColor = 'rgba(237, 46, 24, 0.60)'; |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'warning': { |
||||||
|
fillColor = 'rgba(235, 138, 14, 0.12)'; |
||||||
|
lineColor = 'rgba(247, 149, 32, 0.60)'; |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'ok': { |
||||||
|
fillColor = 'rgba(11, 237, 50, 0.090)'; |
||||||
|
lineColor = 'rgba(6,163,69, 0.60)'; |
||||||
|
break; |
||||||
|
} |
||||||
|
case 'custom': { |
||||||
|
fillColor = threshold.fillColor; |
||||||
|
lineColor = threshold.lineColor; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// fill
|
||||||
|
if (threshold.fill) { |
||||||
|
options.grid.markings.push({ |
||||||
|
yaxis: { from: threshold.value, to: limit }, |
||||||
|
color: fillColor, |
||||||
|
}); |
||||||
|
} |
||||||
|
if (threshold.line) { |
||||||
|
options.grid.markings.push({ |
||||||
|
yaxis: { from: threshold.value, to: threshold.value }, |
||||||
|
color: lineColor, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
|
||||||
|
import coreModule from 'grafana/app/core/core_module'; |
||||||
|
|
||||||
|
export class ThresholdFormCtrl { |
||||||
|
panelCtrl: any; |
||||||
|
panel: any; |
||||||
|
disabled: boolean; |
||||||
|
|
||||||
|
/** @ngInject */ |
||||||
|
constructor($scope) { |
||||||
|
this.panel = this.panelCtrl.panel; |
||||||
|
|
||||||
|
if (this.panel.alert) { |
||||||
|
this.disabled = true; |
||||||
|
} |
||||||
|
|
||||||
|
var unbindDestroy = $scope.$on('$destroy', () => { |
||||||
|
this.panelCtrl.editingThresholds = false; |
||||||
|
this.panelCtrl.render(); |
||||||
|
unbindDestroy(); |
||||||
|
}); |
||||||
|
|
||||||
|
this.panelCtrl.editingThresholds = true; |
||||||
|
} |
||||||
|
|
||||||
|
addThreshold() { |
||||||
|
this.panel.thresholds.push({ |
||||||
|
value: undefined, |
||||||
|
colorMode: 'critical', |
||||||
|
op: 'gt', |
||||||
|
fill: true, |
||||||
|
line: true, |
||||||
|
}); |
||||||
|
this.panelCtrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
removeThreshold(index) { |
||||||
|
this.panel.thresholds.splice(index, 1); |
||||||
|
this.panelCtrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
this.panelCtrl.render(); |
||||||
|
} |
||||||
|
|
||||||
|
onFillColorChange(index) { |
||||||
|
return newColor => { |
||||||
|
this.panel.thresholds[index].fillColor = newColor; |
||||||
|
this.render(); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
onLineColorChange(index) { |
||||||
|
return newColor => { |
||||||
|
this.panel.thresholds[index].lineColor = newColor; |
||||||
|
this.render(); |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var template = ` |
||||||
|
<div class="gf-form-group"> |
||||||
|
<h5>Thresholds</h5> |
||||||
|
<p class="muted" ng-show="ctrl.disabled"> |
||||||
|
Visual thresholds options <strong>disabled.</strong> |
||||||
|
Visit the Alert tab update your thresholds. <br> |
||||||
|
To re-enable thresholds, the alert rule must be deleted from this panel. |
||||||
|
</p> |
||||||
|
<div ng-class="{'thresholds-form-disabled': ctrl.disabled}"> |
||||||
|
<div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.thresholds"> |
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label">T{{$index+1}}</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<div class="gf-form-select-wrapper"> |
||||||
|
<select class="gf-form-input" ng-model="threshold.op" |
||||||
|
ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select> |
||||||
|
</div> |
||||||
|
<input type="number" ng-model="threshold.value" class="gf-form-input width-8" |
||||||
|
ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label">Color</label> |
||||||
|
<div class="gf-form-select-wrapper"> |
||||||
|
<select class="gf-form-input" ng-model="threshold.colorMode" |
||||||
|
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<gf-form-switch class="gf-form" label="Fill" checked="threshold.fill" |
||||||
|
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch> |
||||||
|
|
||||||
|
<div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'"> |
||||||
|
<label class="gf-form-label">Fill color</label> |
||||||
|
<span class="gf-form-label"> |
||||||
|
<color-picker color="threshold.fillColor" onChange="ctrl.onFillColorChange($index)"></color-picker> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<gf-form-switch class="gf-form" label="Line" checked="threshold.line" |
||||||
|
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch> |
||||||
|
|
||||||
|
<div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'"> |
||||||
|
<label class="gf-form-label">Line color</label> |
||||||
|
<span class="gf-form-label"> |
||||||
|
<color-picker color="threshold.lineColor" onChange="ctrl.onLineColorChange($index)"></color-picker> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form"> |
||||||
|
<label class="gf-form-label"> |
||||||
|
<a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled"> |
||||||
|
<i class="fa fa-trash"></i> |
||||||
|
</a> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-button-row"> |
||||||
|
<button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled"> |
||||||
|
<i class="fa fa-plus"></i> Add Threshold |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
|
||||||
|
coreModule.directive('grafalysGraphThresholdForm', function() { |
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
template: template, |
||||||
|
controller: ThresholdFormCtrl, |
||||||
|
bindToController: true, |
||||||
|
controllerAs: 'ctrl', |
||||||
|
scope: { |
||||||
|
panelCtrl: '=', |
||||||
|
}, |
||||||
|
}; |
||||||
|
}); |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
/* Flot plugin for showing crosshairs when the mouse hovers over the plot. |
||||||
|
|
||||||
|
Copyright (c) 2007-2014 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
The plugin supports these options: |
||||||
|
|
||||||
|
crosshair: { |
||||||
|
mode: null or "x" or "y" or "xy" |
||||||
|
color: color |
||||||
|
lineWidth: number |
||||||
|
} |
||||||
|
|
||||||
|
Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical |
||||||
|
crosshair that lets you trace the values on the x axis, "y" enables a |
||||||
|
horizontal crosshair and "xy" enables them both. "color" is the color of the |
||||||
|
crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of |
||||||
|
the drawn lines (default is 1). |
||||||
|
|
||||||
|
The plugin also adds four public methods: |
||||||
|
|
||||||
|
- setCrosshair( pos ) |
||||||
|
|
||||||
|
Set the position of the crosshair. Note that this is cleared if the user |
||||||
|
moves the mouse. "pos" is in coordinates of the plot and should be on the |
||||||
|
form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple |
||||||
|
axes), which is coincidentally the same format as what you get from a |
||||||
|
"plothover" event. If "pos" is null, the crosshair is cleared. |
||||||
|
|
||||||
|
- clearCrosshair() |
||||||
|
|
||||||
|
Clear the crosshair. |
||||||
|
|
||||||
|
- lockCrosshair(pos) |
||||||
|
|
||||||
|
Cause the crosshair to lock to the current location, no longer updating if |
||||||
|
the user moves the mouse. Optionally supply a position (passed on to |
||||||
|
setCrosshair()) to move it to. |
||||||
|
|
||||||
|
Example usage: |
||||||
|
|
||||||
|
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; |
||||||
|
$("#graph").bind( "plothover", function ( evt, position, item ) { |
||||||
|
if ( item ) { |
||||||
|
// Lock the crosshair to the data point being hovered
|
||||||
|
myFlot.lockCrosshair({ |
||||||
|
x: item.datapoint[ 0 ], |
||||||
|
y: item.datapoint[ 1 ] |
||||||
|
}); |
||||||
|
} else { |
||||||
|
// Return normal crosshair operation
|
||||||
|
myFlot.unlockCrosshair(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
- unlockCrosshair() |
||||||
|
|
||||||
|
Free the crosshair to move again after locking it. |
||||||
|
*/ |
||||||
|
|
||||||
|
(function ($) { |
||||||
|
var options = { |
||||||
|
crosshair: { |
||||||
|
mode: null, // one of null, "x", "y" or "xy",
|
||||||
|
color: "rgba(170, 0, 0, 0.80)", |
||||||
|
lineWidth: 1 |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
// position of crosshair in pixels
|
||||||
|
var crosshair = { x: -1, y: -1, locked: false }; |
||||||
|
|
||||||
|
plot.setCrosshair = function setCrosshair(pos) { |
||||||
|
if (!pos) |
||||||
|
crosshair.x = -1; |
||||||
|
else { |
||||||
|
var o = plot.p2c(pos); |
||||||
|
crosshair.x = Math.max(0, Math.min(o.left, plot.width())); |
||||||
|
crosshair.y = Math.max(0, Math.min(o.top, plot.height())); |
||||||
|
} |
||||||
|
|
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
}; |
||||||
|
|
||||||
|
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||||||
|
|
||||||
|
plot.lockCrosshair = function lockCrosshair(pos) { |
||||||
|
if (pos) |
||||||
|
plot.setCrosshair(pos); |
||||||
|
crosshair.locked = true; |
||||||
|
}; |
||||||
|
|
||||||
|
plot.unlockCrosshair = function unlockCrosshair() { |
||||||
|
crosshair.locked = false; |
||||||
|
}; |
||||||
|
|
||||||
|
function onMouseOut(e) { |
||||||
|
if (crosshair.locked) |
||||||
|
return; |
||||||
|
|
||||||
|
if (crosshair.x != -1) { |
||||||
|
crosshair.x = -1; |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function onMouseMove(e) { |
||||||
|
if (crosshair.locked) |
||||||
|
return; |
||||||
|
|
||||||
|
if (plot.getSelection && plot.getSelection()) { |
||||||
|
crosshair.x = -1; // hide the crosshair while selecting
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var offset = plot.offset(); |
||||||
|
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); |
||||||
|
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} |
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(function (plot, eventHolder) { |
||||||
|
if (!plot.getOptions().crosshair.mode) |
||||||
|
return; |
||||||
|
|
||||||
|
eventHolder.mouseout(onMouseOut); |
||||||
|
eventHolder.mousemove(onMouseMove); |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.drawOverlay.push(function (plot, ctx) { |
||||||
|
var c = plot.getOptions().crosshair; |
||||||
|
if (!c.mode) |
||||||
|
return; |
||||||
|
|
||||||
|
var plotOffset = plot.getPlotOffset(); |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.translate(plotOffset.left, plotOffset.top); |
||||||
|
|
||||||
|
if (crosshair.x != -1) { |
||||||
|
var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; |
||||||
|
|
||||||
|
ctx.strokeStyle = c.color; |
||||||
|
ctx.lineWidth = c.lineWidth; |
||||||
|
ctx.lineJoin = "round"; |
||||||
|
|
||||||
|
ctx.beginPath(); |
||||||
|
if (c.mode.indexOf("x") != -1) { |
||||||
|
var drawX = Math.floor(crosshair.x) + adj; |
||||||
|
ctx.moveTo(drawX, 0); |
||||||
|
ctx.lineTo(drawX, plot.height()); |
||||||
|
} |
||||||
|
if (c.mode.indexOf("y") != -1) { |
||||||
|
var drawY = Math.floor(crosshair.y) + adj; |
||||||
|
ctx.moveTo(0, drawY); |
||||||
|
ctx.lineTo(plot.width(), drawY); |
||||||
|
} |
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
ctx.restore(); |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.shutdown.push(function (plot, eventHolder) { |
||||||
|
eventHolder.unbind("mouseout", onMouseOut); |
||||||
|
eventHolder.unbind("mousemove", onMouseMove); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: 'crosshair', |
||||||
|
version: '1.0' |
||||||
|
}); |
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,236 @@ |
|||||||
|
/* |
||||||
|
* jQuery.flot.dashes |
||||||
|
* |
||||||
|
* options = { |
||||||
|
* series: { |
||||||
|
* dashes: { |
||||||
|
* |
||||||
|
* // show
|
||||||
|
* // default: false
|
||||||
|
* // Whether to show dashes for the series.
|
||||||
|
* show: <boolean>, |
||||||
|
* |
||||||
|
* // lineWidth
|
||||||
|
* // default: 2
|
||||||
|
* // The width of the dashed line in pixels.
|
||||||
|
* lineWidth: <number>, |
||||||
|
* |
||||||
|
* // dashLength
|
||||||
|
* // default: 10
|
||||||
|
* // Controls the length of the individual dashes and the amount of
|
||||||
|
* // space between them.
|
||||||
|
* // If this is a number, the dashes and spaces will have that length.
|
||||||
|
* // If this is an array, it is read as [ dashLength, spaceLength ]
|
||||||
|
* dashLength: <number> or <array[2]> |
||||||
|
* } |
||||||
|
* } |
||||||
|
* } |
||||||
|
*/ |
||||||
|
(function($){ |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(function(plot, series, datapoints) { |
||||||
|
|
||||||
|
if (!series.dashes.show) return; |
||||||
|
|
||||||
|
plot.hooks.draw.push(function(plot, ctx) { |
||||||
|
|
||||||
|
var plotOffset = plot.getPlotOffset(), |
||||||
|
axisx = series.xaxis, |
||||||
|
axisy = series.yaxis; |
||||||
|
|
||||||
|
function plotDashes(xoffset, yoffset) { |
||||||
|
|
||||||
|
var points = datapoints.points, |
||||||
|
ps = datapoints.pointsize, |
||||||
|
prevx = null, |
||||||
|
prevy = null, |
||||||
|
dashRemainder = 0, |
||||||
|
dashOn = true, |
||||||
|
dashOnLength, |
||||||
|
dashOffLength; |
||||||
|
|
||||||
|
if (series.dashes.dashLength[0]) { |
||||||
|
dashOnLength = series.dashes.dashLength[0]; |
||||||
|
if (series.dashes.dashLength[1]) { |
||||||
|
dashOffLength = series.dashes.dashLength[1]; |
||||||
|
} else { |
||||||
|
dashOffLength = dashOnLength; |
||||||
|
} |
||||||
|
} else { |
||||||
|
dashOffLength = dashOnLength = series.dashes.dashLength; |
||||||
|
} |
||||||
|
|
||||||
|
ctx.beginPath(); |
||||||
|
|
||||||
|
for (var i = ps; i < points.length; i += ps) { |
||||||
|
|
||||||
|
var x1 = points[i - ps], |
||||||
|
y1 = points[i - ps + 1], |
||||||
|
x2 = points[i], |
||||||
|
y2 = points[i + 1]; |
||||||
|
|
||||||
|
if (x1 == null || x2 == null) continue; |
||||||
|
|
||||||
|
// clip with ymin
|
||||||
|
if (y1 <= y2 && y1 < axisy.min) { |
||||||
|
if (y2 < axisy.min) continue; // line segment is outside
|
||||||
|
// compute new intersection point
|
||||||
|
x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
||||||
|
y1 = axisy.min; |
||||||
|
} else if (y2 <= y1 && y2 < axisy.min) { |
||||||
|
if (y1 < axisy.min) continue; |
||||||
|
x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; |
||||||
|
y2 = axisy.min; |
||||||
|
} |
||||||
|
|
||||||
|
// clip with ymax
|
||||||
|
if (y1 >= y2 && y1 > axisy.max) { |
||||||
|
if (y2 > axisy.max) continue; |
||||||
|
x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
||||||
|
y1 = axisy.max; |
||||||
|
} else if (y2 >= y1 && y2 > axisy.max) { |
||||||
|
if (y1 > axisy.max) continue; |
||||||
|
x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; |
||||||
|
y2 = axisy.max; |
||||||
|
} |
||||||
|
|
||||||
|
// clip with xmin
|
||||||
|
if (x1 <= x2 && x1 < axisx.min) { |
||||||
|
if (x2 < axisx.min) continue; |
||||||
|
y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
||||||
|
x1 = axisx.min; |
||||||
|
} else if (x2 <= x1 && x2 < axisx.min) { |
||||||
|
if (x1 < axisx.min) continue; |
||||||
|
y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; |
||||||
|
x2 = axisx.min; |
||||||
|
} |
||||||
|
|
||||||
|
// clip with xmax
|
||||||
|
if (x1 >= x2 && x1 > axisx.max) { |
||||||
|
if (x2 > axisx.max) continue; |
||||||
|
y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
||||||
|
x1 = axisx.max; |
||||||
|
} else if (x2 >= x1 && x2 > axisx.max) { |
||||||
|
if (x1 > axisx.max) continue; |
||||||
|
y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; |
||||||
|
x2 = axisx.max; |
||||||
|
} |
||||||
|
|
||||||
|
if (x1 != prevx || y1 != prevy) { |
||||||
|
ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); |
||||||
|
} |
||||||
|
|
||||||
|
var ax1 = axisx.p2c(x1) + xoffset, |
||||||
|
ay1 = axisy.p2c(y1) + yoffset, |
||||||
|
ax2 = axisx.p2c(x2) + xoffset, |
||||||
|
ay2 = axisy.p2c(y2) + yoffset, |
||||||
|
dashOffset; |
||||||
|
|
||||||
|
function lineSegmentOffset(segmentLength) { |
||||||
|
|
||||||
|
var c = Math.sqrt(Math.pow(ax2 - ax1, 2) + Math.pow(ay2 - ay1, 2)); |
||||||
|
|
||||||
|
if (c <= segmentLength) { |
||||||
|
return { |
||||||
|
deltaX: ax2 - ax1, |
||||||
|
deltaY: ay2 - ay1, |
||||||
|
distance: c, |
||||||
|
remainder: segmentLength - c |
||||||
|
} |
||||||
|
} else { |
||||||
|
var xsign = ax2 > ax1 ? 1 : -1, |
||||||
|
ysign = ay2 > ay1 ? 1 : -1; |
||||||
|
return { |
||||||
|
deltaX: xsign * Math.sqrt(Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), |
||||||
|
deltaY: ysign * Math.sqrt(Math.pow(segmentLength, 2) - Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), |
||||||
|
distance: segmentLength, |
||||||
|
remainder: 0 |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
//-end lineSegmentOffset
|
||||||
|
|
||||||
|
do { |
||||||
|
|
||||||
|
dashOffset = lineSegmentOffset( |
||||||
|
dashRemainder > 0 ? dashRemainder : |
||||||
|
dashOn ? dashOnLength : dashOffLength); |
||||||
|
|
||||||
|
if (dashOffset.deltaX != 0 || dashOffset.deltaY != 0) { |
||||||
|
if (dashOn) { |
||||||
|
ctx.lineTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); |
||||||
|
} else { |
||||||
|
ctx.moveTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
dashOn = !dashOn; |
||||||
|
dashRemainder = dashOffset.remainder; |
||||||
|
ax1 += dashOffset.deltaX; |
||||||
|
ay1 += dashOffset.deltaY; |
||||||
|
|
||||||
|
} while (dashOffset.distance > 0); |
||||||
|
|
||||||
|
prevx = x2; |
||||||
|
prevy = y2; |
||||||
|
} |
||||||
|
|
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
//-end plotDashes
|
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.translate(plotOffset.left, plotOffset.top); |
||||||
|
ctx.lineJoin = 'round'; |
||||||
|
|
||||||
|
var lw = series.dashes.lineWidth, |
||||||
|
sw = series.shadowSize; |
||||||
|
|
||||||
|
// FIXME: consider another form of shadow when filling is turned on
|
||||||
|
if (lw > 0 && sw > 0) { |
||||||
|
// draw shadow as a thick and thin line with transparency
|
||||||
|
ctx.lineWidth = sw; |
||||||
|
ctx.strokeStyle = "rgba(0,0,0,0.1)"; |
||||||
|
// position shadow at angle from the mid of line
|
||||||
|
var angle = Math.PI/18; |
||||||
|
plotDashes(Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2)); |
||||||
|
ctx.lineWidth = sw/2; |
||||||
|
plotDashes(Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4)); |
||||||
|
} |
||||||
|
|
||||||
|
ctx.lineWidth = lw; |
||||||
|
ctx.strokeStyle = series.color; |
||||||
|
|
||||||
|
if (lw > 0) { |
||||||
|
plotDashes(0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
|
||||||
|
}); |
||||||
|
//-end draw hook
|
||||||
|
|
||||||
|
}); |
||||||
|
//-end processDatapoints hook
|
||||||
|
|
||||||
|
} |
||||||
|
//-end init
|
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: { |
||||||
|
series: { |
||||||
|
dashes: { |
||||||
|
show: false, |
||||||
|
lineWidth: 2, |
||||||
|
dashLength: 10 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
name: 'dashes', |
||||||
|
version: '0.1' |
||||||
|
}); |
||||||
|
|
||||||
|
})(jQuery) |
||||||
@ -0,0 +1,604 @@ |
|||||||
|
define([ |
||||||
|
'jquery', |
||||||
|
'lodash', |
||||||
|
'angular', |
||||||
|
'tether-drop', |
||||||
|
], |
||||||
|
function ($, _, angular, Drop) { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
function createAnnotationToolip(element, event, plot) { |
||||||
|
var injector = angular.element(document).injector(); |
||||||
|
var content = document.createElement('div'); |
||||||
|
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>'; |
||||||
|
|
||||||
|
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) { |
||||||
|
var eventManager = plot.getOptions().events.manager; |
||||||
|
var tmpScope = $rootScope.$new(true); |
||||||
|
tmpScope.event = event; |
||||||
|
tmpScope.onEdit = function() { |
||||||
|
eventManager.editEvent(event); |
||||||
|
}; |
||||||
|
|
||||||
|
$compile(content)(tmpScope); |
||||||
|
tmpScope.$digest(); |
||||||
|
tmpScope.$destroy(); |
||||||
|
|
||||||
|
var drop = new Drop({ |
||||||
|
target: element[0], |
||||||
|
content: content, |
||||||
|
position: "bottom center", |
||||||
|
classes: 'drop-popover drop-popover--annotation', |
||||||
|
openOn: 'hover', |
||||||
|
hoverCloseDelay: 200, |
||||||
|
tetherOptions: { |
||||||
|
constraints: [{to: 'window', pin: true, attachment: "both"}] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
drop.open(); |
||||||
|
|
||||||
|
drop.on('close', function() { |
||||||
|
setTimeout(function() { |
||||||
|
drop.destroy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}]); |
||||||
|
} |
||||||
|
|
||||||
|
var markerElementToAttachTo = null; |
||||||
|
|
||||||
|
function createEditPopover(element, event, plot) { |
||||||
|
var eventManager = plot.getOptions().events.manager; |
||||||
|
if (eventManager.editorOpen) { |
||||||
|
// update marker element to attach to (needed in case of legend on the right
|
||||||
|
// when there is a double render pass and the inital marker element is removed)
|
||||||
|
markerElementToAttachTo = element; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// mark as openend
|
||||||
|
eventManager.editorOpened(); |
||||||
|
// set marker elment to attache to
|
||||||
|
markerElementToAttachTo = element; |
||||||
|
|
||||||
|
// wait for element to be attached and positioned
|
||||||
|
setTimeout(function() { |
||||||
|
|
||||||
|
var injector = angular.element(document).injector(); |
||||||
|
var content = document.createElement('div'); |
||||||
|
content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>'; |
||||||
|
|
||||||
|
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) { |
||||||
|
var scope = $rootScope.$new(true); |
||||||
|
var drop; |
||||||
|
|
||||||
|
scope.event = event; |
||||||
|
scope.panelCtrl = eventManager.panelCtrl; |
||||||
|
scope.close = function() { |
||||||
|
drop.close(); |
||||||
|
}; |
||||||
|
|
||||||
|
$compile(content)(scope); |
||||||
|
scope.$digest(); |
||||||
|
|
||||||
|
drop = new Drop({ |
||||||
|
target: markerElementToAttachTo[0], |
||||||
|
content: content, |
||||||
|
position: "bottom center", |
||||||
|
classes: 'drop-popover drop-popover--form', |
||||||
|
openOn: 'click', |
||||||
|
tetherOptions: { |
||||||
|
constraints: [{to: 'window', pin: true, attachment: "both"}] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
drop.open(); |
||||||
|
eventManager.editorOpened(); |
||||||
|
|
||||||
|
drop.on('close', function() { |
||||||
|
// need timeout here in order call drop.destroy
|
||||||
|
setTimeout(function() { |
||||||
|
eventManager.editorClosed(); |
||||||
|
scope.$destroy(); |
||||||
|
drop.destroy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}]); |
||||||
|
|
||||||
|
}, 100); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* jquery.flot.events |
||||||
|
* |
||||||
|
* description: Flot plugin for adding events/markers to the plot |
||||||
|
* version: 0.2.5 |
||||||
|
* authors: |
||||||
|
* Alexander Wunschik <alex@wunschik.net> |
||||||
|
* Joel Oughton <joeloughton@gmail.com> |
||||||
|
* Nicolas Joseph <www.nicolasjoseph.com> |
||||||
|
* |
||||||
|
* website: https://github.com/mojoaxel/flot-events
|
||||||
|
* |
||||||
|
* released under MIT License and GPLv2+ |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* A class that allows for the drawing an remove of some object |
||||||
|
*/ |
||||||
|
var DrawableEvent = function(object, drawFunc, clearFunc, moveFunc, left, top, width, height) { |
||||||
|
var _object = object; |
||||||
|
var _drawFunc = drawFunc; |
||||||
|
var _clearFunc = clearFunc; |
||||||
|
var _moveFunc = moveFunc; |
||||||
|
var _position = { left: left, top: top }; |
||||||
|
var _width = width; |
||||||
|
var _height = height; |
||||||
|
|
||||||
|
this.width = function() { return _width; }; |
||||||
|
this.height = function() { return _height; }; |
||||||
|
this.position = function() { return _position; }; |
||||||
|
this.draw = function() { _drawFunc(_object); }; |
||||||
|
this.clear = function() { _clearFunc(_object); }; |
||||||
|
this.getObject = function() { return _object; }; |
||||||
|
this.moveTo = function(position) { |
||||||
|
_position = position; |
||||||
|
_moveFunc(_object, _position); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Event class that stores options (eventType, min, max, title, description) and the object to draw. |
||||||
|
*/ |
||||||
|
var VisualEvent = function(options, drawableEvent) { |
||||||
|
var _parent; |
||||||
|
var _options = options; |
||||||
|
var _drawableEvent = drawableEvent; |
||||||
|
var _hidden = false; |
||||||
|
|
||||||
|
this.visual = function() { return _drawableEvent; }; |
||||||
|
this.getOptions = function() { return _options; }; |
||||||
|
this.getParent = function() { return _parent; }; |
||||||
|
this.isHidden = function() { return _hidden; }; |
||||||
|
this.hide = function() { _hidden = true; }; |
||||||
|
this.unhide = function() { _hidden = false; }; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* A Class that handles the event-markers inside the given plot |
||||||
|
*/ |
||||||
|
var EventMarkers = function(plot) { |
||||||
|
var _events = []; |
||||||
|
|
||||||
|
this._types = []; |
||||||
|
this._plot = plot; |
||||||
|
this.eventsEnabled = false; |
||||||
|
|
||||||
|
this.getEvents = function() { |
||||||
|
return _events; |
||||||
|
}; |
||||||
|
|
||||||
|
this.setTypes = function(types) { |
||||||
|
return this._types = types; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* create internal objects for the given events |
||||||
|
*/ |
||||||
|
this.setupEvents = function(events) { |
||||||
|
var that = this; |
||||||
|
var parts = _.partition(events, 'isRegion'); |
||||||
|
var regions = parts[0]; |
||||||
|
events = parts[1]; |
||||||
|
|
||||||
|
$.each(events, function(index, event) { |
||||||
|
var ve = new VisualEvent(event, that._buildDiv(event)); |
||||||
|
_events.push(ve); |
||||||
|
}); |
||||||
|
|
||||||
|
$.each(regions, function (index, event) { |
||||||
|
var vre = new VisualEvent(event, that._buildRegDiv(event)); |
||||||
|
_events.push(vre); |
||||||
|
}); |
||||||
|
|
||||||
|
_events.sort(function(a, b) { |
||||||
|
var ao = a.getOptions(), bo = b.getOptions(); |
||||||
|
if (ao.min > bo.min) { return 1; } |
||||||
|
if (ao.min < bo.min) { return -1; } |
||||||
|
return 0; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the events to the plot |
||||||
|
*/ |
||||||
|
this.drawEvents = function() { |
||||||
|
var that = this; |
||||||
|
// var o = this._plot.getPlotOffset();
|
||||||
|
|
||||||
|
$.each(_events, function(index, event) { |
||||||
|
// check event is inside the graph range
|
||||||
|
if (that._insidePlot(event.getOptions().min) && !event.isHidden()) { |
||||||
|
event.visual().draw(); |
||||||
|
} else { |
||||||
|
event.visual().getObject().hide(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* update the position of the event-markers (e.g. after scrolling or zooming) |
||||||
|
*/ |
||||||
|
this.updateEvents = function() { |
||||||
|
var that = this; |
||||||
|
var o = this._plot.getPlotOffset(), left, top; |
||||||
|
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; |
||||||
|
|
||||||
|
$.each(_events, function(index, event) { |
||||||
|
top = o.top + that._plot.height() - event.visual().height(); |
||||||
|
left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2; |
||||||
|
event.visual().moveTo({ top: top, left: left }); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* remove all events from the plot |
||||||
|
*/ |
||||||
|
this._clearEvents = function() { |
||||||
|
$.each(_events, function(index, val) { |
||||||
|
val.visual().clear(); |
||||||
|
}); |
||||||
|
_events = []; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* create a DOM element for the given event |
||||||
|
*/ |
||||||
|
this._buildDiv = function(event) { |
||||||
|
var that = this; |
||||||
|
|
||||||
|
var container = this._plot.getPlaceholder(); |
||||||
|
var o = this._plot.getPlotOffset(); |
||||||
|
var axes = this._plot.getAxes(); |
||||||
|
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; |
||||||
|
var yaxis, top, left, color, markerSize, markerShow, lineStyle, lineWidth; |
||||||
|
var markerTooltip; |
||||||
|
|
||||||
|
// determine the y axis used
|
||||||
|
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; } |
||||||
|
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; } |
||||||
|
|
||||||
|
// map the eventType to a types object
|
||||||
|
var eventTypeId = event.eventType; |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) { |
||||||
|
color = '#666'; |
||||||
|
} else { |
||||||
|
color = this._types[eventTypeId].color; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].markerSize) { |
||||||
|
markerSize = 8; //default marker size
|
||||||
|
} else { |
||||||
|
markerSize = this._types[eventTypeId].markerSize; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerShow === undefined) { |
||||||
|
markerShow = true; |
||||||
|
} else { |
||||||
|
markerShow = this._types[eventTypeId].markerShow; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) { |
||||||
|
markerTooltip = true; |
||||||
|
} else { |
||||||
|
markerTooltip = this._types[eventTypeId].markerTooltip; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) { |
||||||
|
lineStyle = 'dashed'; //default line style
|
||||||
|
} else { |
||||||
|
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase(); |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) { |
||||||
|
lineWidth = 1; //default line width
|
||||||
|
} else { |
||||||
|
lineWidth = this._types[eventTypeId].lineWidth; |
||||||
|
} |
||||||
|
|
||||||
|
var topOffset = xaxis.options.eventSectionHeight || 0; |
||||||
|
topOffset = topOffset / 3; |
||||||
|
|
||||||
|
top = o.top + this._plot.height() + topOffset; |
||||||
|
left = xaxis.p2c(event.min) + o.left; |
||||||
|
|
||||||
|
var line = $('<div class="events_line flot-temp-elem"></div>').css({ |
||||||
|
"position": "absolute", |
||||||
|
"opacity": 0.8, |
||||||
|
"left": left + 'px', |
||||||
|
"top": 8, |
||||||
|
"width": lineWidth + "px", |
||||||
|
"height": this._plot.height() + topOffset * 0.8, |
||||||
|
"border-left-width": lineWidth + "px", |
||||||
|
"border-left-style": lineStyle, |
||||||
|
"border-left-color": color, |
||||||
|
"color": color |
||||||
|
}) |
||||||
|
.appendTo(container); |
||||||
|
|
||||||
|
if (markerShow) { |
||||||
|
var marker = $('<div class="events_marker"></div>').css({ |
||||||
|
"position": "absolute", |
||||||
|
"left": (-markerSize - Math.round(lineWidth / 2)) + "px", |
||||||
|
"font-size": 0, |
||||||
|
"line-height": 0, |
||||||
|
"width": 0, |
||||||
|
"height": 0, |
||||||
|
"border-left": markerSize+"px solid transparent", |
||||||
|
"border-right": markerSize+"px solid transparent" |
||||||
|
}); |
||||||
|
|
||||||
|
marker.appendTo(line); |
||||||
|
|
||||||
|
if (this._types[eventTypeId] && this._types[eventTypeId].position && this._types[eventTypeId].position.toUpperCase() === 'BOTTOM') { |
||||||
|
marker.css({ |
||||||
|
"top": top-markerSize-8 +"px", |
||||||
|
"border-top": "none", |
||||||
|
"border-bottom": markerSize+"px solid " + color |
||||||
|
}); |
||||||
|
} else { |
||||||
|
marker.css({ |
||||||
|
"top": "0px", |
||||||
|
"border-top": markerSize+"px solid " + color, |
||||||
|
"border-bottom": "none" |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
marker.data({ |
||||||
|
"event": event |
||||||
|
}); |
||||||
|
|
||||||
|
var mouseenter = function() { |
||||||
|
createAnnotationToolip(marker, $(this).data("event"), that._plot); |
||||||
|
}; |
||||||
|
|
||||||
|
if (event.editModel) { |
||||||
|
createEditPopover(marker, event.editModel, that._plot); |
||||||
|
} |
||||||
|
|
||||||
|
var mouseleave = function() { |
||||||
|
that._plot.clearSelection(); |
||||||
|
}; |
||||||
|
|
||||||
|
if (markerTooltip) { |
||||||
|
marker.css({ "cursor": "help" }); |
||||||
|
marker.hover(mouseenter, mouseleave); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var drawableEvent = new DrawableEvent( |
||||||
|
line, |
||||||
|
function drawFunc(obj) { obj.show(); }, |
||||||
|
function(obj) { obj.remove(); }, |
||||||
|
function(obj, position) { |
||||||
|
obj.css({ |
||||||
|
top: position.top, |
||||||
|
left: position.left |
||||||
|
}); |
||||||
|
}, |
||||||
|
left, |
||||||
|
top, |
||||||
|
line.width(), |
||||||
|
line.height() |
||||||
|
); |
||||||
|
|
||||||
|
return drawableEvent; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* create a DOM element for the given region |
||||||
|
*/ |
||||||
|
this._buildRegDiv = function (event) { |
||||||
|
var that = this; |
||||||
|
|
||||||
|
var container = this._plot.getPlaceholder(); |
||||||
|
var o = this._plot.getPlotOffset(); |
||||||
|
var axes = this._plot.getAxes(); |
||||||
|
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; |
||||||
|
var yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip; |
||||||
|
|
||||||
|
// determine the y axis used
|
||||||
|
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; } |
||||||
|
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; } |
||||||
|
|
||||||
|
// map the eventType to a types object
|
||||||
|
var eventTypeId = event.eventType; |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) { |
||||||
|
color = '#666'; |
||||||
|
} else { |
||||||
|
color = this._types[eventTypeId].color; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) { |
||||||
|
markerTooltip = true; |
||||||
|
} else { |
||||||
|
markerTooltip = this._types[eventTypeId].markerTooltip; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) { |
||||||
|
lineWidth = 1; //default line width
|
||||||
|
} else { |
||||||
|
lineWidth = this._types[eventTypeId].lineWidth; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) { |
||||||
|
lineStyle = 'dashed'; //default line style
|
||||||
|
} else { |
||||||
|
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase(); |
||||||
|
} |
||||||
|
|
||||||
|
var topOffset = 2; |
||||||
|
top = o.top + this._plot.height() + topOffset; |
||||||
|
|
||||||
|
var timeFrom = Math.min(event.min, event.timeEnd); |
||||||
|
var timeTo = Math.max(event.min, event.timeEnd); |
||||||
|
left = xaxis.p2c(timeFrom) + o.left; |
||||||
|
var right = xaxis.p2c(timeTo) + o.left; |
||||||
|
regionWidth = right - left; |
||||||
|
|
||||||
|
_.each([left, right], function(position) { |
||||||
|
var line = $('<div class="events_line flot-temp-elem"></div>').css({ |
||||||
|
"position": "absolute", |
||||||
|
"opacity": 0.8, |
||||||
|
"left": position + 'px', |
||||||
|
"top": 8, |
||||||
|
"width": lineWidth + "px", |
||||||
|
"height": that._plot.height() + topOffset, |
||||||
|
"border-left-width": lineWidth + "px", |
||||||
|
"border-left-style": lineStyle, |
||||||
|
"border-left-color": color, |
||||||
|
"color": color |
||||||
|
}); |
||||||
|
line.appendTo(container); |
||||||
|
}); |
||||||
|
|
||||||
|
var region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({ |
||||||
|
"position": "absolute", |
||||||
|
"opacity": 0.5, |
||||||
|
"left": left + 'px', |
||||||
|
"top": top, |
||||||
|
"width": Math.round(regionWidth + lineWidth) + "px", |
||||||
|
"height": "0.5rem", |
||||||
|
"border-left-color": color, |
||||||
|
"color": color, |
||||||
|
"background-color": color |
||||||
|
}); |
||||||
|
region.appendTo(container); |
||||||
|
|
||||||
|
region.data({ |
||||||
|
"event": event |
||||||
|
}); |
||||||
|
|
||||||
|
var mouseenter = function () { |
||||||
|
createAnnotationToolip(region, $(this).data("event"), that._plot); |
||||||
|
}; |
||||||
|
|
||||||
|
if (event.editModel) { |
||||||
|
createEditPopover(region, event.editModel, that._plot); |
||||||
|
} |
||||||
|
|
||||||
|
var mouseleave = function () { |
||||||
|
that._plot.clearSelection(); |
||||||
|
}; |
||||||
|
|
||||||
|
if (markerTooltip) { |
||||||
|
region.css({ "cursor": "help" }); |
||||||
|
region.hover(mouseenter, mouseleave); |
||||||
|
} |
||||||
|
|
||||||
|
var drawableEvent = new DrawableEvent( |
||||||
|
region, |
||||||
|
function drawFunc(obj) { obj.show(); }, |
||||||
|
function (obj) { obj.remove(); }, |
||||||
|
function (obj, position) { |
||||||
|
obj.css({ |
||||||
|
top: position.top, |
||||||
|
left: position.left |
||||||
|
}); |
||||||
|
}, |
||||||
|
left, |
||||||
|
top, |
||||||
|
region.width(), |
||||||
|
region.height() |
||||||
|
); |
||||||
|
|
||||||
|
return drawableEvent; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* check if the event is inside visible range |
||||||
|
*/ |
||||||
|
this._insidePlot = function(x) { |
||||||
|
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; |
||||||
|
var xc = xaxis.p2c(x); |
||||||
|
return xc > 0 && xc < xaxis.p2c(xaxis.max); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* initialize the plugin for the given plot |
||||||
|
*/ |
||||||
|
function init(plot) { |
||||||
|
/*jshint validthis:true */ |
||||||
|
var that = this; |
||||||
|
var eventMarkers = new EventMarkers(plot); |
||||||
|
|
||||||
|
plot.getEvents = function() { |
||||||
|
return eventMarkers._events; |
||||||
|
}; |
||||||
|
|
||||||
|
plot.hideEvents = function() { |
||||||
|
$.each(eventMarkers._events, function(index, event) { |
||||||
|
event.visual().getObject().hide(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
plot.showEvents = function() { |
||||||
|
plot.hideEvents(); |
||||||
|
$.each(eventMarkers._events, function(index, event) { |
||||||
|
event.hide(); |
||||||
|
}); |
||||||
|
|
||||||
|
that.eventMarkers.drawEvents(); |
||||||
|
}; |
||||||
|
|
||||||
|
// change events on an existing plot
|
||||||
|
plot.setEvents = function(events) { |
||||||
|
if (eventMarkers.eventsEnabled) { |
||||||
|
eventMarkers.setupEvents(events); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
plot.hooks.processOptions.push(function(plot, options) { |
||||||
|
// enable the plugin
|
||||||
|
if (options.events.data != null) { |
||||||
|
eventMarkers.eventsEnabled = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.draw.push(function(plot) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
|
||||||
|
if (eventMarkers.eventsEnabled) { |
||||||
|
// check for first run
|
||||||
|
if (eventMarkers.getEvents().length < 1) { |
||||||
|
eventMarkers.setTypes(options.events.types); |
||||||
|
eventMarkers.setupEvents(options.events.data); |
||||||
|
} else { |
||||||
|
eventMarkers.updateEvents(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
eventMarkers.drawEvents(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
var defaultOptions = { |
||||||
|
events: { |
||||||
|
data: null, |
||||||
|
types: null, |
||||||
|
xaxis: 1, |
||||||
|
position: 'BOTTOM' |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: defaultOptions, |
||||||
|
name: "events", |
||||||
|
version: "0.2.5" |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,288 @@ |
|||||||
|
(function($) { |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var options = { |
||||||
|
series: { |
||||||
|
fillBelowTo: null |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
function findBelowSeries( series, allseries ) { |
||||||
|
|
||||||
|
var i; |
||||||
|
|
||||||
|
for ( i = 0; i < allseries.length; ++i ) { |
||||||
|
if ( allseries[ i ].id === series.fillBelowTo ) { |
||||||
|
return allseries[ i ]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
/* top and bottom doesn't actually matter for this, we're just using it to help make this easier to think about */ |
||||||
|
/* this is a vector cross product operation */ |
||||||
|
function segmentIntersection(top_left_x, top_left_y, top_right_x, top_right_y, bottom_left_x, bottom_left_y, bottom_right_x, bottom_right_y) { |
||||||
|
var top_delta_x, top_delta_y, bottom_delta_x, bottom_delta_y, |
||||||
|
s, t; |
||||||
|
|
||||||
|
top_delta_x = top_right_x - top_left_x; |
||||||
|
top_delta_y = top_right_y - top_left_y; |
||||||
|
bottom_delta_x = bottom_right_x - bottom_left_x; |
||||||
|
bottom_delta_y = bottom_right_y - bottom_left_y; |
||||||
|
|
||||||
|
s = ( |
||||||
|
(-top_delta_y * (top_left_x - bottom_left_x)) + (top_delta_x * (top_left_y - bottom_left_y)) |
||||||
|
) / ( |
||||||
|
-bottom_delta_x * top_delta_y + top_delta_x * bottom_delta_y |
||||||
|
); |
||||||
|
|
||||||
|
t = ( |
||||||
|
(bottom_delta_x * (top_left_y - bottom_left_y)) - (bottom_delta_y * (top_left_x - bottom_left_x)) |
||||||
|
) / ( |
||||||
|
-bottom_delta_x * top_delta_y + top_delta_x * bottom_delta_y |
||||||
|
); |
||||||
|
|
||||||
|
// Collision detected
|
||||||
|
if (s >= 0 && s <= 1 && t >= 0 && t <= 1) { |
||||||
|
return [ |
||||||
|
top_left_x + (t * top_delta_x), // X
|
||||||
|
top_left_y + (t * top_delta_y) // Y
|
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
// No collision
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function plotDifferenceArea(plot, ctx, series) { |
||||||
|
if ( series.fillBelowTo === null ) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var otherseries, |
||||||
|
|
||||||
|
ps, |
||||||
|
points, |
||||||
|
|
||||||
|
otherps, |
||||||
|
otherpoints, |
||||||
|
|
||||||
|
plotOffset, |
||||||
|
fillStyle; |
||||||
|
|
||||||
|
function openPolygon(x, y) { |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo( |
||||||
|
series.xaxis.p2c(x) + plotOffset.left, |
||||||
|
series.yaxis.p2c(y) + plotOffset.top |
||||||
|
); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function closePolygon() { |
||||||
|
ctx.closePath(); |
||||||
|
ctx.fill(); |
||||||
|
} |
||||||
|
|
||||||
|
function validateInput() { |
||||||
|
if (points.length/ps !== otherpoints.length/otherps) { |
||||||
|
console.error("Refusing to graph inconsistent number of points"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
var i; |
||||||
|
for (i = 0; i < (points.length / ps); i++) { |
||||||
|
if ( |
||||||
|
points[i * ps] !== null && |
||||||
|
otherpoints[i * otherps] !== null && |
||||||
|
points[i * ps] !== otherpoints[i * otherps] |
||||||
|
) { |
||||||
|
console.error("Refusing to graph points without matching value"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
function findNextStart(start_i, end_i) { |
||||||
|
console.assert(end_i > start_i, "expects the end index to be greater than the start index"); |
||||||
|
|
||||||
|
var start = ( |
||||||
|
start_i === 0 || |
||||||
|
points[start_i - 1] === null || |
||||||
|
otherpoints[start_i - 1] === null |
||||||
|
), |
||||||
|
equal = false, |
||||||
|
i, |
||||||
|
intersect; |
||||||
|
|
||||||
|
for (i = start_i; i < end_i; i++) { |
||||||
|
// Take note of null points
|
||||||
|
if ( |
||||||
|
points[(i * ps) + 1] === null || |
||||||
|
otherpoints[(i * ps) + 1] === null |
||||||
|
) { |
||||||
|
equal = false; |
||||||
|
start = true; |
||||||
|
} |
||||||
|
|
||||||
|
// Take note of equal points
|
||||||
|
else if (points[(i * ps) + 1] === otherpoints[(i * otherps) + 1]) { |
||||||
|
equal = true; |
||||||
|
start = false; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
else if (points[(i * ps) + 1] > otherpoints[(i * otherps) + 1]) { |
||||||
|
// If we begin above the desired point
|
||||||
|
if (start) { |
||||||
|
openPolygon(points[i * ps], points[(i * ps) + 1]); |
||||||
|
} |
||||||
|
|
||||||
|
// If an equal point preceeds this, start the polygon at that equal point
|
||||||
|
else if (equal) { |
||||||
|
openPolygon(points[(i - 1) * ps], points[((i - 1) * ps) + 1]); |
||||||
|
} |
||||||
|
|
||||||
|
// Otherwise, find the intersection point, and start it there
|
||||||
|
else { |
||||||
|
intersect = intersectionPoint(i); |
||||||
|
openPolygon(intersect[0], intersect[1]); |
||||||
|
} |
||||||
|
|
||||||
|
topTraversal(i, end_i); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// If we go below equal, equal at any preceeding point is irrelevant
|
||||||
|
else { |
||||||
|
start = false; |
||||||
|
equal = false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function intersectionPoint(right_i) { |
||||||
|
console.assert(right_i > 0, "expects the second point in the series line segment"); |
||||||
|
|
||||||
|
var i, intersect; |
||||||
|
|
||||||
|
for (i = 1; i < (otherpoints.length/otherps); i++) { |
||||||
|
intersect = segmentIntersection( |
||||||
|
points[(right_i - 1) * ps], points[((right_i - 1) * ps) + 1], |
||||||
|
points[right_i * ps], points[(right_i * ps) + 1], |
||||||
|
|
||||||
|
otherpoints[(i - 1) * otherps], otherpoints[((i - 1) * otherps) + 1], |
||||||
|
otherpoints[i * otherps], otherpoints[(i * otherps) + 1] |
||||||
|
); |
||||||
|
|
||||||
|
if (intersect !== null) { |
||||||
|
return intersect; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
console.error("intersectionPoint() should only be called when an intersection happens"); |
||||||
|
} |
||||||
|
|
||||||
|
function bottomTraversal(start_i, end_i) { |
||||||
|
console.assert(start_i >= end_i, "the start should be the rightmost point, and the end should be the leftmost (excluding the equal or intersecting point)"); |
||||||
|
|
||||||
|
var i; |
||||||
|
|
||||||
|
for (i = start_i; i >= end_i; i--) { |
||||||
|
ctx.lineTo( |
||||||
|
otherseries.xaxis.p2c(otherpoints[i * otherps]) + plotOffset.left, |
||||||
|
otherseries.yaxis.p2c(otherpoints[(i * otherps) + 1]) + plotOffset.top |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
closePolygon(); |
||||||
|
} |
||||||
|
|
||||||
|
function topTraversal(start_i, end_i) { |
||||||
|
console.assert(start_i <= end_i, "the start should be the rightmost point, and the end should be the leftmost (excluding the equal or intersecting point)"); |
||||||
|
|
||||||
|
var i, |
||||||
|
intersect; |
||||||
|
|
||||||
|
for (i = start_i; i < end_i; i++) { |
||||||
|
if (points[(i * ps) + 1] === null && i > start_i) { |
||||||
|
bottomTraversal(i - 1, start_i); |
||||||
|
findNextStart(i, end_i); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
else if (points[(i * ps) + 1] === otherpoints[(i * otherps) + 1]) { |
||||||
|
bottomTraversal(i, start_i); |
||||||
|
findNextStart(i, end_i); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
else if (points[(i * ps) + 1] < otherpoints[(i * otherps) + 1]) { |
||||||
|
intersect = intersectionPoint(i); |
||||||
|
ctx.lineTo( |
||||||
|
series.xaxis.p2c(intersect[0]) + plotOffset.left, |
||||||
|
series.yaxis.p2c(intersect[1]) + plotOffset.top |
||||||
|
); |
||||||
|
bottomTraversal(i, start_i); |
||||||
|
findNextStart(i, end_i); |
||||||
|
return; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
else { |
||||||
|
ctx.lineTo( |
||||||
|
series.xaxis.p2c(points[i * ps]) + plotOffset.left, |
||||||
|
series.yaxis.p2c(points[(i * ps) + 1]) + plotOffset.top |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
bottomTraversal(end_i, start_i); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Begin processing
|
||||||
|
|
||||||
|
otherseries = findBelowSeries( series, plot.getData() ); |
||||||
|
|
||||||
|
if ( !otherseries ) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
ps = series.datapoints.pointsize; |
||||||
|
points = series.datapoints.points; |
||||||
|
otherps = otherseries.datapoints.pointsize; |
||||||
|
otherpoints = otherseries.datapoints.points; |
||||||
|
plotOffset = plot.getPlotOffset(); |
||||||
|
|
||||||
|
if (!validateInput()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Flot's getFillStyle() should probably be exposed somewhere
|
||||||
|
fillStyle = $.color.parse(series.color); |
||||||
|
fillStyle.a = 0.4; |
||||||
|
fillStyle.normalize(); |
||||||
|
ctx.fillStyle = fillStyle.toString(); |
||||||
|
|
||||||
|
|
||||||
|
// Begin recursive bi-directional traversal
|
||||||
|
findNextStart(0, points.length/ps); |
||||||
|
} |
||||||
|
|
||||||
|
plot.hooks.drawSeries.push(plotDifferenceArea); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: "fillbelow", |
||||||
|
version: "0.1.0" |
||||||
|
}); |
||||||
|
|
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,225 @@ |
|||||||
|
/* Flot plugin for computing bottoms for filled line and bar charts. |
||||||
|
|
||||||
|
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
The case: you've got two series that you want to fill the area between. In Flot |
||||||
|
terms, you need to use one as the fill bottom of the other. You can specify the |
||||||
|
bottom of each data point as the third coordinate manually, or you can use this |
||||||
|
plugin to compute it for you. |
||||||
|
|
||||||
|
In order to name the other series, you need to give it an id, like this: |
||||||
|
|
||||||
|
var dataset = [ |
||||||
|
{ data: [ ... ], id: "foo" } , // use default bottom
|
||||||
|
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
|
||||||
|
]; |
||||||
|
|
||||||
|
$.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }}); |
||||||
|
|
||||||
|
As a convenience, if the id given is a number that doesn't appear as an id in |
||||||
|
the series, it is interpreted as the index in the array instead (so fillBetween: |
||||||
|
0 can also mean the first series). |
||||||
|
|
||||||
|
Internally, the plugin modifies the datapoints in each series. For line series, |
||||||
|
extra data points might be inserted through interpolation. Note that at points |
||||||
|
where the bottom line is not defined (due to a null point or start/end of line), |
||||||
|
the current line will show a gap too. The algorithm comes from the |
||||||
|
jquery.flot.stack.js plugin, possibly some code could be shared. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
(function ( $ ) { |
||||||
|
|
||||||
|
var options = { |
||||||
|
series: { |
||||||
|
fillBetween: null // or number
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function init( plot ) { |
||||||
|
|
||||||
|
function findBottomSeries( s, allseries ) { |
||||||
|
|
||||||
|
var i; |
||||||
|
|
||||||
|
for ( i = 0; i < allseries.length; ++i ) { |
||||||
|
if ( allseries[ i ].id === s.fillBetween ) { |
||||||
|
return allseries[ i ]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if ( typeof s.fillBetween === "number" ) { |
||||||
|
if ( s.fillBetween < 0 || s.fillBetween >= allseries.length ) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
return allseries[ s.fillBetween ]; |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function computeFillBottoms( plot, s, datapoints ) { |
||||||
|
if ( s.fillBetween == null ) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var other = findBottomSeries( s, plot.getData() ); |
||||||
|
|
||||||
|
if ( !other ) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var ps = datapoints.pointsize, |
||||||
|
points = datapoints.points, |
||||||
|
otherps = other.datapoints.pointsize, |
||||||
|
otherpoints = other.datapoints.points, |
||||||
|
newpoints = [], |
||||||
|
px, py, intery, qx, qy, bottom, |
||||||
|
withlines = s.lines.show, |
||||||
|
withbottom = ps > 2 && datapoints.format[2].y, |
||||||
|
withsteps = withlines && s.lines.steps, |
||||||
|
fromgap = true, |
||||||
|
i = 0, |
||||||
|
j = 0, |
||||||
|
l, m; |
||||||
|
|
||||||
|
while ( true ) { |
||||||
|
|
||||||
|
if ( i >= points.length ) { |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
l = newpoints.length; |
||||||
|
|
||||||
|
if ( points[ i ] == null ) { |
||||||
|
|
||||||
|
// copy gaps
|
||||||
|
|
||||||
|
for ( m = 0; m < ps; ++m ) { |
||||||
|
newpoints.push( points[ i + m ] ); |
||||||
|
} |
||||||
|
|
||||||
|
i += ps; |
||||||
|
|
||||||
|
} else if ( j >= otherpoints.length ) { |
||||||
|
|
||||||
|
// for lines, we can't use the rest of the points
|
||||||
|
|
||||||
|
if ( !withlines ) { |
||||||
|
for ( m = 0; m < ps; ++m ) { |
||||||
|
newpoints.push( points[ i + m ] ); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
i += ps; |
||||||
|
|
||||||
|
} else if ( otherpoints[ j ] == null ) { |
||||||
|
|
||||||
|
// oops, got a gap
|
||||||
|
|
||||||
|
for ( m = 0; m < ps; ++m ) { |
||||||
|
newpoints.push( null ); |
||||||
|
} |
||||||
|
|
||||||
|
fromgap = true; |
||||||
|
j += otherps; |
||||||
|
|
||||||
|
} else { |
||||||
|
|
||||||
|
// cases where we actually got two points
|
||||||
|
|
||||||
|
px = points[ i ]; |
||||||
|
py = points[ i + 1 ]; |
||||||
|
qx = otherpoints[ j ]; |
||||||
|
qy = otherpoints[ j + 1 ]; |
||||||
|
bottom = 0; |
||||||
|
|
||||||
|
if ( px === qx ) { |
||||||
|
|
||||||
|
for ( m = 0; m < ps; ++m ) { |
||||||
|
newpoints.push( points[ i + m ] ); |
||||||
|
} |
||||||
|
|
||||||
|
//newpoints[ l + 1 ] += qy;
|
||||||
|
bottom = qy; |
||||||
|
|
||||||
|
i += ps; |
||||||
|
j += otherps; |
||||||
|
|
||||||
|
} else if ( px > qx ) { |
||||||
|
|
||||||
|
// we got past point below, might need to
|
||||||
|
// insert interpolated extra point
|
||||||
|
|
||||||
|
if ( withlines && i > 0 && points[ i - ps ] != null ) { |
||||||
|
intery = py + ( points[ i - ps + 1 ] - py ) * ( qx - px ) / ( points[ i - ps ] - px ); |
||||||
|
newpoints.push( qx ); |
||||||
|
newpoints.push( intery ); |
||||||
|
for ( m = 2; m < ps; ++m ) { |
||||||
|
newpoints.push( points[ i + m ] ); |
||||||
|
} |
||||||
|
bottom = qy; |
||||||
|
} |
||||||
|
|
||||||
|
j += otherps; |
||||||
|
|
||||||
|
} else { // px < qx
|
||||||
|
|
||||||
|
// if we come from a gap, we just skip this point
|
||||||
|
|
||||||
|
if ( fromgap && withlines ) { |
||||||
|
i += ps; |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
for ( m = 0; m < ps; ++m ) { |
||||||
|
newpoints.push( points[ i + m ] ); |
||||||
|
} |
||||||
|
|
||||||
|
// we might be able to interpolate a point below,
|
||||||
|
// this can give us a better y
|
||||||
|
|
||||||
|
if ( withlines && j > 0 && otherpoints[ j - otherps ] != null ) { |
||||||
|
bottom = qy + ( otherpoints[ j - otherps + 1 ] - qy ) * ( px - qx ) / ( otherpoints[ j - otherps ] - qx ); |
||||||
|
} |
||||||
|
|
||||||
|
//newpoints[l + 1] += bottom;
|
||||||
|
|
||||||
|
i += ps; |
||||||
|
} |
||||||
|
|
||||||
|
fromgap = false; |
||||||
|
|
||||||
|
if ( l !== newpoints.length && withbottom ) { |
||||||
|
newpoints[ l + 2 ] = bottom; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// maintain the line steps invariant
|
||||||
|
|
||||||
|
if ( withsteps && l !== newpoints.length && l > 0 && |
||||||
|
newpoints[ l ] !== null && |
||||||
|
newpoints[ l ] !== newpoints[ l - ps ] && |
||||||
|
newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ] ) { |
||||||
|
for (m = 0; m < ps; ++m) { |
||||||
|
newpoints[ l + ps + m ] = newpoints[ l + m ]; |
||||||
|
} |
||||||
|
newpoints[ l + 1 ] = newpoints[ l - ps + 1 ]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
datapoints.points = newpoints; |
||||||
|
} |
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push( computeFillBottoms ); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: "fillbetween", |
||||||
|
version: "1.0" |
||||||
|
}); |
||||||
|
|
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,960 @@ |
|||||||
|
/*! |
||||||
|
* jquery.flot.gauge v1.1.0 * |
||||||
|
* |
||||||
|
* Flot plugin for rendering gauge charts. |
||||||
|
* |
||||||
|
* Copyright (c) 2015 @toyoty99. |
||||||
|
* Licensed under the MIT license. |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @module flot.gauge |
||||||
|
*/ |
||||||
|
(function($) { |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Gauge class |
||||||
|
* |
||||||
|
* @class Gauge |
||||||
|
*/ |
||||||
|
var Gauge = (function() { |
||||||
|
/** |
||||||
|
* context of canvas |
||||||
|
* |
||||||
|
* @property context |
||||||
|
* @type Object |
||||||
|
*/ |
||||||
|
var context; |
||||||
|
/** |
||||||
|
* placeholder of canvas |
||||||
|
* |
||||||
|
* @property placeholder |
||||||
|
* @type Object |
||||||
|
*/ |
||||||
|
var placeholder; |
||||||
|
/** |
||||||
|
* options of plot |
||||||
|
* |
||||||
|
* @property options |
||||||
|
* @type Object |
||||||
|
*/ |
||||||
|
var options; |
||||||
|
/** |
||||||
|
* options of gauge |
||||||
|
* |
||||||
|
* @property gaugeOptions |
||||||
|
* @type Object |
||||||
|
*/ |
||||||
|
var gaugeOptions; |
||||||
|
/** |
||||||
|
* data series |
||||||
|
* |
||||||
|
* @property series |
||||||
|
* @type Array |
||||||
|
*/ |
||||||
|
var series; |
||||||
|
/** |
||||||
|
* logger |
||||||
|
* |
||||||
|
* @property logger |
||||||
|
* @type Object |
||||||
|
*/ |
||||||
|
var logger; |
||||||
|
|
||||||
|
/** |
||||||
|
* constructor |
||||||
|
* |
||||||
|
* @class Gauge |
||||||
|
* @constructor |
||||||
|
* @param {Object} gaugeOptions gauge options |
||||||
|
*/ |
||||||
|
var Gauge = function(plot, ctx) { |
||||||
|
context = ctx; |
||||||
|
placeholder = plot.getPlaceholder(); |
||||||
|
options = plot.getOptions(); |
||||||
|
gaugeOptions = options.series.gauges; |
||||||
|
series = plot.getData(); |
||||||
|
logger = getLogger(gaugeOptions.debug); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate layout |
||||||
|
* |
||||||
|
* @method calculateLayout |
||||||
|
* @return the calculated layout properties |
||||||
|
*/ |
||||||
|
Gauge.prototype.calculateLayout = function() { |
||||||
|
|
||||||
|
var canvasWidth = placeholder.width(); |
||||||
|
var canvasHeight = placeholder.height(); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// calculate cell size
|
||||||
|
var columns = Math.min(series.length, gaugeOptions.layout.columns); |
||||||
|
var rows = Math.ceil(series.length / columns); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var margin = gaugeOptions.layout.margin; |
||||||
|
var hMargin = gaugeOptions.layout.hMargin; |
||||||
|
var vMargin = gaugeOptions.layout.vMargin; |
||||||
|
var cellWidth = (canvasWidth - (margin * 2) - (hMargin * (columns - 1))) / columns; |
||||||
|
var cellHeight = (canvasHeight - (margin * 2) - (vMargin * (rows - 1))) / rows; |
||||||
|
if (gaugeOptions.layout.square) { |
||||||
|
var cell = Math.min(cellWidth, cellHeight); |
||||||
|
cellWidth = cell; |
||||||
|
cellHeight = cell; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// calculate 'auto' values
|
||||||
|
calculateAutoValues(gaugeOptions, cellWidth); |
||||||
|
|
||||||
|
// calculate maximum radius
|
||||||
|
var cellMargin = gaugeOptions.cell.margin; |
||||||
|
var labelMargin = 0; |
||||||
|
var labelFontSize = 0; |
||||||
|
if (gaugeOptions.label.show) { |
||||||
|
labelMargin = gaugeOptions.label.margin; |
||||||
|
labelFontSize = gaugeOptions.label.font.size; |
||||||
|
} |
||||||
|
var valueMargin = 0; |
||||||
|
var valueFontSize = 0; |
||||||
|
if (gaugeOptions.value.show) { |
||||||
|
valueMargin = gaugeOptions.value.margin; |
||||||
|
valueFontSize = gaugeOptions.value.font.size; |
||||||
|
} |
||||||
|
var thresholdWidth = 0; |
||||||
|
if (gaugeOptions.threshold.show) { |
||||||
|
thresholdWidth = gaugeOptions.threshold.width; |
||||||
|
} |
||||||
|
var thresholdLabelMargin = 0; |
||||||
|
var thresholdLabelFontSize = 0; |
||||||
|
if (gaugeOptions.threshold.label.show) { |
||||||
|
thresholdLabelMargin = gaugeOptions.threshold.label.margin; |
||||||
|
thresholdLabelFontSize = gaugeOptions.threshold.label.font.size; |
||||||
|
} |
||||||
|
|
||||||
|
var maxRadiusH = (cellWidth / 2) - cellMargin - thresholdWidth - (thresholdLabelMargin * 2) - thresholdLabelFontSize; |
||||||
|
|
||||||
|
var startAngle = gaugeOptions.gauge.startAngle; |
||||||
|
var endAngle = gaugeOptions.gauge.endAngle; |
||||||
|
var dAngle = (endAngle - startAngle) / 100; |
||||||
|
var heightRatioV = -1; |
||||||
|
for (var a = startAngle; a < endAngle; a += dAngle) { |
||||||
|
heightRatioV = Math.max(heightRatioV, Math.sin(toRad(a))); |
||||||
|
} |
||||||
|
heightRatioV = Math.max(heightRatioV, Math.sin(toRad(endAngle))); |
||||||
|
var outerRadiusV = (cellHeight - (cellMargin * 2) - (labelMargin * 2) - labelFontSize) / (1 + heightRatioV); |
||||||
|
if (outerRadiusV * heightRatioV < valueMargin + (valueFontSize / 2)) { |
||||||
|
outerRadiusV = cellHeight - (cellMargin * 2) - (labelMargin * 2) - labelFontSize - valueMargin - (valueFontSize / 2); |
||||||
|
} |
||||||
|
var maxRadiusV = outerRadiusV - (thresholdLabelMargin * 2) - thresholdLabelFontSize - thresholdWidth; |
||||||
|
|
||||||
|
var radius = Math.min(maxRadiusH, maxRadiusV); |
||||||
|
|
||||||
|
|
||||||
|
var width = gaugeOptions.gauge.width; |
||||||
|
if (width >= radius) { |
||||||
|
width = Math.max(3, radius / 3); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
var outerRadius = (thresholdLabelMargin * 2) + thresholdLabelFontSize + thresholdWidth + radius; |
||||||
|
var gaugeOuterHeight = Math.max(outerRadius * (1 + heightRatioV), outerRadius + valueMargin + (valueFontSize / 2)); |
||||||
|
|
||||||
|
return { |
||||||
|
canvasWidth: canvasWidth, |
||||||
|
canvasHeight: canvasHeight, |
||||||
|
margin: margin, |
||||||
|
hMargin: hMargin, |
||||||
|
vMargin: vMargin, |
||||||
|
columns: columns, |
||||||
|
rows: rows, |
||||||
|
cellWidth: cellWidth, |
||||||
|
cellHeight: cellHeight, |
||||||
|
cellMargin: cellMargin, |
||||||
|
labelMargin: labelMargin, |
||||||
|
labelFontSize: labelFontSize, |
||||||
|
valueMargin: valueMargin, |
||||||
|
valueFontSize: valueFontSize, |
||||||
|
width: width, |
||||||
|
radius: radius, |
||||||
|
thresholdWidth: thresholdWidth, |
||||||
|
thresholdLabelMargin: thresholdLabelMargin, |
||||||
|
thresholdLabelFontSize: thresholdLabelFontSize, |
||||||
|
gaugeOuterHeight: gaugeOuterHeight |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the values which are set as 'auto' |
||||||
|
* |
||||||
|
* @method calculateAutoValues |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Number} cellWidth the width of cell |
||||||
|
*/ |
||||||
|
function calculateAutoValues(gaugeOptionsi, cellWidth) { |
||||||
|
|
||||||
|
if (gaugeOptionsi.gauge.width === "auto") { |
||||||
|
gaugeOptionsi.gauge.width = Math.max(5, cellWidth / 8); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.label.margin === "auto") { |
||||||
|
gaugeOptionsi.label.margin = Math.max(1, cellWidth / 20); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.label.font.size === "auto") { |
||||||
|
gaugeOptionsi.label.font.size = Math.max(5, cellWidth / 8); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.value.margin === "auto") { |
||||||
|
gaugeOptionsi.value.margin = Math.max(1, cellWidth / 30); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.value.font.size === "auto") { |
||||||
|
gaugeOptionsi.value.font.size = Math.max(5, cellWidth / 9); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.threshold.width === "auto") { |
||||||
|
gaugeOptionsi.threshold.width = Math.max(3, cellWidth / 100); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.threshold.label.margin === "auto") { |
||||||
|
gaugeOptionsi.threshold.label.margin = Math.max(3, cellWidth / 40); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.threshold.label.font.size === "auto") { |
||||||
|
gaugeOptionsi.threshold.label.font.size = Math.max(5, cellWidth / 15); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
Gauge.prototype.calculateAutoValues = calculateAutoValues; |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the layout of the cell inside |
||||||
|
* |
||||||
|
* @method calculateCellLayout |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Number} cellWidth the width of cell |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @return the calculated cell layout properties |
||||||
|
*/ |
||||||
|
Gauge.prototype.calculateCellLayout = function(gaugeOptionsi, layout, i) { |
||||||
|
|
||||||
|
// calculate top, left and center
|
||||||
|
var c = col(layout.columns, i); |
||||||
|
var r = row(layout.columns, i); |
||||||
|
var x = layout.margin + (layout.cellWidth + layout.hMargin) * c; |
||||||
|
var y = layout.margin + (layout.cellHeight + layout.vMargin) * r; |
||||||
|
var cx = x + (layout.cellWidth / 2); |
||||||
|
var cy = y + layout.cellMargin + (layout.labelMargin * 2) + layout.labelFontSize + layout.thresholdWidth |
||||||
|
+ layout.thresholdLabelFontSize + (layout.thresholdLabelMargin * 2) + layout.radius; |
||||||
|
var blank = layout.cellHeight - (layout.cellMargin * 2) - (layout.labelMargin * 2) - layout.labelFontSize - layout.gaugeOuterHeight; |
||||||
|
var offsetY = 0; |
||||||
|
if (gaugeOptionsi.cell.vAlign === "middle") { |
||||||
|
offsetY = (blank / 2); |
||||||
|
} else if (gaugeOptionsi.cell.vAlign === "bottom") { |
||||||
|
offsetY = blank; |
||||||
|
} |
||||||
|
cy += offsetY; |
||||||
|
|
||||||
|
return { |
||||||
|
col: c, |
||||||
|
row: r, |
||||||
|
x: x, |
||||||
|
y: y, |
||||||
|
offsetY: offsetY, |
||||||
|
cellWidth: layout.cellWidth, |
||||||
|
cellHeight: layout.cellHeight, |
||||||
|
cellMargin: layout.cellMargin, |
||||||
|
cx: cx, |
||||||
|
cy: cy |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the background of chart |
||||||
|
* |
||||||
|
* @method drawBackground |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawBackground = function(layout) { |
||||||
|
|
||||||
|
if (!gaugeOptions.frame.show) { |
||||||
|
return; |
||||||
|
} |
||||||
|
context.save(); |
||||||
|
context.strokeStyle = options.grid.borderColor; |
||||||
|
context.lineWidth = options.grid.borderWidth; |
||||||
|
context.strokeRect(0, 0, layout.canvasWidth, layout.canvasHeight); |
||||||
|
if (options.grid.backgroundColor) { |
||||||
|
context.fillStyle = options.grid.backgroundColor; |
||||||
|
context.fillRect(0, 0, layout.canvasWidth, layout.canvasHeight); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the background of cell |
||||||
|
* |
||||||
|
* @method drawCellBackground |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawCellBackground = function(gaugeOptionsi, cellLayout) { |
||||||
|
|
||||||
|
context.save(); |
||||||
|
if (gaugeOptionsi.cell.border && gaugeOptionsi.cell.border.show && gaugeOptionsi.cell.border.color && gaugeOptionsi.cell.border.width) { |
||||||
|
context.strokeStyle = gaugeOptionsi.cell.border.color; |
||||||
|
context.lineWidth = gaugeOptionsi.cell.border.width; |
||||||
|
context.strokeRect(cellLayout.x, cellLayout.y, cellLayout.cellWidth, cellLayout.cellHeight); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.cell.background && gaugeOptionsi.cell.background.color) { |
||||||
|
context.fillStyle = gaugeOptionsi.cell.background.color; |
||||||
|
context.fillRect(cellLayout.x, cellLayout.y, cellLayout.cellWidth, cellLayout.cellHeight); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the gauge |
||||||
|
* |
||||||
|
* @method drawGauge |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
* @param {String} label the label of data |
||||||
|
* @param {Number} data the value of the gauge |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawGauge = function(gaugeOptionsi, layout, cellLayout, label, data) { |
||||||
|
|
||||||
|
|
||||||
|
var blur = gaugeOptionsi.gauge.shadow.show ? gaugeOptionsi.gauge.shadow.blur : 0; |
||||||
|
|
||||||
|
|
||||||
|
// draw gauge frame
|
||||||
|
drawArcWithShadow( |
||||||
|
cellLayout.cx, // center x
|
||||||
|
cellLayout.cy, // center y
|
||||||
|
layout.radius, |
||||||
|
layout.width, |
||||||
|
toRad(gaugeOptionsi.gauge.startAngle), |
||||||
|
toRad(gaugeOptionsi.gauge.endAngle), |
||||||
|
gaugeOptionsi.gauge.border.color, // line color
|
||||||
|
gaugeOptionsi.gauge.border.width, // line width
|
||||||
|
gaugeOptionsi.gauge.background.color, // fill color
|
||||||
|
blur); |
||||||
|
|
||||||
|
// draw gauge
|
||||||
|
var c1 = getColor(gaugeOptionsi, data); |
||||||
|
var a2 = calculateAngle(gaugeOptionsi, layout, data); |
||||||
|
drawArcWithShadow( |
||||||
|
cellLayout.cx, // center x
|
||||||
|
cellLayout.cy, // center y
|
||||||
|
layout.radius - 1, |
||||||
|
layout.width - 2, |
||||||
|
toRad(gaugeOptionsi.gauge.startAngle), |
||||||
|
toRad(a2), |
||||||
|
c1, // line color
|
||||||
|
1, // line width
|
||||||
|
c1, // fill color
|
||||||
|
blur); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* decide the color of the data from the threshold options |
||||||
|
* |
||||||
|
* @method getColor |
||||||
|
* @private |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Number} data the value of the gauge |
||||||
|
*/ |
||||||
|
function getColor(gaugeOptionsi, data) { |
||||||
|
var color; |
||||||
|
for (var i = 0; i < gaugeOptionsi.threshold.values.length; i++) { |
||||||
|
var threshold = gaugeOptionsi.threshold.values[i]; |
||||||
|
color = threshold.color; |
||||||
|
if (data < threshold.value) { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
return color; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the angle of the data |
||||||
|
* |
||||||
|
* @method calculateAngle |
||||||
|
* @private |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Number} data the value of the gauge |
||||||
|
*/ |
||||||
|
function calculateAngle(gaugeOptionsi, layout, data) { |
||||||
|
var a = |
||||||
|
gaugeOptionsi.gauge.startAngle |
||||||
|
+ (gaugeOptionsi.gauge.endAngle - gaugeOptionsi.gauge.startAngle) |
||||||
|
* ((data - gaugeOptionsi.gauge.min) / (gaugeOptionsi.gauge.max - gaugeOptionsi.gauge.min)); |
||||||
|
|
||||||
|
if (a < gaugeOptionsi.gauge.startAngle) { |
||||||
|
a = gaugeOptionsi.gauge.startAngle; |
||||||
|
} else if (a > gaugeOptionsi.gauge.endAngle) { |
||||||
|
a = gaugeOptionsi.gauge.endAngle; |
||||||
|
} |
||||||
|
return a; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the arc of the threshold |
||||||
|
* |
||||||
|
* @method drawThreshold |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawThreshold = function(gaugeOptionsi, layout, cellLayout) { |
||||||
|
|
||||||
|
var a1 = gaugeOptionsi.gauge.startAngle; |
||||||
|
for (var i = 0; i < gaugeOptionsi.threshold.values.length; i++) { |
||||||
|
var threshold = gaugeOptionsi.threshold.values[i]; |
||||||
|
c1 = threshold.color; |
||||||
|
a2 = calculateAngle(gaugeOptionsi, layout, threshold.value); |
||||||
|
drawArc( |
||||||
|
context, |
||||||
|
cellLayout.cx, // center x
|
||||||
|
cellLayout.cy, // center y
|
||||||
|
layout.radius + layout.thresholdWidth, |
||||||
|
layout.thresholdWidth - 2, |
||||||
|
toRad(a1), |
||||||
|
toRad(a2), |
||||||
|
c1, // line color
|
||||||
|
1, // line width
|
||||||
|
c1); // fill color
|
||||||
|
a1 = a2; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw an arc with a shadow |
||||||
|
* |
||||||
|
* @method drawArcWithShadow |
||||||
|
* @private |
||||||
|
* @param {Number} cx the x position of the center |
||||||
|
* @param {Number} cy the y position of the center |
||||||
|
* @param {Number} r the radius of an arc |
||||||
|
* @param {Number} w the width of an arc |
||||||
|
* @param {Number} rd1 the start angle of an arc in radians |
||||||
|
* @param {Number} rd2 the end angle of an arc in radians |
||||||
|
* @param {String} lc the color of a line |
||||||
|
* @param {Number} lw the widht of a line |
||||||
|
* @param {String} fc the fill color of an arc |
||||||
|
* @param {Number} blur the shdow blur |
||||||
|
*/ |
||||||
|
function drawArcWithShadow(cx, cy, r, w, rd1, rd2, lc, lw, fc, blur) { |
||||||
|
if (rd1 === rd2) { |
||||||
|
return; |
||||||
|
} |
||||||
|
context.save(); |
||||||
|
|
||||||
|
drawArc(context, cx, cy, r, w, rd1, rd2, lc, lw, fc); |
||||||
|
|
||||||
|
if (blur) { |
||||||
|
drawArc(context, cx, cy, r, w, rd1, rd2); |
||||||
|
context.clip(); |
||||||
|
context.shadowOffsetX = 0; |
||||||
|
context.shadowOffsetY = 0; |
||||||
|
context.shadowBlur = 10; |
||||||
|
context.shadowColor = "gray"; |
||||||
|
drawArc(context, cx, cy, r + 1, w + 2, rd1, rd2, lc, 1); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the label of the gauge |
||||||
|
* |
||||||
|
* @method drawLable |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @param {Object} item the item of the series |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawLable = function(gaugeOptionsi, layout, cellLayout, i, item) { |
||||||
|
|
||||||
|
drawText( |
||||||
|
cellLayout.cx, |
||||||
|
cellLayout.y + cellLayout.cellMargin + layout.labelMargin + cellLayout.offsetY, |
||||||
|
"flotGagueLabel" + i, |
||||||
|
gaugeOptionsi.label.formatter ? gaugeOptionsi.label.formatter(item.label, item.data[0][1]) : text, |
||||||
|
gaugeOptionsi.label); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the value of the gauge |
||||||
|
* |
||||||
|
* @method drawValue |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @param {Object} item the item of the series |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawValue = function(gaugeOptionsi, layout, cellLayout, i, item) { |
||||||
|
|
||||||
|
drawText( |
||||||
|
cellLayout.cx, |
||||||
|
cellLayout.cy - (gaugeOptionsi.value.font.size / 2), |
||||||
|
"flotGagueValue" + i, |
||||||
|
gaugeOptionsi.value.formatter ? gaugeOptionsi.value.formatter(item.label, item.data[0][1]) : text, |
||||||
|
gaugeOptionsi.value); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the values of the threshold |
||||||
|
* |
||||||
|
* @method drawThresholdValues |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
* @param {Number} i the index of the series |
||||||
|
*/ |
||||||
|
Gauge.prototype.drawThresholdValues = function(gaugeOptionsi, layout, cellLayout, i) { |
||||||
|
|
||||||
|
// min, max
|
||||||
|
drawThresholdValue(gaugeOptionsi, layout, cellLayout, "Min" + i, gaugeOptionsi.gauge.min, gaugeOptionsi.gauge.startAngle); |
||||||
|
drawThresholdValue(gaugeOptionsi, layout, cellLayout, "Max" + i, gaugeOptionsi.gauge.max, gaugeOptionsi.gauge.endAngle); |
||||||
|
// threshold values
|
||||||
|
for (var j = 0; j < gaugeOptionsi.threshold.values.length; j++) { |
||||||
|
var threshold = gaugeOptionsi.threshold.values[j]; |
||||||
|
if (threshold.value > gaugeOptionsi.gauge.min && threshold.value < gaugeOptionsi.gauge.max) { |
||||||
|
var a = calculateAngle(gaugeOptionsi, layout, threshold.value); |
||||||
|
drawThresholdValue(gaugeOptionsi, layout, cellLayout, i + "_" + j, threshold.value, a); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw the value of the threshold |
||||||
|
* |
||||||
|
* @method drawThresholdValue |
||||||
|
* @param {Object} gaugeOptionsi the options of the gauge |
||||||
|
* @param {Object} layout the layout properties |
||||||
|
* @param {Object} cellLayout the cell layout properties |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @param {Number} value the value of the threshold |
||||||
|
* @param {Number} a the angle of the value drawn |
||||||
|
*/ |
||||||
|
function drawThresholdValue(gaugeOptionsi, layout, cellLayout, i, value, a) { |
||||||
|
drawText( |
||||||
|
cellLayout.cx |
||||||
|
+ ((layout.thresholdLabelMargin + (layout.thresholdLabelFontSize / 2) + layout.radius) |
||||||
|
* Math.cos(toRad(a))), |
||||||
|
cellLayout.cy |
||||||
|
+ ((layout.thresholdLabelMargin + (layout.thresholdLabelFontSize / 2) + layout.radius) |
||||||
|
* Math.sin(toRad(a))), |
||||||
|
"flotGagueThresholdValue" + i, |
||||||
|
gaugeOptionsi.threshold.label.formatter ? gaugeOptionsi.threshold.label.formatter(value) : value, |
||||||
|
gaugeOptionsi.threshold.label, |
||||||
|
a); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw a text |
||||||
|
* |
||||||
|
* the textOptions is assumed as follows: |
||||||
|
* |
||||||
|
* textOptions: { |
||||||
|
* background: { |
||||||
|
* color: null, |
||||||
|
* opacity: 0 |
||||||
|
* }, |
||||||
|
* font: { |
||||||
|
* size: "auto" |
||||||
|
* family: "\"ＭＳ ゴシック\",sans-serif" |
||||||
|
* }, |
||||||
|
* color: null |
||||||
|
* } |
||||||
|
* |
||||||
|
* @method drawText |
||||||
|
* @private |
||||||
|
* @param {Number} x the x position of the text drawn (left top) |
||||||
|
* @param {Number} y the y position of the text drawn (left top) |
||||||
|
* @param {String} id the id of the dom element |
||||||
|
* @param {String} text the text drawn |
||||||
|
* @param {Object} textOptions the option of the text |
||||||
|
* @param {Number} [a] the angle of the value drawn |
||||||
|
*/ |
||||||
|
function drawText(x, y, id, text, textOptions, a) { |
||||||
|
var span = $("." + id, placeholder); |
||||||
|
var exists = span.length; |
||||||
|
if (!exists) { |
||||||
|
span = $("<span></span>") |
||||||
|
span.attr("id", id); |
||||||
|
span.css("position", "absolute"); |
||||||
|
span.css("top", y + "px"); |
||||||
|
if (textOptions.font.size) { |
||||||
|
span.css("font-size", textOptions.font.size + "px"); |
||||||
|
} |
||||||
|
if (textOptions.font.family) { |
||||||
|
span.css("font-family", textOptions.font.family); |
||||||
|
} |
||||||
|
if (textOptions.color) { |
||||||
|
span.css("color", textOptions.color); |
||||||
|
} |
||||||
|
if (textOptions.background.color) { |
||||||
|
span.css("background-color", textOptions.background.color); |
||||||
|
} |
||||||
|
if (textOptions.background.opacity) { |
||||||
|
span.css("opacity", textOptions.background.opacity); |
||||||
|
} |
||||||
|
placeholder.append(span); |
||||||
|
} |
||||||
|
span.text(text); |
||||||
|
// after append, readjust the left position
|
||||||
|
span.css("left", x + "px"); // for redraw, resetting the left position is needed here
|
||||||
|
span.css("left", (parseInt(span.css("left")) - (span.width()/ 2)) + "px"); |
||||||
|
|
||||||
|
// at last, set angle
|
||||||
|
if (!exists && a) { |
||||||
|
span.css("top", (parseInt(span.css("top")) - (span.height()/ 2)) + "px"); |
||||||
|
span.css("transform", "rotate(" + ((180 * a) + 90) + "deg)"); // not supported for ie8
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return Gauge; |
||||||
|
})(); |
||||||
|
/** |
||||||
|
* get a instance of Logger |
||||||
|
* |
||||||
|
* @method getLogger |
||||||
|
* @for flot.gauge |
||||||
|
* @private |
||||||
|
* @param {Object} debugOptions the options of debug |
||||||
|
*/ |
||||||
|
function getLogger(debugOptions) { |
||||||
|
return typeof Logger !== "undefined" ? new Logger(debugOptions) : null; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the index of columns for the specified data |
||||||
|
* |
||||||
|
* @method col |
||||||
|
* @for flot.gauge |
||||||
|
* @param {Number} columns the number of columns |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @return the index of columns |
||||||
|
*/ |
||||||
|
function col(columns, i) { |
||||||
|
return i % columns; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the index of rows for the specified data |
||||||
|
* |
||||||
|
* @method row |
||||||
|
* @for flot.gauge |
||||||
|
* @param {Number} columns the number of rows |
||||||
|
* @param {Number} i the index of the series |
||||||
|
* @return the index of rows |
||||||
|
*/ |
||||||
|
function row(columns, i) { |
||||||
|
return Math.floor(i / columns); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* calculate the angle in radians |
||||||
|
* |
||||||
|
* internally, use a number without PI (0 - 2). |
||||||
|
* so, in this function, multiply PI |
||||||
|
* |
||||||
|
* @method toRad |
||||||
|
* @for flot.gauge |
||||||
|
* @param {Number} a the number of angle without PI |
||||||
|
* @return the angle in radians |
||||||
|
*/ |
||||||
|
function toRad(a) { |
||||||
|
return a * Math.PI; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* draw an arc |
||||||
|
* |
||||||
|
* @method drawArc |
||||||
|
* @for flot.gauge |
||||||
|
* @param {Object} context the context of canvas |
||||||
|
* @param {Number} cx the x position of the center |
||||||
|
* @param {Number} cy the y position of the center |
||||||
|
* @param {Number} r the radius of an arc |
||||||
|
* @param {Number} w the width of an arc |
||||||
|
* @param {Number} rd1 the start angle of an arc in radians |
||||||
|
* @param {Number} rd2 the end angle of an arc in radians |
||||||
|
* @param {String} lc the color of a line |
||||||
|
* @param {Number} lw the widht of a line |
||||||
|
* @param {String} fc the fill color of an arc |
||||||
|
*/ |
||||||
|
function drawArc(context, cx, cy, r, w, rd1, rd2, lc, lw, fc) { |
||||||
|
if (rd1 === rd2) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var counterClockwise = false; |
||||||
|
context.save(); |
||||||
|
context.beginPath(); |
||||||
|
context.arc(cx, cy, r, rd1, rd2, counterClockwise); |
||||||
|
context.lineTo(cx + (r - w) * Math.cos(rd2), |
||||||
|
cy + (r - w) * Math.sin(rd2)); |
||||||
|
context.arc(cx, cy, r - w, rd2, rd1, !counterClockwise); |
||||||
|
context.closePath(); |
||||||
|
if (lw) { |
||||||
|
context.lineWidth = lw; |
||||||
|
} |
||||||
|
if (lc) { |
||||||
|
context.strokeStyle = lc; |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
if (fc) { |
||||||
|
context.fillStyle = fc; |
||||||
|
context.fill(); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* initialize plugin |
||||||
|
* |
||||||
|
* @method init |
||||||
|
* @for flot.gauge |
||||||
|
* @private |
||||||
|
* @param {Object} plot a instance of plot |
||||||
|
*/ |
||||||
|
function init (plot) { |
||||||
|
// add processOptions hook
|
||||||
|
plot.hooks.processOptions.push(function(plot, options) { |
||||||
|
var logger = getLogger(options.series.gauges.debug); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// turn 'grid' and 'legend' off
|
||||||
|
if (options.series.gauges.show) { |
||||||
|
options.grid.show = false; |
||||||
|
options.legend.show = false; |
||||||
|
} |
||||||
|
|
||||||
|
// sort threshold
|
||||||
|
var thresholds = options.series.gauges.threshold.values; |
||||||
|
|
||||||
|
thresholds.sort(function(a, b) { |
||||||
|
if (a.value < b.value) { |
||||||
|
return -1; |
||||||
|
} else if (a.value > b.value) { |
||||||
|
return 1; |
||||||
|
} else { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
// add draw hook
|
||||||
|
plot.hooks.draw.push(function(plot, context) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
var gaugeOptions = options.series.gauges; |
||||||
|
|
||||||
|
var logger = getLogger(gaugeOptions.debug); |
||||||
|
|
||||||
|
|
||||||
|
if (!gaugeOptions.show) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var series = plot.getData(); |
||||||
|
|
||||||
|
if (!series || !series.length) { |
||||||
|
return; // if no series were passed
|
||||||
|
} |
||||||
|
|
||||||
|
var gauge = new Gauge(plot, context); |
||||||
|
|
||||||
|
// calculate layout
|
||||||
|
var layout = gauge.calculateLayout(); |
||||||
|
|
||||||
|
// debug layout
|
||||||
|
if (gaugeOptions.debug.layout) { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// draw background
|
||||||
|
gauge.drawBackground(layout) |
||||||
|
|
||||||
|
// draw cells (label, gauge, value, threshold)
|
||||||
|
for (var i = 0; i < series.length; i++) { |
||||||
|
var item = series[i]; |
||||||
|
|
||||||
|
var gaugeOptionsi = $.extend({}, gaugeOptions, item.gauges); |
||||||
|
if (item.gauges) { |
||||||
|
// re-calculate 'auto' values
|
||||||
|
gauge.calculateAutoValues(gaugeOptionsi, layout.cellWidth); |
||||||
|
} |
||||||
|
|
||||||
|
// calculate cell layout
|
||||||
|
var cellLayout = gauge.calculateCellLayout(gaugeOptionsi, layout, i); |
||||||
|
|
||||||
|
// draw cell background
|
||||||
|
gauge.drawCellBackground(gaugeOptionsi, cellLayout) |
||||||
|
// debug layout
|
||||||
|
if (gaugeOptionsi.debug.layout) { |
||||||
|
|
||||||
|
} |
||||||
|
// draw label
|
||||||
|
if (gaugeOptionsi.label.show) { |
||||||
|
gauge.drawLable(gaugeOptionsi, layout, cellLayout, i, item); |
||||||
|
} |
||||||
|
// draw gauge
|
||||||
|
gauge.drawGauge(gaugeOptionsi, layout, cellLayout, item.label, item.data[0][1]); |
||||||
|
// draw threshold
|
||||||
|
if (gaugeOptionsi.threshold.show) { |
||||||
|
gauge.drawThreshold(gaugeOptionsi, layout, cellLayout); |
||||||
|
} |
||||||
|
if (gaugeOptionsi.threshold.label.show) { |
||||||
|
gauge.drawThresholdValues(gaugeOptionsi, layout, cellLayout, i) |
||||||
|
} |
||||||
|
// draw value
|
||||||
|
if (gaugeOptionsi.value.show) { |
||||||
|
gauge.drawValue(gaugeOptionsi, layout, cellLayout, i, item); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* [defaults description] |
||||||
|
* |
||||||
|
* @property defaults |
||||||
|
* @type {Object} |
||||||
|
*/ |
||||||
|
var defaults = { |
||||||
|
series: { |
||||||
|
gauges: { |
||||||
|
debug: { |
||||||
|
log: false, |
||||||
|
layout: false, |
||||||
|
alert: false |
||||||
|
}, |
||||||
|
show: false, |
||||||
|
layout: { |
||||||
|
margin: 5, |
||||||
|
columns: 3, |
||||||
|
hMargin: 5, |
||||||
|
vMargin: 5, |
||||||
|
square: false |
||||||
|
}, |
||||||
|
frame: { |
||||||
|
show: true |
||||||
|
}, |
||||||
|
cell: { |
||||||
|
background: { |
||||||
|
color: null |
||||||
|
}, |
||||||
|
border: { |
||||||
|
show: true, |
||||||
|
color: "black", |
||||||
|
width: 1 |
||||||
|
}, |
||||||
|
margin: 5, |
||||||
|
vAlign: "middle" // 'top' or 'middle' or 'bottom'
|
||||||
|
}, |
||||||
|
gauge: { |
||||||
|
width: "auto", // a specified number, or 'auto'
|
||||||
|
startAngle: 0.9, // 0 - 2 factor of the radians
|
||||||
|
endAngle: 2.1, // 0 - 2 factor of the radians
|
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
background: { |
||||||
|
color: "white" |
||||||
|
}, |
||||||
|
border: { |
||||||
|
color: "lightgray", |
||||||
|
width: 2 |
||||||
|
}, |
||||||
|
shadow: { |
||||||
|
show: true, |
||||||
|
blur: 5 |
||||||
|
} |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
margin: "auto", // a specified number, or 'auto'
|
||||||
|
background: { |
||||||
|
color: null, |
||||||
|
opacity: 0 |
||||||
|
}, |
||||||
|
font: { |
||||||
|
size: "auto", // a specified number, or 'auto'
|
||||||
|
family: "sans-serif" |
||||||
|
}, |
||||||
|
color: null, |
||||||
|
formatter: function(label, value) { |
||||||
|
return label; |
||||||
|
} |
||||||
|
}, |
||||||
|
value: { |
||||||
|
show: true, |
||||||
|
margin: "auto", // a specified number, or 'auto'
|
||||||
|
background: { |
||||||
|
color: null, |
||||||
|
opacity: 0 |
||||||
|
}, |
||||||
|
font: { |
||||||
|
size: "auto", // a specified number, or 'auto'
|
||||||
|
family: "sans-serif" |
||||||
|
}, |
||||||
|
color: null, |
||||||
|
formatter: function(label, value) { |
||||||
|
return parseInt(value); |
||||||
|
} |
||||||
|
}, |
||||||
|
threshold: { |
||||||
|
show: true, |
||||||
|
width: "auto", // a specified number, or 'auto'
|
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
margin: "auto", // a specified number, or 'auto'
|
||||||
|
background: { |
||||||
|
color: null, |
||||||
|
opacity: 0 |
||||||
|
}, |
||||||
|
font: { |
||||||
|
size: "auto", // a specified number, or 'auto'
|
||||||
|
family: ",sans-serif" |
||||||
|
}, |
||||||
|
color: null, |
||||||
|
formatter: function(value) { |
||||||
|
return value; |
||||||
|
} |
||||||
|
}, |
||||||
|
values: [ |
||||||
|
{ |
||||||
|
value: 50, |
||||||
|
color: "lightgreen" |
||||||
|
}, { |
||||||
|
value: 80, |
||||||
|
color: "yellow" |
||||||
|
}, { |
||||||
|
value: 100, |
||||||
|
color: "red" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// register the gauge plugin
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: defaults, |
||||||
|
name: "gauge", |
||||||
|
version: "1.1.0" |
||||||
|
}); |
||||||
|
|
||||||
|
})(jQuery); |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,817 @@ |
|||||||
|
/* Flot plugin for rendering pie charts. |
||||||
|
|
||||||
|
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
The plugin assumes that each series has a single data value, and that each |
||||||
|
value is a positive integer or zero. Negative numbers don't make sense for a |
||||||
|
pie chart, and have unpredictable results. The values do NOT need to be |
||||||
|
passed in as percentages; the plugin will calculate the total and per-slice |
||||||
|
percentages internally. |
||||||
|
|
||||||
|
* Created by Brian Medendorp |
||||||
|
|
||||||
|
* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars |
||||||
|
|
||||||
|
The plugin supports these options: |
||||||
|
|
||||||
|
series: { |
||||||
|
pie: { |
||||||
|
show: true/false |
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto' |
||||||
|
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect |
||||||
|
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result |
||||||
|
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show) |
||||||
|
offset: { |
||||||
|
top: integer value to move the pie up or down |
||||||
|
left: integer value to move the pie left or right, or 'auto' |
||||||
|
}, |
||||||
|
stroke: { |
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF') |
||||||
|
width: integer pixel width of the stroke |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: true/false, or 'auto' |
||||||
|
formatter: a user-defined function that modifies the text/style of the label text |
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length |
||||||
|
background: { |
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000') |
||||||
|
opacity: 0-1 |
||||||
|
}, |
||||||
|
threshold: 0-1 for the percentage value at which to hide labels (if they're too small) |
||||||
|
}, |
||||||
|
combine: { |
||||||
|
threshold: 0-1 for the percentage value at which to combine slices (if they're too small) |
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined |
||||||
|
label: any text value of what the combined slice should be labeled |
||||||
|
} |
||||||
|
highlight: { |
||||||
|
opacity: 0-1 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
More detail and specific examples can be found in the included HTML file. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
(function($) { |
||||||
|
|
||||||
|
// Maximum redraw attempts when fitting labels within the plot
|
||||||
|
|
||||||
|
var REDRAW_ATTEMPTS = 10; |
||||||
|
|
||||||
|
// Factor by which to shrink the pie when fitting labels within the plot
|
||||||
|
|
||||||
|
var REDRAW_SHRINK = 0.95; |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
|
||||||
|
var canvas = null, |
||||||
|
target = null, |
||||||
|
maxRadius = null, |
||||||
|
centerLeft = null, |
||||||
|
centerTop = null, |
||||||
|
processed = false, |
||||||
|
ctx = null; |
||||||
|
|
||||||
|
// interactive variables
|
||||||
|
|
||||||
|
var highlights = []; |
||||||
|
|
||||||
|
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
||||||
|
|
||||||
|
plot.hooks.processOptions.push(function(plot, options) { |
||||||
|
if (options.series.pie.show) { |
||||||
|
|
||||||
|
options.grid.show = false; |
||||||
|
|
||||||
|
// set labels.show
|
||||||
|
|
||||||
|
if (options.series.pie.label.show == "auto") { |
||||||
|
if (options.legend.show) { |
||||||
|
options.series.pie.label.show = false; |
||||||
|
} else { |
||||||
|
options.series.pie.label.show = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// set radius
|
||||||
|
|
||||||
|
if (options.series.pie.radius == "auto") { |
||||||
|
if (options.series.pie.label.show) { |
||||||
|
options.series.pie.radius = 3/4; |
||||||
|
} else { |
||||||
|
options.series.pie.radius = 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// ensure sane tilt
|
||||||
|
|
||||||
|
if (options.series.pie.tilt > 1) { |
||||||
|
options.series.pie.tilt = 1; |
||||||
|
} else if (options.series.pie.tilt < 0) { |
||||||
|
options.series.pie.tilt = 0; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(function(plot, eventHolder) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
if (options.series.pie.show) { |
||||||
|
if (options.grid.hoverable) { |
||||||
|
eventHolder.unbind("mousemove").mousemove(onMouseMove); |
||||||
|
} |
||||||
|
if (options.grid.clickable) { |
||||||
|
eventHolder.unbind("click").click(onClick); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
if (options.series.pie.show) { |
||||||
|
processDatapoints(plot, series, data, datapoints); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.drawOverlay.push(function(plot, octx) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
if (options.series.pie.show) { |
||||||
|
drawOverlay(plot, octx); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.draw.push(function(plot, newCtx) { |
||||||
|
var options = plot.getOptions(); |
||||||
|
if (options.series.pie.show) { |
||||||
|
draw(plot, newCtx); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function processDatapoints(plot, series, datapoints) { |
||||||
|
if (!processed) { |
||||||
|
processed = true; |
||||||
|
canvas = plot.getCanvas(); |
||||||
|
target = $(canvas).parent(); |
||||||
|
options = plot.getOptions(); |
||||||
|
plot.setData(combine(plot.getData())); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function combine(data) { |
||||||
|
|
||||||
|
var total = 0, |
||||||
|
combined = 0, |
||||||
|
numCombined = 0, |
||||||
|
color = options.series.pie.combine.color, |
||||||
|
newdata = []; |
||||||
|
|
||||||
|
// Fix up the raw data from Flot, ensuring the data is numeric
|
||||||
|
|
||||||
|
for (var i = 0; i < data.length; ++i) { |
||||||
|
|
||||||
|
var value = data[i].data; |
||||||
|
|
||||||
|
// If the data is an array, we'll assume that it's a standard
|
||||||
|
// Flot x-y pair, and are concerned only with the second value.
|
||||||
|
|
||||||
|
// Note how we use the original array, rather than creating a
|
||||||
|
// new one; this is more efficient and preserves any extra data
|
||||||
|
// that the user may have stored in higher indexes.
|
||||||
|
|
||||||
|
if ($.isArray(value) && value.length == 1) { |
||||||
|
value = value[0]; |
||||||
|
} |
||||||
|
|
||||||
|
if ($.isArray(value)) { |
||||||
|
// Equivalent to $.isNumeric() but compatible with jQuery < 1.7
|
||||||
|
if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) { |
||||||
|
value[1] = +value[1]; |
||||||
|
} else { |
||||||
|
value[1] = 0; |
||||||
|
} |
||||||
|
} else if (!isNaN(parseFloat(value)) && isFinite(value)) { |
||||||
|
value = [1, +value]; |
||||||
|
} else { |
||||||
|
value = [1, 0]; |
||||||
|
} |
||||||
|
|
||||||
|
data[i].data = [value]; |
||||||
|
} |
||||||
|
|
||||||
|
// Sum up all the slices, so we can calculate percentages for each
|
||||||
|
|
||||||
|
for (var i = 0; i < data.length; ++i) { |
||||||
|
total += data[i].data[0][1]; |
||||||
|
} |
||||||
|
|
||||||
|
// Count the number of slices with percentages below the combine
|
||||||
|
// threshold; if it turns out to be just one, we won't combine.
|
||||||
|
|
||||||
|
for (var i = 0; i < data.length; ++i) { |
||||||
|
var value = data[i].data[0][1]; |
||||||
|
if (value / total <= options.series.pie.combine.threshold) { |
||||||
|
combined += value; |
||||||
|
numCombined++; |
||||||
|
if (!color) { |
||||||
|
color = data[i].color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for (var i = 0; i < data.length; ++i) { |
||||||
|
var value = data[i].data[0][1]; |
||||||
|
if (numCombined < 2 || value / total > options.series.pie.combine.threshold) { |
||||||
|
newdata.push({ |
||||||
|
data: [[1, value]], |
||||||
|
color: data[i].color, |
||||||
|
label: data[i].label, |
||||||
|
angle: value * Math.PI * 2 / total, |
||||||
|
percent: value / (total / 100) |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (numCombined > 1) { |
||||||
|
newdata.push({ |
||||||
|
data: [[1, combined]], |
||||||
|
color: color, |
||||||
|
label: options.series.pie.combine.label, |
||||||
|
angle: combined * Math.PI * 2 / total, |
||||||
|
percent: combined / (total / 100) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return newdata; |
||||||
|
} |
||||||
|
|
||||||
|
function draw(plot, newCtx) { |
||||||
|
|
||||||
|
if (!target) { |
||||||
|
return; // if no series were passed
|
||||||
|
} |
||||||
|
|
||||||
|
var canvasWidth = plot.getPlaceholder().width(), |
||||||
|
canvasHeight = plot.getPlaceholder().height(), |
||||||
|
legendWidth = target.children().filter(".legend").children().width() || 0; |
||||||
|
|
||||||
|
ctx = newCtx; |
||||||
|
|
||||||
|
// WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
|
||||||
|
|
||||||
|
// When combining smaller slices into an 'other' slice, we need to
|
||||||
|
// add a new series. Since Flot gives plugins no way to modify the
|
||||||
|
// list of series, the pie plugin uses a hack where the first call
|
||||||
|
// to processDatapoints results in a call to setData with the new
|
||||||
|
// list of series, then subsequent processDatapoints do nothing.
|
||||||
|
|
||||||
|
// The plugin-global 'processed' flag is used to control this hack;
|
||||||
|
// it starts out false, and is set to true after the first call to
|
||||||
|
// processDatapoints.
|
||||||
|
|
||||||
|
// Unfortunately this turns future setData calls into no-ops; they
|
||||||
|
// call processDatapoints, the flag is true, and nothing happens.
|
||||||
|
|
||||||
|
// To fix this we'll set the flag back to false here in draw, when
|
||||||
|
// all series have been processed, so the next sequence of calls to
|
||||||
|
// processDatapoints once again starts out with a slice-combine.
|
||||||
|
// This is really a hack; in 0.9 we need to give plugins a proper
|
||||||
|
// way to modify series before any processing begins.
|
||||||
|
|
||||||
|
processed = false; |
||||||
|
|
||||||
|
// calculate maximum radius and center point
|
||||||
|
|
||||||
|
maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2; |
||||||
|
centerTop = canvasHeight / 2 + options.series.pie.offset.top; |
||||||
|
centerLeft = canvasWidth / 2; |
||||||
|
|
||||||
|
if (options.series.pie.offset.left == "auto") { |
||||||
|
if (options.legend.position.match("w")) { |
||||||
|
centerLeft += legendWidth / 2; |
||||||
|
} else { |
||||||
|
centerLeft -= legendWidth / 2; |
||||||
|
} |
||||||
|
} else { |
||||||
|
centerLeft += options.series.pie.offset.left; |
||||||
|
} |
||||||
|
|
||||||
|
if (centerLeft < maxRadius) { |
||||||
|
centerLeft = maxRadius; |
||||||
|
} else if (centerLeft > canvasWidth - maxRadius) { |
||||||
|
centerLeft = canvasWidth - maxRadius; |
||||||
|
} |
||||||
|
|
||||||
|
var slices = plot.getData(), |
||||||
|
attempts = 0; |
||||||
|
|
||||||
|
// Keep shrinking the pie's radius until drawPie returns true,
|
||||||
|
// indicating that all the labels fit, or we try too many times.
|
||||||
|
|
||||||
|
do { |
||||||
|
if (attempts > 0) { |
||||||
|
maxRadius *= REDRAW_SHRINK; |
||||||
|
} |
||||||
|
attempts += 1; |
||||||
|
clear(); |
||||||
|
if (options.series.pie.tilt <= 0.8) { |
||||||
|
drawShadow(); |
||||||
|
} |
||||||
|
} while (!drawPie() && attempts < REDRAW_ATTEMPTS) |
||||||
|
|
||||||
|
if (attempts >= REDRAW_ATTEMPTS) { |
||||||
|
clear(); |
||||||
|
target.prepend("<div class='error'>Could not draw pie with labels contained inside canvas</div>"); |
||||||
|
} |
||||||
|
|
||||||
|
if (plot.setSeries && plot.insertLegend) { |
||||||
|
plot.setSeries(slices); |
||||||
|
plot.insertLegend(); |
||||||
|
} |
||||||
|
|
||||||
|
// we're actually done at this point, just defining internal functions at this point
|
||||||
|
|
||||||
|
function clear() { |
||||||
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
||||||
|
target.children().filter(".pieLabel, .pieLabelBackground").remove(); |
||||||
|
} |
||||||
|
|
||||||
|
function drawShadow() { |
||||||
|
|
||||||
|
var shadowLeft = options.series.pie.shadow.left; |
||||||
|
var shadowTop = options.series.pie.shadow.top; |
||||||
|
var edge = 10; |
||||||
|
var alpha = options.series.pie.shadow.alpha; |
||||||
|
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; |
||||||
|
|
||||||
|
if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) { |
||||||
|
return; // shadow would be outside canvas, so don't draw it
|
||||||
|
} |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.translate(shadowLeft,shadowTop); |
||||||
|
ctx.globalAlpha = alpha; |
||||||
|
ctx.fillStyle = "#000"; |
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
|
||||||
|
ctx.translate(centerLeft,centerTop); |
||||||
|
ctx.scale(1, options.series.pie.tilt); |
||||||
|
|
||||||
|
//radius -= edge;
|
||||||
|
|
||||||
|
for (var i = 1; i <= edge; i++) { |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.arc(0, 0, radius, 0, Math.PI * 2, false); |
||||||
|
ctx.fill(); |
||||||
|
radius -= i; |
||||||
|
} |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
function drawPie() { |
||||||
|
|
||||||
|
var startAngle = Math.PI * options.series.pie.startAngle; |
||||||
|
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; |
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.translate(centerLeft,centerTop); |
||||||
|
ctx.scale(1, options.series.pie.tilt); |
||||||
|
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
||||||
|
|
||||||
|
// draw slices
|
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
var currentAngle = startAngle; |
||||||
|
for (var i = 0; i < slices.length; ++i) { |
||||||
|
slices[i].startAngle = currentAngle; |
||||||
|
drawSlice(slices[i].angle, slices[i].color, true); |
||||||
|
} |
||||||
|
ctx.restore(); |
||||||
|
|
||||||
|
// draw slice outlines
|
||||||
|
|
||||||
|
if (options.series.pie.stroke.width > 0) { |
||||||
|
ctx.save(); |
||||||
|
ctx.lineWidth = options.series.pie.stroke.width; |
||||||
|
currentAngle = startAngle; |
||||||
|
for (var i = 0; i < slices.length; ++i) { |
||||||
|
drawSlice(slices[i].angle, options.series.pie.stroke.color, false); |
||||||
|
} |
||||||
|
ctx.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
// draw donut hole
|
||||||
|
|
||||||
|
drawDonutHole(ctx); |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
|
||||||
|
// Draw the labels, returning true if they fit within the plot
|
||||||
|
|
||||||
|
if (options.series.pie.label.show) { |
||||||
|
return drawLabels(); |
||||||
|
} else return true; |
||||||
|
|
||||||
|
function drawSlice(angle, color, fill) { |
||||||
|
|
||||||
|
if (angle <= 0 || isNaN(angle)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (fill) { |
||||||
|
ctx.fillStyle = color; |
||||||
|
} else { |
||||||
|
ctx.strokeStyle = color; |
||||||
|
ctx.lineJoin = "round"; |
||||||
|
} |
||||||
|
|
||||||
|
ctx.beginPath(); |
||||||
|
if (Math.abs(angle - Math.PI * 2) > 0.000000001) { |
||||||
|
ctx.moveTo(0, 0); // Center of the pie
|
||||||
|
} |
||||||
|
|
||||||
|
//ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
|
||||||
|
ctx.arc(0, 0, radius,currentAngle, currentAngle + angle / 2, false); |
||||||
|
ctx.arc(0, 0, radius,currentAngle + angle / 2, currentAngle + angle, false); |
||||||
|
ctx.closePath(); |
||||||
|
//ctx.rotate(angle); // This doesn't work properly in Opera
|
||||||
|
currentAngle += angle; |
||||||
|
|
||||||
|
if (fill) { |
||||||
|
ctx.fill(); |
||||||
|
} else { |
||||||
|
ctx.stroke(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function drawLabels() { |
||||||
|
|
||||||
|
var currentAngle = startAngle; |
||||||
|
var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius; |
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i) { |
||||||
|
if (slices[i].percent >= options.series.pie.label.threshold * 100) { |
||||||
|
if (!drawLabel(slices[i], currentAngle, i)) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
currentAngle += slices[i].angle; |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
|
||||||
|
function drawLabel(slice, startAngle, index) { |
||||||
|
|
||||||
|
if (slice.data[0][1] == 0) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
// format label text
|
||||||
|
|
||||||
|
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter; |
||||||
|
|
||||||
|
if (lf) { |
||||||
|
text = lf(slice.label, slice); |
||||||
|
} else { |
||||||
|
text = slice.label; |
||||||
|
} |
||||||
|
|
||||||
|
if (plf) { |
||||||
|
text = plf(text, slice); |
||||||
|
} |
||||||
|
|
||||||
|
var halfAngle = ((startAngle + slice.angle) + startAngle) / 2; |
||||||
|
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius); |
||||||
|
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt; |
||||||
|
|
||||||
|
var html = "<span class='pieLabel' id='pieLabel" + index + "' style='position:absolute;top:" + y + "px;left:" + x + "px;'>" + text + "</span>"; |
||||||
|
target.append(html); |
||||||
|
|
||||||
|
var label = target.children("#pieLabel" + index); |
||||||
|
var labelTop = (y - label.height() / 2); |
||||||
|
var labelLeft = (x - label.width() / 2); |
||||||
|
|
||||||
|
label.css("top", labelTop); |
||||||
|
label.css("left", labelLeft); |
||||||
|
|
||||||
|
// check to make sure that the label is not outside the canvas
|
||||||
|
|
||||||
|
if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (options.series.pie.label.background.opacity != 0) { |
||||||
|
|
||||||
|
// put in the transparent background separately to avoid blended labels and label boxes
|
||||||
|
|
||||||
|
var c = options.series.pie.label.background.color; |
||||||
|
|
||||||
|
if (c == null) { |
||||||
|
c = slice.color; |
||||||
|
} |
||||||
|
|
||||||
|
var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;"; |
||||||
|
$("<div class='pieLabelBackground' style='position:absolute;width:" + label.width() + "px;height:" + label.height() + "px;" + pos + "background-color:" + c + ";'></div>") |
||||||
|
.css("opacity", options.series.pie.label.background.opacity) |
||||||
|
.insertBefore(label); |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
} // end individual label function
|
||||||
|
} // end drawLabels function
|
||||||
|
} // end drawPie function
|
||||||
|
} // end draw function
|
||||||
|
|
||||||
|
// Placed here because it needs to be accessed from multiple locations
|
||||||
|
|
||||||
|
function drawDonutHole(layer) { |
||||||
|
if (options.series.pie.innerRadius > 0) { |
||||||
|
|
||||||
|
// subtract the center
|
||||||
|
|
||||||
|
layer.save(); |
||||||
|
var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius; |
||||||
|
layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
|
||||||
|
layer.beginPath(); |
||||||
|
layer.fillStyle = options.series.pie.stroke.color; |
||||||
|
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false); |
||||||
|
layer.fill(); |
||||||
|
layer.closePath(); |
||||||
|
layer.restore(); |
||||||
|
|
||||||
|
// add inner stroke
|
||||||
|
|
||||||
|
layer.save(); |
||||||
|
layer.beginPath(); |
||||||
|
layer.strokeStyle = options.series.pie.stroke.color; |
||||||
|
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false); |
||||||
|
layer.stroke(); |
||||||
|
layer.closePath(); |
||||||
|
layer.restore(); |
||||||
|
|
||||||
|
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//-- Additional Interactive related functions --
|
||||||
|
|
||||||
|
function isPointInPoly(poly, pt) { |
||||||
|
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) |
||||||
|
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1])) |
||||||
|
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0]) |
||||||
|
&& (c = !c); |
||||||
|
return c; |
||||||
|
} |
||||||
|
|
||||||
|
function findNearbySlice(mouseX, mouseY) { |
||||||
|
|
||||||
|
var slices = plot.getData(), |
||||||
|
options = plot.getOptions(), |
||||||
|
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius, |
||||||
|
x, y; |
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i) { |
||||||
|
|
||||||
|
var s = slices[i]; |
||||||
|
|
||||||
|
if (s.pie.show) { |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.beginPath(); |
||||||
|
ctx.moveTo(0, 0); // Center of the pie
|
||||||
|
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
|
||||||
|
ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false); |
||||||
|
ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false); |
||||||
|
ctx.closePath(); |
||||||
|
x = mouseX - centerLeft; |
||||||
|
y = mouseY - centerTop; |
||||||
|
|
||||||
|
if (ctx.isPointInPath) { |
||||||
|
if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) { |
||||||
|
ctx.restore(); |
||||||
|
return { |
||||||
|
datapoint: [s.percent, s.data], |
||||||
|
dataIndex: 0, |
||||||
|
series: s, |
||||||
|
seriesIndex: i |
||||||
|
}; |
||||||
|
} |
||||||
|
} else { |
||||||
|
|
||||||
|
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
|
||||||
|
|
||||||
|
var p1X = radius * Math.cos(s.startAngle), |
||||||
|
p1Y = radius * Math.sin(s.startAngle), |
||||||
|
p2X = radius * Math.cos(s.startAngle + s.angle / 4), |
||||||
|
p2Y = radius * Math.sin(s.startAngle + s.angle / 4), |
||||||
|
p3X = radius * Math.cos(s.startAngle + s.angle / 2), |
||||||
|
p3Y = radius * Math.sin(s.startAngle + s.angle / 2), |
||||||
|
p4X = radius * Math.cos(s.startAngle + s.angle / 1.5), |
||||||
|
p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5), |
||||||
|
p5X = radius * Math.cos(s.startAngle + s.angle), |
||||||
|
p5Y = radius * Math.sin(s.startAngle + s.angle), |
||||||
|
arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]], |
||||||
|
arrPoint = [x, y]; |
||||||
|
|
||||||
|
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
|
||||||
|
|
||||||
|
if (isPointInPoly(arrPoly, arrPoint)) { |
||||||
|
ctx.restore(); |
||||||
|
return { |
||||||
|
datapoint: [s.percent, s.data], |
||||||
|
dataIndex: 0, |
||||||
|
series: s, |
||||||
|
seriesIndex: i |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function onMouseMove(e) { |
||||||
|
triggerClickHoverEvent("plothover", e); |
||||||
|
} |
||||||
|
|
||||||
|
function onClick(e) { |
||||||
|
triggerClickHoverEvent("plotclick", e); |
||||||
|
} |
||||||
|
|
||||||
|
// trigger click or hover event (they send the same parameters so we share their code)
|
||||||
|
|
||||||
|
function triggerClickHoverEvent(eventname, e) { |
||||||
|
|
||||||
|
var offset = plot.offset(); |
||||||
|
var canvasX = parseInt(e.pageX - offset.left); |
||||||
|
var canvasY = parseInt(e.pageY - offset.top); |
||||||
|
var item = findNearbySlice(canvasX, canvasY); |
||||||
|
|
||||||
|
if (options.grid.autoHighlight) { |
||||||
|
|
||||||
|
// clear auto-highlights
|
||||||
|
|
||||||
|
for (var i = 0; i < highlights.length; ++i) { |
||||||
|
var h = highlights[i]; |
||||||
|
if (h.auto == eventname && !(item && h.series == item.series)) { |
||||||
|
unhighlight(h.series); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// highlight the slice
|
||||||
|
|
||||||
|
if (item) { |
||||||
|
highlight(item.series, eventname); |
||||||
|
} |
||||||
|
|
||||||
|
// trigger any hover bind events
|
||||||
|
|
||||||
|
var pos = { pageX: e.pageX, pageY: e.pageY }; |
||||||
|
target.trigger(eventname, [pos, item]); |
||||||
|
} |
||||||
|
|
||||||
|
function highlight(s, auto) { |
||||||
|
//if (typeof s == "number") {
|
||||||
|
// s = series[s];
|
||||||
|
//}
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s); |
||||||
|
|
||||||
|
if (i == -1) { |
||||||
|
highlights.push({ series: s, auto: auto }); |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} else if (!auto) { |
||||||
|
highlights[i].auto = false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function unhighlight(s) { |
||||||
|
if (s == null) { |
||||||
|
highlights = []; |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} |
||||||
|
|
||||||
|
//if (typeof s == "number") {
|
||||||
|
// s = series[s];
|
||||||
|
//}
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s); |
||||||
|
|
||||||
|
if (i != -1) { |
||||||
|
highlights.splice(i, 1); |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function indexOfHighlight(s) { |
||||||
|
for (var i = 0; i < highlights.length; ++i) { |
||||||
|
var h = highlights[i]; |
||||||
|
if (h.series == s) |
||||||
|
return i; |
||||||
|
} |
||||||
|
return -1; |
||||||
|
} |
||||||
|
|
||||||
|
function drawOverlay(plot, octx) { |
||||||
|
|
||||||
|
var options = plot.getOptions(); |
||||||
|
|
||||||
|
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius; |
||||||
|
|
||||||
|
octx.save(); |
||||||
|
octx.translate(centerLeft, centerTop); |
||||||
|
octx.scale(1, options.series.pie.tilt); |
||||||
|
|
||||||
|
for (var i = 0; i < highlights.length; ++i) { |
||||||
|
drawHighlight(highlights[i].series); |
||||||
|
} |
||||||
|
|
||||||
|
drawDonutHole(octx); |
||||||
|
|
||||||
|
octx.restore(); |
||||||
|
|
||||||
|
function drawHighlight(series) { |
||||||
|
|
||||||
|
if (series.angle <= 0 || isNaN(series.angle)) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
|
||||||
|
octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
|
||||||
|
octx.beginPath(); |
||||||
|
if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) { |
||||||
|
octx.moveTo(0, 0); // Center of the pie
|
||||||
|
} |
||||||
|
octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false); |
||||||
|
octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false); |
||||||
|
octx.closePath(); |
||||||
|
octx.fill(); |
||||||
|
} |
||||||
|
} |
||||||
|
} // end init (plugin body)
|
||||||
|
|
||||||
|
// define pie specific options and their default values
|
||||||
|
|
||||||
|
var options = { |
||||||
|
series: { |
||||||
|
pie: { |
||||||
|
show: false, |
||||||
|
radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
innerRadius: 0, /* for donut */ |
||||||
|
startAngle: 3/2, |
||||||
|
tilt: 1, |
||||||
|
shadow: { |
||||||
|
left: 5, // shadow left offset
|
||||||
|
top: 15, // shadow top offset
|
||||||
|
alpha: 0.02 // shadow alpha
|
||||||
|
}, |
||||||
|
offset: { |
||||||
|
top: 0, |
||||||
|
left: "auto" |
||||||
|
}, |
||||||
|
stroke: { |
||||||
|
color: "#fff", |
||||||
|
width: 1 |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: "auto", |
||||||
|
formatter: function(label, slice) { |
||||||
|
return "<div style='font-size:x-small;text-align:center;padding:2px;color:" + slice.color + ";'>" + label + "<br/>" + Math.round(slice.percent) + "%</div>"; |
||||||
|
}, // formatter function
|
||||||
|
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
background: { |
||||||
|
color: null, |
||||||
|
opacity: 0 |
||||||
|
}, |
||||||
|
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
|
||||||
|
}, |
||||||
|
combine: { |
||||||
|
threshold: -1, // percentage at which to combine little slices into one larger slice
|
||||||
|
color: null, // color to give the new slice (auto-generated if null)
|
||||||
|
label: "Other" // label to give the new slice
|
||||||
|
}, |
||||||
|
highlight: { |
||||||
|
//color: "#fff", // will add this functionality once parseColor is available
|
||||||
|
opacity: 0.5 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: "pie", |
||||||
|
version: "1.1" |
||||||
|
}); |
||||||
|
|
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,380 @@ |
|||||||
|
/* Flot plugin for selecting regions of a plot. |
||||||
|
|
||||||
|
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
The plugin supports these options: |
||||||
|
|
||||||
|
selection: { |
||||||
|
mode: null or "x" or "y" or "xy", |
||||||
|
color: color, |
||||||
|
shape: "round" or "miter" or "bevel", |
||||||
|
minSize: number of pixels |
||||||
|
} |
||||||
|
|
||||||
|
Selection support is enabled by setting the mode to one of "x", "y" or "xy". |
||||||
|
In "x" mode, the user will only be able to specify the x range, similarly for |
||||||
|
"y" mode. For "xy", the selection becomes a rectangle where both ranges can be |
||||||
|
specified. "color" is color of the selection (if you need to change the color |
||||||
|
later on, you can get to it with plot.getOptions().selection.color). "shape" |
||||||
|
is the shape of the corners of the selection. |
||||||
|
|
||||||
|
"minSize" is the minimum size a selection can be in pixels. This value can |
||||||
|
be customized to determine the smallest size a selection can be and still |
||||||
|
have the selection rectangle be displayed. When customizing this value, the |
||||||
|
fact that it refers to pixels, not axis units must be taken into account. |
||||||
|
Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 |
||||||
|
minute, setting "minSize" to 1 will not make the minimum selection size 1 |
||||||
|
minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent |
||||||
|
"plotunselected" events from being fired when the user clicks the mouse without |
||||||
|
dragging. |
||||||
|
|
||||||
|
When selection support is enabled, a "plotselected" event will be emitted on |
||||||
|
the DOM element you passed into the plot function. The event handler gets a |
||||||
|
parameter with the ranges selected on the axes, like this: |
||||||
|
|
||||||
|
placeholder.bind( "plotselected", function( event, ranges ) { |
||||||
|
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to) |
||||||
|
// similar for yaxis - with multiple axes, the extra ones are in
|
||||||
|
// x2axis, x3axis, ...
|
||||||
|
}); |
||||||
|
|
||||||
|
The "plotselected" event is only fired when the user has finished making the |
||||||
|
selection. A "plotselecting" event is fired during the process with the same |
||||||
|
parameters as the "plotselected" event, in case you want to know what's |
||||||
|
happening while it's happening, |
||||||
|
|
||||||
|
A "plotunselected" event with no arguments is emitted when the user clicks the |
||||||
|
mouse to remove the selection. As stated above, setting "minSize" to 0 will |
||||||
|
destroy this behavior. |
||||||
|
|
||||||
|
The plugin allso adds the following methods to the plot object: |
||||||
|
|
||||||
|
- setSelection( ranges, preventEvent ) |
||||||
|
|
||||||
|
Set the selection rectangle. The passed in ranges is on the same form as |
||||||
|
returned in the "plotselected" event. If the selection mode is "x", you |
||||||
|
should put in either an xaxis range, if the mode is "y" you need to put in |
||||||
|
an yaxis range and both xaxis and yaxis if the selection mode is "xy", like |
||||||
|
this: |
||||||
|
|
||||||
|
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }); |
||||||
|
|
||||||
|
setSelection will trigger the "plotselected" event when called. If you don't |
||||||
|
want that to happen, e.g. if you're inside a "plotselected" handler, pass |
||||||
|
true as the second parameter. If you are using multiple axes, you can |
||||||
|
specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of |
||||||
|
xaxis, the plugin picks the first one it sees. |
||||||
|
|
||||||
|
- clearSelection( preventEvent ) |
||||||
|
|
||||||
|
Clear the selection rectangle. Pass in true to avoid getting a |
||||||
|
"plotunselected" event. |
||||||
|
|
||||||
|
- getSelection() |
||||||
|
|
||||||
|
Returns the current selection in the same format as the "plotselected" |
||||||
|
event. If there's currently no selection, the function returns null. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
(function ($) { |
||||||
|
function init(plot) { |
||||||
|
var selection = { |
||||||
|
first: { x: -1, y: -1}, second: { x: -1, y: -1}, |
||||||
|
show: false, |
||||||
|
active: false |
||||||
|
}; |
||||||
|
|
||||||
|
// FIXME: The drag handling implemented here should be
|
||||||
|
// abstracted out, there's some similar code from a library in
|
||||||
|
// the navigation plugin, this should be massaged a bit to fit
|
||||||
|
// the Flot cases here better and reused. Doing this would
|
||||||
|
// make this plugin much slimmer.
|
||||||
|
var savedhandlers = {}; |
||||||
|
|
||||||
|
var mouseUpHandler = null; |
||||||
|
|
||||||
|
function onMouseMove(e) { |
||||||
|
if (selection.active) { |
||||||
|
updateSelection(e); |
||||||
|
|
||||||
|
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function onMouseDown(e) { |
||||||
|
if (e.which != 1) // only accept left-click
|
||||||
|
return; |
||||||
|
|
||||||
|
// cancel out any text selections
|
||||||
|
document.body.focus(); |
||||||
|
|
||||||
|
// prevent text selection and drag in old-school browsers
|
||||||
|
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) { |
||||||
|
savedhandlers.onselectstart = document.onselectstart; |
||||||
|
document.onselectstart = function () { return false; }; |
||||||
|
} |
||||||
|
if (document.ondrag !== undefined && savedhandlers.ondrag == null) { |
||||||
|
savedhandlers.ondrag = document.ondrag; |
||||||
|
document.ondrag = function () { return false; }; |
||||||
|
} |
||||||
|
|
||||||
|
setSelectionPos(selection.first, e); |
||||||
|
|
||||||
|
selection.active = true; |
||||||
|
|
||||||
|
// this is a bit silly, but we have to use a closure to be
|
||||||
|
// able to whack the same handler again
|
||||||
|
mouseUpHandler = function (e) { onMouseUp(e); }; |
||||||
|
|
||||||
|
$(document).one("mouseup", mouseUpHandler); |
||||||
|
} |
||||||
|
|
||||||
|
function onMouseUp(e) { |
||||||
|
mouseUpHandler = null; |
||||||
|
|
||||||
|
// revert drag stuff for old-school browsers
|
||||||
|
if (document.onselectstart !== undefined) |
||||||
|
document.onselectstart = savedhandlers.onselectstart; |
||||||
|
if (document.ondrag !== undefined) |
||||||
|
document.ondrag = savedhandlers.ondrag; |
||||||
|
|
||||||
|
// no more dragging
|
||||||
|
selection.active = false; |
||||||
|
updateSelection(e); |
||||||
|
|
||||||
|
if (selectionIsSane()) |
||||||
|
triggerSelectedEvent(e); |
||||||
|
else { |
||||||
|
// this counts as a clear
|
||||||
|
plot.getPlaceholder().trigger("plotunselected", [ ]); |
||||||
|
plot.getPlaceholder().trigger("plotselecting", [ null ]); |
||||||
|
} |
||||||
|
|
||||||
|
setTimeout(function() { |
||||||
|
plot.isSelecting = false; |
||||||
|
}, 10); |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
function getSelection() { |
||||||
|
if (!selectionIsSane()) |
||||||
|
return null; |
||||||
|
|
||||||
|
if (!selection.show) return null; |
||||||
|
|
||||||
|
var r = {}, c1 = selection.first, c2 = selection.second; |
||||||
|
var axes = plot.getAxes(); |
||||||
|
// look if no axis is used
|
||||||
|
var noAxisInUse = true; |
||||||
|
$.each(axes, function (name, axis) { |
||||||
|
if (axis.used) { |
||||||
|
anyUsed = false; |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
$.each(axes, function (name, axis) { |
||||||
|
if (axis.used || noAxisInUse) { |
||||||
|
var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]); |
||||||
|
r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) }; |
||||||
|
} |
||||||
|
}); |
||||||
|
return r; |
||||||
|
} |
||||||
|
|
||||||
|
function triggerSelectedEvent(event) { |
||||||
|
var r = getSelection(); |
||||||
|
|
||||||
|
// Add ctrlKey and metaKey to event
|
||||||
|
r.ctrlKey = event.ctrlKey; |
||||||
|
r.metaKey = event.metaKey; |
||||||
|
|
||||||
|
plot.getPlaceholder().trigger("plotselected", [ r ]); |
||||||
|
|
||||||
|
// backwards-compat stuff, to be removed in future
|
||||||
|
if (r.xaxis && r.yaxis) |
||||||
|
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]); |
||||||
|
} |
||||||
|
|
||||||
|
function clamp(min, value, max) { |
||||||
|
return value < min ? min: (value > max ? max: value); |
||||||
|
} |
||||||
|
|
||||||
|
function setSelectionPos(pos, e) { |
||||||
|
var o = plot.getOptions(); |
||||||
|
var offset = plot.getPlaceholder().offset(); |
||||||
|
var plotOffset = plot.getPlotOffset(); |
||||||
|
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width()); |
||||||
|
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height()); |
||||||
|
|
||||||
|
if (o.selection.mode == "y") |
||||||
|
pos.x = pos == selection.first ? 0 : plot.width(); |
||||||
|
|
||||||
|
if (o.selection.mode == "x") |
||||||
|
pos.y = pos == selection.first ? 0 : plot.height(); |
||||||
|
} |
||||||
|
|
||||||
|
function updateSelection(pos) { |
||||||
|
if (pos.pageX == null) |
||||||
|
return; |
||||||
|
|
||||||
|
setSelectionPos(selection.second, pos); |
||||||
|
if (selectionIsSane()) { |
||||||
|
plot.isSelecting = true; |
||||||
|
selection.show = true; |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
} |
||||||
|
else |
||||||
|
clearSelection(true); |
||||||
|
} |
||||||
|
|
||||||
|
function clearSelection(preventEvent) { |
||||||
|
if (selection.show) { |
||||||
|
selection.show = false; |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
if (!preventEvent) |
||||||
|
plot.getPlaceholder().trigger("plotunselected", [ ]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// function taken from markings support in Flot
|
||||||
|
function extractRange(ranges, coord) { |
||||||
|
var axis, from, to, key, axes = plot.getAxes(); |
||||||
|
|
||||||
|
for (var k in axes) { |
||||||
|
axis = axes[k]; |
||||||
|
if (axis.direction == coord) { |
||||||
|
key = coord + axis.n + "axis"; |
||||||
|
if (!ranges[key] && axis.n == 1) |
||||||
|
key = coord + "axis"; // support x1axis as xaxis
|
||||||
|
if (ranges[key]) { |
||||||
|
from = ranges[key].from; |
||||||
|
to = ranges[key].to; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// backwards-compat stuff - to be removed in future
|
||||||
|
if (!ranges[key]) { |
||||||
|
axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0]; |
||||||
|
from = ranges[coord + "1"]; |
||||||
|
to = ranges[coord + "2"]; |
||||||
|
} |
||||||
|
|
||||||
|
// auto-reverse as an added bonus
|
||||||
|
if (from != null && to != null && from > to) { |
||||||
|
var tmp = from; |
||||||
|
from = to; |
||||||
|
to = tmp; |
||||||
|
} |
||||||
|
|
||||||
|
return { from: from, to: to, axis: axis }; |
||||||
|
} |
||||||
|
|
||||||
|
function setSelection(ranges, preventEvent) { |
||||||
|
var axis, range, o = plot.getOptions(); |
||||||
|
|
||||||
|
if (o.selection.mode == "y") { |
||||||
|
selection.first.x = 0; |
||||||
|
selection.second.x = plot.width(); |
||||||
|
} |
||||||
|
else { |
||||||
|
range = extractRange(ranges, "x"); |
||||||
|
|
||||||
|
selection.first.x = range.axis.p2c(range.from); |
||||||
|
selection.second.x = range.axis.p2c(range.to); |
||||||
|
} |
||||||
|
|
||||||
|
if (o.selection.mode == "x") { |
||||||
|
selection.first.y = 0; |
||||||
|
selection.second.y = plot.height(); |
||||||
|
} |
||||||
|
else { |
||||||
|
range = extractRange(ranges, "y"); |
||||||
|
|
||||||
|
selection.first.y = range.axis.p2c(range.from); |
||||||
|
selection.second.y = range.axis.p2c(range.to); |
||||||
|
} |
||||||
|
|
||||||
|
selection.show = true; |
||||||
|
plot.triggerRedrawOverlay(); |
||||||
|
if (!preventEvent && selectionIsSane()) |
||||||
|
triggerSelectedEvent(); |
||||||
|
} |
||||||
|
|
||||||
|
function selectionIsSane() { |
||||||
|
var minSize = plot.getOptions().selection.minSize; |
||||||
|
return Math.abs(selection.second.x - selection.first.x) >= minSize && |
||||||
|
Math.abs(selection.second.y - selection.first.y) >= minSize; |
||||||
|
} |
||||||
|
|
||||||
|
plot.clearSelection = clearSelection; |
||||||
|
plot.setSelection = setSelection; |
||||||
|
plot.getSelection = getSelection; |
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(function(plot, eventHolder) { |
||||||
|
var o = plot.getOptions(); |
||||||
|
if (o.selection.mode != null) { |
||||||
|
eventHolder.mousemove(onMouseMove); |
||||||
|
eventHolder.mousedown(onMouseDown); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
plot.hooks.drawOverlay.push(function (plot, ctx) { |
||||||
|
// draw selection
|
||||||
|
if (selection.show && selectionIsSane()) { |
||||||
|
var plotOffset = plot.getPlotOffset(); |
||||||
|
var o = plot.getOptions(); |
||||||
|
|
||||||
|
ctx.save(); |
||||||
|
ctx.translate(plotOffset.left, plotOffset.top); |
||||||
|
|
||||||
|
var c = $.color.parse(o.selection.color); |
||||||
|
|
||||||
|
ctx.strokeStyle = c.scale('a', o.selection.strokeAlpha).toString(); |
||||||
|
ctx.lineWidth = 1; |
||||||
|
ctx.lineJoin = o.selection.shape; |
||||||
|
ctx.fillStyle = c.scale('a', o.selection.fillAlpha).toString(); |
||||||
|
|
||||||
|
var x = Math.min(selection.first.x, selection.second.x) + 0.5, |
||||||
|
y = Math.min(selection.first.y, selection.second.y) + 0.5, |
||||||
|
w = Math.abs(selection.second.x - selection.first.x) - 1, |
||||||
|
h = Math.abs(selection.second.y - selection.first.y) - 1; |
||||||
|
|
||||||
|
ctx.fillRect(x, y, w, h); |
||||||
|
ctx.strokeRect(x, y, w, h); |
||||||
|
|
||||||
|
ctx.restore(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.shutdown.push(function (plot, eventHolder) { |
||||||
|
eventHolder.unbind("mousemove", onMouseMove); |
||||||
|
eventHolder.unbind("mousedown", onMouseDown); |
||||||
|
|
||||||
|
if (mouseUpHandler) |
||||||
|
$(document).unbind("mouseup", mouseUpHandler); |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: { |
||||||
|
selection: { |
||||||
|
mode: null, // one of null, "x", "y" or "xy"
|
||||||
|
color: "#e8cfac", |
||||||
|
shape: "round", // one of "round", "miter", or "bevel"
|
||||||
|
minSize: 5, // minimum number of pixels
|
||||||
|
strokeAlpha: 0.8, |
||||||
|
fillAlpha: 0.4, |
||||||
|
} |
||||||
|
}, |
||||||
|
name: 'selection', |
||||||
|
version: '1.1' |
||||||
|
}); |
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,190 @@ |
|||||||
|
/* Flot plugin for stacking data sets rather than overlyaing them. |
||||||
|
|
||||||
|
Copyright (c) 2007-2014 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
The plugin assumes the data is sorted on x (or y if stacking horizontally). |
||||||
|
For line charts, it is assumed that if a line has an undefined gap (from a |
||||||
|
null point), then the line above it should have the same gap - insert zeros |
||||||
|
instead of "null" if you want another behaviour. This also holds for the start |
||||||
|
and end of the chart. Note that stacking a mix of positive and negative values |
||||||
|
in most instances doesn't make sense (so it looks weird). |
||||||
|
|
||||||
|
Two or more series are stacked when their "stack" attribute is set to the same |
||||||
|
key (which can be any number or string or just "true"). To specify the default |
||||||
|
stack, you can set the stack option like this: |
||||||
|
|
||||||
|
series: { |
||||||
|
stack: null/false, true, or a key (number/string) |
||||||
|
} |
||||||
|
|
||||||
|
You can also specify it for a single series, like this: |
||||||
|
|
||||||
|
$.plot( $("#placeholder"), [{ |
||||||
|
data: [ ... ], |
||||||
|
stack: true |
||||||
|
}]) |
||||||
|
|
||||||
|
The stacking order is determined by the order of the data series in the array |
||||||
|
(later series end up on top of the previous). |
||||||
|
|
||||||
|
Internally, the plugin modifies the datapoints in each series, adding an |
||||||
|
offset to the y value. For line series, extra data points are inserted through |
||||||
|
interpolation. If there's a second y value, it's also adjusted (e.g for bar |
||||||
|
charts or filled areas). |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
(function ($) { |
||||||
|
var options = { |
||||||
|
series: { stack: null } // or number/string
|
||||||
|
}; |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
function findMatchingSeries(s, allseries) { |
||||||
|
var res = null; |
||||||
|
for (var i = 0; i < allseries.length; ++i) { |
||||||
|
if (s == allseries[i]) |
||||||
|
break; |
||||||
|
|
||||||
|
if (allseries[i].stack == s.stack) |
||||||
|
res = allseries[i]; |
||||||
|
} |
||||||
|
|
||||||
|
return res; |
||||||
|
} |
||||||
|
|
||||||
|
function stackData(plot, s, datapoints) { |
||||||
|
if (s.stack == null || s.stack === false) |
||||||
|
return; |
||||||
|
|
||||||
|
var other = findMatchingSeries(s, plot.getData()); |
||||||
|
if (!other) |
||||||
|
return; |
||||||
|
|
||||||
|
var ps = datapoints.pointsize, |
||||||
|
points = datapoints.points, |
||||||
|
otherps = other.datapoints.pointsize, |
||||||
|
otherpoints = other.datapoints.points, |
||||||
|
newpoints = [], |
||||||
|
px, py, intery, qx, qy, bottom, |
||||||
|
withlines = s.lines.show, |
||||||
|
horizontal = s.bars.horizontal, |
||||||
|
withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y), |
||||||
|
withsteps = withlines && s.lines.steps, |
||||||
|
keyOffset = horizontal ? 1 : 0, |
||||||
|
accumulateOffset = horizontal ? 0 : 1, |
||||||
|
i = 0, j = 0, l, m; |
||||||
|
|
||||||
|
while (true) { |
||||||
|
if (i >= points.length && j >= otherpoints.length) |
||||||
|
break; |
||||||
|
|
||||||
|
l = newpoints.length; |
||||||
|
|
||||||
|
if (i < points.length && points[i] == null) { |
||||||
|
// copy gaps
|
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(points[i + m]); |
||||||
|
i += ps; |
||||||
|
} |
||||||
|
else if (i >= points.length) { |
||||||
|
// take the remaining points from the previous series
|
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(otherpoints[j + m]); |
||||||
|
if (withbottom) |
||||||
|
newpoints[l + 2] = otherpoints[j + accumulateOffset]; |
||||||
|
j += otherps; |
||||||
|
} |
||||||
|
else if (j >= otherpoints.length) { |
||||||
|
// take the remaining points from the current series
|
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(points[i + m]); |
||||||
|
i += ps; |
||||||
|
} |
||||||
|
else if (j < otherpoints.length && otherpoints[j] == null) { |
||||||
|
// ignore point
|
||||||
|
j += otherps; |
||||||
|
} |
||||||
|
else { |
||||||
|
// cases where we actually got two points
|
||||||
|
px = points[i + keyOffset]; |
||||||
|
py = points[i + accumulateOffset]; |
||||||
|
qx = otherpoints[j + keyOffset]; |
||||||
|
qy = otherpoints[j + accumulateOffset]; |
||||||
|
bottom = 0; |
||||||
|
|
||||||
|
if (px == qx) { |
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(points[i + m]); |
||||||
|
|
||||||
|
newpoints[l + accumulateOffset] += qy; |
||||||
|
bottom = qy; |
||||||
|
|
||||||
|
i += ps; |
||||||
|
j += otherps; |
||||||
|
} |
||||||
|
else if (px > qx) { |
||||||
|
// take the point from the previous series so that next series will correctly stack
|
||||||
|
if (i == 0) { |
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(otherpoints[j + m]); |
||||||
|
bottom = qy; |
||||||
|
} |
||||||
|
// we got past point below, might need to
|
||||||
|
// insert interpolated extra point
|
||||||
|
if (i > 0 && points[i - ps] != null) { |
||||||
|
intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px); |
||||||
|
newpoints.push(qx); |
||||||
|
newpoints.push(intery + qy); |
||||||
|
for (m = 2; m < ps; ++m) |
||||||
|
newpoints.push(points[i + m]); |
||||||
|
bottom = qy; |
||||||
|
} |
||||||
|
|
||||||
|
j += otherps; |
||||||
|
} |
||||||
|
else { // px < qx
|
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints.push(points[i + m]); |
||||||
|
|
||||||
|
// we might be able to interpolate a point below,
|
||||||
|
// this can give us a better y
|
||||||
|
if (j > 0 && otherpoints[j - otherps] != null) |
||||||
|
bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx); |
||||||
|
|
||||||
|
newpoints[l + accumulateOffset] += bottom; |
||||||
|
|
||||||
|
i += ps; |
||||||
|
} |
||||||
|
|
||||||
|
fromgap = false; |
||||||
|
|
||||||
|
if (l != newpoints.length && withbottom) |
||||||
|
newpoints[l + 2] = bottom; |
||||||
|
} |
||||||
|
|
||||||
|
// maintain the line steps invariant
|
||||||
|
if (withsteps && l != newpoints.length && l > 0 |
||||||
|
&& newpoints[l] != null |
||||||
|
&& newpoints[l] != newpoints[l - ps] |
||||||
|
&& newpoints[l + 1] != newpoints[l - ps + 1]) { |
||||||
|
for (m = 0; m < ps; ++m) |
||||||
|
newpoints[l + ps + m] = newpoints[l + m]; |
||||||
|
newpoints[l + 1] = newpoints[l - ps + 1]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
datapoints.points = newpoints; |
||||||
|
} |
||||||
|
|
||||||
|
plot.hooks.processDatapoints.push(stackData); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: 'stack', |
||||||
|
version: '1.2' |
||||||
|
}); |
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
(function ($) { |
||||||
|
var options = { |
||||||
|
series: { |
||||||
|
stackpercent: null |
||||||
|
} // or number/string
|
||||||
|
}; |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
|
||||||
|
// will be built up dynamically as a hash from x-value, or y-value if horizontal
|
||||||
|
var stackBases = {}; |
||||||
|
var processed = false; |
||||||
|
var stackSums = {}; |
||||||
|
|
||||||
|
//set percentage for stacked chart
|
||||||
|
function processRawData(plot, series, data, datapoints) { |
||||||
|
if (!processed) { |
||||||
|
processed = true; |
||||||
|
stackSums = getStackSums(plot.getData()); |
||||||
|
} |
||||||
|
if (series.stackpercent == true) { |
||||||
|
var num = data.length; |
||||||
|
series.percents = []; |
||||||
|
var key_idx = 0; |
||||||
|
var value_idx = 1; |
||||||
|
if (series.bars && series.bars.horizontal && series.bars.horizontal === true) { |
||||||
|
key_idx = 1; |
||||||
|
value_idx = 0; |
||||||
|
} |
||||||
|
for (var j = 0; j < num; j++) { |
||||||
|
var sum = stackSums[data[j][key_idx] + ""]; |
||||||
|
if (sum > 0) { |
||||||
|
series.percents.push(data[j][value_idx] * 100 / sum); |
||||||
|
} else { |
||||||
|
series.percents.push(0); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//calculate summary
|
||||||
|
function getStackSums(_data) { |
||||||
|
var data_len = _data.length; |
||||||
|
var sums = {}; |
||||||
|
if (data_len > 0) { |
||||||
|
//caculate summary
|
||||||
|
for (var i = 0; i < data_len; i++) { |
||||||
|
if (_data[i].stackpercent) { |
||||||
|
var key_idx = 0; |
||||||
|
var value_idx = 1; |
||||||
|
if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) { |
||||||
|
key_idx = 1; |
||||||
|
value_idx = 0; |
||||||
|
} |
||||||
|
var num = _data[i].data.length; |
||||||
|
for (var j = 0; j < num; j++) { |
||||||
|
var value = 0; |
||||||
|
if (_data[i].data[j][1] != null) { |
||||||
|
value = _data[i].data[j][value_idx]; |
||||||
|
} |
||||||
|
if (sums[_data[i].data[j][key_idx] + ""]) { |
||||||
|
sums[_data[i].data[j][key_idx] + ""] += value; |
||||||
|
} else { |
||||||
|
sums[_data[i].data[j][key_idx] + ""] = value; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return sums; |
||||||
|
} |
||||||
|
|
||||||
|
function stackData(plot, s, datapoints) { |
||||||
|
if (!s.stackpercent) return; |
||||||
|
if (!processed) { |
||||||
|
stackSums = getStackSums(plot.getData()); |
||||||
|
} |
||||||
|
var newPoints = []; |
||||||
|
|
||||||
|
|
||||||
|
var key_idx = 0; |
||||||
|
var value_idx = 1; |
||||||
|
if (s.bars && s.bars.horizontal && s.bars.horizontal === true) { |
||||||
|
key_idx = 1; |
||||||
|
value_idx = 0; |
||||||
|
} |
||||||
|
|
||||||
|
for (var i = 0; i < datapoints.points.length; i += 3) { |
||||||
|
// note that the values need to be turned into absolute y-values.
|
||||||
|
// in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
|
||||||
|
// (each from different series, which is where stackBases comes in),
|
||||||
|
// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
|
||||||
|
// generally, (x, thisValue + (base up to this point), + (base up to this point))
|
||||||
|
if (!stackBases[datapoints.points[i + key_idx]]) { |
||||||
|
stackBases[datapoints.points[i + key_idx]] = 0; |
||||||
|
} |
||||||
|
newPoints[i + key_idx] = datapoints.points[i + key_idx]; |
||||||
|
newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]]; |
||||||
|
newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]]; |
||||||
|
stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx]; |
||||||
|
// change points to percentage values
|
||||||
|
// you may need to set yaxis:{ max = 100 }
|
||||||
|
if ( stackSums[newPoints[i+key_idx]+""] > 0 ){ |
||||||
|
newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""]; |
||||||
|
newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""]; |
||||||
|
} else { |
||||||
|
newPoints[i + value_idx] = 0; |
||||||
|
newPoints[i + 2] = 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
datapoints.points = newPoints; |
||||||
|
} |
||||||
|
|
||||||
|
plot.hooks.processRawData.push(processRawData); |
||||||
|
plot.hooks.processDatapoints.push(stackData); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: 'stackpercent', |
||||||
|
version: '0.1' |
||||||
|
}); |
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,431 @@ |
|||||||
|
/* Pretty handling of time axes. |
||||||
|
|
||||||
|
Copyright (c) 2007-2013 IOLA and Ole Laursen. |
||||||
|
Licensed under the MIT license. |
||||||
|
|
||||||
|
Set axis.mode to "time" to enable. See the section "Time series data" in |
||||||
|
API.txt for details. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
(function($) { |
||||||
|
|
||||||
|
var options = { |
||||||
|
xaxis: { |
||||||
|
timezone: null, // "browser" for local to the client or timezone for timezone-js
|
||||||
|
timeformat: null, // format string to use
|
||||||
|
twelveHourClock: false, // 12 or 24 time in time mode
|
||||||
|
monthNames: null // list of names of months
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// round to nearby lower multiple of base
|
||||||
|
|
||||||
|
function floorInBase(n, base) { |
||||||
|
return base * Math.floor(n / base); |
||||||
|
} |
||||||
|
|
||||||
|
// Returns a string with the date d formatted according to fmt.
|
||||||
|
// A subset of the Open Group's strftime format is supported.
|
||||||
|
|
||||||
|
function formatDate(d, fmt, monthNames, dayNames) { |
||||||
|
|
||||||
|
if (typeof d.strftime == "function") { |
||||||
|
return d.strftime(fmt); |
||||||
|
} |
||||||
|
|
||||||
|
var leftPad = function(n, pad) { |
||||||
|
n = "" + n; |
||||||
|
pad = "" + (pad == null ? "0" : pad); |
||||||
|
return n.length == 1 ? pad + n : n; |
||||||
|
}; |
||||||
|
|
||||||
|
var r = []; |
||||||
|
var escape = false; |
||||||
|
var hours = d.getHours(); |
||||||
|
var isAM = hours < 12; |
||||||
|
|
||||||
|
if (monthNames == null) { |
||||||
|
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; |
||||||
|
} |
||||||
|
|
||||||
|
if (dayNames == null) { |
||||||
|
dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; |
||||||
|
} |
||||||
|
|
||||||
|
var hours12; |
||||||
|
|
||||||
|
if (hours > 12) { |
||||||
|
hours12 = hours - 12; |
||||||
|
} else if (hours == 0) { |
||||||
|
hours12 = 12; |
||||||
|
} else { |
||||||
|
hours12 = hours; |
||||||
|
} |
||||||
|
|
||||||
|
for (var i = 0; i < fmt.length; ++i) { |
||||||
|
|
||||||
|
var c = fmt.charAt(i); |
||||||
|
|
||||||
|
if (escape) { |
||||||
|
switch (c) { |
||||||
|
case 'a': c = "" + dayNames[d.getDay()]; break; |
||||||
|
case 'b': c = "" + monthNames[d.getMonth()]; break; |
||||||
|
case 'd': c = leftPad(d.getDate(), ""); break; |
||||||
|
case 'e': c = leftPad(d.getDate(), " "); break; |
||||||
|
case 'h': // For back-compat with 0.7; remove in 1.0
|
||||||
|
case 'H': c = leftPad(hours); break; |
||||||
|
case 'I': c = leftPad(hours12); break; |
||||||
|
case 'l': c = leftPad(hours12, " "); break; |
||||||
|
case 'm': c = leftPad(d.getMonth() + 1, ""); break; |
||||||
|
case 'M': c = leftPad(d.getMinutes()); break; |
||||||
|
// quarters not in Open Group's strftime specification
|
||||||
|
case 'q': |
||||||
|
c = "" + (Math.floor(d.getMonth() / 3) + 1); break; |
||||||
|
case 'S': c = leftPad(d.getSeconds()); break; |
||||||
|
case 'y': c = leftPad(d.getFullYear() % 100); break; |
||||||
|
case 'Y': c = "" + d.getFullYear(); break; |
||||||
|
case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break; |
||||||
|
case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break; |
||||||
|
case 'w': c = "" + d.getDay(); break; |
||||||
|
} |
||||||
|
r.push(c); |
||||||
|
escape = false; |
||||||
|
} else { |
||||||
|
if (c == "%") { |
||||||
|
escape = true; |
||||||
|
} else { |
||||||
|
r.push(c); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return r.join(""); |
||||||
|
} |
||||||
|
|
||||||
|
// To have a consistent view of time-based data independent of which time
|
||||||
|
// zone the client happens to be in we need a date-like object independent
|
||||||
|
// of time zones. This is done through a wrapper that only calls the UTC
|
||||||
|
// versions of the accessor methods.
|
||||||
|
|
||||||
|
function makeUtcWrapper(d) { |
||||||
|
|
||||||
|
function addProxyMethod(sourceObj, sourceMethod, targetObj, targetMethod) { |
||||||
|
sourceObj[sourceMethod] = function() { |
||||||
|
return targetObj[targetMethod].apply(targetObj, arguments); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
var utc = { |
||||||
|
date: d |
||||||
|
}; |
||||||
|
|
||||||
|
// support strftime, if found
|
||||||
|
|
||||||
|
if (d.strftime != undefined) { |
||||||
|
addProxyMethod(utc, "strftime", d, "strftime"); |
||||||
|
} |
||||||
|
|
||||||
|
addProxyMethod(utc, "getTime", d, "getTime"); |
||||||
|
addProxyMethod(utc, "setTime", d, "setTime"); |
||||||
|
|
||||||
|
var props = ["Date", "Day", "FullYear", "Hours", "Milliseconds", "Minutes", "Month", "Seconds"]; |
||||||
|
|
||||||
|
for (var p = 0; p < props.length; p++) { |
||||||
|
addProxyMethod(utc, "get" + props[p], d, "getUTC" + props[p]); |
||||||
|
addProxyMethod(utc, "set" + props[p], d, "setUTC" + props[p]); |
||||||
|
} |
||||||
|
|
||||||
|
return utc; |
||||||
|
}; |
||||||
|
|
||||||
|
// select time zone strategy. This returns a date-like object tied to the
|
||||||
|
// desired timezone
|
||||||
|
|
||||||
|
function dateGenerator(ts, opts) { |
||||||
|
if (opts.timezone == "browser") { |
||||||
|
return new Date(ts); |
||||||
|
} else if (!opts.timezone || opts.timezone == "utc") { |
||||||
|
return makeUtcWrapper(new Date(ts)); |
||||||
|
} else if (typeof timezoneJS != "undefined" && typeof timezoneJS.Date != "undefined") { |
||||||
|
var d = new timezoneJS.Date(); |
||||||
|
// timezone-js is fickle, so be sure to set the time zone before
|
||||||
|
// setting the time.
|
||||||
|
d.setTimezone(opts.timezone); |
||||||
|
d.setTime(ts); |
||||||
|
return d; |
||||||
|
} else { |
||||||
|
return makeUtcWrapper(new Date(ts)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// map of app. size of time units in milliseconds
|
||||||
|
|
||||||
|
var timeUnitSize = { |
||||||
|
"second": 1000, |
||||||
|
"minute": 60 * 1000, |
||||||
|
"hour": 60 * 60 * 1000, |
||||||
|
"day": 24 * 60 * 60 * 1000, |
||||||
|
"month": 30 * 24 * 60 * 60 * 1000, |
||||||
|
"quarter": 3 * 30 * 24 * 60 * 60 * 1000, |
||||||
|
"year": 365.2425 * 24 * 60 * 60 * 1000 |
||||||
|
}; |
||||||
|
|
||||||
|
// the allowed tick sizes, after 1 year we use
|
||||||
|
// an integer algorithm
|
||||||
|
|
||||||
|
var baseSpec = [ |
||||||
|
[1, "second"], [2, "second"], [5, "second"], [10, "second"], |
||||||
|
[30, "second"], |
||||||
|
[1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"], |
||||||
|
[30, "minute"], |
||||||
|
[1, "hour"], [2, "hour"], [4, "hour"], |
||||||
|
[8, "hour"], [12, "hour"], |
||||||
|
[1, "day"], [2, "day"], [3, "day"], |
||||||
|
[0.25, "month"], [0.5, "month"], [1, "month"], |
||||||
|
[2, "month"] |
||||||
|
]; |
||||||
|
|
||||||
|
// we don't know which variant(s) we'll need yet, but generating both is
|
||||||
|
// cheap
|
||||||
|
|
||||||
|
var specMonths = baseSpec.concat([[3, "month"], [6, "month"], |
||||||
|
[1, "year"]]); |
||||||
|
var specQuarters = baseSpec.concat([[1, "quarter"], [2, "quarter"], |
||||||
|
[1, "year"]]); |
||||||
|
|
||||||
|
function init(plot) { |
||||||
|
plot.hooks.processOptions.push(function (plot, options) { |
||||||
|
$.each(plot.getAxes(), function(axisName, axis) { |
||||||
|
|
||||||
|
var opts = axis.options; |
||||||
|
|
||||||
|
if (opts.mode == "time") { |
||||||
|
axis.tickGenerator = function(axis) { |
||||||
|
|
||||||
|
var ticks = []; |
||||||
|
var d = dateGenerator(axis.min, opts); |
||||||
|
var minSize = 0; |
||||||
|
|
||||||
|
// make quarter use a possibility if quarters are
|
||||||
|
// mentioned in either of these options
|
||||||
|
|
||||||
|
var spec = (opts.tickSize && opts.tickSize[1] === |
||||||
|
"quarter") || |
||||||
|
(opts.minTickSize && opts.minTickSize[1] === |
||||||
|
"quarter") ? specQuarters : specMonths; |
||||||
|
|
||||||
|
if (opts.minTickSize != null) { |
||||||
|
if (typeof opts.tickSize == "number") { |
||||||
|
minSize = opts.tickSize; |
||||||
|
} else { |
||||||
|
minSize = opts.minTickSize[0] * timeUnitSize[opts.minTickSize[1]]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for (var i = 0; i < spec.length - 1; ++i) { |
||||||
|
if (axis.delta < (spec[i][0] * timeUnitSize[spec[i][1]] |
||||||
|
+ spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2 |
||||||
|
&& spec[i][0] * timeUnitSize[spec[i][1]] >= minSize) { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var size = spec[i][0]; |
||||||
|
var unit = spec[i][1]; |
||||||
|
|
||||||
|
// special-case the possibility of several years
|
||||||
|
|
||||||
|
if (unit == "year") { |
||||||
|
|
||||||
|
// if given a minTickSize in years, just use it,
|
||||||
|
// ensuring that it's an integer
|
||||||
|
|
||||||
|
if (opts.minTickSize != null && opts.minTickSize[1] == "year") { |
||||||
|
size = Math.floor(opts.minTickSize[0]); |
||||||
|
} else { |
||||||
|
|
||||||
|
var magn = Math.pow(10, Math.floor(Math.log(axis.delta / timeUnitSize.year) / Math.LN10)); |
||||||
|
var norm = (axis.delta / timeUnitSize.year) / magn; |
||||||
|
|
||||||
|
if (norm < 1.5) { |
||||||
|
size = 1; |
||||||
|
} else if (norm < 3) { |
||||||
|
size = 2; |
||||||
|
} else if (norm < 7.5) { |
||||||
|
size = 5; |
||||||
|
} else { |
||||||
|
size = 10; |
||||||
|
} |
||||||
|
|
||||||
|
size *= magn; |
||||||
|
} |
||||||
|
|
||||||
|
// minimum size for years is 1
|
||||||
|
|
||||||
|
if (size < 1) { |
||||||
|
size = 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
axis.tickSize = opts.tickSize || [size, unit]; |
||||||
|
var tickSize = axis.tickSize[0]; |
||||||
|
unit = axis.tickSize[1]; |
||||||
|
|
||||||
|
var step = tickSize * timeUnitSize[unit]; |
||||||
|
|
||||||
|
if (unit == "second") { |
||||||
|
d.setSeconds(floorInBase(d.getSeconds(), tickSize)); |
||||||
|
} else if (unit == "minute") { |
||||||
|
d.setMinutes(floorInBase(d.getMinutes(), tickSize)); |
||||||
|
} else if (unit == "hour") { |
||||||
|
d.setHours(floorInBase(d.getHours(), tickSize)); |
||||||
|
} else if (unit == "month") { |
||||||
|
d.setMonth(floorInBase(d.getMonth(), tickSize)); |
||||||
|
} else if (unit == "quarter") { |
||||||
|
d.setMonth(3 * floorInBase(d.getMonth() / 3, |
||||||
|
tickSize)); |
||||||
|
} else if (unit == "year") { |
||||||
|
d.setFullYear(floorInBase(d.getFullYear(), tickSize)); |
||||||
|
} |
||||||
|
|
||||||
|
// reset smaller components
|
||||||
|
|
||||||
|
d.setMilliseconds(0); |
||||||
|
|
||||||
|
if (step >= timeUnitSize.minute) { |
||||||
|
d.setSeconds(0); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.hour) { |
||||||
|
d.setMinutes(0); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.day) { |
||||||
|
d.setHours(0); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.day * 4) { |
||||||
|
d.setDate(1); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.month * 2) { |
||||||
|
d.setMonth(floorInBase(d.getMonth(), 3)); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.quarter * 2) { |
||||||
|
d.setMonth(floorInBase(d.getMonth(), 6)); |
||||||
|
} |
||||||
|
if (step >= timeUnitSize.year) { |
||||||
|
d.setMonth(0); |
||||||
|
} |
||||||
|
|
||||||
|
var carry = 0; |
||||||
|
var v = Number.NaN; |
||||||
|
var prev; |
||||||
|
|
||||||
|
do { |
||||||
|
|
||||||
|
prev = v; |
||||||
|
v = d.getTime(); |
||||||
|
ticks.push(v); |
||||||
|
|
||||||
|
if (unit == "month" || unit == "quarter") { |
||||||
|
if (tickSize < 1) { |
||||||
|
|
||||||
|
// a bit complicated - we'll divide the
|
||||||
|
// month/quarter up but we need to take
|
||||||
|
// care of fractions so we don't end up in
|
||||||
|
// the middle of a day
|
||||||
|
|
||||||
|
d.setDate(1); |
||||||
|
var start = d.getTime(); |
||||||
|
d.setMonth(d.getMonth() + |
||||||
|
(unit == "quarter" ? 3 : 1)); |
||||||
|
var end = d.getTime(); |
||||||
|
d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize); |
||||||
|
carry = d.getHours(); |
||||||
|
d.setHours(0); |
||||||
|
} else { |
||||||
|
d.setMonth(d.getMonth() + |
||||||
|
tickSize * (unit == "quarter" ? 3 : 1)); |
||||||
|
} |
||||||
|
} else if (unit == "year") { |
||||||
|
d.setFullYear(d.getFullYear() + tickSize); |
||||||
|
} else { |
||||||
|
d.setTime(v + step); |
||||||
|
} |
||||||
|
} while (v < axis.max && v != prev); |
||||||
|
|
||||||
|
return ticks; |
||||||
|
}; |
||||||
|
|
||||||
|
axis.tickFormatter = function (v, axis) { |
||||||
|
|
||||||
|
var d = dateGenerator(v, axis.options); |
||||||
|
|
||||||
|
// first check global format
|
||||||
|
|
||||||
|
if (opts.timeformat != null) { |
||||||
|
return formatDate(d, opts.timeformat, opts.monthNames, opts.dayNames); |
||||||
|
} |
||||||
|
|
||||||
|
// possibly use quarters if quarters are mentioned in
|
||||||
|
// any of these places
|
||||||
|
|
||||||
|
var useQuarters = (axis.options.tickSize && |
||||||
|
axis.options.tickSize[1] == "quarter") || |
||||||
|
(axis.options.minTickSize && |
||||||
|
axis.options.minTickSize[1] == "quarter"); |
||||||
|
|
||||||
|
var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]]; |
||||||
|
var span = axis.max - axis.min; |
||||||
|
var suffix = (opts.twelveHourClock) ? " %p" : ""; |
||||||
|
var hourCode = (opts.twelveHourClock) ? "%I" : "%H"; |
||||||
|
var fmt; |
||||||
|
|
||||||
|
if (t < timeUnitSize.minute) { |
||||||
|
fmt = hourCode + ":%M:%S" + suffix; |
||||||
|
} else if (t < timeUnitSize.day) { |
||||||
|
if (span < 2 * timeUnitSize.day) { |
||||||
|
fmt = hourCode + ":%M" + suffix; |
||||||
|
} else { |
||||||
|
fmt = "%b %d " + hourCode + ":%M" + suffix; |
||||||
|
} |
||||||
|
} else if (t < timeUnitSize.month) { |
||||||
|
fmt = "%b %d"; |
||||||
|
} else if ((useQuarters && t < timeUnitSize.quarter) || |
||||||
|
(!useQuarters && t < timeUnitSize.year)) { |
||||||
|
if (span < timeUnitSize.year) { |
||||||
|
fmt = "%b"; |
||||||
|
} else { |
||||||
|
fmt = "%b %Y"; |
||||||
|
} |
||||||
|
} else if (useQuarters && t < timeUnitSize.year) { |
||||||
|
if (span < timeUnitSize.year) { |
||||||
|
fmt = "Q%q"; |
||||||
|
} else { |
||||||
|
fmt = "Q%q %Y"; |
||||||
|
} |
||||||
|
} else { |
||||||
|
fmt = "%Y"; |
||||||
|
} |
||||||
|
|
||||||
|
var rt = formatDate(d, fmt, opts.monthNames, opts.dayNames); |
||||||
|
|
||||||
|
return rt; |
||||||
|
}; |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: options, |
||||||
|
name: 'time', |
||||||
|
version: '1.0' |
||||||
|
}); |
||||||
|
|
||||||
|
// Time-axis support used to be in Flot core, which exposed the
|
||||||
|
// formatDate function on the plot object. Various plugins depend
|
||||||
|
// on the function, so we need to re-expose it here.
|
||||||
|
|
||||||
|
$.plot.formatDate = formatDate; |
||||||
|
|
||||||
|
})(jQuery); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"moduleResolution": "node", |
||||||
|
"outDir": "dist", |
||||||
|
"target": "es5", |
||||||
|
"lib": [ |
||||||
|
"es6", |
||||||
|
"dom" |
||||||
|
], |
||||||
|
"rootDir": "./src", |
||||||
|
"module": "esnext", |
||||||
|
"declaration": false, |
||||||
|
"allowSyntheticDefaultImports": true, |
||||||
|
"inlineSourceMap": false, |
||||||
|
"sourceMap": true, |
||||||
|
"noEmitOnError": false, |
||||||
|
"emitDecoratorMetadata": false, |
||||||
|
"experimentalDecorators": true, |
||||||
|
"noImplicitReturns": true, |
||||||
|
"noImplicitThis": false, |
||||||
|
"noImplicitUseStrict": false, |
||||||
|
"noImplicitAny": false, |
||||||
|
"noUnusedLocals": false, |
||||||
|
"baseUrl": "./src", |
||||||
|
"allowUnreachableCode": true, |
||||||
|
"paths": { |
||||||
|
"@": ["."] |
||||||
|
} |
||||||
|
}, |
||||||
|
"include": [ |
||||||
|
"./src/**/*.ts" |
||||||
|
] |
||||||
|
} |
||||||
Loading…
Reference in new issue