Skip to content

Commit 2da85da

Browse files
rakannimerrakannimer
committed
chore(docs): adding descriptions to docs site
1 parent 712ff72 commit 2da85da

File tree

6 files changed

+144
-77
lines changed

6 files changed

+144
-77
lines changed

‎sandboxes/advanced-animations/default/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ function getData() {
1414

1515
export const options = {
1616
title: "Company Performance",
17-
curveType: "function",
1817
legend: { position: "bottom" },
1918
animation: {
2019
duration: 1000,

‎website/docs/examples/advanced-animations.mdx‎

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

99
# Animations
1010

11+
Google charts can smoothly animate your data as it changes.
12+
13+
To enable animations add the `animation` property of type [animation](https://developers.google.com/chart/interactive/docs/animation#transition-behavior) to the chart options parameter.
14+
15+
```jsx
16+
import { Chart } from "react-google-charts";
17+
18+
<Chart
19+
chartType="ScatterChart"
20+
width="100%"
21+
height="400px"
22+
data={chartData}
23+
options={{
24+
title: "Company Performance",
25+
legend: { position: "bottom" },
26+
animation: {
27+
duration: 1000,
28+
easing: "out",
29+
},
30+
}}
31+
/>;
32+
```
33+
1134
## Animate by changing the data
1235

1336
<ContextProvider>
@@ -28,3 +51,7 @@ import ContextProvider from "../../src/components/ContextProvider";
2851
></iframe>
2952
)}
3053
</ContextProvider>
54+
55+
## Read More
56+
57+
- [Reference](https://developers.google.com/chart/interactive/docs/animation)

‎website/docs/examples/advanced-chart-editor.mdx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,33 @@ tags:
44
- Chart Editor
55
---
66

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

99
# Chart Editor
1010

11+
Google Charts - Chart editor opens an in-page dialog box that allows your user to customize their visualizations on the fly.
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/advanced-chart-editor/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: Chart Editor 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: Chart Editor 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>
33+
34+
## Read More
35+
36+
- [Reference](https://developers.google.com/chart/interactive/docs/animation)

‎website/docs/examples/advanced-controls.mdx‎

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

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

99
# Controls
1010

11+
Controls are user interface widgets (such as category pickers, range sliders, autocompleters...) you interact with in order to drive the data managed by a dashboard and the charts that are part of it.
12+
1113
## Category Filter Control
1214

1315
<ContextProvider>
1416
{({ branch, theme }) => (
1517
<iframe
1618
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/advanced-controls/category-filter?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: Controls Category Filter Control'
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: Controls Category Filter Control"
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/advanced-controls/date-range-filter?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: Controls Date Range Filter Control'
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: Controls Date Range Filter Control"
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/advanced-controls/number-range-filter?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: Controls Number Range Filter Control'
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: Controls Number Range Filter Control"
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/advanced-controls/range-filter?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: Controls Chart Range Filter Control'
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: Controls Chart Range Filter Control"
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/advanced-controls/string-filter?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: Controls String Filter Control'
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: Controls String Filter Control"
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/advanced-spreadsheet.mdx‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,44 @@ tags:
44
- Spreadsheet
55
---
66

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

99
# Spreadsheet
1010

11+
To render a chart sourced from a Google Spreadsheet, just pass the spreadSheetUrl parameter with a url to your spread sheet.
12+
13+
```jsx
14+
<Chart
15+
chartType="ScatterChart"
16+
spreadSheetUrl="https://docs.google.com/spreadsheets/d/1jN0iw0usssnsG1_oi-NXtuKfsUsGme09GsFidbqxFYA/edit#gid=0"
17+
options={{
18+
hAxis: {
19+
format: "short",
20+
},
21+
vAxis: {
22+
format: "decimal",
23+
},
24+
}}
25+
/>
26+
```
27+
1128
## Simple Example
1229

1330
<ContextProvider>
1431
{({ branch, theme }) => (
1532
<iframe
1633
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/advanced-spreadsheet/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
1734
style={{
18-
width: '100%',
19-
height: '500px',
35+
width: "100%",
36+
height: "500px",
2037
border: 0,
21-
borderRadius: '4px',
22-
overflow: 'hidden',
38+
borderRadius: "4px",
39+
overflow: "hidden",
2340
}}
24-
title='RakanNimer/react-google-charts: Spreadsheet 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'
41+
title="RakanNimer/react-google-charts: Spreadsheet Simple Example"
42+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
43+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
44+
loading="lazy"
2845
></iframe>
2946
)}
3047
</ContextProvider>
@@ -36,16 +53,16 @@ import ContextProvider from '../../src/components/ContextProvider';
3653
<iframe
3754
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/advanced-spreadsheet/query?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
3855
style={{
39-
width: '100%',
40-
height: '500px',
56+
width: "100%",
57+
height: "500px",
4158
border: 0,
42-
borderRadius: '4px',
43-
overflow: 'hidden',
59+
borderRadius: "4px",
60+
overflow: "hidden",
4461
}}
45-
title='RakanNimer/react-google-charts: Spreadsheet Query data from spreadsheet'
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'
62+
title="RakanNimer/react-google-charts: Spreadsheet Query data from spreadsheet"
63+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
64+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
65+
loading="lazy"
4966
></iframe>
5067
)}
5168
</ContextProvider>

‎website/docs/examples/advanced-toolbar.mdx‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,43 @@ tags:
44
- Toolbar
55
---
66

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

99
# Toolbar
1010

11+
You can add a toolbar element to any visualization to enable the user to export the underlying data into a CSV file or an HTML table, or to provide code to embed the visualization into an arbitrary web page or gadget.
12+
13+
```jsx
14+
<Chart
15+
chartType="ColumnChart"
16+
spreadSheetUrl="https://docs.google.com/spreadsheets/d/1jN0iw0usssnsG1_oi-NXtuKfsUsGme09GsFidbqxFYA"
17+
toolbarItems={[
18+
{
19+
type: "csv",
20+
datasource:
21+
"https://spreadsheets.google.com/tq?key=1jN0iw0usssnsG1_oi-NXtuKfsUsGme09GsFidbqxFYA",
22+
},
23+
]}
24+
/>
25+
```
26+
1127
## Simple Example
1228

1329
<ContextProvider>
1430
{({ branch, theme }) => (
1531
<iframe
1632
src={`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${branch}/sandboxes/advanced-toolbar/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
1733
style={{
18-
width: '100%',
19-
height: '500px',
34+
width: "100%",
35+
height: "500px",
2036
border: 0,
21-
borderRadius: '4px',
22-
overflow: 'hidden',
37+
borderRadius: "4px",
38+
overflow: "hidden",
2339
}}
24-
title='RakanNimer/react-google-charts: Toolbar 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'
40+
title="RakanNimer/react-google-charts: Toolbar Simple Example"
41+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
42+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
43+
loading="lazy"
2844
></iframe>
2945
)}
3046
</ContextProvider>

0 commit comments

Comments
 (0)