playbook_ui 5.2.0 → 5.3.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb8840e61c52b773111c22632a90f9543ff610609017855691c9cd4e1999315e
-  data.tar.gz: 4abd95023a74be43d334f19bcd57160edbd76f51a3be26733e0e22463413109c
+  metadata.gz: 456edb4112fd56741c0aca0d3e8bcd4b9709abc6a8245dc635bbb9de8a453476
+  data.tar.gz: d1f53edaa77edf61e3af081c6b4bd6bf4723214a0d99158ddec934aba8974229
 SHA512:
-  metadata.gz: d2c02a383c9fa07b0892c1ead36815a66cfcf699d5deecee13d109e664affc7e173ddda17b6301f1160cc1cc59c8a01854129f30d14dd12edc16d0c60f032861
-  data.tar.gz: ce596c4e96e0665b56f4c9a4622ca004600c3c613c87329ed0321ebf315fd16fffd1b6220b74bff7fdb23df9f129e4cf65602af1e7880cf70c06080c678cbd61
+  metadata.gz: 6ddc39e458c5783a6cf0a231399d51b0168a1342fe80ebfba6b8814854c764420e332af64871b8294536d46864f85ab91cd58dd07400df32be10d9cc833fdd0f
+  data.tar.gz: 74656e11978287baba8979c672840258db5410f1e744c5377b9fbe831dcd753b3b03c2b1e48f0c759b959d948f042bcf28debca416747c65278a9a9b76920558

data/app/pb_kits/playbook/_playbook.scss

@@ -26,6 +26,7 @@
 @import 'pb_form/form';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
+@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';

data/app/pb_kits/playbook/data/menu.yml

@@ -14,10 +14,11 @@ kits:
   - checkbox
   - charts_and_graphs:
     - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
     - legend
     - line_graph
-    - distribution_bar
-    - circle_chart
 
   - filter
   - fixed_confirmation_toast

data/app/pb_kits/playbook/index.js

@@ -25,6 +25,7 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
 export FormPill from './pb_form_pill/_form_pill.jsx'
+export Gauge from './pb_gauge/_gauge.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -38,6 +38,7 @@ import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -118,6 +119,7 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...FormPill,
+  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,

data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss

@@ -2,6 +2,7 @@
 @import "flex_examples";
 @import "code_snippet";
 @import "kit_doc";
+@import "bg_light_doc_example";
 
 @import "color_utilities";
 @import "spacing_tokens";

data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss

@@ -0,0 +1,7 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+
+.bg-light-doc-example {
+    background: $bg_light;
+    padding: $space_lg;
+}

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -2,26 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 type BadgeProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   id?: String,
-  text?: String,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
   rounded?: Boolean,
+  text?: String,
+  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
   const {
+    aria = {},
     className,
     dark = false,
+    data = {},
     id,
+    rounded = false,
     text,
     variant = 'neutral',
-    rounded = false,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     className,
     buildCss('pb_badge_kit', variant, {
@@ -33,6 +44,8 @@ const Badge = (props: BadgeProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -16,6 +16,7 @@ type CardPropTypes = {
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
+  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
@@ -62,9 +63,11 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     shadow = 'none',
+    borderNone = false,
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     dark: dark,
     selected,
     deselected: !selected,

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -16,6 +16,10 @@
     }
   }
 
+  &[class*=_border_none] {
+    border-width: 0px;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,6 +15,8 @@ module Playbook
                        default: {}
       prop :dark, type: Playbook::Props::Boolean,
                  default: false
+      prop :border_none, type: Playbook::Props::Boolean,
+                         default: false
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +24,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           dark_class)
+                           dark_class,
+                           border_class)
       end
 
       def body_padding
@@ -55,6 +58,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def border_class
+        border_none == true ? "border_none" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb

@@ -0,0 +1,7 @@
+<div class="bg-light-doc-example">
+
+    <%= pb_rails("card", props: { border_none: true })  do %>
+        Card content
+    <% end %>
+    
+</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardBorderNone = () => {
+  return (
+    <div className="bg-light-doc-example">
+
+      <Card borderNone>{'Card content'}</Card>
+
+    </div>
+  )
+}
+
+export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md

@@ -0,0 +1 @@
+Remove card border <b>only</b> for dashboard cards.

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

@@ -9,6 +9,7 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border
   react:
   - card_light: Default
   - card_dark: Dark Cards
@@ -19,3 +20,4 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardDark } from './_card_dark.jsx'
+export { default as CardBorderNone } from './_card_border_none.jsx'

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -124,6 +124,13 @@ const highchartsTheme = {
       fontSize: typography.text_smaller,
     },
   },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    background: {
+      borderColor: colors.border_light,
+    },
+  },
 
   plotOptions: {
     series: {
@@ -144,6 +151,25 @@ const highchartsTheme = {
       threshold: null,
     },
 
+    // GAUGE STYLES
+    solidgauge: {
+      borderColor: colors.primary,
+      borderWidth: 20,
+      radius: 90,
+      innerRadius: '90%',
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_lt_default,
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+
     // PIE STYLES
     pie: {
       colors: [

data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag(:div, "",
+    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 %>)
+    })
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -0,0 +1,105 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import { pbChart } from '../'
+import { spacing } from '../utilities/spacing.js'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type GaugeProps = {
+  aria: Object,
+  className?: String,
+  chartData?: Array,
+  data?: Object,
+  fullCircle: Boolean,
+  height: String,
+  id?: String,
+  max: Number,
+  min: Number,
+  prefix: String,
+  showLabels: Boolean,
+  style: String,
+  suffix: String,
+  title: String,
+  tooltipHtml: String,
+}
+
+const Gauge = (props: GaugeProps) => {
+  const {
+    aria = {},
+    className,
+    chartData = [{ name: 'Name', value: 0 }],
+    data = {},
+    fullCircle = false,
+    height = null,
+    id,
+    max = 100,
+    min = 0,
+    prefix = '',
+    showLabels = false,
+    style = 'solidgauge',
+    suffix = '',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_gauge_kit': true,
+  })
+  // Runs first time component Renders
+  useEffect(() => {
+    chartData.forEach((obj) => {
+      obj.y = obj.value
+      delete obj.value
+    })
+
+    new pbChart('.selector', {
+      id: id,
+      chartData: chartData,
+      circumference: fullCircle ? [0, 360] : [-100, 100],
+      height: height,
+      min: min,
+      max: max,
+      prefix: prefix,
+      title: title,
+      suffix: suffix,
+      showLabels: showLabels,
+      style: style,
+      tooltipHtml: tooltipHtml,
+      type: 'gauge',
+    })
+  }, [])
+
+  const componentDidMount = useRef(false)
+  // Doesn't run the first time but runs every subsequent render
+  useEffect(() => {
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart) => {
+        if (chart.renderTo.id === id) {
+          chart.series[0].setData([chartData[0].value])
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  })
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className, spacing(props))}
+        id={id}
+    />
+  )
+}
+
+export default Gauge

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -0,0 +1,11 @@
+[class^=pb_gauge_kit] {
+
+  .suffix {
+    fill: $text_lt_light;
+    font: $regular $font_larger $font_family_base;
+  }
+  .prefix {
+    fill: $text_lt_light;
+    font: $regular $font_base $font_family_base;
+  }
+}

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb

@@ -0,0 +1,11 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 45,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-default",
+  chart_data: data,
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Point1', value: 45 },
+]
+
+const GaugeDefault = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+    />
+  </div>
+)
+
+export default GaugeDefault

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Capacity',
+    value: 75,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "full-circle",
+  chart_data: data,
+  full_circle: true,
+  title: "Seating Capacity",
+  suffix: "%"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Capacity', value: 75 },
+]
+
+const GaugeFullCircle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        fullCircle
+        id="gauge-full-circle"
+        suffix="%"
+        title="Seating Capacity"
+    />
+  </div>
+)
+
+export default GaugeFullCircle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-px",
+  chart_data: [{ name: "Pixel Height", value: 400 }],
+  height: '400',
+  title: "Fixed Height in Pixels",
+  suffix: "px"
+}) %>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-percent",
+  chart_data: [{ name: "Percentage Height", value: 45 }],
+  height: '45%',
+  title: "Height as Percentage of Width",
+  suffix: "%"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const GaugeHeight = () => (
+  <div>
+    <Gauge
+        chartData={[ { name: 'Name', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+    />
+    <Gauge
+        chartData={[ { name: 'Name', value: 45 } ]}
+        height="45%"
+        id="gauge-height-percent"
+        suffix="%"
+        title="Height as Percentage of Width"
+    />
+  </div>
+)
+
+export default GaugeHeight

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Button, Gauge } from '../../'
+
+const GaugeLiveData = () => {
+  const [value, setValue] = useState(50)
+
+  const updateState = () => {
+    setValue(Math.floor(Math.random() * 100))
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateState}
+          text="Update State"
+      />
+      <Gauge
+          chartData={[{ name: 'Name', value: value }]}
+          id="gauge-live-data"
+      />
+    </div>
+  )
+}
+
+export default GaugeLiveData

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("title", props: {
+  text: "Min defaults to 0, Max to 100.",
+  tag: "h3",
+  size: 3
+}) %>
+
+<% data = [
+  {
+    name: 'Rating',
+    value: 4.5,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-min-max",
+  chart_data: data,
+  min: 0,
+  max: 5,
+  show_labels: true,
+  title: "Product Rating"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Gauge, Title } from '../../'
+
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
+
+const GaugeMinMax = () => (
+  <div>
+    <Title
+        size={3}
+        tag="h3"
+        text="Min defaults to 0, Max to 100."
+    />
+    <Gauge
+        chartData={data}
+        id="gauge-min-max"
+        max={5}
+        min={0}
+        showLabels
+        title="Product Rating"
+    />
+  </div>
+)
+
+export default GaugeMinMax

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("title", props: {
+  text: "Gauge resizes dynamically to fit whatever element it's placed within.",
+  tag: "h3",
+  size: 3
+}) %>
+
+
+<%= pb_rails("flex", props: {wrap: true}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing4",
+        chart_data: [{ name: "Name", value: 100 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing3",
+        chart_data: [{ name: "Name", value: 75 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing2",
+        chart_data: [{ name: "Name", value: 50 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing1",
+        chart_data: [{ name: "Name", value: 25 }],
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Flex, FlexItem, Gauge, Title } from '../../'
+
+const GaugeSizing = () => (
+  <div>
+    <Title
+        size={3}
+        tag="h3"
+        text="Gauge resizes dynamically to fit whatever element it's placed within."
+    />
+    <Flex
+        wrap
+    >
+      <FlexItem fixedSize="400px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 100 } ]}
+            id="gauge-sizing4"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="300px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 75 } ]}
+            id="gauge-sizing3"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="200px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 50 } ]}
+            id="gauge-sizing2"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="125px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 25 } ]}
+            id="gauge-sizing1"
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Score',
+    value: 780,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-title",
+  chart_data: data,
+  min: 300,
+  max: 850,
+  title: "Credit Score",
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Score', value: 780 },
+]
+
+const GaugeTitle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-title"
+        max={850}
+        min={300}
+        title="Credit Score"
+    />
+  </div>
+)
+
+export default GaugeTitle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -0,0 +1,29 @@
+<% data1 = [
+  {
+    name: 'Data Used',
+    value: 32,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units1",
+  chart_data: data1,
+  title: "Data Usage",
+  suffix: "GB"
+}) %>
+
+<% data2 = [
+  {
+    name: 'Sales to Date',
+    value: 65,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units2",
+  chart_data: data2,
+  title: "Sales Goal",
+  prefix: "$",
+  suffix: "k",
+
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data1 = [
+  { name: 'Data Used', value: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', value: 65 },
+]
+
+const GaugeUnits = () => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+    />
+  </div>
+)
+
+export default GaugeUnits

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

@@ -0,0 +1,22 @@
+examples:
+  
+  rails:
+  - gauge_default: Default
+  - gauge_title: Title
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  
+  
+  react:
+  - gauge_default: Default
+  - gauge_title: Title 
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  - gauge_live_data: Live Data
+  

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

@@ -0,0 +1,8 @@
+export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
+export { default as GaugeHeight } from './_gauge_height.jsx'
+export { default as GaugeMinMax } from './_gauge_min_max.jsx'
+export { default as GaugeSizing } from './_gauge_sizing.jsx'
+export { default as GaugeTitle } from './_gauge_title.jsx'
+export { default as GaugeUnits } from './_gauge_units.jsx'
+export { default as GaugeLiveData } from './_gauge_live_data.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbGauge
+    class Gauge
+      include Playbook::Props
+
+      partial "pb_gauge/gauge"
+
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: [{ name: "Name", value: 0 }]
+      prop :style, type: Playbook::Props::Enum,
+                   values: %w[solidgauge],
+                   default: "solidgauge"
+      prop :title, type: Playbook::Props::String, default: ""
+      prop :prefix, type: Playbook::Props::String, default: ""
+      prop :suffix, type: Playbook::Props::String, default: ""
+      prop :height, type: Playbook::Props::String, default: nil
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
+      prop :full_circle, type: Playbook::Props::Boolean, default: false
+      prop :show_labels, type: Playbook::Props::Boolean, default: false
+      prop :min, type: Playbook::Props::Numeric, default: 0
+      prop :max, type: Playbook::Props::Numeric, default: 100
+
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
+
+      def chart_options
+        {
+          id: id,
+          chartData: chart_data_formatted,
+          circumference: full_circle ? [0, 360] : [-100, 100],
+          height: height,
+          min: min,
+          max: max,
+          title: title,
+          suffix: suffix,
+          prefix: prefix,
+          showLabels: show_labels,
+          style: style,
+          tooltipHtml: tooltip_html,
+          type: "gauge",
+        }.to_json.html_safe
+      end
+
+      def classname
+        generate_classname("pb_gauge_kit")
+      end
+    end
+  end
+end

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

@@ -3,6 +3,8 @@ import Highcharts from 'highcharts'
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
 
 require('highcharts/modules/variable-pie')(Highcharts)
+import highchartsMore from 'highcharts/highcharts-more.js'
+import solidGauge from 'highcharts/modules/solid-gauge.js'
 
 class pbChart {
   defaults = {
@@ -31,11 +33,80 @@ class pbChart {
 
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart()
+    } else if (this.options.type == 'gauge') {
+      this.setupGauge()
     } else {
       this.setupChart()
     }
   }
 
+  setupGauge() {
+    highchartsMore(Highcharts)
+    solidGauge(Highcharts)
+    Highcharts.setOptions(highchartsTheme)
+
+    Highcharts.chart(this.defaults.id, {
+      chart: {
+        type: this.defaults.style,
+        height: this.defaults.height,
+      },
+      title: {
+        text: this.defaults.title,
+      },
+      yAxis: {
+        min: this.defaults.min,
+        max: this.defaults.max,
+        lineWidth: 0,
+        tickWidth: 0,
+        minorTickInterval: null,
+        tickAmount: 2,
+        tickPositions: [this.defaults.min, this.defaults.max],
+        labels: {
+          y: 26,
+          enabled: this.defaults.showLabels,
+        },
+      },
+      credits: false,
+      series: [
+        {
+          data: this.defaults.chartData,
+        },
+      ],
+      pane: {
+        center: ['50%', '50%'],
+        size: '90%',
+        startAngle: this.defaults.circumference[0],
+        endAngle: this.defaults.circumference[1],
+        background: {
+          borderWidth: 20,
+          innerRadius: '90%',
+          outerRadius: '90%',
+          shape: 'arc',
+          className: 'gauge-pane',
+        },
+      },
+      tooltip: {
+        headerFormat: '',
+        pointFormat: this.defaults.tooltipHtml,
+        followPointer: true,
+      },
+      plotOptions: {
+        solidgauge: {
+          dataLabels: {
+            format: `<span class="prefix">${this.defaults.prefix}</span>` +
+            '<span class="fix">{y:,f}</span>' +
+            `<span class="suffix">${this.defaults.suffix}</span>`,
+          },
+        },
+      },
+    })
+    document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
+    if (document.querySelector('.prefix')) {
+      document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
+      document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
+    }
+  }
+
   setupPieChart() {
     Highcharts.setOptions(highchartsTheme)
 

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.2.0"
+  VERSION = "5.3.0-alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.2.0
+  version: 5.3.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-02 00:00:00.000000000 Z
+date: 2020-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -411,6 +411,7 @@ files:
 - app/pb_kits/playbook/packs/site_styles/_scaffold.scss
 - app/pb_kits/playbook/packs/site_styles/_site-style.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_all.scss
+- app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss
@@ -543,6 +544,9 @@ files:
 - app/pb_kits/playbook/pb_card/card_header.rb
 - app/pb_kits/playbook/pb_card/child_kits/_card_body.html.erb
 - app/pb_kits/playbook/pb_card/child_kits/_card_header.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.md
 - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb
@@ -838,6 +842,27 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
+- app/pb_kits/playbook/pb_gauge/_gauge.html.erb
+- app/pb_kits/playbook/pb_gauge/_gauge.jsx
+- app/pb_kits/playbook/pb_gauge/_gauge.scss
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
+- app/pb_kits/playbook/pb_gauge/docs/example.yml
+- app/pb_kits/playbook/pb_gauge/docs/index.js
+- app/pb_kits/playbook/pb_gauge/gauge.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
@@ -1809,11 +1834,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.2
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System