Skip to content

Commit 131e56f

Browse files
graphierosgraphieros
committed
Improvement - Add emit defs for some components
1 parent b57ee5c commit 131e56f

File tree

2 files changed

+192
-1
lines changed

2 files changed

+192
-1
lines changed

‎boilerplate.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ ${emitFuncs}
6363
</script>
6464
6565
<template>
66-
<div :style="{ width: '600px' }">
66+
<div :style="{ width: '600px' /** Set your styles for the chart wrapper */ }">
6767
<VueDataUi
6868
component="${component}"
6969
${!datasetType ? '' : `:dataset="dataset"`}

‎emits.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,197 @@ export default (componentName) => {
211211
}`,
212212
},
213213
],
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: []
214405
}
215406

216407
return emitExamples[componentName]

0 commit comments

Comments
 (0)