fix: make widget plot work with missing data points #1559

srikanthccv · 2022-09-12T00:54:04Z

The widget plot shows buggy behavior where the response has uneven and missing datapoints. One can reproduce the issue using the following response payload and shuffle the result array each time.

Response

{
  "status": "success",
  "data": {
    "resultType": "matrix",
    "result": [
      {
        "queryName": "A",
        "metric": {
          "name": "/v1/ex/serviceability/"
        },
        "values": [
          [
            1662426120,
            "1"
          ],
          [
            1662426240,
            "1"
          ],
          [
            1662426300,
            "1"
          ],
          [
            1662427440,
            "2"
          ],
          [
            1662427500,
            "1"
          ],
          [
            1662427560,
            "1"
          ],
          [
            1662427800,
            "1"
          ],
          [
            1662428040,
            "1"
          ],
          [
            1662428100,
            "1"
          ],
          [
            1662428160,
            "3"
          ],
          [
            1662428220,
            "2"
          ],
          [
            1662428280,
            "5"
          ],
          [
            1662428340,
            "2"
          ],
          [
            1662428820,
            "1"
          ],
          [
            1662429600,
            "5"
          ],
          [
            1662429660,
            "3"
          ],
          [
            1662429720,
            "6"
          ],
          [
            1662429780,
            "3"
          ],
          [
            1662429840,
            "8"
          ],
          [
            1662429900,
            "1"
          ],
          [
            1662430020,
            "4"
          ],
          [
            1662430080,
            "2"
          ],
          [
            1662430140,
            "1"
          ],
          [
            1662430260,
            "3"
          ],
          [
            1662430380,
            "1"
          ],
          [
            1662430860,
            "2"
          ],
          [
            1662430920,
            "1"
          ],
          [
            1662431040,
            "3"
          ],
          [
            1662431280,
            "2"
          ],
          [
            1662431760,
            "1"
          ],
          [
            1662431820,
            "2"
          ],
          [
            1662431880,
            "2"
          ],
          [
            1662431940,
            "1"
          ],
          [
            1662432000,
            "1"
          ],
          [
            1662432060,
            "2"
          ],
          [
            1662432120,
            "1"
          ],
          [
            1662432180,
            "1"
          ],
          [
            1662432540,
            "1"
          ],
          [
            1662432720,
            "1"
          ],
          [
            1662432780,
            "1"
          ],
          [
            1662432960,
            "1"
          ],
          [
            1662433080,
            "1"
          ],
          [
            1662433200,
            "1"
          ],
          [
            1662433500,
            "3"
          ],
          [
            1662433620,
            "2"
          ],
          [
            1662433740,
            "2"
          ],
          [
            1662434160,
            "1"
          ],
          [
            1662434220,
            "3"
          ],
          [
            1662434280,
            "6"
          ],
          [
            1662434340,
            "1"
          ],
          [
            1662434460,
            "5"
          ],
          [
            1662434580,
            "1"
          ],
          [
            1662434640,
            "1"
          ],
          [
            1662434760,
            "1"
          ],
          [
            1662435600,
            "1"
          ],
          [
            1662435720,
            "1"
          ],
          [
            1662435780,
            "2"
          ],
          [
            1662435840,
            "4"
          ],
          [
            1662435900,
            "1"
          ],
          [
            1662436020,
            "4"
          ],
          [
            1662436080,
            "2"
          ],
          [
            1662436440,
            "1"
          ],
          [
            1662436500,
            "1"
          ],
          [
            1662436620,
            "1"
          ],
          [
            1662436680,
            "1"
          ],
          [
            1662436860,
            "1"
          ],
          [
            1662436920,
            "1"
          ],
          [
            1662437100,
            "1"
          ],
          [
            1662437220,
            "4"
          ],
          [
            1662437340,
            "3"
          ],
          [
            1662437400,
            "2"
          ],
          [
            1662437580,
            "2"
          ],
          [
            1662437640,
            "5"
          ],
          [
            1662437700,
            "2"
          ],
          [
            1662437940,
            "4"
          ],
          [
            1662438000,
            "1"
          ],
          [
            1662438060,
            "1"
          ],
          [
            1662438120,
            "1"
          ],
          [
            1662438660,
            "1"
          ],
          [
            1662438840,
            "1"
          ],
          [
            1662439020,
            "1"
          ],
          [
            1662439080,
            "2"
          ],
          [
            1662439140,
            "2"
          ],
          [
            1662439200,
            "3"
          ],
          [
            1662439380,
            "2"
          ],
          [
            1662439500,
            "3"
          ],
          [
            1662439680,
            "2"
          ],
          [
            1662439740,
            "1"
          ],
          [
            1662439800,
            "1"
          ],
          [
            1662439860,
            "4"
          ],
          [
            1662440040,
            "2"
          ],
          [
            1662440160,
            "1"
          ],
          [
            1662440280,
            "1"
          ],
          [
            1662440400,
            "1"
          ],
          [
            1662440460,
            "1"
          ],
          [
            1662441240,
            "2"
          ],
          [
            1662441300,
            "1"
          ],
          [
            1662441360,
            "2"
          ],
          [
            1662441420,
            "1"
          ],
          [
            1662441480,
            "1"
          ],
          [
            1662441540,
            "1"
          ],
          [
            1662441600,
            "4"
          ],
          [
            1662441660,
            "4"
          ],
          [
            1662441720,
            "1"
          ],
          [
            1662441780,
            "1"
          ],
          [
            1662441840,
            "7"
          ],
          [
            1662441900,
            "1"
          ],
          [
            1662441960,
            "2"
          ],
          [
            1662442020,
            "2"
          ],
          [
            1662442080,
            "2"
          ],
          [
            1662442140,
            "1"
          ],
          [
            1662442320,
            "3"
          ],
          [
            1662442500,
            "2"
          ],
          [
            1662442620,
            "4"
          ],
          [
            1662442680,
            "1"
          ],
          [
            1662442740,
            "3"
          ],
          [
            1662442800,
            "8"
          ],
          [
            1662442860,
            "5"
          ],
          [
            1662442920,
            "8"
          ],
          [
            1662442980,
            "2"
          ],
          [
            1662443040,
            "3"
          ],
          [
            1662443100,
            "1"
          ],
          [
            1662443160,
            "3"
          ],
          [
            1662443220,
            "5"
          ],
          [
            1662443400,
            "1"
          ],
          [
            1662443460,
            "1"
          ],
          [
            1662443520,
            "1"
          ],
          [
            1662443580,
            "3"
          ],
          [
            1662443760,
            "2"
          ],
          [
            1662443820,
            "1"
          ],
          [
            1662443940,
            "1"
          ],
          [
            1662444000,
            "1"
          ],
          [
            1662444060,
            "2"
          ],
          [
            1662444120,
            "1"
          ],
          [
            1662444180,
            "4"
          ],
          [
            1662444240,
            "2"
          ],
          [
            1662444300,
            "2"
          ],
          [
            1662444360,
            "2"
          ],
          [
            1662444420,
            "2"
          ],
          [
            1662444480,
            "7"
          ],
          [
            1662444540,
            "1"
          ],
          [
            1662444600,
            "3"
          ],
          [
            1662444660,
            "2"
          ],
          [
            1662444720,
            "4"
          ],
          [
            1662444780,
            "5"
          ],
          [
            1662444840,
            "3"
          ],
          [
            1662444900,
            "3"
          ],
          [
            1662444960,
            "3"
          ],
          [
            1662445020,
            "1"
          ]
        ]
      },
      {
        "queryName": "A",
        "metric": {
          "name": "/v1/serviceability/geomapping/"
        },
        "values": [
          [
            1662426660,
            "1"
          ],
          [
            1662427020,
            "1"
          ],
          [
            1662428580,
            "1"
          ],
          [
            1662428820,
            "1"
          ],
          [
            1662429120,
            "2"
          ],
          [
            1662429720,
            "1"
          ],
          [
            1662430320,
            "1"
          ],
          [
            1662431280,
            "1"
          ],
          [
            1662433200,
            "1"
          ],
          [
            1662433740,
            "1"
          ],
          [
            1662433920,
            "1"
          ],
          [
            1662435300,
            "1"
          ],
          [
            1662435480,
            "1"
          ],
          [
            1662435660,
            "1"
          ],
          [
            1662436080,
            "2"
          ],
          [
            1662436200,
            "1"
          ],
          [
            1662436380,
            "1"
          ],
          [
            1662436440,
            "2"
          ],
          [
            1662436500,
            "1"
          ],
          [
            1662436620,
            "1"
          ],
          [
            1662436680,
            "1"
          ],
          [
            1662436740,
            "1"
          ],
          [
            1662436860,
            "1"
          ],
          [
            1662436920,
            "2"
          ],
          [
            1662436980,
            "1"
          ],
          [
            1662437100,
            "2"
          ],
          [
            1662439920,
            "1"
          ],
          [
            1662440880,
            "1"
          ],
          [
            1662442080,
            "1"
          ],
          [
            1662442140,
            "1"
          ],
          [
            1662442380,
            "1"
          ],
          [
            1662442560,
            "1"
          ],
          [
            1662442740,
            "1"
          ],
          [
            1662442800,
            "1"
          ],
          [
            1662443100,
            "1"
          ],
          [
            1662443160,
            "2"
          ],
          [
            1662443820,
            "1"
          ],
          [
            1662444060,
            "1"
          ],
          [
            1662444660,
            "1"
          ],
          [
            1662444840,
            "1"
          ],
          [
            1662445020,
            "1"
          ]
        ]
      },
      {
        "queryName": "A",
        "metric": {
          "name": "/v1/signup/serviceability/geomapping/"
        },
        "values": [
          [
            1662442740,
            "1"
          ]
        ]
      }
    ]
  }
}

We create an x-axis label set by combining all the data and taking unique values out of it and then filling the missing values with null and opting-in for spanGaps=true (already configured).