add support for dynamic slideshow

[RyanCoulsonCA]

Related Item(s)

#410 and #353

Changes

• The slideshow panel now supports all panel types instead of just images.
• The charts panel no longer contains a carousel. Chart galleries should be replaced with a slideshow (see breaking changes section below).
• Text panels in the slideshow will display a scrollbar if they are too long.
• As per Aleks' feedback here, I have removed the ability to switch between slides by dragging the mouse in order to allow the user to pan the map and to copy text if they'd like.

Breaking Changes

• As discussed here, I have removed the carousel from the chart panel. To fix existing chart galleries, change the type from chart to slideshow, change the charts property to items, and add type: "chart" to each of the entries (it now treats each of the charts as their own chart panel).

For example, if this is what your current chart panel config looks like:

{
  "type": "chart",
  "charts": [
    {
      "src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
    },
    {
      "src": "00000000-0000-0000-0000-000000000000/charts/en/Total releases of ethylene glycol for 2019, by province_en.csv",
      "options": {
        "title": "Figure 2: Total releases of ethylene glycol for 2019, by province",
        "xAxisLabel": "Quantity (tonnes)",
        "subtitle": "",
        "type": "bar"
      }
    },
    {
      "src": "00000000-0000-0000-0000-000000000000/charts/en/EG_releases_2019_en.csv",
      "options": {
        "title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
        "subtitle": "",
        "type": "pie"
      }
    }
  ]
}

Replace it with the following:

{
  "type": "slideshow",
  "items": [
    {
      "type": "chart",
      "src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
    },
    {
      "type": "chart",
      "src": "00000000-0000-0000-0000-000000000000/charts/en/Total releases of ethylene glycol for 2019, by province_en.csv",
      "options": {
        "title": "Figure 2: Total releases of ethylene glycol for 2019, by province",
        "xAxisLabel": "Quantity (tonnes)",
        "subtitle": "",
        "type": "bar"
      }
    },
    {
      "type": "chart",
      "src": "00000000-0000-0000-0000-000000000000/charts/en/EG_releases_2019_en.csv",
      "options": {
        "title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
        "subtitle": "",
        "type": "pie"
      }
    }
  ]
}

• To fix existing image slideshows, simply replace the images property with items.

Testing

Play around with the following and ensure everything works as expected (will add links once the demo is up):

1. Click on the Charts Panel link in the Dynamic Panel Test slide. Ensure these charts load and can be switched.
2. Text, map, and chart panels have been added to the slideshow in the NPRI substances reported for oil sands mining facilities slide.
3. The image slideshow in the Reported mine tailings from oil sands surface mining facilities slide hasn't been touched. Ensure it still works as normal.
4. There is a chart slideshow on the Chart Gallery slide that you can play around with as well.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/fix-410/#/en/00000000-0000-0000-0000-000000000000

[yileifeng]

As discussed here, I have removed the carousel from the chart panel. To fix existing chart galleries, change the type from chart to slideshow, change the charts property to items, and add type: "chart" to each of the entries (it now treats each of the charts as their own chart panel).

Definitely should bring this up again in next week's meeting. It seems like chart slideshows are all cut-off on mobile view but this issue appears on the main build as well so can be new issue.

Reviewable status: 0 of 7 files reviewed, all discussions resolved

[yileifeng]

Reviewed 7 of 7 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)

[szczz]

Reviewed 7 of 7 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)

[KashishMistry]

Reviewed 7 of 7 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)