diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index 06bc82f..3f9f719 100644 --- 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 index 5976d86..cc820c1 100644 --- a/demo/vanilla-js/index.html +++ b/demo/vanilla-js/index.html @@ -5,7 +5,7 @@ Ticks Chart Vue Example - +
diff --git a/demo/vanilla-js/main.js b/demo/vanilla-js/main.js index 4df71e7..138cf46 100644 --- 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 index bfe116f..7c1497b 100644 --- a/demo/vanilla-ts/index.html +++ b/demo/vanilla-ts/index.html @@ -5,7 +5,7 @@ Ticks Chart Vue Example - +
diff --git a/demo/vanilla-ts/main.ts b/demo/vanilla-ts/main.ts index 7efa3ca..72ff53e 100644 --- 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 b/public/tickschart/assets/icons/chevron-double.svg similarity index 100% rename from public/icons/chevron-double.svg rename to public/tickschart/assets/icons/chevron-double.svg diff --git a/public/icons/close.svg b/public/tickschart/assets/icons/close.svg similarity index 100% rename from public/icons/close.svg rename to public/tickschart/assets/icons/close.svg diff --git a/public/icons/settings.svg b/public/tickschart/assets/icons/settings.svg similarity index 100% rename from public/icons/settings.svg rename to public/tickschart/assets/icons/settings.svg diff --git a/public/css/main.css b/public/tickschart/assets/main.css similarity index 94% rename from public/css/main.css rename to public/tickschart/assets/main.css index 35427d7..25f27a9 100644 --- a/public/css/main.css +++ b/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/public/data/ticks_BTC_4h/1684800000000-1000.json b/public/tickschart/data/ticks_BTC_4h/1684800000000-1000.json similarity index 100% rename from public/data/ticks_BTC_4h/1684800000000-1000.json rename to public/tickschart/data/ticks_BTC_4h/1684800000000-1000.json diff --git a/src/Chart.vue b/src/Chart.vue index e634d17..8551e20 100644 --- 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 index 647675d..0ec6c9d 100644 --- a/src/lib/Chart.ts +++ b/src/lib/Chart.ts @@ -972,9 +972,8 @@ export default class Chart { } } ); 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 index e2deb82..e6a3d5a 100644 --- 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 index c604267..e267bd8 100644 --- 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 index b11dc10..38e2dfb 100644 --- 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 index 168cf56..683e3b3 100644 --- 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, },