Add Sparkline component and replace tiny-linked-charts dependency

[hughess]

Description

Adds a Sparkline component and replaces the existing svelte-tiny-linked-charts dependency, which caused some issues with rendering, dependency management, and stability in the past.

As a result, this replaces the sparkline included with BigValue. This can also fit into DataTable in the future.

This uses echarts under the hood with some customization. It includes:

• SSR
• Hydration to interactive if interactive=true
• Tooltip above and below the sparkline
• 3 chart types: line, area, and bar
• connectGroup prop which will synchronize tooltip behaviour across any sparklines where the connectGroup name matches

Examples

Basic sparkline

<Sparkline 
    data={sales_by_date} 
    dateCol=date 
    valueCol=sales 
/>

Connected sparklines

<Sparkline data={sales_by_date} dateCol=date valueCol=sales type=bar  valueFmt=eur dateFmt=mmm connectGroup=mysparkline/>
<Sparkline data={sales_by_date} dateCol=date valueCol=sales type=area color=maroon valueFmt=eur dateFmt=mmm connectGroup=mysparkline/>
<Sparkline data={sales_by_date} dateCol=date valueCol=sales type=line color=purple valueFmt=eur dateFmt=mmm connectGroup=mysparkline/>

In BigValue

<BigValue 
   data = {owc} 
   value=sales_usd0k 
   sparkline=month
   comparison=sales_change_pct0
   comparisonTitle="vs. Last Month"
   sparklineType=area
   connectGroup=mysparkline
/>

<BigValue data = {owc} 
   value=num_orders_num0
   title="Orders"
   sparkline=month
   sparklineType=bar
   comparison=num_orders_change_pct0
   comparisonTitle="vs. Last Month"
   sparklineColor=maroon
   sparklineDateFmt=shortdate
   connectGroup=mysparkline
/>

<BigValue data = {owc} 
   value=aov_usd2
   title="AOV ($)"
   sparkline=month
   comparison=aov_change_pct0
   comparisonTitle="vs. Last Month"
   sparklineColor=navy
   sparklineDateFmt=mmm
   sparklineYScale=true
   connectGroup=mysparkline
/> 

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [x] I have added a changeset
• [x] I have added to the docs where applicable

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2e663e355ab9b076833c206d25e0a5b6236f6ab5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@evidence-dev/core-components	Patch
@evidence-dev/evidence	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 29, 2024 2:09am

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	2e663e355ab9b076833c206d25e0a5b6236f6ab5
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/65dfe70628b7d500084b5131
😎 Deploy Preview	https://deploy-preview-1639--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[archiewood]

What is the status of this PR?

[hughess]

should be good to go - just needs an approval!

[archiewood]

And now it has one!

[hughess]

Looks like @ItsMeBrianD needs to approve after requesting changes

[mcrascal]

@hughess These are great! Two small nits below. I don't think we necessarily need to address these in this PR though.

1. For inline sparklines, the interactive tooltip/label crowds the text around it (see below). I feel like this would matter less if interactive wasn't the default.
2. I get a "strobing" effect on the red bar sparkline in the bigvalue example on mobile - I think it's because the gaps between the bars are extremely thin. Is there a way to remove the gap between the bars once you have a certain number of points?

[hughess]

Adjusted the tooltip to avoid the text overlap.

The bars will take more fiddling, so going to leave those for now - I also think part of that visual effect is coming from the saturation of the colour I put in there which is just a CSS colour (maroon).

I also just noticed another issue which I'm leaving for now - on page refresh, inline sparklines cause the text to shift before resetting. Going to see if this happens in a deployed site as well.