playbook_ui 11.15.0 → 11.16.0.pre.alpha.paginationrails1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cffd8ae39a8b80f013b9bc0fca179e7cdd94be62b1bfcba8a786984fbe6bb15a
-  data.tar.gz: 320820bff742b9b95b6d0867f81782eb6d20edee840ca1e65bd9ecc9fc96d805
+  metadata.gz: '0794b715e47092c87265d48f3c1f6a09e8050528a5016a6da90fc78d23615402'
+  data.tar.gz: 3aafca5ec392f57269699e2ba64db635b53c43c2fa8b3c863bea485b785ec16c
 SHA512:
-  metadata.gz: 612b82bdc76521177c494de8203d6a64147a8dc2e6863ad0f28edef9eece3c410236ffa234220ed8c1d0ad69c5b857b8023fa2bf6d0680fec24054f8acd4bbde
-  data.tar.gz: 24e96215afa640ea123786fb2a3656a91e5bff64e3a49b17598034230949be6b1e6671270cb1dee78edaf3563dee09dd09d5f1a7f6f5c9e1b7ba0c80173f5472
+  metadata.gz: cb081f936bc2b88a4b2be6431436d19cf308ddd66c0ca939fb416808dc781b999b9f21f4821e24d9b65a6be6d45187deba28741c9abdc35d44321274b5ba8f56
+  data.tar.gz: 6e10b6b6a3ecece6bd0fab27244c49a5261c192afe7f7c41cec7584bef1514979319e23ecde8e2a585b9962e388ec4427dba00f95b9a46db7eeb6c184a8f2826

data/app/pb_kits/playbook/_playbook.scss

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

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

@@ -104,3 +104,4 @@ 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,6 +64,7 @@ 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'
@@ -115,7 +116,6 @@ 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.tsx

@@ -0,0 +1,145 @@
+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

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

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

@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+import HighchartsReact from "highcharts-react-official";
+import highchartsMore from "highcharts/highcharts-more";
+
+import Highcharts from "highcharts";
+
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
+
+type CircleChartProps = {
+  align?: "left" | "right" | "center";
+  aria: { [key: string]: string };
+  chartData?: [];
+  children?: Node;
+  className?: string;
+  colors?: string[];
+  dark?: Boolean;
+  data?: Object;
+  dataLabelHtml?: string;
+  dataLabels?: boolean;
+  height?: string;
+  id?: string;
+  innerSize?: "sm" | "md" | "lg" | "none";
+  legend?: boolean;
+  maxPointSize?: number;
+  minPointSize?: number;
+  rounded?: boolean;
+  startAngle?: number;
+  style?: string;
+  title?: string;
+  useHtml?: boolean;
+  zMin?: number;
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  borderColor?: string;
+  borderWidth?: number;
+};
+
+// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
+const alignBlockElement = (event: any) => {
+  const itemToMove = document.querySelector(
+    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
+  ) as HTMLElement;
+  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);
+  }
+};
+
+const CircleChart = ({
+  align = "center",
+  aria = {},
+  rounded = false,
+  borderColor = rounded ? null : "",
+  borderWidth = rounded ? 20 : null,
+  chartData,
+  children,
+  className,
+  colors = [],
+  dark = false,
+  data = {},
+  dataLabelHtml = "<div>{point.name}</div>",
+  dataLabels = false,
+  height,
+  id,
+  innerSize = "md",
+  legend = false,
+  maxPointSize = null,
+  minPointSize = null,
+  startAngle = null,
+  style = "pie",
+  title,
+  useHtml = false,
+  zMin = null,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  ...props
+}: CircleChartProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  highchartsMore(Highcharts);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  Highcharts.setOptions({
+    tooltip: {
+      headerFormat: null,
+      pointFormat:
+        '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+        "<b>{point.y}</b>",
+      useHTML: useHtml,
+    },
+  });
+
+  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
+    innerSizes[size];
+
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj: any) => {
+      obj.y = obj.value;
+      delete obj.value;
+      return obj;
+    });
+
+    const staticOptions = {
+      title: {
+        text: title,
+      },
+      chart: {
+        height: height,
+        type: style,
+        events: {
+          render: (event: any) => alignBlockElement(event),
+          redraw: (event: any) => alignBlockElement(event),
+        },
+      },
+
+      legend: {
+        align: align,
+        verticalAlign: verticalAlign,
+        layout: layout,
+        x: x,
+        y: y,
+      },
+      plotOptions: {
+        pie: {
+          colors:
+            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
+          dataLabels: {
+            enabled: dataLabels,
+            connectorShape: "straight",
+            connectorWidth: 3,
+            format: dataLabelHtml,
+          },
+          showInLegend: legend,
+        },
+      },
+      series: [
+        {
+          minPointSize: minPointSize,
+          maxPointSize: maxPointSize,
+          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
+          data: formattedChartData,
+          zMin: zMin,
+          startAngle: startAngle,
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        },
+      ],
+      credits: false,
+    };
+    setOptions({ ...staticOptions });
+  }, [chartData]);
+
+
+  return (
+    <>
+      {children ? (
+        <div id={`wrapper-circle-chart-${id}`}>
+          <HighchartsReact
+            containerProps={{
+              className: classnames("pb_circle_chart", globalProps(props)),
+              id: id,
+              ...ariaProps,
+              ...dataProps,
+            }}
+            highcharts={Highcharts}
+            options={options}
+          />
+          <div className="pb-circle-chart-block">{children}</div>
+        </div>
+      ) : (
+        <HighchartsReact
+          containerProps={{
+            className: classnames("pb_circle_chart", globalProps(props)),
+            id: id,
+            ...ariaProps,
+            ...dataProps,
+          }}
+          highcharts={Highcharts}
+          options={options}
+        />
+      )}
+    </>
+  );
+};
+
+export default CircleChart;

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

@@ -1,22 +1,10 @@
-<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 %>
+<% 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>
-  <% end %>
-</div>
+<% else %>
+    <%= react_component('CircleChart', object.chart_options) %>
+<% end %>

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

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/HashLikeCase
-
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
@@ -13,7 +11,6 @@ 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
@@ -22,11 +19,8 @@ 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, default: '<span style="font-weight: bold; color:{point.color};">●</span>
-                                      {point.name}: ' + '<b>{point.y}
-                                    </b>'
+      prop :tooltip_html
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
@@ -43,64 +37,32 @@ 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,
-          borderColor: rounded_border_color,
-          borderWidth: rounded_border_width,
-          chartData: chart_data_formatted,
+          chartData: chart_data,
           dark: dark ? "dark" : "",
           title: title,
           height: height,
-          type: chart_type,
-          showInLegend: legend,
+          type: style,
+          legend: 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_format,
+          innerSize: inner_size,
           zMin: z_min,
           startAngle: start_angle,
+          rounded: rounded,
           layout: layout,
           verticalAlign: vertical_align,
           x: x,
           y: y,
-        }.to_json.html_safe
+        }
       end
 
       def classname
@@ -109,5 +71,3 @@ module Playbook
     end
   end
 end
-
-# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -0,0 +1,16 @@
+import colors from "../tokens/exports/_colors.scss";
+
+
+// Map Data Color String Props to our SCSS Variables
+const mapColors = (array: string[]) => {
+    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;
+  };
+
+  export default mapColors

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

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

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

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

data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts

@@ -0,0 +1,16 @@
+export type ThemeProps = {
+    lang?: {[key: string]: string}
+    credits?: {[key: string]: boolean}
+    colors?: string[]
+    chart?: {[key: string]: any}
+    title?: {[key: string]: string | {}}
+    subtitle?: {[key: string]: string | {};}
+    xAxis?: {[key: string]: any;}
+    yAxis?: {[key: string]: any;}
+    legend?: {[key: string]: string | {};}
+    labels?: {[key: string]: {};}
+    tooltip?: {[key: string]: any;}
+    pane?: {[key: string]: {};}
+    plotOptions?: {[key: string]: any;}
+    colorKey?: string
+    }

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

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