preface

Before, a net friend asked me a very valuable question about the realization of data visualization, but this visualization problem is not the general bar graph, discount graph and so on, but the data visualization of irregular scale. Therefore, the author decided to implement a dynamic calibration visual component to solve this kind of demand.

The body of the

The initial requirements looked like this:

  • Value customization is supported
  • The value unit is customized
  • Supports calibration component width customization
  • Supports customization of the number of scale lines
  • Supports calibration range customization
  • Pass in the proportion of existing progress, the active area range
  • Support calibration style customization
  • Support numerical style customization
  • Supports custom description text and description text customization

The above is the general needs excavated by the author. Of course, other needs can also be gradually increased.

After confirming the above requirements, we started to select the technology selection. Vue and React were the commonly used technology stacks of the author before, so we preliminarily confirmed that the component adopted the following technical scheme:

  • react + typescript + umi-library

If you are good at using VUE, you can also, the author has written before how to build vUE component library related articles, interested in learning about it, its essence is the same idea.

Next we start implementing the dynamic calibration visualization component. If you are not familiar with UMI, you can refer to the previous article written by the author from 0 to 1 to teach you to build front-end team component system (advanced advanced necessary).

1. Define base property types

Based on the above requirement analysis, we can define the following attribute types:

export interface TickerProps {
  width: number;
  maxHeight: number;
  percent: number;
  text: string;
  value: number;
  showValue: boolean;
  unit: string;
  lineNum: number;
  defaultColor: string;
  activeColor: string;
  textStyle: object;
  valueStyle: object;
}
Copy the code

2. Overall component structure

const Ticker: React.FC<TickerProps> = function(props:TickerProps) {
  const { 
    width = 100, 
    maxHeight = 10,
    percent = 50, 
    value,
    text = 'Instantaneous visibility', 
    showValue = true, 
    unit = 'M', 
    lineNum = 12,
    defaultColor = '#06c',
    activeColor = 'red',
    valueStyle,
    textStyle
  } = props
  return (
    <div className="ticker">
      {
        showValue &&
        <div className="value" style={valueStyle}>
          { value || 0 } <span className="unit">{ unit }</span>
        </div>
      }
      <div className="tickerGraph">
        <div className="tickerLine">
          
        </div>
        <div className="tickerBar"></div>
      </div>{!!!!! text &&<div className="text">{ text }</div>
      }
    </div>
  );
};

export default Ticker;
Copy the code

3. View construction

Dom is used for scale visualization, so the author analyzes how to achieve scale view in detail:

4. Realization of special functions

Because many functions of this component have been implemented after building the structure, the only thing we care about here is the problem of CSS and JS length calculation, there are many CSS implementation schemes, here is not a specific introduction, the author here focuses on how to achieve the specified range of random height:

// Generates a range of random heights
const random = (min:number, max:number) :number= > {
  return min + Math.random() * (max - min)
}
Copy the code

The random height of the dynamic scale bar is realized by using the above function. The internal realization of the scale bar is as follows:

<div className="tickerLine" style={{borderBottomColor: defaultColor}}>
  {
    new Array(lineNum).fill(0).map((item:number, i: number) => {
      let isActive = (i + 1) <= Math.floor(lineNum * percent / 100)
      return <span 
               className="tick"
               style={{
                 height: random(3, maxHeight) + 'px', left: (gap + 2) * i + 'px',
                 backgroundColor: isActive ? activeColor : defaultColor
                }}>
             </span>
    })
  }
</div>
Copy the code

Gap is the distance between scales. Since a little geometric knowledge is required to calculate the position of scales, the formula is as follows:

W = Lw * lineNum + gap * ( lineNum - 1)
Copy the code

Where W represents the total scale width, Lw represents the scale width, and lineNum represents the number of scale lines.

Another point of attention is the activation state. The author uses the following function to determine whether the scale has the activation state:

let isActive = (i + 1) < =Math.floor(lineNum * percent / 100)
Copy the code

This one is also very easy to understand, which is the ratio that we pass in times the total number of lines, to figure out which scale lines need to be activated.

With the above details completed, we are ready to implement an interesting scale visualization scheme, as shown in the following demo:

    1. Visibility measurement
    1. Normal distribution model
    1. scale
    1. grating
    1. Custom text styles

Making the address

A lightweight scale line visualization component based on React

More open source experience addresses

  • The video automatically plays the demo
  • Imitation wechat circle of friends dynamic demo
  • Vlog Dynamic blog template

The last

If you want to learn more H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat, welcome to join our technology group in the official number “Interesting Talk Front-end” to learn and discuss together, explore the frontier of the front-end together.

More recommended

  • Use the Intersection Observer API to implement automatic video queue playback
  • React/Vue to develop a friend app for programmers
  • React builds a common form management configuration platform
  • Summary of several common sorting algorithms and search algorithms necessary for programmers
  • A couple of very interesting javascript points to summarize
  • The front step from zero to one realizes unidirectional & bidirectional lists
  • Micro front-end architecture and my front-end technology inventory
  • Develop your own graph bed application using nodeJs
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS
  • Vue and React
  • Write a mock data server using nodeJS in 5 minutes
  • From zero to one teaches you to develop a component library based on VUE
  • Build front-end team component systems from 0 to 1
  • 8 frequently used custom hooks by hand in 10 minutes
  • 15 minutes on javascript design patterns that front-end engineers must know (with detailed mind maps and source code)
  • Implementing pluggable cross-domain chatbot using postMessage