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

log-analysis

v0.1.0

Published

Generate report file from data file.

Downloads

27

Readme

#log-analysis dependencies

通过自定义日志模板分析日志文件,可自由搭配数据生成图表。

Guide

  1. 这是一个 grunt 插件, 所以你需要先安装 Grunt

    参考 Grunt Getting Started

  2. 安装本插件

    npm install log-analysis --save-dev
  3. 把数据文件 data.txt 存放到当前目录

    配置 data.txt 数据如下,确保文件没有空行

    1
    2
    3
  4. chrome浏览器打开 node_modules/log-analysis/index.html

    开始进行数据分析

  5. 进入数据选项卡

    点击数据源旁边的选择文件,选择 data.txt

    然后点击添加数据源 , 可以见到列表中添加了一个数据源卡片

    点击显示列表可以看到当前数据表格。index为行序号,value为每行数据的值

  6. 在过滤器栏输入过滤器名称:测试,点击添加过滤器

    可以看到列表中有一个名称为测试的过滤器卡片被添加

  7. 点击过滤器卡片的显示配置,点击添加入口数据

    变量名位置填写:data

    选择数据位置填写数据源名称:C:\fakepath\data.txt

    不同操作系统数据源名称可能不一样,以数据源卡片上的名称为准

    点击刷新,可以看到数据表格与数据源卡片一样

  8. 打开当前页面的chrome浏览器控制台

    控制台切换到console界面

    点击过滤器卡片上的输出到控制台

    可以看到控制台提示: 数据输出为window.data

    浏览器控制台console面板输入data并回车

    可以看到控制台打印了当前入口数据为一个js数组:

    ["1", "2", "3"]
  9. 在过滤器卡片的请填写数据过滤代码位置填写过滤器代码:

    return data.map(function(item){
    	return {
    		name: 'value',
    		value: item * 2
    	};
    });

    点击过滤器卡片的刷新按钮,可以看到数据表格的更新

    表格多出了name

    每个过滤器都应该输出JSON数组[{},{},{}...]

    以便后续组合分析

  10. 在顶部导航切换到视图选项卡

    图表栏填写图表名称示例

    点击添加图表添加图表卡片

  11. 在图表卡片点击显示配置

    点击添加入口数据,在变量名位置输入data

    选择数据位置输入过滤器名称测试

    点击刷新, 可以看到数据表格显示到上面

  12. 选择图表类型下拉框选择echarts/bar类型

    点击刷新,可以看到界面显示了柱状图

  13. 在顶部导航切换到控制选项卡

    导出配置文件右边点击保存按钮

    一个json文件会被下载下来

  14. 把这个json文件复制到项目目录

    在项目目录配置gruntfile.js:

    var $path = require('path');
    
    module.exports = function(grunt) {
    	grunt.initConfig({
    		logAnalysis : {
    			demo : {
    				src : 'index.json'
    			}
    		}
    	});
    
    	grunt.loadNpmTasks('log-analysis');
    
    	grunt.registerTask(
    		'default',
    		'the default task',
    		[
    			'logAnalysis'
    		]
    	);
    
    };
  15. 在项目目录执行 grunt

    报告文件生成到了项目目录下的 index.html

##Tips

  • 可以添加多个数据源
  • 过滤器的输入可以是其他过滤器的输出,将入口数据填写为其他过滤器的名称即可
  • 过滤器的入口数据变量名,为过滤器代码可以操作的变量名
  • 各个过滤器代码之间不会有全局变量污染
  • 黄色的过滤器表示正在进行计算
  • 绿色的过滤器表示已经计算完成
  • 红色的过滤器表示程序出现报错
  • 视图图表使用 echarts 渲染
  • 图表类型选择为 echarts/custom ,可以在数据过滤代码直接返回 echarts 配置项来自由生成 echarts 支持的图表
  • js 处理能力有限,网页导入图表最好不要超过30000条数据,大的数据在生成配置文件后,交给node(grunt 任务)处理
  • node 数据处理目前未做流式处理优化,因此数据量过大(超过400000条)可能会导致内存溢出
  • 页面数据被存放到了 indexDB, 过滤器代码被存放到了localStorage,刷新页面数据与配置项不会丢失

Release History

  • 2016-12-03 v0.1.0 正式版发布