playbook_ui 15.8.0.pre.rc.1 → 16.0.0

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

@@ -1,228 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classnames from "classnames";
-import HighchartsReact from "highcharts-react-official";
-import highchartsMore from "highcharts/highcharts-more";
-import { deprecatedKitWarning } from "../utilities/deprecated";
-
-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, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object'
-
-type CircleChartProps = {
-  align?: "left" | "right" | "center";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: {[key: string]: string},
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  innerSize?: "sm" | "md" | "lg" | "none";
-  legend?: boolean;
-  maxPointSize?: number;
-  minPointSize?: number;
-  rounded?: boolean;
-  startAngle?: number;
-  style?: string;
-  title?: string;
-  tooltipHtml: string;
-  useHtml?: boolean;
-  zMin?: number;
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  borderColor?: string;
-  borderWidth?: number;
-};
-
-
-
-const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector<HTMLElement>(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  );
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-
-  if (itemToMove !== null && chartContainer !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    if (chartContainer.firstChild !== null) {
-      chartContainer.firstChild.before(itemToMove);
-    }
-  }
-};
-
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors = [],
-  customOptions = {},
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  htmlOptions = {},
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  tooltipHtml,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: CircleChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  highchartsMore(Highcharts);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<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 filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
-  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(merge(staticOptions, customOptions));
-  }, [chartData]);
-
-    useEffect(() => {
-      // Warn about deprecated kit
-      deprecatedKitWarning('CircleChart', 'Please use "PbCircleChart" instead.');
-    }, []);
-    
-
-  return (
-    <>
-      {children ? (
-        <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-              containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-              ...htmlProps,
-            }}
-              highcharts={Highcharts}
-              options={options}
-          />
-          <div className="pb-circle-chart-block">{children}</div>
-        </div>
-      ) : (
-        <HighchartsReact
-            containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-            highcharts={Highcharts}
-            options={options}
-        />
-      )}
-    </>
-  );
-};
-
-export default CircleChart;

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import CircleChart from './_circle_chart';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'circlechart1';
-
-test('uses exact classname', () => {
-  const data = [
-    {
-      name: 'Waiting for Calls',
-      value: 41,
-    },
-    {
-      name: 'On Call',
-      value: 49,
-    },
-    {
-      name: 'After Call',
-      value: 10,
-    },
-  ]
-  render(
-    <CircleChart
-        chartData={data}
-        data={{ testid: testId }}
-        id='circlechartid'
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_circle_chart');
-});

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

@@ -1,88 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const circleChartTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  chart: {
-    type: "pie",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    pointFormat:
-      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      "<b>{point.y}</b>",
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    pie: {
-      dataLabels: {
-        enabled: false,
-        connectorShape: "straight",
-        connectorWidth: 3,
-        format: "<div>{point.name}</div>",
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
-      },
-      innerSize: '50%',
-      borderColor: "",
-      borderWidth: null as number | null,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default circleChartTheme;

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

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

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

@@ -1,99 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCircleChart
-    class CircleChart < Playbook::KitBase
-      prop :align, type: Playbook::Props::Enum,
-                   values: %w[left right center],
-                   default: "center"
-      prop :border_width, type: Playbook::Props::Numeric
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: []
-      prop :custom_options, 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
-      prop :inner_size, type: Playbook::Props::Enum,
-                        values: %w[sm md lg none],
-                        default: "md"
-      prop :z_min, type: Playbook::Props::Numeric
-      prop :start_angle, type: Playbook::Props::Numeric
-      prop :data_label_html, default: "<div>{point.name}</div>"
-      prop :tooltip_html
-      prop :use_html, type: Playbook::Props::Boolean, default: false
-      prop :legend, type: Playbook::Props::Boolean, default: false
-      prop :title, default: ""
-      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
-                                      {point.name}: ' + '<b>{point.y}
-                                    </b>'
-      prop :height
-      prop :rounded, type: Playbook::Props::Boolean, default: false
-      prop :colors, type: Playbook::Props::Array,
-                    default: []
-      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 standard_options
-        {
-          align: align,
-          borderWidth: border_width,
-          id: id,
-          colors: colors,
-          chartData: chart_data,
-          dark: dark ? "dark" : "",
-          title: title,
-          height: height,
-          type: style,
-          legend: legend,
-          dataLabelHtml: data_label_html,
-          dataLabels: data_labels,
-          tooltipHtml: tooltip_html,
-          useHTML: use_html,
-          minPointSize: min_point_size,
-          maxPointSize: max_point_size,
-          innerSize: inner_size,
-          zMin: z_min,
-          startAngle: start_angle,
-          rounded: rounded,
-          layout: layout,
-          verticalAlign: vertical_align,
-          x: x,
-          y: y,
-        }
-      end
-
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def vertical_align_props
-        if vertical_align
-          if object.vertical_align
-            original_result = super
-            class_to_remove = "vertical_align_#{object.vertical_align}"
-
-            modified_result = original_result.gsub(class_to_remove, "").strip
-            modified_result.empty? ? nil : modified_result
-          else
-            super
-          end
-        else
-          super
-        end
-      end
-
-      def classname
-        generate_classname("pb_circle_chart")
-      end
-    end
-  end
-end

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

@@ -1,26 +0,0 @@
-<% data_51 = [{
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After Call',
-    value: 10,
-  }
-] %>
-
-<br><br>
-
-<%= pb_rails("circle_chart", props: {
-    chart_data: data_51,
-    id: "with-a-block-2",
-    rounded: true,
-}) do %>
-    <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
-<% end %>
-
-
-

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

@@ -1,88 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import Title from '../../pb_title/_title'
-
-const dataWithABlock = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const CircleChartBlock = (props) => {
-  const chartOptions = {
-    series: [{
-      data: dataWithABlock,
-      innerSize: '100%',
-      borderWidth: 20,
-      borderColor: null,
-    }],
-    chart: {
-      events: {
-        render: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        },
-        redraw: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        }
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <div style={{ position: 'relative' }}>
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={options}
-        />
-        <div 
-            className="pb-circle-chart-block"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              zIndex: 1,
-              textAlign: 'center',
-              pointerEvents: 'none'
-          }}
-        >
-          <Title
-              size={1}
-              tag="div"
-              {...props}
-          >
-            {'83'}
-          </Title>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CircleChartBlock

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

@@ -1,20 +0,0 @@
-<% data_set = [{
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After Call',
-    value: 10,
-  }
-] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    chart_data: data_set,
-    id: "default-test-colors",
-    colors: ['data-6', 'data-4', 'data-2']
-}) %>

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

@@ -1,44 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-const dataWithColors = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const CircleChartColors = () => {
-  const chartOptions = {
-    series: [{ data: dataWithColors }],
-    plotOptions: {
-      pie: {
-        colors: ["#144075", colors.data_4, colors.data_2]
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartColors

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

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`.

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

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1,20 +0,0 @@
-<% data = [{
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After Call',
-    value: 10,
-  }
-] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    chart_data: data,
-    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
-    id: "default-test"
-}) %>