playbook_ui 11.15.0 → 11.16.0.pre.alpha.paginationrails1
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/_playbook.scss +2 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
- data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +207 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +7 -47
- data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
- data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
- data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
- data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +202 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
- data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +68 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +41 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +28 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +12 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.rb +18 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +17 -0
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
- data/app/pb_kits/playbook/playbook-rails.js +0 -4
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/pagination_renderer.rb +41 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -0
- metadata +38 -12
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -111
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -151
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -113
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
- data/app/pb_kits/playbook/plugins/pb_chart.js +0 -322
@@ -0,0 +1,111 @@
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
import { buildAriaProps, buildDataProps } 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
|
+
|
14
|
+
type TreemapChartProps = {
|
15
|
+
chartData: {
|
16
|
+
name: string;
|
17
|
+
parent?: string | number;
|
18
|
+
value: number;
|
19
|
+
color?: string;
|
20
|
+
id?: string | number;
|
21
|
+
}[];
|
22
|
+
className?: string;
|
23
|
+
colors: string[];
|
24
|
+
dark?: boolean;
|
25
|
+
drillable: boolean;
|
26
|
+
grouped: boolean;
|
27
|
+
height?: string;
|
28
|
+
id: number | string;
|
29
|
+
title?: string;
|
30
|
+
tooltipHtml: string;
|
31
|
+
type?: string;
|
32
|
+
aria?: { [key: string]: string };
|
33
|
+
data?: { [key: string]: string };
|
34
|
+
};
|
35
|
+
|
36
|
+
const TreemapChart = ({
|
37
|
+
aria = {},
|
38
|
+
data = {},
|
39
|
+
chartData,
|
40
|
+
colors,
|
41
|
+
dark = false,
|
42
|
+
drillable = false,
|
43
|
+
grouped = false,
|
44
|
+
height,
|
45
|
+
id,
|
46
|
+
title = "",
|
47
|
+
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
|
48
|
+
type = "treemap",
|
49
|
+
...props
|
50
|
+
}: TreemapChartProps) => {
|
51
|
+
const ariaProps = buildAriaProps(aria);
|
52
|
+
const dataProps = buildDataProps(data);
|
53
|
+
const setupTheme = () => {
|
54
|
+
dark
|
55
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
56
|
+
: Highcharts.setOptions(highchartsTheme);
|
57
|
+
};
|
58
|
+
treemap(Highcharts)
|
59
|
+
setupTheme();
|
60
|
+
|
61
|
+
const staticOptions = {
|
62
|
+
title: {
|
63
|
+
text: title,
|
64
|
+
},
|
65
|
+
chart: {
|
66
|
+
height: height,
|
67
|
+
type: type,
|
68
|
+
},
|
69
|
+
credits: false,
|
70
|
+
series: [
|
71
|
+
{
|
72
|
+
data: chartData,
|
73
|
+
},
|
74
|
+
],
|
75
|
+
plotOptions: {
|
76
|
+
treemap: {
|
77
|
+
tooltip: {
|
78
|
+
pointFormat: tooltipHtml,
|
79
|
+
},
|
80
|
+
allowTraversingTree: drillable,
|
81
|
+
colorByPoint: !grouped,
|
82
|
+
colors:
|
83
|
+
colors !== undefined && colors.length > 0
|
84
|
+
? mapColors(colors)
|
85
|
+
: highchartsTheme.colors,
|
86
|
+
},
|
87
|
+
},
|
88
|
+
};
|
89
|
+
|
90
|
+
const [options, setOptions] = useState({});
|
91
|
+
|
92
|
+
useEffect(() => {
|
93
|
+
|
94
|
+
setOptions({ ...staticOptions });
|
95
|
+
}, [chartData]);
|
96
|
+
|
97
|
+
return (
|
98
|
+
<HighchartsReact
|
99
|
+
containerProps={{
|
100
|
+
className: classnames(globalProps(props), "pb_treemap_chart"),
|
101
|
+
id: id,
|
102
|
+
...ariaProps,
|
103
|
+
...dataProps,
|
104
|
+
}}
|
105
|
+
highcharts={Highcharts}
|
106
|
+
options={options}
|
107
|
+
/>
|
108
|
+
);
|
109
|
+
};
|
110
|
+
|
111
|
+
export default TreemapChart;
|
@@ -39,7 +39,7 @@ const TreemapChartTooltip = (props) => (
|
|
39
39
|
chartData={chartData}
|
40
40
|
id="treemap-tooltip"
|
41
41
|
title="Favored Pizza Toppings"
|
42
|
-
tooltipHtml=
|
42
|
+
tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
|
43
43
|
{...props}
|
44
44
|
/>
|
45
45
|
</div>
|
@@ -60,6 +60,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
|
|
60
60
|
import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
|
61
61
|
import * as Nav from 'pb_nav/docs'
|
62
62
|
import * as OnlineStatus from 'pb_online_status/docs'
|
63
|
+
import * as Pagination from 'pb_pagination/docs'
|
63
64
|
import * as Passphrase from 'pb_passphrase/docs'
|
64
65
|
import * as PbReactPopover from 'pb_popover/docs'
|
65
66
|
import * as Person from 'pb_person/docs'
|
@@ -157,6 +158,7 @@ WebpackerReact.setup({
|
|
157
158
|
...MultipleUsersStacked,
|
158
159
|
...Nav,
|
159
160
|
...OnlineStatus,
|
161
|
+
...Pagination,
|
160
162
|
...Passphrase,
|
161
163
|
...PbReactPopover,
|
162
164
|
...Person,
|
@@ -4,11 +4,13 @@ import WebpackerReact from 'webpacker-react'
|
|
4
4
|
import ujs from 'webpacker-react/ujs'
|
5
5
|
|
6
6
|
import BarGraph from './pb_bar_graph/_bar_graph'
|
7
|
+
import CircleChart from './pb_circle_chart/_circle_chart'
|
7
8
|
import Dialog from './pb_dialog/_dialog'
|
8
9
|
import DialogBody from './pb_dialog/child_kits/_dialog_body'
|
9
10
|
import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
|
10
11
|
import DialogHeader from './pb_dialog/child_kits/_dialog_header'
|
11
12
|
import DistributionBar from './pb_distribution_bar/_distribution_bar'
|
13
|
+
import Gauge from './pb_gauge/_gauge'
|
12
14
|
import Legend from './pb_legend/_legend'
|
13
15
|
import LineGraph from './pb_line_graph/_line_graph'
|
14
16
|
import Passphrase from './pb_passphrase/_passphrase'
|
@@ -18,6 +20,7 @@ import Typeahead from './pb_typeahead/_typeahead'
|
|
18
20
|
|
19
21
|
WebpackerReact.registerComponents({
|
20
22
|
BarGraph,
|
23
|
+
CircleChart,
|
21
24
|
Dialog,
|
22
25
|
DialogBody,
|
23
26
|
DialogFooter,
|
@@ -29,6 +32,7 @@ WebpackerReact.registerComponents({
|
|
29
32
|
RichTextEditor,
|
30
33
|
TreemapChart,
|
31
34
|
Typeahead,
|
35
|
+
Gauge,
|
32
36
|
})
|
33
37
|
|
34
38
|
ujs.setup(
|
data/lib/playbook/kit_base.rb
CHANGED
@@ -19,6 +19,7 @@ require "playbook/flex"
|
|
19
19
|
require "playbook/flex_grow"
|
20
20
|
require "playbook/flex_shrink"
|
21
21
|
require "playbook/order"
|
22
|
+
require "playbook/pagination_renderer"
|
22
23
|
|
23
24
|
module Playbook
|
24
25
|
class KitBase < ViewComponent::Base
|
@@ -43,6 +44,7 @@ module Playbook
|
|
43
44
|
include Playbook::FlexGrow
|
44
45
|
include Playbook::FlexShrink
|
45
46
|
include Playbook::Order
|
47
|
+
include Playbook::Pagination
|
46
48
|
|
47
49
|
prop :id
|
48
50
|
prop :data, type: Playbook::Props::Hash, default: {}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "will_paginate/view_helpers/action_view"
|
4
|
+
|
5
|
+
module Playbook
|
6
|
+
module Pagination
|
7
|
+
class Rails < WillPaginate::ActionView::LinkRenderer
|
8
|
+
def container_attributes
|
9
|
+
{ class: "pb_pagination" }
|
10
|
+
end
|
11
|
+
|
12
|
+
def page_number(page)
|
13
|
+
if page == current_page
|
14
|
+
tag("li", tag("span", page), class: "active")
|
15
|
+
else
|
16
|
+
tag("li", link(page, page, rel: rel_value(page)))
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
20
|
+
def previous_or_next_page(page, text, classname)
|
21
|
+
if page
|
22
|
+
tag("li", link(text, page), class: classname)
|
23
|
+
else
|
24
|
+
tag("li", tag("span", text), class: "%s disabled")
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
def gap; end
|
29
|
+
|
30
|
+
def previous_page
|
31
|
+
num = @collection.current_page > 1 && @collection.current_page - 1
|
32
|
+
previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
|
33
|
+
end
|
34
|
+
|
35
|
+
def next_page
|
36
|
+
num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
|
37
|
+
previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
|
38
|
+
end
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 11.
|
4
|
+
version: 11.16.0.pre.alpha.paginationrails1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2023-01-04 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -269,6 +269,20 @@ dependencies:
|
|
269
269
|
- - '='
|
270
270
|
- !ruby/object:Gem::Version
|
271
271
|
version: 1.2018.9
|
272
|
+
- !ruby/object:Gem::Dependency
|
273
|
+
name: will_paginate
|
274
|
+
requirement: !ruby/object:Gem::Requirement
|
275
|
+
requirements:
|
276
|
+
- - "~>"
|
277
|
+
- !ruby/object:Gem::Version
|
278
|
+
version: '3.3'
|
279
|
+
type: :development
|
280
|
+
prerelease: false
|
281
|
+
version_requirements: !ruby/object:Gem::Requirement
|
282
|
+
requirements:
|
283
|
+
- - "~>"
|
284
|
+
- !ruby/object:Gem::Version
|
285
|
+
version: '3.3'
|
272
286
|
description: Playbook Design System. Built for Nitro, but powering all.
|
273
287
|
email:
|
274
288
|
- nitroux@powerhrg.com
|
@@ -361,8 +375,8 @@ files:
|
|
361
375
|
- app/pb_kits/playbook/pb_badge/docs/_description.md
|
362
376
|
- app/pb_kits/playbook/pb_badge/docs/example.yml
|
363
377
|
- app/pb_kits/playbook/pb_badge/docs/index.js
|
364
|
-
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
|
365
378
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
|
379
|
+
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
366
380
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
367
381
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
368
382
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
@@ -540,8 +554,9 @@ files:
|
|
540
554
|
- app/pb_kits/playbook/pb_checkbox/docs/_description.md
|
541
555
|
- app/pb_kits/playbook/pb_checkbox/docs/example.yml
|
542
556
|
- app/pb_kits/playbook/pb_checkbox/docs/index.js
|
543
|
-
- app/pb_kits/playbook/pb_circle_chart/
|
557
|
+
- app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
|
544
558
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
559
|
+
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
|
545
560
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
|
546
561
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
|
547
562
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
|
@@ -638,8 +653,10 @@ files:
|
|
638
653
|
- app/pb_kits/playbook/pb_currency/docs/example.yml
|
639
654
|
- app/pb_kits/playbook/pb_currency/docs/index.js
|
640
655
|
- app/pb_kits/playbook/pb_dashboard/commonSettings.js
|
641
|
-
- app/pb_kits/playbook/pb_dashboard/
|
642
|
-
- app/pb_kits/playbook/pb_dashboard/
|
656
|
+
- app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
|
657
|
+
- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
|
658
|
+
- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
|
659
|
+
- app/pb_kits/playbook/pb_dashboard/themeTypes.ts
|
643
660
|
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
|
644
661
|
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
|
645
662
|
- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
|
@@ -1033,8 +1050,8 @@ files:
|
|
1033
1050
|
- app/pb_kits/playbook/pb_form_pill/docs/index.js
|
1034
1051
|
- app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
|
1035
1052
|
- app/pb_kits/playbook/pb_form_pill/form_pill.rb
|
1036
|
-
- app/pb_kits/playbook/pb_gauge/_gauge.jsx
|
1037
1053
|
- app/pb_kits/playbook/pb_gauge/_gauge.scss
|
1054
|
+
- app/pb_kits/playbook/pb_gauge/_gauge.tsx
|
1038
1055
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
|
1039
1056
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
|
1040
1057
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
|
@@ -1311,8 +1328,8 @@ files:
|
|
1311
1328
|
- app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
|
1312
1329
|
- app/pb_kits/playbook/pb_lightbox/lightbox.scss
|
1313
1330
|
- app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
|
1314
|
-
- app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
|
1315
1331
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.scss
|
1332
|
+
- app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
|
1316
1333
|
- app/pb_kits/playbook/pb_line_graph/docs/_description.md
|
1317
1334
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
|
1318
1335
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
|
@@ -1460,6 +1477,15 @@ files:
|
|
1460
1477
|
- app/pb_kits/playbook/pb_online_status/docs/index.js
|
1461
1478
|
- app/pb_kits/playbook/pb_online_status/online_status.html.erb
|
1462
1479
|
- app/pb_kits/playbook/pb_online_status/online_status.rb
|
1480
|
+
- app/pb_kits/playbook/pb_pagination/_pagination.scss
|
1481
|
+
- app/pb_kits/playbook/pb_pagination/_pagination.tsx
|
1482
|
+
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
|
1483
|
+
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
|
1484
|
+
- app/pb_kits/playbook/pb_pagination/docs/example.yml
|
1485
|
+
- app/pb_kits/playbook/pb_pagination/docs/index.js
|
1486
|
+
- app/pb_kits/playbook/pb_pagination/pagination.html.erb
|
1487
|
+
- app/pb_kits/playbook/pb_pagination/pagination.rb
|
1488
|
+
- app/pb_kits/playbook/pb_pagination/pagination.test.jsx
|
1463
1489
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
|
1464
1490
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
1465
1491
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
|
@@ -2097,7 +2123,7 @@ files:
|
|
2097
2123
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
2098
2124
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
2099
2125
|
- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
|
2100
|
-
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.
|
2126
|
+
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
|
2101
2127
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
2102
2128
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
2103
2129
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
|
@@ -2223,7 +2249,6 @@ files:
|
|
2223
2249
|
- app/pb_kits/playbook/playbook-doc.js
|
2224
2250
|
- app/pb_kits/playbook/playbook-rails-react-bindings.js
|
2225
2251
|
- app/pb_kits/playbook/playbook-rails.js
|
2226
|
-
- app/pb_kits/playbook/plugins/pb_chart.js
|
2227
2252
|
- app/pb_kits/playbook/tokens/_animation-curves.scss
|
2228
2253
|
- app/pb_kits/playbook/tokens/_border_radius.scss
|
2229
2254
|
- app/pb_kits/playbook/tokens/_colors.scss
|
@@ -2321,6 +2346,7 @@ files:
|
|
2321
2346
|
- lib/playbook/markdown/template_handler.rb
|
2322
2347
|
- lib/playbook/number_spacing.rb
|
2323
2348
|
- lib/playbook/order.rb
|
2349
|
+
- lib/playbook/pagination_renderer.rb
|
2324
2350
|
- lib/playbook/pb_doc_helper.rb
|
2325
2351
|
- lib/playbook/pb_forms_helper.rb
|
2326
2352
|
- lib/playbook/pb_kit_helper.rb
|
@@ -2359,9 +2385,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2359
2385
|
version: '0'
|
2360
2386
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2361
2387
|
requirements:
|
2362
|
-
- - "
|
2388
|
+
- - ">"
|
2363
2389
|
- !ruby/object:Gem::Version
|
2364
|
-
version:
|
2390
|
+
version: 1.3.1
|
2365
2391
|
requirements: []
|
2366
2392
|
rubygems_version: 3.3.7
|
2367
2393
|
signing_key:
|
@@ -1,111 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import { globalProps } from '../utilities/globalProps'
|
7
|
-
import pbChart from '../plugins/pb_chart'
|
8
|
-
|
9
|
-
type BarGraphProps = {
|
10
|
-
align?: "left" | "right" | "center",
|
11
|
-
axisTitle: string,
|
12
|
-
dark?: Boolean,
|
13
|
-
xAxisCategories: array,
|
14
|
-
yAxisMin: number,
|
15
|
-
yAxisMax: number,
|
16
|
-
chartData: array<{
|
17
|
-
name: string,
|
18
|
-
data: array<number>,
|
19
|
-
}>,
|
20
|
-
className?: string,
|
21
|
-
id: number,
|
22
|
-
pointStart: number,
|
23
|
-
subTitle?: string,
|
24
|
-
title: string,
|
25
|
-
type?: string,
|
26
|
-
legend?: boolean,
|
27
|
-
toggleLegendClick?: boolean,
|
28
|
-
height?: string,
|
29
|
-
colors: array,
|
30
|
-
layout?: "horizontal" | "vertical" | "proximate",
|
31
|
-
verticalAlign?: "top" | "middle" | "bottom",
|
32
|
-
x?: number,
|
33
|
-
y?: number,
|
34
|
-
}
|
35
|
-
|
36
|
-
export default class BarGraph extends React.Component<BarGraphProps> {
|
37
|
-
static defaultProps = {
|
38
|
-
align: "center",
|
39
|
-
className: 'pb_bar_graph',
|
40
|
-
dark: false,
|
41
|
-
type: 'column',
|
42
|
-
legend: false,
|
43
|
-
toggleLegendClick: true,
|
44
|
-
layout: "horizontal",
|
45
|
-
verticalAlign: "bottom",
|
46
|
-
x: 0,
|
47
|
-
y: 0,
|
48
|
-
}
|
49
|
-
|
50
|
-
componentDidMount() {
|
51
|
-
const {
|
52
|
-
align,
|
53
|
-
axisTitle,
|
54
|
-
dark,
|
55
|
-
xAxisCategories,
|
56
|
-
yAxisMin,
|
57
|
-
yAxisMax,
|
58
|
-
className,
|
59
|
-
chartData,
|
60
|
-
id,
|
61
|
-
pointStart,
|
62
|
-
subTitle,
|
63
|
-
title,
|
64
|
-
type,
|
65
|
-
legend,
|
66
|
-
height,
|
67
|
-
toggleLegendClick,
|
68
|
-
colors = [],
|
69
|
-
layout,
|
70
|
-
verticalAlign,
|
71
|
-
x,
|
72
|
-
y,
|
73
|
-
} = this.props
|
74
|
-
|
75
|
-
new pbChart(`.${className}`, {
|
76
|
-
align,
|
77
|
-
axisTitle: axisTitle,
|
78
|
-
dark,
|
79
|
-
chartData: chartData,
|
80
|
-
colors: colors,
|
81
|
-
id: id,
|
82
|
-
pointStart: pointStart,
|
83
|
-
subtitle: subTitle,
|
84
|
-
type,
|
85
|
-
title: title,
|
86
|
-
xAxisCategories: xAxisCategories,
|
87
|
-
yAxisMin: yAxisMin,
|
88
|
-
yAxisMax: yAxisMax,
|
89
|
-
legend,
|
90
|
-
toggleLegendClick: toggleLegendClick,
|
91
|
-
height: height,
|
92
|
-
layout,
|
93
|
-
verticalAlign,
|
94
|
-
x,
|
95
|
-
y,
|
96
|
-
})
|
97
|
-
}
|
98
|
-
|
99
|
-
props: BarGraphProps
|
100
|
-
|
101
|
-
render() {
|
102
|
-
const { className, id } = this.props
|
103
|
-
|
104
|
-
return (
|
105
|
-
<div
|
106
|
-
className={classnames(globalProps(this.props), className)}
|
107
|
-
id={id}
|
108
|
-
/>
|
109
|
-
)
|
110
|
-
}
|
111
|
-
}
|
@@ -1,151 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React, { useEffect, useRef } from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
import Highcharts from 'highcharts'
|
6
|
-
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
8
|
-
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
9
|
-
|
10
|
-
import pbChart from '../plugins/pb_chart'
|
11
|
-
type CircleChartProps = {
|
12
|
-
align?: "left" | "right" | "center",
|
13
|
-
aria: Object,
|
14
|
-
chartData?: array,
|
15
|
-
children: Node,
|
16
|
-
className?: string,
|
17
|
-
colors: array,
|
18
|
-
dark?: Boolean,
|
19
|
-
data?: Object,
|
20
|
-
dataLabelHtml: string,
|
21
|
-
dataLabels: boolean,
|
22
|
-
headerFormat: string,
|
23
|
-
height?: string,
|
24
|
-
id?: string,
|
25
|
-
innerSize: "sm" | "md" | "lg" | "none",
|
26
|
-
legend: boolean,
|
27
|
-
maxPointSize: number,
|
28
|
-
minPointSize: number,
|
29
|
-
rounded: boolean,
|
30
|
-
startAngle: number,
|
31
|
-
style: string,
|
32
|
-
title: string,
|
33
|
-
tooltipHtml: string,
|
34
|
-
useHtml: boolean,
|
35
|
-
zMin: number,
|
36
|
-
layout?: "horizontal" | "vertical" | "proximate",
|
37
|
-
verticalAlign?: "top" | "middle" | "bottom",
|
38
|
-
x?: number,
|
39
|
-
y?: number,
|
40
|
-
}
|
41
|
-
|
42
|
-
const CircleChart = (props: CircleChartProps) => {
|
43
|
-
const {
|
44
|
-
align = 'center',
|
45
|
-
aria = {},
|
46
|
-
chartData = [{}],
|
47
|
-
children,
|
48
|
-
className,
|
49
|
-
colors = [],
|
50
|
-
dark = false,
|
51
|
-
data = {},
|
52
|
-
dataLabelHtml = '<div>{point.name}</div>',
|
53
|
-
dataLabels = false,
|
54
|
-
headerFormat = null,
|
55
|
-
height,
|
56
|
-
id,
|
57
|
-
innerSize = 'md',
|
58
|
-
legend = false,
|
59
|
-
maxPointSize = null,
|
60
|
-
minPointSize = null,
|
61
|
-
rounded = false,
|
62
|
-
startAngle = null,
|
63
|
-
style = 'pie',
|
64
|
-
title = '',
|
65
|
-
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
|
66
|
-
'<b>{point.y}</b>',
|
67
|
-
useHtml = false,
|
68
|
-
zMin = null,
|
69
|
-
layout = 'horizontal',
|
70
|
-
verticalAlign = 'bottom',
|
71
|
-
x = 0,
|
72
|
-
y = 0,
|
73
|
-
} = props
|
74
|
-
|
75
|
-
const ariaProps = buildAriaProps(aria)
|
76
|
-
const dataProps = buildDataProps(data)
|
77
|
-
const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
|
78
|
-
const innerSizeFormat = (size) => innerSizes[size]
|
79
|
-
const roundedBorderWidth = rounded ? 20 : null
|
80
|
-
const roundedBorderColor = rounded ? null : ''
|
81
|
-
|
82
|
-
// Runs first time component Renders
|
83
|
-
useEffect(() => {
|
84
|
-
const formattedChartData = chartData.map((obj) => {
|
85
|
-
obj.y = obj.value
|
86
|
-
delete obj.value
|
87
|
-
return obj
|
88
|
-
})
|
89
|
-
|
90
|
-
new pbChart('.selector', {
|
91
|
-
align,
|
92
|
-
id,
|
93
|
-
colors,
|
94
|
-
borderColor: roundedBorderColor,
|
95
|
-
borderWidth: roundedBorderWidth,
|
96
|
-
chartData: formattedChartData,
|
97
|
-
dark,
|
98
|
-
title,
|
99
|
-
type: style,
|
100
|
-
showInLegend: legend,
|
101
|
-
dataLabelHtml,
|
102
|
-
dataLabels,
|
103
|
-
headerFormat,
|
104
|
-
height: height,
|
105
|
-
tooltipHtml,
|
106
|
-
useHTML: useHtml,
|
107
|
-
minPointSize,
|
108
|
-
maxPointSize,
|
109
|
-
innerSize: innerSizeFormat(innerSize),
|
110
|
-
zMin,
|
111
|
-
startAngle,
|
112
|
-
layout,
|
113
|
-
verticalAlign,
|
114
|
-
x,
|
115
|
-
y,
|
116
|
-
})
|
117
|
-
}, [])
|
118
|
-
|
119
|
-
const componentDidMount = useRef(false)
|
120
|
-
|
121
|
-
// Doesn't run the first time but runs every subsequent render
|
122
|
-
useEffect(() => {
|
123
|
-
if (componentDidMount.current) {
|
124
|
-
Highcharts.charts.forEach((chart) => {
|
125
|
-
if (chart && chart.renderTo.id === id) {
|
126
|
-
const updatedValueArray = chartData.map((obj) => {
|
127
|
-
return obj.value
|
128
|
-
})
|
129
|
-
chart.series[0].setData(updatedValueArray)
|
130
|
-
}
|
131
|
-
})
|
132
|
-
} else {
|
133
|
-
componentDidMount.current = true
|
134
|
-
}
|
135
|
-
}, [chartData])
|
136
|
-
return (
|
137
|
-
<div id={`wrapper-circle-chart-${id}`}>
|
138
|
-
<div
|
139
|
-
id={id}
|
140
|
-
{...ariaProps}
|
141
|
-
{...dataProps}
|
142
|
-
className={classnames('pb_circle_chart', globalProps(props), className)}
|
143
|
-
/>
|
144
|
-
<If condition={children}>
|
145
|
-
<div className="pb-circle-chart-block">{children}</div>
|
146
|
-
</If>
|
147
|
-
</div>
|
148
|
-
)
|
149
|
-
}
|
150
|
-
|
151
|
-
export default CircleChart
|