chart-settings.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>
    /**
     * `ChartSettingsBehavior` object manages the `<epiviz-chart-settings>` element for each chart. 
     * All charts inherit this behavior to update chart settings.
     *
     * @polymerBehavior
    **/
    EpivizChartSettingsBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {};
            }

            /**
            * Shows the `<epiviz-chart-settings>` element
            */
            _showSettingsDialog() {
                var self = this;
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currSetting = this.shadowRoot.querySelector('epiviz-chart-settings');


                if (currSetting == null) {
                    var currSetting = document.createElement('epiviz-chart-settings');
                    // self.visualization().properties().customSettingsDefs
                    currSetting.setAttribute('defs', JSON.stringify(self.chart.properties().customSettingsDefs));
                    currSetting.setAttribute('vals', JSON.stringify(self.chartSettings));
                    currSetting.setAttribute('_measurements', JSON.stringify(self.measurements));
                    currSetting.showTooltip = self.showTooltip;
                    currSetting._colors= self.chart.colors();

                    chartContainer.appendChild(currSetting);
                }
                else {
                    currSetting.remove();

                    var currSetting = document.createElement('epiviz-chart-settings');

                    currSetting.setAttribute('defs', JSON.stringify(self.chart.properties().customSettingsDefs));
                    currSetting.setAttribute('vals', JSON.stringify(self.chartSettings));
                    currSetting.setAttribute('_measurements', JSON.stringify(self.measurements));
                    currSetting.showTooltip = self.showTooltip;

                    currSetting._colors= self.chart.colors();
                    chartContainer.appendChild(currSetting);
                }

                currSetting.showSettings(this.shadowRoot, function (newSettings, measurements, showTooltip) {
                    // self.chartSettings = newSettings;
                    self.set("chartSettings", newSettings);
                    self.set("measurements", measurements);

                    self.set("showTooltip", showTooltip);

                    if(self._initializeShowTracksDialog){
                        self._initializeShowTracksDialog();
                    }
                });
            }

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

                if (currSettingIcon == null) {
                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartSettingsIcon";
                    iconElem.icon = "settings";
                    iconElem.title = "modify chart settings";


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