Skip to content

Commit d638417

Browse files
mrmxmrmx
authored
Merge pull request #91 from leonardojgv/feature/update_design
Feature/update design
2 parents 173b9ad + bcd5f10 commit d638417

File tree

7 files changed

+166
-153
lines changed

7 files changed

+166
-153
lines changed

‎packages/svelte-timeseries/package.json‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,87 @@
11
{
2-
"private": false,
3-
"name": "@qtsurfer/svelte-timeseries",
4-
"version": "0.4.0",
5-
"license": "Apache-2.0",
6-
"author": "QTSurfer (https://github.com/QTSurfer)",
7-
"homepage": "https://github.com/QTSurfer/svelte-timeseries",
8-
"repository": {
9-
"type": "git",
10-
"url": "git+https://github.com/QTSurfer/svelte-timeseries.git",
11-
"directory": "packages/svelte-timeseries"
12-
},
13-
"bugs": {
14-
"url": "https://github.com/QTSurfer/svelte-timeseries/issues"
15-
},
16-
"type": "module",
17-
"exports": {
18-
".": {
19-
"types": "./dist/index.d.ts",
20-
"svelte": "./dist/index.js"
21-
}
22-
},
23-
"files": [
24-
"dist",
25-
"!dist/**/*.spec.*",
26-
"!dist/**/*.test.*"
27-
],
28-
"scripts": {
29-
"build": "run-s vite:build package",
30-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
31-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
32-
"clean": "run-s vite:clean sk:clean sk:sync",
33-
"clear:": "rimraf node_modules",
34-
"dev": "vite dev",
35-
"dev-lan": "vite dev --host 0.0.0.0",
36-
"format": "run-p format:all format:package",
37-
"format:all": "prettier -l --write .",
38-
"format:package": "npx prettier-package-json --write ./package.json",
39-
"lint": "prettier --check . && eslint .",
40-
"package": "svelte-kit sync && svelte-package && publint",
41-
"preview": "vite preview",
42-
"sk:clean": "rimraf .svelte-kit",
43-
"sk:sync": "svelte-kit sync",
44-
"vite:build": "vite build",
45-
"vite:clean": "rimraf node_modules/.vite vite.config.ts.*"
46-
},
47-
"types": "./dist/index.d.ts",
48-
"dependencies": {
49-
"@duckdb/duckdb-wasm": "1.30.0",
50-
"@qtsurfer/sveltecharts": "workspace:*"
51-
},
52-
"peerDependencies": {
53-
"svelte": "^5.43.14"
54-
},
55-
"devDependencies": {
56-
"@qtsurfer/sveltecharts": "workspace:*",
57-
"@sveltejs/adapter-auto": "^7.0.0",
58-
"@sveltejs/adapter-static": "^3.0.10",
59-
"@sveltejs/kit": "^2.48.6",
60-
"@sveltejs/package": "^2.5.6",
61-
"@sveltejs/vite-plugin-svelte": "^6.2.1",
62-
"@tailwindcss/vite": "^4.1.17",
63-
"@types/eslint": "9.6.1",
64-
"@typescript-eslint/eslint-plugin": "^8.47.0",
65-
"@typescript-eslint/parser": "^8.47.0",
66-
"apache-arrow": "^17.0.0",
67-
"daisyui": "^5.5.5",
68-
"eslint": "^9.39.1",
69-
"eslint-config-prettier": "^10.1.8",
70-
"eslint-plugin-svelte": "^3.13.0",
71-
"npm-run-all2": "^8.0.4",
72-
"prettier": "^3.6.2",
73-
"prettier-plugin-svelte": "^3.4.0",
74-
"publint": "^0.3.15",
75-
"rimraf": "^6.1.2",
76-
"svelte": "^5.43.14",
77-
"svelte-check": "^4.3.4",
78-
"tailwindcss": "^4.1.17",
79-
"tslib": "^2.8.1",
80-
"typescript": "^5.9.3",
81-
"vite": "^7.2.4"
82-
},
83-
"publishConfig": {
84-
"access": "public"
85-
},
86-
"svelte": "./dist/index.js"
2+
"private": false,
3+
"name": "@qtsurfer/svelte-timeseries",
4+
"version": "0.4.0",
5+
"license": "Apache-2.0",
6+
"author": "QTSurfer (https://github.com/QTSurfer)",
7+
"homepage": "https://github.com/QTSurfer/svelte-timeseries",
8+
"repository": {
9+
"type": "git",
10+
"url": "git+https://github.com/QTSurfer/svelte-timeseries.git",
11+
"directory": "packages/svelte-timeseries"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/QTSurfer/svelte-timeseries/issues"
15+
},
16+
"type": "module",
17+
"exports": {
18+
".": {
19+
"types": "./dist/index.d.ts",
20+
"svelte": "./dist/index.js"
21+
}
22+
},
23+
"files": [
24+
"dist",
25+
"!dist/**/*.spec.*",
26+
"!dist/**/*.test.*"
27+
],
28+
"scripts": {
29+
"build": "vite build && npm run package",
30+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
31+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
32+
"clean": "run-s vite:clean sk:clean sk:sync",
33+
"clear:": "rimraf node_modules",
34+
"dev": "vite dev",
35+
"dev-lan": "vite dev --host 0.0.0.0",
36+
"format": "run-p format:all format:package",
37+
"format:all": "prettier -l --write .",
38+
"format:package": "npx prettier-package-json --write ./package.json",
39+
"lint": "prettier --check . && eslint .",
40+
"package": "svelte-kit sync && svelte-package && publint",
41+
"prepare": "run-s build",
42+
"preview": "vite preview",
43+
"sk:clean": "rimraf .svelte-kit",
44+
"sk:sync": "svelte-kit sync",
45+
"vite:clean": "rimraf node_modules/.vite vite.config.ts.*"
46+
},
47+
"types": "./dist/index.d.ts",
48+
"dependencies": {
49+
"@duckdb/duckdb-wasm": "1.30.0",
50+
"@qtsurfer/sveltecharts": "workspace:*"
51+
},
52+
"peerDependencies": {
53+
"svelte": "^5.43.14"
54+
},
55+
"devDependencies": {
56+
"@qtsurfer/sveltecharts": "workspace:*",
57+
"@sveltejs/adapter-auto": "^7.0.0",
58+
"@sveltejs/adapter-static": "^3.0.10",
59+
"@sveltejs/kit": "^2.48.6",
60+
"@sveltejs/package": "^2.5.6",
61+
"@sveltejs/vite-plugin-svelte": "^6.2.1",
62+
"@tailwindcss/vite": "^4.1.17",
63+
"@types/eslint": "9.6.1",
64+
"@typescript-eslint/eslint-plugin": "^8.47.0",
65+
"@typescript-eslint/parser": "^8.47.0",
66+
"apache-arrow": "^17.0.0",
67+
"daisyui": "^5.5.5",
68+
"eslint": "^9.39.1",
69+
"eslint-config-prettier": "^10.1.8",
70+
"eslint-plugin-svelte": "^3.13.0",
71+
"npm-run-all2": "^8.0.4",
72+
"prettier": "^3.6.2",
73+
"prettier-plugin-svelte": "^3.4.0",
74+
"publint": "^0.3.15",
75+
"rimraf": "^6.1.2",
76+
"svelte": "^5.43.14",
77+
"svelte-check": "^4.3.4",
78+
"tailwindcss": "^4.1.17",
79+
"tslib": "^2.8.1",
80+
"typescript": "^5.9.3",
81+
"vite": "^7.2.4"
82+
},
83+
"publishConfig": {
84+
"access": "public"
85+
},
86+
"svelte": "./dist/index.js"
8787
}

‎packages/svelte-timeseries/src/lib/component/SvelteTimeSeries.svelte‎

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,22 @@
3131
debug = true,
3232
columnsSnippet,
3333
markersSnippet,
34-
performanceSnippet
34+
performanceSnippet,
35+
containerClass,
36+
snippetclass,
37+
chartClass,
38+
isDark
3539
}: {
3640
table: Tables;
3741
markers?: MarkersTableOptions;
3842
debug: boolean;
3943
columnsSnippet?: Snippet<[DataColumnsProps]>;
4044
markersSnippet?: Snippet<[MarkersProps]>;
4145
performanceSnippet?: Snippet<[PerformanceProps]>;
46+
containerClass?: string;
47+
snippetclass?: string;
48+
chartClass?: string;
49+
isDark?: boolean;
4250
} = $props();
4351
4452
let loading = $state(false);
@@ -95,8 +103,12 @@
95103
);
96104
</script>
97105

98-
<div id="svelte-timeseries" class="flex h-full overflow-hidden">
99-
<div class="flex flex-col w-1/6 min-w-[200px] gap-2 p-2">
106+
<div id="svelte-timeseries" class={containerClass}>
107+
<div class={snippetclass}>
108+
{#if performanceTimmer}
109+
{@render performanceSnippet?.({ time: performanceTimmer, matrix })}
110+
{/if}
111+
100112
{@render (columnsSnippet ?? renderColumns)({
101113
columns,
102114
toggleColumn,
@@ -111,11 +123,14 @@
111123
})}
112124
{/if}
113125
</div>
114-
<div class="w-full p-4">
115-
<SVECharts {onLoad} {loading} />
126+
127+
<div class={chartClass}>
128+
<SVECharts {onLoad} {loading} {isDark} />
116129
</div>
117-
{#if performanceTimmer}
118-
{@render (performanceSnippet ?? renderPerformance)({ time: performanceTimmer, matrix })}
130+
{#if loading}
131+
<div class="wrapper-loading">
132+
<div class="spinner"></div>
133+
</div>
119134
{/if}
120135
</div>
121136

@@ -174,13 +189,32 @@
174189
</details>
175190
{/snippet}
176191

177-
{#snippet renderPerformance(props: PerformanceProps)}
178-
<div class="sts-loading">
179-
<div>
180-
Initial Loading {props.time.toFixed(2)} s | Load Dimensions [{props.matrix[0]} x {props.matrix[1].toLocaleString(
181-
'es-AR'
182-
)}]
183-
<b>{(props.matrix[0] * props.matrix[1]).toLocaleString('es-AR')} values</b>
184-
</div>
185-
</div>
186-
{/snippet}
192+
<style>
193+
.wrapper-loading {
194+
position: absolute;
195+
left: 0;
196+
right: 0;
197+
top: 0;
198+
bottom: 0;
199+
background-color: rgba(255, 255, 255, 0.5);
200+
z-index: 2;
201+
display: flex;
202+
justify-content: center;
203+
align-items: center;
204+
}
205+
.wrapper-loading .spinner {
206+
width: 40px;
207+
height: 40px;
208+
border: 4px solid #ccc;
209+
border-top-color: #1d72b8;
210+
border-radius: 50%;
211+
animation: spin 0.8s linear infinite;
212+
margin: auto;
213+
}
214+
215+
@keyframes spin {
216+
to {
217+
transform: rotate(360deg);
218+
}
219+
}
220+
</style>

‎packages/svelte-timeseries/src/routes/+page.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
});
8787
</script>
8888

89-
<div class="grid grid-rows-[auto_1fr] h-screen">
89+
<div class="grid grid-rows-[auto_1fr] h-screen relative">
9090
<div class="bg-primary">
9191
<div class="text-primary-content text-center text-4xl mt-4 py-4 font-extrabold">
9292
SvelteTimeSeries <span class="font-extralight text-sm">DEMO</span>
@@ -110,6 +110,9 @@
110110
table={configuration.tables}
111111
markers={configuration.markers}
112112
debug={false}
113+
containerClass="relative grid grid-cols-[200px_1fr] size-full"
114+
snippetclass="flex flex-col p-2 gap-2 overflow-hidden"
115+
chartClass="w-full h-full"
113116
>
114117
{#snippet columnsSnippet(props)}
115118
{#if props.columns.length > 0}
@@ -119,7 +122,7 @@
119122
open
120123
>
121124
<summary class="collapse-title font-semibold"> SCHEMA </summary>
122-
<div class="collapse-content text-sm p-0">
125+
<div class="collapse-content text-sm p-0 h-100">
123126
<ul class="list overflow-auto h-full bg-base-100">
124127
{#each props.columns as column}
125128
<li class="list-row">
@@ -199,7 +202,7 @@
199202
{/snippet}
200203

201204
{#snippet performanceSnippet(props)}
202-
<div class="absolute bottom-4 w-full z-10 text-sm pointer-events-none">
205+
<div class="absolute bottom-4 w-full z-10 text-sm pointer-events-none left-0 right-0">
203206
<div class="mx-auto w-lg text-center py-4 bg-base-300 z-10 p-2 rounded-2xl shadow-md">
204207
Initial Loading {props.time.toFixed(2)} s | Load Dimensions [{props.matrix[0]} x {props.matrix[1].toLocaleString(
205208
'es-AR'

‎packages/sveltecharts/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"knip": "pnpm dlx knip",
3737
"lint": "prettier --check . && eslint .",
3838
"package": "svelte-kit sync && svelte-package && publint",
39+
"prepare": "run-s build",
3940
"preview": "vite preview",
4041
"prepublishOnly": "pnpm build",
4142
"publishd": "pnpm publish --dry-run --no-git-checks",

0 commit comments

Comments
 (0)