preface

Those of you who are working on the front end may often encounter the need to create a custom dashboard. So what is a custom dashboard? Custom Dashboard is basically a custom panel on which users can drag, add, and delete components. Components can be various Echarts graphs or data tables. By dragging and dropping components together, users can customize the panels they want to see.

Project preview

The demo address

The source address

The technical architecture

  1. Front-end framework: React
  2. UI library: Ant Design
  3. Scaffolding: create-react-app
  4. Drag plugin: React-grid-Layout

The technical implementation

1. Use NPM to install the react-Grid-Layout package
npm install react-grid-layout
Copy the code
2. Plug-in declaration and style introduction

First, introduce WidthProvider and Responsive component in JS file, and instantiate Responsive drag component. Second, introduce the style of the plug-in in the CSS file.

import { WidthProvider, Responsive } from "react-grid-layout";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
Copy the code
@import '~react-grid-layout/css/styles.css';
@import '~react-resizable/css/styles.css';
Copy the code
3. The Render rendering

Render a drag-and-drop layout in the Render method of React. ResponsiveReactGridLayout component has multiple attributes, here to give you a few of the more important note:

  • Cols: Defines a responsive layout divided into columns.
  • RowHeight: rowHeight of components in a responsive layout.
  • OnLayoutChange: This function is triggered when components in a responsive layout are dragged or zoomed in or out.
<ResponsiveReactGridLayout
    className="layout"{... this.props} layouts={this.state.layouts} onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts) } > {this.generateDOM()} </ResponsiveReactGridLayout>Copy the code
4. Component DOM generation

Through the generateDOM function to generate components in the layout, first through the array of components, by the type of each component to determine the production of histogram components, line components, or pie components. Each component must define a globally unique key value. Data-grid binds its properties to each component. The specific data-grid properties are described below.

 generateDOM = () => {
    return _.map(this.state.widgets, (l, i) => {
      let option;
      if (l.type === 'bar') {
        option = getBarChart();
      }else if (l.type === 'line') {
        option = getLineChart();
      }else if (l.type === 'pie') {
        option = getPieChart();
      }
      let component = (
        <ReactEcharts
          option={option}
          notMerge={true}
          lazyUpdate={true}
          style={{width: '100%',height:'100%'}}
        />
      )
      return (
        <div key={l.i} data-grid={l}>
          <span className='remove' onClick={this.onRemoveItem.bind(this, i)}>x</span>
          {component}
        </div>
      );
    });
  };
Copy the code
5. Add components using the addItem function.

Each component has the following properties:

  • X: component coordinates on the x axis
  • Y: indicates the Y-axis coordinates of the component
  • W: component width
  • H: Component height
  • I: component key value
addItem(type,widgetId) { const addItem = { x: (this.state.widgets.length * 2) % (this.state.cols || 12), y: Infinity, // puts it at the bottom w: 2, h: 2, i: widgetId || new Date().getTime().toString(), }; this.setState( { widgets: this.state.widgets.concat({ ... addItem,type,})}); };Copy the code
6. Use the onRemoveItem function to remove additional components.
onRemoveItem(i) { console.log(this.state.widgets) this.setState({ widgets: this.state.widgets.filter((item,index) => index ! =i) }); }Copy the code

Afterword.

Thank you for your support. If insufficient, welcome to point out, mutual encouragement.

If you like it, please like it and thank you 😂

Welcome to my: [Blog] [Github] [Nuggets] [Jane book]