playbook_ui 5.5.0.pre.alpha1 → 5.5.1.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 80d3445db1a3c2f93076e12a4a582addb5187c6a5ef3c36ddebbab3fb82a045f
-  data.tar.gz: 331cc223a6a087ff2a1f6799b25a3e8b91ec0cc85ec7904261843986075c4e62
+  metadata.gz: 18201295f38354edf0963e8a536728d406ba695521666e46bb8d9db0b1a51dac
+  data.tar.gz: '09be62b41d9777ac1f6269ce77a0955f06921ef8b4e1abdde30b9bfaee1dd435'
 SHA512:
-  metadata.gz: 5af755abbf2e1350a3cfe728b9e1290b81994cf675b2ecda3c00c9bb43e6c5c64353c1577e31d29d63588ffed84ec3638397b8e3ea31401c0c8814519906d897
-  data.tar.gz: 83b752409849ff081f195d317531dd16f1230954a712bdaaee15dfea65fe14de9e404394b1e9b0062513a7e95f5ebe6cb3149cbc86ce2be294be213cbb36708b
+  metadata.gz: 281294533bb71d290eba1a93ab8dbe820074e727eb3c468383cadbcbd19be223056c537717fa4be2b090a70a197a9fdf2ae55a9366d19039c34a3446e0540101
+  data.tar.gz: ebfbddf2c64330f83ffd3c6eb949b8b745a1a4740431d6fcf93734bb6b63721131978ab6f45ceb78d6d927e89823be642255387e1fa4a479ea554c26f46aadef

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -1,12 +1,22 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
+<div id="wrapper-circle-chart-<%= object.id %>">
+  <%= content_tag(:div, "",
+      aria: object.aria,
+      id: object.id,
+      data: object.data,
+      class: object.classname) do %>
+    <% content_for :pb_js do %>
+      <%= javascript_tag do %>
+        window.addEventListener('DOMContentLoaded', function() {
+          new pbChart('.selector', <%= object.chart_options %>)
+      
+        });
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>
+
+  <% if object.children %>
+    <div class="pb_circle_chart_block">
+      <%= capture(&object.children) %>
+    </div>
+  <% end %>
+</div>

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

@@ -4,3 +4,13 @@
 .pb_circle_chart {
 
 }
+
+.pb_circle_chart_block {
+    position:absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    text-align: center;
+    pointer-events: none;
+}

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

@@ -29,6 +29,10 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ''
+      prop :rounded, type: Playbook::Props::Boolean, default: false
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
+
 
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
@@ -50,12 +54,22 @@ module Playbook
         when "md"
           "50%"
         end
+      end
+
+      def rounded_border_width
+        rounded ? 20 : nil
+      end
 
+      def rounded_border_color
+        rounded == true ? 'null' : nil
       end
 
       def chart_options
         {
           id: id,
+          colors: colors,
+          borderColor: rounded_border_color,
+          borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
           title: title,
           type: chart_type,

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

@@ -0,0 +1,26 @@
+<% data_51 = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+<br><br>
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_51,
+    id: "with-a-block-2",
+    rounded: true,
+}) do %> 
+    <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
+<% end %>
+
+
+

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

@@ -0,0 +1,20 @@
+<% data_set = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_set,
+    id: "default-test-colors",
+    colors: ['data-6', 'data-4', 'data-2']
+}) %>

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

@@ -0,0 +1,22 @@
+<% data_rounded = [{
+    name: 'Waiting for Calls',
+    value: 20,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_rounded,
+    id: "default-test-rounded",
+    inner_size: "lg",
+    rounded: true,
+
+}) %>

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

@@ -2,8 +2,12 @@ examples:
 
   rails:
   - circle_chart_default: Default Style
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_inner_sizes: Inner Circle Size Options  
+
 

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,9 +1,34 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
+import colors from '../tokens/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
 
+// Map Data Color String Props to our SCSS Variables
+const mapColors = (array) => {
+  const newArray = array.map((item) => {
+    return item == 'data-1'
+      ? `${colors.data_1}`
+      : item == 'data-2'
+        ? `${colors.data_2}`
+        : item == 'data-3'
+          ? `${colors.data_3}`
+          : item == 'data-4'
+            ? `${colors.data_4}`
+            : item == 'data-5'
+              ? `${colors.data_5}`
+              : item == 'data-6'
+                ? `${colors.data_6}`
+                : item == 'data-7'
+                  ? `${colors.data_7}`
+                  : item == 'data-8'
+                    ? `${colors.data_8}`
+                    : ''
+  })
+  return newArray
+}
+
 class pbChart {
   defaults = {
     callbackInitializeBefore: () => {},
@@ -30,24 +55,46 @@ class pbChart {
     this.settings = this.extendDefaults(this.defaults, options)
 
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
-      this.setupPieChart()
+      this.setupPieChart(options)
     } else {
       this.setupChart()
     }
   }
 
-  setupPieChart() {
+  setupPieChart(options) {
     Highcharts.setOptions(highchartsTheme)
-
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
       },
       chart: {
         type: this.defaults.type,
+        events: {
+          render: function(event) {
+            const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+            const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
+            if (itemToMove !== null) {
+              itemToMove.style.height = `${event.target.chartHeight}px`
+              itemToMove.style.width = `${event.target.chartWidth}px`;
+              (chartContainer.firstChild).before(itemToMove)
+            }
+          },
+
+          redraw: function(event){
+            const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+            const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
+            if (itemToMove !== null) {
+              itemToMove.style.height = `${event.target.chartHeight}px`
+              itemToMove.style.width = `${event.target.chartWidth}px`;
+              (chartContainer.firstChild).before(itemToMove)
+            }
+          },
+        },
       },
+
       plotOptions: {
         pie: {
+          colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
           dataLabels: {
             enabled: this.defaults.dataLabels,
             connectorShape: 'straight',
@@ -55,8 +102,10 @@ class pbChart {
             format: this.defaults.dataLabelHtml,
           },
           showInLegend: this.defaults.showInLegend,
+
         },
       },
+
       tooltip: {
         headerFormat: this.defaults.headerFormat,
         pointFormat: this.defaults.tooltipHtml,
@@ -65,10 +114,12 @@ class pbChart {
       series: [{
         minPointSize: this.defaults.minPointSize,
         maxPointSize: this.defaults.maxPointSize,
-        innerSize: this.defaults.innerSize,
+        innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
         data: this.defaults.chartData,
         zMin: this.defaults.zMin,
         startAngle: this.defaults.startAngle,
+        borderWidth: this.defaults.borderWidth,
+        borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
       }],
       credits: false,
     })

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.5.0.pre.alpha1"
+  VERSION = "5.5.1-alpha4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.5.0.pre.alpha1
+  version: 5.5.1.pre.alpha4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-23 00:00:00.000000000 Z
+date: 2020-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -591,8 +591,11 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
@@ -1820,7 +1823,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System