Remove Datagrid dependency

chartlets.js/CHANGES.md

@@ -9,6 +9,11 @@
 * Callbacks will now only be invoked when there’s an actual change in state, 
   reducing unnecessary processing and improving performance. (#112)
 
+* Removed `@mui/x-data-grid` from `peerDependencies`, but `DataGrid` 
+  functionality remains. Users can refer to the 
+  [Provider's guide](https://bcdev.github.io/chartlets/guide/providers/#extending-the-framework) 
+ for usage details. 
+
 ## Version 0.1.4 (from 2025/03/06)
 
 * In `chartlets.js` we no longer emit warnings and errors in common 

chartlets.js/packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets-demo",
-  "version": "0.1.3",
+  "version": "0.1.5-dev.0",
   "description": "Demonstrator for the Chartlets framework.",
   "type": "module",
   "files": [

chartlets.js/packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.1.4",
+  "version": "0.1.5-dev.0",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [
@@ -44,6 +44,11 @@
       "types": "./dist/plugins/vega/index.d.ts",
       "module": "./dist/vega-plugin.js",
       "require": "./dist/vega-plugin.cjs"
+    },
+    "./datagrid": {
+      "types": "./dist/plugins/mui/DataGrid.d.ts",
+      "module": "./dist/dataGrid.js",
+      "require": "./dist/dataGrid.cjs"
     }
   },
   "scripts": {
@@ -61,16 +66,12 @@
   },
   "peerDependencies": {
     "@mui/material": "^6.2.1",
-    "@mui/x-data-grid": ">=7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-vega": ">=7",
     "vega-themes": ">=2"
   },
   "peerDependenciesMeta": {
-    "@mui/x-data-grid": {
-      "optional": true
-    },
     "react": {
       "optional": false
     },

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -12,7 +12,7 @@ import { Switch } from "./Switch";
 import { Tabs } from "./Tabs";
 import { Typography } from "./Typography";
 import { Slider } from "./Slider";
-import { DataGrid } from "@/plugins/mui/DataGrid";
+// import { DataGrid } from "@/plugins/mui/DataGrid";
 import { Dialog } from "@/plugins/mui/Dialog";
 import { Table } from "@/plugins/mui/Table";
 
@@ -23,7 +23,9 @@ export default function mui(): Plugin {
       ["Button", Button],
       ["Checkbox", Checkbox],
       ["CircularProgress", CircularProgress],
-      ["DataGrid", DataGrid],
+      // Commenting out DataGrid as @mui/x-data-grid is quite large. It will
+      // now be used as a plugin if needed by the user from v0.1.5.
+      // ["DataGrid", DataGrid],
       ["Dialog", Dialog],
       ["Divider", Divider],
       ["IconButton", IconButton],

chartlets.js/packages/lib/vite.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         chartlets: resolve(__dirname, "src/index.ts"),
         "mui-plugin": resolve(__dirname, "src/plugins/mui/index.ts"),
         "vega-plugin": resolve(__dirname, "src/plugins/vega/index.ts"),
+        datagrid: resolve(__dirname, "src/plugins/mui/DataGrid.tsx"),
       },
       //formats: ["es"],
     },

chartlets.py/chartlets/version.py

@@ -1 +1 @@
-version = "0.1.4"
+version = "0.1.5-dev.0"

docs/guide/providers.md

@@ -155,4 +155,53 @@ _Coming soon._
 
 ## Extending the framework
 
-_Coming soon._
+### Add your Plugins
+
+#### DataGrid Usage from Chartlets v0.1.5
+In the `v0.1.5` release of Chartlets, the `@mui/x-data-grid` library was removed 
+from `peerDependencies`. This change was made to give users the flexibility 
+to install the library only if needed, as it is relatively large 
+(>6MB at the time of writing).
+
+However, the `DataGrid` component remains fully supported. To use it, 
+follow these steps:
+
+0. Install `@mui/x-data-grid` in your application
+
+```shell
+  npm i @mui/x-data-grid
+```
+
+1. Create a Plugin Function 
+
+Define a plugin function that integrates DataGrid with Chartlets.
+
+```typescript
+import { DataGrid } from "chartlets/DataGrid";
+import type { Plugin } from "chartlets";
+
+export default function your_plugin(): Plugin {
+  return {
+    components: [
+      ["DataGrid", DataGrid],
+    ],
+  };
+}
+
+```
+2. Pass the Plugin to `initializeContributions`
+Register the plugin within Chartlets using initializeContributions.
+
+```typescript
+import your_plugin from "./plugin";
+
+initializeContributions({
+      plugins: [your_plugin()],
+      .....
+})
+```
+Once this setup is complete, `DataGrid` will be available for use, allowing 
+users to create server-side panels using this component. 
+
+_More Coming soon._
+