This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathcontainer.js
More file actions
106 lines (106 loc) · 7.17 KB
/
container.js
File metadata and controls
106 lines (106 loc) · 7.17 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Sample for containers
*/
var React = require("react");
var ej2_react_lineargauge_1 = require("@syncfusion/ej2-react-lineargauge");
var property_pane_1 = require("../common/property-pane");
var sample_base_1 = require("../common/sample-base");
var ej2_react_dropdowns_1 = require("@syncfusion/ej2-react-dropdowns");
var Container = (function (_super) {
__extends(Container, _super);
function Container() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.droplist = [
{ value: 'Vertical' },
{ value: 'Horizontal' }
];
_this.modelist = [
{ value: 'Normal' },
{ value: 'RoundedRectangle' },
{ value: 'Thermometer' }
];
return _this;
}
Container.prototype.orienatationChange = function () {
this.gaugeInstance.orientation = this.orientationElement.value;
this.gaugeInstance.refresh();
};
Container.prototype.containerChange = function () {
this.gaugeInstance.container.type = this.containerElement.value;
this.gaugeInstance.refresh();
};
Container.prototype.load = function (args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
};
Container.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: 'control-pane' },
React.createElement("div", { className: 'control-section row' },
React.createElement("div", { className: 'col-lg-8' },
React.createElement(ej2_react_lineargauge_1.LinearGaugeComponent, { load: this.load.bind(this), id: 'gauge', ref: function (gauge) { return _this.gaugeInstance = gauge; }, title: 'Temperature Measure', container: { width: 13, type: 'Thermometer', roundedCornerRadius: 5 } },
React.createElement(ej2_react_lineargauge_1.AxesDirective, null,
React.createElement(ej2_react_lineargauge_1.AxisDirective, { minimum: 0, maximum: 180, line: { width: 0 }, minorTicks: { color: '#9e9e9e' }, majorTicks: { interval: 20, color: '#9e9e9e' } },
React.createElement(ej2_react_lineargauge_1.PointersDirective, null,
React.createElement(ej2_react_lineargauge_1.PointerDirective, { value: 90, height: 13, width: 13, type: 'Bar', roundedCornerRadius: 5, color: '#f02828' }))),
React.createElement(ej2_react_lineargauge_1.AxisDirective, { minimum: 0, maximum: 180, opposedPosition: true, line: { width: 0 }, majorTicks: { interval: 20 } },
React.createElement(ej2_react_lineargauge_1.PointersDirective, null,
React.createElement(ej2_react_lineargauge_1.PointerDirective, { width: 0 })))))),
React.createElement("div", { className: 'col-lg-4 property-section' },
React.createElement(property_pane_1.PropertyPane, { title: 'Properties' },
React.createElement("table", { id: 'property', title: 'Properties', className: 'property-panel-table', style: { width: '100%' } },
React.createElement("tr", { style: { height: '50px' } },
React.createElement("td", null,
React.createElement("div", null, "Orientation")),
React.createElement("td", null,
React.createElement("div", null,
React.createElement(ej2_react_dropdowns_1.DropDownListComponent, { width: 120, id: "orientationMode", style: { "width": "90%" }, change: this.orienatationChange.bind(this), className: "form-control", ref: function (d) { return _this.orientationElement = d; }, dataSource: this.droplist, fields: { text: 'value', value: 'value' }, value: "Vertical" })))),
React.createElement("tr", { style: { height: '50px' } },
React.createElement("td", null,
React.createElement("div", null, "Container Type")),
React.createElement("td", null,
React.createElement("div", { style: { paddingBottom: '20px', width: '90%' } },
React.createElement(ej2_react_dropdowns_1.DropDownListComponent, { width: 120, id: "containerMode", style: { "width": "90%" }, change: this.containerChange.bind(this), className: "form-control", ref: function (d) { return _this.containerElement = d; }, dataSource: this.modelist, fields: { text: 'value', value: 'value' }, value: "Normal" })))))))),
React.createElement("div", { id: "action-description" },
React.createElement("p", null,
"This sample demonstrates the type of containers used in linear gauge. Orientation and container type of linear gauge can be changed by using ",
React.createElement("code", null, "Orientation"),
" and ",
React.createElement("code", null, "Container Type"),
" options.")),
React.createElement("div", { id: "description" },
React.createElement("p", null,
"In this example, you can see how to render and configure the ranges in linear gauge. You can use ",
React.createElement("code", null, "start"),
",",
React.createElement("code", null, "end"),
", ",
React.createElement("code", null, "startWidth"),
",",
React.createElement("code", null, "endWidth"),
" and ",
React.createElement("code", null, "position"),
" properties to customize the ranges. You can also specify various colors for the ranges in the axis. If you enable the ",
React.createElement("code", null, "useRangeColor"),
" property, then the axis labels will be displayed based on its range color."),
React.createElement("p", null,
"More information about linear gauge can be found in this ",
React.createElement("a", { target: "_blank", href: "http://ej2.syncfusion.com/documentation" }, "documentation section"),
"."))));
};
return Container;
}(sample_base_1.SampleBase));
exports.Container = Container;