Создание расширенного расширения визуализации с использованием Qlik Nebula.js и D3.js

 

В моем последнем посте я рассказал о надежных возможностях API-интерфейсов Qlik Sense (QS) для создания готовых визуальных метафор и способах их интеграции в экосистему Qlik. Естественным выбором для разработчиков при создании расширений QS на протяжении многих лет был Extension API , в  основном использующий ванильный JavaScript, jQuery и AngularJS.

API расширений состоит из методов и свойств, используемых для создания пользовательских расширений визуализации.

Введите… Решение Qlik Sense с открытым исходным кодом — Nebula.js ! 

 

Nebula.js — это набор библиотек и API-интерфейсов JavaScript, не зависящих от продукта и платформы, которые помогают разработчикам интегрировать визуализации и гибридные приложения поверх Qlik Associative Engine в QS Desktop, QS Enterprise для Windows и SaaS-редакции Qlik Sense. Это руководство специально относится к выпуску QS SaaS. Nebula.js предлагает разработчикам альтернативу API возможностей, которые исторически использовались для создания гибридных приложений. В этом руководстве основное внимание будет уделено разработке новой визуализации на основе пользовательского сценария с использованием Nebula.js и сторонней библиотеки визуализации D3.js. Наша цель — понять, как мы можем использовать Nebula.js для создания объекта расширения QS и реализации готовых возможностей визуализации в рамках SaaS .Платформа. В этом руководстве не делается акцент на части программирования D3.js, но обсуждается мотивация визуализации.

Сценарий пользователя. У организации, использующей Qlik Sense, есть новое требование по разработке визуального представления для понимания многомерного многомерного набора данных для своей организации. Их набор данных состоит из числовых значений, и они хотят сравнить несколько объектов вместе, чтобы проанализировать отношения между ними. Основываясь на этих требованиях, их инженер по визуализации данных представляет им «график с параллельными координатами». 

Итак, что такое график с параллельными координатами?

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

Основываясь на требованиях, давайте начнем с создания расширения QS с помощью Nebula.js .

Предпосылки :

1. Node.js (версия 10 или новее)
2. Терминал (например, Git Bash в Windows или Terminal в Mac)
3. IDE на ваш выбор, например, VS Code.
4. Существующая веб-интеграция или возможность ее создания в вашем арендаторе (особенно это относится к выпуску QS SaaS).
5. Приложение Qlik Sense с данными.

Шаг 1: Используйте интерфейс командной строки nebula.js для импорта необходимых пакетов. Команда помещает проект в папку /hello со следующей структурой:

• /src
• index.js — основная точка входа этой визуализации
• object-properties.js — свойства объекта, хранящиеся в приложении.
• data.js — конфигурация данных
• /test – Интеграционные тесты
• package.json

Команда:

npx @nebula.js/cli create hello --picasso none

Шаг 2: Запустите сервер разработки, выполнив:

cd hello
npm run start

Команда запускает локальный сервер разработки и открывает http://localhost:8080 в вашем браузере. Преимущество наличия сервера разработки с Nebula.js заключается в том, что он предоставляет интерактивный способ тестирования и редактирования вашего расширения без необходимости итеративного развертывания в QS каждый раз, когда вносится новое изменение.

Шаг 3: Настройте структуру данных.

Визуализации в QS основаны на определении гиперкуба (qHyperCubeDef). Следовательно, любой новый визуальный объект, который мы хотим добавить в экосистему QS, должен иметь определенную структуру данных. В Nebula.js у нас есть файл object-properties.js, который позволяет определить структуру нашего объекта.

const properties = {
  showTitles: true,
  qHyperCubeDef: {
    qInitialDataFetch: [{ qWidth: 30, qHeight: 200 }],
  }
}

Нам также необходимо установить цель данных в файле data.js, чтобы мы ссылались на правильное определение гиперкуба (важно отметить, если у вас есть несколько объектов qHyperCubeDef).

export default {
  targets: [
    {
      path:'/qHyperCubeDef',
    }
  ],
};

Шаг 4: Разработка расширения визуализации с использованием Nebula.js и D3.js.

Специальный код QS Nebula.js:

Теперь, когда у нас все готово, мы начинаем разработку нашего расширения с пользовательским объектом визуализации, используя файл index.js из нашего проекта.

Обратите внимание, что Nebula.js и его основной пакет @nebula.js/stardust построены на концепции настраиваемых хуков . Это может показаться знакомым людям, работающим с React.js . Хуки — это концепция, которая делает упор на повторно используемые составные функции, а не на классические объектно-ориентированные классы и наследование. Основные хуки, от которых мы зависим при разработке нашего объекта расширения, описаны ниже:

Метод, который помогает нам визуализировать наш объект визуализации, — это функция component(). Функция component() выполняется каждый раз, когда что-то, связанное с рендерингом объекта, изменяется, например, тема, модель данных, выборка данных, состояние компонента и т. д. Эту функцию можно сравнить с функцией paint() в Extension API.

Чтобы отобразить наши данные, нам сначала нужно получить доступ к макету через хук useLayout, а затем использовать его в сочетании с хуком useEffect. qDataPages [0].qMatrix гиперкуба содержит все данные (измерения и меры), используемые в среде QS, и нам нужно будет передать эти данные в нашу визуализацию на основе D3.js.

component() {
      const element = useElement();
      const layout = useLayout();
      useEffect(() => {
        var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;
      }
                }

Чтобы увидеть значения данных и понять структуру qHyperCube , всегда полезно выполнить console.log(layout) . Фрагмент показывает значения, характерные для нашего варианта использования. Каждый раз, когда к нашему объекту расширения добавляется новое измерение или мера, qDataPages[0].qMatrix обновляется этими значениями .

Затем необходимые значения измерения для нашей диаграммы извлекаются из гиперкуба с использованием свойства qText из qDataPages[0].qMatrix, как показано ниже.

var data = qMatrix.map(function (d) {
          return {
            PetalLength: d[0].qText,
            PetalWidth: d[1].qText,
            SepalLength: d[2].qText,
            SepalWidth: d[3].qText,
            Species: d[4].qText,
          };
        });

Наш следующий шаг — определить ширину и высоту объекта визуализации и зафиксировать его идентификатор . Мы будем использовать этот идентификатор для привязки его к нашему объекту элемента из хука useLayout, как показано ниже:

var width = 1000;
var height = 400;
var id = "container_" + layout.qInfo.qId;
const elem_new = `<div id=${id}></div>`;
element.innerHTML = elem_new;

Наконец, мы вызываем функцию D3.js из хука useEffect.

viz(data, width, height, id);

Специальный код D3.js:

Функция viz() содержит весь наш код D3.js, который позволяет нам рисовать график в параллельных координатах. Во-первых, нам нужно добавить SVG к <div> , содержащему идентификатор нашего объекта QS, как показано ниже.

var svg = d3
          .select("#" + id)
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")"
          );

Затем мы получаем все измерения, кроме Species , для построения наших осей x и y.

var dimensions = Object.keys(data[0]).filter(function (d) {
          return d != "Species";
        });

        var y = {};
        for (var i in dimensions) {
          var name_new = dimensions[i];
          y[name_new] = d3.scaleLinear().domain([0, 8]).range([height, 0]);
        }

        var x = d3.scalePoint().range([0, width]).domain(dimensions);

Чтобы нарисовать линии для нашего графика с параллельными координатами, нам нужно построить функцию пути , которая будет брать строку из нашего qHyperCube и возвращать координаты x и y линии.

function path(d) {
          return d3.line()(
            dimensions.map(function (p) {
              return [x(p), y[p](d[p])];
            })
          );
        }

И, наконец, мы связываем все с нашим SVG, как показано ниже:

svg
  .selectAll("myPath")
  .data(data)
  .enter()
  .append("path")
  .attr("class", function (d) {
    return "line " + d.Species;
  })
  .attr("d", path)
  .style("fill", "none")
  .style("stroke", function (d) {
    return color(d.Species);
  })
  .style("opacity", 0.5);

Шаг 5: Развертывание расширения.

Чтобы создать наш проект, мы используем приведенную ниже команду, чтобы сгенерировать все файлы, доступные для чтения QS, и поместить их в папку /hello-ext. Затем эту папку можно сжать (.zip) и загрузить в раздел расширений консоли SaaS для использования в среде QS.

npm run sense

Dashboard:

Если вы только начинаете работать с Nebula.js, https://qlik.dev — отличное место для ознакомления с основами и подробного изучения связанных функций.

Исходный код этого проекта доступен по адресу: https://github.com/dipankarqlik/Nebula