epiviz-chart-colors.html

<!-- Polymer dependency -->
<link rel="import" href="bower_components/polymer/polymer-element.html">

<!-- External Polymer Styles/elements dependency -->
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-dropdown-input/paper-dropdown-input.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="bower_components/paper-swatch-picker/paper-swatch-picker.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-label/iron-label.html">

<!--
`<epiviz-chart-colors>` is a view element that manages chart colors. 

All charts implement the `epiviz.ChartColorsBehavior` that manages this element.
-->

<dom-module id="epiviz-chart-colors">
    <template>
        <style>
            #formSettings {
                min-width: 500px;
            }

            #scrollContent {
                margin-bottom: 10px;
            }

            .color-item {
                display: block;
                text-align: center;
            }

            .container {
                display: grid;
                grid-auto-flow: column dense;
            }
        </style>

        <!-- local DOM goes here -->
        <div id="settings">
            <!--no-overlap horizontal-align="left" vertical-align="top"-->
            <paper-dialog id="modal" modal>
                <h2>Chart Color Settings</h2>
                <iron-form id="formSettings">
                    <form>
                        <div class="container">
                            <template id="colorPickers" is="dom-repeat" items="{{_getLabels(_measurements.*)}}">
                                <div class="color-item">
                                    <paper-swatch-picker id="[[_getId(item)]]" name="{{_getName(item)}}" color="[[_getColor(item)]]"></paper-swatch-picker>
                                    <iron-label for="{{_getId(item)}}">{{item}}</iron-label>
                                </div>
                            </template>
                        </div>

                        <div class="buttons container flex-end-justified">
                            <paper-button id="submit" on-tap="_submit" raised>Apply</paper-button>
                            <paper-button id="cancel" on-tap="_cancel" raised>Cancel</paper-button>
                        </div>
                    </form>
                </iron-form>
            </paper-dialog>
        </div>

    </template>

    <script>

        // Extend Polymer.Element base class
        class EpivizChartColors extends Polymer.Element {

            static get is() { return 'epiviz-chart-colors'; }

            static get properties() {
                return {
                    /**
                    * Default chart color labels.
                    *
                    * @type {Object<string, string>}
                    */
                    labels: {
                        type: Object,
                        notify: true
                    },

                    /**
                    * Default chart color palettes.
                    *
                    * @type {Array<epiviz.ui.charts.ColorPalette>}
                    */
                    palettes: {
                        type: Array,
                        notify: true
                    },

                    /**
                    * currently selected chart colors.
                    *
                    * @type {Object<string, string>}
                    */
                    selected: {
                        type: Object,
                        notify: true
                    },

                    _measurements: {
                        type: Array,
                        notify: true
                    }
                }
            }

            static get observers() {
                return [
                    /* observer array just like 1.x */
                ]
            }

            constructor() {
                super();
                // this.addEventListener('submit.click', e => this._submit(e));
                // this.addEventListener('cancel.click', e => this._cancel(e));
            }

            _sanitizeString(text) {
                return text.replace(/[^a-zA-Z0-9]/g, '');
            }

            connectedCallback() {
                var self = this;
                super.connectedCallback();

                this.$.formSettings.addEventListener('iron-form-submit', this._form_submit.bind(this));
                var colorPickers = this.$.colorPickers;
                colorPickers.addEventListener('dom-change', function(e) {
                    // auto-binding template is ready.
                    var labels = self.$.colorPickers.items;
                    var colorSwatch = self.shadowRoot.querySelectorAll("paper-swatch-picker");
                    colorSwatch.forEach(function(item, index) {
                        var defaultColors = item.defaultColors();
                        defaultColors[0] = self._getColor(labels[index]);
                        item.set('colorList', defaultColors);
                        item.set('color', self._getColor(labels[index]));
                    });
                });
            }

            disconnectedCallback() {
                super.connectedCallback();
            }

            /**
             * Get Color for a given label/Key.
             *
             * @param {string} label label/key to search for.
             *
             * @return {Object} color set for the given label
             */
            _getColor(label) { 
                return this.selected.getByKey(label);
            }

            /**
             * UI Helper function to find group
             *
             * @param {string} value index number
             * @param {number} expeced expected group
             * @return {boolean} returns True if value in expected
             */
            _isIndexGroup(value, expected) {
                if (value % 3 == expected) {
                    return true;
                }

                return false;
            }

            /**
             * UI Helper function to create Id for a given label (ignore spaces)
             *
             * @param {string} label string
             * 
             * @return {string} return label ignoring white spaces
             */
            _getId(label) {
                return this._sanitizeString(label.split(' ').join(''));
            }

            _getName(item) {
                return this._mList[item];
            }

            _getLabels(_measurements) {
                var order = this._measurements.map(x => {return x.id});

                this.labels.sort((a,b) => {
                    return order.indexOf(a) - order.indexOf(b);
                });

                return this.labels;
            }

            /**
             * handles form submit action
             */
            _submit(event) {
                this.$.formSettings.submit();
            }

            /**
             * handles form submit action
             */
            _form_submit(event) {
                var self = this;

                //collect all colors set
                var colors = [];
                for (var i = 0; i < this.labels.length; i++) {
                    var swatch = self.shadowRoot.querySelector('#' + this._getId(this.labels[i]));
                    colors.push(swatch.color);
                }

                self.selected = new epiviz.ui.charts.ColorPalette(colors, undefined, undefined, self.selected.keyIndices());

                // this.vals = event.detail;
                this.callback(colors);
                this.closeColors();
            }

            /**
             * handles form cancel action
             */
            _cancel(event) {
                this.closeColors();
            }

            /**
             * handles element modal show action
             */
            showColors(target, callback) {
                var self = this;
                // this.$.scrollContent.dialogElement = this.$.modal;
                this._mList = {}
                this._measurements.forEach(function(m) {
                    self._mList[m.id] = m.name;
                });

                this.callback = callback;
                this.$.modal.positionTarget = target;
                this.$.modal.open();
            }

            /**
             * handles element modal close action
             */
            closeColors() {
                this.$.modal.close();
            }
        };

        customElements.define(EpivizChartColors.is, EpivizChartColors);

    </script>
</dom-module>