Chart type cards

[designertyler]

Closes #1263

This adds the grouped bar (horizontal), stacked bar (horizontal), and pie chart tiles to the chart types page.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/carbon-website/6gvn9lopa
✅ Preview: https://carbon-website-git-fork-designertyler-chart-type-cards.carbon-design-system.vercel.app

[theiliad]

thank you @designertyler this is great!

#987 needs to be merged before this PR since links added in this PR need to point to the new demo link

[jeanservaas]

Hey @designertyler, totally fine with your artwork, but a couple of comments:

• can you do me a quick favor and clean up some of my old inconsistency — can we establish a consistent bottom margin for all of these tiles. I just noticed that some of them have a much smaller margin than others. Maybe we can pick a number like 72px, or 64px whatever works and make it consistent

• radar chart actually has a design now (it may also have code, we can ask elide) so we should enable it now (not have the disabled design)

• Remove "design only" tag off of stacked area

• Enable and add design only tag to tree map, heat map, parallel coordinates and stream chart

[theiliad]

Radar and stacked area are coming with other PRs

…

On Wed, Jun 10, 2020 at 4:25 PM jeanservaas ***@***.***> wrote: ***@***.**** commented on this pull request. Hey @designertyler <https://github.com/designertyler>, totally fine with your artwork, but a couple of comments: - can you do me a quick favor and clean up some of my old inconsistency — can we establish a consistent bottom margin for all of these tiles. I just noticed that some of them have a much smaller margin than others. Maybe we can pick a number like 72px, or 64px whatever works and make it consistent - radar chart actually has a design now (it may also have code, we can ask elide) so we should enable it now (not have the disabled design) - Remove "design only" tag off of stacked area - Enable and add design only tag to tree map, heat map, parallel coordinates and stream chart [image: image] <https://user-images.githubusercontent.com/43144260/84314636-64720880-ab36-11ea-84fa-41c2461024e0.png> [image: image] <https://user-images.githubusercontent.com/43144260/84314663-6f2c9d80-ab36-11ea-9029-4631152f29a0.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1270 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADSLT3BRMDLXGTJ6L6B4ZQTRV7T45ANCNFSM4NZVELOQ> .

[janchild]

@designertyler Could you please change the page description to the following:

Start by identifying the purpose of the visualization and then choose the appropriate chart type.

Thank you.

[jeanservaas]

Looks good, just take design tag off of these two, they're live now. And make the Gauge/meter just say Gauge.

We need to add a meter tile but we can do it in a separate PR. The code is not live yet.

[theiliad]

Good time for us to start creating a meter icon as well

[mjabbink]

@designertyler We need to get this wrapped.

For my understanding
— Make image tile for Meter (with design only tag)
— Remove tag from Gauge and stacked area chart
— Remove Stacked area chart content from Design only section (Only Meter to remain)

—Create a image card for Meter in another issue. Meter soon to be released.

Did I miss anything? Maybe Histogram? I believe that is in our near future.

[designertyler]

@mjabbink This PR was to just add the grouped bar (horizontal), stacked bar (horizontal), and pie chart tiles on the chart overview page. I think the other additions were being worked on when this was opened.

We do have an issue to make an image tile for meter here #1355 that would separate the meter/gauge tiles and remove the tags.

I'll get a PR opened to remove the duplicate content under "Design only" and the stacked area shouldn't have a tag on the Chart types page.

[mjabbink]

👍