Feature/eslint

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+
+  workflow_dispatch:
+
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: '24.20.0'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check code formatting
+        run: npm run format:check
+
+      - name: Check code linting
+        run: npm run lint

.github/workflows/cross-platform-test.yml

@@ -2,9 +2,9 @@ name: Cross-Platform Compatibility Test
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.github/workflows/deploy-docs.yml

@@ -3,7 +3,7 @@ name: Deploy Docs to Pages
 on:
   # Runs on pushes targeting the `docs` branch and `main` branch.
   push:
-    branches: ["docs", "main"]
+    branches: ['docs', 'main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.prettierrc

@@ -1,10 +1,14 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "printWidth": 150,
-  "trailingComma": "none",
-  "arrowParens": "avoid",
+  "useTabs": false,
+  "printWidth": 100,
+  "trailingComma": "all",
   "bracketSpacing": true,
-  "spaceAfterFunction": true
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false,
+  "singleAttributePerLine": false,
+  "htmlWhitespaceSensitivity": "ignore"
 }

README.md

@@ -18,29 +18,35 @@ Demo the site functionality of this app [here](https://plotvuer-demo.herokuapp.c
 **Don't feel like coding? See how to copy and paste plotvuer as an HTML widget [here](https://github.com/ABI-Software/plotvuer/blob/master/README.md#copy-and-paste-as-an-html-widget)**
 
 ## Project installation
+
 ```
 npm i @abi-software/plotvuer
 ```
 
-
 ## Project setup
+
 ```
 npm install
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build-bundle
 ```
 
 ## How to use
+
 Include the package in your script.
+
 ```javascript
-import { PlotVuer } from '@abi-software/plotvuer'
-import '@abi-software/plotvuer/dist/plotvuer.css'
+import { PlotVuer } from '@abi-software/plotvuer';
+import '@abi-software/plotvuer/dist/plotvuer.css';
 ```
+
 Local registration in vue component:
+
 ```javascript
 export default {
   ...
@@ -94,39 +100,40 @@ let metadata = {
 }
 
 ```
+
 Note that these are the same inputs for data and layout as plotly normally takes in [`Plotly.newPlot()`](https://plotly.com/javascript/plotlyjs-function-reference/)
 
 ##### Sending plotly a csv file url
 
 ```javascript
 let data = {
-  url : 'https://example.com/myfile.csv'
-}
+  url: 'https://example.com/myfile.csv',
+};
 
-
-let metadata= {
+let metadata = {
   version: '1.1.0',
   type: 'plot',
   attrs: {
     'x-axis-column': 2, // **Optional**
     style: 'timeseries',
     'y-axes-columns': [3, 4, 5, 6, 7, 8, 9, 10], // **Optional**
-    'plot-layout': { // **Optional**
+    'plot-layout': {
+      // **Optional**
       height: '700px',
       margin: {
         t: 35,
         l: 85,
         r: 55,
         b: 190,
-        pad: 4
-      }
-    }
-  }
-}
+        pad: 4,
+      },
+    },
+  },
+};
 
 let supplementalData = {
-  url : 'https://example.com/mySupplementalFile.json'
-}
+  url: 'https://example.com/mySupplementalFile.json',
+};
 ```
 
 ## CSV file formatting
@@ -135,25 +142,24 @@ let supplementalData = {
 
 ### Example 1. Heatmap data
 
-|               | Gene 1  | Gene 2 |
-| :------------ |:--------|  ------|
-| Sample 1      | -1.54 | -3.40 |
-| Sample 2      | 0.68       |   1.22 |
-| Sample 3      | 0.05      |    0.66 |
-
+|          | Gene 1 | Gene 2 |
+| :------- | :----- | ------ |
+| Sample 1 | -1.54  | -3.40  |
+| Sample 2 | 0.68   | 1.22   |
+| Sample 3 | 0.05   | 0.66   |
 
 ### Example 2. Timeseries data
 
-
-| time (seconds)| Sweep 0_Membrane Potential (mV) |
-| :------------ |:--------|
-| 0     | -70.12939453 |
-| 0.0002    | -70.12939453     |
-| 0.0004      | -70.34301758      |
-
+| time (seconds) | Sweep 0_Membrane Potential (mV) |
+| :------------- | :------------------------------ |
+| 0              | -70.12939453                    |
+| 0.0002         | -70.12939453                    |
+| 0.0004         | -70.34301758                    |
 
 ## Copy and paste as an HTML widget
+
 Paste the following lines in the `<body>` of you HTML
+
 ```HTML
  <!-- Modify the 'file' input to point to a csv file you wish to show -->
  <plot-vuer-widget file="https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-4/RNA_Seq.csv"></plot-vuer-widget>
@@ -162,8 +168,11 @@ Paste the following lines in the `<body>` of you HTML
  <!-- widget source js from cdn -->
  <script src="https://cdn.jsdelivr.net/npm/@tehsurfer/plotvuer-widget/dist/plotVuer.js"></script>
 ```
+
 ### Modifying input file for widget
+
 Change this line to point at a csv file for display
+
 ```HTML
  <!-- Modify the 'file' input to point to a csv file you wish to show -->
  <plot-vuer-widget file="./path/to/file.csv"></plot-vuer-widget>
@@ -174,6 +183,7 @@ Change this line to point at a csv file for display
 The documentation is developed with `vitepress` and `vuese`. Documentation pages are in the `docs` folder.
 
 ### To run in local development mode
+
 ```bash
 npm run docs:watch
 ```

docs/.vitepress/config.js

@@ -1,57 +1,58 @@
-import { resolve } from "node:path";
-import { defineConfig } from 'vitepress'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitepress';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // Version number
-const versionNumber = process.env.npm_package_version
+const versionNumber = process.env.npm_package_version;
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "PlotVuer",
-  description: "API documentation for PlotVuer",
+  title: 'PlotVuer',
+  description: 'API documentation for PlotVuer',
   base: '/plotvuer/',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
       {
         text: 'API Reference',
-        link: '/components/PlotVuer'
-      }
+        link: '/components/PlotVuer',
+      },
     ],
 
     sidebar: [
       {
         text: 'Live Demo',
-        link: '/demo'
+        link: '/demo',
       },
       {
         text: 'API Reference',
-        link: '/components/PlotVuer'
+        link: '/components/PlotVuer',
       },
       {
         text: 'Version',
         items: [
           {
-            text: `${versionNumber}`
-          }
-        ]
-      }
+            text: `${versionNumber}`,
+          },
+        ],
+      },
     ],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/ABI-Software/plotvuer' }
-    ]
+    socialLinks: [{ icon: 'github', link: 'https://github.com/ABI-Software/plotvuer' }],
   },
   markdown: { attrs: { disable: true } },
   vite: {
     resolve: {
-      alias: [{ find: "@", replacement: resolve(__dirname, "../../src") }, {
-        // this is required for the SCSS modules
-        find: /^~(.*)$/,
-        replacement: '$1',
-      }],
+      alias: [
+        { find: '@', replacement: resolve(__dirname, '../../src') },
+        {
+          // this is required for the SCSS modules
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+      ],
     },
     css: {
       preprocessorOptions: {
@@ -75,6 +76,6 @@ export default defineConfig({
 
       // https://github.com/antfu/unocss
       // see unocss.config.ts for config
-    ]
-  }
-})
+    ],
+  },
+});

docs/.vitepress/theme/custom.css

@@ -20,7 +20,8 @@
       }
 
       & table tr {
-        th, td {
+        th,
+        td {
           vertical-align: top;
         }
 

docs/.vitepress/theme/index.js

@@ -1,4 +1,4 @@
-import DefaultTheme from "vitepress/theme"
-import './custom.css'
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
 
-export default DefaultTheme
+export default DefaultTheme;

docs/index.md

@@ -3,8 +3,8 @@
 layout: home
 
 hero:
-  name: "PlotVuer"
-  text: "API documentation"
+  name: 'PlotVuer'
+  text: 'API documentation'
   tagline: PlotVuer is a Vue component used in the SPARC portal.
   actions:
     - theme: brand