playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

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,16 +1,16 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/HashLikeCase
-
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       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
@@ -19,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: ""
@@ -31,60 +28,41 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
-
-      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
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       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,
-        }.to_json.html_safe
+          rounded: rounded,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
+        }
       end
 
       def classname
@@ -93,5 +71,3 @@ module Playbook
     end
   end
 end
-
-# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -0,0 +1,86 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+<% data_1 = [{
+    name: 'Bugs',
+    value: 8,
+  },
+  {
+    name: 'Chores',
+    value: 1,
+  },
+  {
+    name: 'Stories',
+    value: 12,
+  }
+] %>
+
+<% data_2 = [{
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+] %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data,
+    legend: true,
+    id: "legend-position-circle",
+    title: 'Alignment of Legend',
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_1,
+    legend: true,
+    id: "legend-position-circle-1",
+    title: 'Layout of Legend',
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_2,
+    legend: true,
+    title: 'Offset of Legend',
+    id: "legend-position-circle-2",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -0,0 +1,114 @@
+import React from 'react'
+
+import CircleChart from '../_circle_chart'
+
+import {Title} from '../..'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const dataFirst = [{
+  name: 'Bugs',
+  value: 8,
+
+},
+{
+  name: 'Chores',
+  value: 1,
+
+},
+{
+  name: 'Stories',
+  value: 12,
+},
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+]
+
+
+const CircleChartLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <CircleChart
+        align='right'
+        chartData={data}
+        id="legend-position-circle"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <CircleChart
+        chartData={dataFirst}
+        id="legend-position-circle-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="legend-position-circle-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        y={10}
+        {...props}
+    />
+  </div>
+)
+
+export default CircleChartLegendPosition

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 
@@ -18,6 +19,7 @@ examples:
   - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 

data/app/pb_kits/playbook/pb_circle_chart/docs/index.js

@@ -5,5 +5,6 @@ export { default as CircleChartBlock } from './_circle_chart_block.jsx'
 export { default as CircleChartColors } from './_circle_chart_colors.jsx'
 export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
 export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
+export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'

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 }