chart-fixed-axis-toggle.html

<!-- External Polymer Styles/elements dependency -->
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<!-- Epiviz element dependency -->
<link rel="import" href="epiviz-chart-settings.html">

<script>
    /**
     * `FixedAxisBehavior` object toggles the fixed axis on StackedLinePlots. 
     * <epiviz-multistacked-line-plot> inherit this behavior to update chart settings.
     *
     * @polymerBehavior
    **/
    EpivizFixedAxisBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {
                    toggleFixed: {
                        type: Boolean
                    }
                };
            }

            /**
            * Shows the `<epiviz-chart-settings>` element
            */
            _showFixedAxisDialog() {
                var self = this;
                self.toggleFixed = !self.toggleFixed;

                var currSettingIcon = this.shadowRoot.querySelector('#chartFixedAxisIcon');

                if (self.toggleFixed) {
                    currSettingIcon.className = "fa fa-link";
                } else {
                    currSettingIcon.className = "fa fa-chain-broken";
                }

                // self.chartSettings["autoScale"] = self.toggleFixed;
                self.set("chartSettings.autoScale", self.toggleFixed);
            }

            /**
            * Initializes the `<epiviz-chart-settings>` element
            */
            _initializeFixedAxisDialog() {
                var FixedAxisContainer = this.shadowRoot.querySelector('#chartSettingsContainer');
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currSettingIcon = this.shadowRoot.querySelector('#chartFixedAxisIcon');

                this.toggleFixed = this.chartSettings["autoScale"];

                if (currSettingIcon == null) {

                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartFixedAxisIcon";
                    iconElem.title = "toggle auto/fixed scale";

                    if (this.toggleFixed) {
                        iconElem.className = "fa fa-link";
                    } else {
                        iconElem.className = "fa fa-chain-broken";
                    }

                    iconElem.addEventListener("click", this._showFixedAxisDialog.bind(this));
                    FixedAxisContainer.appendChild(iconElem);
                }
            }
        }
    }
</script>