Skip to content

Commit 0e8f332

Browse files
PavelVanecekPavelVanecek
authored
Add example describing alternatives for activeIndex (#358)
1 parent 8351425 commit 0e8f332

File tree

5 files changed

+159
-18
lines changed

5 files changed

+159
-18
lines changed

‎src/components/GuideView/ActiveIndex.tsx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { Link } from 'react-router';
2+
import { Bar, BarChart, Pie, PieChart, Tooltip } from 'recharts';
3+
import { SupportedLocale } from '../../locale';
4+
import { TargetBlankLink } from '../Shared/TargetBlankLink.tsx';
5+
import Highlight from '../../utils/Highlight.tsx';
6+
7+
export function ActiveIndex({ locale }: { locale: SupportedLocale }) {
8+
return (
9+
<article>
10+
<h1>Active Index</h1>
11+
<p>
12+
Recharts 2.x used to have a prop named <code>activeIndex</code> that was setting which item the user was
13+
interacting with. In version 3.0, this prop has been removed.
14+
</p>
15+
<h2>Why?</h2>
16+
<p>
17+
Trouble is that this prop was already set internally - by Tooltip component. Things behaved weird when both the
18+
activeIndex and Tooltip were set. Unpredictable!
19+
</p>
20+
<h2>What should I do instead?</h2>
21+
<p>
22+
<Link to={`/${locale}/api/Tooltip`}>Tooltip</Link> component is controlling user interaction with the chart. Use
23+
Tooltip!
24+
</p>
25+
<p>Tooltip has several props that allow you to control the interaction in detail:</p>
26+
<ul>
27+
<li>
28+
<code>defaultIndex</code>: Sets the initial index of the item that is highlighted when the chart is rendered,
29+
before any user interactions
30+
</li>
31+
<li>
32+
<code>active</code>: If true, the tooltip remains active even when the user interaction has completed (for
33+
example, when user hovers over a different item)
34+
</li>
35+
<li>
36+
<code>content</code>: This prop decides what content is displayed in the tooltip. You can turn off the
37+
rendering completely by passing <code>{`content={() => null}`}</code>.
38+
</li>
39+
<li>
40+
<code>cursor</code>: Is what renders in the plot area, to draw attention to the item that is being interacted
41+
with. You can turn it off by passing <code>cursor={false}</code>.
42+
</li>
43+
</ul>
44+
<h2>Example 1: PieChart with default index</h2>
45+
<p>
46+
The example below shows how to use the <code>defaultIndex</code> prop to set the initial item that is
47+
highlighted when the chart is rendered.
48+
</p>
49+
<p>
50+
Also see{' '}
51+
<TargetBlankLink href="https://github.com/recharts/recharts/issues/5999">
52+
GitHub issue #5999 for discussion.
53+
</TargetBlankLink>
54+
</p>
55+
<PieChart width={400} height={400}>
56+
<Pie
57+
activeShape={{
58+
fill: 'red',
59+
}}
60+
data={[
61+
{ name: 'Page A', uv: 590 },
62+
{ name: 'Page B', uv: 590 },
63+
{ name: 'Page C', uv: 868 },
64+
]}
65+
dataKey="uv"
66+
/>
67+
<Tooltip defaultIndex={2} />
68+
</PieChart>
69+
<Highlight className="jsx">
70+
{`import { Pie, PieChart, Tooltip } from 'recharts';
71+
72+
<PieChart width={400} height={400}>
73+
<Pie
74+
activeShape={{
75+
fill: 'red',
76+
}}
77+
data={[
78+
{ name: 'Page A', uv: 590 },
79+
{ name: 'Page B', uv: 590 },
80+
{ name: 'Page C', uv: 868 },
81+
]}
82+
dataKey="uv"
83+
/>
84+
<Tooltip defaultIndex={2} />
85+
</PieChart>`}
86+
</Highlight>
87+
<p>
88+
<TargetBlankLink href="https://main--63da8268a0da9970db6992aa.chromatic.com/?path=/story/api-chart-piechart--simple">
89+
View this example in Storybook
90+
</TargetBlankLink>
91+
</p>
92+
<h2>Example 2: BarChart with clickable items and hidden tooltip</h2>
93+
<p>
94+
The example below shows how to use the <code>trigger</code> prop to highlight the item that is being clicked,
95+
and how to hide the tooltip by passing <code>{`content={() => null}`}</code> and <code>{`cursor={false}`}</code>
96+
.
97+
</p>
98+
<p>
99+
Also see{' '}
100+
<TargetBlankLink href="https://github.com/recharts/recharts/issues/6047">
101+
GitHub issue #6047 for discussion.
102+
</TargetBlankLink>
103+
</p>
104+
<BarChart
105+
width={550}
106+
height={240}
107+
data={[
108+
{ name: 'Page A', uv: 590 },
109+
{ name: 'Page B', uv: 290 },
110+
{ name: 'Page C', uv: 868 },
111+
]}
112+
>
113+
<Tooltip trigger="click" content={() => null} cursor={false} shared={false} />
114+
<Bar dataKey="uv" stackId="a" fill="green" activeBar={{ stroke: 'black', strokeWidth: 7 }} />
115+
</BarChart>
116+
<Highlight className="jsx">
117+
{`import { Bar, BarChart, Tooltip } from 'recharts';
118+
119+
<BarChart
120+
width={550}
121+
height={240}
122+
data={[
123+
{ name: 'Page A', uv: 590 },
124+
{ name: 'Page B', uv: 290 },
125+
{ name: 'Page C', uv: 868 },
126+
]}
127+
>
128+
<Tooltip trigger="click" content={() => null} cursor={false} shared={false} />
129+
<Bar dataKey="uv" stackId="a" fill="green" activeBar={{ stroke: 'black', strokeWidth: 7 }} />
130+
</BarChart>`}
131+
</Highlight>
132+
</article>
133+
);
134+
}

‎src/locale/en-US.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const map = {
4242
installation: 'Installation',
4343
'getting-started': 'Getting Started',
4444
customize: 'Customize',
45+
activeIndex: 'Active Index',
4546
},
4647
installation: {
4748
installation: 'Installation',

‎src/locale/zh-CN.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const map = {
4242
installation: '安装',
4343
'getting-started': '起步',
4444
customize: '组件自定义',
45+
activeIndex: '活动索引',
4546
},
4647
installation: {
4748
installation: '安装',

‎src/styles/container.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
.container {
2-
}
3-
41
header {
52
width: 100%;
63
background-color: #fcfcfc;
@@ -130,6 +127,7 @@ footer {
130127
min-width: 1200px;
131128
padding-left: 300px;
132129

130+
h1,
133131
.page-title {
134132
padding-top: 30px;
135133
margin-bottom: 30px;
@@ -138,6 +136,7 @@ footer {
138136
color: $gray-dark;
139137
}
140138

139+
h2,
141140
.sub-title {
142141
height: 40px;
143142
line-height: 40px;
@@ -146,6 +145,7 @@ footer {
146145
border-bottom: 1px solid $gray-lighter;
147146
}
148147

148+
p,
149149
.paragraph-title {
150150
margin: 20px 0;
151151
}

‎src/views/GuideView.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
1-
import { PureComponent } from 'react';
1+
import { ComponentType, PureComponent } from 'react';
22
import { Link } from 'react-router';
33
import { Installation, GettingStarted, Customize } from '../components/GuideView';
44
import { getLocaleType, localeGet } from '../utils/LocaleUtils.ts';
55
import { SupportedLocale } from '../locale';
66
import { RouteComponentProps, withRouter } from '../routes/withRouter.tsx';
7+
import { ActiveIndex } from '../components/GuideView/ActiveIndex.tsx';
78

8-
const modules = ['installation', 'getting-started', 'customize'];
9+
const guideMap: Record<string, ComponentType<{ locale: SupportedLocale }>> = {
10+
installation: Installation,
11+
'getting-started': GettingStarted,
12+
customize: Customize,
13+
activeIndex: ActiveIndex,
14+
};
915

10-
function renderGuide(locale: SupportedLocale, page: string) {
11-
if (page === 'installation') {
12-
return <Installation locale={locale} />;
13-
}
14-
if (page === 'getting-started') {
15-
return <GettingStarted locale={locale} />;
16-
}
17-
if (page === 'customize') {
18-
return <Customize locale={locale} />;
16+
const allGuides = Object.keys(guideMap);
17+
18+
function Guide({ locale, page }: { locale: SupportedLocale; page: string }) {
19+
const GuideComponent = guideMap[page];
20+
if (GuideComponent) {
21+
return <GuideComponent locale={locale} />;
1922
}
2023
return null;
2124
}
2225

2326
class GuideView extends PureComponent<RouteComponentProps> {
2427
render() {
2528
const { params } = this.props;
26-
const page = params?.name ?? modules[0];
29+
const page = params?.name ?? allGuides[0];
2730

2831
const locale = getLocaleType(this.props);
2932

@@ -33,8 +36,8 @@ class GuideView extends PureComponent<RouteComponentProps> {
3336
<div className="sidebar-cate">
3437
<h2>{localeGet(locale, 'guide', 'guide')}</h2>
3538
<ul className="menu">
36-
{modules.map((entry, index) => (
37-
<li key={`item-${index}`}>
39+
{allGuides.map((entry) => (
40+
<li key={entry}>
3841
<Link to={`/${locale}/guide/${entry}`} className={entry === page ? 'active' : ''}>
3942
{localeGet(locale, 'guide', entry)}
4043
</Link>
@@ -43,7 +46,9 @@ class GuideView extends PureComponent<RouteComponentProps> {
4346
</ul>
4447
</div>
4548
</div>
46-
<div className="content">{renderGuide(locale, page)}</div>
49+
<div className="content">
50+
<Guide locale={locale} page={page} />
51+
</div>
4752
</div>
4853
);
4954
}

0 commit comments

Comments
 (0)