react-open-source-grid 1.6.6 → 1.7.0

package/dist/lib/index.js

@@ -13515,10 +13515,511 @@ function renderMarkdownPreview(markdown) {
   }
   return html;
 }
+
+// src/charts/rangeToChart.ts
+function normalizeRange(range) {
+  const startRow = Math.min(range.start.rowIndex, range.end.rowIndex);
+  const endRow = Math.max(range.start.rowIndex, range.end.rowIndex);
+  const startCol = Math.min(range.start.colIndex, range.end.colIndex);
+  const endCol = Math.max(range.start.colIndex, range.end.colIndex);
+  return { startRow, endRow, startCol, endCol };
+}
+function isNumeric(value) {
+  if (value === null || value === void 0 || value === "") {
+    return false;
+  }
+  const num = Number(value);
+  return !isNaN(num) && isFinite(num);
+}
+function toNumber2(value) {
+  if (isNumeric(value)) {
+    return Number(value);
+  }
+  return 0;
+}
+function generateChartId() {
+  return `chart-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+var DEFAULT_COLORS = [
+  "#8884d8",
+  // blue
+  "#82ca9d",
+  // green
+  "#ffc658",
+  // yellow
+  "#ff7c7c",
+  // red
+  "#a28fd0",
+  // purple
+  "#ff9f40",
+  // orange
+  "#4bc0c0",
+  // teal
+  "#ff6384"
+  // pink
+];
+function buildChartConfigFromRange(options) {
+  const {
+    range,
+    rows,
+    columns,
+    chartType,
+    useFirstColumnAsCategory = true,
+    title,
+    theme = "light"
+  } = options;
+  const normalized = normalizeRange(range);
+  const { startRow, endRow, startCol, endCol } = normalized;
+  if (startRow < 0 || endRow >= rows.length) {
+    throw new Error("Invalid row range");
+  }
+  if (startCol < 0 || endCol >= columns.length) {
+    throw new Error("Invalid column range");
+  }
+  const selectedRows = rows.slice(startRow, endRow + 1);
+  const selectedColumns = columns.slice(startCol, endCol + 1);
+  let categoryColumnIndex = 0;
+  let dataColumnStartIndex = 0;
+  if (useFirstColumnAsCategory && selectedColumns.length > 1) {
+    categoryColumnIndex = 0;
+    dataColumnStartIndex = 1;
+  } else {
+    categoryColumnIndex = -1;
+    dataColumnStartIndex = 0;
+  }
+  const xLabels = [];
+  if (categoryColumnIndex >= 0) {
+    const categoryField = selectedColumns[categoryColumnIndex].field;
+    selectedRows.forEach((row) => {
+      const value = row[categoryField];
+      xLabels.push(value !== null && value !== void 0 ? String(value) : "");
+    });
+  } else {
+    for (let i = 0; i < selectedRows.length; i++) {
+      xLabels.push(i + 1);
+    }
+  }
+  const series = [];
+  const dataColumns = selectedColumns.slice(dataColumnStartIndex);
+  dataColumns.forEach((column, index) => {
+    const seriesData = [];
+    const field = column.field;
+    let hasNumericData = false;
+    selectedRows.forEach((row) => {
+      const value = row[field];
+      if (isNumeric(value)) {
+        hasNumericData = true;
+        seriesData.push(toNumber2(value));
+      } else {
+        seriesData.push(0);
+      }
+    });
+    if (hasNumericData) {
+      series.push({
+        name: column.headerName || field,
+        data: seriesData,
+        color: DEFAULT_COLORS[index % DEFAULT_COLORS.length]
+      });
+    }
+  });
+  if (series.length === 0) {
+    throw new Error("No numeric data found in the selected range");
+  }
+  if (chartType === "pie") {
+    if (series.length === 1) {
+    } else {
+      const summedData = new Array(xLabels.length).fill(0);
+      series.forEach((s) => {
+        s.data.forEach((value, idx) => {
+          summedData[idx] += value;
+        });
+      });
+      series.length = 0;
+      series.push({
+        name: "Total",
+        data: summedData,
+        color: DEFAULT_COLORS[0]
+      });
+    }
+  }
+  return {
+    id: generateChartId(),
+    type: chartType,
+    title: title || `${chartType.charAt(0).toUpperCase() + chartType.slice(1)} Chart`,
+    xLabels,
+    series,
+    theme
+  };
+}
+function updateChartType(config, newType) {
+  var _a;
+  return {
+    ...config,
+    type: newType,
+    title: ((_a = config.title) == null ? void 0 : _a.replace(
+      /^(Line|Bar|Area|Pie)/i,
+      newType.charAt(0).toUpperCase() + newType.slice(1)
+    )) || `${newType.charAt(0).toUpperCase() + newType.slice(1)} Chart`
+  };
+}
+function updateChartTheme(config, newTheme) {
+  return {
+    ...config,
+    theme: newTheme
+  };
+}
+
+// src/charts/QuickChart.tsx
+import React35, { useRef as useRef20 } from "react";
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as Tooltip2,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+import { toPng } from "html-to-image";
+var QuickChart = ({
+  config,
+  onClose,
+  onChangeType,
+  onToggleTheme,
+  allowTypeSwitch = true,
+  allowThemeSwitch = true,
+  width = 600,
+  height = 400
+}) => {
+  const chartRef = useRef20(null);
+  const theme = config.theme || "light";
+  const transformedData = config.xLabels.map((label, index) => {
+    const dataPoint = { name: label };
+    config.series.forEach((series) => {
+      dataPoint[series.name] = series.data[index] || 0;
+    });
+    return dataPoint;
+  });
+  const pieData = config.series.length > 0 ? config.xLabels.map((label, index) => ({
+    name: label,
+    value: config.series[0].data[index] || 0
+  })) : [];
+  const handleExportPNG = async () => {
+    if (!chartRef.current) return;
+    try {
+      const dataUrl = await toPng(chartRef.current, {
+        quality: 1,
+        pixelRatio: 2,
+        backgroundColor: theme === "dark" ? "#1a1a1a" : "#ffffff"
+      });
+      const link = document.createElement("a");
+      link.download = `${config.title || "chart"}-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    } catch (error) {
+      console.error("Failed to export chart:", error);
+    }
+  };
+  const chartTypeIcon = (type) => {
+    switch (type) {
+      case "line":
+        return "\u{1F4C8}";
+      case "bar":
+        return "\u{1F4CA}";
+      case "area":
+        return "\u{1F4C9}";
+      case "pie":
+        return "\u{1F967}";
+      default:
+        return "\u{1F4CA}";
+    }
+  };
+  const renderChart = () => {
+    const commonProps = {
+      data: config.type === "pie" ? pieData : transformedData,
+      margin: { top: 5, right: 30, left: 20, bottom: 5 }
+    };
+    const axisProps = {
+      stroke: theme === "dark" ? "#888" : "#666"
+    };
+    const gridProps = {
+      strokeDasharray: "3 3",
+      stroke: theme === "dark" ? "#333" : "#ddd"
+    };
+    switch (config.type) {
+      case "line":
+        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(LineChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+          Tooltip2,
+          {
+            contentStyle: {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              border: `1px solid ${theme === "dark" ? "#444" : "#ccc"}`,
+              color: theme === "dark" ? "#fff" : "#000"
+            }
+          }
+        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(
+          Line,
+          {
+            key: series.name,
+            type: "monotone",
+            dataKey: series.name,
+            stroke: series.color,
+            strokeWidth: 2,
+            dot: { r: 4 },
+            activeDot: { r: 6 }
+          }
+        ))));
+      case "bar":
+        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(BarChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+          Tooltip2,
+          {
+            contentStyle: {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              border: `1px solid ${theme === "dark" ? "#444" : "#ccc"}`,
+              color: theme === "dark" ? "#fff" : "#000"
+            }
+          }
+        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(Bar, { key: series.name, dataKey: series.name, fill: series.color }))));
+      case "area":
+        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(AreaChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+          Tooltip2,
+          {
+            contentStyle: {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              border: `1px solid ${theme === "dark" ? "#444" : "#ccc"}`,
+              color: theme === "dark" ? "#fff" : "#000"
+            }
+          }
+        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(
+          Area,
+          {
+            key: series.name,
+            type: "monotone",
+            dataKey: series.name,
+            fill: series.color,
+            stroke: series.color,
+            fillOpacity: 0.6
+          }
+        ))));
+      case "pie":
+        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(PieChart, null, /* @__PURE__ */ React35.createElement(
+          Pie,
+          {
+            data: pieData,
+            cx: "50%",
+            cy: "50%",
+            labelLine: false,
+            label: ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`,
+            outerRadius: Math.min(height, width) / 4,
+            fill: "#8884d8",
+            dataKey: "value"
+          },
+          pieData.map((_, index) => {
+            var _a;
+            return /* @__PURE__ */ React35.createElement(
+              Cell,
+              {
+                key: `cell-${index}`,
+                fill: ((_a = config.series[0]) == null ? void 0 : _a.color) || ["#8884d8", "#82ca9d", "#ffc658", "#ff7c7c", "#a28fd0"][index % 5]
+              }
+            );
+          })
+        ), /* @__PURE__ */ React35.createElement(
+          Tooltip2,
+          {
+            contentStyle: {
+              backgroundColor: theme === "dark" ? "#2a2a2a" : "#fff",
+              border: `1px solid ${theme === "dark" ? "#444" : "#ccc"}`,
+              color: theme === "dark" ? "#fff" : "#000"
+            }
+          }
+        ), /* @__PURE__ */ React35.createElement(Legend, null)));
+      default:
+        return /* @__PURE__ */ React35.createElement("div", null, "Unsupported chart type");
+    }
+  };
+  return /* @__PURE__ */ React35.createElement(
+    "div",
+    {
+      ref: chartRef,
+      className: `quick-chart quick-chart--${theme}`,
+      style: { width, height }
+    },
+    /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__header" }, /* @__PURE__ */ React35.createElement("h3", { className: "quick-chart__title" }, config.title), /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__controls" }, allowTypeSwitch && onChangeType && /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__type-selector" }, ["line", "bar", "area", "pie"].map((type) => /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        key: type,
+        className: `quick-chart__type-btn ${config.type === type ? "quick-chart__type-btn--active" : ""}`,
+        onClick: () => onChangeType(type),
+        title: `${type.charAt(0).toUpperCase() + type.slice(1)} Chart`,
+        "aria-label": `Switch to ${type} chart`
+      },
+      chartTypeIcon(type)
+    ))), allowThemeSwitch && onToggleTheme && /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        className: "quick-chart__btn",
+        onClick: onToggleTheme,
+        title: "Toggle theme",
+        "aria-label": "Toggle theme"
+      },
+      theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"
+    ), /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        className: "quick-chart__btn",
+        onClick: handleExportPNG,
+        title: "Export as PNG",
+        "aria-label": "Export chart as PNG"
+      },
+      "\u{1F4E5}"
+    ), onClose && /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        className: "quick-chart__btn quick-chart__close",
+        onClick: onClose,
+        title: "Close",
+        "aria-label": "Close chart"
+      },
+      "\xD7"
+    ))),
+    /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__body" }, renderChart())
+  );
+};
+
+// src/charts/ChartOverlay.tsx
+import React36, { useEffect as useEffect17, useRef as useRef21, useState as useState26 } from "react";
+var ChartOverlay = ({
+  config,
+  onClose,
+  onChangeType,
+  onToggleTheme,
+  position = "bottom-right",
+  draggable = true
+}) => {
+  const overlayRef = useRef21(null);
+  const [isDragging, setIsDragging] = useState26(false);
+  const [dragOffset, setDragOffset] = useState26({ x: 0, y: 0 });
+  const [chartPosition, setChartPosition] = useState26({ x: 0, y: 0 });
+  const [dimensions] = useState26({ width: 600, height: 400 });
+  useEffect17(() => {
+    if (!overlayRef.current) return;
+    const updatePosition = () => {
+      const viewport = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      let x = 0;
+      let y = 0;
+      switch (position) {
+        case "top-right":
+          x = viewport.width - dimensions.width - 40;
+          y = 40;
+          break;
+        case "top-left":
+          x = 40;
+          y = 40;
+          break;
+        case "bottom-right":
+          x = viewport.width - dimensions.width - 40;
+          y = viewport.height - dimensions.height - 40;
+          break;
+        case "bottom-left":
+          x = 40;
+          y = viewport.height - dimensions.height - 40;
+          break;
+        case "center":
+          x = (viewport.width - dimensions.width) / 2;
+          y = (viewport.height - dimensions.height) / 2;
+          break;
+      }
+      setChartPosition({ x, y });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    return () => window.removeEventListener("resize", updatePosition);
+  }, [position, dimensions]);
+  const handleMouseDown = (e) => {
+    if (!draggable) return;
+    if (e.target.closest(".quick-chart__body")) return;
+    setIsDragging(true);
+    setDragOffset({
+      x: e.clientX - chartPosition.x,
+      y: e.clientY - chartPosition.y
+    });
+  };
+  useEffect17(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      const newX = e.clientX - dragOffset.x;
+      const newY = e.clientY - dragOffset.y;
+      const maxX = window.innerWidth - dimensions.width;
+      const maxY = window.innerHeight - dimensions.height;
+      setChartPosition({
+        x: Math.max(0, Math.min(newX, maxX)),
+        y: Math.max(0, Math.min(newY, maxY))
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragOffset, dimensions]);
+  useEffect17(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ React36.createElement("div", { className: "chart-overlay" }, /* @__PURE__ */ React36.createElement("div", { className: "chart-overlay__backdrop", onClick: onClose }), /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      className: `chart-overlay__container ${isDragging ? "chart-overlay__container--dragging" : ""} ${draggable ? "chart-overlay__container--draggable" : ""}`,
+      style: {
+        left: chartPosition.x,
+        top: chartPosition.y,
+        width: dimensions.width,
+        height: dimensions.height
+      },
+      onMouseDown: handleMouseDown
+    },
+    /* @__PURE__ */ React36.createElement(
+      QuickChart,
+      {
+        config,
+        onClose,
+        onChangeType,
+        onToggleTheme,
+        allowTypeSwitch: true,
+        allowThemeSwitch: true,
+        width: dimensions.width,
+        height: dimensions.height
+      }
+    )
+  ));
+};
 export {
   AdvancedFilterBuilder,
   BadgeCell,
   ButtonCell,
+  ChartOverlay,
   ColumnChooser,
   ColumnFilters,
   CurrencyCell,
@@ -13544,6 +14045,7 @@ export {
   PivotToolbar,
   PriorityIndicator,
   ProgressBar,
+  QuickChart,
   Rating,
   RichSelectEditor,
   ServerAdapter,
@@ -13555,6 +14057,7 @@ export {
   VirtualScroller,
   WebSocketMockFeed,
   alpineTheme,
+  buildChartConfigFromRange,
   buildPivot,
   buildTreeFromFlat,
   collapseAllNodes,
@@ -13593,11 +14096,14 @@ export {
   isTreeNode,
   loadDensityMode,
   materialTheme,
+  normalizeRange,
   parseFormattedNumber,
   quartzTheme,
   saveDensityMode,
   themes,
   toggleNodeExpansion,
+  updateChartTheme,
+  updateChartType,
   useDensityMode,
   useEditorAutoFocus,
   useEditorClickOutside,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-open-source-grid",
   "private": false,
-  "version": "1.6.6",
+  "version": "1.7.0",
   "type": "module",
-  "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, and more",
+  "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, integrated charts, and more",
   "main": "./dist/lib/index.cjs",
   "module": "./dist/lib/index.js",
   "types": "./dist/lib/index.d.ts",
@@ -71,10 +71,12 @@
   "dependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",
     "exceljs": "^4.4.0",
+    "html-to-image": "^1.11.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6",
-    "react-syntax-highlighter": "^16.1.0"
+    "react-syntax-highlighter": "^16.1.0",
+    "recharts": "^2.10.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",