@carbon/charts 0.54.13 → 0.54.14

package/components/essentials/color-scale-legend.d.ts

@@ -5,7 +5,13 @@ export declare class ColorScaleLegend extends Legend {
     renderType: RenderTypes;
     private gradient_id;
     init(): void;
-    handleAxisComplete: (event: CustomEvent<any>) => void;
+    handleAxisCompleteEvent: (event: CustomEvent<any>) => void;
     render(animate?: boolean): void;
+    drawLinear(colorPairing: any, legendGroupElement: any, barWidth: any): void;
+    /**
+     * Renders quantized legend
+     * @returns number (range start)
+     */
+    drawQuantize(colorPairing: any, colorScheme: any, customColorsEnabled: any, legendGroupElement: any, barWidth: any): number;
     destroy(): void;
 }

package/components/essentials/color-scale-legend.js

@@ -20,7 +20,7 @@ import { DOMUtils } from '../../services';
 // D3 imports
 import { axisBottom } from 'd3-axis';
 import { scaleBand, scaleLinear } from 'd3-scale';
-import { interpolateRound, quantize } from 'd3-interpolate';
+import { interpolateNumber, quantize } from 'd3-interpolate';
 var ColorScaleLegend = /** @class */ (function (_super) {
     __extends(ColorScaleLegend, _super);
     function ColorScaleLegend() {
@@ -28,7 +28,8 @@ var ColorScaleLegend = /** @class */ (function (_super) {
         _this.type = 'color-legend';
         _this.renderType = RenderTypes.SVG;
         _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
-        _this.handleAxisComplete = function (event) {
+        // Position legend after axis have rendered
+        _this.handleAxisCompleteEvent = function (event) {
             var svg = _this.getComponentContainer();
             var width = DOMUtils.getSVGElementSize(svg, {
                 useAttrs: true,
@@ -37,7 +38,7 @@ var ColorScaleLegend = /** @class */ (function (_super) {
             if (width > Configuration.legend.color.barWidth && !isDataLoading) {
                 var title = Tools.getProperty(_this.getOptions(), 'heatmap', 'colorLegend', 'title');
                 var cartesianScales = _this.services.cartesianScales;
-                // Get available chart area
+                // Get axis width & start/end positions
                 var mainXScale = cartesianScales.getMainXScale();
                 var xDimensions = mainXScale.range();
                 // Align legend with the axis
@@ -45,9 +46,9 @@ var ColorScaleLegend = /** @class */ (function (_super) {
                     svg.select('g.legend').attr('transform', "translate(" + xDimensions[0] + ", 0)");
                     if (title) {
                         var textWidth = DOMUtils.getSVGElementSize(svg.select('g.legend-title').select('text'), { useBBox: true }).width;
-                        // -9 since LEFT y-axis labels are moved towards the left by 9 by d3
+                        // D3 moves the LEFT y-axis labels by 9
                         var availableSpace = xDimensions[0] - textWidth - 9;
-                        // If space is available align the the label with the axis labels
+                        // If space is available, align the label with the axis labels
                         if (availableSpace > 1) {
                             svg.select('g.legend-title').attr('transform', "translate(" + availableSpace + ", 0)");
                         }
@@ -60,45 +61,50 @@ var ColorScaleLegend = /** @class */ (function (_super) {
                     }
                 }
             }
+            else {
+                // Default state
+                svg.select('g.legend-title').attr('transform', "translate(0, 0)");
+            }
         };
         return _this;
     }
     ColorScaleLegend.prototype.init = function () {
         var eventsFragment = this.services.events;
         // Highlight correct circle on legend item hovers
-        eventsFragment.addEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+        eventsFragment.addEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisCompleteEvent);
     };
     ColorScaleLegend.prototype.render = function (animate) {
         if (animate === void 0) { animate = false; }
         var options = this.getOptions();
+        var svg = this.getComponentContainer();
+        var width = DOMUtils.getSVGElementSize(svg, {
+            useAttrs: true,
+        }).width;
         var customColors = Tools.getProperty(options, 'color', 'gradient', 'colors');
         var colorScaleType = Tools.getProperty(options, 'heatmap', 'colorLegend', 'type');
         var colorPairingOption = Tools.getProperty(options, 'color', 'pairing', 'option');
         var title = Tools.getProperty(options, 'heatmap', 'colorLegend', 'title');
-        var customColorsEnabled = !Tools.isEmpty(customColors);
-        var domain = this.model.getValueDomain();
-        var svg = this.getComponentContainer();
         // Clear DOM if loading
         var isDataLoading = Tools.getProperty(this.getOptions(), 'data', 'loading');
         if (isDataLoading) {
             svg.html('');
             return;
         }
-        var legend = DOMUtils.appendOrSelect(svg, 'g.legend');
-        var axis = DOMUtils.appendOrSelect(legend, 'g.legend-axis');
-        var width = DOMUtils.getSVGElementSize(svg, {
-            useAttrs: true,
-        }).width;
-        var barWidth = Configuration.legend.color.barWidth;
-        if (width <= Configuration.legend.color.barWidth) {
-            barWidth = width;
-        }
+        var customColorsEnabled = !Tools.isEmpty(customColors);
+        var domain = this.model.getValueDomain();
+        var useDefaultBarWidth = !(width <= Configuration.legend.color.barWidth);
+        var barWidth = useDefaultBarWidth
+            ? Configuration.legend.color.barWidth
+            : width;
+        var legendGroupElement = DOMUtils.appendOrSelect(svg, 'g.legend');
+        var axisElement = DOMUtils.appendOrSelect(legendGroupElement, 'g.legend-axis');
+        // Render title if it exists
         if (title) {
             var legendTitleGroup = DOMUtils.appendOrSelect(svg, 'g.legend-title');
             var legendTitle = DOMUtils.appendOrSelect(legendTitleGroup, 'text');
             legendTitle.text(title).attr('dy', '0.7em');
             // Move the legend down by 16 pixels to display legend text on top
-            legend.attr('transform', "translate(0, 16)");
+            legendGroupElement.attr('transform', "translate(0, 16)");
         }
         // If domain consists of negative and positive values, use diverging palettes
         var colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
@@ -128,107 +134,95 @@ var ColorScaleLegend = /** @class */ (function (_super) {
             // Use custom colors
             colorPairing = customColors;
         }
-        if (colorScaleType === ColorLegendType.LINEAR) {
-            var stopLengthPercentage_1 = 100 / (colorPairing.length - 1);
-            // Generate the gradient
-            var linearGradient = DOMUtils.appendOrSelect(legend, 'linearGradient');
-            linearGradient
-                .attr('id', this.gradient_id + "-legend")
-                .selectAll('stop')
-                .data(colorPairing)
-                .enter()
-                .append('stop')
-                .attr('offset', function (_, i) { return i * stopLengthPercentage_1 + "%"; })
-                .attr('class', function (_, i) { return colorPairing[i]; })
-                .attr('stop-color', function (d) { return d; });
-            // Create the legend container
-            var rectangle = DOMUtils.appendOrSelect(legend, 'rect');
-            rectangle
-                .attr('width', barWidth)
-                .attr('height', Configuration.legend.color.barHeight)
-                .style('fill', "url(#" + this.gradient_id + "-legend)");
-            // Create scale & ticks
-            var linearScale = scaleLinear()
-                .domain(domain)
-                .range([0, barWidth]);
-            domain.splice(1, 0, (domain[0] + domain[1]) / 2);
-            var xAxis = axisBottom(linearScale)
-                .tickSize(0)
-                .tickValues(domain);
-            // Align axes at the bottom of the rectangle and delete the domain line
-            axis.attr('transform', "translate(0," + Configuration.legend.color.axisYTranslation + ")").call(xAxis);
-            // Remove domain
-            axis.select('.domain').remove();
-            // Align text to fit in container
-            axis.style('text-anchor', 'start');
-        }
-        else if (colorScaleType === ColorLegendType.QUANTIZE) {
-            // Generate equal chunks between range to act as ticks
-            var interpolator = interpolateRound(domain[0], domain[1]);
-            var quant_1 = quantize(interpolator, colorPairing.length);
-            // If divergent && non-custom color, remove 0/white from being displayed
-            if (!customColorsEnabled && colorScheme === 'diverge') {
-                colorPairing.splice(colorPairing.length / 2, 1);
-            }
-            var colorScaleBand_1 = scaleBand()
-                .domain(colorPairing)
-                .range([0, barWidth]);
-            // Render the quantized rectangles
-            var rectangle = DOMUtils.appendOrSelect(legend, 'g.quantized-rect');
-            rectangle
-                .selectAll('rect')
-                .data(colorScaleBand_1.domain())
-                .join('rect')
-                .attr('x', function (d) { return colorScaleBand_1(d); })
-                .attr('y', 0)
-                .attr('width', Math.max(0, colorScaleBand_1.bandwidth()) - 1)
-                .attr('height', Configuration.legend.color.barHeight)
-                .attr('class', function (d) { return d; })
-                .attr('fill', function (d) { return d; });
-            var xAxis = axisBottom(colorScaleBand_1)
-                .tickSize(0)
-                .tickValues(colorPairing)
-                .tickFormat(function (_, i) {
-                // Display every other tick to create space
-                if (!customColorsEnabled &&
-                    ((i + 1) % 2 === 0 || i === colorPairing.length - 1)) {
-                    return null;
-                }
-                // Use the quant interpolators as ticks
-                return quant_1[i].toString();
-            });
-            // Align axis to match bandwidth start after initial (white)
-            var axisTranslation = colorScaleBand_1.bandwidth() / 2;
-            axis.attr('transform', "translate(" + (!customColorsEnabled && colorScheme === 'diverge' ? '-' : '') + axisTranslation + ", " + Configuration.legend.color.axisYTranslation + ")").call(xAxis);
-            // Append the last tick
-            var firstTick = axis.select('g.tick').clone(true);
-            firstTick
-                .attr('transform', "translate(" + (barWidth +
-                (!customColorsEnabled && colorScheme === 'diverge'
-                    ? axisTranslation
-                    : -axisTranslation)) + ", 0)")
-                .classed('final-tick', true)
-                .select('text')
-                .text(quant_1[quant_1.length - 1]);
-            axis.enter().append(firstTick.node());
-            axis.select('.domain').remove();
+        // Generate equal chunks between range to act as ticks
+        var interpolator = interpolateNumber(domain[0], domain[1]);
+        var quant = quantize(interpolator, 3);
+        // Create scale & ticks
+        var linearScale = scaleLinear().domain(domain).range([0, barWidth]);
+        var legendAxis = axisBottom(linearScale)
+            .tickSize(0)
+            .tickValues(quant);
+        switch (colorScaleType) {
+            case ColorLegendType.LINEAR:
+                this.drawLinear(colorPairing, legendGroupElement, barWidth);
+                break;
+            case ColorLegendType.QUANTIZE:
+                var rangeStart = this.drawQuantize(colorPairing, colorScheme, customColorsEnabled, legendGroupElement, barWidth);
+                // Using range provided by drawQuantize for alignment purposes
+                linearScale.range([rangeStart, barWidth]);
+                break;
+            default:
+                throw Error('Entered color legend type is not supported.');
         }
-        else {
-            throw Error('Entered color legend type is not supported.');
-        }
-        // Translate last axis tick if barWidth equals chart width
-        if (width <= Configuration.legend.color.barWidth) {
-            var lastTick = axis.select('g.tick:last-of-type text');
-            var width_1 = DOMUtils.getSVGElementSize(lastTick, {
-                useBBox: true,
-            }).width;
-            lastTick.attr('x', "-" + width_1);
+        // Align axes at the bottom of the rectangle and delete the domain line
+        axisElement
+            .attr('transform', "translate(0," + Configuration.legend.color.axisYTranslation + ")")
+            .call(legendAxis);
+        // Remove auto generated axis bottom line
+        axisElement.select('.domain').remove();
+        // Translate first/last axis tick if barWidth equals chart width
+        // Ensures text is not clipped when default bar width (300px) is not used
+        axisElement
+            .select('g.tick:last-of-type text')
+            .style('text-anchor', useDefaultBarWidth ? 'middle' : 'end');
+        axisElement
+            .select('g.tick:first-of-type text')
+            .style('text-anchor', useDefaultBarWidth ? 'middle' : 'start');
+    };
+    // Renders gradient legend
+    ColorScaleLegend.prototype.drawLinear = function (colorPairing, legendGroupElement, barWidth) {
+        var stopLengthPercentage = 100 / (colorPairing.length - 1);
+        // Generate the gradient
+        var linearGradient = DOMUtils.appendOrSelect(legendGroupElement, 'linearGradient');
+        // Rendering gradient
+        linearGradient
+            .attr('id', this.gradient_id + "-legend")
+            .selectAll('stop')
+            .data(colorPairing)
+            .enter()
+            .append('stop')
+            .attr('offset', function (_, i) { return i * stopLengthPercentage + "%"; })
+            .attr('class', function (_, i) { return colorPairing[i]; })
+            .attr('stop-color', function (d) { return d; });
+        // Create the legend container
+        var rectangle = DOMUtils.appendOrSelect(legendGroupElement, 'rect');
+        rectangle
+            .attr('width', barWidth)
+            .attr('height', Configuration.legend.color.barHeight)
+            .style('fill', "url(#" + this.gradient_id + "-legend)");
+    };
+    /**
+     * Renders quantized legend
+     * @returns number (range start)
+     */
+    ColorScaleLegend.prototype.drawQuantize = function (colorPairing, colorScheme, customColorsEnabled, legendGroupElement, barWidth) {
+        // If divergent && non-custom color, remove 0/white from being displayed
+        if (!customColorsEnabled && colorScheme === 'diverge') {
+            colorPairing.splice(colorPairing.length / 2, 1);
         }
+        var colorScaleBand = scaleBand()
+            .domain(colorPairing)
+            .range([0, barWidth]);
+        // Render the quantized rectangles
+        var rectangle = DOMUtils.appendOrSelect(legendGroupElement, 'g.quantized-rect');
+        rectangle
+            .selectAll('rect')
+            .data(colorScaleBand.domain())
+            .join('rect')
+            .attr('x', function (d) { return colorScaleBand(d); })
+            .attr('y', 0)
+            .attr('width', Math.max(0, colorScaleBand.bandwidth() - 1))
+            .attr('height', Configuration.legend.color.barHeight)
+            .attr('class', function (d) { return d; })
+            .attr('fill', function (d) { return d; });
+        return (!customColorsEnabled && colorScheme) === 'mono'
+            ? colorScaleBand.bandwidth() - 1
+            : 0;
     };
     ColorScaleLegend.prototype.destroy = function () {
         // Remove legend listeners
         var eventsFragment = this.services.events;
-        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisCompleteEvent);
     };
     return ColorScaleLegend;
 }(Legend));

package/components/essentials/color-scale-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-scale-legend.js","sourceRoot":"","sources":["color-scale-legend.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from '../../tools';\nimport { ColorLegendType, Events, RenderTypes } from '../../interfaces';\nimport * as Configuration from '../../configuration';\nimport { Legend } from './legend';\nimport { DOMUtils } from '../../services';\n\n// D3 imports\nimport { axisBottom } from 'd3-axis';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { interpolateRound, quantize } from 'd3-interpolate';\n\nexport class ColorScaleLegend extends Legend {\n\ttype = 'color-legend';\n\trenderType = RenderTypes.SVG;\n\n\tprivate gradient_id =\n\t\t'gradient-id-' + Math.floor(Math.random() * 99999999999);\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Axis.RENDER_COMPLETE,\n\t\t\tthis.handleAxisComplete\n\t\t);\n\t}\n\n\thandleAxisComplete = (event: CustomEvent) => {\n\t\tconst svg = this.getComponentContainer();\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(svg, {\n\t\t\tuseAttrs: true,\n\t\t});\n\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\tif (width > Configuration.legend.color.barWidth && !isDataLoading) {\n\t\t\tconst title = Tools.getProperty(\n\t\t\t\tthis.getOptions(),\n\t\t\t\t'heatmap',\n\t\t\t\t'colorLegend',\n\t\t\t\t'title'\n\t\t\t);\n\n\t\t\tconst { cartesianScales } = this.services;\n\t\t\t// Get available chart area\n\t\t\tconst mainXScale = cartesianScales.getMainXScale();\n\n\t\t\tconst xDimensions = mainXScale.range();\n\n\t\t\t// Align legend with the axis\n\t\t\tif (xDimensions[0] > 1) {\n\t\t\t\tsvg.select('g.legend').attr(\n\t\t\t\t\t'transform',\n\t\t\t\t\t`translate(${xDimensions[0]}, 0)`\n\t\t\t\t);\n\n\t\t\t\tif (title) {\n\t\t\t\t\tconst {\n\t\t\t\t\t\twidth: textWidth,\n\t\t\t\t\t} = DOMUtils.getSVGElementSize(\n\t\t\t\t\t\tsvg.select('g.legend-title').select('text'),\n\t\t\t\t\t\t{ useBBox: true }\n\t\t\t\t\t);\n\n\t\t\t\t\t// -9 since LEFT y-axis labels are moved towards the left by 9 by d3\n\t\t\t\t\tconst availableSpace = xDimensions[0] - textWidth - 9;\n\n\t\t\t\t\t// If space is available align the the label with the axis labels\n\t\t\t\t\tif (availableSpace > 1) {\n\t\t\t\t\t\tsvg.select('g.legend-title').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${availableSpace}, 0)`\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Move the legend down by 16 pixels to display legend text on top\n\t\t\t\t\t\tsvg.select('g.legend').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${xDimensions[0]}, 16)`\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Align legend title with start of axis\n\t\t\t\t\t\tsvg.select('g.legend-title').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${xDimensions[0]}, 0)`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\trender(animate = false) {\n\t\tconst options = this.getOptions();\n\n\t\tconst customColors = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'color',\n\t\t\t'gradient',\n\t\t\t'colors'\n\t\t);\n\n\t\tconst colorScaleType = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'heatmap',\n\t\t\t'colorLegend',\n\t\t\t'type'\n\t\t);\n\n\t\tlet colorPairingOption = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'color',\n\t\t\t'pairing',\n\t\t\t'option'\n\t\t);\n\n\t\tconst title = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'heatmap',\n\t\t\t'colorLegend',\n\t\t\t'title'\n\t\t);\n\n\t\tconst customColorsEnabled = !Tools.isEmpty(customColors);\n\t\tconst domain = this.model.getValueDomain();\n\n\t\tconst svg = this.getComponentContainer();\n\n\t\t// Clear DOM if loading\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\tif (isDataLoading) {\n\t\t\tsvg.html('');\n\t\t\treturn;\n\t\t}\n\n\t\tconst legend = DOMUtils.appendOrSelect(svg, 'g.legend');\n\t\tconst axis = DOMUtils.appendOrSelect(legend, 'g.legend-axis');\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(svg, {\n\t\t\tuseAttrs: true,\n\t\t});\n\n\t\tlet barWidth = Configuration.legend.color.barWidth;\n\t\tif (width <= Configuration.legend.color.barWidth) {\n\t\t\tbarWidth = width;\n\t\t}\n\n\t\tif (title) {\n\t\t\tconst legendTitleGroup = DOMUtils.appendOrSelect(\n\t\t\t\tsvg,\n\t\t\t\t'g.legend-title'\n\t\t\t);\n\t\t\tconst legendTitle = DOMUtils.appendOrSelect(\n\t\t\t\tlegendTitleGroup,\n\t\t\t\t'text'\n\t\t\t);\n\t\t\tlegendTitle.text(title).attr('dy', '0.7em');\n\n\t\t\t// Move the legend down by 16 pixels to display legend text on top\n\t\t\tlegend.attr('transform', `translate(0, 16)`);\n\t\t}\n\n\t\t// If domain consists of negative and positive values, use diverging palettes\n\t\tconst colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';\n\n\t\t// Use default color pairing options if not in defined range\n\t\tif (\n\t\t\tcolorPairingOption < 1 &&\n\t\t\tcolorPairingOption > 4 &&\n\t\t\tcolorScheme === 'mono'\n\t\t) {\n\t\t\tcolorPairingOption = 1;\n\t\t} else if (\n\t\t\tcolorPairingOption < 1 &&\n\t\t\tcolorPairingOption > 2 &&\n\t\t\tcolorScheme === 'diverge'\n\t\t) {\n\t\t\tcolorPairingOption = 1;\n\t\t}\n\n\t\tlet colorPairing = [];\n\t\t// Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette\n\t\tlet colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;\n\n\t\tif (!customColorsEnabled) {\n\t\t\t// Add class names to list and the amount based on the color scheme\n\t\t\tfor (let i = 1; i < colorGroupingLength + 1; i++) {\n\t\t\t\tcolorPairing.push(\n\t\t\t\t\tcolorScaleType === ColorLegendType.LINEAR\n\t\t\t\t\t\t? `stop-color-${colorScheme}-${colorPairingOption}-${i}`\n\t\t\t\t\t\t: `fill-${colorScheme}-${colorPairingOption}-${i}`\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t// Use custom colors\n\t\t\tcolorPairing = customColors;\n\t\t}\n\n\t\tif (colorScaleType === ColorLegendType.LINEAR) {\n\t\t\tconst stopLengthPercentage = 100 / (colorPairing.length - 1);\n\n\t\t\t// Generate the gradient\n\t\t\tconst linearGradient = DOMUtils.appendOrSelect(\n\t\t\t\tlegend,\n\t\t\t\t'linearGradient'\n\t\t\t);\n\t\t\tlinearGradient\n\t\t\t\t.attr('id', `${this.gradient_id}-legend`)\n\t\t\t\t.selectAll('stop')\n\t\t\t\t.data(colorPairing)\n\t\t\t\t.enter()\n\t\t\t\t.append('stop')\n\t\t\t\t.attr('offset', (_, i) => `${i * stopLengthPercentage}%`)\n\t\t\t\t.attr('class', (_, i) => colorPairing[i])\n\t\t\t\t.attr('stop-color', (d) => d);\n\n\t\t\t// Create the legend container\n\t\t\tconst rectangle = DOMUtils.appendOrSelect(legend, 'rect');\n\t\t\trectangle\n\t\t\t\t.attr('width', barWidth)\n\t\t\t\t.attr('height', Configuration.legend.color.barHeight)\n\t\t\t\t.style('fill', `url(#${this.gradient_id}-legend)`);\n\n\t\t\t// Create scale & ticks\n\t\t\tconst linearScale = scaleLinear()\n\t\t\t\t.domain(domain)\n\t\t\t\t.range([0, barWidth]);\n\t\t\tdomain.splice(1, 0, (domain[0] + domain[1]) / 2);\n\n\t\t\tconst xAxis = axisBottom(linearScale)\n\t\t\t\t.tickSize(0)\n\t\t\t\t.tickValues(domain);\n\n\t\t\t// Align axes at the bottom of the rectangle and delete the domain line\n\t\t\taxis.attr(\n\t\t\t\t'transform',\n\t\t\t\t`translate(0,${Configuration.legend.color.axisYTranslation})`\n\t\t\t).call(xAxis);\n\n\t\t\t// Remove domain\n\t\t\taxis.select('.domain').remove();\n\n\t\t\t// Align text to fit in container\n\t\t\taxis.style('text-anchor', 'start');\n\t\t} else if (colorScaleType === ColorLegendType.QUANTIZE) {\n\t\t\t// Generate equal chunks between range to act as ticks\n\t\t\tconst interpolator = interpolateRound(domain[0], domain[1]);\n\t\t\tconst quant = quantize(interpolator, colorPairing.length);\n\n\t\t\t// If divergent && non-custom color, remove 0/white from being displayed\n\t\t\tif (!customColorsEnabled && colorScheme === 'diverge') {\n\t\t\t\tcolorPairing.splice(colorPairing.length / 2, 1);\n\t\t\t}\n\n\t\t\tconst colorScaleBand = scaleBand()\n\t\t\t\t.domain(colorPairing)\n\t\t\t\t.range([0, barWidth]);\n\n\t\t\t// Render the quantized rectangles\n\t\t\tconst rectangle = DOMUtils.appendOrSelect(\n\t\t\t\tlegend,\n\t\t\t\t'g.quantized-rect'\n\t\t\t);\n\n\t\t\trectangle\n\t\t\t\t.selectAll('rect')\n\t\t\t\t.data(colorScaleBand.domain())\n\t\t\t\t.join('rect')\n\t\t\t\t.attr('x', (d) => colorScaleBand(d))\n\t\t\t\t.attr('y', 0)\n\t\t\t\t.attr('width', Math.max(0, colorScaleBand.bandwidth()) - 1)\n\t\t\t\t.attr('height', Configuration.legend.color.barHeight)\n\t\t\t\t.attr('class', (d) => d)\n\t\t\t\t.attr('fill', (d) => d);\n\n\t\t\tconst xAxis = axisBottom(colorScaleBand)\n\t\t\t\t.tickSize(0)\n\t\t\t\t.tickValues(colorPairing)\n\t\t\t\t.tickFormat((_, i) => {\n\t\t\t\t\t// Display every other tick to create space\n\t\t\t\t\tif (\n\t\t\t\t\t\t!customColorsEnabled &&\n\t\t\t\t\t\t((i + 1) % 2 === 0 || i === colorPairing.length - 1)\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Use the quant interpolators as ticks\n\t\t\t\t\treturn quant[i].toString();\n\t\t\t\t});\n\n\t\t\t// Align axis to match bandwidth start after initial (white)\n\t\t\tconst axisTranslation = colorScaleBand.bandwidth() / 2;\n\t\t\taxis.attr(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${\n\t\t\t\t\t!customColorsEnabled && colorScheme === 'diverge' ? '-' : ''\n\t\t\t\t}${axisTranslation}, ${\n\t\t\t\t\tConfiguration.legend.color.axisYTranslation\n\t\t\t\t})`\n\t\t\t).call(xAxis);\n\n\t\t\t// Append the last tick\n\t\t\tconst firstTick = axis.select('g.tick').clone(true);\n\t\t\tfirstTick\n\t\t\t\t.attr(\n\t\t\t\t\t'transform',\n\t\t\t\t\t`translate(${\n\t\t\t\t\t\tbarWidth +\n\t\t\t\t\t\t(!customColorsEnabled && colorScheme === 'diverge'\n\t\t\t\t\t\t\t? axisTranslation\n\t\t\t\t\t\t\t: -axisTranslation)\n\t\t\t\t\t}, 0)`\n\t\t\t\t)\n\t\t\t\t.classed('final-tick', true)\n\t\t\t\t.select('text')\n\t\t\t\t.text(quant[quant.length - 1]);\n\n\t\t\taxis.enter().append(firstTick.node());\n\t\t\taxis.select('.domain').remove();\n\t\t} else {\n\t\t\tthrow Error('Entered color legend type is not supported.');\n\t\t}\n\n\t\t// Translate last axis tick if barWidth equals chart width\n\t\tif (width <= Configuration.legend.color.barWidth) {\n\t\t\tconst lastTick = axis.select('g.tick:last-of-type text');\n\t\t\tconst { width } = DOMUtils.getSVGElementSize(lastTick, {\n\t\t\t\tuseBBox: true,\n\t\t\t});\n\t\t\tlastTick.attr('x', `-${width}`);\n\t\t}\n\t}\n\n\tdestroy() {\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Axis.RENDER_COMPLETE,\n\t\t\tthis.handleAxisComplete\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"color-scale-legend.js","sourceRoot":"","sources":["color-scale-legend.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from '../../tools';\nimport { ColorLegendType, Events, RenderTypes } from '../../interfaces';\nimport * as Configuration from '../../configuration';\nimport { Legend } from './legend';\nimport { DOMUtils } from '../../services';\n\n// D3 imports\nimport { axisBottom } from 'd3-axis';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { interpolateNumber, quantize } from 'd3-interpolate';\n\nexport class ColorScaleLegend extends Legend {\n\ttype = 'color-legend';\n\trenderType = RenderTypes.SVG;\n\n\tprivate gradient_id =\n\t\t'gradient-id-' + Math.floor(Math.random() * 99999999999);\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Axis.RENDER_COMPLETE,\n\t\t\tthis.handleAxisCompleteEvent\n\t\t);\n\t}\n\n\t// Position legend after axis have rendered\n\thandleAxisCompleteEvent = (event: CustomEvent) => {\n\t\tconst svg = this.getComponentContainer();\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(svg, {\n\t\t\tuseAttrs: true,\n\t\t});\n\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\tif (width > Configuration.legend.color.barWidth && !isDataLoading) {\n\t\t\tconst title = Tools.getProperty(\n\t\t\t\tthis.getOptions(),\n\t\t\t\t'heatmap',\n\t\t\t\t'colorLegend',\n\t\t\t\t'title'\n\t\t\t);\n\n\t\t\tconst { cartesianScales } = this.services;\n\n\t\t\t// Get axis width & start/end positions\n\t\t\tconst mainXScale = cartesianScales.getMainXScale();\n\t\t\tconst xDimensions = mainXScale.range();\n\n\t\t\t// Align legend with the axis\n\t\t\tif (xDimensions[0] > 1) {\n\t\t\t\tsvg.select('g.legend').attr(\n\t\t\t\t\t'transform',\n\t\t\t\t\t`translate(${xDimensions[0]}, 0)`\n\t\t\t\t);\n\n\t\t\t\tif (title) {\n\t\t\t\t\tconst {\n\t\t\t\t\t\twidth: textWidth,\n\t\t\t\t\t} = DOMUtils.getSVGElementSize(\n\t\t\t\t\t\tsvg.select('g.legend-title').select('text'),\n\t\t\t\t\t\t{ useBBox: true }\n\t\t\t\t\t);\n\n\t\t\t\t\t// D3 moves the LEFT y-axis labels by 9\n\t\t\t\t\tconst availableSpace = xDimensions[0] - textWidth - 9;\n\n\t\t\t\t\t// If space is available, align the label with the axis labels\n\t\t\t\t\tif (availableSpace > 1) {\n\t\t\t\t\t\tsvg.select('g.legend-title').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${availableSpace}, 0)`\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Move the legend down by 16 pixels to display legend text on top\n\t\t\t\t\t\tsvg.select('g.legend').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${xDimensions[0]}, 16)`\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Align legend title with start of axis\n\t\t\t\t\t\tsvg.select('g.legend-title').attr(\n\t\t\t\t\t\t\t'transform',\n\t\t\t\t\t\t\t`translate(${xDimensions[0]}, 0)`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\t// Default state\n\t\t\tsvg.select('g.legend-title').attr('transform', `translate(0, 0)`);\n\t\t}\n\t};\n\n\trender(animate = false) {\n\t\tconst options = this.getOptions();\n\t\tconst svg = this.getComponentContainer();\n\t\tconst { width } = DOMUtils.getSVGElementSize(svg, {\n\t\t\tuseAttrs: true,\n\t\t});\n\n\t\tconst customColors = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'color',\n\t\t\t'gradient',\n\t\t\t'colors'\n\t\t);\n\n\t\tconst colorScaleType = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'heatmap',\n\t\t\t'colorLegend',\n\t\t\t'type'\n\t\t);\n\n\t\tlet colorPairingOption = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'color',\n\t\t\t'pairing',\n\t\t\t'option'\n\t\t);\n\n\t\tconst title = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'heatmap',\n\t\t\t'colorLegend',\n\t\t\t'title'\n\t\t);\n\n\t\t// Clear DOM if loading\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\tif (isDataLoading) {\n\t\t\tsvg.html('');\n\t\t\treturn;\n\t\t}\n\n\t\tconst customColorsEnabled = !Tools.isEmpty(customColors);\n\t\tconst domain = this.model.getValueDomain();\n\n\t\tconst useDefaultBarWidth = !(\n\t\t\twidth <= Configuration.legend.color.barWidth\n\t\t);\n\t\tconst barWidth = useDefaultBarWidth\n\t\t\t? Configuration.legend.color.barWidth\n\t\t\t: width;\n\n\t\tconst legendGroupElement = DOMUtils.appendOrSelect(svg, 'g.legend');\n\t\tconst axisElement = DOMUtils.appendOrSelect(\n\t\t\tlegendGroupElement,\n\t\t\t'g.legend-axis'\n\t\t);\n\n\t\t// Render title if it exists\n\t\tif (title) {\n\t\t\tconst legendTitleGroup = DOMUtils.appendOrSelect(\n\t\t\t\tsvg,\n\t\t\t\t'g.legend-title'\n\t\t\t);\n\t\t\tconst legendTitle = DOMUtils.appendOrSelect(\n\t\t\t\tlegendTitleGroup,\n\t\t\t\t'text'\n\t\t\t);\n\t\t\tlegendTitle.text(title).attr('dy', '0.7em');\n\n\t\t\t// Move the legend down by 16 pixels to display legend text on top\n\t\t\tlegendGroupElement.attr('transform', `translate(0, 16)`);\n\t\t}\n\n\t\t// If domain consists of negative and positive values, use diverging palettes\n\t\tconst colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';\n\n\t\t// Use default color pairing options if not in defined range\n\t\tif (\n\t\t\tcolorPairingOption < 1 &&\n\t\t\tcolorPairingOption > 4 &&\n\t\t\tcolorScheme === 'mono'\n\t\t) {\n\t\t\tcolorPairingOption = 1;\n\t\t} else if (\n\t\t\tcolorPairingOption < 1 &&\n\t\t\tcolorPairingOption > 2 &&\n\t\t\tcolorScheme === 'diverge'\n\t\t) {\n\t\t\tcolorPairingOption = 1;\n\t\t}\n\n\t\tlet colorPairing = [];\n\t\t// Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette\n\t\tlet colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;\n\n\t\tif (!customColorsEnabled) {\n\t\t\t// Add class names to list and the amount based on the color scheme\n\t\t\tfor (let i = 1; i < colorGroupingLength + 1; i++) {\n\t\t\t\tcolorPairing.push(\n\t\t\t\t\tcolorScaleType === ColorLegendType.LINEAR\n\t\t\t\t\t\t? `stop-color-${colorScheme}-${colorPairingOption}-${i}`\n\t\t\t\t\t\t: `fill-${colorScheme}-${colorPairingOption}-${i}`\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t// Use custom colors\n\t\t\tcolorPairing = customColors;\n\t\t}\n\n\t\t// Generate equal chunks between range to act as ticks\n\t\tconst interpolator = interpolateNumber(domain[0], domain[1]);\n\t\tconst quant = quantize(interpolator, 3);\n\n\t\t// Create scale & ticks\n\t\tconst linearScale = scaleLinear().domain(domain).range([0, barWidth]);\n\n\t\tconst legendAxis = axisBottom(linearScale)\n\t\t\t.tickSize(0)\n\t\t\t.tickValues(quant);\n\n\t\tswitch (colorScaleType) {\n\t\t\tcase ColorLegendType.LINEAR:\n\t\t\t\tthis.drawLinear(colorPairing, legendGroupElement, barWidth);\n\t\t\t\tbreak;\n\t\t\tcase ColorLegendType.QUANTIZE:\n\t\t\t\tconst rangeStart = this.drawQuantize(\n\t\t\t\t\tcolorPairing,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t\tcustomColorsEnabled,\n\t\t\t\t\tlegendGroupElement,\n\t\t\t\t\tbarWidth\n\t\t\t\t);\n\t\t\t\t// Using range provided by drawQuantize for alignment purposes\n\t\t\t\tlinearScale.range([rangeStart, barWidth]);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthrow Error('Entered color legend type is not supported.');\n\t\t}\n\n\t\t// Align axes at the bottom of the rectangle and delete the domain line\n\t\taxisElement\n\t\t\t.attr(\n\t\t\t\t'transform',\n\t\t\t\t`translate(0,${Configuration.legend.color.axisYTranslation})`\n\t\t\t)\n\t\t\t.call(legendAxis);\n\n\t\t// Remove auto generated axis bottom line\n\t\taxisElement.select('.domain').remove();\n\n\t\t// Translate first/last axis tick if barWidth equals chart width\n\t\t// Ensures text is not clipped when default bar width (300px) is not used\n\t\taxisElement\n\t\t\t.select('g.tick:last-of-type text')\n\t\t\t.style('text-anchor', useDefaultBarWidth ? 'middle' : 'end');\n\t\taxisElement\n\t\t\t.select('g.tick:first-of-type text')\n\t\t\t.style('text-anchor', useDefaultBarWidth ? 'middle' : 'start');\n\t}\n\n\t// Renders gradient legend\n\tdrawLinear(colorPairing, legendGroupElement, barWidth) {\n\t\tconst stopLengthPercentage = 100 / (colorPairing.length - 1);\n\n\t\t// Generate the gradient\n\t\tconst linearGradient = DOMUtils.appendOrSelect(\n\t\t\tlegendGroupElement,\n\t\t\t'linearGradient'\n\t\t);\n\t\t// Rendering gradient\n\t\tlinearGradient\n\t\t\t.attr('id', `${this.gradient_id}-legend`)\n\t\t\t.selectAll('stop')\n\t\t\t.data(colorPairing)\n\t\t\t.enter()\n\t\t\t.append('stop')\n\t\t\t.attr('offset', (_, i) => `${i * stopLengthPercentage}%`)\n\t\t\t.attr('class', (_, i) => colorPairing[i])\n\t\t\t.attr('stop-color', (d) => d);\n\n\t\t// Create the legend container\n\t\tconst rectangle = DOMUtils.appendOrSelect(legendGroupElement, 'rect');\n\t\trectangle\n\t\t\t.attr('width', barWidth)\n\t\t\t.attr('height', Configuration.legend.color.barHeight)\n\t\t\t.style('fill', `url(#${this.gradient_id}-legend)`);\n\t}\n\n\t/**\n\t * Renders quantized legend\n\t * @returns number (range start)\n\t */\n\tdrawQuantize(\n\t\tcolorPairing,\n\t\tcolorScheme,\n\t\tcustomColorsEnabled,\n\t\tlegendGroupElement,\n\t\tbarWidth\n\t) {\n\t\t// If divergent && non-custom color, remove 0/white from being displayed\n\t\tif (!customColorsEnabled && colorScheme === 'diverge') {\n\t\t\tcolorPairing.splice(colorPairing.length / 2, 1);\n\t\t}\n\n\t\tconst colorScaleBand = scaleBand()\n\t\t\t.domain(colorPairing)\n\t\t\t.range([0, barWidth]);\n\n\t\t// Render the quantized rectangles\n\t\tconst rectangle = DOMUtils.appendOrSelect(\n\t\t\tlegendGroupElement,\n\t\t\t'g.quantized-rect'\n\t\t);\n\n\t\trectangle\n\t\t\t.selectAll('rect')\n\t\t\t.data(colorScaleBand.domain())\n\t\t\t.join('rect')\n\t\t\t.attr('x', (d) => colorScaleBand(d))\n\t\t\t.attr('y', 0)\n\t\t\t.attr('width', Math.max(0, colorScaleBand.bandwidth() - 1))\n\t\t\t.attr('height', Configuration.legend.color.barHeight)\n\t\t\t.attr('class', (d) => d)\n\t\t\t.attr('fill', (d) => d);\n\n\t\treturn (!customColorsEnabled && colorScheme) === 'mono'\n\t\t\t? colorScaleBand.bandwidth() - 1\n\t\t\t: 0;\n\t}\n\n\tdestroy() {\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Axis.RENDER_COMPLETE,\n\t\t\tthis.handleAxisCompleteEvent\n\t\t);\n\t}\n}\n"]}