Skip to main content

Шкала

Навігація

Шкала

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

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

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

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

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

  • Створення екземпляра: app.gauge.create(parameters)

    — parameters: object — об'єкт із параметрами шкали (Gauge).
    Метод повертає створений екземпляр Gauge

  • Знищення екземпляра: app.gauge.destroy(el)

    — el: HTMLElement | CSSSelector — елемент або екземпляр для знищення.

  • Отримання екземпляра: app.gauge.get(el)

    — el: HTMLElement | CSSSelector — HTML-елемент шкали.
    Метод повертає екземпляр Gauge

  • Оновлення шкали: app.gauge.update(parameters)

    — parameters: object — нові параметри для оновлення шкали.
    Метод повертає екземпляр Gauge

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

Тепер давайте подивимося на список доступних параметрів, необхідних для створення шкали:
ПараметрЗа замовчуваннямОписТип
el
Елемент шкали. HTMLElement або рядок із CSS-селектором елемента шкала. Згенерований SVG буде вставлено в цей елемент
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
Посилання на глобальний екземпляр застосунку
object
gauge.el
Елемент HTML Gauge
HTMLElement
gauge.$el
Екземпляр Dom64 з елементом HTML шкали
HTMLElement
gauge.svgEl
HTML-елемент SVG, створений шкалою
HTMLElement
gauge.$svgEl
Екземпляр Dom64 із згенерованим елементом SVG HTML
HTMLElement
gauge.params
Параметри шкали
object
Методи
Властивість Опис
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()
Знищує екземпляр шкали
function
gauge.on(event, handler)
Додати обробник подій
Event
gauge.once(event, handler)
Додати обробник подій, який буде видалено після запуску
Event
gauge.off(event, handler)
Видалити обробник подій
Event
gauge.off(event)
Видалити всі обробники для вказаної події
Event
gauge.emit(event, ...args)
Запустити подію на примірнику
Event

Події Шкали

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

Події DOM

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

<div class="gauge">

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

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

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

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

Якщо вам не потрібен 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>