playbook_ui 11.12.0 → 11.12.1.pre.alpha.charts1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.0
+  version: 11.12.1.pre.alpha.charts1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-15 00:00:00.000000000 Z
+date: 2022-11-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -361,8 +361,8 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/_description.md
 - app/pb_kits/playbook/pb_badge/docs/example.yml
 - app/pb_kits/playbook/pb_badge/docs/index.js
-- app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
+- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
 - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
@@ -540,8 +540,9 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
-- app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
+- app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
+- app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
@@ -638,8 +639,10 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
-- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
-- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
+- app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
+- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
+- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
+- app/pb_kits/playbook/pb_dashboard/themeTypes.ts
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
@@ -1026,8 +1029,8 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
-- app/pb_kits/playbook/pb_gauge/_gauge.jsx
 - app/pb_kits/playbook/pb_gauge/_gauge.scss
+- app/pb_kits/playbook/pb_gauge/_gauge.tsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
@@ -1304,8 +1307,8 @@ files:
 - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
 - app/pb_kits/playbook/pb_lightbox/lightbox.scss
 - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
-- app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
+- app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
@@ -2089,7 +2092,7 @@ files:
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
-- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
@@ -2215,7 +2218,6 @@ files:
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
-- app/pb_kits/playbook/plugins/pb_chart.js
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
@@ -2351,9 +2353,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,111 +0,0 @@
-/* @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

@@ -1,151 +0,0 @@
-/* @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_gauge/_gauge.jsx

@@ -1,112 +0,0 @@
-/* @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_line_graph/_line_graph.jsx

@@ -1,113 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type LineGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle?: string,
-  dark?: Boolean,
-  xAxisCategories: array,
-  yAxisMin: number,
-  yAxisMax: number,
-  className?: string,
-  chartData: array<{
-      name: string,
-      data: array<number>,
-  }>,
-  gradient?: boolean,
-  id: string,
-  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 LineGraph extends React.Component<LineGraphProps> {
-  static defaultProps = {
-    align: "center",
-    className: 'pb_bar_graph',
-    dark: false,
-    gradient: false,
-    type: 'line',
-    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,
-      toggleLegendClick,
-      height,
-      colors = [],
-      layout,
-      verticalAlign,
-      x,
-      y,
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      align,
-      axisTitle: axisTitle,
-      chartData: chartData,
-      colors: colors,
-      dark,
-      id: id,
-      pointStart: pointStart,
-      subtitle: subTitle,
-      type,
-      title: title,
-      xAxisCategories: xAxisCategories,
-      yAxisMin: yAxisMin,
-      yAxisMax: yAxisMax,
-      legend: legend,
-      toggleLegendClick: toggleLegendClick,
-      height: height,
-      layout,
-      verticalAlign,
-      x,
-      y,
-    })
-  }
-
-  props: LineGraphProps
-
-  render() {
-    const { className, id } = this.props
-
-    return (
-      <div
-          className={classnames(globalProps(this.props), className)}
-          id={id}
-      />
-    )
-  }
-}

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx

@@ -1,79 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type TreemapChartProps = {
-  chartData: array<{
-    name: string,
-    parent?: string | number,
-    value: number,
-    color?: string,
-    id?: string | number,
-  }>,
-  className?: string,
-  colors: array,
-  dark?: boolean,
-  drillable: boolean,
-  grouped: boolean,
-  height?: string,
-  id: number,
-  title: string,
-  tooltipHtml: string,
-  type?: string,
-}
-
-export default class TreemapChart extends React.Component<TreemapChartProps> {
-  static defaultProps = {
-    className: 'pb_treemap_chart',
-    dark: false,
-    drillable: false,
-    grouped: false,
-    type: 'treemap',
-  }
-
-  componentDidMount() {
-    const {
-      chartData,
-      className,
-      colors  = [],
-      dark,
-      drillable,
-      grouped,
-      height,
-      id,
-      title = "",
-      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
-      type,
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      chartData: chartData,
-      colors: colors,
-      dark,
-      drillable,
-      grouped,
-      height: height,
-      id: id,
-      title: title,
-      tooltipHtml,
-      type,
-    })
-  }
-
-  props: TreemapChartProps
-
-  render() {
-    const { className, id } = this.props
-
-    return (
-      <div
-          className={classnames(globalProps(this.props), className)}
-          id={id}
-      />
-    )
-  }
-}