Drill into viz elements with anchor tags

[archiewood]

Feature Description

• You click on a bar of a bar graph, a title of a column, or a scatter chart point, and it navigates you through to another page where you can locate relevant information about the item.

Goal of Feature

• Ability to navigate intuitively through Evidence to get more detail.
• Has a similar goal to a filter, but should:
  • Be faster - drill page is prebuilt
  • Inspire more confidence - it feels more intuitively designed, and it doesnt feel like you might have ended up somewhere unintended

[hughess]

This looks like it would be achievable within echarts by using events (echarts docs)

At first glance, some things I think we'd need to figure out are:

• Whether the links should apply only to series, or also to x-axis values
  • E.g., on a stacked bar chart showing sales by country by year, clicking on an individual box on that chart could either bring you to a page for the country you clicked, or to a page corresponding to the country and year
• Syntax for adding clickable links to the chart and setting the appropriate granularity (series only, series + x, etc.)
• Would we need to ensure that the links available on the chart are all represented by pages in the project?
• If/how to allow for non-standard url paths (e.g., we could set it up to always start from the current page, but that wouldn't allow you to customize where the link is taking you)
• How to make the links discoverable to users in the chart

[archiewood]

Great ideas!

My take is that the names of the x axis should be clickable yes.

In the situation where there are multiple series, eg stacked bar, we may want to have a different behaviour when clicking the name vs one of the series.

I think we'd probably want to make the links configurable with props?

<BarChart
  data={my_query}
  x=year
  y=sales_usd
  series=channel
  xAxisLinks=year
  seriesLinks={["channel","year"]}
/>

That way the user has control over whether there are links or not. It's explicit which is nice.

[archiewood]

For non standard URL paths, you could perhaps pass a js expression as a prop? XAxisLink={"marketing/"+channel} or similar? Though I guess channel is not a js variable here...