carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
901 stars 184 forks source link

[Bug]: Exporting as CSV from Donut/Pie chart doesn't work with valueMapsTo #1693

Open ShivaJormungandr opened 8 months ago

ShivaJormungandr commented 8 months ago

Name

Octavian

Are you an IBM employee?

What happened?

A bug happened!

Summary

Export as CSV and view tabular data don't work when you don't have a "value" column even though the value is mapped to another column that exists.

What I expected to happen

The chart looks as expected. I expected taht I can export the data I see in the chart.

What I think is the issue

The issue seems to stem from the fact that getTabularDataArray() from pie.ts does not use valueMapsTo like it uses groupMapsTo, but the key 'value' is hardcoded.

The offending piece of code in core/src/model/pie.ts:

getTabularDataArray() {
  const displayData = this.getDisplayData()
  const options = this.getOptions()
  const { groupMapsTo } = options.data

  const result = [
    ['Group', 'Value'],
      ...displayData.map((datum: any) => [
        datum[groupMapsTo],
        datum['value'] === null ? '–' : datum['value'].toLocaleString()
    ])
  ]

  return result
}

Version

"@carbon/charts-svelte": "^1.13.8"

Data & options used

Data for chart:

[
  {
    "group": "Test 1",
    "test": 1000
  },
  {
    "group": "Test 2",
    "test": 299
  },
  {
    "group": "Test 3",
    "test": 333
  },
  {
    "group": "Test 4",
    "test": 1000
  },
  {
    "group": "Test 5",
    "test": 299
  },
  {
    "group": "Test 6",
    "test": 333
  }
]

Options:
```JSON
{
  "title": "Pie",
  "resizable": true,
  "height": "400px",
  "theme": "g100",
  "pie": {
    "valueMapsTo": "test"
  }
}

### Relevant log output

```js
pie.ts:36 Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleString')
    at pie.ts:36:58
    at Array.map (<anonymous>)
    at yt2.getTabularDataArray (pie.ts:34:19)
    at rc2.getModalHTML (modal.ts:74:33)
    at DocumentFragment.handleShowModal (modal.ts:35:24)
    at ot4.dispatchEvent (events.ts:31:25)
    at Object.clickFunction (toolbar.ts:535:48)
    at Hs2.triggerFunctionAndEvent (toolbar.ts:355:12)
    at HTMLButtonElement.<anonymous> (toolbar.ts:110:14)
    at HTMLButtonElement.<anonymous> (on.js:3:14)

Codesandbox example

It happens in this example. Export as CVS and See as table are not working. https://charts.carbondesignsystem.com/svelte/?path=/story/simple-charts-donut--donut-value-maps-to-count

What priority level would this be in your opinion?

P2

ShivaJormungandr commented 4 months ago

Hey. I think that the #1698 merge fixed this. Should this issue be closed?