ywana-core8 0.1.79 → 0.1.80
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/dist/index.cjs +3244 -2215
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +2095 -1125
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +3244 -2215
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +3244 -2215
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/ExampleLayout.css +401 -0
- package/src/html/ExampleLayout.js +192 -0
- package/src/html/README-sidebar-navigation.md +195 -0
- package/src/html/accordion.example.js +123 -4
- package/src/html/accordion.example.js.backup +390 -0
- package/src/html/button.example.js +50 -3
- package/src/html/button.example.js.backup +374 -0
- package/src/html/button.example.new.js +416 -0
- package/src/html/checkbox.example.js +93 -4
- package/src/html/checkbox.example.js.backup +316 -0
- package/src/html/chip.example.js +108 -4
- package/src/html/chip.example.js.backup +355 -0
- package/src/html/color.example.js +108 -4
- package/src/html/color.example.js.backup +527 -0
- package/src/html/components.example.js +123 -4
- package/src/html/components.example.js.backup +492 -0
- package/src/html/convert-examples.js +183 -0
- package/src/html/demo-sidebar.html +410 -0
- package/src/html/form.example.js +93 -4
- package/src/html/form.example.js.backup +385 -0
- package/src/html/header2.example.js +108 -4
- package/src/html/header2.example.js.backup +411 -0
- package/src/html/icon.example.js +77 -3
- package/src/html/icon.example.js.backup +268 -0
- package/src/html/list.example.js +93 -4
- package/src/html/list.example.js.backup +404 -0
- package/src/html/progress.example.js +74 -4
- package/src/html/progress.example.js.backup +424 -0
- package/src/html/property.example.js +123 -4
- package/src/html/property.example.js.backup +553 -0
- package/src/html/radio.example.js +108 -4
- package/src/html/radio.example.js.backup +389 -0
- package/src/html/section.example.js +42 -3
- package/src/html/section.example.js.backup +99 -0
- package/src/html/switch.example.js +108 -4
- package/src/html/switch.example.js.backup +461 -0
- package/src/html/tab.example.js +93 -4
- package/src/html/tab.example.js.backup +446 -0
- package/src/html/table-export-utils.js +483 -0
- package/src/html/table-summary-functions.js +363 -0
- package/src/html/table2.css +1449 -479
- package/src/html/table2.example.js +2937 -512
- package/src/html/table2.example.js.broken +1226 -0
- package/src/html/table2.js +1426 -1000
- package/src/html/test-resize.html +279 -0
- package/src/html/test-selection.html +387 -0
- package/src/html/textfield2.example.js +108 -4
- package/src/html/textfield2.example.js.backup +1370 -0
- package/src/html/tokenfield.example.js +108 -4
- package/src/html/tokenfield.example.js.backup +503 -0
- package/src/html/tree.css +2 -4
- package/src/html/tree.example.js +93 -4
- package/src/html/tree.example.js.backup +475 -0
- package/src/html/tree.js +19 -3
@@ -0,0 +1,363 @@
|
|
1
|
+
/**
|
2
|
+
* Funciones de sumario para DataTable2
|
3
|
+
* Proporciona funciones predefinidas para calcular totales, promedios, conteos, etc.
|
4
|
+
* según el tipo de datos de cada columna.
|
5
|
+
*/
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Funciones numéricas
|
9
|
+
*/
|
10
|
+
export const numericSummaryFunctions = {
|
11
|
+
sum: {
|
12
|
+
id: 'sum',
|
13
|
+
label: 'Suma',
|
14
|
+
description: 'Suma todos los valores numéricos',
|
15
|
+
calculate: (values) => {
|
16
|
+
const numbers = values.filter(v => v != null && !isNaN(Number(v))).map(Number)
|
17
|
+
return numbers.length > 0 ? numbers.reduce((a, b) => a + b, 0) : 0
|
18
|
+
},
|
19
|
+
format: (value, column) => {
|
20
|
+
if (column.type === 'currency') {
|
21
|
+
return new Intl.NumberFormat('es-ES', {
|
22
|
+
style: 'currency',
|
23
|
+
currency: 'EUR'
|
24
|
+
}).format(value)
|
25
|
+
}
|
26
|
+
return new Intl.NumberFormat('es-ES').format(value)
|
27
|
+
}
|
28
|
+
},
|
29
|
+
|
30
|
+
avg: {
|
31
|
+
id: 'avg',
|
32
|
+
label: 'Promedio',
|
33
|
+
description: 'Promedio de todos los valores numéricos',
|
34
|
+
calculate: (values) => {
|
35
|
+
const numbers = values.filter(v => v != null && !isNaN(Number(v))).map(Number)
|
36
|
+
return numbers.length > 0 ? numbers.reduce((a, b) => a + b, 0) / numbers.length : 0
|
37
|
+
},
|
38
|
+
format: (value, column) => {
|
39
|
+
if (column.type === 'currency') {
|
40
|
+
return new Intl.NumberFormat('es-ES', {
|
41
|
+
style: 'currency',
|
42
|
+
currency: 'EUR'
|
43
|
+
}).format(value)
|
44
|
+
}
|
45
|
+
return new Intl.NumberFormat('es-ES', {
|
46
|
+
minimumFractionDigits: 2,
|
47
|
+
maximumFractionDigits: 2
|
48
|
+
}).format(value)
|
49
|
+
}
|
50
|
+
},
|
51
|
+
|
52
|
+
min: {
|
53
|
+
id: 'min',
|
54
|
+
label: 'Mínimo',
|
55
|
+
description: 'Valor mínimo',
|
56
|
+
calculate: (values) => {
|
57
|
+
const numbers = values.filter(v => v != null && !isNaN(Number(v))).map(Number)
|
58
|
+
return numbers.length > 0 ? Math.min(...numbers) : 0
|
59
|
+
},
|
60
|
+
format: (value, column) => {
|
61
|
+
if (column.type === 'currency') {
|
62
|
+
return new Intl.NumberFormat('es-ES', {
|
63
|
+
style: 'currency',
|
64
|
+
currency: 'EUR'
|
65
|
+
}).format(value)
|
66
|
+
}
|
67
|
+
return new Intl.NumberFormat('es-ES').format(value)
|
68
|
+
}
|
69
|
+
},
|
70
|
+
|
71
|
+
max: {
|
72
|
+
id: 'max',
|
73
|
+
label: 'Máximo',
|
74
|
+
description: 'Valor máximo',
|
75
|
+
calculate: (values) => {
|
76
|
+
const numbers = values.filter(v => v != null && !isNaN(Number(v))).map(Number)
|
77
|
+
return numbers.length > 0 ? Math.max(...numbers) : 0
|
78
|
+
},
|
79
|
+
format: (value, column) => {
|
80
|
+
if (column.type === 'currency') {
|
81
|
+
return new Intl.NumberFormat('es-ES', {
|
82
|
+
style: 'currency',
|
83
|
+
currency: 'EUR'
|
84
|
+
}).format(value)
|
85
|
+
}
|
86
|
+
return new Intl.NumberFormat('es-ES').format(value)
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
/**
|
92
|
+
* Funciones de texto
|
93
|
+
*/
|
94
|
+
export const textSummaryFunctions = {
|
95
|
+
count: {
|
96
|
+
id: 'count',
|
97
|
+
label: 'Contar',
|
98
|
+
description: 'Cuenta valores no vacíos',
|
99
|
+
calculate: (values) => {
|
100
|
+
return values.filter(v => v != null && v !== '').length
|
101
|
+
},
|
102
|
+
format: (value) => `${value} elementos`
|
103
|
+
},
|
104
|
+
|
105
|
+
countUnique: {
|
106
|
+
id: 'countUnique',
|
107
|
+
label: 'Únicos',
|
108
|
+
description: 'Cuenta valores únicos',
|
109
|
+
calculate: (values) => {
|
110
|
+
const unique = new Set(values.filter(v => v != null && v !== ''))
|
111
|
+
return unique.size
|
112
|
+
},
|
113
|
+
format: (value) => `${value} únicos`
|
114
|
+
},
|
115
|
+
|
116
|
+
mostCommon: {
|
117
|
+
id: 'mostCommon',
|
118
|
+
label: 'Más común',
|
119
|
+
description: 'Valor más frecuente',
|
120
|
+
calculate: (values) => {
|
121
|
+
const counts = {}
|
122
|
+
values.filter(v => v != null && v !== '').forEach(v => {
|
123
|
+
counts[v] = (counts[v] || 0) + 1
|
124
|
+
})
|
125
|
+
|
126
|
+
let maxCount = 0
|
127
|
+
let mostCommon = ''
|
128
|
+
Object.entries(counts).forEach(([value, count]) => {
|
129
|
+
if (count > maxCount) {
|
130
|
+
maxCount = count
|
131
|
+
mostCommon = value
|
132
|
+
}
|
133
|
+
})
|
134
|
+
|
135
|
+
return mostCommon
|
136
|
+
},
|
137
|
+
format: (value) => value || 'N/A'
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
/**
|
142
|
+
* Funciones de fecha
|
143
|
+
*/
|
144
|
+
export const dateSummaryFunctions = {
|
145
|
+
count: {
|
146
|
+
id: 'count',
|
147
|
+
label: 'Contar',
|
148
|
+
description: 'Cuenta fechas válidas',
|
149
|
+
calculate: (values) => {
|
150
|
+
return values.filter(v => v != null && v !== '' && !isNaN(Date.parse(v))).length
|
151
|
+
},
|
152
|
+
format: (value) => `${value} fechas`
|
153
|
+
},
|
154
|
+
|
155
|
+
earliest: {
|
156
|
+
id: 'earliest',
|
157
|
+
label: 'Más antigua',
|
158
|
+
description: 'Fecha más antigua',
|
159
|
+
calculate: (values) => {
|
160
|
+
const dates = values
|
161
|
+
.filter(v => v != null && v !== '' && !isNaN(Date.parse(v)))
|
162
|
+
.map(v => new Date(v))
|
163
|
+
return dates.length > 0 ? new Date(Math.min(...dates)) : null
|
164
|
+
},
|
165
|
+
format: (value) => {
|
166
|
+
return value ? new Intl.DateTimeFormat('es-ES').format(value) : 'N/A'
|
167
|
+
}
|
168
|
+
},
|
169
|
+
|
170
|
+
latest: {
|
171
|
+
id: 'latest',
|
172
|
+
label: 'Más reciente',
|
173
|
+
description: 'Fecha más reciente',
|
174
|
+
calculate: (values) => {
|
175
|
+
const dates = values
|
176
|
+
.filter(v => v != null && v !== '' && !isNaN(Date.parse(v)))
|
177
|
+
.map(v => new Date(v))
|
178
|
+
return dates.length > 0 ? new Date(Math.max(...dates)) : null
|
179
|
+
},
|
180
|
+
format: (value) => {
|
181
|
+
return value ? new Intl.DateTimeFormat('es-ES').format(value) : 'N/A'
|
182
|
+
}
|
183
|
+
}
|
184
|
+
}
|
185
|
+
|
186
|
+
/**
|
187
|
+
* Funciones booleanas
|
188
|
+
*/
|
189
|
+
export const booleanSummaryFunctions = {
|
190
|
+
countTrue: {
|
191
|
+
id: 'countTrue',
|
192
|
+
label: 'Verdaderos',
|
193
|
+
description: 'Cuenta valores verdaderos',
|
194
|
+
calculate: (values) => {
|
195
|
+
return values.filter(v => v === true || v === 'true' || v === 1 || v === '1').length
|
196
|
+
},
|
197
|
+
format: (value) => `${value} verdaderos`
|
198
|
+
},
|
199
|
+
|
200
|
+
countFalse: {
|
201
|
+
id: 'countFalse',
|
202
|
+
label: 'Falsos',
|
203
|
+
description: 'Cuenta valores falsos',
|
204
|
+
calculate: (values) => {
|
205
|
+
return values.filter(v => v === false || v === 'false' || v === 0 || v === '0').length
|
206
|
+
},
|
207
|
+
format: (value) => `${value} falsos`
|
208
|
+
},
|
209
|
+
|
210
|
+
percentage: {
|
211
|
+
id: 'percentage',
|
212
|
+
label: 'Porcentaje',
|
213
|
+
description: 'Porcentaje de verdaderos',
|
214
|
+
calculate: (values) => {
|
215
|
+
const total = values.filter(v => v != null).length
|
216
|
+
const trueCount = values.filter(v => v === true || v === 'true' || v === 1 || v === '1').length
|
217
|
+
return total > 0 ? (trueCount / total) * 100 : 0
|
218
|
+
},
|
219
|
+
format: (value) => `${value.toFixed(1)}%`
|
220
|
+
}
|
221
|
+
}
|
222
|
+
|
223
|
+
/**
|
224
|
+
* Mapa de funciones por tipo de columna
|
225
|
+
*/
|
226
|
+
export const summaryFunctionsByType = {
|
227
|
+
number: numericSummaryFunctions,
|
228
|
+
currency: numericSummaryFunctions,
|
229
|
+
percentage: numericSummaryFunctions,
|
230
|
+
text: textSummaryFunctions,
|
231
|
+
email: textSummaryFunctions,
|
232
|
+
url: textSummaryFunctions,
|
233
|
+
date: dateSummaryFunctions,
|
234
|
+
datetime: dateSummaryFunctions,
|
235
|
+
boolean: booleanSummaryFunctions
|
236
|
+
}
|
237
|
+
|
238
|
+
/**
|
239
|
+
* Obtener funciones disponibles para un tipo de columna
|
240
|
+
*/
|
241
|
+
export const getSummaryFunctionsForType = (columnType) => {
|
242
|
+
return summaryFunctionsByType[columnType] || textSummaryFunctions
|
243
|
+
}
|
244
|
+
|
245
|
+
/**
|
246
|
+
* Calcular sumario para una columna
|
247
|
+
*/
|
248
|
+
export const calculateColumnSummary = (column, rows) => {
|
249
|
+
if (!column.summary || !column.summary.function) {
|
250
|
+
return null
|
251
|
+
}
|
252
|
+
|
253
|
+
// Obtener valores de la columna
|
254
|
+
const values = rows.map(row => row[column.id])
|
255
|
+
|
256
|
+
// Obtener función de sumario
|
257
|
+
const summaryFunction = getSummaryFunction(column.summary.function, column.type)
|
258
|
+
if (!summaryFunction) {
|
259
|
+
return null
|
260
|
+
}
|
261
|
+
|
262
|
+
// Calcular valor
|
263
|
+
const calculatedValue = summaryFunction.calculate(values)
|
264
|
+
|
265
|
+
// Formatear resultado
|
266
|
+
const formattedValue = summaryFunction.format(calculatedValue, column)
|
267
|
+
|
268
|
+
return {
|
269
|
+
value: calculatedValue,
|
270
|
+
formatted: formattedValue,
|
271
|
+
function: summaryFunction
|
272
|
+
}
|
273
|
+
}
|
274
|
+
|
275
|
+
/**
|
276
|
+
* Obtener función de sumario específica
|
277
|
+
*/
|
278
|
+
export const getSummaryFunction = (functionId, columnType) => {
|
279
|
+
const functions = getSummaryFunctionsForType(columnType)
|
280
|
+
return functions[functionId] || null
|
281
|
+
}
|
282
|
+
|
283
|
+
/**
|
284
|
+
* Funciones de utilidad para validación
|
285
|
+
*/
|
286
|
+
export const isValidSummaryFunction = (functionId, columnType) => {
|
287
|
+
const functions = getSummaryFunctionsForType(columnType)
|
288
|
+
return functionId in functions
|
289
|
+
}
|
290
|
+
|
291
|
+
/**
|
292
|
+
* Obtener todas las funciones disponibles
|
293
|
+
*/
|
294
|
+
export const getAllSummaryFunctions = () => {
|
295
|
+
return {
|
296
|
+
...numericSummaryFunctions,
|
297
|
+
...textSummaryFunctions,
|
298
|
+
...dateSummaryFunctions,
|
299
|
+
...booleanSummaryFunctions
|
300
|
+
}
|
301
|
+
}
|
302
|
+
|
303
|
+
/**
|
304
|
+
* Funciones de utilidad para crear sumarios personalizados
|
305
|
+
*/
|
306
|
+
export const createCustomSummaryFunction = (id, label, description, calculateFn, formatFn) => {
|
307
|
+
return {
|
308
|
+
id,
|
309
|
+
label,
|
310
|
+
description,
|
311
|
+
calculate: calculateFn,
|
312
|
+
format: formatFn || ((value) => String(value))
|
313
|
+
}
|
314
|
+
}
|
315
|
+
|
316
|
+
/**
|
317
|
+
* Ejemplos de uso:
|
318
|
+
*
|
319
|
+
* // Sumario básico de suma
|
320
|
+
* const column = {
|
321
|
+
* id: 'precio',
|
322
|
+
* label: 'Precio',
|
323
|
+
* type: 'currency',
|
324
|
+
* summary: { function: 'sum' }
|
325
|
+
* }
|
326
|
+
*
|
327
|
+
* // Sumario personalizado
|
328
|
+
* const customSummary = createCustomSummaryFunction(
|
329
|
+
* 'variance',
|
330
|
+
* 'Varianza',
|
331
|
+
* 'Varianza de los valores',
|
332
|
+
* (values) => {
|
333
|
+
* const numbers = values.filter(v => !isNaN(Number(v))).map(Number)
|
334
|
+
* const mean = numbers.reduce((a, b) => a + b, 0) / numbers.length
|
335
|
+
* const variance = numbers.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / numbers.length
|
336
|
+
* return variance
|
337
|
+
* },
|
338
|
+
* (value) => value.toFixed(2)
|
339
|
+
* )
|
340
|
+
*
|
341
|
+
* // Funciones disponibles por tipo:
|
342
|
+
* //
|
343
|
+
* // NUMÉRICAS (number, currency, percentage):
|
344
|
+
* // - sum: Suma total
|
345
|
+
* // - avg: Promedio
|
346
|
+
* // - min: Valor mínimo
|
347
|
+
* // - max: Valor máximo
|
348
|
+
* //
|
349
|
+
* // TEXTO (text, email, url):
|
350
|
+
* // - count: Contar valores no vacíos
|
351
|
+
* // - countUnique: Contar valores únicos
|
352
|
+
* // - mostCommon: Valor más frecuente
|
353
|
+
* //
|
354
|
+
* // FECHAS (date, datetime):
|
355
|
+
* // - count: Contar fechas válidas
|
356
|
+
* // - earliest: Fecha más antigua
|
357
|
+
* // - latest: Fecha más reciente
|
358
|
+
* //
|
359
|
+
* // BOOLEANAS (boolean):
|
360
|
+
* // - countTrue: Contar verdaderos
|
361
|
+
* // - countFalse: Contar falsos
|
362
|
+
* // - percentage: Porcentaje de verdaderos
|
363
|
+
*/
|