0.0.19 • Published 5 years ago

react-drag-dashboard v0.0.19

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

Install

npm i --save react-drag-dashboard

Usage

import Dashboard, {
  Polars,
  BarSimples,
  AreaSimples,
  Customizes
} from "react-drag-dashboard";

render(){
  const columns = [
    {
      key: 1,
      name: "CPU",
      pathname: "/api",
      node: Polars,
      chartType: "polar",
      layouts: {
        w: 4,
        h: 8,
        x: 0,
        y: 25
      },
      source: {
        config: {
          max: "CPUSUM",
          usage: "CPUUsage",
          value: "CPU",
          autoFresh: 5,
          few: 2,
          medium: 4,
          html: (persent, max, data) => {
            return `<div style="width: 300px;margin-top:20px;text-align: center;font-size: 12px!important;">
              <p style="font-size: 2em;color: rgba(0,0,0,0.85);margin: 0;">${persent}%</p>
              <p style="font-size: 1.6em;color: rgba(0,0,0,0.85);margin: 0;">CPU</p>
              <p style="font-size: 1.4em;color: rgba(0,0,0,0.43);margin: 0;">${data} of ${max} reserved</p>
            </div>`;
          }
        },
        cols: {
          value: {
            min: 0,
            max: 6,
            tickInterval: 1,
            nice: false
          }
        }
      },
    }
  ];

  const error = e => console.log(e);

  return (
    // without submit button
    <Dashboard
      url={"https://127.0.0.1"}
      columns={columns}
      error={error}
      theme="#0086fa"
      isAllShow={true}
      visibleEdit={true}
      margin={[10, 10]}
      token="persist:root.auth.token"
      gridHeadStyle={{
        fontSize: 14,
        height: 40
      }}
      gridStyle={{
        borderRadius: "5px",
        border: 0
      }}
    />
  )
}

Dashboard config

url: api url

columns: columns [array]

error: error handle [func]

isAllShow: show all charts [bool]

visibleEdit: is show edit button [bool]

margin: [array]

containerPadding: default = margin

token: [string]

gridHeadStyle: [object]

gridStyle: [object]

columns config

key: 1, <font color="green">[number]</font>

name: "CPU" [string] pathname: "/api" [string] node: Polars form dashboard
chartType: "polar" [string] layouts: {} [object] component: [function]
DataSetTransform: [function] source: [object]

source config

data: fix data

cols: chart params

config:

html: insert html for customize type

Examples

Here're some live demos