Merge pull request #2 from newrelic-experimental/feat-compare-with-su…

…pport Compare with support
newrelic-experimental · Nov 14, 2023 · 7713b2c · 7713b2c
2 parents 68bb98b + eefe3e9
commit 7713b2c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "aligned-timeseries",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "scripts": {
         "start": "nr1 nerdpack:serve",
         "test": "exit 0"
@@ -10,6 +10,7 @@
         "uuid": "32f9d671-8201-44eb-a805-9765b4672954"
     },
     "dependencies": {
+        "chroma-js": "^2.4.2",
         "prop-types": "15.7.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",

diff --git a/visualizations/aligned-timeseries/index.js b/visualizations/aligned-timeseries/index.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {LineChart, Card, CardBody, NrqlQuery, Spinner} from 'nr1';
+import chroma from "chroma-js";
 
-const defaultColors=['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000']
+const defaultColors=[ '#3cb44b', '#e6194b', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffe119']
 
 
 function AlignedTimeseries(props) {
@@ -13,7 +14,18 @@ function AlignedTimeseries(props) {
     let NRQLqueries = (customNrqlQueries !== null && customNrqlQueries !== undefined) ? customNrqlQueries : (nrqlQueries !== null && nrqlQueries!==undefined) ?  nrqlQueries : []; 
 
     let colors = colorMap ? colorMap.split(',') : defaultColors
-
+    let colorCycler=0;
+
+    const getNextColor = () => {
+        let returnColor=defaultColors[colorCycler]
+        colorCycler++
+        if(colorCycler >= defaultColors.length) {
+            colorCycler=0;
+        }
+        return returnColor
+
+    }
+
 
     useEffect(async () => { 
             let promises=NRQLqueries.map((q)=>{return NrqlQuery.query({accountIds: [q.accountId], query: q.query,formatTypeenum: NrqlQuery.FORMAT_TYPE.CHART})})
@@ -23,19 +35,19 @@ function AlignedTimeseries(props) {
 
 
     if(queryResults ) {
-        let seriesAlignment = !alignment || alignment =="" ? "start" : alignment
-        const determineComparisonPoint = (r) => {
+        let seriesAlignment = (!alignment || alignment =="" || alignment === null || alignment === undefined) ? "start" : alignment
+        const determineComparisonPoint = (seriesData) => {
             let comparisonPoint
             switch(seriesAlignment) {
                 case "middle":
-                    let midpoint = parseInt((r.data[0].data.length / 2)) - 1
-                    comparisonPoint = comparisonPoint = r.data[0].data[ midpoint].x
+                    let midpoint = parseInt((seriesData.data.length / 2)) - 1
+                    comparisonPoint = comparisonPoint = seriesData.data[ midpoint].x
                     break;
                 case "end":
-                    comparisonPoint = r.data[0].data[r.data[0].data.length-1].x
+                    comparisonPoint = seriesData.data[seriesData.data.length-1].x
                     break;
                 default:
-                    comparisonPoint = r.data[0].data[0].x
+                    comparisonPoint = seriesData.data[0].x
             }
             return comparisonPoint
         }
@@ -44,30 +56,44 @@ function AlignedTimeseries(props) {
         let latest=0
         queryResults.forEach((r)=>{
             if(r.data && r.data[0] && r.data[0].metadata && r.data[0].data) {
-                let comparisonPoint=determineComparisonPoint(r)
+                let comparisonPoint=determineComparisonPoint(r.data[0])
                 if(comparisonPoint > latest) {
                     latest=comparisonPoint
                 }
             }
         })
 
+
+        const performAlignment = (seriesData,color) => {
+            let workingData=seriesData
+            let comparisonPoint=determineComparisonPoint(workingData)
+            let resultSetBeginTime=comparisonPoint
+            let offset=latest-resultSetBeginTime
+            if(offset > 0) {
+                workingData.data.forEach((row)=>{
+                    row.x= row.x + offset
+                })
+            } 
+            workingData.metadata.color=color;
+        }
+
         queryResults.forEach((r,idx)=>{
-            if(r.data && r.data[0] && r.data[0].metadata && r.data[0].data) {
-                let comparisonPoint=determineComparisonPoint(r)
-                let resultSetBeginTime=comparisonPoint
-                let offset=latest-resultSetBeginTime
-                if(offset > 0) {
-                    r.data[0].data.forEach((row)=>{
-                        row.x= row.x + offset
-                    })
-                } 
-                r.data[0].metadata.color=NRQLqueries[idx].color ? NRQLqueries[idx].color : colors[idx % colors.length]
+            if(r.data) {
+                if(r.data[0] && r.data[0].metadata && r.data[0].data) {
+                    performAlignment(r.data[0],NRQLqueries[idx].color ? NRQLqueries[idx].color : getNextColor())
+                }
+                if(r.data[1] && r.data[1].metadata && r.data[1].data) { //for compare with support
+                    performAlignment(r.data[1],NRQLqueries[idx].color ? chroma(NRQLqueries[idx].color).alpha(1).darken(2).hex() : getNextColor()) //ifcolour provided lets darken it a touch for compare
+                }
             }
         })
 
         //determine latest result set, we'll align everything to that one
         let chartData=[]
-        queryResults.forEach(r=>{ if(r.data && r.data[0] )  {chartData.push(r.data[0])}})
+        queryResults.forEach(r=>{ 
+            if(r.data && r.data[0] )  {chartData.push(r.data[0])}
+            if(r.data && r.data[1] )  {chartData.push(r.data[1])}
+        })
         return <LineChart fullWidth fullHeight data={chartData} />
 
     } else {