playbook_ui 12.11.0 → 12.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53d5eae6427aba5ae9de4053e2069de8cf8a669c0f082c8a00066da74180be1d
-  data.tar.gz: 5d16ee2b64c60cbede34f42ad67e25a397f908c98f5a3fc1a3d3fa9edd1234a7
+  metadata.gz: 52982a7fd482e46a592ec1dd33c640b2f4c3468c8c2c6ef89e63c2ac3aedc642
+  data.tar.gz: 9b01af38e5ed588b0d649a9ff770a3aa6529cf8673eec79919b197f9c1cdacaa
 SHA512:
-  metadata.gz: 304866b64d95656b79835f2f7264f409b71a583ac6ac2e54870b6a19c3413815b162b39215eb849e92d9e045b4fc6f203b30ba065e82f4a60fd73befd7676244
-  data.tar.gz: 931c9aeeb4f9a0e317b3fe226ddcf3d1ec1b5ff52de4dcad9fb456e7a4c237f45f66b9b695adfdad63706f71519c40b14b4362fea2e83197f6c0737788375ee9
+  metadata.gz: a6c68065b2497b859a00255121fd7240cf0dc4f667c3c74ccccf1e59b6dae29d1a8c5146fe95780a1c9e5f90ced89fad71f79046a0c70b1723268e1674170b6d
+  data.tar.gz: '08ea2b02f9def8c1da0372a5a4b76a8740217256cb47582fda6d668736adbd936c7b086313a533a51ad0c1e809366068dfecf799dd5098b3d9296c83e374d638'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -32,6 +32,7 @@ type CircleChartProps = {
   startAngle?: number;
   style?: string;
   title?: string;
+  tooltipHtml: string;
   useHtml?: boolean;
   zMin?: number;
   layout?: "horizontal" | "vertical" | "proximate";
@@ -78,6 +79,7 @@ const CircleChart = ({
   startAngle = null,
   style = "pie",
   title,
+  tooltipHtml,
   useHtml = false,
   zMin = null,
   layout = "horizontal",
@@ -100,9 +102,7 @@ const CircleChart = ({
   Highcharts.setOptions({
     tooltip: {
       headerFormat: null,
-      pointFormat:
-        '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-        "<b>{point.y}</b>",
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
       useHTML: useHtml,
     },
   });

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -24,6 +24,9 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
       prop :height
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data,
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
+    id: "default-test"
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import CircleChart from '../_circle_chart'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartCustomTooltip = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
+        {...props}
+    />
+  </div>
+)
+
+export default CircleChartCustomTooltip

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -9,7 +9,8 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_custom_tooltip: Tooltip Customization
 
   react:
   - circle_chart_default: Default Style
@@ -22,5 +23,6 @@ examples:
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_custom_tooltip: Tooltip Customization
 
 

data/app/pb_kits/playbook/pb_circle_chart/docs/index.js

@@ -8,3 +8,4 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.10.0"
-  VERSION = "12.11.0"
+  PREVIOUS_VERSION = "12.11.0"
+  VERSION = "12.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.11.0
+  version: 12.12.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-28 00:00:00.000000000 Z
+date: 2023-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -570,6 +570,9 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb