@oliasoft-open-source/charts-library 4.5.0-beta-1 → 4.5.0

package/dist/index.js

@@ -13,7 +13,6 @@ import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@o
 import cx from "classnames";
 import { Portal, Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
 import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1 } from "lodash";
-import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
@@ -22174,139 +22173,6 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
-const BORDER_WIDTH = {
-  INITIAL: 2,
-  HOVERED: 6,
-  POINT_HOVERED: 8
-};
-const BORDER_COLOR = "rgba(0,0,0,0.1)";
-const ANNOTATION_DASH = [10, 2];
-const DEFAULT_FONT_SIZE = 12;
-const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
-const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
-const LEGEND_LABEL_BOX_SIZE = 12;
-const TOOLTIP_PADDING = 8;
-const TOOLTIP_BOX_PADDING = 4;
-const TRANSPARENT = "transparent";
-const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
-const COLORS = [
-  "#3366cc",
-  "#dc3912",
-  "#ff9900",
-  "#109618",
-  "#990099",
-  "#0099c6",
-  "#dd4477",
-  "#66aa00",
-  "#b82e2e",
-  "#316395",
-  "#994499",
-  "#22aa99",
-  "#aaaa11",
-  "#6633cc",
-  "#e67300",
-  "#8b0707",
-  "#651067",
-  "#329262",
-  "#5574a6",
-  "#3b3eac"
-];
-const ALPHA_CHANEL = "99";
-const WHITE_COLOR_AS_DECIMAL = 16777215;
-const AUTO = "auto";
-const ANIMATION_DURATION = {
-  NO: 0,
-  SLOW: 400,
-  FAST: 1e3
-};
-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 findRadii = (points, mainPoint, isXReverse, isYReverse) => {
-  if ((points == null ? void 0 : points.length) === 0) {
-    throw new Error("Array of points is empty");
-  }
-  let top2 = mainPoint;
-  let bottom2 = mainPoint;
-  let left2 = mainPoint;
-  let right2 = mainPoint;
-  for (const point of points) {
-    if (isYReverse ? point.y < top2.y : point.y > top2.y) {
-      top2 = point;
-    }
-    if (isYReverse ? point.y > bottom2.y : point.y < bottom2.y) {
-      bottom2 = point;
-    }
-    if (isXReverse ? point.x > left2.x : point.x < left2.x) {
-      left2 = point;
-    }
-    if (isXReverse ? point.x < right2.x : point.x > right2.x) {
-      right2 = point;
-    }
-  }
-  const radiusX = Math.abs(right2.x - left2.x) / 2;
-  const radiusY = Math.abs(bottom2.y - top2.y) / 2;
-  return { radiusX, radiusY };
-};
-const ellipsisAnnotationPlugin = {
-  id: "ellipsisAnnotationPlugin",
-  afterDraw: (chart2) => {
-    var _a2, _b2, _c2, _d2;
-    const {
-      ctx,
-      scales: { x: x2, y: y2 },
-      data: { datasets },
-      options
-    } = chart2;
-    const isXReverse = ((_b2 = (_a2 = options == null ? void 0 : options.scales) == null ? void 0 : _a2.x) == null ? void 0 : _b2.reverse) || false;
-    const isYReverse = ((_d2 = (_c2 = options == null ? void 0 : options.scales) == null ? void 0 : _c2.y) == null ? void 0 : _d2.reverse) || false;
-    datasets.forEach((dataset) => {
-      dataset.data.forEach((item) => {
-        if (item.ellipsePoints && item.ellipsePoints.length) {
-          const centerX = x2.getPixelForValue(item.x);
-          const centerY = y2.getPixelForValue(item.y);
-          const points = item.ellipsePoints.map((point) => ({
-            x: x2.getPixelForValue(point.x),
-            y: y2.getPixelForValue(point.y)
-          }));
-          const mainPoint = { x: centerX, y: centerY };
-          const { radiusX, radiusY } = findRadii(
-            points,
-            mainPoint,
-            isXReverse,
-            isYReverse
-          );
-          const rotationAngle = item.ellipseRotation * Math.PI / 180;
-          ctx.beginPath();
-          ctx.ellipse(
-            centerX,
-            centerY,
-            radiusX,
-            radiusY,
-            rotationAngle,
-            0,
-            2 * Math.PI
-          );
-          ctx.strokeStyle = (dataset == null ? void 0 : dataset.borderColor) ?? DEFAULT_COLOR;
-          ctx.stroke();
-        }
-      });
-    });
-  }
-};
 const chart$3 = "_chart_e3qdd_1";
 const canvas$1 = "_canvas_e3qdd_11";
 const fixedHeight$3 = "_fixedHeight_e3qdd_20";
@@ -22600,6 +22466,67 @@ const chartMinorGridlinesPlugin = {
     Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
   }
 };
+const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6,
+  POINT_HOVERED: 8
+};
+const BORDER_COLOR = "rgba(0,0,0,0.1)";
+const ANNOTATION_DASH = [10, 2];
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
+const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
+const LEGEND_LABEL_BOX_SIZE = 12;
+const TOOLTIP_PADDING = 8;
+const TOOLTIP_BOX_PADDING = 4;
+const TRANSPARENT = "transparent";
+const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
+const COLORS = [
+  "#3366cc",
+  "#dc3912",
+  "#ff9900",
+  "#109618",
+  "#990099",
+  "#0099c6",
+  "#dd4477",
+  "#66aa00",
+  "#b82e2e",
+  "#316395",
+  "#994499",
+  "#22aa99",
+  "#aaaa11",
+  "#6633cc",
+  "#e67300",
+  "#8b0707",
+  "#651067",
+  "#329262",
+  "#5574a6",
+  "#3b3eac"
+];
+const ALPHA_CHANEL = "99";
+const WHITE_COLOR_AS_DECIMAL = 16777215;
+const AUTO = "auto";
+const ANIMATION_DURATION = {
+  NO: 0,
+  SLOW: 400,
+  FAST: 1e3
+};
+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) {
@@ -25413,6 +25340,12 @@ var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
   AnnotationType2["ELLIPSE"] = "ellipse";
   return AnnotationType2;
 })(AnnotationType || {});
+var DragAxis = /* @__PURE__ */ ((DragAxis2) => {
+  DragAxis2["X"] = "x";
+  DragAxis2["Y"] = "y";
+  DragAxis2["Both"] = "both";
+  return DragAxis2;
+})(DragAxis || {});
 const handleLineEnter = (element, chart2, annotation2) => {
   var _a2;
   chart2.canvas.style.cursor = CursorStyle.Pointer;
@@ -25492,13 +25425,9 @@ const generateAnnotations = (annotationsData) => {
     const borderColor = {
       [AnnotationType.LINE]: color2,
       [AnnotationType.POINT]: color2,
-      [AnnotationType.BOX]: color2,
-      [AnnotationType.ELLIPSE]: color2
+      [AnnotationType.BOX]: color2
     }[type] || TRANSPARENT;
-    const borderWidth = {
-      [AnnotationType.LINE]: BORDER_WIDTH.INITIAL,
-      [AnnotationType.ELLIPSE]: (ann == null ? void 0 : ann.borderWidth) ?? 0
-    }[type] ?? 0;
+    const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
     const borderDash = type === AnnotationType.LINE ? ANNOTATION_DASH : void 0;
     const defLabel = {
       content: ann == null ? void 0 : ann.label,
@@ -25564,17 +25493,15 @@ const generateAnnotations = (annotationsData) => {
     const onDragStart = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord, annotation2) : void 0;
     const onDrag = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord, annotation2) : void 0;
     const onDragEnd = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord, annotation2) : void 0;
-    const rotation = ann.rotation * Math.PI / 180;
     return {
       ...ann,
       drawTime: "afterDraw",
       display: ann == null ? void 0 : ann.display,
       annotationIndex: idx,
       id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
-      rotation,
       scaleID,
       label,
-      backgroundColor: (ann == null ? void 0 : ann.backgroundColor) ?? color2,
+      backgroundColor: color2,
       borderColor,
       borderWidth,
       borderDash,
@@ -26222,21 +26149,29 @@ const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDragg
 const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
   if (isDragging2 && activeAnnotation) {
     canvas2.style.cursor = CursorStyle.Move;
+    const dragAxis = (activeAnnotation == null ? void 0 : activeAnnotation.dragAxis) ?? DragAxis.Both;
     const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
     const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
     let newCenterX = x2 - dragStartX;
     let newCenterY = y2 - dragStartY;
-    if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
-      newCenterX = x2 - dragStartX;
-      newCenterY = y2 - dragStartY;
-      activeAnnotation.xValue = newCenterX;
-      activeAnnotation.yValue = newCenterY;
-    } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
-      if (!isNil(metrics == null ? void 0 : metrics.width) && !isNil(metrics.height)) {
-        activeAnnotation.xMin = newCenterX - metrics.width / 2;
-        activeAnnotation.xMax = newCenterX + metrics.width / 2;
-        activeAnnotation.yMin = newCenterY - metrics.height / 2;
-        activeAnnotation.yMax = newCenterY + metrics.height / 2;
+    if (dragAxis !== DragAxis.Y) {
+      if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
+        activeAnnotation.xValue = newCenterX;
+      } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
+        if (!isNil(metrics == null ? void 0 : metrics.width)) {
+          activeAnnotation.xMin = newCenterX - metrics.width / 2;
+          activeAnnotation.xMax = newCenterX + metrics.width / 2;
+        }
+      }
+    }
+    if (dragAxis !== DragAxis.X) {
+      if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
+        activeAnnotation.yValue = newCenterY;
+      } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
+        if (!isNil(metrics == null ? void 0 : metrics.height)) {
+          activeAnnotation.yMin = newCenterY - metrics.height / 2;
+          activeAnnotation.yMax = newCenterY + metrics.height / 2;
+        }
       }
     }
     chart2.update();
@@ -26919,8 +26854,7 @@ Chart$2.register(
   plugin,
   annotation,
   chartAreaTextPlugin,
-  annotationDraggerPlugin,
-  ellipsisAnnotationPlugin
+  annotationDraggerPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;
@@ -27073,7 +27007,8 @@ const defaultChartStyling$2 = (styling) => ({
 });
 const defaultTooltip$2 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
+  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false,
+  scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
 });
 const defaultGraph$2 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
@@ -27118,6 +27053,8 @@ const getDefaultProps$2 = (props) => {
     }
   };
 };
+const DISPLAY_SCIENTIFIC_LOWER_BOUND = 1e-4;
+const DISPLAY_SCIENTIFIC_UPPER_BOUND = 1e7;
 const usePieChartConfig = (chart2) => {
   const [pointHover, setPointHover] = useState(false);
   const { data, options } = chart2;
@@ -27250,6 +27187,16 @@ const usePieChartConfig = (chart2) => {
     };
   };
   const getToolTips = () => {
+    const customFormatNumber2 = (labelNumber) => {
+      var _a2;
+      let roundOptions = {};
+      if (!((_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.scientificNotation)) {
+        roundOptions = { scientific: false };
+      } else if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
+        roundOptions = { roundScientificCoefficient: 3 };
+      }
+      return displayNumber(roundByMagnitude(labelNumber), roundOptions);
+    };
     return {
       callbacks: {
         title: (tooltipItem) => {
@@ -27266,8 +27213,7 @@ const usePieChartConfig = (chart2) => {
           const value = tooltipItem.dataset.data[dataIndex];
           const labelValue = typeof value === "object" ? `${value.value || ""} ${options.tooltip.showLabelsInTooltips && value.label ? "(" + value.label + ")" : ""}` : value;
           const unit = (data == null ? void 0 : data.yUnit) ? `[${data == null ? void 0 : data.yUnit}]` : "";
-          const formattedValue = Math.abs(labelValue) < 1 ? roundNumberToPrecision(labelValue, 3) : round$2(labelValue, 3);
-          return `${dataLabel} ${formattedValue} ${unit}`;
+          return `${dataLabel} ${customFormatNumber2(labelValue)} ${unit}`;
         }
       },
       padding: TOOLTIP_PADDING,
@@ -39938,8 +39884,6 @@ const getBarChartDataLabels = (options) => {
     formatter: formatterCallback
   } : { display: false };
 };
-const DISPLAY_SCIENTIFIC_LOWER_BOUND = 1e-4;
-const DISPLAY_SCIENTIFIC_UPPER_BOUND = 1e7;
 const getBarChartToolTips = (options) => {
   var _a2;
   const getTooltipLabels = (dataset) => {
@@ -39975,8 +39919,11 @@ const getBarChartToolTips = (options) => {
     return axisLabel + barLabel;
   };
   const customFormatNumber2 = (labelNumber) => {
+    var _a3;
     let roundOptions = {};
-    if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
+    if (!((_a3 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a3.scientificNotation)) {
+      roundOptions = { scientific: false };
+    } else if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
       roundOptions = { roundScientificCoefficient: 3 };
     }
     return displayNumber(roundByMagnitude(labelNumber), roundOptions);
@@ -40112,7 +40059,8 @@ const defaultChartStyling$1 = (styling) => ({
 });
 const defaultTooltip$1 = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false
+  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false,
+  scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
 });
 const defaultGraph$1 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
@@ -40261,9 +40209,11 @@ const BarChartWithLegend = (props) => {
   const { options } = getDefaultProps$1(props);
   return /* @__PURE__ */ jsx(LegendProvider, { options, children: /* @__PURE__ */ jsx(BarChart, { ...props }) });
 };
-const customFormatNumber = (labelNumber) => {
+const customFormatNumber = (labelNumber, scientificNotation) => {
   let roundOptions = {};
-  if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
+  if (!scientificNotation) {
+    roundOptions = { scientific: false };
+  } else if (Math.abs(labelNumber) < DISPLAY_SCIENTIFIC_LOWER_BOUND || Math.abs(labelNumber) > DISPLAY_SCIENTIFIC_UPPER_BOUND) {
     roundOptions = { roundScientificCoefficient: 3 };
   }
   return displayNumber(roundByMagnitude(labelNumber), roundOptions);
@@ -40276,12 +40226,15 @@ const titleCallback = (tooltipItems, options) => {
     return label;
   }
 };
-const labelCallback = (tooltipItem) => {
+const labelCallback = (tooltipItem, options) => {
+  var _a2;
   const { raw, dataset } = tooltipItem ?? {};
   const datapointLabel = raw == null ? void 0 : raw.label;
+  const scientificNotation = (_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.scientificNotation;
   return `${datapointLabel ?? (dataset == null ? void 0 : dataset.label)} ( x: ${customFormatNumber(
-    raw == null ? void 0 : raw.x
-  )} , y: ${customFormatNumber(raw == null ? void 0 : raw.y)} )`;
+    raw == null ? void 0 : raw.x,
+    scientificNotation
+  )} , y: ${customFormatNumber(raw == null ? void 0 : raw.y, scientificNotation)} )`;
 };
 const getTooltipsConfig = (options) => {
   var _a2, _b2, _c2;
@@ -40289,7 +40242,7 @@ const getTooltipsConfig = (options) => {
     enabled: (_a2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _a2.enabled,
     callbacks: {
       title: (tooltipItems) => titleCallback(tooltipItems, options),
-      label: labelCallback
+      label: (tooltipItems) => labelCallback(tooltipItems, options)
     },
     backgroundColor: (_b2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _b2.backgroundColor,
     displayColors: (_c2 = options == null ? void 0 : options.tooltip) == null ? void 0 : _c2.displayColors,
@@ -40465,7 +40418,8 @@ const defaultTooltip = (tooltip) => ({
   tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
   showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) || false,
   backgroundColor: (tooltip == null ? void 0 : tooltip.backgroundColor) || "#333",
-  displayColors: (tooltip == null ? void 0 : tooltip.displayColors) || false
+  displayColors: (tooltip == null ? void 0 : tooltip.displayColors) || false,
+  scientificNotation: (tooltip == null ? void 0 : tooltip.scientificNotation) ?? true
 });
 const defaultGraph = (graph) => ({
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false,