@djcali570/component-lib 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -3
- package/dist/Accordion5.svelte +12 -3
- package/dist/Chart5.svelte +258 -0
- package/dist/Chart5.svelte.d.ts +11 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.js +2 -1
- package/dist/types.d.ts +7 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
# DJCali570 Component Library
|
|
1
|
+
# DJCali570 Svelte 5 Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
Components make use of Svelte's runes so will only work with Svelte 5
|
|
4
5
|
|
|
5
6
|
## Accordion
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
Use default or customize the accordion color scheme
|
|
8
9
|
|
|
9
10
|
```bash
|
|
10
11
|
import { Accordion5 } from '@djcali570/component-lib';
|
|
@@ -25,3 +26,27 @@ Use of the Accordion component
|
|
|
25
26
|
{/Snippet}
|
|
26
27
|
</Accordion5>
|
|
27
28
|
```
|
|
29
|
+
|
|
30
|
+
## Chart
|
|
31
|
+
|
|
32
|
+
Use the default or customize the chart color scheme
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
import { Chart5 } from '@djcali570/component-lib';
|
|
36
|
+
import type { Chart5ColorScheme } from '@djcali570/component-lib';
|
|
37
|
+
|
|
38
|
+
let ccs: Chart5ColorScheme = {
|
|
39
|
+
bgColor: '#121212',
|
|
40
|
+
gridLineColor: '#303030',
|
|
41
|
+
xAxisTextColor: '#5ac1dd',
|
|
42
|
+
yAxisTextColor: '#5ac1dd'
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Use of the Chart component
|
|
47
|
+
```
|
|
48
|
+
let labels: string[] = ['Label1', 'label2'];
|
|
49
|
+
let values: number[] = [35, 20];
|
|
50
|
+
|
|
51
|
+
<Chart5 {labels} {values} colorScheme={ccs} height="300px" />
|
|
52
|
+
```
|
package/dist/Accordion5.svelte
CHANGED
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
const defaultColorScheme: Accordion5ColorScheme = {
|
|
18
18
|
bgColor: '#121212',
|
|
19
19
|
textColor: '#D6D6D6',
|
|
20
|
-
triggerColor: '#D6D6D6'
|
|
20
|
+
triggerColor: '#D6D6D6',
|
|
21
|
+
panelBgColor: '#121212'
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
// Merge partial colorScheme with defaults
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
--acc5-bgColor: {colorScheme.bgColor};
|
|
54
55
|
--acc5-textColor: {colorScheme.textColor};
|
|
55
56
|
--acc5-triggerColor: {colorScheme.triggerColor};
|
|
57
|
+
--acc5-panelBgColor: {colorScheme.panelBgColor};
|
|
56
58
|
"
|
|
57
59
|
>
|
|
58
60
|
<button onclick={showPanel}>
|
|
@@ -65,7 +67,8 @@
|
|
|
65
67
|
<svg viewBox="0 0 200 200">
|
|
66
68
|
<path
|
|
67
69
|
fill="currentColor"
|
|
68
|
-
d="
|
|
70
|
+
d="M103.5,136.6c-1.9,1.9-5.1,1.9-7.1,0L30.5,70.8c-1-1-1.5-2.2-1.5-3.5s0.5-2.6,1.5-3.5c1.9-1.9,5.1-1.9,7.1,0l62.2,62.1
|
|
71
|
+
l62.5-62.5c1.9-1.9,5.1-1.9,7.1,0l0.1,0.1c0.9,1.1,1.4,2.3,1.4,3.6s-0.5,2.6-1.5,3.5L103.5,136.6z"
|
|
69
72
|
/>
|
|
70
73
|
</svg>
|
|
71
74
|
</div>
|
|
@@ -85,7 +88,7 @@
|
|
|
85
88
|
max-width: 600px;
|
|
86
89
|
margin: 0 auto;
|
|
87
90
|
border-radius: 0.5rem;
|
|
88
|
-
|
|
91
|
+
overflow: hidden;
|
|
89
92
|
}
|
|
90
93
|
|
|
91
94
|
button {
|
|
@@ -95,6 +98,7 @@
|
|
|
95
98
|
cursor: pointer;
|
|
96
99
|
border: none;
|
|
97
100
|
text-align: left;
|
|
101
|
+
background-color: var(--acc5-bgColor);
|
|
98
102
|
}
|
|
99
103
|
|
|
100
104
|
.panel-head {
|
|
@@ -129,9 +133,14 @@
|
|
|
129
133
|
.accPanel {
|
|
130
134
|
overflow: hidden;
|
|
131
135
|
max-height: 0;
|
|
136
|
+
background-color: var(--acc5-panelBgColor);
|
|
132
137
|
transition: max-height 400ms ease-in-out;
|
|
133
138
|
}
|
|
134
139
|
.panel-head-icon.open {
|
|
135
140
|
transform: rotate(180deg);
|
|
136
141
|
}
|
|
142
|
+
|
|
143
|
+
.accPanel-inner {
|
|
144
|
+
padding-block: 0.5rem; /* Add padding to ensure content is visible */
|
|
145
|
+
}
|
|
137
146
|
</style>
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Chart5ColorScheme } from './types.js';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
colorScheme: partialColorScheme = {},
|
|
6
|
+
maxWidth = '400px',
|
|
7
|
+
height = '400px',
|
|
8
|
+
labels = [],
|
|
9
|
+
values = []
|
|
10
|
+
}: {
|
|
11
|
+
colorScheme?: Partial<Chart5ColorScheme>;
|
|
12
|
+
maxWidth?: string;
|
|
13
|
+
height?: string;
|
|
14
|
+
labels?: string[];
|
|
15
|
+
values?: number[];
|
|
16
|
+
} = $props();
|
|
17
|
+
|
|
18
|
+
const defaultColorScheme: Chart5ColorScheme = {
|
|
19
|
+
bgColor: '#121212',
|
|
20
|
+
gridLineColor: '#303030',
|
|
21
|
+
xAxisTextColor: '#5ac1dd',
|
|
22
|
+
yAxisTextColor: '#5ac1dd'
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// Merge partial colorScheme with defaults
|
|
26
|
+
const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
|
|
27
|
+
|
|
28
|
+
let yAxis = $state<number[]>([]);
|
|
29
|
+
let maxY = $state<number>(0);
|
|
30
|
+
let highPct = $state<number>(0);
|
|
31
|
+
|
|
32
|
+
// Reactively compute yAxis and maxY based on cData
|
|
33
|
+
$effect(() => {
|
|
34
|
+
if (values.length === 0) {
|
|
35
|
+
// Handle empty values array
|
|
36
|
+
yAxis = [0]; // Default to single y-axis label at 0
|
|
37
|
+
maxY = 10; // Minimum scale to prevent division by zero
|
|
38
|
+
highPct = 0; // No bars to render
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const dataMax = Math.max(...values, 10);
|
|
42
|
+
const yMax = Math.ceil(dataMax / 10) * 10;
|
|
43
|
+
const steps = Math.floor(yMax / 10) + 1;
|
|
44
|
+
const newYAxis = Array.from({ length: steps }, (_, i) => i * 10);
|
|
45
|
+
yAxis = newYAxis;
|
|
46
|
+
maxY = yMax;
|
|
47
|
+
highPct = ((steps - 1) / steps) * 100;
|
|
48
|
+
});
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<div
|
|
52
|
+
class="chart5"
|
|
53
|
+
role="img"
|
|
54
|
+
aria-label="Bar chart displaying data for {labels.join(', ')}"
|
|
55
|
+
style="
|
|
56
|
+
--chart5__maxWidth: {maxWidth};
|
|
57
|
+
--chart5__height: {height};
|
|
58
|
+
--chart5__bgColor: {colorScheme.bgColor};
|
|
59
|
+
--chart5__glColor: {colorScheme.gridLineColor};
|
|
60
|
+
--chart5__yTextColor: {colorScheme.yAxisTextColor};
|
|
61
|
+
--chart5__xTextColor: {colorScheme.xAxisTextColor};
|
|
62
|
+
"
|
|
63
|
+
>
|
|
64
|
+
{#if values.length === 0}
|
|
65
|
+
<div class="empty-state">No data available</div>
|
|
66
|
+
{:else}
|
|
67
|
+
<div class="chart5__layout__container">
|
|
68
|
+
<div class="chart5__layout">
|
|
69
|
+
<!-- Y-axis labels -->
|
|
70
|
+
<div class="yaxis">
|
|
71
|
+
{#each yAxis as label, i}
|
|
72
|
+
<div class="yaxis__label" style="bottom: {(i / yAxis.length) * 100 - 3.2}%;">
|
|
73
|
+
{label}
|
|
74
|
+
</div>
|
|
75
|
+
{/each}
|
|
76
|
+
</div>
|
|
77
|
+
<!-- Data area -->
|
|
78
|
+
<div class="data-area">
|
|
79
|
+
<!-- Grid lines aligned with y-axis labels -->
|
|
80
|
+
<div class="grid-lines">
|
|
81
|
+
{#each yAxis as _, i}
|
|
82
|
+
<div class="grid-line" style="bottom: {(i / yAxis.length) * 100}%;"></div>
|
|
83
|
+
{/each}
|
|
84
|
+
</div>
|
|
85
|
+
<!-- Data bars -->
|
|
86
|
+
<div
|
|
87
|
+
class="data-bar-grid"
|
|
88
|
+
style="grid-template-columns: repeat({values.length}, calc((100%) / {values.length}));"
|
|
89
|
+
>
|
|
90
|
+
{#each values as data, i}
|
|
91
|
+
<div class="data-bar-container">
|
|
92
|
+
<div
|
|
93
|
+
class="data-bar"
|
|
94
|
+
style="height: {(data / maxY) * highPct}%;"
|
|
95
|
+
title="Value: {data} for {labels[i]}"
|
|
96
|
+
></div>
|
|
97
|
+
</div>
|
|
98
|
+
{/each}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<!-- X-axis labels -->
|
|
104
|
+
<div class="xaxis__container">
|
|
105
|
+
<div class="xaxis__dummy"></div>
|
|
106
|
+
<div
|
|
107
|
+
class="xaxis"
|
|
108
|
+
style="grid-template-columns: repeat({values.length}, calc((100%) / {values.length}));"
|
|
109
|
+
>
|
|
110
|
+
{#each labels as label}
|
|
111
|
+
<div class="xaxis__label">{label}</div>
|
|
112
|
+
{/each}
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
{/if}
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<style>
|
|
119
|
+
.empty-state {
|
|
120
|
+
display: flex;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
align-items: center;
|
|
123
|
+
height: 100%;
|
|
124
|
+
color: var(--chart5__yTextColor);
|
|
125
|
+
font-size: 1rem;
|
|
126
|
+
}
|
|
127
|
+
.chart5 {
|
|
128
|
+
width: 100%;
|
|
129
|
+
height: var(--chart5__height);
|
|
130
|
+
min-height: 200px;
|
|
131
|
+
background-color: var(--chart5__bgColor);
|
|
132
|
+
border-radius: 0.5em;
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: column;
|
|
136
|
+
justify-content: center;
|
|
137
|
+
align-items: center;
|
|
138
|
+
font-family: inherit, sans-serif, Helvetica;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.chart5__layout__container {
|
|
142
|
+
width: 100%;
|
|
143
|
+
height: 100%;
|
|
144
|
+
padding-inline: 0.5rem;
|
|
145
|
+
box-sizing: border-box;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.chart5__layout {
|
|
149
|
+
position: relative;
|
|
150
|
+
display: grid;
|
|
151
|
+
grid-template-columns: min-content 1fr;
|
|
152
|
+
grid-template-rows: 1fr auto;
|
|
153
|
+
width: 100%;
|
|
154
|
+
height: 100%;
|
|
155
|
+
min-height: 150px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.yaxis {
|
|
159
|
+
position: relative;
|
|
160
|
+
padding-right: 0.5em;
|
|
161
|
+
height: 100%;
|
|
162
|
+
width: 1.2em;
|
|
163
|
+
box-sizing: border-box;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.yaxis__label {
|
|
167
|
+
position: absolute;
|
|
168
|
+
width: 100%;
|
|
169
|
+
text-align: right;
|
|
170
|
+
font-size: 0.9rem;
|
|
171
|
+
color: var(--chart5__yTextColor);
|
|
172
|
+
padding-right: 0.25em;
|
|
173
|
+
box-sizing: border-box;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.data-area {
|
|
177
|
+
grid-row: 1 / 2;
|
|
178
|
+
grid-column: 2 / 3;
|
|
179
|
+
position: relative;
|
|
180
|
+
width: 100%;
|
|
181
|
+
height: 100%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.grid-lines {
|
|
185
|
+
position: absolute;
|
|
186
|
+
width: 100%;
|
|
187
|
+
height: 100%;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.grid-line {
|
|
191
|
+
position: absolute;
|
|
192
|
+
width: 100%;
|
|
193
|
+
height: 1px;
|
|
194
|
+
background-color: var(--chart5__glColor);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.data-bar-grid {
|
|
198
|
+
display: grid;
|
|
199
|
+
height: 100%;
|
|
200
|
+
z-index: 1;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.data-bar-container {
|
|
204
|
+
display: flex;
|
|
205
|
+
justify-content: center;
|
|
206
|
+
align-items: flex-end; /* Align bars to bottom */
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.data-bar {
|
|
210
|
+
width: 70%; /* Centered within grid cell */
|
|
211
|
+
max-width: 2em;
|
|
212
|
+
background-image: linear-gradient(
|
|
213
|
+
to bottom,
|
|
214
|
+
#ff69fa,
|
|
215
|
+
#c090ff,
|
|
216
|
+
#77aaff,
|
|
217
|
+
#23bbff,
|
|
218
|
+
#00c5ff,
|
|
219
|
+
#00cbf2,
|
|
220
|
+
#00d0e0,
|
|
221
|
+
#00d3ca,
|
|
222
|
+
#51cf93,
|
|
223
|
+
#8fc457,
|
|
224
|
+
#c9b127,
|
|
225
|
+
#ff912d
|
|
226
|
+
);
|
|
227
|
+
border-radius: 4px;
|
|
228
|
+
transition: filter 0.2s ease;
|
|
229
|
+
z-index: 1;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.data-bar:hover {
|
|
233
|
+
filter: brightness(1.2) !important;
|
|
234
|
+
}
|
|
235
|
+
.xaxis__container {
|
|
236
|
+
display: flex;
|
|
237
|
+
width: 100%;
|
|
238
|
+
box-sizing: border-box;
|
|
239
|
+
padding-block: 0.5rem;
|
|
240
|
+
padding-inline: 0.5rem;
|
|
241
|
+
}
|
|
242
|
+
.xaxis {
|
|
243
|
+
display: grid;
|
|
244
|
+
min-height: 2rem;
|
|
245
|
+
flex: 1;
|
|
246
|
+
box-sizing: border-box;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.xaxis__label {
|
|
250
|
+
text-align: center;
|
|
251
|
+
font-size: 0.9rem;
|
|
252
|
+
color: var(--chart5__xTextColor);
|
|
253
|
+
}
|
|
254
|
+
.xaxis__dummy {
|
|
255
|
+
width: 1.2em;
|
|
256
|
+
padding-right: 0.5em;
|
|
257
|
+
}
|
|
258
|
+
</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Chart5ColorScheme } from './types.js';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
colorScheme?: Partial<Chart5ColorScheme>;
|
|
4
|
+
maxWidth?: string;
|
|
5
|
+
height?: string;
|
|
6
|
+
labels?: string[];
|
|
7
|
+
values?: number[];
|
|
8
|
+
};
|
|
9
|
+
declare const Chart5: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type Chart5 = ReturnType<typeof Chart5>;
|
|
11
|
+
export default Chart5;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import DropDown5 from "./DropDown5.svelte";
|
|
|
3
3
|
import Input5 from "./Input5.svelte";
|
|
4
4
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
5
5
|
import Accordion5 from "./Accordion5.svelte";
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
export
|
|
6
|
+
import Chart5 from "./Chart5.svelte";
|
|
7
|
+
import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme } from "./types.js";
|
|
8
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5 };
|
|
9
|
+
export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme };
|
package/dist/index.js
CHANGED
|
@@ -4,4 +4,5 @@ import DropDown5 from "./DropDown5.svelte";
|
|
|
4
4
|
import Input5 from "./Input5.svelte";
|
|
5
5
|
import TimePicker5 from "./TimePicker5.svelte";
|
|
6
6
|
import Accordion5 from "./Accordion5.svelte";
|
|
7
|
-
|
|
7
|
+
import Chart5 from "./Chart5.svelte";
|
|
8
|
+
export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5 };
|
package/dist/types.d.ts
CHANGED
|
@@ -43,6 +43,7 @@ export interface Accordion5ColorScheme {
|
|
|
43
43
|
bgColor?: string;
|
|
44
44
|
textColor?: string;
|
|
45
45
|
triggerColor?: string;
|
|
46
|
+
panelBgColor?: string;
|
|
46
47
|
}
|
|
47
48
|
export interface DropDown5ColorScheme {
|
|
48
49
|
bgColor?: string;
|
|
@@ -63,3 +64,9 @@ export interface DropDownItem<TProps extends Record<string, any> = {}> {
|
|
|
63
64
|
componentStyles?: string;
|
|
64
65
|
props?: TProps;
|
|
65
66
|
}
|
|
67
|
+
export interface Chart5ColorScheme {
|
|
68
|
+
bgColor?: string;
|
|
69
|
+
gridLineColor?: string;
|
|
70
|
+
yAxisTextColor?: string;
|
|
71
|
+
xAxisTextColor?: string;
|
|
72
|
+
}
|