From 182d4a3c97f1755c662385e604e82a6d94326756 Mon Sep 17 00:00:00 2001 From: Felipe Jacob Custodio Romero Date: Mon, 22 Jan 2024 22:27:22 +0100 Subject: [PATCH] [docs] Add legend and tooltip formatter demos --- .../AreaChart.demo.legendFormatter.tsx | 78 +++++++++++++++++++ .../AreaChart.demo.tooltipFormatter.tsx | 78 +++++++++++++++++++ .../AreaChart/AreaChart.demos.story.tsx | 10 +++ .../demos/src/demos/charts/AreaChart/index.ts | 2 + .../BarChart.demo.legendFormatter.tsx | 78 +++++++++++++++++++ .../BarChart.demo.tooltipFormatter.tsx | 76 ++++++++++++++++++ .../charts/BarChart/BarChart.demos.story.tsx | 10 +++ .../demos/src/demos/charts/BarChart/index.ts | 2 + .../LineChart.demo.legendFormatter.tsx | 78 +++++++++++++++++++ .../LineChart.demo.tooltipFormatter.tsx | 76 ++++++++++++++++++ .../LineChart/LineChart.demos.story.tsx | 10 +++ .../demos/src/demos/charts/LineChart/index.ts | 2 + 12 files changed, 500 insertions(+) create mode 100644 packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.legendFormatter.tsx create mode 100644 packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.tooltipFormatter.tsx create mode 100644 packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.legendFormatter.tsx create mode 100644 packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.tooltipFormatter.tsx create mode 100644 packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.legendFormatter.tsx create mode 100644 packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.tooltipFormatter.tsx 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 new file mode 100644 index 0000000000..af872674d1 --- /dev/null +++ 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 ( + { + 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 ( + { + 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 new file mode 100644 index 0000000000..1751b14775 --- /dev/null +++ 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 ( + { + switch (name) { + case 'Apples': + return [value, <>🍏]; + case 'Oranges': + return [value, <>🍊]; + case 'Tomatoes': + return [value, <>🍅]; + default: + return [value, <>{name}]; + } + }, + }} + /> + ); +} +`; + +function Demo() { + return ( + { + 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 index c05cb3b123..93958bd5c5 100644 --- 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 index e8a453ea9e..1abf95374d 100644 --- 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 new file mode 100644 index 0000000000..bb0e9ae96a --- /dev/null +++ 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 ( + { + 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 ( + { + 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 new file mode 100644 index 0000000000..90d0b7e9c8 --- /dev/null +++ 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 ( + { + switch (name) { + case 'Smartphones': + return [value, <>📱]; + case 'Laptops': + return [value, <>💻]; + case 'Tablets': + return [value, <>🖥️]; + default: + return [value, <>{name}]; + } + }, + }} + /> + ); +} +`; + +function Demo() { + return ( + { + 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 index 16f4e5cbb4..f3586ed0ff 100644 --- 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 index 0ee7c20f6b..714ce698b6 100644 --- 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'; diff --git a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.legendFormatter.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.legendFormatter.tsx new file mode 100644 index 0000000000..b46af69a75 --- /dev/null +++ b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.legendFormatter.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { LineChart } from '@mantine/charts'; +import { MantineDemo } from '@mantinex/demo'; +import { data, dataCode } from './_data'; + +const code = ` +import { LineChart } from '@mantine/charts'; +import { data } from './data'; + +function Demo() { + return ( + { + 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 ( + { + 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/LineChart/LineChart.demo.tooltipFormatter.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.tooltipFormatter.tsx new file mode 100644 index 0000000000..c62f25710c --- /dev/null +++ b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.tooltipFormatter.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { LineChart } from '@mantine/charts'; +import { MantineDemo } from '@mantinex/demo'; +import { data, dataCode } from './_data'; + +const code = ` +import { LineChart } from '@mantine/charts'; +import { data } from './data'; + +function Demo() { + return ( + { + switch (name) { + case 'Apples': + return [value, <>🍏]; + case 'Oranges': + return [value, <>🍊]; + case 'Tomatoes': + return [value, <>🍅]; + default: + return [value, <>{name}]; + } + }, + }} + /> + ); +} +`; + +function Demo() { + return ( + { + 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/LineChart/LineChart.demos.story.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demos.story.tsx index 700b8605a7..9d9612e42c 100644 --- a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demos.story.tsx +++ b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demos.story.tsx @@ -48,6 +48,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), @@ -88,6 +93,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/LineChart/index.ts b/packages/@docs/demos/src/demos/charts/LineChart/index.ts index 111b66411e..3defcbfc59 100644 --- a/packages/@docs/demos/src/demos/charts/LineChart/index.ts +++ b/packages/@docs/demos/src/demos/charts/LineChart/index.ts @@ -7,6 +7,7 @@ export { customTooltip } from './LineChart.demo.customTooltip'; export { dotProps } from './LineChart.demo.dotProps'; export { gridColor } from './LineChart.demo.gridColor'; export { legend } from './LineChart.demo.legend'; +export { legendFormatter } from './LineChart.demo.legendFormatter'; export { legendPosition } from './LineChart.demo.legendPosition'; export { lineDasharray } from './LineChart.demo.lineDasharray'; export { noTooltip } from './LineChart.demo.noTooltip'; @@ -15,6 +16,7 @@ export { strokeDasharray } from './LineChart.demo.strokeDasharray'; export { strokeWidth } from './LineChart.demo.strokeWidth'; export { sync } from './LineChart.demo.sync'; export { tooltipAnimation } from './LineChart.demo.tooltipAnimation'; +export { tooltipFormatter } from './LineChart.demo.tooltipFormatter'; export { unit } from './LineChart.demo.unit'; export { vertical } from './LineChart.demo.vertical'; export { xAxisOffset } from './LineChart.demo.xAxisOffset';