Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@briangann
briangann committed Apr 18, 2020
1 parent 0d1fd14 commit b3149e3
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 47 deletions.
10 changes: 4 additions & 6 deletions TODO.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@


TODO:
# TODO

* Animation options
* Split needle animation and value transition settings
* Add selector for animation types (currently elastic and quadin)
* Add speed option (currently 500ms)
* Split needle animation and value transition settings
* Add selector for animation types (currently elastic and quadin)
* Add speed option (currently 500ms)
* Add trending indicator (arrow up/down based on last value and current value)
* Add metric label option (display name of metric/alias inside face of gauge)
* More needle shape selections (add chooser)
Expand Down
68 changes: 58 additions & 10 deletions src/ctrl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,11 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
) {
// alert about the error, and set it to 320
this.panel.gauge.maxTickAngle = 320;
this.alertSrvRef.set('Problem!', 'Invalid Value for Max Tick Angle, auto-setting to default of 320', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Max Tick Angle, auto-setting to default of 320', 'error',
10000
);
}

let gaugeTickDegrees = this.panel.gauge.maxTickAngle - this.panel.gauge.zeroTickAngle;
Expand All @@ -459,14 +463,24 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
// set to default values and alert
this.panel.gauge.zeroTickAngle = 60;
this.panel.gauge.maxTickAngle = 320;
this.alertSrvRef.set('Problem!', 'Gauge tick angle difference is larger than 360 degrees, auto-setting to default values', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Gauge tick angle difference is larger than 360 degrees, auto-setting to default values',
'error',
10000
);
}
// make sure it is "positive"
if (gaugeTickDegrees < 0) {
// set to default values and alert
this.panel.gauge.zeroTickAngle = 60;
this.panel.gauge.maxTickAngle = 320;
this.alertSrvRef.set('Problem!', 'Gauge tick angle difference is less than 0 degrees, auto-setting to default values', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Gauge tick angle difference is less than 0 degrees, auto-setting to default values',
'error',
10000
);
}

// render
Expand All @@ -483,7 +497,11 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
) {
// alert about the error, and set it to 60
this.panel.gauge.zeroNeedleAngle = 60;
this.alertSrvRef.set('Problem!', 'Invalid Value for Zero Needle Angle, auto-setting to default of 60', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Zero Needle Angle, auto-setting to default of 60', 'error',
10000
);
}

if (
Expand All @@ -494,7 +512,12 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
) {
// alert about the error, and set it to 320
this.panel.gauge.maxNeedleAngle = 320;
this.alertSrvRef.set('Problem!', 'Invalid Value for Max Needle Angle, auto-setting to default of 320', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Max Needle Angle, auto-setting to default of 320',
'error',
10000
);
}

let gaugeNeedleDegrees = this.panel.gauge.maxNeedleAngle - this.panel.gauge.zeroNeedleAngle;
Expand All @@ -503,14 +526,24 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
// set to default values and alert
this.panel.gauge.zeroNeedleAngle = 60;
this.panel.gauge.maxNeedleAngle = 320;
this.alertSrvRef.set('Problem!', 'Gauge needle angle difference is larger than 360 degrees, auto-setting to default values', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Gauge needle angle difference is larger than 360 degrees, auto-setting to default values',
'error',
10000
);
}
// make sure it is "positive"
if (gaugeNeedleDegrees < 0) {
// set to default values and alert
this.panel.gauge.zeroNeedleAngle = 60;
this.panel.gauge.maxNeedleAngle = 320;
this.alertSrvRef.set('Problem!', 'Gauge needle angle difference is less than 0 degrees, auto-setting to default values', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Gauge needle angle difference is less than 0 degrees, auto-setting to default values',
'error',
10000
);
}

// render
Expand All @@ -522,12 +555,22 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
if (this.panel.gauge.tickSpaceMinVal === null || this.panel.gauge.tickSpaceMinVal === '' || isNaN(this.panel.gauge.tickSpaceMinVal)) {
// alert about the error, and set it to 1
this.panel.gauge.tickSpaceMinVal = 1;
this.alertSrvRef.set('Problem!', 'Invalid Value for Tick Spacing Minor, auto-setting back to default of 1', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Tick Spacing Minor, auto-setting back to default of 1',
'error',
10000
);
}
if (this.panel.gauge.tickSpaceMajVal === null || this.panel.gauge.tickSpaceMajVal === '' || isNaN(this.panel.gauge.tickSpaceMajVal)) {
// alert about the error, and set it to 10
this.panel.gauge.tickSpaceMajVal = 10;
this.alertSrvRef.set('Problem!', 'Invalid Value for Tick Spacing Major, auto-setting back to default of 10', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Tick Spacing Major, auto-setting back to default of 10',
'error',
10000
);
}
if (
this.panel.gauge.gaugeRadius === null ||
Expand All @@ -537,7 +580,12 @@ export class D3GaugePanelCtrl extends MetricsPanelCtrl {
) {
// alert about the error, and set it to 0
this.panel.gauge.gaugeRadius = 0;
this.alertSrvRef.set('Problem!', 'Invalid Value for Gauge Radius, auto-setting back to default of 0', 'error', 10000);
this.alertSrvRef.set(
'Problem!',
'Invalid Value for Gauge Radius, auto-setting back to default of 0',
'error',
10000
);
}
this.render();
}
Expand Down
62 changes: 31 additions & 31 deletions src/libs/d3gauge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export class DrawGauge {
// check if there are tickMaps that apply
let tickTextFloat = parseFloat(tickText);
for (let i = 0; i < this.opt.tickMaps.length; i++) {
let aTickMap = this.opt.tickMaps[i];
const aTickMap = this.opt.tickMaps[i];
if (parseFloat(aTickMap.value) === tickTextFloat) {
tickText = aTickMap.text;
break;
Expand Down Expand Up @@ -462,7 +462,7 @@ export class DrawGauge {
}

createCircleGroup() {
let circleGroup = this.svg.append('svg:g').attr('id', 'circles');
const circleGroup = this.svg.append('svg:g').attr('id', 'circles');
circleGroup
.append('svg:circle')
.attr('cx', this.originX)
Expand All @@ -489,9 +489,9 @@ export class DrawGauge {
}
valueToDegrees(value: any) {
// degree range is from 60 to 300 (240) maxTickAngle - zeroTickAngle
let degreeRange = this.opt.maxTickAngle - this.opt.zeroTickAngle;
let range = this.opt.maxVal - this.opt.minVal;
let min = this.opt.minVal;
const degreeRange = this.opt.maxTickAngle - this.opt.zeroTickAngle;
const range = this.opt.maxVal - this.opt.minVal;
const min = this.opt.minVal;
return (value / range) * degreeRange - ((min / range) * degreeRange + this.opt.zeroTickAngle);
}

Expand All @@ -503,14 +503,14 @@ export class DrawGauge {
tickCalcMaj() {
return (d: any, i: any) => {
// Offset the tick mark angle so zero is vertically down, then convert to radians
let tickAngle = d + 90;
const tickAngle = d + 90;
const tickAngleRad = dToR(tickAngle);
let y1 = this.originY + this.tickStartMaj * Math.sin(tickAngleRad);
let y2 = this.originY + (this.tickStartMaj + this.opt.tickLengthMaj) * Math.sin(tickAngleRad);
let x1 = this.originX + this.tickStartMaj * Math.cos(tickAngleRad);
let x2 = this.originX + (this.tickStartMaj + this.opt.tickLengthMaj) * Math.cos(tickAngleRad);
const y1 = this.originY + this.tickStartMaj * Math.sin(tickAngleRad);
const y2 = this.originY + (this.tickStartMaj + this.opt.tickLengthMaj) * Math.sin(tickAngleRad);
const x1 = this.originX + this.tickStartMaj * Math.cos(tickAngleRad);
const x2 = this.originX + (this.tickStartMaj + this.opt.tickLengthMaj) * Math.cos(tickAngleRad);
// Use a D3.JS path generator
let lineSVG = d3.line()([
const lineSVG = d3.line()([
[x1, y1],
[x2, y2],
]);
Expand All @@ -521,13 +521,13 @@ export class DrawGauge {
tickCalcMin() {
return (d: any, i: any) => {
// Offset the tick mark angle so zero is vertically down, then convert to radians
let tickAngle = d + 90;
let tickAngleRad = dToR(tickAngle);
let y1 = this.originY + this.tickStartMin * Math.sin(tickAngleRad);
const tickAngle = d + 90;
const tickAngleRad = dToR(tickAngle);
const y1 = this.originY + this.tickStartMin * Math.sin(tickAngleRad);
const y2 = this.originY + (this.tickStartMin + this.opt.tickLengthMin) * Math.sin(tickAngleRad);
let x1 = this.originX + this.tickStartMin * Math.cos(tickAngleRad);
let x2 = this.originX + (this.tickStartMin + this.opt.tickLengthMin) * Math.cos(tickAngleRad);
let lineSVG = d3.line()([
const x1 = this.originX + this.tickStartMin * Math.cos(tickAngleRad);
const x2 = this.originX + (this.tickStartMin + this.opt.tickLengthMin) * Math.cos(tickAngleRad);
const lineSVG = d3.line()([
[x1, y1],
[x2, y2],
]);
Expand All @@ -537,12 +537,12 @@ export class DrawGauge {

needleCalc() {
return (d: any, i: any) => {
let nAngleRad = dToR(d + 90);
let y1 = this.originY + this.needlePathStart * Math.sin(nAngleRad);
let y2 = this.originY + (this.needlePathStart + this.needlePathLength) * Math.sin(nAngleRad);
let x1 = this.originX + this.needlePathStart * Math.cos(nAngleRad);
let x2 = this.originX + (this.needlePathStart + this.needlePathLength) * Math.cos(nAngleRad);
let lineSVG = d3.line()([
const nAngleRad = dToR(d + 90);
const y1 = this.originY + this.needlePathStart * Math.sin(nAngleRad);
const y2 = this.originY + (this.needlePathStart + this.needlePathLength) * Math.sin(nAngleRad);
const x1 = this.originX + this.needlePathStart * Math.cos(nAngleRad);
const x2 = this.originX + (this.needlePathStart + this.needlePathLength) * Math.cos(nAngleRad);
const lineSVG = d3.line()([
[x1, y1],
[x2, y2],
]);
Expand All @@ -552,23 +552,23 @@ export class DrawGauge {

// Define functions to calcuate the positions of the labels for the tick marks
labelXcalc(d: any, i: any) {
let tickAngle = d + 90;
let tickAngleRad = dToR(tickAngle);
let labelW = this.opt.labelFontSize / (this.tickLabelText[i].toString().length / 2);
let x1 = this.originX + (this.labelStart - labelW) * Math.cos(tickAngleRad);
const tickAngle = d + 90;
const tickAngleRad = dToR(tickAngle);
const labelW = this.opt.labelFontSize / (this.tickLabelText[i].toString().length / 2);
const x1 = this.originX + (this.labelStart - labelW) * Math.cos(tickAngleRad);
return x1;
}

labelYcalc(d: any, i: any) {
let tickAngle = d + 90;
let tickAngleRad = dToR(tickAngle);
let y1 = this.originY + this.labelStart * Math.sin(tickAngleRad) + this.opt.labelFontSize / 2;
const tickAngle = d + 90;
const tickAngleRad = dToR(tickAngle);
const y1 = this.originY + this.labelStart * Math.sin(tickAngleRad) + this.opt.labelFontSize / 2;
return y1;
}
}

function dToR(angleDeg: any) {
// Turns an angle in degrees to radians
let angleRad = angleDeg * (Math.PI / 180);
const angleRad = angleDeg * (Math.PI / 180);
return angleRad;
}

0 comments on commit b3149e3

Please sign in to comment.