Skip to content

Sankey diagram: Support number formatting#31113

Merged
AtishayMsft merged 5 commits into
microsoft:masterfrom
LaxmiBhavaniM:numformatter-4-18
Apr 23, 2024
Merged

Sankey diagram: Support number formatting#31113
AtishayMsft merged 5 commits into
microsoft:masterfrom
LaxmiBhavaniM:numformatter-4-18

Conversation

@LaxmiBhavaniM

@LaxmiBhavaniM LaxmiBhavaniM commented Apr 19, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Previous Behavior

  1. Sankey diagram would display large numbers as-is which may not be reader friendly.
    image

  2. Sankey diagram doesn't support any units to be displayed alongside the counts.

New Behavior

  1. Sankey diagram now has the capability for caller to specify a new optional prop called formatNumberOptions of type Intl.NumberFormatOptions, to configure the display format for the node and link values.
    For example,
      const formatNumberOptions: Intl.NumberFormatOptions = {
            maximumFractionDigits: 2,
            notation: 'compact',
            compactDisplay: 'short',
          }; 
      
      <SankeyChart
          data={data}
          height={500}
          width={800}
          strings={strings}
          formatNumberOptions={formatNumberOptions}
        />,

would generate the following SankeyChart with shortened counts for large numbers.
image

  1. With this new formatNumberOptions prop, we can also configure units to display alongside the node and link values
    For example,
      const formatNumberOptions: Intl.NumberFormatOptions = {
          style: 'percent',
        };
      <SankeyChart
          data={data}
          height={500}
          width={800}
          strings={strings}
          formatNumberOptions={formatNumberOptions}
        />,

would generate the following SankeyChart with % appended to the node and link values.
image

Related Issue(s)

  • Fixes #

@LaxmiBhavaniM LaxmiBhavaniM requested a review from a team as a code owner April 19, 2024 00:54
@codesandbox-ci

codesandbox-ci Bot commented Apr 19, 2024 •
edited
Loading

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@AtishayMsft

AtishayMsft commented Apr 19, 2024

Copy link
Copy Markdown
Contributor

/azp run

@azure-pipelines

azure-pipelines Bot commented Apr 19, 2024

Copy link
Copy Markdown
Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam

fabricteam commented Apr 19, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

✅ No changes found

AtishayMsft
AtishayMsft reviewed Apr 19, 2024
View reviewed changes
Comment thread packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx Outdated
AtishayMsft
AtishayMsft reviewed Apr 19, 2024
View reviewed changes
Comment thread packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx Outdated
AtishayMsft
AtishayMsft reviewed Apr 19, 2024
View reviewed changes
Comment thread packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx Outdated
@AtishayMsft

AtishayMsft commented Apr 23, 2024

Copy link
Copy Markdown
Contributor

/azp run

@azure-pipelines

azure-pipelines Bot commented Apr 23, 2024

Copy link
Copy Markdown
Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam

fabricteam commented Apr 23, 2024

Copy link
Copy Markdown
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@AtishayMsft AtishayMsft merged commit 120868a into microsoft:master Apr 23, 2024
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 23, 2024
@marcosmoura
Merge branch 'master' into feat/react-drawer/move-scroll-to-contex
456e2bf 
* master: (416 commits)
  fix: remove relative imports within stories which are invalid for creating 'show docs' and circular dep imports from cypress files (microsoft#31087)
  Fix overlapping bars on continuous axes (microsoft#31035)
  feat(scripts-tasks): implement ~36% faster type-check task (microsoft#31116)
  feat(workspace-plugin): implement split-library-in-two migration generator (microsoft#31086)
  applying package updates
  Sankey diagram: Support number formatting (microsoft#31113)
  Fix wrong position of hover callout in case of single data AreaChart (microsoft#30256)
  Combobox filtering bug fix (microsoft#31141)
  chore(react-tag-picker): adds text elliptical clipping example (microsoft#31114)
  docs: command cheat sheet (microsoft#30685)
  chore: refactor tests for createPresenceComponent() (microsoft#31137)
  Stable Release: TeachingPopover (microsoft#31112)
  applying package updates
  fix: SpinButton buttons now show correct visuals at bounds (microsoft#31126)
  feat: add accessibility docs to Link about color/underlines (microsoft#31121)
  fix: Table and DataGrid should not remove cells from the accessibility tree (microsoft#31068)
  Add shadow DOM support to `@fluentui/react` (Fluent v8) (microsoft#30689)
  fix(react-swatch-picker): fixes after bug bash (microsoft#31097)
  feat: unify v9 babel preset in all packages (microsoft#31088)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 23, 2024
@marcosmoura
Merge branch 'master' into feat/react-drawer/move-scroll-to-context
033678b 
* master: (416 commits)
  fix: remove relative imports within stories which are invalid for creating 'show docs' and circular dep imports from cypress files (microsoft#31087)
  Fix overlapping bars on continuous axes (microsoft#31035)
  feat(scripts-tasks): implement ~36% faster type-check task (microsoft#31116)
  feat(workspace-plugin): implement split-library-in-two migration generator (microsoft#31086)
  applying package updates
  Sankey diagram: Support number formatting (microsoft#31113)
  Fix wrong position of hover callout in case of single data AreaChart (microsoft#30256)
  Combobox filtering bug fix (microsoft#31141)
  chore(react-tag-picker): adds text elliptical clipping example (microsoft#31114)
  docs: command cheat sheet (microsoft#30685)
  chore: refactor tests for createPresenceComponent() (microsoft#31137)
  Stable Release: TeachingPopover (microsoft#31112)
  applying package updates
  fix: SpinButton buttons now show correct visuals at bounds (microsoft#31126)
  feat: add accessibility docs to Link about color/underlines (microsoft#31121)
  fix: Table and DataGrid should not remove cells from the accessibility tree (microsoft#31068)
  Add shadow DOM support to `@fluentui/react` (Fluent v8) (microsoft#30689)
  fix(react-swatch-picker): fixes after bug bash (microsoft#31097)
  feat: unify v9 babel preset in all packages (microsoft#31088)
  applying package updates
  ...
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
@LaxmiBhavaniM @laxmi2357 @miroslavstastny
Sankey diagram: Support number formatting (microsoft#31113)
3a9bbf2 
Co-authored-by: Laxmi Bhavani Malkareddy <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AtishayMsft AtishayMsft AtishayMsft approved these changes

Assignees

No one assigned

Labels

Package: charting

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@LaxmiBhavaniM @AtishayMsft @fabricteam @laxmi2357