vue-data-ui-cli 0.0.7 → 0.0.9

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.
Files changed (3) hide show
  1. package/boilerplate.js +1 -1
  2. package/emits.js +191 -0
  3. package/package.json +2 -2
package/boilerplate.js CHANGED
@@ -63,7 +63,7 @@ ${emitFuncs}
63
63
  </script>
64
64
 
65
65
  <template>
66
- <div :style="{ width: '600px' }">
66
+ <div :style="{ width: '600px' /** Set your styles for the chart wrapper */ }">
67
67
  <VueDataUi
68
68
  component="${component}"
69
69
  ${!datasetType ? '' : `:dataset="dataset"`}
package/emits.js CHANGED
@@ -211,6 +211,197 @@ export default (componentName) => {
211
211
  }`,
212
212
  },
213
213
  ],
214
+ VueUiSparkline: [
215
+ {
216
+ name: 'selectDatapoint',
217
+ func: `/**
218
+ * @typedef {Object} VueUiSparklineDatapoint
219
+ * @property {Object} datapoint - The datapoint details.
220
+ * @property {number} datapoint.absoluteValue - The absolute value of the datapoint.
221
+ * @property {string} datapoint.color - The color associated with the datapoint.
222
+ * @property {string} datapoint.id - The unique identifier of the datapoint.
223
+ * @property {string} datapoint.period - The period associated with the datapoint.
224
+ * @property {number} datapoint.plotValue - The value to be plotted for the datapoint.
225
+ * @property {number} datapoint.toMax - The value to the maximum range.
226
+ * @property {number} datapoint.width - The width of the datapoint.
227
+ * @property {number} datapoint.x - The x-coordinate of the datapoint.
228
+ * @property {number} datapoint.y - The y-coordinate of the datapoint.
229
+ * @property {number} index - The index of the datapoint in the series.
230
+ */
231
+
232
+ /**
233
+ * On click returns the data of the selected datapoint.
234
+ * @param {VueUiSparklineDatapoint} datapoint - The selected datapoint.
235
+ */
236
+ function selectDatapoint(datapoint) {
237
+ console.log(datapoint);
238
+ }`,
239
+ funcTs: `type VueUiSparklineDatapoint = {
240
+ readonly datapoint: {
241
+ absoluteValue: number
242
+ color: string
243
+ id: string
244
+ period: string
245
+ plotValue: number
246
+ toMax: number
247
+ width: number
248
+ x: number
249
+ y: number
250
+ }
251
+ readonly index: number
252
+ }
253
+ /**
254
+ * @selectDatapoint - On click returns the data of the selected datapoint
255
+ */
256
+ function selectDatapoint(datapoint: VueUiSparklineDatapoint){
257
+ console.log(datapoint)
258
+ }`
259
+ }
260
+ ],
261
+ VueUiSparkbar: [
262
+ {
263
+ name: 'selectDatapoint',
264
+ func: `/**
265
+ * @typedef {Object} VueUiSparkbarDatapoint
266
+ * @property {Object} datapoint - The datapoint details.
267
+ * @property {string} datapoint.color - The color associated with the datapoint.
268
+ * @property {string} datapoint.name - The name associated with the datapoint.
269
+ * @property {number} datapoint.rounding - The rounding precision for the datapoint value.
270
+ * @property {string} datapoint.suffix - The suffix to append to the datapoint value.
271
+ * @property {number} datapoint.value - The value of the datapoint.
272
+ * @property {number} index - The index of the datapoint in the series.
273
+ */
274
+
275
+ /**
276
+ * On click returns the data of the selected datapoint.
277
+ * @param {VueUiSparkbarDatapoint} datapoint - The selected datapoint.
278
+ */
279
+ function selectDatapoint(datapoint) {
280
+ console.log(datapoint);
281
+ }`,
282
+ funcTs: `type VueUiSparkbarDatapoint = {
283
+ readonly datapoint: {
284
+ color: string
285
+ name: string
286
+ rounding: number
287
+ suffix: string
288
+ value: number
289
+ }
290
+ readonly index: number
291
+ }
292
+ /**
293
+ * @selectDatapoint - On click returns the data of the selected datapoint
294
+ */
295
+ function selectDatapoint(datapoint: VueUiSparkbarDatapoint){
296
+ console.log(datapoint)
297
+ }`
298
+ }
299
+ ],
300
+ VueUiSparkStackbar: [
301
+ {
302
+ name: 'selectDatapoint',
303
+ func: `/**
304
+ * @typedef {Object} VueUiSparkStackbarDatapoint
305
+ * @property {Object} datapoint - The datapoint details.
306
+ * @property {string} datapoint.color - The color associated with the datapoint.
307
+ * @property {string} datapoint.id - The unique identifier of the datapoint.
308
+ * @property {string} datapoint.name - The name associated with the datapoint.
309
+ * @property {number} datapoint.proportion - The proportion value of the datapoint.
310
+ * @property {string} datapoint.proportionLabel - The label representing the proportion.
311
+ * @property {number} datapoint.start - The starting value of the stack segment.
312
+ * @property {number} datapoint.value - The value of the datapoint.
313
+ * @property {number} datapoint.width - The width of the datapoint.
314
+ * @property {number} index - The index of the datapoint in the series.
315
+ */
316
+
317
+ /**
318
+ * On click returns the data of the selected datapoint.
319
+ * @param {VueUiSparkStackbarDatapoint} datapoint - The selected datapoint.
320
+ */
321
+ function selectDatapoint(datapoint) {
322
+ console.log(datapoint);
323
+ }`,
324
+ funcTs: `type VueUiSparkStackbarDatapoint = {
325
+ readonly datapoint: {
326
+ color: string
327
+ id: string
328
+ name: string
329
+ proportion: number
330
+ proportionLabel: string
331
+ start: number
332
+ value: number
333
+ width: number
334
+ }
335
+ readonly index: number
336
+ }
337
+ /**
338
+ * @selectDatapoint - On click returns the data of the selected datapoint
339
+ */
340
+ function selectDatapoint(datapoint: VueUiSparkStackbarDatapoint){
341
+ console.log(datapoint)
342
+ }`
343
+ }
344
+ ],
345
+ VueUiSparkHistogram: [
346
+ {
347
+ name: 'selectDatapoint',
348
+ func: `/**
349
+ * @typedef {Object} VueUiSparkHistogramDatapoint
350
+ * @property {Object} datapoint - The datapoint details.
351
+ * @property {string} datapoint.color - The color of the datapoint.
352
+ * @property {string} datapoint.gradient - The gradient style for the datapoint.
353
+ * @property {number} datapoint.height - The height of the datapoint.
354
+ * @property {number} datapoint.intensity - The intensity value of the datapoint.
355
+ * @property {number} datapoint.proportion - The proportion value of the datapoint.
356
+ * @property {string} datapoint.stroke - The stroke color of the datapoint.
357
+ * @property {number} datapoint.textAnchor - The anchor position for the text.
358
+ * @property {string} datapoint.timeLabel - The label for the time period associated with the datapoint.
359
+ * @property {number} datapoint.trapX - The trapezoid X-coordinate for the datapoint.
360
+ * @property {number} datapoint.unitWidth - The unit width of the datapoint.
361
+ * @property {number} datapoint.value - The value of the datapoint.
362
+ * @property {string} datapoint.valueLabel - The label representing the value.
363
+ * @property {number} datapoint.width - The width of the datapoint.
364
+ * @property {number} datapoint.x - The x-coordinate of the datapoint.
365
+ * @property {number} datapoint.y - The y-coordinate of the datapoint.
366
+ * @property {number} index - The index of the datapoint in the series.
367
+ */
368
+
369
+ /**
370
+ * On click returns the data of the selected datapoint.
371
+ * @param {VueUiSparkHistogramDatapoint} datapoint - The selected datapoint.
372
+ */
373
+ function selectDatapoint(datapoint) {
374
+ console.log(datapoint);
375
+ }`,
376
+ funcTs: `type VueUiSparkHistogramDatapoint = {
377
+ readonly datapoint: {
378
+ color: string
379
+ gradient: string
380
+ height: number
381
+ intensity: number
382
+ proportion: number
383
+ stroke: string
384
+ textAnchor: number
385
+ timeLabel: string
386
+ trapX: number
387
+ unitWidth: number
388
+ value: number
389
+ valueLabel: string
390
+ width: number
391
+ x: number
392
+ y: number
393
+ }
394
+ readonly index: number
395
+ }
396
+ /**
397
+ * @selectDatapoint - On click returns the data of the selected datapoint
398
+ */
399
+ function selectDatapoint(datapoint: VueUiSparkHistogramDatapoint){
400
+ console.log(datapoint)
401
+ }`
402
+ }
403
+ ],
404
+ VueUiQuickChart: []
214
405
  }
215
406
 
216
407
  return emitExamples[componentName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-data-ui-cli",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "private": false,
5
5
  "description": "A CLI tool to generate Vue Data UI chart component boilerplates",
6
6
  "main": "index.js",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "peerDependencies": {
36
36
  "prettier": "^3.4.2",
37
- "vue-data-ui": "^2.4.49",
37
+ "vue-data-ui": "^2.4.51",
38
38
  "vue": "^3.5.13"
39
39
  }
40
40
  }