playbook_ui 11.12.1.pre.alpha.charts1 → 11.12.1.pre.alpha.passphrase1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ec7a56f6eea6ea55c21faa02b8a1beb8110460443353439aa5de7961024b182
-  data.tar.gz: 46bb11b6178da12a8e9dcdfde1af101e675283b1aa1776455e9708f98a16a21e
+  metadata.gz: 6a2d4fa765df74ba9a5c6abd8ec9bd670371bb4b752bbdec10225d4d35d66293
+  data.tar.gz: ce21ba1dc523fc7875b39a604a0b63f7c54b5f62cd27297a2209f3cfa1b42dc2
 SHA512:
-  metadata.gz: 4b63642925e7f72674c589f226baa9192e76492c20bbd06a11a942c6d9b6399e55bb163959f827924f49ee2531ada84cff1ddc00b36cfee289cb08a31a927676
-  data.tar.gz: 696b8d6cbf319c7b0a92089b738033525cf07cfa674f723767410936d94df1f0b5d40c27596437407248dbd16b0c0592738d28f7a53818edc9af7080788b89c9
+  metadata.gz: dace3a848d70cbc4cc6e854aa8bd0c687c8acc6485f37235daabbd18acab8b6393e8e4e2a4c021deb64811303c60364ac8fb43e00201bdd9f0e3f1c59f205d5c
+  data.tar.gz: 7fb618f8c14835809a4b2d02d0afac8476048a5c2209e846466999263a68021ec0ba069ad40bab7b8d7ff72c21952c37d4bc1a887c5e6e93e11214298ae93e7d

data/app/pb_kits/playbook/index.js

@@ -115,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: "%"
               }) %>

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

@@ -71,26 +71,26 @@ const GaugeComplex = (props) => (
               orientation="column"
               wrap
           >
-              <Body
-                  color="light"
-                  text="% Abandoned"
-               />
+            <Body
+                color="light"
+                text="% Abandoned"
+            />
             <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              > 
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
-                    height="150"
+                    height="100%"
                     id="gauge-complex"
                     suffix="%"
                     {...props}
                 />
-               </FlexItem>
-            </Flex>  
+              </FlexItem>
+            </Flex>
           </Flex>
         </Flex>
       </Card>

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

@@ -1,2 +1,12 @@
-<%= react_component('Gauge', object.chart_options) %>
+<%= 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 %>