У новому опитуванні Capterra's Tech Trends Survey управління даними було названо однією з головних проблем для фінансових компаній при впровадженні нових програмних рішень. Готові інструменти часто не вистачають гнучкості для задоволення специфічних вимог. Тому організаціям доцільно розглядати інвестиції в спеціалізовані рішення, такі як поворотні таблиці (pivot grids), для покриття потреб у аналізі та управлінні даними.
У цій статті ми розглянемо одну з нових демонстрацій інтеграції, що складається з DHTMLX Grid та Pivot. Ось ми розповімо про деякі технічні аспекти, використані нашою командою для створення JavaScript поворотної таблиці за допомогою цих віджетів.
Приклад JavaScript Pivot Grid, створений за допомогою DHTMLX Grid та Pivot
DHTMLX Grid — це популярний JavaScript віджет для роботи з таблицями даних, який в останній версії (9.1) отримав нові функції PRO, як от розширювачі рядків та багатосортування. Однак цей віджет можна зробити ще більш потужним, об'єднавши його з DHTMLX Pivot. З використанням наведеного живого прикладу, ви можете зручно перемикатися між режимами Grid та Pivot, застосовувати різні агрегації і динамічно аналізувати дані.
Повністю оновлена в минулому році, наша JavaScript Pivot таблиця покращує можливості аналізу даних завдяки динамічним агрегаціям, що дозволяють порівнювати та аналізувати складні дані. Ця інтеграція дозволяє користувачам без проблем перемикатися між сирими табличними даними в режимі Grid та даними в режимі Pivot, де інформація організовується у зручні підсумки для ефективного прийняття рішень.
Основні моменти при інтеграції DHTMLX Grid з Pivot
Тепер ми розглянемо основні аспекти інтеграції цих віджетів DHTMLX в єдине рішення для Pivot Grid. Оминаючи стандартні речі, як включення компонентів DHTMLX у ваш проект і їх ініціалізацію, ми зосередимося на більш складних завданнях.
Перемикання між режимами Grid та Pivot
Перемикання між цими режимами передбачає динамічне ініціалізування та знищення відповідних віджетів, при цьому зберігаються їх налаштування. Функція convertAndInit(state, save) відповідає за цей перехід.
При перемиканні в режим Pivot (state === 1) Grid знищується, і ініціалізується Pivot таблиця з збереженими або за замовчуванням налаштуваннями:
grid.destructor();
pivotWidget = new pivot.Pivot("#grid-pivot", {
fields: storedPivotFields || [],
config: storedPivotConfig || {},
data: dataset,
});
При поверненні в режим Grid (state === 0) Pivot знищується, і Grid знову з’являється з попередньо збереженими налаштуваннями:
pivotWidget.destructor();
grid = new dhx.Grid("grid-pivot", storedGridConfig);
Цей підхід запобігає витокам пам’яті та гарантує, що не буде запущено кілька екземплярів одного й того ж компонента одночасно.
Також функція displayButtons забезпечує відображення відповідних кнопок інтерфейсу для кожного режиму:
function displayButtons(state) {
document.getElementById("edit-button").style.display = state === 1 ? "none" : "block";
document.getElementById("aux-buttons").style.display = state === 1 ? "flex" : "none";
}
Динамічна обробка типів даних
DHTMLX Pivot потребує правильно визначених даних для полів. Без цього числові стовпці можуть бути трактовані як текст, що вплине на сортування та агрегацію даних. Використання об'єкта dataTypes дозволяє автоматично визначити типи стовпців на основі першого рядка даних у Grid:
const dataTypes = {};
const firstItem = grid.data.getItem(grid.data.getId(0));
for (const c in firstItem) {
dataTypes[c] = typeof(firstItem[c]) === "string" ? "text" : typeof(firstItem[c]) === "number" ? "number" : "date";
}
Потім ці виявлені типи даних використовуються для динамічного створення полів Pivot:
storedPivotFields = grid.config.columns.map(col => ({
id: col.id,
label: col.header[0].text,
type: dataTypes[col.id]
}));
Це дозволяє Pivot компоненту коректно обробляти числові та текстові дані без необхідності вручну налаштовувати їх.
Запобігання проблемі з порожньою Pivot таблицею
Якщо в Pivot таблиці не визначено рядки, стовпці або значення, вона виглядатиме порожньою. Щоб уникнути порожнього інтерфейсу та дати користувачам змогу працювати з даними Grid у режимі Pivot, вставляється тимчасовий Grid всередину контейнера Pivot за допомогою функції replaceInnerGrid(pivotWidget):
function replaceInnerGrid(pivot) {
const grid = pivot.container.getElementsByClassName("wx-grid");
if (grid.length) {
grid[0].innerText = "";
innerGrid = new dhx.Grid(grid[0], defaultGridConfig);
}
}
Це покращує досвід користувача, показуючи актуальні дані замість порожнього екрану.
Збереження налаштувань і консистентність Grid при перемиканні з Pivot
Потужні функції Pivot дозволяють користувачам перерозподіляти дані та виконувати складні обчислення для отримання цінних інсайтів. Тому важливо зберегти налаштування Pivot перед переходом у режим Grid:
const tableApi = pivotWidget.getTable();
const pivotConfig = pivotWidget.api.getState().config;
Цей код зберігає стан Pivot і застосовує його до Grid. Якщо в Pivot не було змін у конфігурації, відновлюються оригінальні налаштування Grid:
if (!pivotConfig.rows.length && !pivotConfig.columns.length && !pivotConfig.values.length) {
storedGridConfig = defaultGridConfig;
storedPivotConfig = null;
Оскільки Pivot і Grid обробляють ширину стовпців по-різному, перемикання назад у Grid може призвести до несумісності ширини. Тому треба переконатися, що для кожного стовпця встановлено попередньо визначену ширину:
columns: columns.map(c => {
c.id = c.id.toString();
c.width = c.width ? c.width : 150;
return c;
}),
Цей крок допомагає уникнути порушення розмітки Grid після переходу з режиму Pivot.
Ці заходи забезпечують стабільний та зручний інтерфейс при перемиканні між режимами Grid і Pivot.
З огляду на всі ці пункти, ви можете створити базовий JavaScript pivot grid за допомогою компонентів DHTMLX Grid та Pivot. Використовуючи добре задокументовані API цих продуктів, ви зможете значно розширити їх функціональність для різних вимог вашого проекту.
Підсумки
Компоненти DHTMLX Grid та Pivot — чудовий вибір для додатків, що працюють з великими обсягами даних і потребують складної обробки та аналізу. Як і всі продукти DHTMLX, ці компоненти сумісні та можуть бути легко інтегровані в єдине рішення для pivot grid у ваших веб-проектах на базі популярних фронтенд-фреймворків. Завантажте безкоштовні 30-денні пробні версії компонентів Grid та Pivot і протестуйте їх можливості в своїх сценаріях.
Цю статтю спочатку було опубліковано на блоці DHTMLX .
Перекладено з: Key Aspects of Creating a JavaScript Pivot Grid with DHTMLX Widgets