[docs] Use Netflix financial results to document bar charts

mui · Jul 26, 2024 · 458cf99 · 458cf99
1 parent 7660e16
commit 458cf99
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 30 deletions.
diff --git a/docs/data/charts/bars/BarGapNoSnap.js b/docs/data/charts/bars/BarGapNoSnap.js
@@ -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
@@ -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 }) => {

diff --git a/docs/data/charts/bars/StackBars.js b/docs/data/charts/bars/StackBars.js
@@ -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}
     />

diff --git a/docs/data/charts/bars/StackBars.tsx b/docs/data/charts/bars/StackBars.tsx
@@ -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}
     />

diff --git a/docs/data/charts/bars/StackBars.tsx.preview b/docs/data/charts/bars/StackBars.tsx.preview
@@ -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}
 />
diff --git a/docs/data/charts/bars/netflixsBalanceSheet.ts b/docs/data/charts/bars/netflixsBalanceSheet.ts
@@ -0,0 +1,80 @@
+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,
+  },
+];