HC Live Chart

This component allows to edit any JS in a (simple) editor and renders the result in a chart aside. The result needs to be returned using return statement, just like in a function, and it needs to be a simple array of objects with the properties label and value, where the value should be a number that can be used as the height for a bar in the bar chart, which is used to render the result by default.

A purely embedded version

Embedded inside of a formatted text flow

There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. const resources = window.performance.getEntriesByType('resource'); return resources.map(r => ({label: r.name, value: r.duration})); There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. There is surrounding text that tries to show how this component behaves when being embedded in a flowing text.

Waterfall data

There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. const resources = window.performance.getEntriesByType('resource'); return resources.map(r => ({label: r.name, start: r.startTime, end: r.responseEnd})); There is surrounding text that tries to show how this component behaves when being embedded in a flowing text. There is surrounding text that tries to show how this component behaves when being embedded in a flowing text.