Intersystems DeepSee. Проста і швидка візуалізація даних

BI системи нашою організацією було обрано DeepSee входить в комплект поставки СУБД InterSystems Cache. Частково цей вибір був зумовлений тим фактом, що для зберігання даних ми використовуємо цю СУБД, тому використовувати інтегровану BI є кращим рішенням.

DeepSee являє собою куби OLAP які «дивляться» на вибрану таблицю вибраної області, такі куби можна фільтрувати за всіх полів вихідної таблиці, що дозволяє переглядати дані з будь-якої точки. Наприклад, однією з поставлених завдань було виведення інформації про народжених, DeepSee дозволив на основі кубів створити таблиці відображають скільки дітей народилося за останній рік, розділити їх на групи за статтю, вагою, довжиною тіла, віком матерів і місцем народження. Так само для кожного параметра можна задати умови DrillDown – провалювання в параметр, так замість року ми можемо подивитися скільки всього народилося в конкретний місяць, день, годину.

Звучить непогано, чи не так? Так воно і є!

Однак, як і завжди в будь-якій бочці меду знайдеться своя ложка дьогтю, у випадку з DeepSee це дизайн в якому подаються дані:



У такому вигляді показувати аналітику кому-небудь не варто, нас візьмуть за моторошних консерваторів або за людей, які не мають смаку.

На щастя я знайшов порятунок, на просторах github, повністю відкритий продукт під назвою DeepSeeWeb (DSW) – це сайт, створений з використанням jQuery і AngularJS. І якщо чистий DeepSee працює всередині СУБД, т. є. щоб на нього потрапити, необхідно зайти на портал управління Caché, то DeepSeeWeb працює як простий клієнт до сервера використовуючи REST запити, які описані в встановлюється в Caché пакеті MDX2JSON, але ніщо не забороняє нам писати свої запити, для цього головне освоїти «місцевий» мова – Caché ObjectScript (COS). Кожен запит представляє з себе:

«Оголошення» у встановленому за замовчуванням класі-обробника (клас файл з кодом COS), наприклад REST.cls. В цьому класі створюється наступна секція XDATA:

XData UrlMap
{ 
<Routes>

І в ній ми можемо визначати реакцію сервера на запити клієнта, кожен запит оголошується наступним чином:

<Route Url="/Test/:arg1/:arg2" Method="GET" Call="Test"/> 

де Url це власне ім'я запиту, <наш сервер>/<ім'я програми>/Url

в Url так само можна передавати аргументи arg1,arg2… тоді запит набуде вигляду

<наш сервер>/<ім'я програми>/Url/arg1/arg2

далі вказується метод запиту POST,GET,DELETE and etc.), і завершує все Call – функція, яка власне і буде обробляти наш запит.

Багатьох повинно бути зацікавило, що за таке <ім'я програми> ми вбудовуємо в наш запит. Для того щоб мати доступ до REST функцій, необхідно в СУБД створити Веб-додаток



Тут ми повинні поставити йому те саме ім'я, за яким сервер зрозуміє, що саме ми від нього хочемо і визначити клас-обробник для REST запитів.

Але, мабуть, вистачить теорії, але до цього питання можна буде повернутися в наступний раз. А враховуючи що в ру-просторі інформації про DeepSee вкрай мало, наступного разу неодмінно буде.

Продовжимо про DeepSeeWeb.

Давайте розглянемо його по кроках.

Головне меню:



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



Можна змінити колір, іконку, заголовок і колір тексту. Проте найцікавішим є можливість виведення на плитку даних одного з графіків, що знаходиться на обраному дашборде.


Познайомившись з меню, давайте рухатися далі і перейдемо всередину дашборда.



Кожен віджет старого дизайну має свій аналог у новому, зв'язок здійснюється за рахунок типу віджета, при запиті списку всіх віджетів клієнт отримує їх назва, тип і запит для отримання даних, потім зіставляє існуючі на клієнті типи з отриманими і відображає їх. Самі віджети «малюються» з допомогою бібліотеки Highcharts, це дуже потужний інструмент для візуалізації даних, розробки він надає десятки різноманітних chart'ов – графіків, лінійних, стовпчастих, кругових, тимчасових ліній, а так само безліч методів для їх кастомізації, у цієї бібліотеки просто величезна API дозволяє витворяти з графіками все, що душі завгодно.

І ось як тільки ви познайомитеся з Highcharts, ви неодмінно захочете побачити які-небудь чарти(chart) на своїх дашбордах, і… Пізнаєте розчарування, як колись його пізнав я, за замовчуванням DeepSeeWeb має у своєму розпорядженні лише частина графіків з великої бібліотеки! Але адже ми працюємо з JavaScript, а значить для нас немає нічого неможливого! І правда, розробники очікували, що кому-небудь та закортить додати щось нове. І реалізували можливість додавання, навіть зробили гарну форму для цього:



Це простий JSON редактор, в якому необхідно оголосити масив widgets і в ньому кожен новий об'єкт буде описувати окремий віджет:

url: шлях до js файлу описує віджет

Цей файл представляє з себе angular фабрику (factory)

function PieChart(Utils) {

function CustomWidget($scope) {
......
}
}
angular.module('widgets')
.factory('PieChart', ['Utils', PieChartFact]);

class: ім'я фабрики в зазначеному файлі
name: ім'я віджету, який ми описуємо
type: тип віджета, chart вказує що новий віджет буде відображати графік з бібліотеки Highcharts, так само існують типи «pivot», «text», «map» – таблиця, текст і карта.

Тепер повернемося до властивості name, звідки власне брати ім'я нового віджета, адже щоб щось описувати, треба створити. Створення нових віджетів виявилося для мене найскладнішим завданням, а було все дуже просто, достатньо просто уважно прочитати README.

Отже, щоб створити новий віджет необхідно створити новий клас Cache, я робив це студії, яка входить в комплект Cache.



ВСІ! Створюємо новий файл, пишемо в ньому:

Class <Назва віджета> Extends %DeepSee.Component.Portlet.abstractPortlet
{
}

І готово, новий віджет створений. Для його відображення на дашборде необхідно його туди покласти, перейдемо до портал управління старим DeepSee і додамо віджет і якщо раніше ми обирали з того, що вже було



То тепер ми вибираємо з категорії портлет створений нами віджет:


Тут список всіх створених мною віджетів.



Неописаний у налаштуваннях користувальницький віджет виглядає саме так, він повідомляє, що не знає такої віджет і що робити з ним не має поняття.

Тепер ми з вами знаємо як додавати власні віджети і давайте спробуємо. Спершу додамо новий віджет з бібліотеки Highcharts.

Наприклад, такою, що відображає скільки відвідувань у нас на сайті в розрізі кожної години.


Згідно Highcharts такі графіки називають spiderWeb. Створимо файл SpiderWeb.js і напишемо туди:

function SpiderWebFact(BaseChart, Utils) {
function SpiderWebChart($scope) {
//Говоримо віджету що б він тягнув scope з базового для всіх 
//highcharts-віджетів класу
BaseChart.apply(this, [$scope]);
var _this = this;
//вказуємо тип графіка може бути bar, column, line, area, pie
this.setType('line',true);
//отримуємо дані з сервера 
this.requestData();
//Описуємо налаштування віджета саме для SpiderWeb
var ex = {
options: {
plotOptions: {
series: {
//не пропускати на графіку місця в яких графік дорівнює 0, що б не було //розривів
connectNulls: true
}
},
//описуємо що виводити в спливаючому вікні при наведенні на маркер графіка
tooltip: {
shared: true,
useHTML: true, 
formatter: function () {
var t = this;
/* jshint ignore:end */
var a= "<b>"+t.x+":00</b><table style = 'width: 100%;'>";
var all = 0;
for(var i =0;i<t.points.length;i++) {
var val = t.points[i].y;
all+=val;
val = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
a += '<tr><td>'+_this.toTitleCase(t.points[i].series.name)+': </td><td style="text-align: right">' + '<b>' + val + "</b></td></tr>";
}
if(t.points.length>1)
a+= "<tr><td style = 'font-style: italic; font-weight: bold;'>: </td><td style='text-align: right'><b>"+all.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")+"</b></td></tr><br></table>";
return a;
}
}
},
yAxis: {
//основна директива SpiderWeb, саме вона робить його таким, який він є
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
xAxis: {
//вказуємо що на кінець кожного вимірювання необхідно додати 00, тому що 
//з сервера час приходить в форматі 01,02,03 ...
labels: {
formatter: function () {
return this.value + ':00';
}
}
}
};

//передаємо тільки що оголошені налаштування список всіх налаштувань віджету
Utils.merge($scope.chartConfig, ex);
}
return SpiderWeb;
}
//оголошуємо фабрику
angular.module('widgets')
.factory('SpiderWebChart', ['BaseChart', 'Utils', SpiderWebFact]);

Тепер створимо клас у Cache, і щоб не плутатися назвемо його теж SpiderWeb.

Class User.SpiderWeb Extends %DeepSee.Component.Portlet.abstractPortlet
{
}

User тут це назва папки, в якій буде лежати файл, папка може бути будь-якою. Далі додамо новий віджет в налаштування, як ми пам'ятаємо, у нас там вже є один віджет з прикладу вище, тому зараз налаштування придбають наступний вигляд:

{
"widgets": [
{
"url": "src/factories/pieChart.js",
"class": "PieChart",
"name": "user.piewithvalues",
"type": "chart"
},
{
"url": "src/factories/ SpiderWeb.js",
"class": " SpiderWeb Chart",
"name": "user.spiderweb",
"type": "chart"
}

Тепер додавши цей віджет в старому порталі ми побачимо його і на новому саме в тому вигляді, як і хотіли.

Стаття вийшла дуже затягнутою сподіваюся інформація буде корисна, і наступного разу можна буде приступити до додавання віджету не має нічого спільного з бібліотекою Highcharts, це буде набагато цікавіше, і ви побачите які можливості перед вами може відкрити DeepSee при правильному використанні.

А відкритість DeepSeeWeb дозволяє спільноти брати участь у розробленні проекту, що дозволить йому вбирати кращі ідеї. Хоча я за 3 місяці роботи, зробив лише один pull-request, ось такий я жаднюга!

Для розпалювання інтересу ось вам скрін, що у мене вийшло в якості першої версії своєї роботи з BI системі DeepSee.



З нових цікавих можливостей — фільтр по даті (правий кут) і текстовий віджет.

p.s. Вибачте за відсутність даних, ми ще не вирішили що показувати, а що приховувати, тому ховаємо все.

Посилання на DeepSeeWeb
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.