playbook_ui_docs 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8736
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +15 -32
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/dist/playbook-doc.js +1 -1
- metadata +5 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4be7600e74e6e42ddb15b91aac5909f6b503d549c91d2cf08a306a7387626f26
|
|
4
|
+
data.tar.gz: 8097ee13bbeb86471fdfb9c64f63d32844dac3660008c352198cb827f0a756a9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b4fc279f1ca0a89c73b592520e48624742c4e3a769c16b94beac7479dc44e28c722249822c417d647c5d2e9ea6ef1c6bb4a8116e0b1e97a40817aae4366e31e6
|
|
7
|
+
data.tar.gz: d30f8ea2f52f792ecec21ee9bb1a4bbe1f184af8ecec36a7197edb4fcceb86e67904359f264b126f293ba482e6eae209557b70f4959776c09fc12a7f7a129a0b
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import colors from '../../tokens/exports/_colors.module.scss'
|
|
3
|
-
import Highcharts from "highcharts";
|
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
|
5
|
-
|
|
6
|
-
import barGraphTheme from '../barGraphTheme';
|
|
7
2
|
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
8
4
|
|
|
9
5
|
const chartData = [{
|
|
10
6
|
name: 'Installation',
|
|
@@ -23,33 +19,19 @@ const chartData = [{
|
|
|
23
19
|
data: [1111, 677, 3245, 500, 200],
|
|
24
20
|
}]
|
|
25
21
|
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const BarGraphColors = () => {
|
|
43
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<div>
|
|
47
|
-
<HighchartsReact
|
|
48
|
-
highcharts={Highcharts}
|
|
49
|
-
options={options}
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
22
|
+
const BarGraphColors = (props) => (
|
|
23
|
+
<div>
|
|
24
|
+
<BarGraph
|
|
25
|
+
axisTitle="Number of Employees"
|
|
26
|
+
chartData={chartData}
|
|
27
|
+
colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
|
|
28
|
+
id="bar-colors"
|
|
29
|
+
title="Bar Graph with Custom Data Colors"
|
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
31
|
+
yAxisMin={0}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
)
|
|
54
36
|
|
|
55
37
|
export default BarGraphColors
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import ReactDOMServer from 'react-dom/server'
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
|
5
|
+
|
|
6
|
+
const chartData = [
|
|
7
|
+
{
|
|
8
|
+
name: 'Role',
|
|
9
|
+
data: [0, 200, 300, 654, 656],
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
name: 'Company',
|
|
13
|
+
data: [150, 524, 320, 440, 500],
|
|
14
|
+
},
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
const renderIcon = (iconName, color) => {
|
|
18
|
+
return ReactDOMServer.renderToStaticMarkup(
|
|
19
|
+
<Icon
|
|
20
|
+
color={color}
|
|
21
|
+
icon={iconName}
|
|
22
|
+
/>)
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const barGraphOptions = {
|
|
26
|
+
yAxis: {
|
|
27
|
+
tickInterval: 5,
|
|
28
|
+
},
|
|
29
|
+
xAxis: {
|
|
30
|
+
categories: ['1', '2', '3', '4', '5'],
|
|
31
|
+
labels: {
|
|
32
|
+
useHTML: true,
|
|
33
|
+
formatter: function () {
|
|
34
|
+
switch (this.value) {
|
|
35
|
+
case '1':
|
|
36
|
+
return `${renderIcon('frown', 'error')}`;
|
|
37
|
+
case '2':
|
|
38
|
+
return `${renderIcon('frown', 'warning')}`;
|
|
39
|
+
case '3':
|
|
40
|
+
return `${renderIcon('frown-open', 'neutral')}`;
|
|
41
|
+
case '4':
|
|
42
|
+
return `${renderIcon('smile', 'category_7')}`;
|
|
43
|
+
case '5':
|
|
44
|
+
return `${renderIcon('smile-beam', 'success')}`;
|
|
45
|
+
default:
|
|
46
|
+
return ''
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
style: {
|
|
50
|
+
fontSize: '1.4em',
|
|
51
|
+
},
|
|
52
|
+
y: 42,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
legend: {
|
|
56
|
+
itemMarginTop: 62,
|
|
57
|
+
},
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const BarGraphCustom = () => (
|
|
61
|
+
<div>
|
|
62
|
+
<BarGraph
|
|
63
|
+
chartData={chartData}
|
|
64
|
+
customOptions={barGraphOptions}
|
|
65
|
+
id="happiness-dashboard"
|
|
66
|
+
legend
|
|
67
|
+
title="Bar Graph with Custom Overrides"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)
|
|
71
|
+
|
|
72
|
+
export default BarGraphCustom
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
|
|
2
|
+
It's important to note that certain options may require specific script imports to function properly.
|
|
3
|
+
|
|
4
|
+
Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
|
|
5
|
+
|
|
6
|
+
You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import Highcharts from "highcharts";
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
2
|
|
|
5
|
-
import
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
6
4
|
|
|
7
5
|
const chartData = [{
|
|
8
6
|
name: 'Installation',
|
|
@@ -21,35 +19,19 @@ const chartData = [{
|
|
|
21
19
|
data: [1111, 677, 3245, 500, 200],
|
|
22
20
|
}]
|
|
23
21
|
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const BarGraphDefault = () => {
|
|
43
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<div>
|
|
47
|
-
<HighchartsReact
|
|
48
|
-
highcharts={Highcharts}
|
|
49
|
-
options={options}
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
22
|
+
const BarGraphDefault = (props) => (
|
|
23
|
+
<div>
|
|
24
|
+
<BarGraph
|
|
25
|
+
axisTitle="Number of Employees"
|
|
26
|
+
chartData={chartData}
|
|
27
|
+
id="bar-default"
|
|
28
|
+
subTitle="Source: thesolarfoundation.com"
|
|
29
|
+
title="Solar Employment Growth by Sector, 2010-2016"
|
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
31
|
+
yAxisMin={0}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
)
|
|
54
36
|
|
|
55
37
|
export default BarGraphDefault
|
|
@@ -1,69 +1,39 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import Highcharts from "highcharts";
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
2
|
|
|
5
|
-
import
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
6
4
|
|
|
7
5
|
const chartData = [{
|
|
8
6
|
name: 'Number of Installations',
|
|
9
7
|
data: [1475, 200, 3000, 654, 656],
|
|
10
8
|
}]
|
|
11
9
|
|
|
12
|
-
const
|
|
13
|
-
chart: {
|
|
14
|
-
height: "300"
|
|
15
|
-
},
|
|
16
|
-
series: chartData,
|
|
17
|
-
title: {
|
|
18
|
-
text: "Fixed Height (300px)",
|
|
19
|
-
},
|
|
20
|
-
xAxis: {
|
|
21
|
-
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
|
22
|
-
},
|
|
23
|
-
yAxis: {
|
|
24
|
-
title: {
|
|
25
|
-
text: "Number of Employees",
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const percentageHeightChartOptions = {
|
|
31
|
-
chart: {
|
|
32
|
-
height: "50%"
|
|
33
|
-
},
|
|
34
|
-
series: chartData,
|
|
35
|
-
title: {
|
|
36
|
-
text: "Percentage Height (50%)",
|
|
37
|
-
},
|
|
38
|
-
xAxis: {
|
|
39
|
-
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
|
40
|
-
},
|
|
41
|
-
yAxis: {
|
|
42
|
-
title: {
|
|
43
|
-
text: "Number of Employees",
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
|
|
49
|
-
|
|
50
|
-
const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
|
|
51
|
-
|
|
52
|
-
const BarGraphHeight = () => (
|
|
10
|
+
const BarGraphDefault = (props) => (
|
|
53
11
|
<div>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
12
|
+
<BarGraph
|
|
13
|
+
axisTitle="Number of Employees"
|
|
14
|
+
chartData={chartData}
|
|
15
|
+
height="300"
|
|
16
|
+
id="bar-fixed-height"
|
|
17
|
+
title="Fixed Height (300px)"
|
|
18
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
|
19
|
+
yAxisMin={0}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
58
22
|
|
|
59
23
|
<br />
|
|
60
24
|
<br />
|
|
61
25
|
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
26
|
+
<BarGraph
|
|
27
|
+
axisTitle="Number of Employees"
|
|
28
|
+
chartData={chartData}
|
|
29
|
+
height="50%"
|
|
30
|
+
id="bar-percentage-height"
|
|
31
|
+
title="Percentage Height (50%)"
|
|
32
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
|
33
|
+
yAxisMin={0}
|
|
34
|
+
{...props}
|
|
65
35
|
/>
|
|
66
36
|
</div>
|
|
67
37
|
)
|
|
68
38
|
|
|
69
|
-
export default
|
|
39
|
+
export default BarGraphDefault
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import Highcharts from "highcharts";
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
2
|
|
|
5
|
-
import
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
|
|
6
|
+
const barGraphOptions = {
|
|
8
7
|
chart: {
|
|
9
8
|
type: 'bar'
|
|
10
9
|
},
|
|
@@ -23,8 +22,13 @@ const chartOptions = {
|
|
|
23
22
|
lineWidth: 0
|
|
24
23
|
},
|
|
25
24
|
yAxis: {
|
|
25
|
+
min: 0,
|
|
26
26
|
title: {
|
|
27
|
-
text: '',
|
|
27
|
+
text: 'Population (millions)',
|
|
28
|
+
align: 'high'
|
|
29
|
+
},
|
|
30
|
+
labels: {
|
|
31
|
+
overflow: 'justify'
|
|
28
32
|
},
|
|
29
33
|
},
|
|
30
34
|
tooltip: {
|
|
@@ -47,16 +51,16 @@ const chartOptions = {
|
|
|
47
51
|
}, {
|
|
48
52
|
name: 'Year 2018',
|
|
49
53
|
data: [1276, 1007, 4561, 746]
|
|
50
|
-
}]
|
|
54
|
+
}]
|
|
51
55
|
}
|
|
52
56
|
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
const BarGraphHorizontal = () => (
|
|
57
|
+
const BarGraphHorizontal = (props) => (
|
|
56
58
|
<div>
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
<BarGraph
|
|
60
|
+
customOptions={barGraphOptions}
|
|
61
|
+
id="bar-horizontal"
|
|
62
|
+
yAxisMin={0}
|
|
63
|
+
{...props}
|
|
60
64
|
/>
|
|
61
65
|
</div>
|
|
62
66
|
)
|
|
@@ -1,40 +1,24 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
|
-
|
|
5
|
-
import barGraphTheme from '../barGraphTheme';
|
|
2
|
+
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
|
6
3
|
|
|
7
4
|
const chartData = [{
|
|
8
5
|
name: 'Number of Installations',
|
|
9
6
|
data: [1475, 200, 3000, 654, 656],
|
|
10
7
|
}]
|
|
11
8
|
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
9
|
+
const BarGraphLegend = (props) => (
|
|
10
|
+
<div>
|
|
11
|
+
<BarGraph
|
|
12
|
+
axisTitle="Number of Employees"
|
|
13
|
+
chartData={chartData}
|
|
14
|
+
id="bar-test-2"
|
|
15
|
+
legend
|
|
16
|
+
title="Bar Graph with Legend"
|
|
17
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
18
|
+
yAxisMin={0}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
22
|
+
)
|
|
27
23
|
|
|
28
|
-
const BarGraphLegend = () => {
|
|
29
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<div>
|
|
33
|
-
<HighchartsReact
|
|
34
|
-
highcharts={Highcharts}
|
|
35
|
-
options={options}
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
24
|
export default BarGraphLegend
|
|
@@ -1,48 +1,25 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
|
-
|
|
5
|
-
import barGraphTheme from '../barGraphTheme';
|
|
2
|
+
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
|
6
3
|
|
|
7
4
|
const chartData = [{
|
|
8
5
|
name: 'Number of Installations',
|
|
9
6
|
data: [1475, 200, 3000, 654, 656],
|
|
10
7
|
}]
|
|
11
8
|
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
itemClick: function () {
|
|
28
|
-
return false;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
series: chartData
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const BarGraphLegendNonClickable = () => {
|
|
36
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<div>
|
|
40
|
-
<HighchartsReact
|
|
41
|
-
highcharts={Highcharts}
|
|
42
|
-
options={options}
|
|
43
|
-
/>
|
|
44
|
-
</div>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
9
|
+
const BarGraphLegendNonClickable = (props) => (
|
|
10
|
+
<div>
|
|
11
|
+
<BarGraph
|
|
12
|
+
axisTitle="Number of Employees"
|
|
13
|
+
chartData={chartData}
|
|
14
|
+
id="bar-test-3"
|
|
15
|
+
legend
|
|
16
|
+
title="Bar Graph with Legend Non Clickable"
|
|
17
|
+
toggleLegendClick={false}
|
|
18
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
19
|
+
yAxisMin={0}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
)
|
|
47
24
|
|
|
48
25
|
export default BarGraphLegendNonClickable
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import Highcharts from "highcharts";
|
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
|
4
2
|
|
|
3
|
+
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
|
5
4
|
import Title from "../../pb_title/_title"
|
|
6
5
|
|
|
7
|
-
import barGraphTheme from '../barGraphTheme';
|
|
8
|
-
|
|
9
6
|
const chartData = [{
|
|
10
7
|
name: 'Installation',
|
|
11
8
|
data: [1475],
|
|
@@ -23,76 +20,7 @@ const chartData = [{
|
|
|
23
20
|
data: [1111],
|
|
24
21
|
}]
|
|
25
22
|
|
|
26
|
-
const
|
|
27
|
-
series: chartData,
|
|
28
|
-
title: {
|
|
29
|
-
text: 'Alignment of Legend',
|
|
30
|
-
},
|
|
31
|
-
subtitle: {
|
|
32
|
-
text: 'Source: thesolarfoundation.com',
|
|
33
|
-
},
|
|
34
|
-
xAxis: {
|
|
35
|
-
categories: ['Jan'],
|
|
36
|
-
},
|
|
37
|
-
yAxis: {
|
|
38
|
-
title: {
|
|
39
|
-
text: 'Number of Employees',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
legend: {
|
|
43
|
-
enabled: true,
|
|
44
|
-
verticalAlign: 'top',
|
|
45
|
-
align: 'right',
|
|
46
|
-
},
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
const layoutChartOptions = {
|
|
50
|
-
series: chartData,
|
|
51
|
-
title: {
|
|
52
|
-
text: 'Layout of Legend',
|
|
53
|
-
},
|
|
54
|
-
xAxis: {
|
|
55
|
-
categories: ['Jan'],
|
|
56
|
-
},
|
|
57
|
-
yAxis: {
|
|
58
|
-
title: {
|
|
59
|
-
text: 'Number of Employees',
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
legend: {
|
|
63
|
-
enabled: true,
|
|
64
|
-
layout: 'vertical',
|
|
65
|
-
},
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const offsetChartOptions = {
|
|
69
|
-
series: chartData,
|
|
70
|
-
title: {
|
|
71
|
-
text: 'Offset of Legend',
|
|
72
|
-
},
|
|
73
|
-
xAxis: {
|
|
74
|
-
categories: ['Jan'],
|
|
75
|
-
},
|
|
76
|
-
yAxis: {
|
|
77
|
-
title: {
|
|
78
|
-
text: 'Number of Employees',
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
legend: {
|
|
82
|
-
enabled: true,
|
|
83
|
-
layout: 'vertical',
|
|
84
|
-
x: 100,
|
|
85
|
-
y: 10,
|
|
86
|
-
},
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const BarGraphLegendPosition = () => {
|
|
90
|
-
const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
|
|
91
|
-
const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
|
|
92
|
-
const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
return (
|
|
23
|
+
const BarGraphLegendPosition = (props) => (
|
|
96
24
|
<div>
|
|
97
25
|
<Title
|
|
98
26
|
paddingBottom="sm"
|
|
@@ -101,11 +29,19 @@ const BarGraphLegendPosition = () => {
|
|
|
101
29
|
tag="h4"
|
|
102
30
|
text="align | verticalAlign"
|
|
103
31
|
/>
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
32
|
+
<BarGraph
|
|
33
|
+
align='right'
|
|
34
|
+
axisTitle="Number of Employees"
|
|
35
|
+
chartData={chartData}
|
|
36
|
+
id="legend-position-bar"
|
|
37
|
+
legend
|
|
38
|
+
paddingBottom="sm"
|
|
39
|
+
title="Alignment of Legend"
|
|
40
|
+
verticalAlign="top"
|
|
41
|
+
xAxisCategories={['Jan']}
|
|
42
|
+
yAxisMin={0}
|
|
43
|
+
{...props}
|
|
107
44
|
/>
|
|
108
|
-
|
|
109
45
|
<Title
|
|
110
46
|
paddingBottom="sm"
|
|
111
47
|
paddingTop="sm"
|
|
@@ -113,11 +49,19 @@ const BarGraphLegendPosition = () => {
|
|
|
113
49
|
tag="h4"
|
|
114
50
|
text="layout"
|
|
115
51
|
/>
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
52
|
+
<BarGraph
|
|
53
|
+
axisTitle="Number of Employees"
|
|
54
|
+
chartData={chartData}
|
|
55
|
+
id="legend-position-bar-1"
|
|
56
|
+
layout="vertical"
|
|
57
|
+
legend
|
|
58
|
+
paddingBottom="sm"
|
|
59
|
+
paddingTop="sm"
|
|
60
|
+
title="Layout of Legend"
|
|
61
|
+
xAxisCategories={['Jan']}
|
|
62
|
+
yAxisMin={0}
|
|
63
|
+
{...props}
|
|
119
64
|
/>
|
|
120
|
-
|
|
121
65
|
<Title
|
|
122
66
|
paddingBottom="sm"
|
|
123
67
|
paddingTop="sm"
|
|
@@ -125,12 +69,20 @@ const BarGraphLegendPosition = () => {
|
|
|
125
69
|
tag="h4"
|
|
126
70
|
text="x | y"
|
|
127
71
|
/>
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
72
|
+
<BarGraph
|
|
73
|
+
axisTitle="Number of Employees"
|
|
74
|
+
chartData={chartData}
|
|
75
|
+
id="legend-position-bar-2"
|
|
76
|
+
layout="vertical"
|
|
77
|
+
legend
|
|
78
|
+
title="Offset of Legend"
|
|
79
|
+
x={100}
|
|
80
|
+
xAxisCategories={['Jan']}
|
|
81
|
+
y={10}
|
|
82
|
+
yAxisMin={0}
|
|
83
|
+
{...props}
|
|
131
84
|
/>
|
|
132
85
|
</div>
|
|
133
86
|
)
|
|
134
|
-
}
|
|
135
87
|
|
|
136
88
|
export default BarGraphLegendPosition
|