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.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/index.js +2 -2
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
  6. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
  7. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +207 -0
  8. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
  9. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +7 -47
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
  11. data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
  12. data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
  13. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
  14. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
  15. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +202 -0
  16. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
  18. data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
  19. data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
  21. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +68 -0
  22. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +41 -0
  23. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +28 -0
  24. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +12 -0
  25. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +9 -0
  26. data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
  27. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  28. data/app/pb_kits/playbook/pb_pagination/pagination.rb +18 -0
  29. data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +17 -0
  30. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
  31. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
  32. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  33. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
  34. data/app/pb_kits/playbook/playbook-rails.js +0 -4
  35. data/lib/playbook/kit_base.rb +2 -0
  36. data/lib/playbook/pagination_renderer.rb +41 -0
  37. data/lib/playbook/version.rb +2 -2
  38. data/lib/playbook.rb +1 -0
  39. metadata +38 -12
  40. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -111
  41. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -151
  42. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
  43. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -113
  44. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
  45. 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={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
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(
@@ -1,7 +1,3 @@
1
- // Charts
2
- import pbChart from './plugins/pb_chart'
3
- window.pbChart = pbChart
4
-
5
1
  // Forms
6
2
  import './pb_form/pb_form_validation'
7
3
 
@@ -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
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.14.0"
5
- VERSION = "11.15.0"
4
+ PREVIOUS_VERSION = "11.16.0"
5
+ VERSION = "11.16.0.pre.alpha.paginationrails1"
6
6
  end
data/lib/playbook.rb CHANGED
@@ -12,6 +12,7 @@ require "playbook/pb_doc_helper"
12
12
  require "playbook/kit_base"
13
13
  require "playbook/kit_resolver"
14
14
  require "playbook/markdown"
15
+ require "playbook/pagination_renderer"
15
16
 
16
17
  module Playbook
17
18
  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
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.15.0
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: 2022-12-19 00:00:00.000000000 Z
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/_circle_chart.jsx
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/pbChartsDarkTheme.js
642
- - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
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.jsx
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: '0'
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