fix(dx): prefix assets tickschart/

dmidz · Mar 21, 2024 · a4bfcfc · a4bfcfc
1 parent feff197
commit a4bfcfc
Show file tree

Hide file tree

Showing 16 changed files with 26 additions and 17 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -36,7 +36,7 @@ jobs:
       - name: Upload artifacts
         uses: ./.github/actions/upload-pages-artifact
         with:
-          path: './demo/vanilla-js . --directory ../../public ./data --directory . ./css'
+          path: './demo/vanilla-js . --directory ../../public/tickschart .'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/demo/vanilla-js/index.html b/demo/vanilla-js/index.html
@@ -5,7 +5,7 @@
 	<link rel="icon" type="image/svg+xml" href="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<title>Ticks Chart Vue Example</title>
-	<link rel="stylesheet" href="/css/main.css">
+	<link rel="stylesheet" href="/tickschart/assets/main.css">
 </head>
 <body>
 <div id="app">

diff --git a/demo/vanilla-js/main.js b/demo/vanilla-js/main.js
@@ -1,5 +1,5 @@
 
-import { Chart, Fetcher, intervalsMs } from 'https://cdn.jsdelivr.net/npm/@dmidz/tickschart/+esm';
+import { Chart, Fetcher, intervalsMs } from 'https://cdn.jsdelivr.net/npm/@dmidz/tickschart@0.0/+esm';
 
 const { m1, h1, d1 } = intervalsMs;
 
@@ -11,7 +11,7 @@ const mapTickProps = { open: 'open', high: 'high', low: 'low', close: 'close', v
 // ! adapt this path to your public sample path
 const sampleTimeStart = 1684800000000;
 const ticksPerLoad = 1000;// must match the ticks count per fetch
-const sampleTicksURL = `/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
+const sampleTicksURL = `/tickschart/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
 const timeScaleMs = h1 * 4;// must match time scale of fetched data ( here 4h )
 const currentTime = new Date( Date.UTC( 2023, 9, 10 ) );// initial time position
 const xOriginRatio = .75;// screen width delta ratio, .75 = 3/4 width from left 
@@ -31,7 +31,7 @@ const fetcher = new Fetcher( defaultTick, async ( startTime, limit ) => {
 	}
 
 	//__ when github.io ( github pages ), must add sub directory ( repo name )  
-	const url = new URL( `${ window.location.hostname.match(/github.io$/)?'/tickschart':''}${sampleTicksURL}`, window.location.origin );
+	const url = new URL( `${sampleTicksURL}`, window.location.origin );
 
 	url.search = new URLSearchParams( {// sample of params for API, useless here with local json fetch 
 		symbol: 'BTCUSDT',

diff --git a/demo/vanilla-ts/index.html b/demo/vanilla-ts/index.html
@@ -5,7 +5,7 @@
 	<link rel="icon" type="image/svg+xml" href="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<title>Ticks Chart Vue Example</title>
-	<link rel="stylesheet" href="/css/main.css">
+	<link rel="stylesheet" href="/tickschart/assets/main.css">
 </head>
 <body>
 <div id="app">

diff --git a/demo/vanilla-ts/main.ts b/demo/vanilla-ts/main.ts
@@ -15,7 +15,7 @@ const mapTickProps = { open: 'open', high: 'high', low: 'low', close: 'close', v
 // ! adapt this path to your public sample path ( native fetch needs absolute URL )
 const sampleTimeStart = 1684800000000;
 const ticksPerLoad = 1000;// must match the ticks count per fetch
-const sampleTicksURL = `/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
+const sampleTicksURL = `/tickschart/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
 const timeScaleMs = h1 * 4;// must match time scale of fetched data ( here 4h )
 const currentTime = new Date( Date.UTC( 2023, 9, 10 ) );// initial time position
 const xOriginRatio = .75;// screen width delta ratio, .75 = 3/4 width from left 

diff --git a/public/icons/chevron-double.svg → ...ickschart/assets/icons/chevron-double.svg b/public/icons/chevron-double.svg → ...ickschart/assets/icons/chevron-double.svg
diff --git a/public/icons/close.svg → public/tickschart/assets/icons/close.svg b/public/icons/close.svg → public/tickschart/assets/icons/close.svg
diff --git a/public/icons/settings.svg → public/tickschart/assets/icons/settings.svg b/public/icons/settings.svg → public/tickschart/assets/icons/settings.svg
diff --git a/public/css/main.css → public/tickschart/assets/main.css b/public/css/main.css → public/tickschart/assets/main.css
@@ -154,6 +154,18 @@ body {
   vertical-align: middle;
 }
 
+.icon.ic-close {
+  background-image: url("./icons/close.svg");
+}
+
+.icon.ic-settings {
+  background-image: url("./icons/settings.svg");
+}
+
+.icon.ic-chevron-double {
+  background-image: url("./icons/chevron-double.svg");
+}
+
 .chart .bt-link {
   cursor: pointer;
   font-size: 1rem;

diff --git a/...data/ticks_BTC_4h/1684800000000-1000.json → ...data/ticks_BTC_4h/1684800000000-1000.json b/...data/ticks_BTC_4h/1684800000000-1000.json → ...data/ticks_BTC_4h/1684800000000-1000.json
diff --git a/src/Chart.vue b/src/Chart.vue
@@ -14,7 +14,7 @@ const defaultTick = { time: 0, open: 0, high: 0, low: 0, close: 0, vol: 0 } as c
 const mapTickProps = { open: 'open', high: 'high', low: 'low', close: 'close', volume: 'vol' } as const;
 const sampleTimeStart = 1684800000000;
 const ticksPerLoad = 1000;// must match the ticks count per fetch
-const sampleTicksURL = `/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
+const sampleTicksURL = `/tickschart/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
 const timeScaleMs = h1 * 4;// must match time scale of fetched data ( here 4h )
 // const currentTime = new Date();// initial time position
 // const currentTime = new Date( Date.UTC(2023, 6, 13 ) );// initial time position

diff --git a/src/lib/Chart.ts b/src/lib/Chart.ts
@@ -972,9 +972,8 @@ export default class Chart<Tick extends AbstractTick = CandleTick> {
 					}
 				} );
 				createElement( 'span', this.elements.buttonGoMaxX, {
-					className: 'icon',
+					className: 'icon ic-chevron-double',
 					style: {
-						backgroundImage: 'url( "/icons/chevron-double.svg" )',
 						transform: 'rotate(90deg)',
 						marginBottom: '2px',
 					}

diff --git a/src/lib/ChartRow.ts b/src/lib/ChartRow.ts
@@ -236,10 +236,9 @@ export default class ChartRow {
 		this.elements.set( 'name', name );
 		if( Object.keys( this.indicator.settings||{} ).length ){
 			createElement( 'div', name, {
-				className: 'icon',
+				className: 'icon ic-settings',
 				style: {
 					marginLeft: '4px',
-					backgroundImage: 'url( "/icons/settings.svg" )',
 					backgroundRepeat: 'no-repeat',
 				}
 			} );

diff --git a/src/lib/UI/Dialog.ts b/src/lib/UI/Dialog.ts
@@ -105,9 +105,8 @@ export default class Dialog {
 		this.elements.btClose.addEventListener( 'click', this.handleClose );
 
 		createElement( 'span', this.elements.btClose, {
-			className: 'icon',
+			className: 'icon ic-close',
 			style: {
-				backgroundImage: 'url( "/icons/close.svg" )',
 				width: '24px',
 				height: '24px',
 			}

diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-import '@public/css/main.css';
+import '@public/assets/main.css';
 
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/vite.config.ts b/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
     alias: {
       '@': resolve( __dirname, 'src' ),
       '@dmidz/tickschart': resolve( __dirname, 'dist' ),// trick to compile demo/vanilla-ts using real world package path
-      '@public': resolve( __dirname, 'public' ),
+      '@public': resolve( __dirname, 'public/tickschart' ),
     },
     // preserveSymlinks: true,
   },