@oliasoft-open-source/charts-library 4.6.0 → 4.6.2-beta-1

package/dist/index.js

@@ -12,7 +12,7 @@ import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 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 { 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, noop as noop$2 } from "lodash";
 /*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
@@ -26495,9 +26495,10 @@ const SvgTriangle = (props) => /* @__PURE__ */ React.createElement("svg", { heig
 const LEGEND_SYMBOL_SIZE$1 = 16;
 const LineItem = ({ dataset }) => {
   var _a2;
-  const { borderColor, borderDash, borderWidth } = dataset;
-  const offset = borderDash.length ? (LEGEND_SYMBOL_SIZE$1 - borderDash[0]) / 2 % (borderDash[0] + borderDash[1]) * -1 : 0;
-  const borderDashString = ((_a2 = dataset.borderDash) == null ? void 0 : _a2.join(" ")) || "";
+  const { borderColor, borderDash, borderWidth } = dataset ?? {};
+  const [dash0, dash1] = borderDash ?? [];
+  const offset = dash0 && dash1 ? (LEGEND_SYMBOL_SIZE$1 - dash0) / 2 % (dash0 + dash1) * -1 : 0;
+  const borderDashString = ((_a2 = dataset == null ? void 0 : dataset.borderDash) == null ? void 0 : _a2.join(" ")) || "";
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemLine, children: /* @__PURE__ */ jsx(
     "svg",
     {
@@ -26522,7 +26523,7 @@ const LineItem = ({ dataset }) => {
   ) });
 };
 const PointItem = ({ dataset }) => {
-  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset;
+  const { pointBackgroundColor, pointRadius, pointStyle = "" } = dataset ?? {};
   if (!pointRadius)
     return null;
   const size = pointRadius * 2;
@@ -26535,19 +26536,19 @@ const PointItem = ({ dataset }) => {
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
-      icon: icons[pointStyle] ?? /* @__PURE__ */ jsx(SvgCircle, {}),
+      icon: (icons == null ? void 0 : icons[pointStyle]) ?? /* @__PURE__ */ jsx(SvgCircle, {}),
       size,
       color: pointBackgroundColor
     }
   ) });
 };
 const BoxItem = ({ dataset }) => {
-  const { backgroundColor } = dataset;
+  const { backgroundColor } = dataset ?? {};
   const style = { backgroundColor };
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, style });
 };
 const LegendItemLine = ({ dataset }) => {
-  const { annotationType, showLine } = dataset;
+  const { annotationType, showLine } = dataset ?? {};
   switch (annotationType) {
     case AnnotationType$1.Box:
     case AnnotationType$1.Ellipse:
@@ -26567,15 +26568,15 @@ const renderLegendItemSymbol = (dataset, chartType, index2) => {
     case ChartType.LINE:
       return /* @__PURE__ */ jsx(LegendItemLine, { dataset });
     case ChartType.BAR: {
-      const { backgroundColor } = dataset;
-      const color2 = backgroundColor instanceof Array ? backgroundColor[index2] : backgroundColor;
+      const { backgroundColor } = dataset ?? {};
+      const color2 = backgroundColor instanceof Array ? backgroundColor == null ? void 0 : backgroundColor[index2] : backgroundColor;
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: color2 }) });
     }
     case ChartType.PIE:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) }) });
     case ChartType.SCATTER: {
-      const { backgroundColor, borderColor } = dataset;
-      const color2 = backgroundColor instanceof Array ? backgroundColor[index2] : backgroundColor;
+      const { backgroundColor, borderColor } = dataset ?? {};
+      const color2 = backgroundColor instanceof Array ? backgroundColor == null ? void 0 : backgroundColor[index2] : backgroundColor;
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: color2 ?? borderColor }) });
     }
     default:
@@ -26592,7 +26593,7 @@ const LegendItem = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(styles$3.legendItem, hidden && styles$3.isHidden),
+      className: cx(styles$3 == null ? void 0 : styles$3.legendItem, hidden && (styles$3 == null ? void 0 : styles$3.isHidden)),
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(
@@ -26603,7 +26604,7 @@ const LegendItem = ({
             children: renderLegendItemSymbol(dataset, chartType, index2)
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset.label })
+        /* @__PURE__ */ jsx("span", { className: styles$3.legendItemText, children: dataset == null ? void 0 : dataset.label })
       ]
     }
   );
@@ -26645,7 +26646,7 @@ const getGeneratedLabels = (chart2) => {
 const useGeneratedLabels = (chartRef, generatedDatasets) => {
   const [items, setItems] = useState([]);
   useEffect(() => {
-    const chart2 = chartRef.current;
+    const chart2 = chartRef == null ? void 0 : chartRef.current;
     if (!chart2)
       return;
     const newItems = getGeneratedLabels(chart2);
@@ -26658,10 +26659,10 @@ const createLegendStyle = (legendPosition, chart2) => {
   const { height = 0, width = 0, chartArea } = chart2 ?? {};
   const { top: top2 = 0, left: left2 = 0, bottom: bottom2 = 0, right: right2 = 0 } = chartArea ?? {};
   return {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    left: (legendPosition == null ? void 0 : legendPosition.includes("left")) ? left2 : void 0,
+    right: (legendPosition == null ? void 0 : legendPosition.includes("right")) ? width - right2 : void 0,
+    top: (legendPosition == null ? void 0 : legendPosition.includes("top")) ? top2 : void 0,
+    bottom: (legendPosition == null ? void 0 : legendPosition.includes("bottom")) ? height - bottom2 : void 0,
     maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
     maxWidth: 0.9 * (right2 - left2 - LEGEND_MARGIN * 2),
     margin: LEGEND_MARGIN
@@ -26672,27 +26673,28 @@ const LegendItems = ({
   datasets,
   legendClick,
   chartType
-}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items.map((item, index2) => {
-  if (datasets[item.datasetIndex].hideLegend) {
+}) => /* @__PURE__ */ jsx("div", { className: styles$3.legendItems, children: items == null ? void 0 : items.map((item, index2) => {
+  var _a2;
+  if ((_a2 = datasets == null ? void 0 : datasets[item == null ? void 0 : item.datasetIndex]) == null ? void 0 : _a2.hideLegend) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     LegendItem,
     {
       index: index2,
-      hidden: item.hidden,
-      dataset: datasets[item.datasetIndex],
+      hidden: item == null ? void 0 : item.hidden,
+      dataset: datasets == null ? void 0 : datasets[item == null ? void 0 : item.datasetIndex],
       handleClick: (_2) => legendClick(_2, item),
       chartType
     },
-    `${item.datasetIndex}-hidden-${item.hidden}`
+    `${item == null ? void 0 : item.datasetIndex}-hidden-${item == null ? void 0 : item.hidden}`
   );
 }) });
 const LegendPanel = forwardRef(
   ({ legendPosition, chartRef, isDragging: isDragging2, legendConfig }, ref) => {
     var _a2;
     const chart2 = chartRef == null ? void 0 : chartRef.current;
-    const { options, generatedDatasets, chartType } = legendConfig;
+    const { options, generatedDatasets, chartType } = legendConfig ?? {};
     const datasets = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets;
     const { legend: legend2, legendClick } = useLegendState({
       chartRef,
@@ -26736,13 +26738,17 @@ const LegendPanel = forwardRef(
   }
 );
 const LegendDropZone = (legendDropZoneProps) => {
-  const { position, onDrop, placeholderSize } = legendDropZoneProps;
+  const {
+    position = "",
+    onDrop = noop$2,
+    placeholderSize = {}
+  } = legendDropZoneProps ?? {};
   const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
     accept: "legend",
     drop: onDrop,
     collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
+      isOver: monitor == null ? void 0 : monitor.isOver(),
+      canDrop: monitor == null ? void 0 : monitor.canDrop()
     })
   }));
   const isActive2 = isOver && canDrop;
@@ -26753,10 +26759,10 @@ const LegendDropZone = (legendDropZoneProps) => {
       className: cx(
         styles$3.dropzone,
         isActive2 && styles$3.isActive,
-        position.includes("left") && styles$3.left,
-        position.includes("right") && styles$3.right,
-        position.includes("top") && styles$3.top,
-        position.includes("bottom") && styles$3.bottom
+        (position == null ? void 0 : position.includes("left")) && styles$3.left,
+        (position == null ? void 0 : position.includes("right")) && styles$3.right,
+        (position == null ? void 0 : position.includes("top")) && styles$3.top,
+        (position == null ? void 0 : position.includes("bottom")) && styles$3.bottom
       ),
       children: /* @__PURE__ */ jsx(
         "div",
@@ -26789,7 +26795,7 @@ const LegendDropZones = (legendDropZonesProps) => {
         zIndex: isDragging2 ? 0 : -1
         // Position dropzones behind chart when not needed
       },
-      children: positions2.map((position) => /* @__PURE__ */ jsx(
+      children: positions2 == null ? void 0 : positions2.map((position) => /* @__PURE__ */ jsx(
         LegendDropZone,
         {
           position,
@@ -26803,24 +26809,32 @@ const LegendDropZones = (legendDropZonesProps) => {
 };
 const Legend2 = ({ chartRef, legendConfig }) => {
   const chart2 = chartRef == null ? void 0 : chartRef.current;
-  const { chartArea } = chart2 ?? {};
+  const [chartArea, setChartArea] = useState(
+    chart2 == null ? void 0 : chart2.chartArea
+  );
   const {
     options: { legend: legend2 }
   } = legendConfig ?? {};
-  const [measureRef] = useMeasure$1();
+  const [measureRef, measureRect2] = useMeasure$1();
   const resizeRef = measureRef;
   const panelRef = useRef(null);
   const [legendPosition, setLegendPosition] = useState(
     (legend2 == null ? void 0 : legend2.position) || Position.BottomLeft
   );
-  const panelRect = panelRef.current ? panelRef.current.getBoundingClientRect() : null;
+  const panelRect = (panelRef == null ? void 0 : panelRef.current) ? panelRef.current.getBoundingClientRect() : null;
   const panelSize = { width: panelRect == null ? void 0 : panelRect.width, height: panelRect == null ? void 0 : panelRect.height };
-  const [{ isDragging: isDragging2 }, dragRef] = useDrag(() => ({
+  const [{ isDragging: isDragging2 = false }, dragRef = noop$2] = useDrag(() => ({
     type: "legend",
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
     })
   }));
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setChartArea(chart2 == null ? void 0 : chart2.chartArea);
+    }, 20);
+    return () => clearTimeout(timeout);
+  }, [measureRect2]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$3.resizeContainer }),
     /* @__PURE__ */ jsx(
@@ -26843,7 +26857,8 @@ const Legend2 = ({ chartRef, legendConfig }) => {
         setLegendPosition: (position) => setLegendPosition(position),
         isDragging: isDragging2,
         placeholderSize: panelSize
-      }
+      },
+      measureRect2.width
     )
   ] });
 };