Scatter plots: Table includes years that don't show up in the chart

sophiamersmann commented 9 months ago

Description

For this scatter plot, the chart includes data up to 2018
But the table includes data up to 2021 where the table views for years 2019/2020/2021 are empty

Expected behaviour

The table should only show relevant data (up to 2018)

Steps to reproduce

Steps to reproduce the behavior:

Go to https://ourworldindata.org/grapher/life-expectancy-vs-gdp-per-capita
Note that the last year is 2018
Click on table tab
Note that the last year is 2021 and the table is empty

Screenshots

Additional context

This data transforms leads to the behaviour: https://github.com/owid/owid-grapher/blob/80956e3ab7d51871921b5f761439e3a1e68e1ec1/packages/%40ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx#L251-L262

It's applied to charts, but not applied to tables.

sophiamersmann commented 9 months ago

Similar thing happens here: https://ourworldindata.org/grapher/new-vehicles-type-area

toni-sharpe commented 4 months ago

I can't reproduce this currently for the scatter chart:

toni-sharpe commented 3 months ago

@sophiamersmann from what I can tell the second example is sort of right, but it's taken some digging. It includes years that can be on the chart, but not if the user toggles to see just their selection.

The example is Norway, which has data from 2013 to 2019; but, the full set of data for "new vehicle registration types" covers 2001 to 2020

I was able to understand the data structure, but not fix:

originalInput: Object { 176401: (309) […], 176403: (309) […], 176404: (309) […], … }

// these six-char codes are car-types (specifically)
176401: Array(309) [ 0, 0, 0, … ]
176403: Array(309) [ 29, 0, 407, … ]
176404: Array(309) [ 2019996, 143493.2601, 986491, … ]
176409: Array(309) [ 719, 19.07941399, 84, … ]
176410: Array(309) [ 437628, 21060.66051, 1267750, … ]

// These arrrays contain all location-years
// Norway appears seven times because there are seven years 2013-2019 inclusive
entityCode: Array(309) [ "GBR", "IRL", "FRA", … ]
entityId: Array(309) [ 1, 2, 3, … ]
entityName: Array(309) [ "United Kingdom", "Ireland", "France", … ]

// the seven indices from the above arrays pick out the years 2013-2019 from this array
time: Array(309) [ 2001, 2001, 2001, … ]

Getting those years into the table, I don't know. Yet. The table loads after the chart (which does load with the right years buried in this struture)

Object { manager: {…}, bounds: {…}, dualAxis: {…}, renderUid: 2, series: (5) […] }
  ...
  series: Array(5) [ {…}, {…}, {…}, … ]
    ...
    points: Array(7) [ {…}, {…}, {…}, … ]

      0: Object { time: 2013, position: 2013, value: 52.541311703751646, … }
      1: Object { time: 2014, position: 2014, value: 48.66709201364809, … }
      2: Object { time: 2015, position: 2015, value: 40.81919779140453, … }
      3: Object { time: 2016, position: 2016, value: 30.801423027166884, … }
      4: Object { time: 2017, position: 2017, value: 23.14019893347453, … }
      5: Object { time: 2018, position: 2018, value: 17.690284810340515, … }
      6: Object { time: 2019, position: 2019, value: 16.03315072341621, … }
   ...

I got round that using this below but a then a whole string of function errors appeared. I had to stop.

this.columnStore[columnSlug]
  .filter(
    storeElem => {
      return opName.split(',').includes(storeElem)
    })
  .map((_, i) => this.columnStore.year[i])

return this

Too much info. Not enough solution.