ui.pivot
Tool for processing and aggregating large data volumes.
Webix Pivot allows users to work with huge data volumes in 3 modes (table, tree, and chart), fine-tune aggregation and filtering means via a user friendly interface and export data to a desired format.
Pivot is based on Webix Jet that allows deep customizations of its look-and-feel.
Constructor
var pivot = webix.ui({
view:"pivot",
structure: {
rows: ["form", "name"],
columns: ["year"],
values: [
{ name: "gdp", operation: "sum"},
{ name: "oil", operation: "sum"}
],
filters: []
},
url: "remote/data"
});
Where to start
Methods
| adjust | adjusts the component to the size of the parent HTML container |
| app | sets the Jet App class for the widget |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| getChildViews | returns child views of the calling component |
| getFormView | returns master form for the input |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getService | returns a specified service of Pivot |
| getState | returns the reactive state object of Pivot |
| getStructure | returns the current Pivot structure |
| getTopParentView | returns the top parent view |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| mapEvent | routes events from one object to another |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| resize | adjusts the view to a new size |
| setStructure | sets the Pivot structure |
| show | makes the component visible |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
Events
| onAfterScroll | occurs when some webix view has been scrolled |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onDestruct | occurs when component destroyed |
| onEnter | fires when the Enter key has been pressed |
| onFilterChange | fires when value is changed in a filter field on the toolbar |
| onFocus | fires when a view gets focus |
| onInit | fires on view initialization |
| onItemClick | fires when a data item is clicked |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTabFocus | fires after a tab focus has been changed |
| onTimedKeyPress | fires after typing has been finished in the field |
| onTouchEnd | occurs when the touch event is ended |
| onTouchMove | occurs during touch movement |
| onTouchStart | fires when some webix view has been touched |
| onViewResize | fires when the size of a view has been changed by resizer |
| onViewShow | fires when any hidden view is shown |
Properties
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| body | defines the content of the view |
| borderless | used to hide the component borders |
| chart | defines settings for the Pivot chart |
| compact | toggles the compact mode of Pivot |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class that will be applied to the view container or the object with styles |
| datatable | defines configuration for the Pivot inner grid |
| defaultOperation | defines the default data operation |
| disabled | indicates whether an item is enabled |
| fields | defines data fields |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| keyPressTimeout | a delay between the key press and the action |
| locale | sets object with locale structure |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| mode | defines current display mode |
| on | allows attaching custom handlers to inner events of the component |
| operations | defines an object with custom operations |
| override | used to override default classes with new ones |
| predicates | defines custom predicates |
| readonly | disables the possibility to change Pivot configuration settings |
| structure | defines the current data structure of Pivot |
| url | defines a URL to fetch data from |
| width | sets the width of a widget |
Other
| $app | returns Jet App instance of the widget |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| config | all options from the initial component configuration |
| name | indicates the name of the component (a read-only property) |
Back to top