playbook_ui 15.2.0 → 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Capacity", y: 75 }]
+
+const chartOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+
+const PbGaugeChartFullCircle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartFullCircle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.html.erb

@@ -0,0 +1,40 @@
+<% chart_options = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">px</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const chartOptions = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+      },
+    },
+  },
+};
+
+const chartOptions2 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartHeight = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartHeight

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useRef } from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Button from '../../pb_button/_button'
+
+const PbGaugeChartLiveData = (props) => {
+  const [value, setValue] = useState(50)
+  const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const updateValue = () => {
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
+  }
+
+  const updateName = () => {
+    let index = namesArray.indexOf(name)
+    if (namesArray.indexOf(name) == 5) {
+      index = 0
+    } else {
+      index += 1
+    }
+    setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
+  }
+
+  const chartOptions = {
+    title: {
+      text: name,
+    },
+    series: [{
+      data: [{ name: name, y: value }]
+    }]
+  }
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+        />
+        <Button
+            onClick={updateName}
+            text="Update Name"
+        />
+      <PbGaugeChart
+          options={chartOptions}
+          ref={chartRef}
+          {...props}
+      />
+    </div>
+  );
+}
+
+export default PbGaugeChartLiveData

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb

@@ -0,0 +1,27 @@
+<% data = [{ name: "Rating", y: 4.5 }] %>
+
+<% chart_options = {
+title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: nil,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: '#C1CDD6',
+        fontWeight:'700',
+      }
+    },
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Rating", y: 4.5 }]
+
+const chartOptions = {
+  title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: colors.neutral,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.bold,
+      }
+    },
+  },
+  series: [{ data: data }],
+};
+const PbGaugeChartMinMax = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartMinMax

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md

@@ -0,0 +1 @@
+By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb

@@ -0,0 +1,19 @@
+<% chart_options = { series: [{ data:[{ name: "Point 1", y: 100 }] }] } %>
+<% chart_options_1 = { series: [{ data:[{ name: "Point 2", y: 75 }] }] } %>
+<% chart_options_2 = { series: [{ data:[{ name: "Point 3", y: 50 }] }] } %>
+<% chart_options_3 = { series: [{ data:[{ name: "Point 4", y: 25 }] }] } %>
+
+<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
+      <%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "155px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_3 }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+
+
+const PbGaugeChartSizing = (props) => (
+  <div>
+    <Flex
+        align="center"
+        wrap
+    >
+      <FlexItem
+          fixedSize="400px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 1", y: 100 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="300px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 2", y: 75 }] }],
+            }}
+            {...props}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="200px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 3", y: 50 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="125px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              chart: {
+                height: "100%",
+              },
+              series: [{ data: [{ name: "Point 4", y: 25 }] }],
+            }}
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default PbGaugeChartSizing

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md

@@ -0,0 +1,3 @@
+The Gauge chart resizes dynamically to fit whatever element it's placed within. 
+
+**Note**: set overflow to hidden on the parent element when nesting gauges inside of flex items to best respond to shrinking screens.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb

@@ -0,0 +1,14 @@
+<% data = [{ name: "Score", y: 780 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+
+const data = [{ name: "Score", y: 780 }]
+
+const chartOptions = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+};
+
+const PbGaugeChartTitle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartTitle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb

@@ -0,0 +1,39 @@
+<% data1 = [{ name: 'Data Used', y: 32 }] %>
+<% data2 = [{ name: 'Sales to Date', y: 65 }] %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">GB</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span y="28" style="fill: #687887; font-size: 16px;">$</span>' +
+          '<span class="fix" y="38">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">k</span>',
+      },
+    },
+  },
+} %>
+
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+
+const data1 = [
+  { name: 'Data Used', y: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', y: 65 },
+]
+
+const chartOptions1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
+      },
+    },
+  },
+};
+const chartOptions2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
+          `<span class="fix" y="38">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartUnits = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions1}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartUnits

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  
+  react:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_live_data: Live Data
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbGaugeChartDefault } from './_pb_gauge_chart_default.jsx'
+export { default as PbGaugeChartDisableAnimation } from './_pb_gauge_chart_disable_animation.jsx'
+export { default as PbGaugeChartTitle } from './_pb_gauge_chart_title.jsx'
+export { default as PbGaugeChartUnits } from './_pb_gauge_chart_units.jsx'
+export { default as PbGaugeChartFullCircle } from './_pb_gauge_chart_full_circle.jsx'
+export { default as PbGaugeChartMinMax } from './_pb_gauge_chart_min_max.jsx'
+export { default as PbGaugeChartSizing } from './_pb_gauge_chart_sizing.jsx'
+export { default as PbGaugeChartHeight } from './_pb_gauge_chart_height.jsx'
+export { default as PbGaugeChartLiveData } from './_pb_gauge_chart_live_data.jsx'
+export { default as PbGaugeChartColor } from './_pb_gauge_chart_color.jsx'
+export { default as PbGaugeChartComplex } from './_pb_gauge_chart_complex.jsx'

data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts

@@ -0,0 +1,91 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbGaugeGraphTheme = {
+  title: { 
+    text: "",
+    style: {
+      fontFamily: typography.font_family_base,
+      fontSize: typography.text_larger,
+    },
+  },
+  chart: {
+    type: "solidgauge",
+    events: {
+      render() {
+        this.container
+          const arc = this.container.querySelector('path.gauge-pane');
+          if (arc) arc.setAttribute('stroke-linejoin', 'round');
+      }
+    }
+  },
+  pane: {
+    size: "90%",
+    startAngle: -100,
+    endAngle: 100,
+    background: [
+      {
+        borderWidth: 20,
+        innerRadius: "90%",
+        outerRadius: "90%",
+        shape: "arc",
+        className: "gauge-pane",
+        borderColor: colors.border_light,
+        borderRadius: '50%',
+      },
+    ],
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    lineWidth: 0,
+    tickPositions: [] as number[],
+  },
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_1,
+      borderWidth: 20,
+      color: colors.data_1,
+      radius: 90,
+      innerRadius: "90%",
+      y: -26,
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_lt_default,
+        enabled: true,
+        format: '<span class="fix">{y:,f}</span>',
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default pbGaugeGraphTheme;

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb

@@ -0,0 +1 @@
+<%= react_component('PbGaugeChart', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbGaugeChart
+    class PbGaugeChart < ::Playbook::KitBase
+      prop :options, default: {}
+
+      def react_props
+        {
+          className: classname,
+          data: data,
+          options: options,
+          id: id,
+        }
+      end
+
+      def classname
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
+      end
+    end
+  end
+end