Содержание урока по Qlik Sense

Введение в Picasso.js

Что такое picasso.js?

picasso.js — это библиотека диаграмм с открытым исходным кодом, предназначенная для создания настраиваемых интерактивных мощных визуализаций на основе компонентов.

Подборка видео с Youtube по работе с picasso.js

Cookbook for PicassoJS Qlik Sense Extensions – School of Picasso JS

Компоненты

Компоненты — это визуальные стандартные блоки, из которых состоит диаграмма. Комбинируя их в различных формах, можно создать практически любую диаграмму. Гистограмма, например, состоит из гистограммы, непрерывной и дискретной осей. Добавьте линейный слой, и у вас есть комбинированная диаграмма. Хотите линейную диаграмму с четырьмя осями? – Не проблема.

Расширяемый

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

Интерактивный

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

Отзывчивый

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

Тематический

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

Краткое описание библиотеки для визуализации данных Picassojs от Qlik

Picasso.js – это open-source visualization framework, библиотека диаграмм, оптимизированная для создания интерактивных визуализаций для продуктов линейки Qlik.

Picassojs – это библиотека визуализации от Qlik, которая фокусируется на создании визуализаций с помощью компонентно-ориентированного подхода и (разумно) быстро реагирует на запросы. Qlik использует Picasso.js для создания визуализаций, которые поставляется вместе с пакетом продуктов Qlik Sense.

Picasso.js базируется на D3.js, при этом все визуализации описываются через JSON.

Ссылки на документацию и блоги по Picasso.js

Официальная дока

https://picassojs.com/docs/tutorial.html – Официальный tutorial по пикассо js
https://picassojs.com/docs/installation.html – Официальная документация по picasso js
https://github.com/qlik-oss/picasso.js – проект на GitHub
https://github.com/qlik-oss/picasso.js/blob/master/CHANGELOG.md – что менялось в последних релизах библиотеки

Другие публикации и инструменты для построения визуализации с помощью Picasso.JS

Chart Collection – picasso.js chart collection.
https://www.npmjs.com/package/picasso-plugin-q – помогает легче извлекать данные из гиперкуба QIX.
picassojs.studio – Live editor/playground/песочница для опробирования picasso.js
https://github.com/JoseHervas/igniter – Qlik mashup boilerplate with ReactJS, Leonardo UI, Enigma.js and Picasso.js
https://www.npmjs.com/package/picasso-plugin-hammer – Плагин, который связывает события с помощью HammerJS. Этот плагин предоставляет API для декларативной привязки распознавателей HammerJS к элементу диаграммы.

Инсталляция picasso.js

picasso.js и плагины picasso-plugin-hammer доступны picasso-plugin-q в общедоступном реестре npm в виде пакетов npm и могут быть установлены либо через npm, либо через импорт скрипта.

Импорт скрипта

Самый простой способ загрузить модуль — из CDN, например jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/picasso.js" crossorigin></script>

При импорте с использованием тега script он добавляет переменную picassoв глобальное пространство имен.

Для производства рекомендуется использовать определенную версию, чтобы избежать сюрпризов от более новых или неработающих версий API:

<script src="https://cdn.jsdelivr.net/npm/picasso.js@1.0.0" crossorigin></script>

Npm или yarn

Если вы создаете свой собственный веб-проект, используя Webpack, Rollup, Parcel или что-то подобное, вы можете установить пакет с помощью npm:

npm install picasso.js

или yarn:

yarn add picasso.js

а затем использовать его:

import picassojs from 'picasso.js';

Введение в picasso.js

Создание диаграммы

Примечание. В этом руководстве предполагается, что у вас есть базовые знания HTML, JS, CSS и git в веб-разработке.

Создайте новый HTML-файл с некоторыми базовыми настройками и включите picasso.js пакет:

<!DOCTYPE html>
<html>
  <head>
    <title>My picasso.js page</title>
    <script src="https://unpkg.com/picasso.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #container {
        height: 100%;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      /* PLACE CODE HERE */
    </script>
  </body>
</html>

В теге script инициируйте экземпляр диаграммы Picasso.js:

<script>
  picasso.chart({
    element: document.querySelector('#container'), // This is the element to render the chart in
    data: [
      {
        type: 'matrix',
        data: [
          ['Month', 'Sales', 'Margin'],
          ['Jan', 1106, 7],
          ['Feb', 5444, 53],
          ['Mar', 147, 64],
          ['Apr', 7499, 47],
          ['May', 430, 62],
          ['June', 9735, 13],
          ['July', 5832, 13],
          ['Aug', 7435, 15],
          ['Sep', 3467, 35],
          ['Oct', 3554, 78],
          ['Nov', 5633, 23],
          ['Dec', 6354, 63],
        ],
      },
    ],
    settings: {
      scales: {
        x: { data: { field: 'Margin' } },
        y: { data: { field: 'Sales' } },
      },
      components: [
        {
          // specify how to render the chart
          type: 'axis',
          scale: 'y',
          layout: {
            dock: 'left',
          },
        },
        {
          type: 'axis',
          scale: 'x',
          layout: {
            dock: 'bottom',
          },
        },
        {
          type: 'point',
          data: {
            extract: {
              field: 'Month',
              props: {
                x: { field: 'Margin' },
                y: { field: 'Sales' },
              },
            },
          },
          settings: {
            x: { scale: 'x' },
            y: { scale: 'y' },
            size: function () {
              return Math.random();
            },
          },
        },
      ],
    },
  });
</script>

Теперь вы должны увидеть очень простой пузырьковый график:

Примеры

Большинство следующих примеров — это reactive notebooks — мощный способ создания интерактивных документов.

Charts – Примеры диаграмм

Brushing

Lasso
Range

Другие элементы диаграмм

Интерактивные примеры

Коллекция Qlik picasso.js на Glitch содержит несколько примеров кода, которые вы можете запустить, отредактировать и встроить на свою веб-страницу. Они были разработаны с использованием React.

Основные концепции Picasso.js

Chart – Диаграмма

Render a chart

Функция picasso.chartсоздает и отображает диаграмму.

picasso.chart(definition)

definition Объект
- element HTMLЭлемент. Элемент для отображения диаграммы.
- data Объект. Данные для рендеринга. Больше .
- settings Объект.
  - components Множество. Больше .
  - scales Объект (необязательно). Масштабы, используемые при рендеринге. Больше .
  - formatters Объект (необязательно). Средства форматирования, на которые можно ссылаться из других компонентов. Больше .
  - strategy Объект (необязательно). Поведение макета и отзывчивость. Больше .
- created Функция (необязательно). Крюк жизненного цикла.
- beforeMount Функция (необязательно). Крюк жизненного цикла.
- mounted Функция (необязательно). Крюк жизненного цикла.
- beforeRender Функция (необязательно). Крюк жизненного цикла.
- beforeUpdate Функция (необязательно). Крюк жизненного цикла.
- updated Функция (необязательно). Крюк жизненного цикла.
- beforeDestroy Функция (необязательно). Крюк жизненного цикла.
- destroyed Функция (необязательно). Крюк жизненного цикла.

Chart lifecycle hooks

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

Если вы использовали такие фреймворки, как React или VueJS, вы знакомы с концепцией жизненного цикла. Есть в основном три варианта использования:

Отрисовка диаграммы в первый раз

Это запускает события жизненного цикла в следующем порядке:

created -> beforeRender -> beforeMount -> mounted

Обновление диаграммы

Это запускает события жизненного цикла в следующем порядке:

beforeUpdate -> beforeRender -> updated

Срыв диаграммы

Это запускает события жизненного цикла в следующем порядке:

beforeDestroy -> destroyed

Методы

created()

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

picasso.chart({
  created() {
    this.dataPage = 1;
  },
});

beforeMount()

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

picasso.chart({
  beforeMount() {
    this.clickCount = 0;
  },
});

mounted(element)

elementHTMLElement — элемент, в котором была отображена диаграмма.

Вызывается после того, как диаграмма была смонтирована. Используйте для привязки пользовательских обработчиков событий или других операций, требующих элемента. Этот хук только на стороне клиента.

picasso.chart({
  mounted(element) {
    // Bind a tap listener using the Touche library (https://github.com/stoffeastrom/touche)
    Touche(element).tap({
      options: {
        areaThreshold: 5,
      },
      end: function (e, data) {
        console.log('tap');
      },
    });
  },
});

beforeRender()

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

picasso.chart({
  beforeRender() {
    this.dataPage = 1;
  },
});

beforeUpdate()

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

picasso.chart({
  beforeUpdate() {
    this.dataPage = 1;
  },
});

updated()

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

picasso.chart({
  updated() {
    this.dataPage = 1;
  },
});

beforeDestroy()

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

picasso.chart({
  beforeDestroy() {
    this.dataPage = 1;
  },
});

destroyed()

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

Функции экземпляра диаграммы

update()

Обновите диаграмму новыми data и/или settings. Запускает обновления всех компонентов диаграммы.

const chartInstance = picasso.chart({
  /* ... */
});
chartInstance.update({
  settings: newSettings,
  data: newData,
});

Пример

const chartInstance = picasso.chart({
  element: document.getElementById('chart-container'),
  data: { ... },
  settings: {
    scales: {
      x: {
        data: { extract: { field: "Products" } }
      },
      y: {
        data: { extract: { field: "Year" } }
      }
    },
    components: [{
      type: "point",
      settings: {
        fill: 'red'
      }
    }]
  },
  created: function() {
    console.log('Chart was created');
  },
  mounted: function() {
    console.log('Chart was mounted');
  }
});

chartInstance.update({
  data: { /* . */ }
});

Обратите внимание, что вы не должны использовать функции стрелок, чтобы позволитьthisконтексту внутри методов быть привязанным к экземпляру.

Данные

Данные в picasso.js обычно передаются сверху вниз: экземпляру диаграммы предоставляется один или несколько источников данных различных типов; затем каждый компонент может использовать эти источники данных или их части.

Scales (Шкалы)

Шкалы (Scales) – неотъемлемая часть большинства визуализаций, и picasso.js поставляется в комплекте с парой из них.

Шкалы в picasso.js представляют собой расширенные шкалы d3, основное отличие которых заключается в более тесной интеграции с данными.

Компоненты

Компоненты составляют визуальные части диаграммы и обычно включают в себя оси, линии сетки и точки данных, закодированные различными способами.

Layout (Макет)

Макет док-станции — это механизм, который управляет расположением различных компонентов и визуализацией компонента или нет, в зависимости от доступного пространства, то есть от скорости отклика.

Существует 5 различных областей макета, причем centerобласть является основной. Обычно именно там располагаются визуальные компоненты. С каждой стороны от центральной области есть еще одна область, в которой можно расположить (закрепить) компонент. Они обозначаются как top, bottom, leftи right.

Большинство компонентов должны обрабатывать любую из 5 различных областей, но может быть более целесообразно, чтобы некоторые компоненты располагались в основном либо в центре, либо по бокам.

Brushing (Чистка)

Чистка в компоненте обрабатывается двумя способами: trigger (триггер) и consume (потребление).

Interaction (Взаимодействие)

Взаимодействия предоставляют API для привязки событий к диаграмме Пикассо декларативным способом.

Formatting (Форматирование)

API форматирования позволяет связывать средства форматирования двумя способами: либо неявно из поля данных, либо явно, ссылаясь на средство форматирования в компоненте.

Примечание. Применение форматирования зависит от каждого компонента.

4 1 голос

Рейтинг статьи

Библиотека диаграмм для визуализации данных picasso.js от QlikTech/Qlik Sense

Опубликовано qliksense-expert в 02.12.202002.12.2020

Введение в Picasso.js

Что такое picasso.js?

Подборка видео с Youtube по работе с picasso.js

Компоненты

Расширяемый

Интерактивный

Отзывчивый

Тематический

Краткое описание библиотеки для визуализации данных Picassojs от Qlik

Ссылки на документацию и блоги по Picasso.js

Инсталляция picasso.js

Импорт скрипта

Npm или yarn

Введение в picasso.js

Создание диаграммы

Примеры

Charts – Примеры диаграмм

Brushing

Другие элементы диаграмм

Интерактивные примеры

Основные концепции Picasso.js

Chart – Диаграмма

Render a chart

Chart lifecycle hooks

Отрисовка диаграммы в первый раз

Обновление диаграммы

Срыв диаграммы

Методы

created()

beforeMount()

mounted(element)

beforeRender()

beforeUpdate()

updated()

beforeDestroy()

destroyed()

Функции экземпляра диаграммы

update()

Данные

Scales (Шкалы)

Компоненты

Layout (Макет)

Brushing (Чистка)

Interaction (Взаимодействие)

Formatting (Форматирование)

Похожие записи

Уровень 2

Доступ к системным данным и переменным в Extension Qlik Sense

Уровень 2

Как создать Qlik Sense Extension с помощью Nebula.js и React

Уровень 2

Создание Extension с помощью qlik nebula.js и D3.js – Tutorial