playbook_ui 6.0.1.pre.alpha6 → 6.0.1

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

@@ -1,110 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useRef } from 'react'
-import { pbChart } from '../'
-import { globalProps } from '../utilities/globalProps'
-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,
-  disableAnimation: Boolean,
-  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 = {},
-    disableAnimation = false,
-    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(() => {
-    const formattedChartData = chartData.map((obj) => {
-      obj.y = obj.value
-      delete obj.value
-      return obj
-    })
-
-    new pbChart('.selector', {
-      id: id,
-      chartData: formattedChartData,
-      circumference: fullCircle ? [0, 360] : [-100, 100],
-      disableAnimation: disableAnimation,
-      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])
-          chart.series[0].data[0].name = chartData[0].name
-        }
-      })
-    } else {
-      componentDidMount.current = true
-    }
-  }, [chartData])
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(css, className, globalProps(props))}
-        id={id}
-    />
-  )
-}
-
-export default Gauge

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

@@ -1,11 +0,0 @@
-[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

@@ -1,11 +0,0 @@
-<% 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

@@ -1,17 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<% 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

@@ -1,18 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<% 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

@@ -1,20 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<% 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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-<%= 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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-<% 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

@@ -1,20 +0,0 @@
-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