fixed hillchart for lowcoder-cli-template

Author: raheeliftikhar5

client/packages/lowcoder-cli-template-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "scripts": {
     "start": "NODE_OPTIONS=--max_old_space_size=6144 vite",
@@ -22,7 +22,9 @@
     }
   },
   "dependencies": {
+    "@observablehq/inspector": "^5.0.1",
     "@observablehq/runtime": "^4.8.2",
+    "@observablehq/stdlib": "^5.8.8",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "lowcoder-cli": "^0.0.30",

client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types'
-import { Runtime, Inspector } from '@observablehq/runtime';
+import { Runtime } from '@observablehq/runtime';
+import { Inspector } from "@observablehq/inspector";
+import { Library } from "@observablehq/stdlib";
+
+const library = new Library();
 
 function Chart(props) {
   const [chartRef, setChartRef] = React.useState();
@@ -16,21 +20,20 @@ function Chart(props) {
     main.variable().define('translateXtoY', function() {
       return x => 50 * Math.sin((Math.PI / 50) * x - (1 / 2) * Math.PI) + 50;
     });
-    main.variable().define('d3', ['require'], function(require) {
-      return require('https://d3js.org/d3.v5.min.js');
+    main.variable().define('d3', [], function() {
+      return Library.require('https://d3js.org/d3.v5.min.js');
     });
 
     // Define the HillChart class
-    main.variable().define('HillChart', ['d3', 'DOM', 'translateXtoY'], function(d3, DOM, translateXtoY) {
+    main.variable().define('HillChart', ['d3', 'translateXtoY'], function(d3, translateXtoY) {
       return class HillChart {
         constructor(chart_height, chart_width, items) {
           this.chart_height = chart_height;
           this.chart_width = chart_width;
           this.items = items;
-      
-          this.svg = d3.select(DOM.svg(this.chart_width, this.chart_height)).attr('viewBox', `-20 -20 ${this.chart_width + 80} ${this.chart_height + 20}`);
+
+          this.svg = d3.select(library.DOM.svg(this.chart_width, this.chart_height)).attr('viewBox', `-20 -20 ${this.chart_width + 80} ${this.chart_height + 20}`);
         }
-        
 
         render() {
           const xScale = d3

client/yarn.lock

@@ -3164,6 +3164,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@observablehq/inspector@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@observablehq/inspector@npm:5.0.1"
+  dependencies:
+    isoformat: ^0.2.0
+  checksum: a3e93a5559eaefee498e810864c36830147df59d11fd32054b0bf088a7d0a83de494617c900bb1f6680ce70e378a4c7fdc56aff7baf3f59f049dafbe442cc77a
+  languageName: node
+  linkType: hard
+
 "@observablehq/runtime@npm:^4.8.2":
   version: 4.28.0
   resolution: "@observablehq/runtime@npm:4.28.0"
@@ -3184,6 +3193,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@observablehq/stdlib@npm:^5.8.8":
+  version: 5.8.8
+  resolution: "@observablehq/stdlib@npm:5.8.8"
+  dependencies:
+    d3-array: ^3.2.0
+    d3-dsv: ^3.0.1
+    d3-require: ^1.3.0
+  checksum: 0da51131dc49bd356d363838aa4f2631fbb87acef217c9d73cb54f641c5f54a7359dff67bb94916db52cf6ad8b0ffef526e548eeac3e2a908455d9eb7c889256
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -8213,7 +8233,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"d3-dsv@npm:1 - 3, d3-dsv@npm:3":
+"d3-dsv@npm:1 - 3, d3-dsv@npm:3, d3-dsv@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-dsv@npm:3.0.1"
   dependencies:
@@ -13694,7 +13714,9 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   version: 0.0.0-use.local
   resolution: "lowcoder-cli-template-typescript@workspace:packages/lowcoder-cli-template-typescript"
   dependencies:
+    "@observablehq/inspector": ^5.0.1
     "@observablehq/runtime": ^4.8.2
+    "@observablehq/stdlib": ^5.8.8
     "@types/react": ^18.2.45
     "@types/react-dom": ^18.2.18
     lowcoder-cli: ^0.0.30