React-samples/src/circular-gauge/customization-service.js at master · SyncfusionExamples/React-samples · GitHub

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
"use strict";
/**
 * Dynamic source
 */
Object.defineProperty(exports, "__esModule", { value: true });
var ej2_circulargauge_1 = require("@syncfusion/ej2-circulargauge");
var ej2_circulargauge_2 = require("@syncfusion/ej2-circulargauge");
ej2_circulargauge_1.CircularGauge.Inject(ej2_circulargauge_2.Annotations);
var DynamicDataSerive = (function () {
    function DynamicDataSerive() {
    }
    DynamicDataSerive.prototype.GetSubGauge1 = function () {
        var gauge1 = new ej2_circulargauge_1.CircularGauge({
            axes: [{
                    annotations: [{
                            content: '<div style="color:#666666;font-size:35px;">50.5GB</div>',
                            angle: 180, radius: '0%', zIndex: '1'
                        }, {
                            content: '<div style="color:#757575;font-size:15px;">Used</div>',
                            angle: 180, radius: '25%', zIndex: '1',
                            textStyle: {
                                fontFamily: 'Roboto',
                                color: '#9E9E9E',
                                fontStyle: 'Bold',
                                fontWeight: 'Regular',
                                size: '14px'
                            }
                        }],
                    lineStyle: { width: 0 },
                    startAngle: 180, endAngle: 180,
                    radius: '80%',
                    labelStyle: { font: { size: '0px' } },
                    majorTicks: { width: 0 },
                    minorTicks: { height: 0 },
                    minimum: 0, maximum: 100,
                    ranges: [{
                            start: 0, end: 100,
                            radius: '80%', startWidth: 30,
                            endWidth: 30, color: '#E0E0E0'
                        }],
                    pointers: [{
                            type: 'RangeBar',
                            value: 50.5, radius: '80%',
                            color: '#FF2680', animation: { duration: 0 },
                            pointerWidth: 30
                        }]
                }]
        });
        var gauge2 = new ej2_circulargauge_1.CircularGauge({
            centerY: '70%',
            axes: [{
                    annotations: [{
                            content: '<div style="color:#666666;font-size:35px;">1800</div>',
                            angle: 0,
                            radius: '110%', zIndex: '1'
                        }],
                    lineStyle: { width: 0 },
                    startAngle: 300, endAngle: 60,
                    radius: '80%',
                    labelStyle: { font: { size: '0px' } },
                    majorTicks: { width: 0 },
                    minorTicks: { height: 0 },
                    minimum: 999, maximum: 2000,
                    ranges: [{
                            start: 1000, end: 2000,
                            radius: '90%',
                            startWidth: 30, endWidth: 30,
                            color: '#E0E0E0'
                        }],
                    pointers: [{
                            type: 'RangeBar',
                            value: 1800, radius: '90%',
                            color: '#FFDD00', animation: { duration: 0 },
                            pointerWidth: 30
                        }, {
                            radius: '90%', value: 1800,
                            color: '#424242',
                            animation: { duration: 0 },
                            pointerWidth: 9,
                            cap: { radius: 10, color: '#424242', border: { width: 0 } }
                        }]
                }]
        });
        return { 'gauge1': gauge1, 'gauge2': gauge2 };
    };
    return DynamicDataSerive;
}());
exports.DynamicDataSerive = DynamicDataSerive;