Gauge React Component

Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.

Gauge Components

There are following components included:

• **Gauge** / **F7Gauge**

Gauge Properties

Examples

1. export default class extends React.Component {
2. constructor() {
3. super();

5. this.state = {
6. gaugeValue: 0.5,
7. };
8. }

10. render() {
11. return (
12. <Page>
13. <Navbar title="Gauge"></Navbar>
14. <Block strong>
15. <p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
16. </Block>
17. <Block strong className="text-align-center">
18. <Gauge
19. type="circle"
20. value={this.state.gaugeValue}
21. size={250}
22. borderColor="#2196f3"
23. borderWidth={10}
24. valueText={`${this.state.gaugeValue * 100}%`}
25. valueFontSize={41}
26. valueTextColor="#2196f3"
27. labelText="amount of something"
28. />
29. <Segmented tag="p" raised>
30. <Button onClick={() => this.setState({ gaugeValue: 0 })}>0%</Button>
31. <Button onClick={() => this.setState({ gaugeValue: 0.25 })}>25%</Button>
32. <Button onClick={() => this.setState({ gaugeValue: 0.5 })}>50%</Button>
33. <Button onClick={() => this.setState({ gaugeValue: 0.75 })}>75%</Button>
34. <Button onClick={() => this.setState({ gaugeValue: 1 })}>100%</Button>
35. </Segmented>
36. </Block>

38. <BlockTitle>Circle Gauges</BlockTitle>
39. <Block strong>
40. <Row>
41. <Col className="text-align-center">
42. <Gauge
43. type="circle"
44. value={0.44}
45. valueText="44%"
46. valueTextColor="#ff9800"
47. borderColor="#ff9800"
48. />
49. </Col>
50. <Col className="text-align-center">
51. <Gauge
52. type="circle"
53. value={0.12}
54. valueText="$120"
55. valueTextColor="#4caf50"
56. borderColor="#4caf50"
57. labelText="of $1000 budget"
58. labelTextColor="#f44336"
59. labelFontWeight={700}
60. />
61. </Col>
62. </Row>
63. </Block>

65. <BlockTitle>Semicircle Gauges</BlockTitle>
66. <Block strong>
67. <Row>
68. <Col className="text-align-center">
69. <Gauge
70. type="semicircle"
71. value={0.3}
72. valueText="30%"
73. valueTextColor="#f44336"
74. borderColor="#f44336"
75. />
76. </Col>
77. <Col className="text-align-center">
78. <Gauge
79. type="semicircle"
80. value={0.5}
81. valueText="30kg"
82. valueTextColor="#e91e63"
83. borderColor="#e91e63"
84. labelText="of 60kg total"
85. labelTextColor="#333"
86. />
87. </Col>
88. </Row>
89. </Block>

91. <BlockTitle>Customization</BlockTitle>
92. <Block strong>
93. <Row>
94. <Col className="text-align-center">
95. <Gauge
96. type="circle"
97. value={0.35}
98. valueText="35%"
99. valueTextColor="#4caf50"
100. valueFontSize={51}
101. valueFontWeight={700}
102. borderWidth={20}
103. borderColor="#4caf50"
104. borderBgColor="#ffeb3b"
105. bgColor="#ffeb3b"
106. />
107. </Col>
108. <Col className="text-align-center">
109. <Gauge
110. type="circle"
111. value={0.67}
112. valueText="$670"
113. valueTextColor="#000"
114. borderColor="#ff9800"
115. labelText="of $1000 spent"
116. labelTextColor="#4caf50"
117. labelFontWeight={800}
118. labelFontSize={12}
119. borderWidth={30}
120. />
121. </Col>
122. </Row>
123. <br />
124. <Row>
125. <Col className="text-align-center">
126. <Gauge
127. type="semicircle"
128. value={0.5}
129. valueText="50%"
130. valueTextColor="#ffeb3b"
131. valueFontSize={41}
132. valueFontWeight={700}
133. borderWidth={10}
134. borderColor="#ffeb3b"
135. borderBgColor="transparent"
136. />
137. </Col>
138. <Col className="text-align-center">
139. <Gauge
140. type="semicircle"
141. value={0.77}
142. borderColor="#ff9800"
143. labelText="$770 spent so far"
144. labelTextColor="#ff9800"
145. labelFontWeight={800}
146. labelFontSize={12}
147. borderWidth={10}
148. />
149. </Col>
150. </Row>
151. </Block>
152. </Page>
153. )
154. }
155. }