Создание панелей управления

Главная » Ресурсы » Здесь

Панели управления в Envision построены из небольших ячеек . У этих ячеек можно настраивать размер и цвет, их можно располагать на экране панели управления, как вам угодно. Система Envision нацелена на создание высокоэффективных панелей управления, где на одной странице отображаются все показатели, важные для компании. Даже очень сложные панели управления обычно создаются менее, чем за полсекунды. В данном разделе мы рассказываем о том, как создавать панели управления Envision с нуля.

Первая панель управления

Мы создадим первую панель управления с помощью образца набора данных. На изображении ниже показана панель управления, которая должна появиться в вашей учетной записи Lokad.



Данная панель создана с помощью сценария, прописанного ниже. Пока что сценарий может показаться немного сложным. Мы разберем его по строкам далее в этом разделе.

read "/sample/Lokad_Items.tsv" with
  SellPrice: number
read "/sample/Lokad_Orders.tsv" as Orders
read "/sample/Lokad_PurchaseOrders.tsv" as PO

show label "Hello World" a1f1 tomato

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price" c2d2 unit: "$" with
  min(SellPrice)
show table "Max selling price" e2f2 unit: "$" with
  max(SellPrice)

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes" a3f5 tomato unit: "$" with
  Week.oamount as "Sold" 
  Week.pamount as "Purchased"

show piechart "Sales by brand" a6c8 tomato with
  sum(Orders.NetAmount)
  group by Brand

show treemap "Stock value by supplier" d6f8 tomato unit: "$" with 
  Name
  StockOnHand * BuyPrice
  group by Supplier

show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  sum(Orders.NetAmount) as "Sold" unit: "$"
  order by sum(Orders.NetAmount) desc

Войдите в свою учетную запись Lokad, нажмите Create Envision Script, скопируйте сценарий, приведенный выше, а затем нажмите Start Run. По завершении процесса нажмите на появившуюся зеленую ссылку среди Recent runs, сразу под кнопкой Start Run. Перед вами появится панель управления, идентичная показанной на изображении.

Панель управления занимает всего одну страницу, однако любую из ячеек можно развернуть, нажав на нее. Нажмите на большой линейный график, и он развернется на всю ширину окна вашего интернет-браузера. Нажмите еще раз в любом месте черной зоны вокруг развернутой ячейки, и она вернется в исходное положение.

Заголовок, положение и цвет

Ячейка label является самой простой из доступных в Envision. На ее примере удобно продемонстрировать основные свойства, присущие всем ячейкам: заголовок, положение и цвет. Ячейка label нужна для отображения текста, записанного в ней; размер шрифта выбирается исходя из размера ячейки.

show label "Hello World" a1f1 tomato

Все ячейки отображаются с помощью оператора show. За данным ключевым словом следует 4 аргумента. Первый аргумент — это тип ячейки. Envision поддерживает различные типы ячеек, и label — один из них. В последующих разделах мы разберем пару других типов ячеек, которые также используются в данной панели управления.

После типа ячейки указывается ее заголовок, состоящий из выражения, поэтому для него используются разделители ("). В зависимости от типа ячейки способ отображения заголовка может меняться, однако обычно он отображается вверху ячейки. За заголовком следует положение ячейки, прописанное в примере выше как a1f1. Для определения положения всех ячеек в Envision используется сетка, напоминающая Excel, где столбцы названы буквами, а строки — цифрами. Таким образом, a1f1 означает, что используются ячейки, начиная с A1 (левый верхний угол) по F1 (нижний правый угол). Регистр не играет какой-либо роли в Envision, поэтому выражение A1F1 абсолютно равнозначно a1f1.

В самом конце указывается цвет — tomato в примере выше. Аргумент цвета не является обязательным, поэтому, если он опущен, по умолчанию используется аргумент black (черный). В Envision можно использовать все HTML-наименования цветов. Помимо HTML-наименований цветов Envision также позволяет использовать шестизначные коды цветов, перед которыми нужно убирать символ «решетки» (#). Например, вместо #0099CC нужно использовать 0099CC. На практике редактировать цвета из редактора кода слишком утомительно.

Редактор ячеек

Редактор кода позволяет редактировать положение и цвет ячеек, однако это не очень практично, потому что данный редактор не является визуальным. Именно поэтому в Envision добавлен второй редактор, который называется редактор ячеек. Редактор ячеек позволяет настраивать ячейки, их положение и цвет, а также некоторые дополнительные параметры, ускоряя при этом процесс оформления панели управления.



Вернитесь к панели управления, созданной ранее в вашей учетной записи Lokad, и нажмите Edit Tiles. Над каждой ячейкой появится темное поле, в котором будут показаны координаты ячейки. Координаты определяются в соответствии со стандартами Excel, как описано выше. Нажмите на любую ячейку, например на ячейку label вверху страницы, и появится диалоговое окно, в котором можно настроить свойства ячейки.

Обратите внимание на зеленые кнопки (+) с левой стороны страницы. С их помощью можно вставлять пустые строки сетки непосредственно над нажатой кнопкой. Нажмите на одну из кнопок (+), и вы увидите, что все ячейки сдвинулись вниз. Вставка пустой строки бывает нужна, если пользователь хочет переместить один из разделов панели управления вверх (а другой соответственно вниз).



При нажатии на кнопку (+) справа появляется красная кнопка (–). Красные кнопки в отличие от зеленых позволяют удалить пустую строку. Для появления красной кнопки необходимо, чтобы строка была пустой. Это механизм защиты от удаления строк, содержащих ячейки. Как правило, не рекомендуется уделять слишком много времени вводу положения и цветов ячеек во время прописывания сценария. Если ячейки накладываются друг на друга, Envision автоматически настраивает их положение таким образом, чтобы они были видимы. Так что, ничего страшного, если вы расположите ячейки неправильно. Редактор ячеек как раз предназначен, для того чтобы как следует настроить оформление вашей панели управления.

Отображение одиночных показателей

Как мы уже говорили, вывести на экран большое количество чисел несложно, однако ежедневно подбирать 10 значений, которые действительно стоит отслеживать, очень сложно. При создании панелей управления очень часто необходимо вывести на экран ячейку, содержащую всего лишь одно значение. Это можно сделать с помощью ячейки table. Эта ячейка — особый вид таблицы, состоящий из единственного поля, то есть таблица 1x1. В следующем сценарии показано, как можно вывести на экран 4 разных показателя, по строке на каждый.

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price" c2d2 unit: "$" with
  min(SellPrice)
show table "Max selling price" e2f2 unit: "$" with
  max(SellPrice)

Оператор show table начинается с атрибутов типа, заголовка, положения и цвета; схема та же, что и при работе с ячейкой label. За этими атрибутами следуют ключевые слова with. Ключевое слово with указывает на перечисление переменных, которые будут включены в ячейку (для всех ячеек, содержащих какие-либо данные). В нашем примере ячейки содержат всего лишь по одному значению каждая, но в следующих разделах мы увидим более сложные ячейки, которые содержат несколько значений.

Мы еще не рассматривали возможности объединения в Envision. Не углубляясь в детали, заметим, что выражения sum(), min() и max() являются агрегаторами, и они обычно работают так же, как их аналоги в Excel.

Тем не менее sum(1)} и sum(Orders.1) могут быть немного непонятны. Как мы видели во время выполнения первых расчетов, Envision в основном работает с векторами. Таким образом,sum(1) является синтаксическим аналогом более длинного выражения:

OnePerLine = 1
show table "Items" a2 with sum(OnePerLine)

В фрагменте кода, приведенном выше, задан вектор OnePerLine, и в соответствии с требованиями системы данный вектор является частью таблицы наименований. Таким образом, в результате присваивания получается, что каждому наименованию, то есть каждой строке таблицы наименований, присваивается значение 1. Следовательно, сумма всех этих значений отражает общее число наименований, содержащихся в таблице Items. Точно так же выражение sum(Orders.1) равносильно следующему сегменту:

Orders.OnePerLine = 1
show table "Orders" b2 with sum(Orders.OnePerLine)

Здесь снова присваивание является векторной операцией, где каждой строке в таблице Orders присваивается значение 1. Таким образом, сумма всех этих значений также отражает общее число строк в таблице. Для любой таблицы можно написать MyTable.42, чтобы с помощью синтаксиса присвоить значение 42 безымянному вектору.

Отображение минимальной цены выполняется по идентичной схеме объединения, однако если вы внимательно посмотрите на панель управления, то обратите внимание, что мы немного изменили визуальное оформление этой ячейки. Цена продажи отображается со значком доллара ($) как единицы измерения для данного показателя. Рассмотрим соответствующие строки сценария, чтобы понять, как это сделано.

show table "Min selling price" c2d2 unit: "$" with
  min(SellPrice)

Это можно сделать с помощью опции unit: "$" в строке столбца. Единицы измерения обычно отображаются справа от значения, например 42 мили, однако некоторые единицы, в частности денежные единицы, такие как $ или £, обычно ставятся перед значением, и Envision сохраняет этот порядок.

Отображение линейного графика

Линейный график — это тоже один из наиболее часто используемых типов ячеек в Envision. Линейный график требует немного больше внимания и усилий, чем ячейки, которые мы рассмотрели ранее, потому что в этом случае данные необходимо объединять по периодам: ежедневно, еженедельно, ежемесячно. Разберем фрагмент сценария, который отвечает за отображение линейного графика.

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes" a3f5 tomato unit: "$" with
  Week.oamount as "Sold"
  Week.pamount as "Purchased" 

Таблица Week не является таблицей, загруженной из исходных данных. В коммерции данные часто объединяются по периодам, поэтому в Envision таким периодическим объединениям уделяется самое пристальное внимание. В результате операции, включающие в себя объединение данных по периодам, очень просто выполнять. Тем не менее этот аспект языка Envision выходит за рамки данного документа. Скажем просто, что Week работает как получатель данных, где они группируются по неделям.

Далее следует особая операция присваивания :=, которая называется скалярным присваиванием. Данный вид присваивания отличается от обычного =, потому что вместо расчета одного значения на наименование при скалярном присваивании рассчитывается всего одно значение, не зависящее от всех наименований. Таким образом, в примере выше в первых двух строках мы рассчитываем одно значение в неделю для Week.oamount и еще одно для Week.pamount.

Выражение для линейного графика, начинающееся с show linechart, немного длиннее, чем выражение для простой ячейки label. Во избежание длинной и неудобоваримой записи сценариев мы используем блочный синтаксис. Блок должен начинаться после with, а затем можно перечислять все аргументы ячейки по одному аргументу в строке.

Заголовок линейного графика также включает в себя денежную единицу, введенную с помощью маркераunit: "$", как мы уже рассматривали при отображении показателей.

Затем на новой строке мы перечислили два вектора, а именно Week.oamount и Week.pamount. Как уже говорилось ранее, после with можно перечислить одну или несколько переменных, разделенных запятыми. Эти переменные отображаются в ячейке. В данном случае в ячейке появится две переменных. На линейный график можно выводить более двух переменных, однако рекомендуется использовать не более трех переменных, потому что в противном случае, когда в сценарии прописано более трех линий, графики становится очень трудно разбирать.

Переменные являются аргументами ячейки, и их можно переименовать вручную. Это можно сделать с помощью ключевого слова as, после которого указывается новое имя. В каждом типе ячеек имена переменных обрабатываются по-своему для улучшения внешнего вида и работы ячейки. Например, в линейных графиках имена переменных появляются в легенде под графиком. Тем не менее механизм переименования переменных с помощью ключевого слова as работает во всех ячейках, а не только в ячейках типа linechart. Код, привязанный к as, тоже может содержать единицу измерения, которая работает так же, как в заголовке ячейки.

По умолчанию для линейного графика выбираются цвета в соответствии с цветом самой ячейки. Однако можно задавать отдельные цвета для каждой выстраиваемой линии. Это можно сделать с помощью синтаксиса, приведенного ниже.

show linechart "Weekly volumes" unit:"$" a3f5 with
  Week.oamount as "Sold" color: "blue"
  Week.pamount as "Purchased" color: "red"

Отображение таблицы

Отложим пока ячейки piechart и treemap, чтобы более подробно узнать о более глубокой работе с таблицами. Таблицы, возможно, и не самые наглядные составляющие эффективной панели управления, но они по праву могут считаться одними из самых универсальных элементов. Таблицы часто используются для отображения приоритетных списков действий, например при поиске неликвидных или дефицитных товаров. В самом конце сценария, показанного выше, задана довольно простая таблица (для ясности приведем этот сегмент кода ниже).

show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  sum(Orders.NetAmount) as "Sold" unit: "$"
  order by sum(Orders.NetAmount) desc 

Данное выражение можно записать одной строкой, однако для ясности мы снова используем блочный синтаксис для ячейки. Синтаксис в указанном фрагменте соответствует общим нормам Envision, которые мы уже рассматривали, где после ключевого слова with можно перечислить 4 переменных. Сегмент заканчивается оператором order by, который мы разберем ниже.

Кроме того, Envision не позволяет перечислять не только переменные, но и выражения. Мы воспользовались этой возможностью в 5-й строке в примере выше. Оператор sum() отвечает за объединение на уровне наименований, и этот расчет непосредственно отражается в ячейке. Вектор можно было бы задать ранее с помощью следующего кода:

Sold = sum(Orders.NetAmount)
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  Sold as "Sold" unit: "$"
  order by sum(Orders.NetAmount) desc 

Возможность задавать выражения в пределах оператора ячейки делает сценарии более компактными и удобными для прочтения и корректировки.

Наконец, последняя строка начинается с оператора order by. Как следует из его названия, он отвечает за порядок строк в отображаемой таблице. Признак desc указывает на то, что необходимо использовать убывающий порядок. Если признак desc не используется, применяется возрастающий порядок.