React Dashboard Pro

开箱即用的一站式仪表板解决方案

只需简单几步即可拥有动态仪表板功能

解决的是"千人千面"的 B 端几乎都要用到的 Dashboard + Widget 客制化需求。

Repository

https://github.com/yuanguandong/react-dashboard-pro

Live demo

https://yuanguandong.github.io/react-dashboard-pro/

Install

npm i react-dashboard-pro -S

git clone https://github.com/yuanguandong/react-widgets

How to use

import React, { useState } from 'react';
import type { LayoutsIF } from 'react-dashboard-pro';
import Dashboard from 'react-dashboard-pro';
import allWidgets from '../widgets';

export default () => {
  const [layout, setLayout] = useState<LayoutsIF>([]);
  const onLayoutChange = (layout: LayoutsIF) => {
    setLayout(layout);
  };
  return (
    <Dashboard
      widgets={allWidgets}
      onLayoutChange={onLayoutChange}
      layout={layout}
    />
  );
};

Props

Widget

widget 可以是开放式的任何内容，可以自由扩展，入口文件需要导出一个对象来描述这个 widget, 对象格式如下，更多 widget 可以看这里

预设的 widget 基本都依赖了 antd,使用了 less, 注意依赖的安装

// todo/index.tsx
import { CalendarOutlined } from '@ant-design/icons';
import Panel from './component';
import snapShot from './snapshot.png';

export default {
  name: 'Todo',
  description: 'todo list',
  tags: ['all','list'],
  component: Panel,
  configComponent: null,
  maxLength: 2,
  snapShot,
  icon: <CalendarOutlined />,
  iconBackground: 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)',
  size: {
    defaultWidth: 3,
    defaultHeight: 11,
    maxWidth: 12,
    maxHeight: 16,
    minWidth: 2,
    minHeight: 4,
  },
}
// **/**.index ……

// widgets/index.tsx
import Clock from './clock';
import Column from './column';
import Guide from './guide';
import Popular from './popular';
import Ring from './ring';
import Todo from './todo';

export default{ Clock,Guide,Popular,Todo,Column,Ring };

Layout

布局信息一般情况下不需要太关注，只需要序列化的以字符串方式存储下来即可，若想实时获取仪表板布局数据（比如要设置默认布局时），可以聚焦（鼠标点击）到对应的仪表板，按快捷键 <Text keyboard>Ctrl</Text>+<Text keyboard>Shift</Text>+<Text keyboard>C</Text> 复制布局数据到剪切板，同时 console 面板也会打印出来布局数据

export default [
  {
    w: 3,
    h: 16,
    x: 0,
    y: 0,
    i: 'Popular-81735522335293475546087951289435',
  },
  {
    w: 3,
    h: 11,
    x: 3,
    y: 5,
    i: 'Todo-53084247679600442035440807237732',
  }
]

实例方法

可通过 ref 获取组件实例，实例对象上挂载了一些方法和 dom 对象，可以方便拓展自定义的 Toolbar 和 WidgetSelector

import React,{useRef} from 'react';
import Dashboard from 'react-dashboard-pro';
import allWidgets from '../widgets';

export default () => {
  const ref = useRef()
  const addWidget = ()=>{
    ref.current.addWidget('Todo-1234567')
  }
  return (<>
      <Dashboard
        ref={ref}
        widgets={allWidgets}
      />
      <button onClick={addWidget}>新增</button>
    </>
  );
};

Todo

✅ configPanel

☑️ gap

☑️ modern theme

☑️ dark theme

☑️ more widget

☑️ widget-cli

☑️ 国际化

The End

• 欢迎大家提 issue, 有需求我会尽力满足大家的痛点
• 这个项目我会一直维护下去，大家放心使用

觉得有用的话点个 star 吧 🙊,支持一下吧！