Skip to content
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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Charts): Add the Data Visualization tab with pages Getting Started, Chart Types, and Chart Demos. Add new examples in the storybook. #1544

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

feat(Charts): Add the Data Visualization tab with pages Getting Started, Chart Types, and Chart Demos. Add new examples in the storybook. #1544

wants to merge 8 commits into from

Conversation

nikitaorliak-cengage
Copy link
Collaborator

Issue: #1172
Issue: #1054
Issue: #1055
Issue: #1056

What I did

Add the Data Visualization tab with pages Getting Started, Chart Types, and Chart Demos. Add new examples in the storybook.

Screenshots:

Checklist

  • changeset has been added
  • Pull request description is descriptive
  • I have made corresponding changes to the documentation
  • New and existing unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works

How to test

Open documentation -> Open Data Visualization -> Check new pages.
Open storybook -> Open Charts folder -> Check new examples.

feat(Charts): Add the Data Visualization tab with pages `Getting St…
2fad90a 
…arted`, `Chart Types` and `Chart Demos`. Add new examples in the storybook.
@nikitaorliak-cengage nikitaorliak-cengage added the ready for review Pull requests that are ready for developer review label Nov 12, 2024
@nikitaorliak-cengage nikitaorliak-cengage self-assigned this Nov 12, 2024
@nikitaorliak-cengage nikitaorliak-cengage linked an issue Nov 12, 2024 that may be closed by this pull request
Magma Charts Documentation #1172
Open
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Nov 12, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: a48cbb2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@react-magma/charts Minor
react-magma-docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

silvalaura
silvalaura reviewed Nov 12, 2024
View reviewed changes
website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-types.css Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-types.mdx Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-types.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx Outdated

<MagmaChartsSiteLink />

export const MoreDemoesLink = ({ number, path }) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export const MoreDemoesLink = ({ number, path }) => (
export const MoreDemosLink = ({ number, path }) => (

packages/charts/src/components/CarbonChart/CarbonChart.tsx
Comment on lines +479 to +486
radar: RadarChart,
boxplot: BoxplotChart,
bubble: BubbleChart,
bullet: BulletChart,
gauge: GaugeChart,
histogram: HistogramChart,
meter: MeterChart,
scatter: ScatterChart,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will need to go through all of these charts and update the custom styles. @orion-cengage will need to review them and provide feedback.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also merge as is (after the release) and use the separate tickets to address the styling.

@silvalaura silvalaura added the needs design feedback Waiting for Design approval or feedback label Nov 12, 2024
@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

silvalaura
silvalaura reviewed Nov 12, 2024
View reviewed changes
Copy link
Collaborator

@silvalaura silvalaura left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something cause the styles to get messed up 😿

image

.changeset/feat-add-new-charts.md Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-types.mdx Outdated Show resolved Hide resolved
website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx Show resolved Hide resolved
@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@silvalaura
Copy link
Collaborator

I noticed this is now appearing on the sidebar:
image

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@silvalaura
Copy link
Collaborator

The files are still appearing on the left hand menu

@orion-cengage
Copy link
Contributor

The left menu does not currently reflect what I have in the designs.

  • There shouldn't be little subheadings for "INTRO" and "API."
  • "Chart Demos" and "Chart Types" should be swapped around.

image

@orion-cengage
Copy link
Contributor

orion-cengage commented Dec 4, 2024 •
edited
Loading

  • The "View Demo" buttons don't appear to be proper Magma buttons. The font is wrong and the focus style is completely different.
  • They also aren't linking properly to the demos on the next page. The URL looks correct once it gets you to the "Chart Demos" page, but it isn't actually scrolling down to the chart you clicked on.

image
image

@orion-cengage
Copy link
Contributor

On the Chart Types page, within the cards: The paragraphs are not the correct dark gray color.

  • Currently: #161616 (rgb 22, 22, 22)
  • Should be #454545 (rgb 69, 69, 69)

image

@orion-cengage
Copy link
Contributor

Can we figure out a way to make sure the gray background doesn't spill out of the cards and mess up the rounded corners?

image

image

@orion-cengage
Copy link
Contributor

orion-cengage commented Dec 4, 2024 •
edited
Loading

Chart Demos page: Some of the numbers in the links for "## more demos" aren't accurate.

  • Area (Simple) = 4 more demos
  • Area (Stacked) = 2 more demos
  • Bar (Grouped) = 8 more demos (also the link is currently broken)
  • Bar (Stacked) = 9 more demos
  • Line = 5 more demos (also the link is currently broken)

image

If there is only 1 more demo, can we change the label to say "1 more demo" instead of the plural "demos"?
image

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://docs-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

🚀 Deployed on https://storybook-preview-1544--upbeat-sinoussi-f675aa.netlify.app

@silvalaura silvalaura removed the ready for review Pull requests that are ready for developer review label Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@silvalaura silvalaura silvalaura approved these changes

@orion-cengage orion-cengage Awaiting requested review from orion-cengage

Assignees

@nikitaorliak-cengage nikitaorliak-cengage

Labels
needs design feedback Waiting for Design approval or feedback
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Magma Charts Documentation
3 participants
@nikitaorliak-cengage @silvalaura @orion-cengage