@evergis/react 4.0.93 → 4.0.94

package/dist/index.js

@@ -6,7 +6,6 @@ var React = require('react');
 var styled = require('styled-components');
 var charts = require('@evergis/charts');
 var api = require('@evergis/api');
-var Gradient = require('javascript-color-gradient');
 var color$1 = require('@evergis/color');
 var dateFns = require('date-fns');
 var lodash = require('lodash');
@@ -3564,13 +3563,26 @@ const GRADIENT_COLORS = [
     "#A1E062",
     "#51D8A5",
 ];
-const getGradientColors = (colorsCount) => {
-    return new Gradient()
-        .setColorGradient(...GRADIENT_COLORS)
-        .setMidpoint(colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount + 10)
-        .getColors()
-        .slice(0, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
+const HEX_RRGGBB_LENGTH = 7;
+/**
+ * Растягивает палитру на нужное количество цветов: опорные цвета равномерно
+ * раскладываются по шкале, недостающие интерполируются между ними.
+ * @param colors - опорные цвета палитры в hex
+ * @param count - требуемое количество цветов
+ * @returns массив ровно из count цветов
+ */
+const stretchPalette = (colors, count) => {
+    if (!colors?.length || count <= 0)
+        return [];
+    if (colors.length === 1)
+        return Array.from({ length: count }, () => colors[0]);
+    const scale = new color$1.ColorScale(colors.map((color, index) => [index / (colors.length - 1), color]));
+    return Array.from({ length: count }, (_, index) => {
+        const color = scale.getColor(count === 1 ? 0 : index / (count - 1));
+        return color ? new color$1.Color(color).toString("hex").slice(0, HEX_RRGGBB_LENGTH) : colors[colors.length - 1];
+    });
 };
+const getGradientColors = (colorsCount) => stretchPalette(GRADIENT_COLORS, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
 /**
  * Converts HSL hue value to RGB
  * @param p - lower bound
@@ -10270,7 +10282,7 @@ const getDashboardHeader = (templateName) => {
 };
 
 const getDataFromAttributes = (t, config, attributes) => {
-    const colors = config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS;
+    const colors = stretchPalette(config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS, config?.children?.length || 0);
     const data = config?.children?.map(({ attributeName }, index) => {
         const attribute = attributes?.find(item => item.attributeName === attributeName);
         return {
@@ -10322,12 +10334,8 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     if (isOtherSliced) {
         data = data.slice(0, config?.options?.otherItems);
     }
-    const gradientColors = colors?.length === 1 ? [colors[0], colors[0]] : colors;
-    const gradientArray = relatedConfig.chartAxis && colors?.length < data.length
-        ? new Gradient()
-            .setColorGradient(...gradientColors)
-            .setMidpoint(data.length)
-            .getColors()
+    const gradientArray = relatedConfig.chartAxis
+        ? stretchPalette(colors, data.length)
         : colors;
     const filter = getConfigFilter(relatedConfig?.filterName, filters);
     const result = data.reduce((acc, feature, index) => {
@@ -14700,6 +14708,7 @@ exports.removeDataSource = removeDataSource;
 exports.rgbToHex = rgbToHex;
 exports.roundTotalSum = roundTotalSum;
 exports.sliceShownOtherItems = sliceShownOtherItems;
+exports.stretchPalette = stretchPalette;
 exports.timeOptions = timeOptions;
 exports.toRenderableValue = toRenderableValue;
 exports.tooltipNameFromAttributes = tooltipNameFromAttributes;