playbook_ui 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3975

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +1 -3
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +184 -5
  5. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
  6. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -5
  7. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
  8. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +11 -3
  9. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +13 -3
  10. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  11. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  12. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +8 -0
  13. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  14. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  16. data/app/pb_kits/playbook/pb_form/formHelper.js +41 -0
  17. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  18. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  19. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  20. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  21. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +64 -3
  24. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +203 -5
  25. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
  26. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +154 -5
  27. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
  28. data/app/pb_kits/playbook/pb_map/pbMapTheme.ts +17 -195
  29. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +113 -5
  30. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
  31. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  32. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  33. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  34. data/dist/chunks/_typeahead-CnC6UeRx.js +22 -0
  35. data/dist/chunks/_weekday_stacked-DzL3HGZ_.js +45 -0
  36. data/dist/chunks/lib-DJCA-0lC.js +29 -0
  37. data/dist/chunks/{pb_form_validation-Bu-tMfIi.js → pb_form_validation-CyF9hGTn.js} +1 -1
  38. data/dist/chunks/vendor.js +1 -1
  39. data/dist/playbook-doc.js +1 -1
  40. data/dist/playbook-rails-react-bindings.js +1 -1
  41. data/dist/playbook-rails.js +1 -1
  42. data/dist/playbook.css +1 -1
  43. data/lib/playbook/pb_forms_helper.rb +3 -1
  44. data/lib/playbook/version.rb +1 -1
  45. metadata +12 -7
  46. data/app/pb_kits/playbook/pb_dashboard/_highcharts_theme.scss +0 -52
  47. data/dist/chunks/_typeahead-D84d1KBa.js +0 -22
  48. data/dist/chunks/_weekday_stacked-CmT_2e83.js +0 -45
  49. data/dist/chunks/lib-BCt68dVK.js +0 -29
@@ -1,201 +1,23 @@
1
1
  import colors from '../tokens/exports/_colors.module.scss'
2
- import typography from '../tokens/exports/_typography.module.scss'
3
2
 
4
3
  const mapTheme = {
5
- lang: {
6
- thousandsSep: ',',
7
- },
8
- colors: [
9
- colors.data_1,
10
- colors.data_2,
11
- colors.data_3,
12
- colors.data_4,
13
- colors.data_5,
14
- colors.data_6,
15
- colors.data_7,
16
- ],
17
- chart: {
18
- borderWidth: 0,
19
- borderRadius: 0,
20
- plotShadow: false,
21
- plotBorderWidth: 0,
22
- },
23
- title: {
24
- style: {
25
- color: colors.text_lt_default,
26
- fontFamily: typography.font_family_base,
27
- fontWeight: typography.bold,
28
- fontSize: typography.heading_3,
29
- },
30
- },
31
- subtitle: {
32
- style: {
33
- fontFamily: typography.font_family_base,
34
- color: colors.text_lt_light,
35
- fontWeight: typography.regular,
36
- fontSize: typography.text_base,
37
- },
38
- },
39
- xAxis: {
40
- gridLineWidth: 0,
41
- lineColor: colors.border_light,
42
- tickColor: colors.border_light,
43
- labels: {
44
- style: {
45
- fontFamily: typography.font_family_base,
46
- color: colors.text_lt_lighter,
47
- fontWeight: typography.bold,
48
- fontSize: typography.text_smaller,
49
- },
50
- },
51
- title: {
52
- style: {
53
- color: colors.text_lt_default,
54
- fontFamily: typography.font_family_base,
55
- fontWeight: typography.regular,
56
- fontSize: typography.heading_4,
57
- },
58
- },
59
- },
60
- yAxis: {
61
- gridLineColor: colors.border_light,
62
- minorGridLineColor: colors.border_light,
63
- lineWidth: 0,
64
- tickWidth: 0,
65
- labels: {
66
- style: {
67
- fontFamily: typography.font_family_base,
68
- color: colors.text_lt_lighter,
69
- fontWeight: typography.bold,
70
- fontSize: typography.text_smaller,
71
- },
72
- },
73
- title: {
74
- style: {
75
- fontFamily: typography.font_family_base,
76
- color: colors.text_lt_lighter,
77
- fontWeight: typography.bold,
78
- fontSize: typography.text_smaller,
79
- },
80
- },
81
- },
82
- legend: {
83
- layout: 'horizontal',
84
- align: 'center',
85
- verticalAlign: 'bottom',
86
- itemStyle: {
87
- fontFamily: typography.font_family_base,
88
- color: colors.text_lt_light,
89
- fontWeight: typography.regular,
90
- fontSize: typography.text_smaller,
91
- },
92
- itemHoverStyle: {
93
- color: colors.text_lt_default,
94
- },
95
- itemHiddenStyle: {
96
- color: colors.text_lt_lighter,
97
- },
98
- },
99
- tooltip: {
100
- backgroundColor: {
101
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
102
- stops: [
103
- [0, colors.bg_dark],
104
- [1, colors.bg_dark],
105
- ],
106
- },
107
- shadow: false,
108
- borderWidth: 0,
109
- borderRadius: 10,
110
- style: {
111
- fontFamily: typography.font_family_base,
112
- color: colors.text_dk_default,
113
- fontWeight: typography.regular,
114
- fontSize: typography.text_smaller,
115
- },
116
- },
117
- // specific to gauge
118
- // unfilled gauge color
119
- pane: {
120
- background: {
121
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
122
- // @ts-ignore
123
- borderColor: colors.border_light,
124
- },
125
- },
126
-
127
- plotOptions: {
128
- // PIE STYLES
129
- pie: {
130
- colors: [
131
- colors.data_1,
132
- colors.data_2,
133
- colors.data_3,
134
- colors.data_4,
135
- colors.data_5,
136
- colors.data_6,
137
- colors.data_7,
138
- ],
139
- dataLabels: {
140
- style: {
141
- fontFamily: typography.font_family_base,
142
- fontSize: typography.text_smaller,
143
- color: colors.text_lt_light,
144
- fontWeight: typography.regular,
145
- textOutline: '2px $white',
146
- },
147
- },
148
- },
149
-
150
- // LINE CHART STYLES
151
- line: {
152
- dataLabels: {
153
- color: '#CCC',
154
- },
155
- marker: {
156
- lineColor: '#333',
157
- },
158
- },
159
-
160
- //TREEMAP CHART STYLES
161
- treemap: {
162
- layoutAlgorithm: "squarified",
163
- allowTraversingTree: false,
164
- animationLimit: 1000,
165
- colors: [
166
- colors.data_1,
167
- colors.data_2,
168
- colors.data_3,
169
- colors.data_4,
170
- colors.data_5,
171
- colors.data_6,
172
- colors.data_7,
173
- colors.data_8,
174
- ],
175
- dataLabels: {
176
- enabled: true,
177
- style: {
178
- fontFamily: typography.font_family_base,
179
- fontWeight: typography.bold,
180
- fontSize: typography.heading_4,
181
- },
182
- },
183
- levels: [
184
- {
185
- level: 1,
186
- dataLabels: {
187
- enabled: false,
188
- },
189
- },
190
- ],
191
- traverseUpButton: {
192
- position: { y: -50 },
193
- },
194
- },
195
- },
196
- credits: {
197
- enabled: false
198
- },
4
+ marker : colors.primary_action,
5
+ maptiles: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
6
+ flyToConfig: {
7
+ zoom: 13,
8
+ bearing: 0,
9
+ curve: 1.42, // change the speed at which it zooms
10
+ easing: function (t: any) {
11
+ return t;
12
+ },
13
+ essential: true
14
+ },
15
+ zoomConfig: { duration:1000 },
16
+ mapConfig: {
17
+ style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
18
+ zoom: 13,
19
+ attributionControl: false,
20
+ }
199
21
  }
200
22
 
201
23
  export default mapTheme
@@ -1,10 +1,118 @@
1
- import React from 'react';
1
+ import React, { useState, useEffect } from "react";
2
+ import classnames from "classnames";
3
+
4
+ import { globalProps } from "../utilities/globalProps";
5
+ import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
6
+
7
+ import HighchartsReact from "highcharts-react-official";
8
+ import Highcharts from "highcharts";
9
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
+ import treemap from 'highcharts/modules/treemap'
13
+ import { merge } from 'lodash'
14
+
15
+ type TreemapChartProps = {
16
+ chartData: {
17
+ name: string;
18
+ parent?: string | number;
19
+ value: number;
20
+ color?: string;
21
+ id?: string | number;
22
+ }[];
23
+ className?: string;
24
+ colors: string[];
25
+ customOptions?: Partial<Highcharts.Options>;
26
+ dark?: boolean;
27
+ drillable: boolean;
28
+ grouped: boolean;
29
+ height?: string;
30
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
31
+ id: number | string;
32
+ title?: string;
33
+ tooltipHtml: string;
34
+ type?: string;
35
+ aria?: { [key: string]: string };
36
+ data?: { [key: string]: string };
37
+ };
38
+
39
+ const TreemapChart = ({
40
+ aria = {},
41
+ data = {},
42
+ chartData,
43
+ colors,
44
+ customOptions = {},
45
+ dark = false,
46
+ drillable = false,
47
+ grouped = false,
48
+ height,
49
+ htmlOptions = {},
50
+ id,
51
+ title = "",
52
+ tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
53
+ type = "treemap",
54
+ ...props
55
+ }: TreemapChartProps): React.ReactElement => {
56
+
57
+ const ariaProps = buildAriaProps(aria)
58
+ const dataProps = buildDataProps(data)
59
+ const htmlProps = buildHtmlProps(htmlOptions)
60
+
61
+ const setupTheme = () => {
62
+ dark
63
+ ? Highcharts.setOptions(highchartsDarkTheme)
64
+ : Highcharts.setOptions(highchartsTheme);
65
+ };
66
+ treemap(Highcharts)
67
+ setupTheme();
68
+
69
+ const staticOptions = {
70
+ title: {
71
+ text: title,
72
+ },
73
+ chart: {
74
+ height: height,
75
+ type: type,
76
+ },
77
+ credits: false,
78
+ series: [
79
+ {
80
+ data: chartData,
81
+ },
82
+ ],
83
+ plotOptions: {
84
+ treemap: {
85
+ tooltip: {
86
+ pointFormat: tooltipHtml,
87
+ },
88
+ allowTraversingTree: drillable,
89
+ colorByPoint: !grouped,
90
+ colors:
91
+ colors !== undefined && colors.length > 0
92
+ ? mapColors(colors)
93
+ : highchartsTheme.colors,
94
+ },
95
+ },
96
+ };
97
+
98
+ const [options, setOptions] = useState({});
99
+
100
+ useEffect(() => {
101
+ setOptions(merge(staticOptions, customOptions));
102
+ }, [chartData]);
2
103
 
3
- const TreemapChart: React.FC = () => {
4
104
  return (
5
- <div>
6
- This is a simple div component.
7
- </div>
105
+ <HighchartsReact
106
+ containerProps={{
107
+ className: classnames(globalProps(props), "pb_treemap_chart"),
108
+ id: id,
109
+ ...ariaProps,
110
+ ...dataProps,
111
+ ...htmlProps
112
+ }}
113
+ highcharts={Highcharts}
114
+ options={options}
115
+ />
8
116
  );
9
117
  };
10
118
 
@@ -19,7 +19,7 @@ afterEach(() => {
19
19
 
20
20
  const testId = 'treemapchart1';
21
21
 
22
- test.skip('uses exact classname', () => {
22
+ test('uses exact classname', () => {
23
23
  const data = [
24
24
  {
25
25
  name: "Pepperoni",
@@ -136,12 +136,15 @@ const Typeahead = ({
136
136
  }
137
137
  }
138
138
 
139
+ const filteredProps: TypeaheadProps = {...props}
140
+ delete filteredProps.truncate
141
+
139
142
  const dataProps = buildDataProps(data)
140
143
  const htmlProps = buildHtmlProps(htmlOptions)
141
144
  const classes = classnames(
142
145
  'pb_typeahead_kit react-select',
143
146
  `mb_${marginBottom}`,
144
- globalProps(props),
147
+ globalProps(filteredProps),
145
148
  className
146
149
  )
147
150
 
@@ -16,7 +16,7 @@ type Props = {
16
16
  const MultiValue = (props: Props) => {
17
17
  const { removeProps } = props
18
18
  const { imageUrl, label } = props.data
19
- const { dark, multiKit, pillColor } = props.selectProps
19
+ const { dark, multiKit, pillColor, truncate } = props.selectProps
20
20
 
21
21
  const formPillProps = {
22
22
  marginRight: 'xs',
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
51
51
  name={label}
52
52
  size={multiKit === 'smallPill' ? 'small' : ''}
53
53
  text=''
54
+ truncate={truncate}
54
55
  {...props}
55
56
  />
56
57
  }
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
64
65
  name=''
65
66
  size={multiKit === 'smallPill' ? 'small' : ''}
66
67
  text={label}
68
+ truncate={truncate}
67
69
  {...props}
68
70
  />
69
71
  }
@@ -65,10 +65,10 @@ module Playbook
65
65
  def typeahead_react_options
66
66
  base_options = {
67
67
  className: classname,
68
- pillColor: pill_color,
69
68
  dark: dark,
70
69
  defaultValue: default_options,
71
70
  error: error,
71
+ htmlOptions: html_options,
72
72
  id: id,
73
73
  inline: inline,
74
74
  isMulti: is_multi,
@@ -77,8 +77,10 @@ module Playbook
77
77
  multiKit: multi_kit,
78
78
  name: name,
79
79
  options: options,
80
+ pillColor: pill_color,
80
81
  placeholder: placeholder,
81
82
  plusIcon: plus_icon,
83
+ truncate: truncate,
82
84
  }
83
85
 
84
86
  base_options[:getOptionLabel] = get_option_label if get_option_label.present?