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

[docs] Use Netflix financial results to document bar charts #13991

Merged
merged 3 commits into from
Aug 13, 2024
+132 −30
Merged

[docs] Use Netflix financial results to document bar charts #13991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a272ad4
[docs] Use Netflix financial results to document bar charts
alexfauquette Jul 26, 2024
432de80
Merge remote-tracking branch 'upstream/master' into bar-dataset
alexfauquette Jul 29, 2024
bf9f814
Apply suggestions from code review
alexfauquette Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions docs/data/charts/bars/BarGapNoSnap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { BarChart } from '@mui/x-charts/BarChart';
import { balanceSheet, addLabels } from './netflixsBalanceSheet';

const series = addLabels([
{ dataKey: 'totAss' },
{ dataKey: 'totLia', stack: 'passive' },
{ dataKey: 'totEq', stack: 'passive' },
]);

const series = [
{ data: [1, 5, 2], stack: 'a' },
{ data: [2, 3, 4], stack: 'a' },
{ data: [3, 2, 3], stack: 'b' },
{ data: [8, 3, 6], stack: 'b' },
{ data: [11, 6, 9] },
];
export default function BarGapNoSnap() {
return (
<ChartsUsageDemo
Expand All @@ -33,18 +33,21 @@ export default function BarGapNoSnap() {
]}
renderDemo={(props) => (
<BarChart
dataset={balanceSheet}
series={series}
width={500}
height={300}
margin={{ top: 5 }}
margin={{ top: 15 }}
xAxis={[
{
scaleType: 'band',
data: ['Page 1', 'Page 2', 'Page 3'],
dataKey: 'year',
categoryGapRatio: props.categoryGapRatio,
barGapRatio: props.barGapRatio,
},
]}
yAxis={[{ valueFormatter: (v) => `$ ${v / 1000000}B` }]}
slotProps={{ legend: { hidden: true } }}
/>
)}
getCode={({ props }) => {
Expand Down
20 changes: 13 additions & 7 deletions docs/data/charts/bars/StackBars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import { addLabels, balanceSheet } from './netflixsBalanceSheet';

export default function StackBars() {
return (
<BarChart
series={[
{ data: [3, 4, 1, 6, 5], stack: 'A', label: 'Series A1' },
{ data: [4, 3, 1, 5, 8], stack: 'A', label: 'Series A2' },
{ data: [4, 2, 5, 4, 1], stack: 'B', label: 'Series B1' },
{ data: [2, 8, 1, 3, 1], stack: 'B', label: 'Series B2' },
{ data: [10, 6, 5, 8, 9], label: 'Series C1' },
]}
dataset={balanceSheet}
series={addLabels([
{ dataKey: 'currAss', stack: 'assets' },
{ dataKey: 'nCurrAss', stack: 'assets' },
{ dataKey: 'curLia', stack: 'liability' },
{ dataKey: 'nCurLia', stack: 'liability' },
{ dataKey: 'capStock', stack: 'equity' },
{ dataKey: 'retEarn', stack: 'equity' },
{ dataKey: 'treas', stack: 'equity' },
])}
xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
slotProps={{ legend: { hidden: true } }}
Copy link
Member

Choose a reason for hiding this comment

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

Do we need to remove it? Seems like it could be helpful for the user to understand how the charts work 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

The legend started to take too much space compared to the feature to display

image

width={600}
height={350}
/>
Expand Down
20 changes: 13 additions & 7 deletions docs/data/charts/bars/StackBars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import { addLabels, balanceSheet } from './netflixsBalanceSheet';

export default function StackBars() {
return (
<BarChart
series={[
{ data: [3, 4, 1, 6, 5], stack: 'A', label: 'Series A1' },
{ data: [4, 3, 1, 5, 8], stack: 'A', label: 'Series A2' },
{ data: [4, 2, 5, 4, 1], stack: 'B', label: 'Series B1' },
{ data: [2, 8, 1, 3, 1], stack: 'B', label: 'Series B2' },
{ data: [10, 6, 5, 8, 9], label: 'Series C1' },
]}
dataset={balanceSheet}
series={addLabels([
{ dataKey: 'currAss', stack: 'assets' },
{ dataKey: 'nCurrAss', stack: 'assets' },
{ dataKey: 'curLia', stack: 'liability' },
{ dataKey: 'nCurLia', stack: 'liability' },
{ dataKey: 'capStock', stack: 'equity' },
{ dataKey: 'retEarn', stack: 'equity' },
{ dataKey: 'treas', stack: 'equity' },
])}
xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
slotProps={{ legend: { hidden: true } }}
width={600}
height={350}
/>
Expand Down
19 changes: 12 additions & 7 deletions docs/data/charts/bars/StackBars.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<BarChart
series={[
{ data: [3, 4, 1, 6, 5], stack: 'A', label: 'Series A1' },
{ data: [4, 3, 1, 5, 8], stack: 'A', label: 'Series A2' },
{ data: [4, 2, 5, 4, 1], stack: 'B', label: 'Series B1' },
{ data: [2, 8, 1, 3, 1], stack: 'B', label: 'Series B2' },
{ data: [10, 6, 5, 8, 9], label: 'Series C1' },
]}
dataset={balanceSheet}
series={addLabels([
{ dataKey: 'currAss', stack: 'assets' },
{ dataKey: 'nCurrAss', stack: 'assets' },
{ dataKey: 'curLia', stack: 'liability' },
{ dataKey: 'nCurLia', stack: 'liability' },
{ dataKey: 'capStock', stack: 'equity' },
{ dataKey: 'retEarn', stack: 'equity' },
{ dataKey: 'treas', stack: 'equity' },
])}
xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
slotProps={{ legend: { hidden: true } }}
width={600}
height={350}
/>
82 changes: 82 additions & 0 deletions docs/data/charts/bars/netflixsBalanceSheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// Data from https://finance.yahoo.com/quote/NFLX/financials/

const translations = {
totAss: 'Total Assets',
currAss: 'Current Assets',
nCurrAss: 'non-Current Assets',
totLia: 'Total Liabilities',
curLia: 'Current Liabilities',
nCurLia: 'non-Current Liabilities',
totEq: 'Total Equity',
capStock: 'Capital Stock',
retEarn: 'Retained Earning',
treas: 'Treasury',
nonAffect: 'non Affected',
} as const;

export function addLabels<T extends { dataKey: keyof typeof translations }>(series: T[]) {
return series.map((item) => ({
...item,
label: translations[item.dataKey],
valueFormatter: (v: number | null) => (v ? `$ ${v.toLocaleString()}k` : '-'),
}));
}

export const balanceSheet = [
{
year: '2020',
totAss: 39280359,
currAss: 9761580,
nCurrAss: 29518779,
totLia: 28215119,
curLia: 7805785,
nCurLia: 20409334,
totEq: 11065240,
capStock: 3447698,
retEarn: 7573144,
treas: null,
nonAffect: 44398,
},
{
year: '2021',
totAss: 44584663,
currAss: 8069825,
nCurrAss: 36514838,
totLia: 28735415,
curLia: 8488966,
nCurLia: 20246449,
totEq: 15849248,
capStock: 4024561,
retEarn: 12689372,
treas: 824190,
nonAffect: -40495,
},
{
year: '2022',
totAss: 48594768,
currAss: 9266473,
nCurrAss: 39328295,
totLia: 27817367,
curLia: 7930974,
nCurLia: 19886393,
totEq: 20777401,
capStock: 4637601,
retEarn: 17181296,
treas: 824190,
nonAffect: -217306,
},
{
year: '2023',
totAss: 48731992,
currAss: 9918133,
nCurrAss: 38813859,
totLia: 28143679,
curLia: 8860655,
nCurLia: 19283024,
totEq: 20588313,
capStock: 5145172,
retEarn: 22589286,
treas: 6922200,
nonAffect: -223945,
},
];