Формат данных

Виджеты диаграмм

У всех диаграмм одинаковый набор полей; какие из x, y, d и r используются и какой тип столбца допускается для каждого из них, зависит от типа диаграммы — каждый поддерживаемый тип диаграммы рассматривается в отдельном подразделе ниже, с живым примером, построенным на одном небольшом общем наборе демонстрационных данных.

• datasetId — набор данных, из которого читает диаграмма — должен совпадать с именем набора данных.
• chartType — area, bar, cell, dot, hexbin or line.
• title — необязательный заголовок диаграммы.
• dataFunction — агрегатная функция, применяемая к d: count (default), sum, average, min, max, median or stddev. При использовании count поле d следует оставить незаданным.
• x — столбец для измерения X (обязателен для всех типов диаграмм).
• y — столбец для измерения Y (только для cell, dot и hexbin — и для этих трёх обязателен).
• d — столбец, агрегируемый в измерение значения/цвета диаграммы.
• r — столбец для измерения радиуса (только для dot — и для него обязателен).
• seasonX / seasonY — группирует столбец времени по повторяющемуся периоду: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Столбцы измерений классифицируются как категориальные, временные или непрерывные в зависимости от их заявленного типа — см. раздел «JSON набора данных» ниже. Когда dataFunction равно count, измерение d остаётся незаданным — для подсчёта не требуется столбец значений. Любая другая агрегатная функция (sum, average, min, max, median or stddev) требует его наличия.

Измерения, которых требует тип диаграммы, должны быть заполнены: cell, dot и hexbin невозможно построить без y, а dot — ещё и без r. Запрос, в котором пропущено любое из них, отклоняется, поэтому если в наборе данных нет подходящего столбца, выберите тип диаграммы, которому он не нужен: area, bar и line достаточно x, а hexbin показывает два измерения без столбца радиуса.

Столбчатая

Линейная

С областями

Ячеистая

Точечная

Шестиугольная

Прочие виджеты

Таблица (dash_table)

Текст (dash_text)

Изображение (dash_image)

Разделитель (dash_spacer)

Стекеры (dash_stacker_hor, dash_stacker_ver)

JSON набора данных

Набор данных представляет собой единый JSON-объект с именем, типизированными столбцами и строками:

{
  "name": "Orders",
  "headers": ["region", "category", "amount", "quantity"],
  "types": ["VARCHAR", "VARCHAR", "FLOAT", "INTEGER"],
  "entries": [
    ["North", "Electronics", 120.50, 2],
    ["South", "Clothing",     89.95, 1],
    ["North", "Furniture",   432.00, 5],
    ["South", "Electronics",  74.50, 1]
  ]
}

• name — имя набора данных; диаграммы и таблицы ссылаются на него через поле datasetId.
• headers — названия столбцов в том же порядке, что и значения в каждой строке entries.
• types — по одному типу столбца на каждый заголовок — см. категории ниже.
• entries — строки, каждая из которых представляет собой массив значений в порядке заголовков.

При необходимости row_start, row_end, col_start и col_end задают включительный поддиапазон entries для импорта с отсчётом от нуля — это полезно, когда нужно добавить только новые строки из более крупной таблицы. По умолчанию все четыре параметра охватывают весь диапазон:

{
  "name": "Orders",
  "headers": ["region", "amount"],
  "types": ["VARCHAR", "FLOAT"],
  "entries": [ ["North", 120.50], ["South", 89.95], ["North", 432.00], ["South", 74.50] ],
  "row_start": 0,
  "row_end": 1,
  "col_start": 0,
  "col_end": 1
}

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

• Категориальный - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Временной - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Непрерывный - любой другой тип, например INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Ссылки на столбцы в диаграмме (x, y, d, r) должны точно совпадать с названием заголовка с учётом регистра.

Оформление и переопределение темы

Цвета уровня панели мониторинга задаются один раз в config.style.widget и применяются ко всем виджетам, которые их не переопределяют:

• color — цвет текста по умолчанию.
• backgroundColor — фон панели мониторинга по умолчанию.
• primaryColor — цвет переднего плана/активного ряда, используемый для заголовков и перекрёстно отфильтрованного ряда.
• primaryColorSubtle — нижняя граница цветового градиента, используемого диаграммами cell, dot и hexbin.
• secondaryColor — цвет фона/неотфильтрованного ряда.

Любой виджет может переопределить собственное оформление непосредственно в своём JSON-узле — backgroundColor, color, padding, borderRadius, borderWidth, borderColor и shadow. В примере ниже переопределены цвета и скругление углов одной диаграммы, при этом остальная часть панели сохраняет общую тему оформления:

{
  "type": "dash_chart",
  "datasetId": "Orders",
  "chartType": "hexbin",
  "x": "amount",
  "y": "quantity",
  "backgroundColor": "#F5F0FF",
  "borderRadius": "12px",
  "borderWidth": "1px",
  "borderColor": "#6E2BDC",
  "shadow": true
}

Полный пример

Небольшая панель мониторинга, объединяющая заголовок, две диаграммы рядом и таблицу — все они читают данные из одного набора данных:

{
  "config": {
    "type": "dashboard",
    "style": {
      "widget": {
        "color": "#000000",
        "backgroundColor": "#FFFFFF",
        "primaryColor": "#6E2BDC",
        "primaryColorSubtle": "#E2D5F8",
        "secondaryColor": "#CCCCCC"
      }
    }
  },
  "data": {
    "type": "dash",
    "children": [
      { "type": "dash_text", "text": "Orders Overview", "fontSize": "2vw", "justifyContent": "0" },
      {
        "type": "dash_stacker_hor",
        "children": [
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "bar",  "x": "region", "dataFunction": "count" },
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "cell", "x": "region", "y": "category", "dataFunction": "count" }
        ]
      },
      { "type": "dash_table", "datasetId": "Orders" }
    ]
  }
}