зеркало из https://github.com/Azure/hpc-analytics.git
custom visuals for powerbi
This commit is contained in:
weimao18
Родитель
6533c8633e
Коммит
14d88c1a0b
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"dataRoles": [
|
||||||
|
{
|
||||||
|
"displayName": "Utility",
|
||||||
|
"name": "utility",
|
||||||
|
"kind": "GroupingOrMeasure"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dataViewMappings": [
|
||||||
|
{
|
||||||
|
"table": {
|
||||||
|
"rows": {
|
||||||
|
"for": {"in": "utility"}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/*
|
||||||
|
* Power BI Visualizations
|
||||||
|
*
|
||||||
|
* Copyright (c) Microsoft Corporation
|
||||||
|
* All rights reserved.
|
||||||
|
* MIT License
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the ""Software""), to deal
|
||||||
|
* in the Software without restriction, including without limitation the rights
|
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
* copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
* THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
module powerbi.extensibility.visual {
|
||||||
|
"use strict";
|
||||||
|
import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;
|
||||||
|
|
||||||
|
export class VisualSettings extends DataViewObjectsParser {
|
||||||
|
public dataPoint: dataPointSettings = new dataPointSettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
export class dataPointSettings {
|
||||||
|
// Default color
|
||||||
|
public defaultColor: string = "";
|
||||||
|
// Show all
|
||||||
|
public showAllDataPoints: boolean = true;
|
||||||
|
// Fill
|
||||||
|
public fill: string = "";
|
||||||
|
// Color saturation
|
||||||
|
public fillRule: string = "";
|
||||||
|
// Text Size
|
||||||
|
public fontSize: number = 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,282 @@
|
||||||
|
/*
|
||||||
|
* Power BI Visual CLI
|
||||||
|
*
|
||||||
|
* Copyright (c) Microsoft Corporation
|
||||||
|
* All rights reserved.
|
||||||
|
* MIT License
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the ""Software""), to deal
|
||||||
|
* in the Software without restriction, including without limitation the rights
|
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
* copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
* THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
module powerbi.extensibility.visual {
|
||||||
|
"use strict";
|
||||||
|
export class Visual implements IVisual {
|
||||||
|
private host: IVisualHost;
|
||||||
|
private svg: d3.Selection<SVGAElement>;
|
||||||
|
private container: d3.Selection<SVGAElement>;
|
||||||
|
private segments: d3.Selection<SVGAElement>[];
|
||||||
|
private baseLines: d3.Selection<SVGAElement>[];
|
||||||
|
private labels: d3.Selection<SVGAElement>[];
|
||||||
|
|
||||||
|
private dateTextCursors: number[];
|
||||||
|
|
||||||
|
constructor(options: VisualConstructorOptions) {
|
||||||
|
this.svg = d3.select(options.element).append('svg').classed('myVisual', true);
|
||||||
|
this.container = this.svg.append("g").classed('container', true);
|
||||||
|
this.segments = [];
|
||||||
|
this.baseLines = [];
|
||||||
|
this.labels = [];
|
||||||
|
this.dateTextCursors = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
private addDateText(x, y, timeMs) {
|
||||||
|
let dateTextWidth: number = 60;
|
||||||
|
let conflict: boolean = false;
|
||||||
|
for (let cursor of this.dateTextCursors) {
|
||||||
|
if (Math.abs(cursor - x) < dateTextWidth) {
|
||||||
|
conflict = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (conflict)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let dateTime: Date = new Date(timeMs);
|
||||||
|
let dateString: string = String(dateTime.getMonth() + 1) + "/" +
|
||||||
|
String(dateTime.getDate()) + "/" +
|
||||||
|
String(dateTime.getFullYear());
|
||||||
|
let hours: number = dateTime.getHours();
|
||||||
|
let minutes: number = dateTime.getMinutes();
|
||||||
|
let seconds: number = dateTime.getSeconds();
|
||||||
|
let timeString: string = "";
|
||||||
|
timeString += (hours < 10 ? "0" : "") + String(hours);
|
||||||
|
timeString += (minutes < 10 ? ":0" : ":") + String(minutes);
|
||||||
|
timeString += (seconds < 10 ? ":0" : ":") + String(seconds);
|
||||||
|
let date: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
date.text(dateString)
|
||||||
|
.attr({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
dy: "0.4em",
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "hanging"
|
||||||
|
})
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.style("fill", "Gray");
|
||||||
|
this.labels.push(date);
|
||||||
|
let time: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
time.text(timeString)
|
||||||
|
.attr({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
dy: "1.4em",
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "hanging"
|
||||||
|
})
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.style("fill", "Gray");
|
||||||
|
this.labels.push(time);
|
||||||
|
this.dateTextCursors.push(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
public update(options: VisualUpdateOptions) {
|
||||||
|
let dataView: DataView = options.dataViews[0];
|
||||||
|
let textSize: string = "11px";
|
||||||
|
let textColor: string = "Gray";
|
||||||
|
let width: number = options.viewport.width;
|
||||||
|
let height: number = options.viewport.height;
|
||||||
|
let marginL: number = 30;
|
||||||
|
let marginR: number = 30;
|
||||||
|
let marginT: number = 30;
|
||||||
|
let marginB: number = 30;
|
||||||
|
let rangeX: number = width - marginL - marginR;
|
||||||
|
let rangeY: number = height - marginT - marginB;
|
||||||
|
|
||||||
|
this.svg.attr({
|
||||||
|
width: width,
|
||||||
|
height: height
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let segment of this.segments)
|
||||||
|
segment.remove();
|
||||||
|
this.segments = [];
|
||||||
|
for (let line of this.baseLines)
|
||||||
|
line.remove();
|
||||||
|
this.baseLines = [];
|
||||||
|
for (let label of this.labels)
|
||||||
|
label.remove();
|
||||||
|
this.labels = [];
|
||||||
|
this.dateTextCursors = [];
|
||||||
|
|
||||||
|
let rows: number[][] = dataView.table.rows as number[][];
|
||||||
|
|
||||||
|
let minX: number = rows[0][0];
|
||||||
|
let maxX: number = rows[rows.length - 1][0];
|
||||||
|
let maxUsage: number = 0;
|
||||||
|
for (let row of rows) {
|
||||||
|
maxUsage = Math.max(row[2], row[3], maxUsage);
|
||||||
|
}
|
||||||
|
let step: number = 8;
|
||||||
|
let rectWidth: number = 8;
|
||||||
|
|
||||||
|
let shares: number = Math.floor(maxUsage / step);
|
||||||
|
for (let i = 0; i < shares + 1; i++) {
|
||||||
|
let lineX: d3.Selection<SVGAElement> = this.container.append("line").classed("line", true);
|
||||||
|
lineX.attr("x1", marginL - 10)
|
||||||
|
.attr("y1", marginT + rangeY * (maxUsage - step * i) / maxUsage)
|
||||||
|
.attr("x2", marginL + rangeX + 10)
|
||||||
|
.attr("y2", marginT + rangeY * (maxUsage - step * i) / maxUsage)
|
||||||
|
.attr("stroke-width", 1.5)
|
||||||
|
.attr("stroke", "LightGray");
|
||||||
|
this.baseLines.push(lineX);
|
||||||
|
let label: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
label.text(String(step * i))
|
||||||
|
.attr({
|
||||||
|
x: marginL - 10,
|
||||||
|
y: marginT + rangeY * (maxUsage - step * i) / maxUsage,
|
||||||
|
dx: "-0.4em",
|
||||||
|
"text-anchor": "end",
|
||||||
|
"dominant-baseline": "central"
|
||||||
|
})
|
||||||
|
.style("font-size", textSize)
|
||||||
|
.style("fill", textColor);
|
||||||
|
this.labels.push(label);
|
||||||
|
}
|
||||||
|
|
||||||
|
let passedNodes: number[] = [];
|
||||||
|
let colors: string[] = [ "#6182A2", "#788E3E", "#EA812D", "#554640", "#9DAEB0", "#a2c3a4",
|
||||||
|
"#AE5A31", "#B9AC78", "#2A4539", "#7F2F29", "#2e5266", "#313b72" ];
|
||||||
|
let nextColor: number = 0;
|
||||||
|
let colorTextCursor: number = 10;
|
||||||
|
let colorTextWidth: number = 50;
|
||||||
|
let jobColors: {Id: number, Color: string}[] = [];
|
||||||
|
for (let row of rows) {
|
||||||
|
let nodeId: number = row[1];
|
||||||
|
let passed: boolean = false;
|
||||||
|
for (let id of passedNodes) {
|
||||||
|
if (id == nodeId) {
|
||||||
|
passed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (passed)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
passedNodes.push(nodeId);
|
||||||
|
if (nodeId == 0)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
let jobId = row[1];
|
||||||
|
let color: string = "";
|
||||||
|
for (let jobColor of jobColors) {
|
||||||
|
if (jobColor.Id == jobId) {
|
||||||
|
color = jobColor.Color;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (color == "") {
|
||||||
|
color = colors[nextColor % colors.length];
|
||||||
|
nextColor++;
|
||||||
|
jobColors.push({Id: jobId, Color: color});
|
||||||
|
|
||||||
|
if (nextColor < colors.length) {
|
||||||
|
let room: number = 10;
|
||||||
|
let circle: d3.Selection<SVGAElement> = this.container.append("circle").classed("circle", true);
|
||||||
|
circle.attr({
|
||||||
|
cx: colorTextCursor,
|
||||||
|
cy: room,
|
||||||
|
r: 5,
|
||||||
|
})
|
||||||
|
.attr("fill", color);
|
||||||
|
this.labels.push(circle);
|
||||||
|
|
||||||
|
let label: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
label.text(String(jobId))
|
||||||
|
.attr({
|
||||||
|
x: colorTextCursor,
|
||||||
|
y: room,
|
||||||
|
dx: "0.5em",
|
||||||
|
dy: "0.1em",
|
||||||
|
"text-anchor": "start",
|
||||||
|
"dominant-baseline": "middle"
|
||||||
|
})
|
||||||
|
.style("font-size", textSize)
|
||||||
|
.style("fill", textColor);
|
||||||
|
this.labels.push(label);
|
||||||
|
colorTextCursor += colorTextWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let prevX: number = -1;
|
||||||
|
let prevDirection: number = 1;
|
||||||
|
for (let row of rows) {
|
||||||
|
if (row[1] != nodeId)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
let currTimeMs: number = row[0];
|
||||||
|
let prevUsage: number = row[2];
|
||||||
|
let currUsage: number = row[3];
|
||||||
|
let currX: number = marginL + Math.round(rangeX * (currTimeMs - minX) / (maxX - minX));
|
||||||
|
let prevY: number = marginT + Math.round(rangeY * (maxUsage - prevUsage) / maxUsage);
|
||||||
|
let currY: number = marginT + Math.round(rangeY * (maxUsage - currUsage) / maxUsage);
|
||||||
|
|
||||||
|
if (prevX != -1) {
|
||||||
|
let line: d3.Selection<SVGAElement> = this.container.append("line").classed("line", true);
|
||||||
|
line.attr("x1", String(prevX))
|
||||||
|
.attr("y1", String(prevY))
|
||||||
|
.attr("x2", String(currX))
|
||||||
|
.attr("y2", String(prevY))
|
||||||
|
.attr("stroke-width", 3)
|
||||||
|
.attr("stroke", color);
|
||||||
|
this.segments.push(line);
|
||||||
|
}
|
||||||
|
|
||||||
|
let rectX: number = 0;
|
||||||
|
let rectY: number = 0;
|
||||||
|
let rectHeight: number = 0;
|
||||||
|
let currDirection: number = 0;
|
||||||
|
if (prevY > currY) {
|
||||||
|
rectX = currX;
|
||||||
|
rectY = currY;
|
||||||
|
rectHeight = prevY - currY + 1;
|
||||||
|
currDirection = -1;
|
||||||
|
} else {
|
||||||
|
rectX = currX - 8;
|
||||||
|
rectY = prevY;
|
||||||
|
rectHeight = currY - prevY + 1;
|
||||||
|
currDirection = 1;
|
||||||
|
}
|
||||||
|
if (prevX == -1 || prevDirection == currDirection || currX - prevX > rectWidth) {
|
||||||
|
let rect: d3.Selection<SVGAElement> = this.container.append("rect").classed("rect", true);
|
||||||
|
rect.attr("x", String(rectX))
|
||||||
|
.attr("y", String(rectY))
|
||||||
|
.attr("width", String(rectWidth))
|
||||||
|
.attr("height", String(rectHeight))
|
||||||
|
.attr("fill", color);
|
||||||
|
this.segments.push(rect);
|
||||||
|
prevDirection = currDirection;
|
||||||
|
prevX = currX;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.addDateText(currX, marginT + rangeY, currTimeMs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"dataRoles": [
|
||||||
|
{
|
||||||
|
"displayName": "Utility",
|
||||||
|
"name": "utility",
|
||||||
|
"kind": "GroupingOrMeasure"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dataViewMappings": [
|
||||||
|
{
|
||||||
|
"table": {
|
||||||
|
"rows": {
|
||||||
|
"for": {"in": "utility"}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/*
|
||||||
|
* Power BI Visualizations
|
||||||
|
*
|
||||||
|
* Copyright (c) Microsoft Corporation
|
||||||
|
* All rights reserved.
|
||||||
|
* MIT License
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the ""Software""), to deal
|
||||||
|
* in the Software without restriction, including without limitation the rights
|
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
* copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
* THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
module powerbi.extensibility.visual {
|
||||||
|
"use strict";
|
||||||
|
import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;
|
||||||
|
|
||||||
|
export class VisualSettings extends DataViewObjectsParser {
|
||||||
|
public dataPoint: dataPointSettings = new dataPointSettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
export class dataPointSettings {
|
||||||
|
// Default color
|
||||||
|
public defaultColor: string = "";
|
||||||
|
// Show all
|
||||||
|
public showAllDataPoints: boolean = true;
|
||||||
|
// Fill
|
||||||
|
public fill: string = "";
|
||||||
|
// Color saturation
|
||||||
|
public fillRule: string = "";
|
||||||
|
// Text Size
|
||||||
|
public fontSize: number = 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,290 @@
|
||||||
|
/*
|
||||||
|
* Power BI Visual CLI
|
||||||
|
*
|
||||||
|
* Copyright (c) Microsoft Corporation
|
||||||
|
* All rights reserved.
|
||||||
|
* MIT License
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the ""Software""), to deal
|
||||||
|
* in the Software without restriction, including without limitation the rights
|
||||||
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
* copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
* THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
module powerbi.extensibility.visual {
|
||||||
|
"use strict";
|
||||||
|
export class Visual implements IVisual {
|
||||||
|
private host: IVisualHost;
|
||||||
|
private svg: d3.Selection<SVGAElement>;
|
||||||
|
private container: d3.Selection<SVGAElement>;
|
||||||
|
private rectangles: d3.Selection<SVGAElement>[];
|
||||||
|
private baseLines: d3.Selection<SVGAElement>[];
|
||||||
|
private labels: d3.Selection<SVGAElement>[];
|
||||||
|
|
||||||
|
private dateTextCursors: number[];
|
||||||
|
|
||||||
|
constructor(options: VisualConstructorOptions) {
|
||||||
|
this.svg = d3.select(options.element).append('svg').classed('myVisual', true);
|
||||||
|
this.container = this.svg.append("g").classed('container', true);
|
||||||
|
this.rectangles = [];
|
||||||
|
this.baseLines = [];
|
||||||
|
this.labels = [];
|
||||||
|
|
||||||
|
this.dateTextCursors = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
private addDateText(x, y, timeMs) {
|
||||||
|
let dateTextWidth: number = 60;
|
||||||
|
let conflict: boolean = false;
|
||||||
|
for (let cursor of this.dateTextCursors) {
|
||||||
|
if (Math.abs(cursor - x) < dateTextWidth) {
|
||||||
|
conflict = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (conflict)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let dateTime: Date = new Date(timeMs);
|
||||||
|
let dateString: string = String(dateTime.getMonth() + 1) + "/" +
|
||||||
|
String(dateTime.getDate()) + "/" +
|
||||||
|
String(dateTime.getFullYear());
|
||||||
|
let hours: number = dateTime.getHours();
|
||||||
|
let minutes: number = dateTime.getMinutes();
|
||||||
|
let seconds: number = dateTime.getSeconds();
|
||||||
|
let timeString: string = "";
|
||||||
|
timeString += (hours < 10 ? "0" : "") + String(hours);
|
||||||
|
timeString += (minutes < 10 ? ":0" : ":") + String(minutes);
|
||||||
|
timeString += (seconds < 10 ? ":0" : ":") + String(seconds);
|
||||||
|
let date: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
date.text(dateString)
|
||||||
|
.attr({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
dy: "0.4em",
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "hanging"
|
||||||
|
})
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.style("fill", "Gray");
|
||||||
|
this.labels.push(date);
|
||||||
|
let time: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
time.text(timeString)
|
||||||
|
.attr({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
dy: "1.4em",
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "hanging"
|
||||||
|
})
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.style("fill", "Gray");
|
||||||
|
this.labels.push(time);
|
||||||
|
this.dateTextCursors.push(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
public update(options: VisualUpdateOptions) {
|
||||||
|
let dataView: DataView = options.dataViews[0];
|
||||||
|
let textSize: string = "11px";
|
||||||
|
let textColor: string = "Gray";
|
||||||
|
let width: number = options.viewport.width;
|
||||||
|
let height: number = options.viewport.height;
|
||||||
|
let marginL: number = 50;
|
||||||
|
let marginR: number = 30;
|
||||||
|
let marginT: number = 30;
|
||||||
|
let marginB: number = 30;
|
||||||
|
let rangeX: number = width - marginL - marginR;
|
||||||
|
let rangeY: number = height - marginT - marginB;
|
||||||
|
|
||||||
|
this.svg.attr({
|
||||||
|
width: width,
|
||||||
|
height: height
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let rect of this.rectangles)
|
||||||
|
rect.remove();
|
||||||
|
this.rectangles = [];
|
||||||
|
for (let line of this.baseLines)
|
||||||
|
line.remove();
|
||||||
|
this.baseLines = [];
|
||||||
|
for (let label of this.labels)
|
||||||
|
label.remove();
|
||||||
|
this.labels = [];
|
||||||
|
this.dateTextCursors = [];
|
||||||
|
|
||||||
|
let rows: number[][] = dataView.table.rows as number[][];
|
||||||
|
|
||||||
|
interface Node {
|
||||||
|
Id: number,
|
||||||
|
Size: number,
|
||||||
|
Base: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
let nodes: Node[] = [];
|
||||||
|
let minX: number = -1;
|
||||||
|
let maxX: number = -1;
|
||||||
|
for (let row of rows) {
|
||||||
|
let nodeId: number = row[2];
|
||||||
|
let nodeSize: number = row[3];
|
||||||
|
let passed: boolean = false;
|
||||||
|
for (let node of nodes) {
|
||||||
|
if (node.Id == nodeId) {
|
||||||
|
passed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!passed)
|
||||||
|
nodes.push({Id: nodeId, Size: nodeSize, Base: 0});
|
||||||
|
|
||||||
|
if (minX == -1) {
|
||||||
|
minX = row[0];
|
||||||
|
maxX = row[1];
|
||||||
|
} else {
|
||||||
|
minX = Math.min(row[0], minX);
|
||||||
|
maxX = Math.max(row[1], maxX);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nodes.sort(function(a, b) {
|
||||||
|
if (a.Id < b.Id)
|
||||||
|
return -1;
|
||||||
|
if (a.Id > b.Id)
|
||||||
|
return 1;
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
let interval: number = 1 / 4;
|
||||||
|
let totalShares: number = -interval;
|
||||||
|
for (let node of nodes) {
|
||||||
|
node.Base = totalShares + interval;
|
||||||
|
totalShares += node.Size + interval;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let node of nodes) {
|
||||||
|
if (node.Base == 0) {
|
||||||
|
let lineX: d3.Selection<SVGAElement> = this.container.append("line").classed("line", true);
|
||||||
|
lineX.attr("x1", marginL - 10)
|
||||||
|
.attr("y1", marginT + rangeY)
|
||||||
|
.attr("x2", marginL + rangeX + 10)
|
||||||
|
.attr("y2", marginT + rangeY)
|
||||||
|
.attr("stroke-width", 1.5)
|
||||||
|
.attr("stroke", "LightGray");
|
||||||
|
this.labels.push(lineX);
|
||||||
|
}
|
||||||
|
let lineX: d3.Selection<SVGAElement> = this.container.append("line").classed("line", true);
|
||||||
|
lineX.attr("x1", marginL - 10)
|
||||||
|
.attr("y1", marginT + rangeY * (totalShares - (node.Base + node.Size)) / totalShares - 2)
|
||||||
|
.attr("x2", marginL + rangeX + 10)
|
||||||
|
.attr("y2", marginT + rangeY * (totalShares - (node.Base + node.Size)) / totalShares - 2)
|
||||||
|
.attr("stroke-width", 1.5)
|
||||||
|
.attr("stroke", "LightGray");
|
||||||
|
this.labels.push(lineX);
|
||||||
|
|
||||||
|
let label: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
label.text(String(node.Id))
|
||||||
|
.attr({
|
||||||
|
x: marginL - 10,
|
||||||
|
y: marginT + rangeY * (totalShares - (node.Base + node.Size / 2)) / totalShares,
|
||||||
|
dx: "-0.8em",
|
||||||
|
"text-anchor": "end",
|
||||||
|
"dominant-baseline": "central"
|
||||||
|
})
|
||||||
|
.style("font-size", textSize)
|
||||||
|
.style("fill", textColor);
|
||||||
|
this.labels.push(label);
|
||||||
|
}
|
||||||
|
|
||||||
|
let colors: string[] = [ "#6182A2", "#788E3E", "#EA812D", "#554640", "#9DAEB0", "#a2c3a4",
|
||||||
|
"#AE5A31", "#B9AC78", "#2A4539", "#7F2F29", "#2e5266", "#313b72" ];
|
||||||
|
let nextColor: number = 0;
|
||||||
|
let colorTextCursor: number = 10;
|
||||||
|
let colorTextWidth: number = 50;
|
||||||
|
let jobColors: {Id: number, Color: string}[] = [];
|
||||||
|
for (let row of rows) {
|
||||||
|
let startTimeMs: number = row[0];
|
||||||
|
let endTimeMs: number = row[1];
|
||||||
|
let node: {Id: number, Size: number, Base: number} = null;
|
||||||
|
for (let n of nodes) {
|
||||||
|
if (n.Id == row[2]) {
|
||||||
|
node = n;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let coreId: number = row[4];
|
||||||
|
let jobId: number = row[5];
|
||||||
|
|
||||||
|
let color: string = "";
|
||||||
|
for (let jobColor of jobColors) {
|
||||||
|
if (jobColor.Id == jobId) {
|
||||||
|
color = jobColor.Color;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (color == "") {
|
||||||
|
color = colors[nextColor % colors.length];
|
||||||
|
nextColor++;
|
||||||
|
jobColors.push({Id: jobId, Color: color});
|
||||||
|
|
||||||
|
if (nextColor < colors.length) {
|
||||||
|
let room: number = 10;
|
||||||
|
let circle: d3.Selection<SVGAElement> = this.container.append("circle").classed("circle", true);
|
||||||
|
circle.attr({
|
||||||
|
cx: colorTextCursor,
|
||||||
|
cy: room,
|
||||||
|
r: 5,
|
||||||
|
})
|
||||||
|
.attr("fill", color);
|
||||||
|
this.labels.push(circle);
|
||||||
|
|
||||||
|
let label: d3.Selection<SVGAElement> = this.container.append("text").classed("text", true);
|
||||||
|
label.text(String(jobId))
|
||||||
|
.attr({
|
||||||
|
x: colorTextCursor,
|
||||||
|
y: room,
|
||||||
|
dx: "0.5em",
|
||||||
|
dy: "0.1em",
|
||||||
|
"text-anchor": "start",
|
||||||
|
"dominant-baseline": "middle"
|
||||||
|
})
|
||||||
|
.style("font-size", textSize)
|
||||||
|
.style("fill", textColor);
|
||||||
|
this.labels.push(label);
|
||||||
|
colorTextCursor += colorTextWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let rectX: number = Math.round(marginL + rangeX * (startTimeMs - minX) / (maxX - minX));
|
||||||
|
let rectY: number = Math.round(marginT + rangeY * (totalShares - (node.Base + coreId) - 1) / totalShares);
|
||||||
|
let rectWidth: number = Math.round(rangeX * (endTimeMs - startTimeMs) / (maxX - minX));
|
||||||
|
let rectHeight: number = Math.round(rangeY * 1 / totalShares - 1.5);
|
||||||
|
if (rectWidth == 0)
|
||||||
|
rectWidth = 1;
|
||||||
|
let rect: d3.Selection<SVGAElement> = this.container.append("rect").classed("rect", true);
|
||||||
|
rect.attr("rx", "4")
|
||||||
|
.attr("ry", "4")
|
||||||
|
.attr("x", String(rectX))
|
||||||
|
.attr("y", String(rectY))
|
||||||
|
.attr("width", String(rectWidth))
|
||||||
|
.attr("height", String(rectHeight))
|
||||||
|
.attr("fill", color);
|
||||||
|
this.rectangles.push(rect);
|
||||||
|
|
||||||
|
this.addDateText(rectX, marginT + rangeY, startTimeMs);
|
||||||
|
this.addDateText(rectX + rectWidth, marginT + rangeY, endTimeMs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче