playbook_ui 11.16.0.pre.alpha.paginationrails1 → 11.16.0.pre.alpha.reactupgrade1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0794b715e47092c87265d48f3c1f6a09e8050528a5016a6da90fc78d23615402'
-  data.tar.gz: 3aafca5ec392f57269699e2ba64db635b53c43c2fa8b3c863bea485b785ec16c
+  metadata.gz: d042b0ab3d8b097bd1fcf548916bcf509dbe7d2ba6992997d581dcc37b52f6fd
+  data.tar.gz: 569c342ad86165547fcd18928e2c17c493492f1f32a9dca6644ad60c6ee259f9
 SHA512:
-  metadata.gz: cb081f936bc2b88a4b2be6431436d19cf308ddd66c0ca939fb416808dc781b999b9f21f4821e24d9b65a6be6d45187deba28741c9abdc35d44321274b5ba8f56
-  data.tar.gz: 6e10b6b6a3ecece6bd0fab27244c49a5261c192afe7f7c41cec7584bef1514979319e23ecde8e2a585b9962e388ec4427dba00f95b9a46db7eeb6c184a8f2826
+  metadata.gz: f767315ad846a1277a8226a025c64c30bf24743657314979117872662eee3c24b9647edd3e7ffb4d4dad6655a748f9832206c08745e62417084e1462863e1a9d
+  data.tar.gz: 3694adfc7dc8c7b49911b8935b308ca67daeb9de57a6b30a45ce806e97c64449cd3d5896a7b10d54c801899cb1bd98863170a269ebe187588ca81aad8052ace2

data/app/pb_kits/playbook/_playbook.scss

@@ -103,5 +103,3 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
-
-@import 'pb_pagination/pagination';

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

@@ -104,4 +104,3 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
-  - pagination

data/app/pb_kits/playbook/index.js

@@ -53,9 +53,9 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
 export { default as LabelValue } from './pb_label_value/_label_value'
 export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -64,7 +64,6 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
-export { default as Pagination} from './pb_pagination/_pagination'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'
@@ -116,6 +115,7 @@ export { default as barGraphSettings } from './pb_bar_graph/barGraphSettings'
 export { default as dashboardValueSettings } from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
+export { default as pbChart } from './plugins/pb_chart.js'
 export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
 export { default as PbPopover } from './pb_popover'
 export { default as PbTable } from './pb_table'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -0,0 +1,111 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+
+type BarGraphProps = {
+  align?: "left" | "right" | "center",
+  axisTitle: string,
+  dark?: Boolean,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: array<{
+    name: string,
+    data: array<number>,
+  }>,
+  className?: string,
+  id: number,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+}
+
+export default class BarGraph extends React.Component<BarGraphProps> {
+  static defaultProps = {
+    align: "center",
+    className: 'pb_bar_graph',
+    dark: false,
+    type: 'column',
+    legend: false,
+    toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
+  }
+
+  componentDidMount() {
+    const {
+      align,
+      axisTitle,
+      dark,
+      xAxisCategories,
+      yAxisMin,
+      yAxisMax,
+      className,
+      chartData,
+      id,
+      pointStart,
+      subTitle,
+      title,
+      type,
+      legend,
+      height,
+      toggleLegendClick,
+      colors  = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
+    } = this.props
+
+    new pbChart(`.${className}`, {
+      align,
+      axisTitle: axisTitle,
+      dark,
+      chartData: chartData,
+      colors: colors,
+      id: id,
+      pointStart: pointStart,
+      subtitle: subTitle,
+      type,
+      title: title,
+      xAxisCategories: xAxisCategories,
+      yAxisMin: yAxisMin,
+      yAxisMax: yAxisMax,
+      legend,
+      toggleLegendClick: toggleLegendClick,
+      height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
+    })
+  }
+
+  props: BarGraphProps
+
+  render() {
+    const { className, id } = this.props
+
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

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

@@ -0,0 +1,151 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import { globalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+
+import pbChart from '../plugins/pb_chart'
+type CircleChartProps = {
+  align?: "left" | "right" | "center",
+  aria: Object,
+  chartData?: array,
+  children: Node,
+  className?: string,
+  colors: array,
+  dark?: Boolean,
+  data?: Object,
+  dataLabelHtml: string,
+  dataLabels: boolean,
+  headerFormat: string,
+  height?: string,
+  id?: string,
+  innerSize: "sm" | "md" | "lg" | "none",
+  legend: boolean,
+  maxPointSize: number,
+  minPointSize: number,
+  rounded: boolean,
+  startAngle: number,
+  style: string,
+  title: string,
+  tooltipHtml: string,
+  useHtml: boolean,
+  zMin: number,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+}
+
+const CircleChart = (props: CircleChartProps) => {
+  const {
+    align = 'center',
+    aria = {},
+    chartData = [{}],
+    children,
+    className,
+    colors = [],
+    dark = false,
+    data = {},
+    dataLabelHtml = '<div>{point.name}</div>',
+    dataLabels = false,
+    headerFormat = null,
+    height,
+    id,
+    innerSize = 'md',
+    legend = false,
+    maxPointSize = null,
+    minPointSize = null,
+    rounded = false,
+    startAngle = null,
+    style = 'pie',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      '<b>{point.y}</b>',
+    useHtml = false,
+    zMin = null,
+    layout = 'horizontal',
+    verticalAlign = 'bottom',
+    x = 0,
+    y = 0,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
+  const innerSizeFormat = (size) => innerSizes[size]
+  const roundedBorderWidth = rounded ? 20 : null
+  const roundedBorderColor = rounded ? null : ''
+
+  // Runs first time component Renders
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj) => {
+      obj.y = obj.value
+      delete obj.value
+      return obj
+    })
+
+    new pbChart('.selector', {
+      align,
+      id,
+      colors,
+      borderColor: roundedBorderColor,
+      borderWidth: roundedBorderWidth,
+      chartData: formattedChartData,
+      dark,
+      title,
+      type: style,
+      showInLegend: legend,
+      dataLabelHtml,
+      dataLabels,
+      headerFormat,
+      height: height,
+      tooltipHtml,
+      useHTML: useHtml,
+      minPointSize,
+      maxPointSize,
+      innerSize: innerSizeFormat(innerSize),
+      zMin,
+      startAngle,
+      layout,
+      verticalAlign,
+      x,
+      y,
+    })
+  }, [])
+
+  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 && chart.renderTo.id === id) {
+          const updatedValueArray = chartData.map((obj) => {
+            return obj.value
+          })
+          chart.series[0].setData(updatedValueArray)
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  }, [chartData])
+  return (
+    <div id={`wrapper-circle-chart-${id}`}>
+      <div
+          id={id}
+          {...ariaProps}
+          {...dataProps}
+          className={classnames('pb_circle_chart', globalProps(props), className)}
+      />
+      <If condition={children}>
+        <div className="pb-circle-chart-block">{children}</div>
+      </If>
+    </div>
+  )
+}
+
+export default CircleChart

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

@@ -1,10 +1,22 @@
-<% if content.present? %>
-    <div id=wrapper-circle-chart-<%= object.id %> >
-        <%= react_component('CircleChart', object.chart_options) %>
-        <div class="pb-circle-chart-block">
-            <%= content %>
-        </div>
+<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 %>
+
+  <% if content.present? %>
+    <div class="pb-circle-chart-block">
+      <%= content %>
     </div>
-<% else %>
-    <%= react_component('CircleChart', object.chart_options) %>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
@@ -11,6 +13,7 @@ module Playbook
       prop :style, type: Playbook::Props::Enum,
                    values: %w[pie],
                    default: "pie"
+
       prop :data_labels, type: Playbook::Props::Boolean, default: false
       prop :min_point_size, type: Playbook::Props::Numeric
       prop :max_point_size, type: Playbook::Props::Numeric
@@ -19,8 +22,11 @@ module Playbook
                         default: "md"
       prop :z_min, type: Playbook::Props::Numeric
       prop :start_angle, type: Playbook::Props::Numeric
+      prop :header_format
       prop :data_label_html, default: "<div>{point.name}</div>"
-      prop :tooltip_html
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
@@ -37,32 +43,64 @@ module Playbook
       prop :x, type: Playbook::Props::Numeric
       prop :y, type: Playbook::Props::Numeric
 
+      def chart_type
+        style == "variablepie" ? "variablepie" : "pie"
+      end
+
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
+
+      def inner_size_format
+        case inner_size
+        when "lg"
+          "85%"
+        when "sm"
+          "35%"
+        when "none"
+          "0%"
+        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
         {
           align: align,
           id: id,
           colors: colors,
-          chartData: chart_data,
+          borderColor: rounded_border_color,
+          borderWidth: rounded_border_width,
+          chartData: chart_data_formatted,
           dark: dark ? "dark" : "",
           title: title,
           height: height,
-          type: style,
-          legend: legend,
+          type: chart_type,
+          showInLegend: legend,
           dataLabelHtml: data_label_html,
           dataLabels: data_labels,
+          headerFormat: header_format,
           tooltipHtml: tooltip_html,
           useHTML: use_html,
           minPointSize: min_point_size,
           maxPointSize: max_point_size,
-          innerSize: inner_size,
+          innerSize: inner_size_format,
           zMin: z_min,
           startAngle: start_angle,
-          rounded: rounded,
           layout: layout,
           verticalAlign: vertical_align,
           x: x,
           y: y,
-        }
+        }.to_json.html_safe
       end
 
       def classname
@@ -71,3 +109,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.ts → pbChartsDarkTheme.js}

@@ -1,11 +1,9 @@
 import colors from '../tokens/exports/_colors.scss'
 import typography from '../tokens/exports/_typography.scss'
 
-import { ThemeProps } from './themeTypes'
-
 import Highcharts from 'highcharts'
 
-const highchartsDarkTheme: ThemeProps = {
+const highchartsDarkTheme = {
   lang: {
     thousandsSep: ',',
   },
@@ -152,6 +150,26 @@ const highchartsDarkTheme: ThemeProps = {
       },
       threshold: null,
     },
+
+    // GAUGE STYLES
+    solidgauge: {
+      borderColor: colors.primary,
+      borderWidth: 20,
+      radius: 90,
+      innerRadius: '90%',
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_dk_default,
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+
     // PIE STYLES
     pie: {
       colors: [
@@ -229,9 +247,6 @@ const highchartsDarkTheme: ThemeProps = {
       }
     },
   },
-  credits: {
-    enabled: false
-  },
 }
 
 export { highchartsDarkTheme }

data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.ts → pbChartsLightTheme.js}

@@ -1,11 +1,9 @@
 import colors from '../tokens/exports/_colors.scss'
 import typography from '../tokens/exports/_typography.scss'
 
-import { ThemeProps } from './themeTypes'
-
 import Highcharts from 'highcharts'
 
-const highchartsTheme: ThemeProps = {
+const highchartsTheme = {
   lang: {
     thousandsSep: ',',
   },
@@ -152,6 +150,26 @@ const highchartsTheme: ThemeProps = {
       },
       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: [
@@ -229,9 +247,6 @@ const highchartsTheme: ThemeProps = {
       }
     },
   },
-  credits: {
-    enabled: false
-  },
 }
 
 export { highchartsTheme }

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

@@ -0,0 +1,112 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+
+type GaugeProps = {
+  aria: Object,
+  className?: string,
+  chartData?: array,
+  dark?: Boolean,
+  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,
+  colors: array,
+}
+
+const Gauge = (props: GaugeProps) => {
+  const {
+    aria = {},
+    className,
+    chartData = [{ name: 'Name', value: 0 }],
+    dark = false,
+    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>',
+    colors = [],
+  } = 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],
+      dark,
+      disableAnimation: disableAnimation,
+      height: height,
+      min: min,
+      max: max,
+      prefix: prefix,
+      title: title,
+      suffix: suffix,
+      showLabels: showLabels,
+      style: style,
+      tooltipHtml: tooltipHtml,
+      type: 'gauge',
+      colors: colors,
+    })
+  }, [])
+
+  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 && 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, globalProps(props), className)}
+        id={id}
+    />
+  )
+}
+
+export default Gauge

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

@@ -12,8 +12,4 @@
   rect.highcharts-background {
     fill: #0000 !important;
   }
-
-  .gauge-pane {
-    stroke-linejoin: round;
-  }
 }

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

@@ -19,7 +19,7 @@
               <%= pb_rails("gauge", props: {
                 chart_data: [{ name: "Name", value: 10 }],
                 disable_animation: true,
-                height: '150',
+                height: '100%',
                 id: "gauge-complex",
                 suffix: "%"
               }) %>