Skip to content

Commit e291f84

Browse files
rakannimerrakannimer
committed
chore(docs): add live code editor in examples and main page
1 parent 91f3ffd commit e291f84

File tree

10 files changed

+600
-145
lines changed

10 files changed

+600
-145
lines changed

‎website/docs/examples/bar-chart.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import ContextProvider from "../../src/components/ContextProvider";
88

99
# Bar Chart
1010

11+
You might also be interested in [Column Charts](/examples/column-chart) and [Histograms](/examples/histogram).
12+
1113
<ContextProvider>
1214
{({ branch, theme }) => (
1315
<iframe

‎website/docs/examples/column-chart.mdx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- Column Chart
55
---
66

7-
import ContextProvider from '../../src/components/ContextProvider';
7+
import ContextProvider from "../../src/components/ContextProvider";
88

99
# Column Chart
1010

@@ -15,16 +15,16 @@ import ContextProvider from '../../src/components/ContextProvider';
1515
<iframe
1616
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/column-chart/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
1717
style={{
18-
width: '100%',
19-
height: '500px',
18+
width: "100%",
19+
height: "500px",
2020
border: 0,
21-
borderRadius: '4px',
22-
overflow: 'hidden',
21+
borderRadius: "4px",
22+
overflow: "hidden",
2323
}}
24-
title='RakanNimer/react-google-charts: Column Chart Basic column chart'
25-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
26-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
27-
loading='lazy'
24+
title="RakanNimer/react-google-charts: Column Chart Basic column chart"
25+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
26+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
27+
loading="lazy"
2828
></iframe>
2929
)}
3030
</ContextProvider>
@@ -36,16 +36,16 @@ import ContextProvider from '../../src/components/ContextProvider';
3636
<iframe
3737
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/column-chart/diff?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
3838
style={{
39-
width: '100%',
40-
height: '500px',
39+
width: "100%",
40+
height: "500px",
4141
border: 0,
42-
borderRadius: '4px',
43-
overflow: 'hidden',
42+
borderRadius: "4px",
43+
overflow: "hidden",
4444
}}
45-
title='RakanNimer/react-google-charts: Column Chart Diff Column Chart'
46-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
47-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
48-
loading='lazy'
45+
title="RakanNimer/react-google-charts: Column Chart Diff Column Chart"
46+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
47+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
48+
loading="lazy"
4949
></iframe>
5050
)}
5151
</ContextProvider>

‎website/docs/examples/histogram.mdx‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,29 @@ tags:
44
- Histogram
55
---
66

7-
import ContextProvider from '../../src/components/ContextProvider';
7+
import ContextProvider from "../../src/components/ContextProvider";
88

99
# Histogram
1010

11+
You might also be interested in [Column Charts](/examples/column-chart) and [Bar Charts](/examples/bar-chart).
12+
1113
## Simple Example
1214

1315
<ContextProvider>
1416
{({ branch, theme }) => (
1517
<iframe
1618
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/histogram/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
1719
style={{
18-
width: '100%',
19-
height: '500px',
20+
width: "100%",
21+
height: "500px",
2022
border: 0,
21-
borderRadius: '4px',
22-
overflow: 'hidden',
23+
borderRadius: "4px",
24+
overflow: "hidden",
2325
}}
24-
title='RakanNimer/react-google-charts: Histogram Simple Example'
25-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
26-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
27-
loading='lazy'
26+
title="RakanNimer/react-google-charts: Histogram Simple Example"
27+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
28+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
29+
loading="lazy"
2830
></iframe>
2931
)}
3032
</ContextProvider>
@@ -36,16 +38,16 @@ import ContextProvider from '../../src/components/ContextProvider';
3638
<iframe
3739
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/histogram/buckets?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
3840
style={{
39-
width: '100%',
40-
height: '500px',
41+
width: "100%",
42+
height: "500px",
4143
border: 0,
42-
borderRadius: '4px',
43-
overflow: 'hidden',
44+
borderRadius: "4px",
45+
overflow: "hidden",
4446
}}
45-
title='RakanNimer/react-google-charts: Histogram Controlling Buckets'
46-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
47-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
48-
loading='lazy'
47+
title="RakanNimer/react-google-charts: Histogram Controlling Buckets"
48+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
49+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
50+
loading="lazy"
4951
></iframe>
5052
)}
5153
</ContextProvider>
@@ -57,16 +59,16 @@ import ContextProvider from '../../src/components/ContextProvider';
5759
<iframe
5860
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/histogram/colors?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
5961
style={{
60-
width: '100%',
61-
height: '500px',
62+
width: "100%",
63+
height: "500px",
6264
border: 0,
63-
borderRadius: '4px',
64-
overflow: 'hidden',
65+
borderRadius: "4px",
66+
overflow: "hidden",
6567
}}
66-
title='RakanNimer/react-google-charts: Histogram Controlling Colors'
67-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
68-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
69-
loading='lazy'
68+
title="RakanNimer/react-google-charts: Histogram Controlling Colors"
69+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
70+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
71+
loading="lazy"
7072
></iframe>
7173
)}
7274
</ContextProvider>
@@ -78,16 +80,16 @@ import ContextProvider from '../../src/components/ContextProvider';
7880
<iframe
7981
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/histogram/distribution?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
8082
style={{
81-
width: '100%',
82-
height: '500px',
83+
width: "100%",
84+
height: "500px",
8385
border: 0,
84-
borderRadius: '4px',
85-
overflow: 'hidden',
86+
borderRadius: "4px",
87+
overflow: "hidden",
8688
}}
87-
title='RakanNimer/react-google-charts: Histogram Distribution'
88-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
89-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
90-
loading='lazy'
89+
title="RakanNimer/react-google-charts: Histogram Distribution"
90+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
91+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
92+
loading="lazy"
9193
></iframe>
9294
)}
9395
</ContextProvider>
@@ -99,16 +101,16 @@ import ContextProvider from '../../src/components/ContextProvider';
99101
<iframe
100102
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/histogram/multiple-series?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
101103
style={{
102-
width: '100%',
103-
height: '500px',
104+
width: "100%",
105+
height: "500px",
104106
border: 0,
105-
borderRadius: '4px',
106-
overflow: 'hidden',
107+
borderRadius: "4px",
108+
overflow: "hidden",
107109
}}
108-
title='RakanNimer/react-google-charts: Histogram Multiple Series'
109-
allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
110-
sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
111-
loading='lazy'
110+
title="RakanNimer/react-google-charts: Histogram Multiple Series"
111+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
112+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
113+
loading="lazy"
112114
></iframe>
113115
)}
114116
</ContextProvider>

‎website/docs/examples/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ title: Examples
33
description: List of all React Google Charts examples
44
---
55

6-
import DocList from "../..//src/components/DocList";
6+
import DocList from "../../src/components/DocList";
77

88
<DocList />

‎website/docs/examples/pie-chart.mdx‎

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,39 @@ import ContextProvider from "../../src/components/ContextProvider";
88

99
# Pie Chart
1010

11-
<ContextProvider>
12-
{({ branch, theme }) => (
13-
<iframe
14-
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/pie-chart/default?view=preview&fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
15-
style={{
16-
width: "100%",
17-
height: "500px",
18-
border: 0,
19-
borderRadius: "4px",
20-
overflow: "hidden",
21-
}}
22-
title="RakanNimer/react-google-charts: Pie Chart Simple Example"
23-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
24-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
25-
loading="lazy"
26-
></iframe>
27-
)}
28-
</ContextProvider>
11+
Start by importing the Chart component :
12+
13+
```jsx
14+
import { Chart } from "react-google-charts";
15+
```
16+
17+
```jsx live
18+
function App() {
19+
const data = [
20+
["Task", "Hours per Day"],
21+
["Work", 9],
22+
["Eat", 2],
23+
["Commute", 2],
24+
["Watch TV", 2],
25+
["Sleep", 7],
26+
];
27+
28+
const options = {
29+
title: "My Daily Activities",
30+
};
31+
return (
32+
<Chart
33+
chartType="PieChart"
34+
data={data}
35+
options={options}
36+
width={"100%"}
37+
height={"400px"}
38+
/>
39+
);
40+
}
41+
```
42+
43+
[![Edit chart example in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/RakanNimer/react-google-charts/tree/master/sandboxes/pie-chart/default?file=%2FApp.tsx&from-embed=)
2944

3045
---
3146

@@ -71,51 +86,51 @@ export default App;
7186

7287
Below are interactive examples of Pie Charts rendered using `react-google-charts`. Each example demonstrates different features and customization options. You can interact with the charts directly in your browser.
7388

74-
### Simple Example
75-
76-
This is a basic Pie Chart illustrating simple data visualization.
77-
78-
<ContextProvider>
79-
{({ branch, theme }) => (
80-
<iframe
81-
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/pie-chart/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
82-
style={{
83-
width: "100%",
84-
height: "500px",
85-
border: 0,
86-
borderRadius: "4px",
87-
overflow: "hidden",
88-
}}
89-
title="RakanNimer/react-google-charts: Pie Chart Simple Example"
90-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
91-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
92-
loading="lazy"
93-
></iframe>
94-
)}
95-
</ContextProvider>
96-
9789
### 3D Pie Chart
9890

9991
This example demonstrates how to create a 3D Pie Chart.
10092

101-
<ContextProvider>
102-
{({ branch, theme }) => (
103-
<iframe
104-
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/pie-chart/3d?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
105-
style={{
106-
width: "100%",
107-
height: "500px",
108-
border: 0,
109-
borderRadius: "4px",
110-
overflow: "hidden",
111-
}}
112-
title="RakanNimer/react-google-charts: Pie Chart 3D Pie Chart"
113-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
114-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
115-
loading="lazy"
116-
></iframe>
117-
)}
118-
</ContextProvider>
93+
```jsx live
94+
function App() {
95+
const data = [
96+
["Task", "Hours per Day"],
97+
["Work", 11],
98+
["Eat", 2],
99+
["Commute", 2],
100+
["Watch TV", 2],
101+
["Sleep", 7],
102+
];
103+
104+
const options = {
105+
title: "My Daily Activities",
106+
pieHole: 0.4, // Creates a Donut Chart. Does not do anything when is3D is enabled
107+
is3D: true, // Enables 3D view
108+
// slices: {
109+
// 1: { offset: 0.2 }, // Explodes the second slice
110+
// },
111+
pieStartAngle: 100, // Rotates the chart
112+
sliceVisibilityThreshold: 0.02, // Hides slices smaller than 2%
113+
legend: {
114+
position: "bottom",
115+
alignment: "center",
116+
textStyle: {
117+
color: "#233238",
118+
fontSize: 14,
119+
},
120+
},
121+
colors: ["#8AD1C2", "#9F8AD1", "#D18A99", "#BCD18A", "#D1C28A"],
122+
};
123+
return (
124+
<Chart
125+
chartType="PieChart"
126+
data={data}
127+
options={options}
128+
width={"100%"}
129+
height={"400px"}
130+
/>
131+
);
132+
}
133+
```
119134

120135
### Diff Pie Chart
121136

0 commit comments

Comments
 (0)