Sidebar-ChartComponent.js
3.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function () {
  Sidebar.prototype.addThingsKitChartComponentsPalette = function () {
    this.addChartComponentsPalette()
  }
  const { COMPONENT_KEY, CATEGORY } = window.CellAttributeKeyEnum
  const dt = 'chartComponents'
  Sidebar.prototype.addChartComponentsPalette = function () {
    function createUserObject(attribute) {
      attribute = Object.assign({ [COMPONENT_KEY]: '', [CATEGORY]: '' }, attribute || {})
      var xmlElement = mxUtils.createXmlDocument().createElement('UserObject');
      Object.keys(attribute).forEach(key => {
        xmlElement.setAttribute(key, attribute[key]);
      })
      return xmlElement
    }
    this.setCurrentSearchEntryLibrary(dt);
    this.addPaletteFunctions(dt, mxResources.get(dt), true,
      [
        // 折线图
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/lineChartComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 300, 300, createUserObject({ [COMPONENT_KEY]: 'Line', [CATEGORY]: 'CHART' }), '折线图', true, "text textbox textarea label"),
        // 仪表盘
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/instrumentChartComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 300, 300, createUserObject({ [COMPONENT_KEY]: 'Instrument', [CATEGORY]: 'CHART' }), '仪表盘', true, "text textbox textarea label"),
        // 柱状图
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/histogramChartComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 400, 400, createUserObject({ [COMPONENT_KEY]: 'Histogram', [CATEGORY]: 'CHART' }), '柱状图', true, "text textbox textarea label"),
        // 流量计(圆形)
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/circularFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 200, 250, createUserObject({ [COMPONENT_KEY]: 'CircularFlowMeter', [CATEGORY]: 'CHART' }), '流量计(圆形)', true, "circular flow meter"),
        // 流量计(方形)
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/rectFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 200, 250, createUserObject({ [COMPONENT_KEY]: 'RectFlowMeter', [CATEGORY]: 'CHART' }), '流量计(正方形)', true, "rect flow meter"),
        // 温度计
        this.createVertexTemplateEntry("shape=mxgraph.thingskit/thermometerComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 300, 400, createUserObject({ [COMPONENT_KEY]: 'Thermometer', [CATEGORY]: 'CHART' }), '温度计', true, "thermometer"),
      ]
    );
  };
})();