plugin work, adding chart graph widget

nih-sparc · Apr 25, 2024 · 5dcc534 · 5dcc534
1 parent e1a7273
commit 5dcc534
Show file tree

Hide file tree

Showing 28 changed files with 201 additions and 468 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+node_modules/storybook
+src/
+test/
+storybook-static/
diff --git a/README.md b/README.md
@@ -243,7 +243,6 @@ Here is an example of the SampleComponent.vue file as of 1/26/2024. See github f
 </script>
 <style scoped lang="scss">
 //import SPARC styles
-@import '../assets/delete-when-dsc2-imported/_variables.scss';
 
 
 </style>

diff --git a/index.html b/index.html
@@ -7,6 +7,6 @@
   </head>
   <body style="height:100vh">
     <div id="app" style="height:100vh"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -1,14 +1,31 @@
 {
   "name": "sparc-dashboard-beta",
-  "version": "0.1.4",
+  "version": "0.1.95",
   "author": "Sam Kraft (https://Sparc.Science)",
   "private": false,
-  "main": "index.js",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles.css": "./dist/style.css"
+  },
+  "browser": {
+    "./styles.css": "./dist/style.css"
+  },
+  "types": "dist/SparcDashboard.d.ts",
+  "license": "Apache-2.0",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite & yarn tailwindcss -i ./src/assets/base.css -o ./dist/output.css --watch",
-    "build": "vite build",
+    "build": "tsc & vite build",
     "preview": "vite preview",
-    "build-only": "vite build",
+    "build-only": "vite build; yarn tailwindcss -i ./src/assets/base.css -o ./dist/output.css",
+    "release:beta": "npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
@@ -18,16 +35,17 @@
   },
   "dependencies": {
     "@abi-software/flatmapvuer": "^0.6.1-vue3.8",
-    "sparc-design-system-components-2": "0.0.26",
     "@tsconfig/node21": "^21.0.1",
     "axios": "^1.6.7",
-
+    "chart.js": "^4.4.2",
     "gridstack": "^9.5.0",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
+    "sparc-design-system-components-2": "0.0.26",
     "storybook": "^7.5.3",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-chartjs": "^5.3.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -48,8 +66,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+
     "tailwindcss": "^3.3.5",
     "typescript": "~5.2.0",
     "vite": "^4.4.11",

diff --git a/src/App.vue b/src/App.vue
@@ -4,8 +4,8 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch} from 'vue';
-import SparcDashboard from "./components/SparcDashboard.vue"
-import "../dist/output.css"
+//import SparcDashboard from "./components/SparcDashboard.vue"
+//import "../tailwind/output.css"
 
 
   onMounted(() => {

diff --git a/src/DashboardPlugin.js b/src/DashboardPlugin.js
@@ -0,0 +1,52 @@
+
+import { SparcDashboard } from './components/Index'
+import "../tailwind/output.css"
+import { createPinia } from 'pinia'
+import { defineAsyncComponent } from 'vue'
+import mitt from 'mitt'
+import { useGlobalVarsStore } from './stores/globalVars'
+import '../node_modules/sparc-design-system-components-2/dist/style.css';
+
+
+  //for auto install -----------------------------------------------------------------------------------------------------------------
+
+export default {
+  install: (app) => {
+
+    const emitter = mitt();
+    app.provide('emitter', emitter); 
+    //app.config.globalProperties.$emitter = emitter;
+    app.use(createPinia());
+
+    const componentMap = [
+        'ImageSelector',
+        'QDBChart',
+        'FlatmapViewer',
+        'BiolucidaViewer'
+    ]
+    componentMap.forEach(comp=>{
+        const asyncComponent = defineAsyncComponent(() => import(`./components/${comp}.vue`)); 
+        app.component(comp, asyncComponent);
+    })
+
+    //add list of components to add componet drop down
+    const globalVars = useGlobalVarsStore();
+    globalVars.componentList = componentMap;
+
+    app.component("SparcDashboard", SparcDashboard);
+  },
+};
+export {SparcDashboard};
+// Auto-install when vue is found (eg. in browser via <script> tag)
+// let GlobalVue = null;
+// if (typeof window !== 'undefined') {
+// 	GlobalVue = window.Vue;
+// } else if (typeof global !== 'undefined') {
+// 	GlobalVue = global.Vue;
+// }
+// if (GlobalVue) {
+// 	GlobalVue.use(sparcDash);
+// }
+//------------------------------------------------------------------------------------------------------------------------------------
+
+
diff --git a/src/assets/delete-when-dsc2-imported/_base.scss b/src/assets/delete-when-dsc2-imported/_base.scss