|
| 1 | +/* eslint no-nested-ternary: off */ |
| 2 | +import $ from 'dom7'; |
| 3 | +import Utils from '../../utils/utils'; |
| 4 | +import Framework7Class from '../../utils/class'; |
| 5 | + |
| 6 | +class Gauge extends Framework7Class { |
| 7 | + constructor(app, params = {}) { |
| 8 | + // Extends with open/close Modal methods; |
| 9 | + super(app, params); |
| 10 | + |
| 11 | + const gauge = this; |
| 12 | + |
| 13 | + const defaults = Utils.extend({}, app.params.gauge); |
| 14 | + |
| 15 | + // Extend defaults with modules params |
| 16 | + gauge.useModulesParams(defaults); |
| 17 | + |
| 18 | + gauge.params = Utils.extend(defaults, params); |
| 19 | + |
| 20 | + const { el } = gauge.params; |
| 21 | + if (!el) return gauge; |
| 22 | + |
| 23 | + const $el = $(el); |
| 24 | + if ($el.length === 0) return gauge; |
| 25 | + |
| 26 | + |
| 27 | + Utils.extend(gauge, { |
| 28 | + app, |
| 29 | + $el, |
| 30 | + el: $el && $el[0], |
| 31 | + }); |
| 32 | + |
| 33 | + $el[0].f7Gauge = gauge; |
| 34 | + |
| 35 | + // Install Modules |
| 36 | + gauge.useModules(); |
| 37 | + |
| 38 | + gauge.init(); |
| 39 | + |
| 40 | + return gauge; |
| 41 | + } |
| 42 | + calcRadius() { |
| 43 | + const gauge = this; |
| 44 | + const { size, borderWidth } = gauge.params; |
| 45 | + return (size / 2) - (borderWidth / 2); |
| 46 | + } |
| 47 | + calcBorderLength() { |
| 48 | + const gauge = this; |
| 49 | + const radius = gauge.calcRadius(); |
| 50 | + return 2 * Math.PI * radius; |
| 51 | + } |
| 52 | + render() { |
| 53 | + const gauge = this; |
| 54 | + if (gauge.params.render) return gauge.params.render.call(gauge, gauge); |
| 55 | + |
| 56 | + const { |
| 57 | + type, |
| 58 | + value, |
| 59 | + size, |
| 60 | + bgColor, |
| 61 | + borderBgColor, |
| 62 | + borderColor, |
| 63 | + borderWidth, |
| 64 | + valueText, |
| 65 | + valueTextColor, |
| 66 | + valueFontSize, |
| 67 | + valueFontWeight, |
| 68 | + labelText, |
| 69 | + labelTextColor, |
| 70 | + labelFontSize, |
| 71 | + labelFontWeight, |
| 72 | + } = gauge.params; |
| 73 | + |
| 74 | + const semiCircle = type === 'semicircle'; |
| 75 | + const radius = gauge.calcRadius(); |
| 76 | + const length = gauge.calcBorderLength(); |
| 77 | + const progress = Math.max(Math.min(value, 1), 0); |
| 78 | + |
| 79 | + return ` |
| 80 | + <svg class="gauge-svg" width="${size}px" height="${semiCircle ? size / 2 : size}px" viewBox="0 0 ${size} ${semiCircle ? size / 2 : size}"> |
| 81 | + ${semiCircle ? ` |
| 82 | + <path |
| 83 | + class="gauge-back-semi" |
| 84 | + d="M${size - (borderWidth / 2)},${size / 2} a1,1 0 0,0 -${size - borderWidth},0" |
| 85 | + stroke="${borderBgColor}" |
| 86 | + stroke-width="${borderWidth}" |
| 87 | + fill="${bgColor || 'none'}" |
| 88 | + /> |
| 89 | + <path |
| 90 | + class="gauge-front-semi" |
| 91 | + d="M${size - (borderWidth / 2)},${size / 2} a1,1 0 0,0 -${size - borderWidth},0" |
| 92 | + stroke="${borderColor}" |
| 93 | + stroke-width="${borderWidth}" |
| 94 | + stroke-dasharray="${length / 2}" |
| 95 | + stroke-dashoffset="${(length / 2) * (progress - 1)}" |
| 96 | + fill="${borderBgColor ? 'none' : (bgColor || 'none')}" |
| 97 | + /> |
| 98 | + ` : ` |
| 99 | + ${borderBgColor ? ` |
| 100 | + <circle |
| 101 | + class="gauge-back-circle" |
| 102 | + stroke="${borderBgColor}" |
| 103 | + stroke-width="${borderWidth}" |
| 104 | + fill="${bgColor || 'none'}" |
| 105 | + cx="${size / 2}" |
| 106 | + cy="${size / 2}" |
| 107 | + r="${radius}" |
| 108 | + ></circle> |
| 109 | + ` : ''} |
| 110 | + <circle |
| 111 | + class="gauge-front-circle" |
| 112 | + transform="${`rotate(-90 ${size / 2} ${size / 2})`}" |
| 113 | + stroke="${borderColor}" |
| 114 | + stroke-width="${borderWidth}" |
| 115 | + stroke-dasharray="${length}" |
| 116 | + stroke-dashoffset="${length * (1 - progress)}" |
| 117 | + fill="${borderBgColor ? 'none' : bgColor || 'none'}" |
| 118 | + cx="${size / 2}" |
| 119 | + cy="${size / 2}" |
| 120 | + r="${radius}" |
| 121 | + ></circle> |
| 122 | + `} |
| 123 | + ${valueText ? ` |
| 124 | + <text |
| 125 | + class="gauge-value-text" |
| 126 | + x="50%" |
| 127 | + y="${semiCircle ? '100%' : '50%'}" |
| 128 | + font-weight="${valueFontWeight}" |
| 129 | + font-size="${valueFontSize}" |
| 130 | + fill="${valueTextColor}" |
| 131 | + dy="${semiCircle ? (labelText ? -labelFontSize - 15 : -5) : 0}" |
| 132 | + text-anchor="middle" |
| 133 | + dominant-baseline="${!semiCircle && 'middle'}" |
| 134 | + >${valueText}</text> |
| 135 | + ` : ''} |
| 136 | + ${labelText ? ` |
| 137 | + <text |
| 138 | + class="gauge-label-text" |
| 139 | + x="50%" |
| 140 | + y="${semiCircle ? '100%' : '50%'}" |
| 141 | + font-weight="${labelFontWeight}" |
| 142 | + font-size="${labelFontSize}" |
| 143 | + fill="${labelTextColor}" |
| 144 | + dy="${semiCircle ? -5 : (valueText ? ((valueFontSize / 2) + 10) : 0)}" |
| 145 | + text-anchor="middle" |
| 146 | + dominant-baseline="${!semiCircle && 'middle'}" |
| 147 | + >${labelText}</text> |
| 148 | + ` : ''} |
| 149 | + </svg> |
| 150 | + `.trim(); |
| 151 | + } |
| 152 | + update(newParams = {}) { |
| 153 | + const gauge = this; |
| 154 | + const { params, $gaugeSvgEl } = gauge; |
| 155 | + |
| 156 | + Object.keys(newParams).forEach((param) => { |
| 157 | + if (typeof newParams[param] !== 'undefined') { |
| 158 | + params[param] = newParams[param]; |
| 159 | + } |
| 160 | + }); |
| 161 | + if ($gaugeSvgEl.length === 0) return gauge; |
| 162 | + |
| 163 | + const { |
| 164 | + value, |
| 165 | + size, |
| 166 | + bgColor, |
| 167 | + borderBgColor, |
| 168 | + borderColor, |
| 169 | + borderWidth, |
| 170 | + valueText, |
| 171 | + valueTextColor, |
| 172 | + valueFontSize, |
| 173 | + valueFontWeight, |
| 174 | + labelText, |
| 175 | + labelTextColor, |
| 176 | + labelFontSize, |
| 177 | + labelFontWeight, |
| 178 | + } = params; |
| 179 | + |
| 180 | + const length = gauge.calcBorderLength(); |
| 181 | + const progress = Math.max(Math.min(value, 1), 0); |
| 182 | + const radius = gauge.calcRadius(); |
| 183 | + const semiCircle = params.type === 'semicircle'; |
| 184 | + |
| 185 | + const svgAttrs = { |
| 186 | + width: `${size}px`, |
| 187 | + height: `${semiCircle ? size / 2 : size}px`, |
| 188 | + viewBox: `0 0 ${size} ${semiCircle ? size / 2 : size}`, |
| 189 | + }; |
| 190 | + Object.keys(svgAttrs).forEach((attr) => { |
| 191 | + $gaugeSvgEl.attr(attr, svgAttrs[attr]); |
| 192 | + }); |
| 193 | + if (semiCircle) { |
| 194 | + const backAttrs = { |
| 195 | + d: `M${size - (borderWidth / 2)},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`, |
| 196 | + stroke: borderBgColor, |
| 197 | + 'stroke-width': borderWidth, |
| 198 | + fill: bgColor || 'none', |
| 199 | + }; |
| 200 | + const frontAttrs = { |
| 201 | + d: `M${size - (borderWidth / 2)},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`, |
| 202 | + stroke: borderColor, |
| 203 | + 'stroke-width': borderWidth, |
| 204 | + 'stroke-dasharray': length / 2, |
| 205 | + 'stroke-dashoffset': (length / 2) * (progress - 1), |
| 206 | + fill: borderBgColor ? 'none' : (bgColor || 'none'), |
| 207 | + }; |
| 208 | + Object.keys(backAttrs).forEach((attr) => { |
| 209 | + $gaugeSvgEl.find('.gauge-back-semi').attr(attr, backAttrs[attr]); |
| 210 | + }); |
| 211 | + Object.keys(frontAttrs).forEach((attr) => { |
| 212 | + $gaugeSvgEl.find('.gauge-front-semi').attr(attr, frontAttrs[attr]); |
| 213 | + }); |
| 214 | + } else { |
| 215 | + const backAttrs = { |
| 216 | + stroke: borderBgColor, |
| 217 | + 'stroke-width': borderWidth, |
| 218 | + fill: bgColor || 'none', |
| 219 | + cx: size / 2, |
| 220 | + cy: size / 2, |
| 221 | + r: radius, |
| 222 | + }; |
| 223 | + const frontAttrs = { |
| 224 | + transform: `rotate(-90 ${size / 2} ${size / 2})`, |
| 225 | + stroke: borderColor, |
| 226 | + 'stroke-width': borderWidth, |
| 227 | + 'stroke-dasharray': length, |
| 228 | + 'stroke-dashoffset': length * (1 - progress), |
| 229 | + fill: borderBgColor ? 'none' : bgColor || 'none', |
| 230 | + cx: size / 2, |
| 231 | + cy: size / 2, |
| 232 | + r: radius, |
| 233 | + }; |
| 234 | + Object.keys(backAttrs).forEach((attr) => { |
| 235 | + $gaugeSvgEl.find('.gauge-back-circle').attr(attr, backAttrs[attr]); |
| 236 | + }); |
| 237 | + Object.keys(frontAttrs).forEach((attr) => { |
| 238 | + $gaugeSvgEl.find('.gauge-front-circle').attr(attr, frontAttrs[attr]); |
| 239 | + }); |
| 240 | + } |
| 241 | + if (valueText) { |
| 242 | + if (!$gaugeSvgEl.find('.gauge-value-text').length) { |
| 243 | + $gaugeSvgEl.append('<text class="gauge-value-text"></text>'); |
| 244 | + } |
| 245 | + const textAttrs = { |
| 246 | + x: '50%', |
| 247 | + y: semiCircle ? '100%' : '50%', |
| 248 | + 'font-weight': valueFontWeight, |
| 249 | + 'font-size': valueFontSize, |
| 250 | + fill: valueTextColor, |
| 251 | + dy: semiCircle ? (labelText ? -labelFontSize - 15 : -5) : 0, |
| 252 | + 'text-anchor': 'middle', |
| 253 | + 'dominant-baseline': !semiCircle && 'middle', |
| 254 | + }; |
| 255 | + Object.keys(textAttrs).forEach((attr) => { |
| 256 | + $gaugeSvgEl.find('.gauge-value-text').attr(attr, textAttrs[attr]); |
| 257 | + }); |
| 258 | + $gaugeSvgEl.find('.gauge-value-text').text(valueText); |
| 259 | + } else { |
| 260 | + $gaugeSvgEl.find('.gauge-value-text').remove(); |
| 261 | + } |
| 262 | + if (labelText) { |
| 263 | + if (!$gaugeSvgEl.find('.gauge-label-text').length) { |
| 264 | + $gaugeSvgEl.append('<text class="gauge-label-text"></text>'); |
| 265 | + } |
| 266 | + const labelAttrs = { |
| 267 | + x: '50%', |
| 268 | + y: semiCircle ? '100%' : '50%', |
| 269 | + 'font-weight': labelFontWeight, |
| 270 | + 'font-size': labelFontSize, |
| 271 | + fill: labelTextColor, |
| 272 | + dy: semiCircle ? -5 : (valueText ? ((valueFontSize / 2) + 10) : 0), |
| 273 | + 'text-anchor': 'middle', |
| 274 | + 'dominant-baseline': !semiCircle && 'middle', |
| 275 | + }; |
| 276 | + Object.keys(labelAttrs).forEach((attr) => { |
| 277 | + $gaugeSvgEl.find('.gauge-label-text').attr(attr, labelAttrs[attr]); |
| 278 | + }); |
| 279 | + $gaugeSvgEl.find('.gauge-label-text').text(labelText); |
| 280 | + } else { |
| 281 | + $gaugeSvgEl.find('.gauge-label-text').remove(); |
| 282 | + } |
| 283 | + return gauge; |
| 284 | + } |
| 285 | + init() { |
| 286 | + const gauge = this; |
| 287 | + const $gaugeSvgEl = $(gauge.render()).eq(0); |
| 288 | + $gaugeSvgEl.f7Gauge = gauge; |
| 289 | + Utils.extend(gauge, { |
| 290 | + $gaugeSvgEl, |
| 291 | + gaugeSvgEl: $gaugeSvgEl && $gaugeSvgEl[0], |
| 292 | + }); |
| 293 | + gauge.$el.append($gaugeSvgEl); |
| 294 | + return gauge; |
| 295 | + } |
| 296 | + destroy() { |
| 297 | + const gauge = this; |
| 298 | + if (!gauge.$el || gauge.destroyed) return; |
| 299 | + gauge.$el.trigger('gauge:beforedestroy', gauge); |
| 300 | + gauge.emit('local::beforeDestroy gaugeBeforeDestroy', gauge); |
| 301 | + gauge.$gaugeSvgEl.remove(); |
| 302 | + delete gauge.$el[0].f7Gauge; |
| 303 | + Utils.deleteProps(gauge); |
| 304 | + gauge.destroyed = true; |
| 305 | + } |
| 306 | +} |
| 307 | +export default Gauge; |
0 commit comments