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

bizcharts-plugin-slider

v3.0.1

Published

A datazoom slider plugin for BizCharts based g2-plugin-slider.

Downloads

39,549

Readme

NPM Package NPM Downloads

bizcharts-plugin-slider

A datazoom slider plugin for BizCharts base g2-plugin-slider.

Installation

Please make sure BizCharts has been already loaded.

npm

$ npm install bizcharts-plugin-slider

html

<script src=https://unpkg.com/[email protected]/umd/bizcharts-plugin-slider.js"> </script>

dev build

$ git clone https://github.com/alibaba/BizCharts.git
$ cd BizCharts
$ cd /plugin/slider
$ npm install
$ npm run build

dev demo

slider $ sudo vi /etc/hosts
// add 127.0.0.1 localhost
slider $ npm run demo
// open in browser http://localhost:3510/

Usage

see demo

API Reference

Create an instance

<Slider
  width={{number} | {string}}
  height={number}
  padding={{object} | {number} | {array}}
  xAxis={string}
  yAxis={string}
  start={{string} | {number}}
  end={{string} | {number}}
  data={{array} | {dataview}}
  fillerStyle={object}
  backgroundStyle={object}
  textStyle={object}
  handleStyle={object}
  backgroundChart={object}
/>

Property

1、 width number | string

Set the width of the slider component, the default is auto, indicating the width of the adaptive container.

2、 height number

Set the height of the slider component, the default is 26, the unit is 'px'.

3、 padding

Sets the padding canvas's canvas's padding to align with the chart (the default chart's canvas container is padded with padding). The default is the same padding as BizCharts default theme, [20, 20, 95, 80].

4、 xAxis string

Must declare Slider is a slider component with a background graph that is used to declare the horizontal axis mapping field of the background chart, which is also the data filtering field.

5、 yAxis string

Must declare Slider is a slider component with a background graph that is used to declare the vertical axis of the background graph.

6、 data array | dataview

Must declare,data source.

7、 start number | string

The value of the slider that declares the position of the slider at the beginning of the corresponding data value, the default is the minimum value.

8、 end number | string

The data value corresponding to the position where the slider finishes the slider is declared, and the default is the maximum value.

9、 scales object

Used to define the columns for the xAxis and yAxis fields for the same column definitions in the action's chart.

Sample code:

<Slider 
    scales={{
      [`${xAxis}`]: {
        type: 'time',
        mask: 'MM-DD'
      }
    }}
/>

10、 fillerStyle object

The selected area of the style configuration, the default configuration is as follows:

<Slider 
  fillerStyle={{
    fill: '#BDCCED',
    fillOpacity: 0.3
  }}
/>

Red box in the picture selected area:

11、 backgroundStyle object

slider background style.

12、 textStyle object

slider auxiliary text font style configuration.

13、 handleStyle object

The slider style configuration, configurable properties are as follows:

  <Slider 
  handleStyle={{
    img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // Can make the picture address can also be data urls
    width: 5,
    height: 26
  }}
/>

14、 backgroundChart object

The slider's background chart configuration allows you to configure its chart type and color:

<Slider 
  backgroundChart={{
  type: [ 'area' ], // The type of chart, either a string or an array
  color: '#CCD6EC'
  }}
/>

15、 onChange function

When the slider slider changes, trigger the callback function, mainly used to update the state of ds. The callback function provides a parameter, which is an object that contains the following properties:

<Slider 
onChange = {(obj) => {
  const { startValue, endValue, startText, endText } = obj;
}}
/>
  • startValue The current raw data value corresponding to the start slider, if the type is time or timeCat, the value is timestamp, please note.
  • endValue The current corresponding raw data value of the end slider, if the type is time or timeCat, the value is timestamp, please note.
  • startText Start slider current display text value
  • endText The current display text value of the end slider

NOTE: The reason for distinguishing text from value is that users will format numbers in most cases. Therefore, when setting the state quantity and updating the state quantity, you need to ensure that the value types are the same before and after.