playbook_ui 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +0 -21
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +184 -5
  6. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
  7. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -5
  8. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
  9. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +6 -2
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +7 -2
  11. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +64 -3
  12. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +203 -5
  13. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
  14. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +154 -5
  15. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
  16. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +2 -2
  17. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +0 -2
  18. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +2 -5
  19. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +113 -5
  20. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
  21. data/dist/chunks/_typeahead-DnWoIeq6.js +22 -0
  22. data/dist/chunks/_weekday_stacked-C5Ls9JLc.js +45 -0
  23. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  24. data/dist/chunks/{pb_form_validation-Dna2I7fw.js → pb_form_validation-D9zkwt2b.js} +1 -1
  25. data/dist/chunks/vendor.js +1 -1
  26. data/dist/menu.yml +1 -3
  27. data/dist/playbook-doc.js +1 -1
  28. data/dist/playbook-rails-react-bindings.js +1 -1
  29. data/dist/playbook-rails.js +1 -1
  30. data/dist/playbook.css +1 -1
  31. data/lib/playbook/pagination_renderer.rb +2 -2
  32. data/lib/playbook/version.rb +1 -1
  33. metadata +6 -21
  34. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +0 -25
  35. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +0 -465
  36. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +0 -195
  37. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +0 -3
  38. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +0 -117
  39. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +0 -43
  40. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +0 -1
  41. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +0 -63
  42. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +0 -55
  43. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +0 -113
  44. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +0 -12
  45. data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -5
  46. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +0 -12
  47. data/app/pb_kits/playbook/pb_drawer/drawer.rb +0 -8
  48. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +0 -77
  49. data/dist/chunks/_typeahead-BywvWGAm.js +0 -22
  50. data/dist/chunks/_weekday_stacked-5OGZKZeo.js +0 -45
  51. data/dist/chunks/lib-DMOmCoAX.js +0 -29
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 80057f386d023128cc894f5af37cea4079c2726cce60e51ead0bec9552e52e9e
4
- data.tar.gz: 18aab90b3badfd5e956e30a6837b48297087411e90d5f2828201440b6869a78b
3
+ metadata.gz: c0a3c2bfca37d4cbb4e43aafccb7e441db17fdbf67839df44bdc2565a49b148b
4
+ data.tar.gz: 266b08d55a69c7edb4dbed36d28c9ce54d63db403f13153f54d6b79687d4832e
5
5
  SHA512:
6
- metadata.gz: 52f850e7e43eeaab506a5b78551e9eb616ec18dc2ddada841905b715abe9670ffeefc74aa20122e8da6c88b1e24e244fe506dc6152c4f7680aa2e5b99e6606ea
7
- data.tar.gz: 27af465b152aea6fe6f53529ce0b26a6fecfa9be9641f4654da15ee6967afa0b331e5681f74b90f04f1aee9c5b131c9040a7d77696639bbe8bcce34e30ff0f9c
6
+ metadata.gz: 204d81fe1f4a2ba955520454023d19d60725e860a5e73deb1c4e5953f075da3f241667c27b8f7044a109d0cc1c4e8c4cee931468722e376e730aa061ae12fb2f
7
+ data.tar.gz: 5548d760095f0a86b47de09358bd621ed73342fe56432678b5842df5505cf6081f5f571954392c46c3bdd4b98d8aec59ca0fb04424d1e36ad4d5395931105dd8
@@ -1,4 +1,3 @@
1
-
2
1
  @import 'pb_advanced_table/advanced_table';
3
2
  @import 'pb_avatar/avatar';
4
3
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -106,7 +105,6 @@
106
105
  @import 'pb_user_badge/user_badge';
107
106
  @import 'pb_walkthrough/walkthrough';
108
107
  @import 'pb_weekday_stacked/weekday_stacked';
109
- @import 'pb_drawer/drawer';
110
108
  @import 'utilities/mixins';
111
109
  @import 'utilities/spacing';
112
110
  @import 'utilities/cursor';
@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
462
462
 
463
463
  const kit = screen.getByTestId(testId)
464
464
  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
465
- })
465
+ })
@@ -1,27 +1,6 @@
1
- @import "../tokens/colors";
2
-
3
1
  .pb_bar_graph {
4
2
  rect.highcharts-background {
5
3
  fill: #0000 !important;
6
4
  }
7
5
  }
8
6
 
9
- @import url("https://code.highcharts.com/css/highcharts.css");
10
-
11
- // @import "highcharts/css/highcharts";
12
- // @import "highcharts/highcharts.css";
13
-
14
- :root {
15
- --highcharts-color-0: #{$data_1};
16
- --highcharts-color-1: #{$data_2};
17
- --highcharts-color-2: #{$data_3};
18
- --highcharts-color-3: #{$data_4};
19
- --highcharts-color-4: #{$data_5};
20
- --highcharts-color-5: #{$data_6};
21
- --highcharts-color-6: #{$data_7};
22
- --highcharts-color-7: #{$data_8};
23
- }
24
-
25
- .highcharts-title {
26
- font-family: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif;
27
- }
@@ -1,10 +1,189 @@
1
- import React from 'react';
1
+ import React, { useState, useEffect } from "react";
2
+ import { globalProps } from "../utilities/globalProps";
3
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
4
+
5
+ import HighchartsReact from "highcharts-react-official";
6
+ import Highcharts from "highcharts";
7
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
+ import { merge } from 'lodash'
11
+
12
+ import classnames from "classnames";
13
+
14
+ type BarGraphProps = {
15
+ align?: "left" | "right" | "center";
16
+ axisTitle: { name: string; }[] | string;
17
+ dark?: boolean;
18
+ xAxisCategories: [];
19
+ yAxisMin: number;
20
+ yAxisMax: number;
21
+ chartData: { name: string; data: number[], yAxis: number }[];
22
+ className?: string;
23
+ customOptions?: Partial<Highcharts.Options>;
24
+ id: string;
25
+ pointStart: number;
26
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
27
+ subTitle?: string;
28
+ title: string;
29
+ type?: string;
30
+ legend?: boolean;
31
+ toggleLegendClick?: boolean;
32
+ height?: string;
33
+ colors: string[];
34
+ layout?: "horizontal" | "vertical" | "proximate";
35
+ verticalAlign?: "top" | "middle" | "bottom";
36
+ x?: number;
37
+ y?: number;
38
+ aria?: { [key: string]: string };
39
+ data?: { [key: string]: string };
40
+ stacking?: "normal" | "percent"
41
+ axisFormat?: { format: string; }[] | string;
42
+ };
43
+
44
+
45
+ const BarGraph = ({
46
+ aria = {},
47
+ data = {},
48
+ align = "center",
49
+ axisTitle,
50
+ dark = false,
51
+ chartData,
52
+ className = "pb_bar_graph",
53
+ colors,
54
+ htmlOptions = {},
55
+ customOptions = {},
56
+ axisFormat,
57
+ id,
58
+ pointStart,
59
+ stacking,
60
+ subTitle,
61
+ type = "column",
62
+ title = "Title",
63
+ xAxisCategories,
64
+ yAxisMin,
65
+ yAxisMax,
66
+ legend = false,
67
+ toggleLegendClick = true,
68
+ height,
69
+ layout = "horizontal",
70
+ verticalAlign = "bottom",
71
+ x = 0,
72
+ y = 0,
73
+ ...props
74
+ }: BarGraphProps): React.ReactElement => {
75
+ const ariaProps = buildAriaProps(aria);
76
+ const dataProps = buildDataProps(data)
77
+ const htmlProps = buildHtmlProps(htmlOptions);
78
+ const setupTheme = () => {
79
+ dark
80
+ ? Highcharts.setOptions(highchartsDarkTheme)
81
+ : Highcharts.setOptions(highchartsTheme);
82
+ };
83
+ setupTheme();
84
+
85
+ const staticOptions = {
86
+ title: {
87
+ text: title,
88
+ },
89
+ chart: {
90
+ height: height,
91
+ type: type,
92
+ },
93
+ subtitle: {
94
+ text: subTitle,
95
+ },
96
+ yAxis: [{
97
+ labels: {
98
+ format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
99
+
100
+ },
101
+ min: yAxisMin,
102
+ max: yAxisMax,
103
+ opposite: false,
104
+ title: {
105
+ text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
106
+ },
107
+ plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
108
+ value: 0,
109
+ zIndex: 10,
110
+ color: "#E4E8F0"
111
+ }],
112
+ }],
113
+ xAxis: {
114
+ categories: xAxisCategories,
115
+ },
116
+ legend: {
117
+ enabled: legend,
118
+ align: align,
119
+ verticalAlign: verticalAlign,
120
+ layout: layout,
121
+ x: x,
122
+ y: y,
123
+ },
124
+ colors:
125
+ colors !== undefined && colors.length > 0
126
+ ? mapColors(colors)
127
+ : highchartsTheme.colors,
128
+ plotOptions: {
129
+ series: {
130
+ stacking: stacking,
131
+ pointStart: pointStart,
132
+ borderWidth: stacking ? 0 : "",
133
+ events: {},
134
+ dataLabels: {
135
+ enabled: false,
136
+ },
137
+ },
138
+ },
139
+ series: chartData,
140
+ credits: false,
141
+ };
142
+
143
+ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
144
+ staticOptions.yAxis.push({
145
+ labels: {
146
+ format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
147
+ },
148
+ min: yAxisMin,
149
+ max: yAxisMax,
150
+ opposite: true,
151
+ title: {
152
+ text: axisTitle[1].name,
153
+ },
154
+ plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
155
+ value: 0,
156
+ zIndex: 10,
157
+ color: "#E4E8F0"
158
+ }],
159
+ });
160
+ }
161
+
162
+ if (!toggleLegendClick) {
163
+ staticOptions.plotOptions.series.events = { legendItemClick: () => false };
164
+ }
165
+
166
+ const filteredProps: any = {...props};
167
+ delete filteredProps.verticalAlign;
168
+
169
+ const [options, setOptions] = useState({});
170
+
171
+ useEffect(() => {
172
+ setOptions(merge(staticOptions, customOptions));
173
+ }, [chartData]);
2
174
 
3
- const BarGraph: React.FC = () => {
4
175
  return (
5
- <div>
6
- This is a simple div component.
7
- </div>
176
+ <HighchartsReact
177
+ containerProps={{
178
+ className: classnames(globalProps(filteredProps), className),
179
+ id: id,
180
+ ...ariaProps,
181
+ ...dataProps,
182
+ ...htmlProps
183
+ }}
184
+ highcharts={Highcharts}
185
+ options={options}
186
+ />
8
187
  );
9
188
  };
10
189
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'bargraph1';
19
19
 
20
- test.skip('bargraph uses exact classname', () => {
20
+ test('bargraph uses exact classname', () => {
21
21
  render(
22
22
  <BarGraph
23
23
  className='super_important_class'
@@ -1,10 +1,221 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState } from "react";
2
+ import classnames from "classnames";
3
+ import HighchartsReact from "highcharts-react-official";
4
+ import highchartsMore from "highcharts/highcharts-more";
5
+
6
+ import Highcharts from "highcharts";
7
+
8
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
+ import { globalProps } from "../utilities/globalProps";
12
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
13
+ import { merge } from 'lodash'
14
+
15
+ type CircleChartProps = {
16
+ align?: "left" | "right" | "center";
17
+ aria: { [key: string]: string };
18
+ chartData?: [];
19
+ children?: Node;
20
+ className?: string;
21
+ colors?: string[];
22
+ customOptions?: Partial<Highcharts.Options>;
23
+ dark?: boolean;
24
+ data?: {[key: string]: string},
25
+ dataLabelHtml?: string;
26
+ dataLabels?: boolean;
27
+ height?: string;
28
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
29
+ id?: string;
30
+ innerSize?: "sm" | "md" | "lg" | "none";
31
+ legend?: boolean;
32
+ maxPointSize?: number;
33
+ minPointSize?: number;
34
+ rounded?: boolean;
35
+ startAngle?: number;
36
+ style?: string;
37
+ title?: string;
38
+ tooltipHtml: string;
39
+ useHtml?: boolean;
40
+ zMin?: number;
41
+ layout?: "horizontal" | "vertical" | "proximate";
42
+ verticalAlign?: "top" | "middle" | "bottom";
43
+ x?: number;
44
+ y?: number;
45
+ borderColor?: string;
46
+ borderWidth?: number;
47
+ };
48
+
49
+
50
+
51
+ const alignBlockElement = (event: any) => {
52
+ const itemToMove = document.querySelector<HTMLElement>(
53
+ `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
54
+ );
55
+ const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
56
+
57
+ if (itemToMove !== null && chartContainer !== null) {
58
+ itemToMove.style.height = `${event.target.chartHeight}px`;
59
+ itemToMove.style.width = `${event.target.chartWidth}px`;
60
+ if (chartContainer.firstChild !== null) {
61
+ chartContainer.firstChild.before(itemToMove);
62
+ }
63
+ }
64
+ };
65
+
66
+ const CircleChart = ({
67
+ align = "center",
68
+ aria = {},
69
+ rounded = false,
70
+ borderColor = rounded ? null : "",
71
+ borderWidth = rounded ? 20 : null,
72
+ chartData,
73
+ children,
74
+ className,
75
+ colors = [],
76
+ customOptions = {},
77
+ dark = false,
78
+ data = {},
79
+ dataLabelHtml = "<div>{point.name}</div>",
80
+ dataLabels = false,
81
+ height,
82
+ htmlOptions = {},
83
+ id,
84
+ innerSize = "md",
85
+ legend = false,
86
+ maxPointSize = null,
87
+ minPointSize = null,
88
+ startAngle = null,
89
+ style = "pie",
90
+ title,
91
+ tooltipHtml,
92
+ useHtml = false,
93
+ zMin = null,
94
+ layout = "horizontal",
95
+ verticalAlign = "bottom",
96
+ x = 0,
97
+ y = 0,
98
+ ...props
99
+ }: CircleChartProps) => {
100
+ const ariaProps = buildAriaProps(aria);
101
+ const dataProps = buildDataProps(data)
102
+ const htmlProps = buildHtmlProps(htmlOptions);
103
+ highchartsMore(Highcharts);
104
+
105
+ const setupTheme = () => {
106
+ dark
107
+ ? Highcharts.setOptions(highchartsDarkTheme)
108
+ : Highcharts.setOptions(highchartsTheme);
109
+ };
110
+ setupTheme();
111
+
112
+ Highcharts.setOptions({
113
+ tooltip: {
114
+ headerFormat: null,
115
+ pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
116
+ useHTML: useHtml,
117
+ },
118
+ });
119
+
120
+ const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
121
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
122
+ innerSizes[size];
123
+
124
+
125
+ const filteredProps: any = {...props};
126
+ delete filteredProps.verticalAlign;
127
+
128
+ const [options, setOptions] = useState({});
129
+
130
+ useEffect(() => {
131
+ const formattedChartData = chartData.map((obj: any) => {
132
+ obj.y = obj.value;
133
+ delete obj.value;
134
+ return obj;
135
+ });
136
+
137
+ const staticOptions = {
138
+ title: {
139
+ text: title,
140
+ },
141
+ chart: {
142
+ height: height,
143
+ type: style,
144
+ events: {
145
+ render: (event: any) => alignBlockElement(event),
146
+ redraw: (event: any) => alignBlockElement(event),
147
+ },
148
+ },
149
+
150
+ legend: {
151
+ align: align,
152
+ verticalAlign: verticalAlign,
153
+ layout: layout,
154
+ x: x,
155
+ y: y,
156
+ },
157
+ plotOptions: {
158
+ pie: {
159
+ colors:
160
+ colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
161
+ dataLabels: {
162
+ enabled: dataLabels,
163
+ connectorShape: "straight",
164
+ connectorWidth: 3,
165
+ format: dataLabelHtml,
166
+ },
167
+ showInLegend: legend,
168
+ },
169
+ },
170
+ series: [
171
+ {
172
+ minPointSize: minPointSize,
173
+ maxPointSize: maxPointSize,
174
+ innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
175
+ data: formattedChartData,
176
+ zMin: zMin,
177
+ startAngle: startAngle,
178
+ borderWidth: borderWidth,
179
+ borderColor: borderColor,
180
+ },
181
+ ],
182
+ credits: false,
183
+ };
184
+ setOptions(merge(staticOptions, customOptions));
185
+ }, [chartData]);
186
+
2
187
 
3
- const CircleChart: React.FC = () => {
4
188
  return (
5
- <div>
6
- This is a simple div component.
7
- </div>
189
+ <>
190
+ {children ? (
191
+ <div id={`wrapper-circle-chart-${id}`}>
192
+ <HighchartsReact
193
+ containerProps={{
194
+ className: classnames("pb_circle_chart", globalProps(filteredProps)),
195
+ id: id,
196
+ ...ariaProps,
197
+ ...dataProps,
198
+ ...htmlProps,
199
+ }}
200
+ highcharts={Highcharts}
201
+ options={options}
202
+ />
203
+ <div className="pb-circle-chart-block">{children}</div>
204
+ </div>
205
+ ) : (
206
+ <HighchartsReact
207
+ containerProps={{
208
+ className: classnames("pb_circle_chart", globalProps(filteredProps)),
209
+ id: id,
210
+ ...ariaProps,
211
+ ...dataProps,
212
+ ...htmlProps,
213
+ }}
214
+ highcharts={Highcharts}
215
+ options={options}
216
+ />
217
+ )}
218
+ </>
8
219
  );
9
220
  };
10
221
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'circlechart1';
19
19
 
20
- test.skip('uses exact classname', () => {
20
+ test('uses exact classname', () => {
21
21
  const data = [
22
22
  {
23
23
  name: 'Waiting for Calls',
@@ -3,7 +3,11 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
6
+ interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
+ traverseUpButton?: {
8
+ position: { y: number };
9
+ };
10
+ }
7
11
 
8
12
  const highchartsDarkTheme: ThemeProps = {
9
13
  lang: {
@@ -202,7 +206,7 @@ const highchartsDarkTheme: ThemeProps = {
202
206
  traverseUpButton: {
203
207
  position: { y: -50 },
204
208
  },
205
- } as PlotTreemapOptions,
209
+ } as CustomTreemapOptions,
206
210
  },
207
211
  credits: {
208
212
  enabled: false
@@ -3,7 +3,12 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
6
+ interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
+ traverseUpButton?: {
8
+ position: { y: number };
9
+ };
10
+ }
11
+
7
12
 
8
13
  const highchartsTheme: ThemeProps = {
9
14
  lang: {
@@ -201,7 +206,7 @@ const highchartsTheme: ThemeProps = {
201
206
  traverseUpButton: {
202
207
  position: { y: -50 },
203
208
  },
204
- } as PlotTreemapOptions,
209
+ } as CustomTreemapOptions,
205
210
  },
206
211
  credits: {
207
212
  enabled: false
@@ -1,9 +1,70 @@
1
- import React from 'react';
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();
2
53
 
3
- const GanttChart: React.FC = () => {
4
54
  return (
5
55
  <div>
6
- This is a simple div component.
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
+ />
7
68
  </div>
8
69
  );
9
70
  };