Sidebar-ChartComponent.js
3.2 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' }), mxResources.get('lineChart'), 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' }), mxResources.get('dashboard'), 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' }), mxResources.get('histogram'), 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' }), mxResources.get('circularFlow'), 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' }), mxResources.get('squareFlow'), 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' }), mxResources.get('thermometer'), true, "thermometer"),
]
);
};
})();