Skip to main content

Шкала

Навігація

Шкала

Techno4 поставляється з компонентом Шкала. Він створює гарні, повністю адаптивні датчики SVG.

Макет застосунку Шкала

Оскільки застосунок Шкала генерується JavaScript, його макет HTML максимально простий:
<!-- Елемент Шкали -->
<div class="gauge"></div>

Методи застосунку Шкала

Тепер нам потрібно створити/ініціалізувати шкалу. Давайте розглянемо пов’язані методи роботи застосунку шкала:
app.gauge.create(parameters)- створити екземпляр шкали

● parameters - object. - Об'єкт з параметрами шкали

Метод повертає створений екземпляр шкали

app.gauge.destroy(el)- знищити екземпляр шкали

● el - HTMLElement or string (за допомогою селектора CSS) або об’єкта - Елемент шкали або екземпляр шкали для знищення.

app.gauge.get(el) - отримати екземпляр шкали за елементом HTML

● el - HTMLElement or string (за допомогою селектора CSS) - елемент шкали

Метод повертає екземпляр шкали

app.gauge.update(parameters) - оновити/повторно відобразити шкалу відповідно до переданих параметрів

● ● parameters - object - Об'єкт із параметрами шкали

Метод повертає значення шкали

Параметри шкали

Тепер давайте подивимося на список доступних параметрів, необхідних для створення шкали:
ПараметрЗа замовчуваннямОписТип
el
Елемент шкали. HTMLElement або рядок із CSS-селектором елемента шкала. Згенерований SVG буде вставлено в цей елемент
HTMLElement

string

type
circle
Тип шкали. Може бути коло або півколо
string
value
0
Вимірювальне значення/відсоток. Має бути число від 0 до 1
number
size
200
Розмір створеного зображення SVG (у пікселях)
number
bgColor
transparent
Колір фону шкали. Може бути будь-яким дійсним кольоровим рядком, напр. #ff00ff, rgb(0,0,255) тощо
string
borderBgColor
#eeeeee
Колір тла основної рамки/обведення
string
borderColor
#000000
Колір основної рамки/обведення
string
borderWidth
10
Ширина основної рамки/обведення у пікселях
string
valueText
null
Текст значення шкали (великий текст у центрі датчика)
string
valueTextColor
#000000
Колір тексту значення
string
valueFontSize
31
Розмір шрифту тексту значення
string
valueFontWeight
500
Товщина шрифту тексту значення
string
labelText
null
Додатковий текст етикетки
string
labelTextColor
#888888
Колір тексту етикетки
string
labelFontSize
14
Розмір шрифту тексту етикетки
string
labelFontWeight
400
Товщина шрифту тексту мітки
string
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var gauge = app.gauge.create({
  el: '.gauge',
  value: 33,
  valueText: '33%',
  on: {
    beforeDestroy: function () {
      console.log('Gauge will be destroyed')
    }
  }
})

Методи та властивості шкали

Отже, щоб створити шкалу, ми повинні викликати:
var gauge = app.gauge.create({ /* parameters */ })
Після цього ми маємо ініціалізований екземпляр шкали (наприклад, змінну gauge у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
gauge.app
Посилання на глобальний екземпляр застосунку
gauge.el
Елемент HTML Gauge
gauge.$el
Екземпляр Dom7 з елементом HTML шкали
gauge.svgEl
HTML-елемент SVG, створений шкалою
gauge.$svgEl
Екземпляр Dom7 із згенерованим елементом SVG HTML
gauge.params
Параметри шкали
Методи
Властивість Опис
gauge.update(parameters)
Оновити/повторно відтворити шкалу SVG відповідно до переданих параметрів. Він приймає об'єкт з тими ж параметрами, що необхідні для ініціалізації шкали. Ви можете передати лише параметри, які потрібно оновити, наприклад:
 
var gauge = app.gauge.create({
  value: 0.5,
  // ...
});

// and when we need to update rendered SVG based on new value:
gauge.update({
  value: 0.6,
});
МетодОпис
gauge.destroy()
Знищує екземпляр шкали
gauge.on(event, handler)
Додати обробник подій
gauge.once(event, handler)
Додати обробник подій, який буде видалено після запуску
gauge.off(event, handler)
Видалити обробник подій
gauge.off(event)
Видалити всі обробники для вказаної події
gauge.emit(event, ...args)
Запустити подію на примірнику

Події Шкали

Шкала запускатиме такі події DOM в елементі шкали і події в екземплярі застосунку та шкали:

Події DOM

ПодіяОб'єктОпис
gauge:beforedestroy
Gauge Element

<div class="gauge">

Подія буде запущена безпосередньо перед тим, як екземпляр шкали буде знищено

Події екземплярів застосунка та шкали

Екземпляр шкали запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом gauge.
ПодіяАргументОписОб'єкт
beforeDestroy
(gauge)
Подія буде запущена безпосередньо перед тим, як екземпляр шкали буде знищено. Як аргумент обробник події отримує екземпляр шкали
gauge
gaugeBeforeDestroy
(gauge)
Подія буде запущена безпосередньо перед тим, як екземпляр шкали буде знищено. Як аргумент обробник події отримує екземпляр шкали
app

Автоматична ініціалізація шкали

Якщо вам не потрібен Gauge API і ваша шкала знаходиться всередині сторінки та представлена у DOM у момент ініціалізації сторінки, тоді його можна автоматично ініціалізувати, просто додавши додатковий клас gauge-init і вказавши всі параметри за допомогою атрибутів data- :
<!-- Add gauge-init class, and specify parameters in data- attributes -->
<div
  class="gauge gauge-init my-gauge"
  data-type="circle"
  data-value="0.44"
  data-value-text="44%"
  data-value-text-color="#ff9800"
  data-border-color="#ff9800"
></div>
У цьому випадку, якщо вам потрібно отримати доступ до автоматично створеного екземпляра шкали, ви можете скористатися методом програми app.gauge.get:
var gauge = app.gauge.get('.my-gauge');

gauge.update({
  value: 0.9,
});

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Gauge</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong text-align-center">
        <div class="gauge demo-gauge"></div>
        <p class="segmented segmented-raised">
          <a href="#" class="button" data-value="0">0%</a>
          <a href="#" class="button" data-value="25">25%</a>
          <a href="#" class="button" data-value="50">50%</a>
          <a href="#" class="button" data-value="75">75%</a>
          <a href="#" class="button" data-value="100">100%</a>
        </p>
      </div>
      <div class="block-title">Circle Gauges</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="circle"
              data-value="0.44"
              data-value-text="44%"
              data-value-text-color="#ff9800"
              data-border-color="#ff9800"
            ></div>
          </div>
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="circle"
              data-value="0.12"
              data-value-text="$120"
              data-value-text-color="#4caf50"
              data-border-color="#4caf50"
              data-label-text="of $1000 budget"
              data-label-text-color="#f44336"
              data-label-font-weight="700"
            ></div>
          </div>
        </div>
      </div>
      <div class="block-title">Semicircle Gauges</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="semicircle"
              data-value="0.3"
              data-value-text="30%"
              data-value-text-color="#f44336"
            ></div>
          </div>
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="semicircle"
              data-value="0.5"
              data-value-text="30kg"
              data-value-text-color="#e91e63"
              data-border-color="#e91e63"
              data-label-text="of 60kg total"
            ></div>
          </div>
        </div>
      </div>
      <div class="block-title">Customization</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="circle"
              data-value="0.35"
              data-value-text="35%"
              data-value-text-color="#4caf50"
              data-value-font-size="51"
              data-value-font-weight="700"
              data-border-width="20"
              data-border-color="#4caf50"
              data-border-bg-color="#ffeb3b"
            ></div>
          </div>
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="circle"
              data-value="0.67"
              data-value-text="$670"
              data-value-text-color="#000"
              data-border-color="#ff9800"
              data-label-text="of $1000 spent"
              data-label-text-color="#4caf50"
              data-label-font-weight="800"
              data-label-font-size="12"
              data-border-width="30"
            ></div>
          </div>
        </div>
        <br />
        <div class="row">
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="semicircle"
              data-value="0.5"
              data-value-text="50%"
              data-value-text-color="#ffeb3b"
              data-value-font-size="41"
              data-value-font-weight="700"
              data-border-width="10"
              data-border-color="#ffeb3b"
            ></div>
          </div>
          <div class="col text-align-center">
            <div class="gauge gauge-init"
              data-type="semicircle"
              data-value="0.77"
              data-border-color="#ff9800"
              data-label-text="$770 spent so far"
              data-label-text-color="#ff9800"
              data-label-font-weight="800"
              data-label-font-size="12"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $t4, $on }) => {
    $on('pageInit', () => {
      // Init top demo gauge
      var demoGauge = $t4.gauge.create({
        el: '.demo-gauge',
        type: 'circle',
        value: 0.5,
        size: 250,
        borderColor: '#2196f3',
        borderWidth: 10,
        valueText: '50%',
        valueFontSize: 41,
        valueTextColor: '#2196f3',
        labelText: 'amount of something',
      });

      // Change demo gauge on button click
      $('.button').on('click', function () {
        var value = $(this).attr('data-value');
        demoGauge.update({
          value: value / 100,
          valueText: value + '%'
        });
      });
    })
    return $render;
  }
</script>

Techno4 Framework