micmro / PerfCascade

Responsive, SVG based HAR waterfall viewer
https://micmro.github.io/PerfCascade
MIT License
272 stars 51 forks source link

Graph is not showing for Json format #251

Closed janarthan35 closed 5 years ago

janarthan35 commented 5 years ago

Trying to pass json instead of har files. I have add a method called "fromJson" instead of "fromHar" and a separate parser instead of har.js . I dont get chart properly image

micmro commented 5 years ago

It is hard to find out why it is not working without seeing the output data, but I assume it has to do with the calculation of the start and end times or some other differences in the format. Does the output match the WaterfallDocs interface?

janarthan35 commented 5 years ago

The output ( svg element ) of live demo matches with my above output ( I have given same data ) . Svg element of live demo and my chart are same . is there is any problem with css ?? i need to import any additional css ?

micmro commented 5 years ago

Sorry, I did not meant the structure of the SVG, but the JSON object that is passed to the PerfCascade constructor (e.g. here).

But right, there is also the perf-cascade.css CSS file.

janarthan35 commented 5 years ago

Data is available before passing it to PerfCascade constructor. I have copied css from "perf-cascade.css " and pasted in my component but still it didn't work . The data before passing to PerfCascade constructor : {
docIsTLS:true, durationMs:11929, entries:[
{
end:2388, responseDetails:{
icon:{
… }, indicators:Array(2), requestType:"html", rowClass:"row-item", statusCode:200 } segments:(4) [
{
end:1652, start:966, total:686, type:"connect" }, {
end:1727, start:1652, total:75, type:"send" }, {
end:1953, start:1727, total:226, type:"wait" }, {
end:2386, start:1953, total:433, type:"receive" } ], start:966, tabs:[
{
content:"

Errors

↵ <d…r/Status Code↵
200 OK
", tabClass:"", title:"General" }, {
content:"
↵ ↵
Method
GET</…ll Request Headers↵
↵ ↵
", tabClass:"", title:"Request" }, {
content:"
↵ ↵
Status
200 O…l Response Headers↵
↵ ↵
", tabClass:"", title:"Response" }, {
content:"↵
Total
1422…"receive">Receive↵
433 ms
↵ ", tabClass:"", title:"Timings" }, {
renderContent:ƒ, tabClass:"raw-data", title:"Raw Data" } ], total:1422, url:"https://www.google.com/" } ], marks:[

], title:"googleHomePage" }

janarthan35 commented 5 years ago

Thanks for your support. I got waterfall chart by passing json data.