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

@winner-fed/quote-graph

v1.1.14-beta.0

Published

quote graph

Downloads

3

Readme

quoteview

A library for quoteview.

Build Setup

 
<template>
  <quote-view
    :cid='cid'
    :code='code'
    :token='token'
    :params='params'
    :appkey='appkey'
    :threshold='threshold'
    :throttle='throttle'
    :option='option'
    :graph-config='graphConfig'
    :period-black-list='periodBlackList'
    :multi-main-modules='multiMainModules'
    :multi-main-auths='multiMainAuths'
    :multi-foot-modules='multiFootModules'
    :multi-foot-auths='multiFootAuths'
    @touchMove='touchMove'
    @tapGraph='tapTrendJZ'
  >
    <div slot='header'></div>
  </quote-view>
</template>
<script>
// setConfig修改graph默认参数,格式与graphConfig一致
import {QuoteView, setConfig} from 'quoteview';
export default {
  name: 'Main',
  data() {
    return {
      cid: '',
      code: '',
      appkey: undefined, // 埋点key
      token: undefined, // 接口access_token
      params: {}, // 组件light参数
      periodBlackList: [], // 分时K线period黑名单
      threshold: 0, // 数据缓存默认时间间隔
      throttle: 10000, // 定时请求时间间隔
      /**
       * [multiModules 将需要展示的模块相加即可]
       * 主视图模块
       * const TREND_KEY = 1; // 分时
       * const MA_KEY = 2; // 均线
       * const JZ_KEY = 4; // 九转
       * const KD_KEY = 8; // KD密码
       */
      multiMainModules: 15, // 模块权限
      multiMainAuths: 15, // 用户权限
      /**
       * 辅视图模块
       * const AMOUNT_KEY = 1; // 成交量
       * const MACD_KEY = 2; // MACD
       * const KDJ_KEY = 4;  // KDJ
       * const ENE_KEY = 8; // ENE
       * const ELECTRIC_KEY = 16;  // 电波
       * const FUNDFLOW_KEY = 32;  // 资金博弈
       * const FUNDFLOWDIR_KEY = 64;  // 资金流向
       * const RSI_KEY = 128;  // RSI
       * const BRAR_KEY = 256; // BRAR
       * const DPO_KEY = 512; // DPO
       * const CYC_KEY = 1024; // CYC
       * const EXPMA_KEY = 2048; // EXPMA
       * const ASI_KEY = 4096; // ASI
       * const WVAD_KEY = 8192; // WVAD
       */
      multiFootModules: 127, // 模块权限
      multiFootAuths: 127, // 用户权限
      option: {
        showTabBar: true, // 是否显示分时K线tab切换栏
        showFullScreenBtn: true, // 是否显示全屏按钮
        showSideDetail: true, // 是否显示分时五档明细成交量
        showFundflow: true, // 是否显示分时五档的成交量
        supportFullScreen: true, // 是否支持全屏
        supportKlineRight: true, // 是否支持除复权
        supportKlineScale: true, // 是否支持K线缩放
        supportKlineFootMenu: true, // 是否显示全屏K线菜单栏
        supportGestures: true, // 是否支持手势操作
        showCallAuction: false // 是否展示集合竞价
      },
      /**
       * [graphConfig 绘图参数,实例单独样式时merge使用]
       * 具体可merge参数见src/viewModel/config.js
       * @type {Object}
       */
      graphConfig: {
        /*** 主视图 ***/
        MainContext: {
          size: {
            top: 0.1,
          }
        },
        /*** 辅视图 ***/
        FootContext: {
          size: {
            bottom: 0.2,
          }
          axisX: {
            top: 0.82,
          }
        },
        Content: {
          drawTitle: false,
        },
      },
      touchMove: function(data) {
        console.log(data)
      },
      tapTrendJZ: function(data) {
        console.log(data)
      },
    }
  },
  components: {QuoteView},
}
</script>

主要业务逻辑相关源码 目录结构

src
│  build.js
│  main.js
│  main.vue
│
├─assets
│  ├─image
│  │      dianbo.png
│  │      electric.png
│  │      fullscreen.png
│  │      k_enlarge_pink.png
│  │      k_narrow_pink.png
│  │      load.gif
│  │
│  └─style
│          index.scss
│          mixin.scss
│
├─controller
│  │  cache.js
│  │  index.js
│  │  util.js
│  │
│  └─datamanager
│      │  api.js // 管理网络API请求
│      │  config.js // 管理API请求相关配置项
│      │  index.js // 负责业务逻辑的管理,处于db的下游
│      │
│      └─database
│              basedb.js // 所有db的基类(以下的klinedb、trenddb)
│              chainmap.js // 链式操作函数集合
│              datamap.js // 封装一下Map的set,get,clear等操作,以便后续进行扩展
│              klinedb.js // 保存各个K线的除复权数据
│              trenddb.js // 保存除kline除复权以外的其他数据
│
├─math
│  ├─matrix
│  │      index.js
│  │
│  └─matrix2d
│          index.js
│
├─util
│      index.js
│
├─view
│  │  class.js
│  │
│  ├─script
│  │      index.js
│  │      side.js
│  │      tab.js
│  │
│  └─vue
│          index.vue
│          side.vue
│          tab.vue
│
└─viewModel
    │  config.js
    │  index.js
    │
    ├─additionalcontext
    │      context.js
    │      volumnpie.js
    │
    ├─basecomponent
    │      index.js
    │
    ├─basecontext
    │      index.js
    │      package.json
    │
    ├─component
    │      index.js
    │      package.json
    │
    ├─dectorator // 修饰器
    │  ├─checkauthdectorator
    │  │      index.js
    │  │
    │  ├─footdectorator
    │  │      index.js
    │  │
    │  ├─klineavgdectorator
    │  │      index.js
    │  │
    │  ├─klinefootdectorator
    │  │      index.js
    │  │
    │  ├─klinejqjzdectorator
    │  │      index.js
    │  │
    │  ├─klinekddectorator
    │  │      index.js
    │  │
    │  ├─klineswandectorator
    │  │      index.js
    │  │      
    │  ├─maindectorator
    │  │      index.js
    │  │
    │  ├─trendfivefootdectorator
    │  │      index.js
    │  │
    │  ├─trendjqjzdectorator
    │  │      index.js
    │  │
    │  └─trendonefootdectorator
    │          index.js
    │
    ├─electric
    │      index.js
    │
    ├─kline
    │      index.js
    │
    ├─klineene
    │      index.js
    │
    ├─klinekdj
    │      index.js
    │
    ├─klineturnover
    │      index.js
    │
    ├─macd
    │      index.js
    │
    ├─trend
    │      index.js
    │
    ├─trendcapital
    │      index.js
    │
    ├─trendfive
    │      index.js
    │
    ├─trendfiveturnover
    │      index.js
    │
    ├─trendfundflow
    │      index.js
    │
    ├─trendone
    │      index.js
    │
    ├─trendoneturnover
    │      index.js
    │
    └─trendturnover
            index.js