playbook_ui_docs 16.8.0.pre.alpha.PLAY3001updateviewcomponent16599 → 16.8.0.pre.alpha.PLAY298516635
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/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb +90 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx +100 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +2 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 607c1804459a354194d24100f40cdaced17d48e617b10848a436d89c77845ca2
|
|
4
|
+
data.tar.gz: 9e9027819461e6b88c8ca40e91ec75655ed31fbd42f9a45b2e9030bff9d0f65f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '01307283a84194a5a43cb5a76afd1072b3c26669e279545856759bedb7f0dcd3ed07e54a78134adf9432545c882db00275ecdf41740c3a79323c10f9daab6e75'
|
|
7
|
+
data.tar.gz: 593d729f6651f87d6f70db11db08b13236e2b71c783d46151c7984b67cea122d7b1bc5ea3b81ea309c06dc0f1787818f418b4dbdebe2f6a7a2dd31df280f7aba
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<% data = [
|
|
2
|
+
{
|
|
3
|
+
name: "EV",
|
|
4
|
+
y: 23.9,
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
name: "Hybrids",
|
|
8
|
+
y: 12.6,
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: "Diesel",
|
|
12
|
+
y: 37.0,
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: "Petrol",
|
|
16
|
+
y: 26.4,
|
|
17
|
+
},
|
|
18
|
+
] %>
|
|
19
|
+
|
|
20
|
+
<% total = data.sum { |point| point[:y] } %>
|
|
21
|
+
<% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
|
|
22
|
+
|
|
23
|
+
<% chart_options = {
|
|
24
|
+
chart: {
|
|
25
|
+
type: "pie",
|
|
26
|
+
},
|
|
27
|
+
accessibility: {
|
|
28
|
+
point: {
|
|
29
|
+
valueSuffix: "%",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
text: "2023 Norway car registrations",
|
|
34
|
+
floating: true,
|
|
35
|
+
align: "center",
|
|
36
|
+
verticalAlign: "top",
|
|
37
|
+
y: 8,
|
|
38
|
+
},
|
|
39
|
+
subtitle: {
|
|
40
|
+
text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
|
|
41
|
+
useHTML: true,
|
|
42
|
+
floating: true,
|
|
43
|
+
align: "center",
|
|
44
|
+
verticalAlign: "middle",
|
|
45
|
+
y: 8,
|
|
46
|
+
style: {
|
|
47
|
+
textAlign: "center",
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
tooltip: {
|
|
51
|
+
pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
|
|
52
|
+
},
|
|
53
|
+
legend: {
|
|
54
|
+
enabled: false,
|
|
55
|
+
},
|
|
56
|
+
plotOptions: {
|
|
57
|
+
series: {
|
|
58
|
+
allowPointSelect: true,
|
|
59
|
+
cursor: "pointer",
|
|
60
|
+
borderRadius: 8,
|
|
61
|
+
dataLabels: [
|
|
62
|
+
{
|
|
63
|
+
enabled: true,
|
|
64
|
+
distance: 20,
|
|
65
|
+
format: "{point.name}",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
enabled: true,
|
|
69
|
+
distance: -15,
|
|
70
|
+
format: "{point.percentage:.0f}%",
|
|
71
|
+
style: {
|
|
72
|
+
fontSize: "0.9em",
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
showInLegend: true,
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
series: [
|
|
80
|
+
{
|
|
81
|
+
name: "Registrations",
|
|
82
|
+
colorByPoint: true,
|
|
83
|
+
center: ["50%", "50%"],
|
|
84
|
+
innerSize: "75%",
|
|
85
|
+
data: data,
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
} %>
|
|
89
|
+
|
|
90
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PbCircleChart from "../_pb_circle_chart";
|
|
3
|
+
|
|
4
|
+
const data = [
|
|
5
|
+
{
|
|
6
|
+
name: "EV",
|
|
7
|
+
y: 23.9,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: "Hybrids",
|
|
11
|
+
y: 12.6,
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
name: "Diesel",
|
|
15
|
+
y: 37.0,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "Petrol",
|
|
19
|
+
y: 26.4,
|
|
20
|
+
},
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
const total = data.reduce((sum, point) => sum + point.y, 0);
|
|
24
|
+
const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
|
|
25
|
+
|
|
26
|
+
const chartOptions = {
|
|
27
|
+
chart: {
|
|
28
|
+
type: "pie",
|
|
29
|
+
},
|
|
30
|
+
accessibility: {
|
|
31
|
+
point: {
|
|
32
|
+
valueSuffix: "%",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
title: {
|
|
36
|
+
text: "2023 Norway car registrations",
|
|
37
|
+
floating: true,
|
|
38
|
+
align: "center",
|
|
39
|
+
verticalAlign: "top",
|
|
40
|
+
y: 8,
|
|
41
|
+
},
|
|
42
|
+
subtitle: {
|
|
43
|
+
text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
|
|
44
|
+
useHTML: true,
|
|
45
|
+
floating: true,
|
|
46
|
+
align: "center",
|
|
47
|
+
verticalAlign: "middle",
|
|
48
|
+
y: 8,
|
|
49
|
+
style: {
|
|
50
|
+
textAlign: "center",
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
tooltip: {
|
|
54
|
+
pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
|
|
55
|
+
},
|
|
56
|
+
legend: {
|
|
57
|
+
enabled: false,
|
|
58
|
+
},
|
|
59
|
+
plotOptions: {
|
|
60
|
+
series: {
|
|
61
|
+
allowPointSelect: true,
|
|
62
|
+
cursor: "pointer",
|
|
63
|
+
borderRadius: 8,
|
|
64
|
+
dataLabels: [
|
|
65
|
+
{
|
|
66
|
+
enabled: true,
|
|
67
|
+
distance: 20,
|
|
68
|
+
format: "{point.name}",
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
enabled: true,
|
|
72
|
+
distance: -15,
|
|
73
|
+
format: "{point.percentage:.0f}%",
|
|
74
|
+
style: {
|
|
75
|
+
fontSize: "0.9em",
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
showInLegend: true,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
series: [
|
|
83
|
+
{
|
|
84
|
+
name: "Registrations",
|
|
85
|
+
colorByPoint: true,
|
|
86
|
+
center: ["50%", "50%"],
|
|
87
|
+
innerSize: "75%",
|
|
88
|
+
data,
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const PbCircleChartCenteredData = (props) => (
|
|
94
|
+
<PbCircleChart
|
|
95
|
+
options={chartOptions}
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
export default PbCircleChartCenteredData;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This example shows how to achieve centered data. This data will remain in the center of all screen sizes.
|
|
@@ -11,6 +11,7 @@ examples:
|
|
|
11
11
|
- pb_circle_chart_with_title: With Title
|
|
12
12
|
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
|
13
13
|
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
|
14
|
+
- pb_circle_chart_centered_data: Centered Data
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
react:
|
|
@@ -25,5 +26,6 @@ examples:
|
|
|
25
26
|
- pb_circle_chart_with_title: With Title
|
|
26
27
|
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
|
27
28
|
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
|
29
|
+
- pb_circle_chart_centered_data: Centered Data
|
|
28
30
|
|
|
29
31
|
|
|
@@ -8,4 +8,5 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
|
|
|
8
8
|
export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
|
|
9
9
|
export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
|
|
10
10
|
export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
|
|
11
|
-
export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
|
|
11
|
+
export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
|
|
12
|
+
export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.8.0.pre.alpha.
|
|
4
|
+
version: 16.8.0.pre.alpha.PLAY298516635
|
|
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: 2026-05-
|
|
12
|
+
date: 2026-05-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -1838,6 +1838,9 @@ files:
|
|
|
1838
1838
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
|
|
1839
1839
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
|
|
1840
1840
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
|
|
1841
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb
|
|
1842
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx
|
|
1843
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md
|
|
1841
1844
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
|
|
1842
1845
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
|
|
1843
1846
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
|