playbook_ui 11.12.0 → 11.12.1.pre.alpha.charts1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5a9c00dbcbcf3ec7e44832210e0e0c3651eeb4ab6aa9f92ae083799801e9681
-  data.tar.gz: 14929bd370f1f6452327ef413e98cb4b4d88318db6a805cb2f0f184662602a6d
+  metadata.gz: 6ec7a56f6eea6ea55c21faa02b8a1beb8110460443353439aa5de7961024b182
+  data.tar.gz: 46bb11b6178da12a8e9dcdfde1af101e675283b1aa1776455e9708f98a16a21e
 SHA512:
-  metadata.gz: 960e28629efc7ac1daa28b7ddb79575cb5c5927f1dba68085f4e0e9c80ad24a3af3512b95f297e07a398e7f6c79b334e348832f76a66e89ac7b90e079fd5e389
-  data.tar.gz: d5369dadccd7f2c4f629f2f8b9d7e1436a6c67664acbb0f095e9b79b329baa63cb5c84cf5aa30fe3e86faac90bf78de2f25e7acf5eee3e6a51c872b802c6f38b
+  metadata.gz: 4b63642925e7f72674c589f226baa9192e76492c20bbd06a11a942c6d9b6399e55bb163959f827924f49ee2531ada84cff1ddc00b36cfee289cb08a31a927676
+  data.tar.gz: 696b8d6cbf319c7b0a92089b738033525cf07cfa674f723767410936d94df1f0b5d40c27596437407248dbd16b0c0592738d28f7a53818edc9af7080788b89c9

data/app/pb_kits/playbook/index.js

@@ -115,7 +115,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_button/_button.scss

@@ -31,7 +31,7 @@ $pb_button_sizes: (
     @include pb_button_link;
     @media (hover:hover) {
       &:hover {
-        @include pb_button_hover(mix($primary_action, $white, 3%));
+        color: $text_lt_default;
       }
     } 
   }

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,216 @@
+import React, { useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+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 { 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);
+  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 componentDidMount = useRef(false);
+
+  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 });
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart: any) => {
+        if (chart && chart.renderTo.id === id) {
+          const updatedValueArray = chartData.map((obj: any) => {
+            return obj.value;
+          });
+          chart.series[0].setData(updatedValueArray);
+        }
+      });
+    } else {
+      componentDidMount.current = true;
+    }
+  }, [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;
+  }
 }