New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Donut causes error when following examples: TypeError: Cannot use 'in' operator to search for 'displayName' in undefined #247
Comments
@pseudovar thanks for filing the issue. Can you provide the steps to reproduce? |
Sure thing. I've got an App Builder app (package.json below) where I I've got a dashboard that I want to include a Donut chart on. I tried a few different examples from Storybook and wiki however they return the above error. Note: Other charts from the library are working without any issue, so unsure what I'm doing wrong. Any help would be appreciated. Here is my most recent component attempt: import React from 'react'
import {
Donut,
Legend,
Chart,
Metric,
Axis,
Bar,
ChartTooltip,
ChartPopover,
} from '@adobe/react-spectrum-charts'
const PieChart = () => {
const dialogContent = (datum) => {
return (
<Content>
<div>Browser: {datum.segment}</div>
<div>Visitors: {datum.count}</div>
</Content>
)
}
const basicDonutData = [
{ id: 1, count: 4000, segment: 'Other' },
{ id: 2, count: 6000, segment: 'Opera' },
{ id: 3, count: 10000, segment: 'Chrome' },
{ id: 4, count: 3000, segment: 'Brave' },
{ id: 5, count: 7000, segment: 'Safari' },
{ id: 6, count: 8000, segment: 'Firefox' },
{ id: 7, count: 1000, segment: 'Unknown' },
]
const args = {
metric: 'count',
metricLabel: 'Visitors',
segment: 'segment',
color: 'id',
hasDirectLabels: true,
holeRatio: 0.8,
}
return (
<>
<h2>Chart</h2>
<Chart data={basicDonutData}>
<Donut {...args}>
<ChartTooltip>{dialogContent}</ChartTooltip>
<ChartPopover width={150}>{dialogContent}</ChartPopover>
</Donut>
<Legend
title="Browsers"
position={'right'}
legendLabels={basicDonutData.map((d) => ({
label: d.segment,
seriesName: d.id,
}))}
highlight
isToggleable
/>
</Chart>
</>
)
}
export default PieChart {
"name": "AIODemoToolkit",
"version": "0.0.1",
"private": true,
"dependencies": {
"@adobe/aio-sdk": "^3.0.0",
"@adobe/exc-app": "^1.3.3",
"@adobe/generator-add-action-generic": "^0.2.9",
"@adobe/generator-app-excshell": "^0.2.4",
"@adobe/react-spectrum": "^3.34.1",
"@adobe/react-spectrum-charts": "^1.5.0",
"@adobe/react-spectrum-workflow": "^2.3.4",
"@faker-js/faker": "^8.3.1",
"@orama/orama": "^2.0.0-beta.3",
"@orama/plugin-data-persistence": "^2.0.0-beta.3",
"@spectrum-icons/illustrations": "^3.6.11",
"@spectrum-icons/workflow": "^4.2.10",
"core-js": "^3.6.4",
"node-fetch": "^2.6.0",
"openai": "^4.25.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.13",
"react-router-dom": "^5.2.0",
"react-syntax-highlighter": "^15.5.0",
"regenerator-runtime": "^0.13.5",
"vega": "^5.28.0",
"vega-lite": "^5.18.0"
},
"devDependencies": {
"@babel/core": "^7.8.7",
"@babel/plugin-transform-react-jsx": "^7.8.3",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"@openwhisk/wskdebug": "^1.3.0",
"jest": "^29"
},
"scripts": {
"test": "jest --passWithNoTests ./test",
"e2e": "jest --collectCoverage=false --testRegex ./e2e"
},
"engines": {
"node": "^14.18 || ^16.13 || >=18"
},
"aio-app-builder-templates": [
"@adobe/generator-app-excshell",
"@adobe/generator-add-action-generic"
]
}
|
I see. I need to go in and clarify in the docs better. Donut is currently in It's not a separate install, just an additional import. Give that a try and let me know if you have any other issues. I'll update the docs in the mean time. |
Ok the docs have been updated. Hopefully they are more useful now. Sorry for the confusion. |
Sorry for the delayed response. I haven't forgotten about you. I think I need to spend sometime testing our library in Parcel. In the mean time you can create the Donut component in your repository instead of trying to import. Donut is a pseudo component, meaning it doesn't actually do anything. Here is the code: https://github.com/adobe/react-spectrum-charts/blob/main/src/alpha/components/Donut/Donut.tsx Basically the RSC chart component looks at the children passed to it and builds out the chart accordingly. This is also known as a collection component. Because of this you can copy and paste the above component into your repo and pass that into |
You don't even need the destructured props, we just do that so that story book automatically picks up the props and their types, defaults etc. |
@pseudovar , I figured out what is causing your import issue.
|
Can you confirm whether or not this fixes your issue? |
Hi @marshallpete |
馃檵 Documentation Request
When following any of the examples in the documentation or storybook, the Donut chart throws an error. Happy to provide more details, but unsure if this is to be expected.
馃Б Your Company/Team
Adobe/Solution Consulting
The text was updated successfully, but these errors were encountered: