Введение в 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 – Примеры диаграмм

• Scatter plot – График рассеяния
• Population pyramid – Пирамида населения
• Point matrix
• Bar chart
• Stacked bar chart
• Box plot
• Gantt chart
• Bullet graph
• Line chart
• Area chart
• Stacked area chart
• Multiple lines
• Stream graph
• Area range
• Dumbbell plot
• Pie chart
• Donut chart
• Heat map
• Parallel coordinates plot
• Marimekko chart
• Heat map

Brushing

• Lasso
• Range

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

• Labeling bars
• Streaming line chart
• Donut chart with labels
• Donut chart with varying radius
• How to add a tooltip to your chart

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

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

• Types of charts
• Theme and formatting
• Make your charts interactive

Основные концепции 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 форматирования позволяет связывать средства форматирования двумя способами: либо неявно из поля данных, либо явно, ссылаясь на средство форматирования в компоненте.

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