Настройка Pivot Table

Получение и настройка объекта конфигурации

Для получения и установки объекта конфигурации Pivot необходимо следующее:

// получить текущие настройки
var config = pivot.getStructure();
 
// установить новые настройки
pivot.setStructure(newConfig);

Формат объекта config аналогичен параметру "structure" в конструкторе:

var config = {
    rows: ["form", "name"],
    columns: ["year"],
    values: [
        { name: "gdp", operation: "sum"}, 
        { name: "oil", operation: "sum"}
    ],
    filters:[]
}

Related sample:  Setting/Getting Structure

Определение операций с данными

Операции задаются в объекте "structure" в массиве "values". Свойство "name" в объекте операции ссылается на свойство элемента данных:

view: "pivot",
structure: {
    values: [
        { name: "gdp", operation: "sum" }, // значения "GDP" будут суммированы
        { name: "oil", operation: "max" } // будет выведено максимальное значение "oil"
    ]
}

Существуют 4 встроенные операции с данными:

  • sum - (по умолчанию) суммирует все значения;
  • max - выводит максимальное значение;
  • min - выводит минимальное значение;
  • count - подсчитывает количество вхождений.

Добавление пользовательской операции

Обратите внимание что у Pivot Chart другая логика добавления пользовательских операций. Больше информации в статье.

По необходимости вы можете добавлять свои операции одним из следующих способов:

1) через свойство operations

pivot.operations.abssum = function(data) {
    // где data - это массив значений который необходимо обработать
 
    var sum = 0;
    for (var i = 0; i < data.length; i++) {
        var num = window.parseFloat(data[i], 10);
        if (!window.isNaN(num))
        sum += Math.abs(num);
    }
    return sum;
};

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

values:[ name:"oil", operation:"abssum"]

Related sample:  Defining Custom Functions

2) с помощью метода addOperation

Метод принимает три параметра:

  • name - (string) имя операции
  • operation - (function) функция, которая будет вызываться для каждой ячейки в колонке с этой операцией. Параметр принимает массив ячеек исходных данных
  • options - (object) объект с опциями операции (leavesOnly или id, детали ниже)

Кроме добавления операции, метод addOperation позволяет указывать две опции в третьем параметре:

  • leavesOnly - (boolean) с установленным true, функция операции будет принимать только строки, не содержащие подстрок.
  • ids - (boolean) с установленным true, функция операции будет принимать ID несгруппированных элементов как 4-ый параметр.
grida.addOperation("avr", function(data) {
    var sum = 0;
    for (var i = 0; i < data.length; i++) {
        if( data[i] )
        sum += window.parseFloat(data[i], 10);
    }
    return data.length?(sum/data.length):0;
}, {leavesOnly: true});

Related sample:  Defining Custom Functions

Related sample:  Weighted Average

Добавление пользовательской итоговой операции

Установленная по умолчанию логика подсчета результата в итоговом столбце или футере не всегда подходит для решения конкретных задач. Для таких случаев существует метод addTotalOperation. С его помощью вы можете создать свою операцию с необходимой логикой. Метод принимает два параметра:

  • name - (string) имя операции
  • operation - (function) функция содержащая логику операции, принимает следующие параметры:
    • values - (array) значение колонок
    • key - (string) ID агрегированных данных
    • data - (object) элемент агрегированных данных
  • options - (object) объект с опциями операции (leavesOnly или id, детали ниже)

Кроме добавления операции, метод позволяет указывать две опции в третьем параметре:

  • leavesOnly - (boolean) с установленным true, функция операции будет принимать только строки, не содержащие подстрок.
  • ids - (boolean) с установленным true, функция операции будет принимать ID несгруппированных элементов как 4-ый параметр.
$$("pivot").addTotalOperation("wAver", function(values, key, data) {
    // делает необходимые подсчеты и возвращает итоговое значение
}, {leavesOnly: true});

Related sample:  Weighted Average

Счетчики суммы для столбцов и строк

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

webix.ui({
    view:"pivot",
    totalColumn:"sumOnly",
    //...
});

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

webix.ui({
    view:"pivot",
    footer: "sumOnly",
    //...
});

Значение "sumOnly" позволяет суммирующей функции обрабатывать только те строки/столбцы, которые уже содержат суммы.

Related sample:  Total Column and Footer

Фильтры

Фильтры задаются внутри объекта "structure", в массиве filters. Параметр name - это имя элемента данных, используемого для фильтрации свойства:

view:"pivot",
structure: {
    filters: [
        { name: "name", type:"select" },
        { name: "continent", type: "text" }
    ]
}

По умолчанию, Webix Pivot предлагает следующие виды фильтров:

  • text - фильтрация по вводимым в текстовое поле символам. Поддерживает базовые математическое сравнения, например "< 100", "> 2.5" или "= 12". При отсутствии математических операторов, фильтр будет искать текстовые совпадения;
  • select - фильтрация по опциям, автоматически выбранным из данных (все уникальные значения). Например, если вы укажите Continents, все уникальные имена континентов из набора данных станут опциями фильтрации;
  • multiselect - фильтрация по опциям, автоматически выбранным из данных (все уникальные значения). Например, если вы укажите Continents, все уникальные имена континентов из набора данных станут опциями фильтрации. Фильтр позволяет выбирать несколько вариантов одновременно;
  • datepicker - фильтрация по датам, выбранным в календаре.

Переименование полей

По умолчанию, в качестве имен колонок Pivot использует свойства элемента данных. Но для данных, структурированных как в примере ниже, этот вариант не подходит:

[{ a1:100, a2:1.34 }, ...]

В таком случае, чтобы задать подходящие для вас имена (вместо a1 и a2) вы можете воспользоваться свойством fieldMap:

webix.ui({
    view: "pivot",
    fieldMap: { "a1" : "GDP", "a2" : "Grow ratio" },
    //...
});

Related sample:  Custom Field Titles

Установка режима "Только для чтения"

Чтобы отключить возможность редактирования настроек Pivot, вы можете задать свойству readonly значение true:

webix.ui({
    view: "pivot",
    readonly:true,
    //...
});

Чтобы задать заголовок, который будет отображаться в верхнем левом углу таблицы вместо "Click to configure", используйте свойство readonlyTitle:

webix.ui({
    view: "pivot",
    readonlyTitle:"New Title",
    //...
});

Related sample:  Readonly Mode

Сортировка данных

Чтобы включить сортировку в заголовках таблицы Pivot, задайте свойство sort со значением "string" в конфигурации соответствующей колонки:

webix.ui({
    view: "pivot",
    id: "pivot",
    structure:{
        rows: ["year"],
        columns: [{id:"form",sort:"string"}, {id:"continent",sort:"string"}],
        values: [{name:"balance", operation:"sum"}]
    }
});

Установка порядка заголовков столбцов

Pivot предоставляет возможность настраивать порядок заголовков колонок. Используйте для этого свойство columnSort в объекте "structure". Внутри свойства вы можете указать следующие объекты:

  • "column_name" - объект с условиями сортировки для определенных типов колонок, определенных именем свойства из набора данных
  • "$default" - объект с условиями сортировки для всех колонок. Обратите внимание что этот тип сортировки не влияет на нижние заголовки, которые отображают отформатированные имена значений, например "oil (min)"), поскольку их порядок определен порядком полей в массиве values.
webix.ui({  
    id:"pivot",
    view:"pivot",
    structure: {
        columnSort: {
            "$default": {
                dir: "desc"
            },
            "year": {
                dir: "asc"
            }
        },
        rows: ["name"],
        columns: ["form", "continent", "year"],
        values: [
            { name:"gdp", operation:"sum", sort:"string"},   
            { name:"oil", operation:"sum"},
        ]
    }
});

В примере выше представлен "убывающий" порядок сортировки для всех колонок и "возрастающий" порядок для заголовков "year". Таким образом, все заголовки колонок будут отсортированы в порядке убывания, за исключением заголовков колонок "year".

Related sample:  Sorted Header

Доступ к исходным данным

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

$$("pivot").$$("data").attachEvent("onItemClick", function(id){
    var item = this.getItem(id);
    var pivot = this.getTopParentView();
 
    var source = item.$source;
    if (source){
     var raw = pivot.data.getItem(source[0]);
     webix.message("Based on "+source.length+"raw records. Base country: " + raw.name);
    } else {
        // сгруппировать данные в строке, собрать исходные данные каждого элемента
        var source = [];
        this.data.eachSubItem(id, function(obj){
            if (obj.$source) source.push.apply(source, obj.$source);
        });
    }
 
    var data = [].concat(source).map(id => pivot.data.getItem(id));
    $$("raw").clearAll();
    $$("raw").parse(data);
})

Related sample:  Access Raw Data

Наверх
If you have not checked yet, be sure to visit site of our main product Webix javascript dashboard framework and page of pivot table web product.