playbook_ui 14.3.2.pre.alpha.revert3614PBNTR455ganttchartPOC3783 → 14.3.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
- data/dist/chunks/{_typeahead-XnxVauwE.js → _typeahead-DbAz2Okr.js} +3 -3
- data/dist/chunks/_weekday_stacked-CZ5S17_d.js +45 -0
- data/dist/chunks/{lib-CxRZxMI4.js → lib-D9uVVKnh.js} +1 -1
- data/dist/chunks/{pb_form_validation-9nbXdKfX.js → pb_form_validation-u2wnZ3oe.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +15 -9
- data/dist/chunks/_weekday_stacked--VyK5ouD.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a71ebec22a46e5a072dae9a4ecfbc2582b8778b65f5b3ff612ad60f0c0ede4a1
|
4
|
+
data.tar.gz: c21a5e48cd1d2436fc3d2bd3bb5845fa9b5f8095ec79ef865fbc550e9e55a1c0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 80e2f4a56c6ea0ed1decd054d326c129676e2183e5cf574cffd059e1009bf3e05b733f5b99c0753d449c2a3affc806db45b64684d5c109eb42ea8ff2330ad284
|
7
|
+
data.tar.gz: 0e22dea5792988151e1f06850a14373a710635169a092bdf4cacc9e05a23dfce61bd34c23334b42ab919c2085c9a32efe9af44a295acdbdf0301827ac85e3850
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
import HighchartsReact from "highcharts-react-official";
|
6
|
+
import Highcharts from "highcharts/highcharts-gantt";
|
7
|
+
|
8
|
+
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
9
|
+
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
10
|
+
|
11
|
+
type GanttChartProps = {
|
12
|
+
aria?: { [key: string]: string };
|
13
|
+
className?: string;
|
14
|
+
customOptions: Partial<Highcharts.Options>;
|
15
|
+
dark?: boolean;
|
16
|
+
data?: { [key: string]: string };
|
17
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
18
|
+
id?: string;
|
19
|
+
};
|
20
|
+
|
21
|
+
const GanttChart = (props: GanttChartProps) => {
|
22
|
+
const {
|
23
|
+
aria = {},
|
24
|
+
className,
|
25
|
+
customOptions = {},
|
26
|
+
dark = false,
|
27
|
+
data = {},
|
28
|
+
htmlOptions = {},
|
29
|
+
id,
|
30
|
+
} = props;
|
31
|
+
|
32
|
+
const ariaProps = buildAriaProps(aria);
|
33
|
+
const dataProps = buildDataProps(data);
|
34
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
35
|
+
const classes = classnames(
|
36
|
+
buildCss("pb_gantt_chart"),
|
37
|
+
globalProps(props),
|
38
|
+
className
|
39
|
+
);
|
40
|
+
|
41
|
+
const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
|
42
|
+
|
43
|
+
useEffect(() => {
|
44
|
+
setOptions(customOptions);
|
45
|
+
}, [customOptions]);
|
46
|
+
|
47
|
+
const setupTheme = () => {
|
48
|
+
dark
|
49
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
50
|
+
: Highcharts.setOptions(highchartsTheme);
|
51
|
+
};
|
52
|
+
setupTheme();
|
53
|
+
|
54
|
+
return (
|
55
|
+
<div>
|
56
|
+
<HighchartsReact
|
57
|
+
constructorType={"ganttChart"}
|
58
|
+
containerProps={{
|
59
|
+
className: classnames(globalProps(props), classes),
|
60
|
+
id: id,
|
61
|
+
...ariaProps,
|
62
|
+
...dataProps,
|
63
|
+
...htmlProps,
|
64
|
+
}}
|
65
|
+
highcharts={Highcharts}
|
66
|
+
options={options}
|
67
|
+
/>
|
68
|
+
</div>
|
69
|
+
);
|
70
|
+
};
|
71
|
+
|
72
|
+
export default GanttChart;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { GanttChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const mockOptions = {
|
5
|
+
title: {
|
6
|
+
text: "Simple Gantt Chart",
|
7
|
+
},
|
8
|
+
|
9
|
+
xAxis: [
|
10
|
+
{
|
11
|
+
min: Date.UTC(2014, 10, 17),
|
12
|
+
max: Date.UTC(2014, 10, 30),
|
13
|
+
},
|
14
|
+
],
|
15
|
+
|
16
|
+
series: [
|
17
|
+
{
|
18
|
+
name: "Project 1",
|
19
|
+
data: [
|
20
|
+
{
|
21
|
+
name: "Start prototype",
|
22
|
+
start: Date.UTC(2014, 10, 18),
|
23
|
+
end: Date.UTC(2014, 10, 25),
|
24
|
+
},
|
25
|
+
{
|
26
|
+
name: "Develop",
|
27
|
+
start: Date.UTC(2014, 10, 20),
|
28
|
+
end: Date.UTC(2014, 10, 25),
|
29
|
+
},
|
30
|
+
{
|
31
|
+
name: "Run acceptance tests",
|
32
|
+
start: Date.UTC(2014, 10, 23),
|
33
|
+
end: Date.UTC(2014, 10, 26),
|
34
|
+
},
|
35
|
+
{
|
36
|
+
name: "Test prototype",
|
37
|
+
start: Date.UTC(2014, 10, 27),
|
38
|
+
end: Date.UTC(2014, 10, 29),
|
39
|
+
},
|
40
|
+
],
|
41
|
+
},
|
42
|
+
],
|
43
|
+
};
|
44
|
+
|
45
|
+
const GanttChartDefault = (props) => (
|
46
|
+
<div>
|
47
|
+
<GanttChart customOptions={mockOptions}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
);
|
52
|
+
|
53
|
+
export default GanttChartDefault;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// import { renderKit } from '../utilities/test-utils'
|
2
|
+
|
3
|
+
// import GanttChart from './_gantt_chart'
|
4
|
+
|
5
|
+
/* See these resources for more testing info:
|
6
|
+
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
7
|
+
- https://jestjs.io/docs/en/using-matchers
|
8
|
+
*/
|
9
|
+
|
10
|
+
test('generated scaffold test - update me', () => {
|
11
|
+
// const props = {
|
12
|
+
// data: { testid: 'default' }
|
13
|
+
// }
|
14
|
+
|
15
|
+
|
16
|
+
// const kit = renderKit(GanttChart , props)
|
17
|
+
// expect(kit).toBeInTheDocument()
|
18
|
+
})
|
19
|
+
|
@@ -9,7 +9,7 @@ module Playbook
|
|
9
9
|
prop :border, type: Playbook::Props::Boolean,
|
10
10
|
default: false
|
11
11
|
prop :fixed_width, type: Playbook::Props::Boolean,
|
12
|
-
default:
|
12
|
+
default: false
|
13
13
|
prop :flip, type: Playbook::Props::Enum,
|
14
14
|
values: ["horizontal", "vertical", "both", nil],
|
15
15
|
default: nil
|