chart-colors.html

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

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

<script>
    /**
     * `ChartColorsBehavior` manages the `<epiviz-chart-colors>` element for each chart. 
     * All charts inherit this behavior to update chart colors.
     *
     * @polymerBehavior
    **/
    EpivizChartColorsBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {};
            }

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

                if(currColors) {
                    currColors.remove();
                }

                var currColors = document.createElement('epiviz-chart-colors');
                currColors.setAttribute('labels', JSON.stringify(self.chart.colorLabels()));
                // currColors.setAttribute('_measurements', JSON.stringify(self.measurements));
                currColors._measurements = self.measurements;
                currColors.palettes = self.config.colorPalettes;
                currColors.selected = self.chart.colors();
                chartContainer.appendChild(currColors);

                currColors.showColors(this.shadowRoot, function (newColors) {
                    self.chartColors = newColors;
                });
            }

            /**
            * Initializes the `<epiviz-chart-colors>` element
            */
            _initializeColorsDialog() {
                var chartSettingsContainer = this.shadowRoot.querySelector('#chartSettingsContainer');
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currColorIcon = this.shadowRoot.querySelector('#chartColorsIcon');

                if (currColorIcon == null) {
                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartColorsIcon";
                    iconElem.icon = "image:color-lens";
                    iconElem.title = "modify chart colors";


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