amos-viz

some charts for react wrapper.

extra:

• dragdesign
• svg
• canvas
• fusioncharts
• board
• media
• echarts plugin [ 'wordcloud', 'liquidfill' ]
• filetools

dependencies

file-saver use to save file, such as export cvs,json...

add svg.js to support svg animate since [email protected]. use @svgdotjs/svg.js@3

install

npm i --save amos-viz

usage

echarts

basic use

import AmosEcharts from 'amos-viz/lib/echarts';

// render echarts option.
<AmosEcharts option={this.getOption()} />

bar demo

import React, { Component } from 'react';
import { BarChart } from 'amos-viz/lib/echarts';
import BarOptions from 'amos-viz/lib/echarts/options/bar';
import { barMock } from './../datas';

class BarDemo extends Component {

  getOptions = () => {
    return BarOptions.singleBarOption(barMock.xdata, barMock.ydata);
  }

  render() {

    const option = this.getOptions();

    return (
      <BarChart
        option={option}
      />
    );
  }
}

export default BarDemo;

line demo

import React, { Component } from 'react';
import { LineChart } from 'amos-viz/lib/echarts';
import LineOptions from 'amos-viz/lib/echarts/options/line';
import { lineMock } from './../datas';

class BarDemo extends Component {

  getOptions = () => {
    return LineOptions.singleLineOption(lineMock.xdata, lineMock.ydata);
  }

  render() {

    const option = this.getOptions();

    return (
      <LineChart
        option={option}
      />
    );
  }
}

export default BarDemo;

附录

mockdatas

const randomData = () => {
  return Math.round(Math.random() * 1000);
};

export const barMock = {
  xdata: [ 0, 1, 2, 3, 4, 5, 6 ],
  ydata: [ 2.1, 4.9, 5.1, 6.3, 4.1, 5.5 ]
};

export const lineMock = {
  xdata: [ 0, 1, 2, 3, 4, 5, 6 ],
  ydata: [ 2.1, 4.9, 5.1, 6.3, 4.1, 5.5 ]
};

export const mapMock = [
  { name: '北京', value: randomData() },
  { name: '天津', value: randomData() },
  { name: '上海', value: randomData() },
  { name: '重庆', value: randomData() },
  { name: '河北', value: randomData() },
  { name: '河南', value: randomData() },
  { name: '云南', value: randomData() },
  { name: '辽宁', value: randomData() },
  { name: '黑龙江', value: randomData() },
  { name: '湖南', value: randomData() },
  { name: '安徽', value: randomData() },
  { name: '山东', value: randomData() },
  { name: '新疆', value: randomData() },
  { name: '江苏', value: randomData() },
  { name: '浙江', value: randomData() },
  { name: '江西', value: randomData() },
  { name: '湖北', value: randomData() },
  { name: '广西', value: randomData() },
  { name: '甘肃', value: randomData() },
  { name: '山西', value: randomData() },
  { name: '内蒙古', value: randomData() },
  { name: '陕西', value: randomData() },
  { name: '吉林', value: randomData() },
  { name: '福建', value: randomData() },
  { name: '贵州', value: randomData() },
  { name: '广东', value: randomData() },
  { name: '青海', value: randomData() },
  { name: '西藏', value: randomData() },
  { name: '四川', value: randomData() },
  { name: '宁夏', value: randomData() },
  { name: '海南', value: randomData() },
  { name: '台湾', value: randomData() },
  { name: '香港', value: randomData() },
  { name: '澳门', value: randomData() }
];

export const pieMock = {
  data: [ 100, 200, 300, 400, 189 ],
  legends: [ 'fed','bed','pro','full','other' ]
};

let count = 51;

export const dynamicMock = (option) => {
  let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
  option.title.text = `动态刷新demo,刷新秒数:${new Date().getSeconds()}`;
  let data0 = option.series[0].data;
  let data1 = option.series[1].data;
  data0.shift();
  data0.push(Math.round(Math.random() * 1000));
  data1.shift();
  data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

  option.xAxis[0].data.shift();
  option.xAxis[0].data.push(axisData);
  option.xAxis[1].data.shift();
  option.xAxis[1].data.push(count++);
  return option;
};

widgets

widgetClass

• constructor(params)
• isLegal()
• detectValidate()
• getWidgetOptions()
• completeParams()
• beforeStart()
• afterStart()
• beforeRender()
• afterRender()
• beforeEnd()
• afterEnd()

architect

• WidgetApp
• SketchApp

初始化：

import { WidgetApp, SketchApp } from 'amos-viz/lib/widgets/architect';

WidgetApp.use([], 'basic/g1');
WidgetApp.use([], 'basic/g2');
WidgetApp.use([], 'basic/g3');
WidgetApp.use([], 'basic/g4');

WidgetApp.custom((plugins, wa) => {
  ...
});

// sketch
SketchApp.use({
  a: ACom,
  b: BCom,
  ...
});

使用时：

import { WidgetApp, SketchApp } from 'amos-viz/lib/widgets/architect';

WidgetApp.plugins; // Map

SketchApp.sketches; // {}

createWidgets

const params = {
    // 图形 key
  key: 'basic-line',
  category: category.deviceWidgets,
  // label
  label: '直线',
  name: '直线',
  nodeType: 'line',
  // class name
  displayName: 'BasicLine',
  descr: {
    title: '直线',
    content: ['绘制直线', '元素之间的连线']
  },
  // 缩略图 (图形列表中展示的图标)
  thumb: thumbMapping.deviceWidgets.zhixian,
  // 效果图 (画布上展示的图形)
  sketch: '',
  style: {
    width: 300,
    height: 50
  },
  template: templates.svg,
  // html or svg component tag
  tag: 'line',
  // 组件设置
  compomentSetting: {
    // 显示设置
    display: [
      { key: 'direction', label: '方向', type: 'radio',data: { radios: lineDirection } }
    ],
    assembledForm: [
      { key: 'svgDisplay', component: 'svgDisplay', descr: 'svg类型通用显示form' }
    ]
  },
  // 数据设置
  dataSetting: {
    // form feilds
    feilds: [

    ],
    // 已组装好的界面
    assembledForm: [

    ]
  }
};

const all = createWidgets([
  params
]);

validate widgets

注意，显示配置信息、数据绑定信息，禁止存放在初始化控件配置信息中，即 dataConfig 和 visualParams 键禁止在系统初始化中出现。同时数据绑定或者显示设置form中需要的初始化数据，禁止设置在 dataConfig 和 visualParams 中。

// 默认一个widget 配置项，必须包含的key值（如果param中缺乏该系列键，则校验不合格）如下：

const schemaKey = [
  'key',
  'category',
  'label',
  'name',
  'nodeType',
  'displayName',
  'descr',
  'thumb',
  'sketch',
  'template',
  'tag',
  'compomentSetting',
  'dataSetting'
];

// 排除校验的key值（如下键为非必须键，部分widget可以进行设置）如下：
const exceptKey = [
  'style',
  'widgetApi',
  'devicesApi',
  'chartOption',
  'tables',
  'extraConfig' // 除以上键，还仍需设置额外自定义键，则统一放在 `extraConfig` 键下
];

registerSketch

• registerSketch(key: String, Component: React.Component)
• registerSketchAll(obj: { key: String, Component: React.Component })
• getSketchByKey(key: string, Unknown?: React.Component)

commonRegister

/**
 * 内部 类型
 */
const innerModularType = {
  sketchComponent: 'sketchComponent',
  dynamicForm: 'dynamicForm',
  assembledForm: 'assembledForm',
  extendChart: 'extendChart',
  bizForm: 'bizForm'
};

/**
 * 卸载模块
 *
 * @param {any} key
 * @returns {boolean} 卸载结果
 */
uninstallModulars(key)

/**
 * 卸载所有模块
 */
uninstallAll()
/**
 * 获取所有的modular
 */
getAllModulars()

/**
 * 获取指定 type 类型的所有 modulars
 * @param {string} type
 */
getModularsByType(type)

/**
 * 获取指定 type 类型的所有 modulars， 返回 object
 * @param {string} type
 */
getObjModularsByType(type)

/**
 * 转化为 object
 * @param {Map} mapInstance
 */
convert2object(mapInstance)

/**
 * 返回指定模块类型及别名是否已被注册。
 * @param {string} modularType
 * @param {string} modularAlias
 */
hasModularClass(modularType, modularAlias)

/**
 * 注册指定模块类型及别名对应的类。
 * @param {string} modularType
 * @param {string} modularAlias
 * @param {class} modularClass
 */
registerModularClass(modularType, modularAlias, modularClass)

/**
 * 返回指定模块类型及别名对应的类。
 * @param {string} modularType
 * @param {string} modularAlias
 * @param {Component} defaultModular
 */
getModularClass(modularType, modularAlias, defaultModular)

/**
 * 注册具体的 sketch component
 * @param {string} modularType
 * @param {string} modularAlias
 */
registerSketchComponent(modularAlias, modularClass)

/**
 * 注册动态表单类，用于扩展原有的动态 form
 * @param {string} modularType
 * @param {string} modularAlias
 */
registerDynamicForm(modularAlias, modularClass)

/**
 * 注册适配好的 form，用于实现固定form
 * @param {string} modularType
 * @param {string} modularAlias
 */
registerAssembledForm(modularAlias, modularClass)

/**
 * 注册扩展的 chart，用于扩展已有的chart
 * @param {string} modularType
 * @param {string} modularAlias
 */
registerExtendChart(modularAlias, modularClass)

/**
 * 注册业务form，用于填充业务 form
 * @param {string} modularType
 * @param {string} modularAlias
 */
registerBizForm(modularAlias, modularClass)

// 注册 temp 组件
commonRegister.registerBizForm('temp', Component);

// 使用 temp 组件
const Temp = commonRegister.getModularClass(innerModularType.bizForm , 'temp');

filetools

exportFile

/**
 * 导出blob
 *
 * @param {object} content
 * @param {string} filename
 * @param {string} extname
 */
exportBlob(content, filename = '', extname = defaultExtName)

/**
 * 下载数据
 *
 * @param {string} content
 * @param {string} filename
 * @param {string} extname
 */
downloadContent(content, filename = '', extname = defaultExtName)

importFile

/**
 * 导入 blob
 * @param {any} selectedFile
 * @param {object} param
 */
importBlob(selectedFile, { accept = 'dat' , success = noop, error = noop })

/**
 * 导入 text
 * @param {any} selectedFile
 * @param {object} param
 */
importText(selectedFile, { accept = 'dat' , success = noop, error = noop })

toZipFile

使用到了 JSZip 插件，更多文档与demo移步 JSZip 文档

import { toZipFile } from 'amos-viz/lib/filetools';
// or
// import { toZipFile } from 'amos-viz/lib/filetools/toZipFile';

/**
 * 将文件生成为 zip
 * @param {array} fileList
 * @param {string} toName
 */
toZipFile(fileList, toName)

const fileList = [
  { filename: 'hello.txt', content: 'balabalabala...' },
  { filename: 'index.js', content: 'var age = 22' },
  { filename: 'aa/bb.txt', content: 'balabalabala....' }
];

const toName = 'demo.zip'

App

Application

自动组装 router-component，依赖于 react-router v4 react-router-dom

import Application from 'amos-viz/lib/app/Application';

const app = new Application({
  ...
});

app.start({
  routes: [
    {
      path: '*',
      component: Demo,
    },
  ],
  container: 'app' // id
});

createApp

import createApp from 'amos-viz/lib/app/createApp';

createApp({
  routes: [
    {
      path: '*',
      component: Demo,
    },
  ],
  container: 'app' // id
});

SingleApp

import SingleApp from 'amos-viz/lib/app/SingleApp';

// 直接启动
new SingleApp().start({ spa: MyComponent, container: '__demo__' });

// 延后渲染
const SPA = new SingleApp({ container: '__demo__' });
SPA.start({ spa: YourComponent });

createSPA

import createSPA from 'amos-viz/lib/app/createSPA';

createSPA({
  spa： MyDemo,
  container: 'app'
});

docsite

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>doc</title>
  <script src="./node_modules/amos-viz/docsite/amosvizdoc.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    console.log(AmosVizDoc);
    var createUI = window.AmosVizDoc;
    createUI();
  </script>
</body>
</html>

注意事项

amos-viz 库中，集中处理所有的可视化工程，因此，不建议直接导出默认模块。具体使用那些模块，直接定位至相应模块即可。如：

import { BarChart } from 'amos-viz/lib/echarts';
import DragDesign from 'amos-viz/lib/dragdesign';
import AdaptiveBoard from 'amos-viz/lib/board/AdaptiveBoard';

umd 模块支持

since v1.4.0 版本之后，新增 echarts umd 模式支持，内部所有的 echarts 模块，均需要采用该方式单独引入。

• umd/viz-echarts.umd.js 全局暴露： VizEcharts = {...}

const = {
  BarChart,
  BarOptions,
  HistogramOptions,
  LineChart,
  LineOptions,
  LiquidfillOptions,
  MapChart,
  MapOptions,
  PieChart,
  PieOptions,
  Pipeline,
  RadarOptions,
  ReactEcharts,
  WcloudOptions,
  chartType,
  chartUtils,
  customColors,
  defaultColors,
  echarts,

  // connectCharts 模块
  connectCharts,
  DATA_TYPES,
  emptyProcessor,
  chartDefaultsConfig,
  operateType

} = VizEcharts;

建议直接使用 externals 的方式，使用 umd 模块。

自行加入 react、react-dom、prop-types

const externals = {
  'amos-viz/lib/echarts/umd': 'VizEcharts'
};

组件内部使用：

import {
  BarChart,
  BarOptions,
  HistogramOptions,
  LineChart,
  LineOptions,
  LiquidfillOptions,
  MapChart,
  MapOptions,
  PieChart,
  PieOptions,
  Pipeline,
  RadarOptions,
  ReactEcharts,
  WcloudOptions,
  chartType,
  chartUtils,
  customColors,
  defaultColors,
  echarts
} from 'amos-viz/lib/echarts/umd';

注意，since v1.5.0 之后版本，umd 支持独立引入外部的 echarts、echarts map、echarts-liquidfill、echarts-wordcloud，其中，umd 目录下支持上述 3.8 版本的相关脚本。

<!-- 引入公共脚本 -->
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/prop-types/prop-types.js"></script>

<script src="./umd/echarts.min.js"></script>
<script src="./umd/echarts-liquidfill.min.js"></script>
<script src="./umd/echarts-wordcloud.min.js"></script>
<script src="./umd/viz-echarts.split.js"></script>

<!-- 使用 map 数据 -->
<script src="./umd/map/china.js"></script>

online demo

demo

changelog

• 2018-12-6 v1.0.21

  modify register class check.

• 2018-11-5 v1.0.20

  add editor add widget validate extraConfig key

• 2018-11-1 v1.0.19

  add toZipFile

• 2018-10-23 v1.0.18

  add widgets core, plugin core

Lecense

MIT