playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

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,93 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type LineGraphProps = {
-  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,
-  }
-
-export default class LineGraph extends React.Component<LineGraphProps> {
-  static defaultProps = {
-    className: 'pb_bar_graph',
-    dark: false,
-    gradient: false,
-    type: 'line',
-    legend: false,
-    toggleLegendClick: true,
-  }
-
-  componentDidMount() {
-    const {
-      axisTitle,
-      dark,
-      xAxisCategories,
-      yAxisMin,
-      yAxisMax,
-      className,
-      chartData,
-      id,
-      pointStart,
-      subTitle,
-      title,
-      type,
-      legend,
-      toggleLegendClick,
-      height,
-      colors = [],
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      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,
-    })
-  }
-
-  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}
-      />
-    )
-  }
-}

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,309 +0,0 @@
-import Highcharts from 'highcharts'
-
-import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
-import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
-import colors from '../tokens/exports/_colors.scss'
-
-import pie from 'highcharts/modules/variable-pie'
-import highchartsMore from 'highcharts/highcharts-more'
-import solidGauge from 'highcharts/modules/solid-gauge'
-import treemap from 'highcharts/modules/treemap'
-
-pie(Highcharts)
-
-// Map Data Color String Props to our SCSS Variables
-
-const mapColors = (array) => {
-  const regex = /(data)\-[1-8]/ //eslint-disable-line
-
-  const newArray = array.map((item) => {
-    return regex.test(item)
-      ? `${colors[`data_${item[item.length - 1]}`]}`
-      : item
-  })
-  return newArray
-}
-
-// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
-const alignBlockElement = (event) => {
-  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
-  if (itemToMove !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    (chartContainer.firstChild).before(itemToMove)
-  }
-}
-
-class pbChart {
-  defaults = {
-    callbackInitializeBefore: () => {},
-    callbackInitializeAfter: () => {},
-    callbackRefreshBefore: () => {},
-    callbackRefreshAfter: () => {},
-    callbackDestroyBefore: () => {},
-    callbackDestroyAfter: () => {},
-    property: 'Value',
-  }
-
-  extendDefaults(defaults, options) {
-    for (const property in options) {
-      if (Object.prototype.hasOwnProperty.call(options, property)) {
-        defaults[property] = options[property]
-      }
-    }
-    return defaults
-  }
-
-  constructor(element, options) {
-    this.element = element
-    this.options = options
-    this.settings = this.extendDefaults(this.defaults, options)
-
-    if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
-      this.setupPieChart(options)
-    } else if (this.options.type == 'gauge') {
-      this.setupGauge(options)
-    } else if (this.options.type == 'treemap') {
-      this.setupTreemap(options)
-    } else {
-      this.setupChart(options)
-    }
-  }
-
-  setupTheme() {
-    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
-  }
-
-  setupGauge(options) {
-    highchartsMore(Highcharts)
-    solidGauge(Highcharts)
-    this.setupTheme()
-
-    Highcharts.chart(this.defaults.id, {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0)
-          },
-        },
-        type: this.defaults.style,
-        height: this.defaults.height,
-      },
-      title: {
-        text: this.defaults.title,
-      },
-      yAxis: {
-        min: this.defaults.min,
-        max: this.defaults.max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: null,
-        tickAmount: 2,
-        tickPositions: [this.defaults.min, this.defaults.max],
-        labels: {
-          y: 26,
-          enabled: this.defaults.showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: this.defaults.chartData,
-        },
-      ],
-      pane: {
-        center: ['50%', '50%'],
-        size: '90%',
-        startAngle: this.defaults.circumference[0],
-        endAngle: this.defaults.circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: '90%',
-          outerRadius: '90%',
-          shape: 'arc',
-          className: 'gauge-pane',
-        },
-      },
-      tooltip: {
-        headerFormat: '',
-        pointFormat: this.defaults.tooltipHtml,
-        followPointer: true,
-      },
-      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !this.defaults.disableAnimation,
-        },
-        solidgauge: {
-          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
-          dataLabels: {
-            format: `<span class="prefix">${this.defaults.prefix}</span>` +
-            '<span class="fix">{y:,f}</span>' +
-            `<span class="suffix">${this.defaults.suffix}</span>`,
-          }        },
-      },
-    },
-    )
-    document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
-    if (document.querySelector('.prefix')) {
-      document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
-      document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
-    }
-  }
-
-  setupPieChart(options) {
-    this.setupTheme()
-    Highcharts.chart(this.defaults.id, {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-        events: {
-          render: (event) => alignBlockElement(event),
-          redraw: (event) => alignBlockElement(event),
-        },
-      },
-
-      plotOptions: {
-        pie: {
-          colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: this.defaults.dataLabels,
-            connectorShape: 'straight',
-            connectorWidth: 3,
-            format: this.defaults.dataLabelHtml,
-          },
-          showInLegend: this.defaults.showInLegend,
-        },
-      },
-
-      tooltip: {
-        headerFormat: this.defaults.headerFormat,
-        pointFormat: this.defaults.tooltipHtml,
-        useHTML: this.defaults.useHTML,
-      },
-      series: [{
-        minPointSize: this.defaults.minPointSize,
-        maxPointSize: this.defaults.maxPointSize,
-        innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
-        data: this.defaults.chartData,
-        zMin: this.defaults.zMin,
-        startAngle: this.defaults.startAngle,
-        borderWidth: this.defaults.borderWidth,
-        borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
-      }],
-      credits: false,
-    })
-  }
-
-  setupTreemap(options) {
-    treemap(Highcharts)
-    this.setupTheme()
-    options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
-
-    Highcharts.chart(this.defaults.id, {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-      },
-      credits: false,
-      series: [{
-        data: this.defaults.chartData,
-      }],
-      plotOptions: {
-        treemap: {
-          allowTraversingTree: this.defaults.drillable,
-          colorByPoint: !this.defaults.grouped,
-          colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-        },
-      },
-      tooltip: {
-        pointFormat: this.defaults.tooltipHtml,
-        useHTML: true,
-      },
-    })
-  }
-
-  setupChart(options) {
-    this.setupTheme()
-    const configOptions = {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-      },
-      subtitle: {
-        text: this.defaults.subtitle,
-      },
-      yAxis: {
-        min: this.defaults.yAxisMin,
-        max: this.defaults.yAxisMax,
-        title: {
-          text: this.defaults.axisTitle,
-        },
-      },
-      xAxis: {
-        categories: this.defaults.xAxisCategories,
-      },
-      legend: {
-        enabled: this.defaults.legend,
-      },
-      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          pointStart: this.defaults.pointStart,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      },
-      series: this.defaults.chartData,
-      credits: false,
-    }
-
-    if (!this.defaults.toggleLegendClick) {
-      configOptions.plotOptions.series.events = { legendItemClick: () => false }
-    }
-
-    Highcharts.chart(this.defaults.id, configOptions)
-  }
-
-  refresh(silent = false) {
-    if (!silent) {
-      this.settings.callbackRefreshBefore.call()
-    }
-
-    this.this.destroy(silent)
-    this.this.initialize(silent)
-    if (!silent) {
-      this.settings.callbackRefreshAfter.call()
-    }
-  }
-
-  destroy(silent = false) {
-    if (!silent) {
-      this.settings.callbackDestroyBefore.call()
-    }
-    if (!silent) {
-      this.settings.callbackDestroyAfter.call()
-    }
-  }
-
-  refreshSilently() {
-    this.this.refresh(true)
-  }
-
-  destroySilently() {
-    this.this.destroy(true)
-  }
-}
-
-export default pbChart