[docs] Add legend and tooltip formatter demos

nfits · Jan 22, 2024 · 182d4a3 · 182d4a3
1 parent 114be9d
commit 182d4a3
Show file tree

Hide file tree

Showing 12 changed files with 500 additions and 0 deletions.
diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.legendFormatter.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.legendFormatter.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { AreaChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { AreaChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <AreaChart
+      h={300}
+      data={data}
+      dataKey="date"
+      withLegend
+      legendProps={{
+        formatter: (value) => {
+          switch (value) {
+            case 'Apples':
+              return <>🍏</>;
+            case 'Oranges':
+              return <>🍊</>;
+            case 'Tomatoes':
+              return <>🍅</>;
+            default:
+              return <>{value}</>;
+          }
+        },
+      }}
+      series={[
+        { name: 'Apples', color: 'indigo.6' },
+        { name: 'Oranges', color: 'blue.6' },
+        { name: 'Tomatoes', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <AreaChart
+      h={300}
+      data={data}
+      dataKey="date"
+      withLegend
+      legendProps={{
+        formatter: (value) => {
+          switch (value) {
+            case 'Apples':
+              return <>🍏</>;
+            case 'Oranges':
+              return <>🍊</>;
+            case 'Tomatoes':
+              return <>🍅</>;
+            default:
+              return <>{value}</>;
+          }
+        },
+      }}
+      series={[
+        { name: 'Apples', color: 'indigo.6' },
+        { name: 'Oranges', color: 'blue.6' },
+        { name: 'Tomatoes', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+
+export const legendFormatter: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};
diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.tooltipFormatter.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.tooltipFormatter.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { AreaChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { AreaChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <AreaChart
+      h={300}
+      data={data}
+      dataKey="date"
+      type="stacked"
+      series={[
+        { name: 'Apples', color: 'indigo.6' },
+        { name: 'Oranges', color: 'blue.6' },
+        { name: 'Tomatoes', color: 'teal.6' },
+      ]}
+      tooltipProps={{
+        formatter: (value, name) => {
+          switch (name) {
+            case 'Apples':
+              return [value, <>🍏</>];
+            case 'Oranges':
+              return [value, <>🍊</>];
+            case 'Tomatoes':
+              return [value, <>🍅</>];
+            default:
+              return [value, <>{name}</>];
+          }
+        },
+      }}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <AreaChart
+      h={300}
+      data={data}
+      dataKey="date"
+      type="stacked"
+      series={[
+        { name: 'Apples', color: 'indigo.6' },
+        { name: 'Oranges', color: 'blue.6' },
+        { name: 'Tomatoes', color: 'teal.6' },
+      ]}
+      tooltipProps={{
+        formatter: (value, name) => {
+          switch (name) {
+            case 'Apples':
+              return [value, <>🍏</>];
+            case 'Oranges':
+              return [value, <>🍊</>];
+            case 'Tomatoes':
+              return [value, <>🍅</>];
+            default:
+              return [value, <>{name}</>];
+          }
+        },
+      }}
+    />
+  );
+}
+
+export const tooltipFormatter: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};
diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demos.story.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demos.story.tsx
@@ -23,6 +23,11 @@ export const Demo_legend = {
   render: renderDemo(demos.legend),
 };
 
+export const Demo_legendFormatter = {
+  name: '⭐ Demo: legendFormatter',
+  render: renderDemo(demos.legendFormatter),
+};
+
 export const Demo_legendPosition = {
   name: '⭐ Demo: legendPosition',
   render: renderDemo(demos.legendPosition),
@@ -43,6 +48,11 @@ export const Demo_tooltipAnimation = {
   render: renderDemo(demos.tooltipAnimation),
 };
 
+export const Demo_tooltipFormatter = {
+  name: '⭐ Demo: tooltipFormatter',
+  render: renderDemo(demos.tooltipFormatter),
+};
+
 export const Demo_unit = {
   name: '⭐ Demo: unit',
   render: renderDemo(demos.unit),

diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/index.ts b/packages/@docs/demos/src/demos/charts/AreaChart/index.ts
@@ -2,10 +2,12 @@ export { stacked } from './AreaChart.demo.stacked';
 export { percent } from './AreaChart.demo.percent';
 export { usage } from './AreaChart.demo.usage';
 export { legend } from './AreaChart.demo.legend';
+export { legendFormatter } from './AreaChart.demo.legendFormatter';
 export { legendPosition } from './AreaChart.demo.legendPosition';
 export { strokeDasharray } from './AreaChart.demo.strokeDasharray';
 export { color } from './AreaChart.demo.color';
 export { tooltipAnimation } from './AreaChart.demo.tooltipAnimation';
+export { tooltipFormatter } from './AreaChart.demo.tooltipFormatter';
 export { unit } from './AreaChart.demo.unit';
 export { colorSchemeColor } from './AreaChart.demo.colorSchemeColor';
 export { customTooltip } from './AreaChart.demo.customTooltip';

diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.legendFormatter.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.legendFormatter.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { BarChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      withLegend
+      legendProps={{
+        formatter: (value) => {
+          switch (value) {
+            case 'Smartphones':
+              return <>📱</>;
+            case 'Laptops':
+              return <>💻</>;
+            case 'Tablets':
+              return <>🖥️</>;
+            default:
+              return <>{value}</>;
+          }
+        },
+      }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      withLegend
+      legendProps={{
+        formatter: (value) => {
+          switch (value) {
+            case 'Smartphones':
+              return <>📱</>;
+            case 'Laptops':
+              return <>💻</>;
+            case 'Tablets':
+              return <>🖥️</>;
+            default:
+              return <>{value}</>;
+          }
+        },
+      }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+
+export const legendFormatter: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};
diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.tooltipFormatter.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.tooltipFormatter.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { BarChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+      tooltipProps={{
+        formatter: (value, name) => {
+          switch (name) {
+            case 'Smartphones':
+              return [value, <>📱</>];
+            case 'Laptops':
+              return [value, <>💻</>];
+            case 'Tablets':
+              return [value, <>🖥️</>];
+            default:
+              return [value, <>{name}</>];
+          }
+        },
+      }}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+      tooltipProps={{
+        formatter: (value, name) => {
+          switch (name) {
+            case 'Smartphones':
+              return [value, <>📱</>];
+            case 'Laptops':
+              return [value, <>💻</>];
+            case 'Tablets':
+              return [value, <>🖥️</>];
+            default:
+              return [value, <>{name}</>];
+          }
+        },
+      }}
+    />
+  );
+}
+
+export const tooltipFormatter: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};
diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demos.story.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demos.story.tsx
@@ -38,6 +38,11 @@ export const Demo_legend = {
   render: renderDemo(demos.legend),
 };
 
+export const Demo_legendFormatter = {
+  name: '⭐ Demo: legendFormatter',
+  render: renderDemo(demos.legendFormatter),
+};
+
 export const Demo_legendPosition = {
   name: '⭐ Demo: legendPosition',
   render: renderDemo(demos.legendPosition),
@@ -68,6 +73,11 @@ export const Demo_tooltipAnimation = {
   render: renderDemo(demos.tooltipAnimation),
 };
 
+export const Demo_tooltipFormatter = {
+  name: '⭐ Demo: tooltipFormatter',
+  render: renderDemo(demos.tooltipFormatter),
+};
+
 export const Demo_unit = {
   name: '⭐ Demo: unit',
   render: renderDemo(demos.unit),

diff --git a/packages/@docs/demos/src/demos/charts/BarChart/index.ts b/packages/@docs/demos/src/demos/charts/BarChart/index.ts
@@ -5,12 +5,14 @@ export { colorSchemeColor } from './BarChart.demo.colorSchemeColor';
 export { customTooltip } from './BarChart.demo.customTooltip';
 export { gridColor } from './BarChart.demo.gridColor';
 export { legend } from './BarChart.demo.legend';
+export { legendFormatter } from './BarChart.demo.legendFormatter';
 export { legendPosition } from './BarChart.demo.legendPosition';
 export { noTooltip } from './BarChart.demo.noTooltip';
 export { referenceLines } from './BarChart.demo.referenceLines';
 export { strokeDasharray } from './BarChart.demo.strokeDasharray';
 export { sync } from './BarChart.demo.sync';
 export { tooltipAnimation } from './BarChart.demo.tooltipAnimation';
+export { tooltipFormatter } from './BarChart.demo.tooltipFormatter';
 export { unit } from './BarChart.demo.unit';
 export { xAxisOffset } from './BarChart.demo.xAxisOffset';
 export { yScale } from './BarChart.demo.yScale';