Skip to content

Instantly share code, notes, and snippets.

@MuttakinHasib

MuttakinHasib/annotation.ts

Created October 15, 2023 19:48
Show Gist options
  • Save MuttakinHasib/b39907ec9e28c0ea2dba95bec32e4e77 to your computer and use it in GitHub Desktop.
Save MuttakinHasib/b39907ec9e28c0ea2dba95bec32e4e77 to your computer and use it in GitHub Desktop.
Download ZIP
annotation problem
Raw
annotation.ts
const Annotation = [
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "06d771ac-2d59-4d39-aa86-580505169d28",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 10,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P1_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "fbf631a0-1d75-4da1-b168-070a2b02f78b",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731410,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P1_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "7c4566a3-8388-4b6c-bbc4-53a217837ffe",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731510,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P2_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "36198397-68d1-4973-a410-c4a55d9cc216",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731520,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P2_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "8571756c-17e5-48da-9bca-cb8da175bd5a",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731550,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P3_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "4d7be074-8f5c-4ac3-9a68-dad8791a09e9",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731555,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "TRD3-P3_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "98aa3e68-63b0-42c7-8f71-ad43eec15177",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731321.009,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "Trim-T_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "ee378975-610c-4555-ac4c-5f76738175c7",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731579.969,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "Trim-T_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "20c252f2-07e6-4349-8370-f9daa0529d90",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731450.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P1_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "03fa39e4-8f02-4290-96b7-21fa70a3a42c",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731452.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P1_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "d3c1d7b9-fe55-4604-9c68-df0774fc758a",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731454.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P2_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "ce42d8e6-a22f-46ca-9517-bed1dd4414e1",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731456.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P2_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "80786e65-82a3-458e-ae66-2a04d460d5fd",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731458.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P3_S",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
{
type: "RenderContextVerticalLineAnnotation",
options: {
id: "4339ca8d-10ca-499f-9c07-4d7ae950e181",
annotationLayer: "AboveChart",
isEditable: true,
isHidden: false,
isSelected: false,
opacity: 1,
resizeDirections: "XyDirection",
x1: 1696731460.489,
xAxisId: "DefaultAxisId",
yAxisId: "DefaultAxisId",
xCoordinateMode: "DataValue",
yCoordinateMode: "DataValue",
annotationsGripsStroke: "#CDCDCD99",
annotationsGripsFill: "#CDCDCD22",
annotationsGripsRadius: 10,
selectionBoxStroke: "#f00e0e66",
selectionBoxDelta: 1.5,
selectionBoxThickness: 6,
dragPoints: ["Body", "x1y1", "x2y2", "x2y1", "x1y2"],
axisFontFamily: "Arial",
axisFontSize: 14,
axisLabelFill: "#30BC9A",
axisLabelStroke: "#FFFFFF",
labelPlacement: "TopRight",
labelValue: "P3-P3_F",
showLabel: true,
stroke: "#30BC9A",
strokeDashArray: [],
strokeThickness: 3,
},
},
];
const markers = [
{
Marker_ID: "646f67993c12c8257b43bd2b",
Marker_Type: "Range",
Marker_Count: "6",
Marker_Set_Name: "TRD3",
Marker_Domain: "Time",
Markers: [
{
P1_S: 20,
},
{
P1_F: "1696731410",
},
{
P2_S: "1696731510",
},
{
P2_F: "1696731520",
},
{
P3_S: "1696731550",
},
{
P3_F: "1696731555",
},
],
},
{
Marker_ID: "646f67993c12c8257b43bd328",
Marker_Type: "Range",
Marker_Count: "2",
Marker_Set_Name: "Trim",
Marker_Domain: "Time",
Markers: [
{
T_S: "1696731321.009",
},
{
T_F: "1696731579.969",
},
],
},
];
const annotation = Annotation.forEach((annot) => {
const [markerName, marker] = annot.options.labelValue.split("-");
console.log(markerName, marker);
const markerIndex = markers.findIndex(
(item) => item.Marker_Set_Name === markerName
);
if (markerIndex !== -1) {
const points = markers[markerIndex].Markers;
const pointIndex = points.findIndex((item) => item[marker] !== undefined);
console.log(pointIndex);
if (pointIndex !== -1) {
points[pointIndex][marker] = annot.options.x1;
}
}
});
console.log({ markers });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment