playbook_ui 6.0.1 → 6.1.0.pre.alpha1

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: 'Name', value: 45 },
+]
+
+const GaugeDefault = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+    />
+  </div>
+)
+
+export default GaugeDefault

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

@@ -0,0 +1,12 @@
+<% data = [
+  {
+    name: 'Participants',
+    value: 84,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-disable-animation",
+  chart_data: data,
+  disable_animation: true,
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Participants', value: 84 },
+]
+
+const GaugeDisableAnimation = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        disableAnimation
+        id="gauge-disable-animation"
+    />
+  </div>
+)
+
+export default GaugeDisableAnimation

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: "Pixels", value: 400 }],
+  height: '400',
+  title: "Fixed Height in Pixels",
+  suffix: "px"
+}) %>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-percent",
+  chart_data: [{ name: "Percentage", 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: 'Pixels', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+    />
+    <Gauge
+        chartData={[ { name: 'Percentage', 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,40 @@
+import React, { useState } from 'react'
+import { Button, Gauge } from '../../'
+
+const GaugeLiveData = () => {
+  const [value, setValue] = useState(50)
+  const [name, setName] = useState('Name')
+
+  const updateValue = () => {
+    setValue(Math.floor(Math.random() * 100))
+  }
+  const updateName = () => {
+    let index = namesArray.indexOf(name)
+    if (namesArray.indexOf(name) == 5) {
+      index = 0
+    } else {
+      index += 1
+    }
+    setName(namesArray[index])
+  }
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <Button
+          onClick={updateName}
+          text="Update Name"
+      />
+      <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,15 @@
+<% 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,21 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
+
+const GaugeMinMax = () => (
+  <div>
+    <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_min_max.md

@@ -0,0 +1 @@
+### Min defaults to 0, Max to 100.

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

@@ -0,0 +1,26 @@
+<%= 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: "Point 1", value: 100 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing3",
+        chart_data: [{ name: "Point 2", value: 75 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing2",
+        chart_data: [{ name: "Point 3", value: 50 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing1",
+        chart_data: [{ name: "Point 4", value: 25 }],
+      }) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Flex, FlexItem, Gauge } from '../../'
+
+const GaugeSizing = () => (
+  <div>
+    <Flex
+        wrap
+    >
+      <FlexItem fixedSize="400px">
+        <Gauge
+            chartData={[ { name: 'Point 1', value: 100 } ]}
+            id="gauge-sizing4"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="300px">
+        <Gauge
+            chartData={[ { name: 'Point 2', value: 75 } ]}
+            id="gauge-sizing3"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="200px">
+        <Gauge
+            chartData={[ { name: 'Point 3', value: 50 } ]}
+            id="gauge-sizing2"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="125px">
+        <Gauge
+            chartData={[ { name: 'Point 4', value: 25 } ]}
+            id="gauge-sizing1"
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default GaugeSizing

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

@@ -0,0 +1 @@
+### Gauge resizes dynamically to fit whatever element it's placed within.

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,24 @@
+examples:
+  
+  rails:
+  - gauge_default: Default
+  - gauge_disable_animation: Disable Animation
+  - 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_disable_animation: Disable Animation
+  - 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,9 @@
+export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugeDisableAnimation } from './_gauge_disable_animation.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,57 @@
+# 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 :disable_animation, 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],
+          disableAnimation: disable_animation,
+          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