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

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

@@ -0,0 +1,322 @@
+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),
+        },
+      },
+
+      legend: {
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
+      },
+
+      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,
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
+      },
+      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

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.12.1"
-  VERSION = "11.12.1.pre.alpha.charts1"
+  VERSION = "11.12.1.pre.alpha.passphrase1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.1.pre.alpha.charts1
+  version: 11.12.1.pre.alpha.passphrase1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-30 00:00:00.000000000 Z
+date: 2022-11-28 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,9 +540,8 @@ 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/ChartsTypes.ts
+- app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
 - 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
@@ -639,10 +638,8 @@ 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/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/pbChartsDarkTheme.js
+- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
 - 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
@@ -1029,8 +1026,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
@@ -1307,8 +1304,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
@@ -1461,16 +1458,20 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb
@@ -1481,9 +1482,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
-- app/pb_kits/playbook/pb_passphrase/passwordStrength.js
-- app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js
-- app/pb_kits/playbook/pb_passphrase/useZxcvbn.js
 - app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2092,7 +2090,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.tsx
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
 - 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
@@ -2218,6 +2216,7 @@ 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

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

@@ -1,145 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
-
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-
-import classnames from "classnames";
-
-type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[] }[];
-  className?: string;
-  id: any;
-  pointStart: number | any;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-};
-
-
-const BarGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  axisTitle,
-  dark = false,
-  chartData,
-  className = "pb_bar_graph",
-  colors,
-  id,
-  pointStart,
-  subTitle,
-  type = "column",
-  title = "Title",
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  legend = false,
-  toggleLegendClick = true,
-  height,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: BarGraphProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    subtitle: {
-      text: subTitle,
-    },
-    yAxis: {
-      min: yAxisMin,
-      max: yAxisMax,
-      title: {
-        text: axisTitle,
-      },
-    },
-    xAxis: {
-      categories: xAxisCategories,
-    },
-    legend: {
-      enabled: legend,
-      align: align,
-      verticalAlign: verticalAlign,
-      layout: layout,
-      x: x,
-      y: y,
-    },
-    colors:
-      colors !== undefined && colors.length > 0
-        ? mapColors(colors)
-        : highchartsTheme.colors,
-    plotOptions: {
-      series: {
-        pointStart: pointStart,
-        events: {},
-        dataLabels: {
-          enabled: false,
-        },
-      },
-    },
-    series: chartData,
-    credits: false,
-  };
-
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    setOptions({ ...staticOptions });
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
-
-export default BarGraph;

data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts

@@ -1,2 +0,0 @@
-declare module "*.scss"
-declare module "highcharts-react-official"