Refactor visahoi library (#278)

* initial storybook setup * fix reference of chart object * added barchart stories to test * added the mdx file * fix barchart issue * added change-matix and horizon graph * added change matrix svelte file in the demos * Added the svelte file for heatmap, horizon graph and treemap for plotly * delete the components folder in echarts * Changed for barchart svelte * Added plotly demos as svelte files in storybook * Removed extra spaces * Added echarts to the package json in demos and added barchart svelte file * Added barchart as svelte file-WIP * Added onboardings to the barchart in echart demos in svelte file * Added svelte file for echarts change matrix * Added echart horizon graph and refactored the folder structure in storybook ui and vs code * Added scatterplot echarts in svelte and storybook * Added heatmap svelte file to storybook * Add treemap echart to storybook (WIP) * Added introduction.mdx file to storybook * Added doc to storybook(WIP) * Echarts treemap in storybook (WIP) * Added vega bar chart to storybook * Added vegalite change matrix to storybook * Added vega horizonGraph to storybook * Added scatterplot vega to storybook * Refractored data in scatterplot * Refractored the code * Changed folder name * Added resize observer to echarts * added typescript support in storybook svelte by updating main.js and edited echarts demo to include typying * Added typings for plotly demo * Added typings to vega demos * Added a seperate json file for large data * Added resize to echart demos in storybook * refactor core and plotly demos * add resize observer to visAhoi * refactor echarts and vega demos * add scss in core package * adaptions for VA tool and library refactorings * review changes * flatten hierarchy of demos folder * rename files * fix hidden navMarker and horizontal stepper navigation --------- Co-authored-by: dvsilviyageo <[email protected]>
datavisyn · Mar 8, 2023 · d4631c8 · d4631c8
1 parent b817ba8
commit d4631c8
Show file tree

Hide file tree

Showing 72 changed files with 45,135 additions and 14,748 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -44,9 +44,10 @@
     "svelte-preprocess": "4.7.4",
     "tslib": "^2.3.1",
     "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
+    "node-sass": "^8.0.0"
   },
   "dependencies": {
+    "uuid": "^9.0.0",
     "@popperjs/core": "^2.10.2",
     "lodash.debounce": "^4.0.8",
     "sanitize-html": "^2.6.1"

diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
@@ -1,83 +1,91 @@
-import svelte from 'rollup-plugin-svelte'
-import commonjs from '@rollup/plugin-commonjs'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import typescript from '@rollup/plugin-typescript'
-import json from '@rollup/plugin-json'
-import livereload from 'rollup-plugin-livereload'
-import postcssImport from 'postcss-import'
-import postcss from 'rollup-plugin-postcss'
-import autoPreprocess from 'svelte-preprocess'
-import InlineSvg from 'rollup-plugin-inline-svg'
-import copy from 'rollup-plugin-copy-assets'
+import svelte from "rollup-plugin-svelte";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import json from "@rollup/plugin-json";
+import livereload from "rollup-plugin-livereload";
+import postcssImport from "postcss-import";
+import postcss from "rollup-plugin-postcss";
+import InlineSvg from "rollup-plugin-inline-svg";
+import copy from "rollup-plugin-copy-assets";
+import preprocess from "svelte-preprocess";
 
-const production = !process.env.ROLLUP_WATCH
+const production = !process.env.ROLLUP_WATCH;
 
-export default [{
-  input: './src/index.ts',
-  output: [{
-    sourcemap: true,
-    format: 'es',
-    dir: './dist',
-    name: 'core'
-  }, {
-    sourcemap: true,
-    format: 'esm',
-    file: './build/bundle.js',
-    name: 'core'
-  }],
-  plugins: [
-    svelte({
-      emitCss: true,
-      preprocess: autoPreprocess()
-    }),
-    // process css in .svelte files
-    postcss({
-      extract: 'css/svelte-bundle.css',
-      minimize: Boolean(!production)
-    }),
-    nodeResolve({
-      browser: true,
-      dedupe: ['svelte']
-    }),
-    commonjs(),
-    typescript({
-      sourceMap: !production,
-      inlineSources: !production
-    }),
-    !production && livereload('dist'),
-    json(),
-    InlineSvg({
-      include: ['src/assets/*.svg']
-    }),
-    copy({
-      assets: [
-        // You can include directories
-        'src/assets'
-      ]
-    })
-  ],
-},
-{
-  // process css files
-  input: './src/css/main.css',
-  output: [{
-    format: 'es',
-    dir: './dist/css'
-  }, {
-    format: 'es',
-    file: './build/css/main.css'
-  }],
-  plugins: [
-    postcss({
-      plugins: [postcssImport({ extensions: ['.css'] })],
-      extract: true,
-      to: './build/css/main.css',
-      minimize: Boolean(!production)
-    }),
-    nodeResolve({
-      browser: true,
-      dedupe: ['svelte'],
-      extensions: ['.css']
-    })
-  ]
-}]
+export default [
+  {
+    input: "./src/index.ts",
+    output: [
+      {
+        sourcemap: true,
+        format: "es",
+        dir: "./dist",
+        name: "core",
+      },
+      {
+        sourcemap: true,
+        format: "esm",
+        file: "./build/bundle.js",
+        name: "core",
+      },
+    ],
+    plugins: [
+      svelte({
+        emitCss: true,
+        preprocess: preprocess(),
+      }),
+      // process css in .svelte files
+      postcss({
+        extract: "css/svelte-bundle.css",
+        minimize: Boolean(!production),
+      }),
+      nodeResolve({
+        browser: true,
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+      typescript({
+        sourceMap: !production,
+        inlineSources: !production,
+      }),
+      !production && livereload("dist"),
+      json(),
+      InlineSvg({
+        include: ["src/assets/*.svg"],
+      }),
+      copy({
+        assets: [
+          // You can include directories
+          "src/assets",
+        ],
+      }),
+    ],
+  },
+  {
+    // process css files
+    input: "./src/css/main.css",
+    output: [
+      {
+        format: "es",
+        dir: "./dist/css",
+      },
+      {
+        format: "es",
+        file: "./build/css/main.css",
+      },
+    ],
+    plugins: [
+      postcss({
+        plugins: [postcssImport({ extensions: [".css"] })],
+        extract: true,
+        to: "./build/css/main.css",
+        minimize: Boolean(!production),
+      }),
+      nodeResolve({
+        browser: true,
+        dedupe: ["svelte"],
+        extensions: [".css"],
+      }),
+    ],
+  },
+];
diff --git a/packages/core/src/components/Markers.svelte b/packages/core/src/components/Markers.svelte
@@ -26,7 +26,9 @@
 
 {#key $onboardingStages}
   <svg {viewBox} class="visahoi-markers">
-    {#each $markerInformation.filter((m) => m.message.onboardingStage.id === $activeOnboardingStage?.id) as marker, index}
+    {#each $markerInformation
+      .filter((m) => m.message.onboardingStage.id === $activeOnboardingStage?.id)
+      .sort((a, b) => (a.message?.order || -1) - (b.message?.order || -1)) as marker, index}
       <Marker markerInformation={marker} order={index + 1} {visState} />
     {/each}
   </svg>