Fix overlapping shapes in linechart (timeseries labeling tool)
@@ -458,13 +458,13 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
private addInitialColouredShapesToGraph() {
let selectedLabel = undefined;
let indices = [];
- for (const label in this.data['labels']) {
+ for (let label = 0; label <= this.data['labels'].length; label++) {
if (selectedLabel !== this.data['labels'][label] && indices.length > 0) {
const startdate = new Date(this.data[0]['x'][indices[0]]).getTime();
const enddate = new Date(this.data[0]['x'][indices[indices.length - 1]]).getTime();
const color = this.colorService.getColor(selectedLabel);
- this.addShapeToGraph(startdate, enddate, color);
+ this.addShapeToGraph(startdate, enddate, color, true);
selectedLabel = undefined;
indices = [];
@@ -474,14 +474,49 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
selectedLabel = this.data['labels'][label];
}
- const last_start = new Date(this.data[0]['x'][indices[0]]).getTime();
- const last_end = new Date(this.data[0]['x'][indices[indices.length - 1]]).getTime();
- const last_color = this.colorService.getColor(selectedLabel);
+ }
+
+ private addShapeToGraph(start, end, color, initial= false) {
+ start = new Date(start).getTime();
+ end = new Date(end).getTime();
+
+ const shape = this.createShape(start, end, color);
+
+ if (!initial) {
+ const updated_shapes = [];
+
+ for (let i = 0; i < this.graph.layout.shapes.length; i++) {
+ const selected_shape = this.graph.layout.shapes[i];
+ const x0 = selected_shape['x0'];
+ const x1 = selected_shape['x1'];
+
+ if (x0 <= start && x1 > start && x1 <= end) {
+ selected_shape.x1 = start;
+ updated_shapes.push(selected_shape);
+
+ } else if (x0 >= start && x0 <= end) {
+ if (x1 > end) {
+ selected_shape.x0 = end;
+ updated_shapes.push(selected_shape);
+ }
- this.addShapeToGraph(last_start, last_end, last_color);
+ } else if (x0 <= start && x1 > end) {
+ const left_shape = this.createShape(x0, start, selected_shape.fillcolor);
+ updated_shapes.push(left_shape);
+
+ const right_shape = this.createShape(end, x1, selected_shape.fillcolor);
+ updated_shapes.push(right_shape);
+
+ } else {
+ updated_shapes.push(selected_shape);
+ }
+ }
+ this.graph.layout.shapes = updated_shapes;
+ }
+ this.graph.layout.shapes.push(shape);
}
- private addShapeToGraph(start, end, color) {
+ private createShape(start, end, color) {
const shape = {
// shape: rectangle
type: 'rect',
@@ -509,7 +544,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
width: 0
}
};
- this.graph.layout.shapes.push(shape);
+ return shape;
}
setStartX(startX: string) {
