"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//Application
var DataSvc_1 = require("../services/DataSvc");
var wjOlap = require("wijmo/wijmo.react.olap");
var Tabs_1 = require("./Tabs");
var GettingStarted = /** @class */ (function (_super) {
    __extends(GettingStarted, _super);
    function GettingStarted(props) {
        var _this = _super.call(this, props) || this;
        _this.dataSvc = DataSvc_1.DataSvc.default;
        _this.viewDefs = _this.dataSvc.initViewDefs();
        return _this;
    }
    GettingStarted.prototype.initializedPivotGrid = function (s) {
        this.pivotGrid = s;
    };
    GettingStarted.prototype.collapse = function (level) {
        this.pivotGrid.collapseRowsToLevel(level);
        this.pivotGrid.collapseColumnsToLevel(level);
    };
    // save/restore view definitions
    GettingStarted.prototype.saveView = function () {
        var ng = this.props.engine;
        if (ng.isViewDefined) {
            localStorage.viewDefinition = ng.viewDefinition;
        }
    };
    GettingStarted.prototype.loadView = function (def) {
        var ng = this.props.engine;
        if (def) {
            // load pre-defined view (against specific dataset)
            ng.viewDefinition = def;
        }
        else {
            // load view from localStorage (whatever the user saved)
            ng.viewDefinition = localStorage.viewDefinition;
        }
    };
    GettingStarted.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h3", null, "Introducing wijmo.olap Server"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "wijmo.olap"),
                " module contains controls that allow you to add Excel-like pivot table and pivot chart features to your JavaScript applications. Follow these steps to add wijmo.olap to your applications:"),
            React.createElement("ol", null,
                React.createElement("li", null,
                    "Add a ",
                    React.createElement("b", null, "PivotPanel"),
                    " control."),
                React.createElement("li", null,
                    "Add one or more ",
                    React.createElement("b", null, "PivotGrid"),
                    " and ",
                    React.createElement("b", null, "PivotChart"),
                    " controls to the page, and connect them to the ",
                    React.createElement("b", null, "PivotPanel"),
                    " by setting their ",
                    React.createElement("b", null, "itemsSource"),
                    "  property to the ",
                    React.createElement("b", null, "PivotPanel"),
                    " control."),
                React.createElement("li", null,
                    "Set the PivotPanel's ",
                    React.createElement("b", null, "itemsSource"),
                    " property to an array containing the raw data that you want to analyze, or to a string containing the URL of a data service based on our ",
                    React.createElement("a", { href: "http://www.componentone.com/Studio/Utilities/WebAPI" }, "WebAPI"),
                    ". Using data services is the recommended way to work with large data sets because it offloads all analysis work to the server, eliminating the need to download massive amounts of data. See this sample's ",
                    React.createElement("a", { href: "readme.txt", target: "_blank" }, "readme file"),
                    "for details."),
                React.createElement("li", null, "(Optional) Add the code to print, export, save and load views, and to view the definitions.")),
            React.createElement("p", null,
                "On doing this, a list of available fields will show in the ",
                React.createElement("b", null, "PivotPanel"),
                ", and users will be able to drag fields between summary areas to generate data summaries (also known as \"views\"). Users can also configure the fields by setting their headers, summary functions, filters, and formats."),
            React.createElement("p", null, "Users can analyze the data and print the results, export them to XLSX or PDF, and save the view definitions to be re-used later."),
            React.createElement("p", null, "Here is a simple example:"),
            React.createElement("h4", null, "Add a PivotPanel and a PivotGrid to the page"),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "PivotPanel"),
                " control is similar to Microsoft Excel's \"field list\" window that is associated with pivot tables and charts."),
            React.createElement("ol", null,
                React.createElement("li", null, "Add fields to the view by dragging or using checkboxes."),
                React.createElement("li", null, "Remove fields from the view by dragging them back to the top area, or by using their context menu."),
                React.createElement("li", null, "Configure the fields by using their context menu. You can modify their header, summary function, and format. Note that the format is used while grouping the data. You can, therefore, group the data by day, month, quarter or year by changing the format of the date fields for instance.")),
            React.createElement("p", null,
                "The ",
                React.createElement("b", null, "PivotGrid"),
                " control extends the ",
                React.createElement("b", null, "FlexGrid"),
                " control to support pivoting features. These include custom cell merging, hierarchical row and column groups, and a custom context menu, which allows users to configure the pivot fields and to drill-down into the data items that were used in the computation of specific summary cells."),
            React.createElement("div", { className: "mdl-grid", id: "theView" },
                React.createElement("div", { className: "mdl-cell mdl-cell--4-col" },
                    React.createElement(wjOlap.PivotPanel, { engine: this.props.engine })),
                React.createElement("div", { className: "mdl-cell mdl-cell--8-col" },
                    React.createElement(wjOlap.PivotGrid, { id: "thePivotGrid", initialized: this.initializedPivotGrid.bind(this), itemsSource: this.props.engine, showSelectedHeaders: 'All' })),
                React.createElement("div", { id: "collapseButtons" },
                    "Collapse rows/columns to level:",
                    React.createElement("button", { id: "b0", className: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect", onClick: this.collapse.bind(this, 0) }, "0"),
                    React.createElement("button", { id: "b1", className: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect", onClick: this.collapse.bind(this, 1) }, "1"),
                    React.createElement("button", { id: "b2", className: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect", onClick: this.collapse.bind(this, 2) }, "2"))),
            React.createElement("div", { className: "source-card mdl-card mdl-shadow--2dp" },
                React.createElement(Tabs_1.Tabs, { selected: 3 },
                    React.createElement(Tabs_1.TabPane, { label: "JSX" },
                        React.createElement("code", { className: "pane-content" },
                            React.createElement("div", { className: "mdl-grid", id: "theView1" },
                                '  <div className="mdl-cell mdl-cell--4-col">\n',
                                '      <wjOlap.PivotPanel\n',
                                '          engine={this.props.engine} >\n',
                                '      </wjOlap.PivotPanel>\n',
                                '  </div>\n',
                                '  <div className="mdl-cell mdl-cell--8-col">\n',
                                '      <wjOlap.PivotGrid\n',
                                '          id="thePivotGrid"\n',
                                '          initialized={this.initializedPivotGrid.bind(this)}\n',
                                '          itemsSource={this.props.engine}\n',
                                '          showSelectedHeaders={\'All\'}>\n',
                                '      </wjOlap.PivotGrid>\n',
                                '  </div>\n',
                                '  <div id="collapseButtons">\n',
                                '      Collapse rows/columns to level:\n',
                                '  <button id="b0" className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"\n',
                                '          onClick={this.collapse.bind(this, 0)}>0</button>\n',
                                '      <button id="b1" className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"\n',
                                '          onClick={this.collapse.bind(this, 1)}>1</button>\n',
                                '      <button id="b2" className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"\n',
                                '          onClick={this.collapse.bind(this, 2)}>2</button>\n',
                                '  </div>\n'))),
                    React.createElement(Tabs_1.TabPane, { label: "TS" },
                        React.createElement("code", { className: "pane-content" },
                            '  engine = new wjcOlap.PivotEngine({\n',
                            '                  itemsSource: this.dataSets[0].value,\n',
                            '                  rowFields: [\'Product\', \'Country\'],\n',
                            '                  valueFields: [\'Sales\', \'Downloads\'],\n',
                            '                  showRowTotals: wjcOlap.ShowTotals.Subtotals,\n',
                            '                  showColumnTotals: wjcOlap.ShowTotals.Subtotals,\n',
                            '              }),\n',
                            '  \n',
                            '  \n',
                            '  constructor(props) {\n',
                            '      super(props);\n',
                            '      this.viewDefs = this.dataSvc.initViewDefs();\n',
                            '  }\n',
                            '  \n',
                            '  initializedPivotGrid(s) {\n',
                            '      this.pivotGrid = s;\n',
                            '  }\n',
                            '  \n',
                            '  collapse(level: number) {\n',
                            '      this.pivotGrid.collapseRowsToLevel(level);\n',
                            '      this.pivotGrid.collapseColumnsToLevel(level);\n',
                            '  }\n',
                            '  \n')),
                    React.createElement(Tabs_1.TabPane, { label: "X" }))),
            React.createElement("p", null,
                "Use the ",
                React.createElement("b", null, "viewDefinition"),
                " property to save and restore view definitions. For example:"),
            React.createElement("button", { className: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect", onClick: this.saveView.bind(this) }, "Save View"),
            React.createElement("button", { className: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect", onClick: this.loadView.bind(this, null) }, "Load View"),
            React.createElement("p", null),
            React.createElement("p", null, "Or build a list of pre-defined views for the user to pick from. For example:"),
            React.createElement("ul", null, 
            // https://facebook.github.io/react/tips/communicate-between-components.html
            this.viewDefs.map(function (item, index) {
                return React.createElement("li", { key: index },
                    React.createElement("a", { href: "#theView", onClick: _this.loadView.bind(_this, item.def) }, item.name));
            })),
            React.createElement("div", { className: "source-card mdl-card mdl-shadow--2dp" },
                React.createElement(Tabs_1.Tabs, { selected: 3 },
                    React.createElement(Tabs_1.TabPane, { label: "JSX" },
                        React.createElement("code", { className: "pane-content" },
                            '  <button className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"\n',
                            '      onClick={this.saveView.bind(this)}>\n',
                            '      Save View\n',
                            '   </button>\n',
                            '  <button className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"\n',
                            '      onClick={this.loadView.bind(this, null)}>\n',
                            '      Load View\n',
                            '  </button>\n',
                            '  <p\n',
                            '      Or build a list of pre-defined views for the user to pick from. For example:\n',
                            '   </p>\n',
                            '  <ul>\n',
                            '      {\n',
                            '          this.viewDefs.map((item, index) => {\n',
                            '              return <li key={index}>\n',
                            '                  <a href="#theView" onClick={this.loadView.bind(this, item.def)}>\n',
                            '                      {item.name}\n',
                            '                  </a>\n',
                            '              </li>;\n',
                            '          })\n',
                            '      }\n',
                            '  </ul>\n')),
                    React.createElement(Tabs_1.TabPane, { label: "TS" },
                        React.createElement("code", { className: "pane-content" },
                            '  // save/restore view definitions\n',
                            '  saveView() {\n',
                            '      var ng = this.props.engine;\n',
                            '      if (ng.isViewDefined) {\n',
                            '          localStorage.viewDefinition = ng.viewDefinition;\n',
                            '      }\n',
                            '  }\n',
                            '  loadView(def?: string) {\n',
                            '      var ng = this.props.engine;\n',
                            '      if (def) {\n',
                            '          // load pre-defined view (against specific dataset)\n',
                            '          ng.viewDefinition = def;\n',
                            '      } else {\n',
                            '          // load view from localStorage (whatever the user saved)\n',
                            '          ng.viewDefinition = localStorage.viewDefinition;\n',
                            '      }\n',
                            '  }\n')),
                    React.createElement(Tabs_1.TabPane, { label: "X" }))));
    };
    return GettingStarted;
}(React.Component));
exports.GettingStarted = GettingStarted;
//# sourceMappingURL=GettingStarted.js.map