playbook_ui 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.HFH3979Applydepwarningfixtoplaybook13635

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

@@ -1,174 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-import { ThemeProps } from './themeTypes'
-
-const highchartsDarkTheme: ThemeProps = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotBackgroundColor: undefined,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_dk_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_dark,
-    tickColor: colors.border_dark,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_dk_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined,
-    minorTickInterval: null,
-    gridLineColor: colors.border_dark,
-    minorGridLineColor: colors.border_dark,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_dk_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_dk_lighter,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.card_light],
-        [1, colors.card_light],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
-      // @ts-ignore
-      borderColor: colors.border_dark,
-    },
-  },
-
-  plotOptions: {
-    series: {
-      borderColor: colors.bg_dark_card,
-      borderWidth: 2,
-      threshold: null,
-    },
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_dk_light,
-          fontWeight: typography.regular,
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: colors.text_dk_light,
-      },
-      marker: {
-        lineColor: colors.border_dark,
-      },
-    }
-  },
-  credits: {
-    enabled: false
-  },
-}
-
-export { highchartsDarkTheme }

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

@@ -1,173 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-import { ThemeProps } from './themeTypes'
-
-const highchartsTheme: ThemeProps = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotBackgroundColor: undefined,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined,
-    minorTickInterval: null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-  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,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
-      // @ts-ignore
-      borderColor: colors.border_light, 
-    },
-  },
-
-  plotOptions: {
-    series: {
-      threshold: null,
-    },
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: '#CCC',
-      },
-      marker: {
-        lineColor: '#333',
-      },
-    }
-  },
-  credits: {
-    enabled: false
-  },
-}
-
-export { highchartsTheme }

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

@@ -1,20 +0,0 @@
-import { Options, LegendOptions } from "highcharts";
-export interface ThemeProps
-  extends Pick<
-    Options,
-    | "credits"
-    | "chart"
-    | "colors"
-    | "lang"
-    | "title"
-    | "subtitle"
-    | "xAxis"
-    | "yAxis"
-    | "legend"
-    | "tooltip"
-    | "pane"
-    | "plotOptions"
-  > {
-  colorKey?: string;
-  legend?: LegendOptions;
-}

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

@@ -1,49 +0,0 @@
-@import "../tokens/colors";
-
-.pb_gauge_kit {
-
-  .fix {
-    fill: $text_lt_default;
-    stroke: none;
-
-    &.dark {
-      fill: $text_dk_default;
-    }
-  }
-
-  .suffix {
-    fill: $text_lt_light;
-    stroke: none;
-    font: $regular $font_larger $font_family_base;
-
-    &.dark {
-      fill: $text_dk_light;
-    }
-  }
-  .prefix {
-    fill: $text_lt_light;
-    stroke: none;
-    font: $regular $font_base $font_family_base;
-
-    &.dark {
-      fill: $text_dk_light;
-    }
-  }
-
-  rect.highcharts-background {
-    fill: #0000 !important;
-  }
-
-  .gauge-pane {
-    stroke-linejoin: round;
-  }
-
-  &.dark {
-    color: $text_dk_default;
-
-    .pb_title_kit_size_1,
-    .pb_caption_kit_xs {
-        color: $text_dk_light;
-    }
-  }
-}

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

@@ -1,215 +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.module.scss";
-import typography from "../tokens/exports/_typography.module.scss";
-
-import { deprecatedKitWarning } from "../utilities/deprecated";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import { GenericObject } from "../types";
-import { merge } from '../utilities/object' 
-
-type GaugeProps = {
-  aria: { [key: string]: string };
-  className?: string;
-  chartData?: { name: string; value: number[] | number }[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: { [key: string]: string };
-  disableAnimation?: boolean;
-  fullCircle?: boolean;
-  height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval?: number;
-  circumference: number[];
-};
-
-const Gauge = ({
-  aria = {},
-  chartData,
-  customOptions = {},
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  htmlOptions = {},
-  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): React.ReactElement => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  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: GenericObject) => {
-      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${dark ? " dark" : ""}">${prefix}</span>` +
-              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
-              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2,
-            },
-            y: -26,
-          },
-        },
-      },
-    };
-
-    setOptions(merge(staticOptions, customOptions));
-
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chartData]);
-
-    useEffect(() => {
-    // Warn about deprecated kit
-    deprecatedKitWarning('Gauge', 'Please use "PbGaugeChart" instead.');
-  }, []);
-
-  return (
-    <HighchartsReact
-        containerProps={{
-        className: classnames(css, globalProps(props)),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps,
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
-  );
-};
-
-export default Gauge;

data/app/pb_kits/playbook/pb_gauge/docs/_description.md

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 67,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-colors",
-  chart_data: data,
-  colors: ['data-7']
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 67 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-
-const GaugeColors = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeColors;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_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 **ONE** desired value `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_gauge/docs/_gauge_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. Hex colors are also available `eg: #CA0095`