tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Visual Console Refactor: added all the percentile types 

Former-commit-id: 0779585b488a1be47aeef6d5628693a930ab9aa4
This commit is contained in:
Alejandro Gallardo Escobar 2019-04-17 17:09:11 +02:00
parent 30f5c97610
commit 7608eb86c7
8 changed files with 142 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pandora_console/include/visual-console-client/vc.main.72642f2b.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
pandora_console/include/visual-console-client/vc.main.72642f2b.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.938b11e8.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
pandora_console/include/visual-console-client/vc.main.938b11e8.min.js.map
View File

File diff suppressed because one or more lines are too long

26
visual_console_client/package-lock.json generated
View File

@ -419,6 +419,19 @@
"@babel/types": "^7.3.0"
}
},
"@types/d3-path": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
"integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
},
"@types/d3-shape": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.1.tgz",
"integrity": "sha512-usqdvUvPJ7AJNwpd2drOzRKs1ELie53p2m2GnPKr076/ADM579jVTJ5dPsoZ5E/CMNWk8lvPWYQSvilpp6jjwg==",
"requires": {
"@types/d3-path": "*"
}
},
"@types/istanbul-lib-coverage": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.0.tgz",
@ -1787,6 +1800,19 @@
"es5-ext": "^0.10.9"
}
},
"d3-path": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz",
"integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
},
"d3-shape": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.5.tgz",
"integrity": "sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==",
"requires": {
"d3-path": "1"
}
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

2
visual_console_client/package.json
View File

@ -24,12 +24,14 @@
},
"homepage": "https://github.com/pandorafms/pandorafms#readme",
"dependencies": {
"@types/d3-shape": "^1.3.1",
"@types/jest": "^24.0.11",
"@typescript-eslint/eslint-plugin": "^1.6.0",
"@typescript-eslint/parser": "^1.6.0",
"awesome-typescript-loader": "^5.2.1",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"d3-shape": "^1.3.5",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",

56
visual_console_client/playground/index.html
View File

@ -282,6 +282,58 @@
unit: "seconds"
};
var percentileDonutRawProps = {
// Generic props.
id: 12,
type: 3, // Percentile = 3
label: null,
isLinkEnabled: true,
isOnTop: false,
parentId: 1,
aclGroupId: null,
// Position props.
x: 830,
y: 170,
// Size props.
width: 100,
height: 100,
// Custom props.
percentileType: "circular-progress-bar",
valueType: "value",
minValue: 100,
maxValue: 500,
color: null,
labelColor: "#82B92E",
value: 245,
unit: "seconds"
};
var percentileDonutAltRawProps = {
// Generic props.
id: 12,
type: 3, // Percentile = 3
label: null,
isLinkEnabled: true,
isOnTop: false,
parentId: 1,
aclGroupId: null,
// Position props.
x: 830,
y: 280,
// Size props.
width: 100,
height: 100,
// Custom props.
percentileType: "circular-progress-bar-alt",
valueType: "value",
minValue: 100,
maxValue: 500,
color: null,
labelColor: "#82B92E",
value: 245,
unit: "seconds"
};
var items = [
staticGraphRawProps,
colorCloudRawProps,
@ -293,7 +345,9 @@
labelRawProps,
simpleValueRawProps,
percentileRawProps,
percentileBubbleRawProps
percentileBubbleRawProps,
percentileDonutRawProps,
percentileDonutAltRawProps
];
try {

71
visual_console_client/src/items/Percentile.ts
View File

@ -1,3 +1,5 @@
import { arc as arcFactory } from "d3-shape";
import {
LinkedVisualConsoleProps,
UnknownObject,
@ -153,19 +155,58 @@ export default class Percentile extends Item<PercentileProps> {
}
break;
case "bubble":
case "circular-progress-bar": // TODO: Add this chart.
case "circular-progress-bar-alt": // TODO: Add this chart.
case "circular-progress-bar":
case "circular-progress-bar-alt":
{
const backgroundCircle = document.createElementNS(svgNS, "circle");
backgroundCircle.setAttribute("transform", "translate(50 50)");
backgroundCircle.setAttribute("fill", colors.background);
backgroundCircle.setAttribute("fill-opacity", "0.5");
backgroundCircle.setAttribute("r", "50");
const progressCircle = document.createElementNS(svgNS, "circle");
progressCircle.setAttribute("transform", "translate(50 50)");
progressCircle.setAttribute("fill", colors.progress);
progressCircle.setAttribute("fill-opacity", "1");
progressCircle.setAttribute("r", `${progress / 2}`);
// Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
svg.setAttribute("viewBox", "0 0 100 100");
if (this.props.percentileType === "bubble") {
// Create and append the circles.
const backgroundCircle = document.createElementNS(svgNS, "circle");
backgroundCircle.setAttribute("transform", "translate(50 50)");
backgroundCircle.setAttribute("fill", colors.background);
backgroundCircle.setAttribute("fill-opacity", "0.5");
backgroundCircle.setAttribute("r", "50");
const progressCircle = document.createElementNS(svgNS, "circle");
progressCircle.setAttribute("transform", "translate(50 50)");
progressCircle.setAttribute("fill", colors.progress);
progressCircle.setAttribute("fill-opacity", "1");
progressCircle.setAttribute("r", `${progress / 2}`);
svg.append(backgroundCircle, progressCircle);
} else {
// Create and append the circles.
const arcProps = {
innerRadius:
this.props.percentileType === "circular-progress-bar" ? 30 : 0,
outerRadius: 50,
startAngle: 0,
endAngle: Math.PI * 2
};
const arc = arcFactory();
const backgroundCircle = document.createElementNS(svgNS, "path");
backgroundCircle.setAttribute("transform", "translate(50 50)");
backgroundCircle.setAttribute("fill", colors.background);
backgroundCircle.setAttribute("fill-opacity", "0.5");
backgroundCircle.setAttribute("d", `${arc(arcProps)}`);
const progressCircle = document.createElementNS(svgNS, "path");
progressCircle.setAttribute("transform", "translate(50 50)");
progressCircle.setAttribute("fill", colors.progress);
progressCircle.setAttribute("fill-opacity", "1");
progressCircle.setAttribute(
"d",
`${arc({
...arcProps,
endAngle: arcProps.endAngle * (progress / 100)
})}`
);
svg.append(backgroundCircle, progressCircle);
}
// Create and append the text.
const text = document.createElementNS(svgNS, "text");
text.setAttribute("text-anchor", "middle");
text.setAttribute("alignment-baseline", "middle");
@ -175,6 +216,7 @@ export default class Percentile extends Item<PercentileProps> {
text.setAttribute("fill", colors.text);
if (this.props.valueType === "value") {
// Show value and unit in 1 (no unit) or 2 lines.
if (this.props.unit && this.props.unit.length > 0) {
const value = document.createElementNS(svgNS, "tspan");
value.setAttribute("x", "0");
@ -191,13 +233,12 @@ export default class Percentile extends Item<PercentileProps> {
text.setAttribute("transform", "translate(50 50)");
}
} else {
// Percentage.
text.textContent = `${progress}%`;
text.setAttribute("transform", "translate(50 50)");
}
// Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
svg.setAttribute("viewBox", "0 0 100 100");
svg.append(backgroundCircle, progressCircle, text);
svg.append(text);
}
break;
}