feat: Update ChartPanel to use dgrd2 for data display (#4511)

GordonSmith · web-flow · commit 9a0190451449 · 2026-01-21T09:08:30.000Z
Removes the need for the dgrid-shim workaround fixes #4510 Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/layout/README.md b/packages/layout/README.md
@@ -54,7 +54,7 @@ This package is part of the mono repository "@hpcc-js" (aka Visualization Framew
     </div>
     <script type="module">
         import { Column, Pie, Line, Step } from "@hpcc-js/chart";
-        import { Carousel } from "@hpcc-js/layout"; //  Has dependency on "dgrid" so can't be used in a module...
+        import { Carousel } from "@hpcc-js/layout";
 
         const columns = ["Subject", "Year 1", "Year 2", "Year 3"];
         const data = [
diff --git a/packages/layout/index-preview.html b/packages/layout/index-preview.html
@@ -23,7 +23,6 @@
             margin-top: 20px;
         }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim/dist/index.min.js"></script>
     <script type="importmap">
         {
             "imports": {
@@ -36,7 +35,6 @@
                 "@hpcc-js/chart": "../chart/dist/index.js",
                 "@hpcc-js/codemirror": "../codemirror/dist/index.js",
                 "@hpcc-js/comms": "../comms/dist/index.js",
-                "@hpcc-js/dgrid": "../dgrid/dist/index.js",
                 "@hpcc-js/dgrid2": "../dgrid2/dist/index.js",
                 "@hpcc-js/react": "../react/dist/index.js",
                 "@hpcc-js/html": "../html/dist/index.js",
diff --git a/packages/layout/index.html b/packages/layout/index.html
@@ -23,7 +23,6 @@
             margin-top: 20px;
         }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim/dist/index.min.js"></script>
 </head>
 
 <body onresize="doResize()">
diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -40,7 +40,7 @@
         "@hpcc-js/api": "^3.4.5",
         "@hpcc-js/chart": "^3.6.1",
         "@hpcc-js/common": "^3.6.1",
-        "@hpcc-js/dgrid": "^3.5.5",
+        "@hpcc-js/dgrid2": "^3.5.3",
         "@hpcc-js/util": "^3.4.4"
     },
     "devDependencies": {
@@ -64,4 +64,4 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization"
-}
+}
diff --git a/packages/layout/src/ChartPanel.ts b/packages/layout/src/ChartPanel.ts
@@ -1,7 +1,6 @@
 import { IHighlight } from "@hpcc-js/api";
 import { Button, Database, IconBar, ProgressBar, Spacer, SVGWidget, Text, TitleBar, ToggleButton, Utility, Widget } from "@hpcc-js/common";
-import type { XYAxis } from "@hpcc-js/chart";
-import { Table } from "@hpcc-js/dgrid";
+import { Table } from "@hpcc-js/dgrid2";
 import { select as d3Select } from "d3-selection";
 import { Border2 } from "./Border2.ts";
 import { Carousel } from "./Carousel.ts";
@@ -100,7 +99,7 @@ export class ChartPanel<T extends Widget = Widget> extends Border2 implements IH
     protected _table = new Table();
     protected _widget: T;
 
-    protected _hideLegendToggleList = ["dgrid_Table"];
+    protected _hideLegendToggleList = ["dgrid_Table", "dgrid2_Table"];
 
     constructor() {
         super();
diff --git a/packages/layout/tests/layout.browser.spec.ts b/packages/layout/tests/layout.browser.spec.ts
@@ -2,20 +2,13 @@ import { Class, EntityCard, HTMLWidget, Icon, SVGWidget } from "@hpcc-js/common"
 import { Bar, Column, Line, Pie, Step } from "@hpcc-js/chart";
 import { describe, it, expect } from "vitest";
 import { classDef, data, render } from "../../common/tests/index.ts";
-import { load_dgrid_shim } from "../../dgrid/tests/index.ts";
 
 const urlSearch: string = "";
 
 describe("@hpcc-js/layout", async () => {
-    await load_dgrid_shim();
-
-    it("Shim Loaded", () => {
-        expect(globalThis["@hpcc-js/dgrid-shim"]).to.exist;
-    });
-
     const layoutMod = await import("@hpcc-js/layout");
 
-    it("dgridMod Loaded", () => {
+    it("layoutMod Loaded", () => {
         expect(layoutMod).to.exist;
     });
 

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,6 @@`
`23`	`23`	`margin-top: 20px;`
`24`	`24`	`}`
`25`	`25`	`</style>`
`26`		`- <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/dgrid-shim/dist/index.min.js"></script>`
`27`	`26`	`</head>`
`28`	`27`
`29`	`28`	`<body onresize="doResize()">`