Merge pull request #21 from stevekirks/no-react

Remove React
stevekirks · Dec 17, 2023 · 3e27932 · 3e27932
2 parents e66dbb0 + bab4fae
commit 3e27932
Show file tree

Hide file tree

Showing 23 changed files with 2,243 additions and 39,655 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_DATA_SERVICES_URL='/data/services.json'
diff --git a/.env.development b/.env.development
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -14,7 +14,7 @@ jobs:
 
       - name: Install and Build
         env:
-          REACT_APP_DATA_SERVICES_URL: "data/services.json"
+          VITE_DATA_SERVICES_URL: "data/services.json"
         run: |
           npm install
           npm run build

diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/.cache
+/dist
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 <h1 align="center">D3 Force Diagram | <a href="https://stevekirks.github.io/d3-force-diagram">Demo</a></h1>
 
-Built using [Create-React-App](https://facebook.github.io/create-react-app/) with [Typescript](https://facebook.github.io/create-react-app/docs/adding-typescript) and [d3 v7](https://d3js.org/)
+Built in [Typescript](https://www.typescriptlang.org/) with [d3 v7](https://d3js.org/)
 
 ### Features
 -   node highlighting (type in search field or click one or more nodes)
@@ -15,11 +15,11 @@ Built using [Create-React-App](https://facebook.github.io/create-react-app/) wit
 -   node hierarchy up to two levels in depth (double-click a node to explode or re-group)
 
 ### Usage
-Clone this repository then run
+Requires npm. Clone this repository, then run
 ```
 npm install
-npm start
+npm run start
 ```
 
 ### Data format
-Sample data is stored in the `public/data` folder.
+Sample data is stored in the `public/data` folder and set in the `.env` file.
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="D3 Force Diagram" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
+  <title>D3 Force Diagram</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root">
+    <div>
+      <div class="header row">
+        <h1 class="col-4">Service Registry Diagram</h1>
+        <div class="col-8 config-box">
+          <label id="lblSearch" >Search</label>
+          <input id="inInputSearch" type="text" />
+          <button id="btnHighlight">
+            Highlight
+          </button>
+          <input id="chkboxShowAllLabels" type="checkbox" />
+          <label for="chkboxShowAllLabels">Show all labels</label>
+          <input id="chkboxShowOnlyHighlighted" type="checkbox" />
+          <label for="chkboxShowOnlyHighlighted">Show only highlighted</label>
+          <input id="chkboxInvertBackground" type="checkbox" />
+          <label for="chkboxInvertBackground">Invert Background</label>
+          <input id="chkboxHasForceSimulation" type="checkbox" />
+          <label for="chkboxHasForceSimulation">Force</label>
+        </div>
+      </div>
+
+      <div class="content">
+        <div id="diagram"></div>
+        <div id="info-box">
+          <h2 class="title">Diagram</h2>
+          <div class="notes"></div>
+          <table class="table"></table>
+          <div class="timestamp"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="/src/index.ts"></script>
+</body>
+
+</html>