npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aframe-stats-panel

v0.2.2

Published

A-Frame statistics panel for additional statistics, in the style of A-Frame stats

Downloads

1,262

Readme

Overview

Custom statistics based on custom events, output in the same style as A-Frame stats.

stats-panel

An optional component. This is required to add custom stats if the A-Frame stats component might not be present on the scene.

If the A-Frame stats component is present on the scene, this can be used with merge: false to separate the custom stats into a separate panel in the bottom left corner.

| Property | Description | Default | | -------- | ------------------------------------------------------------ | ------- | | merge | If an A-Frame stats panel is present, should the additional stats be merged into it? If "true", they are appended at the end. If "false", the additional stats are shown in a new panel in the bottom left corner of the screen. | false |

stats-group

Used to group stats rows. Every stats-row must be in a stats-group, referencing it by name if there is more than one.

The name of the stats-group is specified in the component name: the part that appears after the __ in the component name is the group name.

| Property | Description | Default | | -------- | ------------------------------------------------------------ | ------- | | label | The label for this stats group - displayed in the stats panel. | blank |

stats-row

A row of data to be displayed in a stats table.

The source of data for a row is always an event, with some properties in its detail

| Property | Description | Default | | ---------- | ------------------------------------------------------------ | ------- | | group | Every statistics row must be displayed in a group.This component uses this name to search for a group to add the row to. It searches for:- a group with a matching name on the same entity- a group with a matching name on the scene- any unnamed group on the entity- any unnamed group on the scene., | | | event | The name of the event that provides data for this stats row. Each time the event is detected, the stats row will be updated with data from the event. Note that the stats-row must be configured on an entity that will detect the event. | | | properties | The names of one or more properties within the detail of the event that is to be displayed in the stats-row. These are displayed without any additional formatting. If additional formatting / processing is required, write an additional component that listens for the event and modifies the data as required. If multiple properties are specified, they are displayed left-right. Typically 3-4 data items can be fitted into a row, if required. | | | label | The label for this stats row - displayed in the stats panel. | |

stats-collector

Processes a data stream, and reports periodic summary data (min, max, mean & percentiles)

The source of data for is always an event, with some properties in its detail

| Property | Description | Default | | --------------- | ------------------------------------------------------------ | ------- | | inEvent | The name of the event that provides data for this stats collector. Each time the event is detected, a new data entry is added to the data set being analysed by this stats collector Note that the stats-collector must be configured on an entity that will detect the event. | | | properties | The names of one or more properties within the detail of the event that is to be collected by this stats-collector. The stats-collector will analyze and output data in the same way, for each property specified.Unlike stats-row, nested properties are not yet supported. | | | outputFrequency | How often summary statistics are output by this statsCollector, expressed as a count of input events.Note that in the current implementation, when summary stats are output, all previous data is discarded , so this also defines the size of data set analyzed when computing min, max and percentiles. A high value here will result in more accurate summary stats, but they will update less frequently.Multiple parallel stats-collectors can be used to generate summary stats over multiple different data population sizes, giving the best of both worlds. | 100 | | outEvent | The name of the event that is used to output summary stats. Summary stats data is included in the detail of this event. | | | outputs | A list of outputs to generate for each property analyzed by the stats collector. Some combination of the following strings:- mean for the mean of the data- max for the max value from the data-min for the min value from the data-percentile__XX_X for a percentile value from the data, e.g. percentile__25 for the 25th percentile, or percentile_99_9 for the 99.9th percentile. Note that percentiles will only be as accurate as they can be with the volume of data gathered. There's no attempt to model distributions and estimate percentiles outside the range of available data. | | | outputToConsole | Whether to output to console as well as generating events. If a string is specified, this is output to console, together with the event data. If no string is specified, nothing is output to console. | |

Installation

<script src="https://cdn.jsdelivr.net/gh/diarmidmackenzie/aframe-components@latest/components/stats-panel/index.min.js"></script>

Or from npm:

https://www.npmjs.com/package/aframe-stats-panel

Examples

Here's an example of stats-panel components set on an a-scene to display 3 additional stats rows, in 2 groups.

    <a-scene stats
        stats-panel="merge: false"
        stats-group__1="label: First Group"
        stats-group__2="label: Second Group"
        stats-row__1="group: 1; event: event1; property: secs; label: Seconds"
        stats-row__2="group: 1; event: event1; property: random; label: Random"
        stats-row__3="group: 2; event: event2; property: data; label: More data"
        generate-data>

With suitable events generating input, this will generate output like this:

image-20221106161718921

See a live example here: stats-panel.html

See a live example of how stats-collector can be used to aggregate summary statistics here: stats-collector.html

Code

stats-panel