@oliasoft-open-source/charts-library 4.3.12 → 4.4.0

package/dist/index.js

@@ -22516,6 +22516,18 @@ const DEFAULT_CHART_NAME = "new_chart";
 const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
 const DECIMAL_POINT_TOLERANCE = 9;
 const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
+const GRADIENT_COLORS = [
+  { offset: 0, color: "rgba(144,238,144,0.8)" },
+  // Light green
+  { offset: 0.6, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.8, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.92, color: "rgba(255,182,193,0.5)" },
+  // Light red
+  { offset: 0.99, color: "rgba(255,182,193,0.8)" }
+  // Light red
+];
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
   beforeDraw(chart2, _2, options) {
@@ -40312,7 +40324,9 @@ const useScatterChartConfig = (chart2, chartRef) => {
       onHover
     },
     scales: getScatterChartScales(chart2 == null ? void 0 : chart2.options),
-    animation: chartStyling.performanceMode ? false : {
+    animation: chartStyling.performanceMode ? {
+      duration: ANIMATION_DURATION.NO
+    } : {
       duration: ANIMATION_DURATION.FAST,
       onComplete: interactions == null ? void 0 : interactions.onAnimationComplete
     },
@@ -40336,12 +40350,29 @@ const useScatterChartConfig = (chart2, chartRef) => {
     scatterOptions
   };
 };
+var GradientDirection = /* @__PURE__ */ ((GradientDirection2) => {
+  GradientDirection2[GradientDirection2["TopToBottom"] = 0] = "TopToBottom";
+  GradientDirection2[GradientDirection2["BottomToTop"] = 1] = "BottomToTop";
+  GradientDirection2[GradientDirection2["LeftToRight"] = 2] = "LeftToRight";
+  GradientDirection2[GradientDirection2["RightToLeft"] = 3] = "RightToLeft";
+  GradientDirection2[GradientDirection2["TopLeftToBottomRight"] = 4] = "TopLeftToBottomRight";
+  GradientDirection2[GradientDirection2["BottomRightToTopLeft"] = 5] = "BottomRightToTopLeft";
+  GradientDirection2[GradientDirection2["BottomLeftToTopRight"] = 6] = "BottomLeftToTopRight";
+  GradientDirection2[GradientDirection2["TopRightToBottomLeft"] = 7] = "TopRightToBottomLeft";
+  return GradientDirection2;
+})(GradientDirection || {});
+const defaultChartGradient = (gradient) => ({
+  display: (gradient == null ? void 0 : gradient.display) ?? false,
+  gradientColors: (gradient == null ? void 0 : gradient.gradientColors) ?? GRADIENT_COLORS,
+  direction: (gradient == null ? void 0 : gradient.direction) ?? GradientDirection.BottomLeftToTopRight
+});
 const defaultChartStyling = (styling) => ({
   width: (styling == null ? void 0 : styling.width) ?? AUTO,
   height: (styling == null ? void 0 : styling.height) ?? AUTO,
   maintainAspectRatio: (styling == null ? void 0 : styling.maintainAspectRatio) || false,
   staticChartHeight: (styling == null ? void 0 : styling.staticChartHeight) || false,
-  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true
+  performanceMode: (styling == null ? void 0 : styling.performanceMode) ?? true,
+  gradient: defaultChartGradient(styling == null ? void 0 : styling.gradient)
 });
 const defaultTooltip = (tooltip) => ({
   enabled: (tooltip == null ? void 0 : tooltip.enabled) ?? true,
@@ -40421,6 +40452,57 @@ const getDefaultProps = (props) => {
     }
   };
 };
+const getGradientCoordinates = (direction, chartArea) => {
+  switch (direction) {
+    case GradientDirection.TopToBottom:
+      return [chartArea.left, chartArea.top, chartArea.left, chartArea.bottom];
+    case GradientDirection.BottomToTop:
+      return [chartArea.left, chartArea.bottom, chartArea.left, chartArea.top];
+    case GradientDirection.LeftToRight:
+      return [chartArea.left, chartArea.top, chartArea.right, chartArea.top];
+    case GradientDirection.RightToLeft:
+      return [chartArea.right, chartArea.top, chartArea.left, chartArea.top];
+    case GradientDirection.TopLeftToBottomRight:
+      return [chartArea.left, chartArea.top, chartArea.right, chartArea.bottom];
+    case GradientDirection.BottomRightToTopLeft:
+      return [chartArea.right, chartArea.bottom, chartArea.left, chartArea.top];
+    case GradientDirection.BottomLeftToTopRight:
+      return [chartArea.left, chartArea.bottom, chartArea.right, chartArea.top];
+    case GradientDirection.TopRightToBottomLeft:
+      return [chartArea.right, chartArea.top, chartArea.left, chartArea.bottom];
+    default:
+      return [chartArea.left, chartArea.bottom, chartArea.right, chartArea.top];
+  }
+};
+const gradientBackgroundPlugin = {
+  id: "gradientBackgroundPlugin",
+  beforeDraw: (chart2) => {
+    const { ctx, chartArea, options } = chart2;
+    const gradientOptions = options.gradient;
+    const {
+      display = false,
+      gradientColors,
+      direction = GradientDirection.BottomLeftToTopRight
+    } = gradientOptions ?? {};
+    if (!display || !gradientColors || gradientColors.length === 0)
+      return;
+    const [x0, y0, x1, y1] = getGradientCoordinates(direction, chartArea);
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    gradientColors.forEach(({ offset, color: color2 }) => {
+      gradient.addColorStop(offset, color2);
+    });
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = gradient;
+    ctx.fillRect(
+      chartArea.left,
+      chartArea.top,
+      chartArea.right - chartArea.left,
+      chartArea.bottom - chartArea.top
+    );
+    ctx.restore();
+  }
+};
 const chart = "_chart_1jdnu_1";
 const fixedHeight = "_fixedHeight_1jdnu_13";
 const stretchHeight = "_stretchHeight_1jdnu_19";
@@ -40446,7 +40528,8 @@ Chart$2.register(
   plugin_title,
   plugin$1,
   plugin,
-  annotation
+  annotation,
+  gradientBackgroundPlugin
 );
 const ScatterChart = (props) => {
   setDefaultTheme();