Sparklines minor issues.

[DougRzz]

Ipyvuetify sparklines are v nice for simple line plots.

Minor issues which I spotted (or couldn't work it out):

1. Colours not working on the bar chart
2. Rounded ends on line didn't seem to work

It doesn't matter too much. The main reason for creating this issue was to say Sparklines are really cool. Look at this demo. ............

import ipyvuetify as v 
import ipywidgets as widgets

y = [2,3,10,6,3,56,2,4,7]
x = [1,3,4,6,3,6 ,2,4,7]

spark = v.Sparkline(
      labels =x,
      value=y,
      gradient=['#f72047', '#ffd200', '#1feaea'],
      padding=10,
      line_width=5,
#       stroke_linecap="round", # round, lineCap   not in ipyvuetify??
      gradient_direction="top",  # top right left bottom
      fill=False,
      type="trend",  # trend, bar  # I cannot get colors on the bars
#       auto_line_width=False,
      auto_draw = True,  # animation
      show_labels=True,
      label_size=10,
      smooth = 10, # smoothline
    height = None,
    width = None
)

card = v.Card(width = 800, height= 800)

sliderCardWidth = v.Slider(v_model=10,min=0,max=2000,step=0.1,label="Card Width",thumb_label = True)
sliderCardHeight = v.Slider(v_model=10,min=0,max=2000,step=0.1,label="Card Height",thumb_label = True)
widgets.jslink((card,'width'),(sliderCardWidth,'v_model'))
widgets.jslink((card,'height'),(sliderCardHeight,'v_model'))


sliderWidth = v.Slider(v_model=10,min=0,max=1000,step=0.1,label="Sparkline figure Width",thumb_label = True)
sliderHeight = v.Slider(v_model=10,min=0,max=500,step=0.1,label="Sparkline figure Height",thumb_label = True)
sliderLineWidth = v.Slider(v_model=10,min=0,max=20,step=0.1,label="Line Width",thumb_label = True)
sliderLabelSize = v.Slider(v_model=10,min=0,max=20,step=0.1,label="Label Size",thumb_label = True)
sliderSmooth = v.Slider(v_model=10,min=0,max=50,step=0.1,label="Smoothing",thumb_label = True)
sliderPadding = v.Slider(v_model=10,min=0,max=50,step=0.1,label="Padding",thumb_label = True)
switchLabels = v.Switch( v_model=True, label="Show labels doesn't work?",disabled=False)
switchFill = v.Switch( v_model=False, label="Fill?",disabled=False)
switchType = v.Switch( v_model=False, label="Fill?",disabled=False)

widgets.jslink((spark,'width'),(sliderWidth,'v_model'))
widgets.jslink((spark,'height'),(sliderHeight,'v_model'))
widgets.jslink((spark,'line_width'),(sliderLineWidth,'v_model'))
widgets.jslink((spark,'label_size'),(sliderLabelSize,'v_model'))
widgets.jslink((spark,'smooth'),(sliderSmooth,'v_model'))
widgets.jslink((spark,'padding'),(sliderPadding,'v_model'))
widgets.jslink((spark,'fill'),(switchFill,'v_model'))
widgets.jslink((spark,'show_labels'),(switchLabels,'v_model'))


col = v.Col(children=[ sliderWidth,sliderHeight,spark,sliderLineWidth,sliderLabelSize,sliderSmooth,sliderPadding,switchLabels,switchFill])
card.children = [col]
colCardTop = v.Col(children=[sliderCardWidth, sliderCardHeight,card])
colCardTop

import numpy as np
import time
num=0
while num<20:
    num+=1
    time.sleep(0.3)
    spark.value = list(np.array(y)*np.random.random(len(y)))

[mariobuikhuizen]

Thanks for reporting this issue and cool demo!

The stroke-linecap is an attribute on the SVG HTML element of the Sparkline vue component and is not captured in the API. Arbitrary HTML attributes can be set with the attributes traitlet:

...
line_width=5,
attributes = {
  'stroke-linecap': 'round'
},

I can't quickly find why the colors on the bar chart don't work.