1 | define([ |
---|
2 | "dojo/_base/lang", |
---|
3 | "dojo/_base/declare", |
---|
4 | "dojo/_base/Color", |
---|
5 | "../utils", |
---|
6 | "../../CircularGauge", |
---|
7 | "../../LinearScaler", |
---|
8 | "../../CircularScale", |
---|
9 | "../../CircularValueIndicator", |
---|
10 | "../../CircularRangeIndicator", |
---|
11 | "../DefaultPropertiesMixin" |
---|
12 | ], |
---|
13 | function(lang, declare, Color, utils, CircularGauge, LinearScaler, CircularScale, CircularValueIndicator, CircularRangeIndicator, DefaultPropertiesMixin){ |
---|
14 | return declare("dojox.dgauges.components.grey.SemiCircularLinearGauge", [CircularGauge, DefaultPropertiesMixin], { |
---|
15 | // summary: |
---|
16 | // A semi circular gauge widget. |
---|
17 | |
---|
18 | // borderColor: Object|Array|int |
---|
19 | // The border color. Default is "#9498A1". |
---|
20 | borderColor: [148,152,161], |
---|
21 | // fillColor: Object|Array|int |
---|
22 | // The background color. Default is "#9498A1". |
---|
23 | fillColor: [148,152,161], |
---|
24 | // indicatorColor: Object|Array|int |
---|
25 | // The indicator fill color. Default is "#3F3F3F". |
---|
26 | indicatorColor: [63,63,63], |
---|
27 | constructor: function(args, node){ |
---|
28 | var scaler = new LinearScaler({ |
---|
29 | majorTickInterval: 25, |
---|
30 | minorTickInterval: 5 |
---|
31 | }); |
---|
32 | this.addElement("background", lang.hitch(this, this.drawBackground)); |
---|
33 | var scale = new CircularScale(); |
---|
34 | scale.set("scaler", scaler); |
---|
35 | scale.set("originX", 118.80925); |
---|
36 | scale.set("originY", 172.98112); |
---|
37 | scale.set("radius", 160.62904); |
---|
38 | scale.set("startAngle", -127.30061); |
---|
39 | scale.set("endAngle", -53); |
---|
40 | scale.set("orientation", "clockwise"); |
---|
41 | scale.set("labelGap", 2); |
---|
42 | scale.set("font", { |
---|
43 | family: "Helvetica", |
---|
44 | weight: "bold", |
---|
45 | size: "8pt" |
---|
46 | }); |
---|
47 | this.addElement("scale", scale); |
---|
48 | var indicator = new CircularValueIndicator(); |
---|
49 | indicator.set("interactionArea", "gauge"); |
---|
50 | indicator.set("value", scaler.minimum); |
---|
51 | indicator.set("indicatorShapeFunc", lang.hitch(this, function(group, indicator){ |
---|
52 | |
---|
53 | var l = indicator.scale.radius - 2; |
---|
54 | group.createPath().moveTo(0, 0).lineTo(0, -5).lineTo(l, 0).lineTo(0, 0).closePath().setFill(this.indicatorColor); |
---|
55 | var lighterColor = utils.brightness(new Color(this.indicatorColor), 70); |
---|
56 | group.createPath().moveTo(0, 0).lineTo(0, 5).lineTo(l, 0).lineTo(0, 0).closePath().setFill(lighterColor); |
---|
57 | return group; |
---|
58 | |
---|
59 | })); |
---|
60 | scale.addIndicator("indicator", indicator); |
---|
61 | this.addElement("foreground", lang.hitch(this, this.drawForeground)); |
---|
62 | }, |
---|
63 | |
---|
64 | drawBackground: function(g){ |
---|
65 | // summary: |
---|
66 | // Draws the background shape of the gauge. |
---|
67 | // g: dojox/gfx/Group |
---|
68 | // The group used to draw the background. |
---|
69 | // tags: |
---|
70 | // protected |
---|
71 | g.createPath({ |
---|
72 | path: "M116.4449 0.014 C82.013 -0 48.0666 7.3389 14.6499 22.4862 C6.1025 25.6372 0 33.8658 0 43.5028 C0 49.8823 2.677 55.6345 6.9637 59.713 L99.9834 180.9853 C99.9859 180.9893 99.9914 180.9917 99.9939 180.9957 C103.9488 187.329 110.9778 191.5406 118.9895 191.5406 C126.8965 191.5406 133.8563 187.4321 137.8385 181.2366 C137.8426 181.2301 137.8448 181.222 137.849 181.2157 L231.3295 59.4197 C235.4368 55.3611 237.9789 49.7288 237.9789 43.5028 C237.9789 33.7053 231.6713 25.3703 222.8998 22.3395 C186.9226 7.6322 151.4291 0.0282 116.4449 0.014 Z" |
---|
73 | }).setFill(this.borderColor); |
---|
74 | g.createPath({ |
---|
75 | path: "M116.224 1.014 C82.301 1.0002 48.8563 8.2306 15.9334 23.1541 C7.5123 26.2585 1.5 34.3655 1.5 43.8601 C1.5 50.1453 4.1374 55.8125 8.3608 59.8307 L100.0058 179.3108 C100.0083 179.3148 100.0137 179.3171 100.0162 179.3211 C103.9126 185.5608 110.8377 189.7102 118.731 189.7102 C126.5212 189.7102 133.3781 185.6624 137.3015 179.5584 C137.3055 179.552 137.3077 179.5441 137.3118 179.5378 L229.4108 59.5418 C233.4574 55.5432 235.962 49.9941 235.962 43.8601 C235.962 34.2074 229.7476 25.9956 221.1057 23.0096 C185.6602 8.5196 150.6912 1.028 116.224 1.014 Z" |
---|
76 | }).setFill({ |
---|
77 | type: "linear", |
---|
78 | x1: 1.5, |
---|
79 | y1: 1.01397, |
---|
80 | x2: 1.5, |
---|
81 | y2: 227.44943, |
---|
82 | colors: [ |
---|
83 | {offset: 0, color: this.fillColor}, |
---|
84 | {offset: 1, color: "white"} |
---|
85 | ] |
---|
86 | }); |
---|
87 | g.createPath({ |
---|
88 | path: "M117.848 3.0148 C83.3161 3.3066 42.2685 15.8301 16.4018 27.4452 C5.957 32.4174 9.5019 48.0401 18.3827 57.3539 C46.55 86.8947 80.5357 90.0379 118.4979 90.0379 C118.5432 90.0379 118.5868 90.0379 118.6321 90.0379 C118.7622 90.0379 118.8943 90.038 119.0241 90.0379 C119.0686 90.0379 119.1137 90.0379 119.1582 90.0379 C153.5091 90.0379 191.1062 86.8947 219.2735 57.3539 C228.1543 48.0401 231.6992 32.4174 221.2543 27.4452 C195.2041 15.7477 153.7583 3.1333 119.0757 3.0148 C119.0485 3.0148 119.0203 3.0148 118.9932 3.0148 C118.8843 3.0145 118.7717 3.0148 118.663 3.0148 C118.6351 3.0149 118.6084 3.0147 118.5805 3.0148 C118.3362 3.0156 118.093 3.0127 117.848 3.0148 Z" |
---|
89 | }).setFill({ |
---|
90 | type: "linear", |
---|
91 | x1: 10.0001, |
---|
92 | y1: 3.01406, |
---|
93 | x2: 10.0001, |
---|
94 | y2: 150, |
---|
95 | colors: [ |
---|
96 | {offset: 0, color: "white"}, |
---|
97 | {offset: 1, color: this.fillColor} |
---|
98 | ] |
---|
99 | }); |
---|
100 | }, |
---|
101 | |
---|
102 | drawForeground: function(g){ |
---|
103 | // summary: |
---|
104 | // Draws the foreground shape of the gauge. |
---|
105 | // g: dojox/gfx/Group |
---|
106 | // The group used to draw the foreground. |
---|
107 | // tags: |
---|
108 | // protected |
---|
109 | g.createEllipse({ |
---|
110 | cx: 118.80001, |
---|
111 | cy: 172.81399, |
---|
112 | rx: 9.25, |
---|
113 | ry: 9.25 |
---|
114 | }).setFill({ |
---|
115 | type: "radial", |
---|
116 | cx: 118.80003, |
---|
117 | cy: 169.11402, |
---|
118 | r: 18.5, |
---|
119 | colors: [ |
---|
120 | {offset: 0, color: [149,149,149]}, |
---|
121 | {offset: 0.5, color: "black"}, |
---|
122 | {offset: 1, color: "black"} |
---|
123 | ] |
---|
124 | }).setStroke({ |
---|
125 | color: "black", |
---|
126 | width: 0.1, |
---|
127 | style: "Solid", |
---|
128 | cap: "butt", |
---|
129 | join: 4.0 |
---|
130 | }); |
---|
131 | } |
---|
132 | |
---|
133 | }); |
---|
134 | } |
---|
135 | ); |
---|
136 | |
---|