Add echarts custom options

[hughess]

Description

Adds 2 props to chart components:

• echartsOptions: lets you supply an object containing Echarts config, which gets merged with the config of the chart
• printEchartsConfig: (true/false) helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options

Remaining Issues

• Needs work for following components:
  • FunnelChart
  • SankeyChart
  • USMap
• Needs to be incorporated into echartsCopy.js, echartsCanvasDownload.js, and echartsMap.js

Checklist

• [x] I have added a changeset

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 9da524d05b14a58afd819a8935010886dae37141

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	9da524d05b14a58afd819a8935010886dae37141
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/65696eb6d8a8d60008dbde11
😎 Deploy Preview	https://deploy-preview-1366--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.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
evidence-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 1, 2023 5:28am

[archiewood]

Had a quick play with this.

Overall

Super powerful. Tried something @jdimmerman was asked about recently, and worked pretty nicely.

<AreaChart
    data={orders_by_category}
    x=month
    chartAreaHeight=200
    echartsOptions={{ xAxis: { axisLabel: { rotate: 90, interval: 0 } } }}
/>

Thoughts

• We should add a health warning to this setting.
  • Very easy to get a broken chart when you use these settings.
  • Example gotchas with my above chart
  • labels getting cut off, suboptimal height of chart after axis labels added
• The syntax for passing the options object is a bit tricky though not sure we can do anything about this:
  • Double {{}}
  • I expected something like this to work {{xAxis.axisLabel.rotate: 45}} but it doesn't
  • So we should document it well, with a few examples
• The echarts config object codeblock is cool
  • but I think I'd expect it to have an output with a fixed height, and the code scroll vertically if it overflows this length
  • the json indents are a bit agressive

[mcrascal]

This is really cool

[hughess]

@archiewood I adjusted the indent to 3 spaces - initially I threw in 10 for some reason.

I agree on the code block length, but thinking because it's just a dev mode helper leave it for now. Do you think we should fix it now?

Agreed on the concerns - I was thinking this should be a separate page in the docs, which we can link to from each chart type. That way we can include a bit more of a warning/explanation

[archiewood]

Do you think we should fix it now?

no need if not easy

Agreed on the concerns - I was thinking this should be a separate page in the docs, which we can link to from each chart type. That way we can include a bit more of a warning/explanation

sounds very sensible

[hughess]

Couple other tricky things about this atm:

• To access the yAxis, you need to use this syntax:

  echartsOptions={{
  yAxis: [
    { 
       something: 'something'
    }
  ]
  }}

• To reference a specific series, you need to pass it in the correct order, using empty curly braces for the series you don't want to change. e.g., to change the third series:

 echartsOptions={{
        series: [
            {},
            {},
            {symbol:'triangle'}
        ]
    }}

• As far as I can tell, it's not possible to change all series at once through this
• For bar chart xAxis labels, to get full control over spacing , you need to turn off showAllXAxisLabels

[hughess]

One other gotcha with this - if you're using a horizontal chart swapXY=true, the axis you need to make changes on will be flipped in the echarts options. The y-axis in Evidence would be referenced with xAxis in ECharts and vice versa

[hughess]

Last thing I noticed - it seems to not be possible to change the series type using this approach. I've created an issue with echarts for this: https://github.com/apache/echarts/issues/19349

[archiewood]

should / are we able to error handle the eCharts options if you pass an invalid config?

[archiewood]

I am writing some rudimentary docs for this