Include VSparkline for use in ui-template

[joepavitt]

Description

Vuetify has recently released the "VSparkline" widget into it's component library. This component would be very popular with the Node-RED community, so I looked into including it by default as a standard Vuetify component. It's currently in the Vuetify "labs" which requires us to manually import it.

Unfortunately, it's got a bug that prevents the most common use case we would have, meaning the width of the chart reduces as more data is added. I have reported the details here

Once that is resolved, which should include the VSparkline by default for us in a ui-template node.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

For now, as a first iteration, we can include:

.nrdb-ui-sparkline path {
  stroke-dasharray: 0 !important;
}

in the ui-template, and attach the appropriate class to the v-sparkline to circumvent the blocking issue.

[joepavitt]

[Steve-Mcl]

For now, as a first iteration, we can include:

.nrdb-ui-sparkline path {
  stroke-dasharray: 0 !important;
}

in the ui-template, and attach the appropriate class to the v-sparkline to circumvent the blocking issue.

FWIW, your comment on the vuetify issue states:

It does seem to be linked to the dash offset value on the path:

Removing the dashoffset in the CSS dev tools fixes the issue:

Emphasis on offset - should be dasharray (as in stroke-dasharray)

[joepavitt]

Thanks @Steve-Mcl