playbook_ui 11.16.0.pre.alpha.paginationrails1 → 11.16.0.pre.alpha.reactupgrade1

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

@@ -1,207 +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 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_dashboard/pbChartsColorsHelper.ts

@@ -1,16 +0,0 @@
-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/themeTypes.ts

@@ -1,16 +0,0 @@
-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.tsx

@@ -1,202 +0,0 @@
-import React, { useState, useEffect } 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 highchartsMore from "highcharts/highcharts-more";
-import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.scss";
-import typography from "../tokens/exports/_typography.scss";
-
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-
-type GaugeProps = {
-  aria: { [key: string]: string };
-  className?: string;
-  chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
-  data?: { [key: string]: string };
-  disableAnimation?: boolean;
-  fullCircle?: boolean;
-  height?: string;
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval: any;
-  circumference: number[];
-};
-
-const Gauge = ({
-  aria = {},
-  className,
-  chartData,
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  id,
-  max = 100,
-  min = 0,
-  prefix = "",
-  showLabels = false,
-  style = "solidgauge",
-  suffix = "",
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-    "<b>{point.y}</b>",
-  colors = [],
-  minorTickInterval = null,
-  circumference = fullCircle ? [0, 360] : [-100, 100],
-  ...props
-}: GaugeProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  //set tooltip directly to prevent being overriden by Highcharts defaults
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true,
-    },
-  });
-
-  const css = buildCss({
-    pb_gauge_kit: true,
-  });
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0);
-          },
-        },
-        type: style,
-        height: height,
-      },
-      title: {
-        text: title,
-      },
-      yAxis: {
-        min: min,
-        max: max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: minorTickInterval,
-        tickAmount: 2,
-        tickPositions: [min, max],
-        labels: {
-          y: 26,
-          enabled: showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: formattedChartData,
-        },
-      ],
-      pane: {
-        center: ["50%", "50%"],
-        size: "90%",
-        startAngle: circumference[0],
-        endAngle: circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: "90%",
-          outerRadius: "90%",
-          shape: "arc",
-          className: "gauge-pane",
-        },
-      },
-      colors:
-        colors !== undefined && colors.length > 0
-          ? mapColors(colors)
-          : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !disableAnimation,
-        },
-        solidgauge: {
-          borderColor:
-            colors !== undefined && colors.length === 1
-              ? mapColors(colors).join()
-              : highchartsTheme.colors[0],
-          borderWidth: 20,
-          radius: 90,
-          innerRadius: "90%",
-          dataLabels: {
-            borderWidth: 0,
-            color: defaultColors.text_lt_default,
-            enabled: true,
-            format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2,
-            },
-            y: -26,
-          },
-        },
-      },
-    };
-
-    setOptions({ ...staticOptions });
-
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
-
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(css, globalProps(props)),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
-
-export default Gauge;

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,148 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-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";
-
-type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
-  chartData: {
-    name: string;
-    data: number[];
-  }[];
-  gradient?: boolean;
-  id: string;
-  pointStart: number;
-  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 LineGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  className = "pb_bar_graph",
-  dark = false,
-  gradient = false,
-  type = "line",
-  id,
-  legend = false,
-  toggleLegendClick = true,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  axisTitle,
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  chartData,
-  pointStart,
-  subTitle,
-  title,
-  height,
-  colors = [],
-  ...props
-}: LineGraphProps) => {
-  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 LineGraph;

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -1,68 +0,0 @@
-@import "tokens/colors";
-@import "tokens/typography";
-@import "tokens/border_radius";
-@import "tokens/shadows";
-
-.pb_pagination {
-  display: inline-block;
-  border-radius: $border_rad_light;
-  border: 1px solid $border_light;
-  background-color: $white;
-  padding: 3px 0px 3.6px 0px;
-  li {
-    display: inline;  
-    > a, li > span {
-    padding: 7px 13px;
-    text-decoration: none;
-    margin-left: -1px;
-    border: 0 !important;
-  }}
-  li:first-child > a, li:first-child > span  {
-    padding: 7px 13px;
-    margin-left: .5px;
-    border-right: 1px solid $border_light !important;
-    z-index: 2;
-  }
-  li:last-child > a, li:last-child > span {
-    padding: 7px 13px;
-    margin-right: .5px;
-    border-left: 1px solid $border_light !important;
-    z-index: 2;
-  }
-  a {
-    color: $text_lt_default !important;
-    font-size: $text_small;
-    font-weight: $regular;
-    border: none;
-
-    &:hover {
-      background-color: $active_light;
-      color: $primary !important;
-      border-radius: $border_rad_light;
-    }
-
-    &:focus {
-      outline: 1px solid $primary !important;
-      border-radius: $border_rad_light;
-      outline-offset: -1px;
-    }
-  }
-  .active > span {
-    background-color: $primary !important;
-    border-radius: $border_rad_light;
-    color: #fff;
-    padding: 7px 10px;
-    border: 0 !important;
-    text-decoration: none;
-    font-weight: $bold;
-    font-size: $text_small;
-
-    &:hover {
-      box-shadow: $shadow_deeper;
-    }
-  }
-  .disabled > span {
-    padding: 7px 10px;
-    font-size: $text_small;
-  }
-}

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type PaginationProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Pagination = (props: PaginationProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_pagination'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Pagination