playbook_ui 15.8.0.pre.rc.1 → 16.0.0

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

@@ -1,11 +0,0 @@
-export { default as GaugeDefault } from './_gauge_default.jsx'
-export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
-export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
-export { default as GaugeHeight } from './_gauge_height.jsx'
-export { default as GaugeMinMax } from './_gauge_min_max.jsx'
-export { default as GaugeSizing } from './_gauge_sizing.jsx'
-export { default as GaugeTitle } from './_gauge_title.jsx'
-export { default as GaugeUnits } from './_gauge_units.jsx'
-export { default as GaugeLiveData } from './_gauge_live_data.jsx'
-export { default as GaugeColors } from './_gauge_colors.jsx'
-export { default as GaugeComplex } from './_gauge_complex.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.html.erb

@@ -1,2 +0,0 @@
-<%= react_component('Gauge', object.chart_options) %>
-

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbGauge
-    class Gauge < Playbook::KitBase
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: [{ name: "Name", value: 0 }]
-      prop :custom_options, default: {}
-      prop :style, type: Playbook::Props::Enum,
-                   values: %w[solidgauge],
-                   default: "solidgauge"
-      prop :title, type: Playbook::Props::String, default: ""
-      prop :prefix, type: Playbook::Props::String, default: ""
-      prop :suffix, type: Playbook::Props::String, default: ""
-      prop :height, type: Playbook::Props::String, default: nil
-      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
-                                      {point.name}: ' + '<b>{point.y}
-                                    </b>'
-      prop :full_circle, type: Playbook::Props::Boolean, default: false
-      prop :show_labels, type: Playbook::Props::Boolean, default: false
-      prop :disable_animation, type: Playbook::Props::Boolean, default: false
-      prop :min, type: Playbook::Props::Numeric, default: 0
-      prop :max, type: Playbook::Props::Numeric, default: 100
-      prop :colors, type: Playbook::Props::Array, default: []
-
-      def standard_options
-        {
-          id: id,
-          chartData: chart_data,
-          circumference: full_circle ? [0, 360] : [-100, 100],
-          dark: dark ? "dark" : "",
-          disableAnimation: disable_animation,
-          height: height,
-          min: min,
-          max: max,
-          title: title,
-          suffix: suffix,
-          prefix: prefix,
-          showLabels: show_labels,
-          style: style,
-          tooltipHtml: tooltip_html,
-          type: style,
-          colors: colors,
-        }
-      end
-
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def classname
-        generate_classname("pb_gauge_kit")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import Gauge from './_gauge';
-
-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 = 'gauge1';
-
-test('uses exact classname', () => {
-  const data = [
-    { name: 'Name', value: 45 },
-  ]
-  render(
-    <Gauge
-        chartData={data}
-        data={{ testid: testId }}
-        id='gaugeid'
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_gauge_kit');
-});
-

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -1,91 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const gaugeTheme = {
-  title: { 
-    text: "",
-    style: {
-      fontFamily: typography.font_family_base,
-      fontSize: typography.text_larger,
-    },
-  },
-  chart: {
-    type: "solidgauge",
-    events: {
-      render() {
-        this.container
-          const arc = this.container.querySelector('path.gauge-pane');
-          if (arc) arc.setAttribute('stroke-linejoin', 'round');
-      }
-    }
-  },
-  pane: {
-    size: "90%",
-    startAngle: -100,
-    endAngle: 100,
-    background: [
-      {
-        borderWidth: 20,
-        innerRadius: "90%",
-        outerRadius: "90%",
-        shape: "arc",
-        className: "gauge-pane",
-        borderColor: colors.border_light,
-        borderRadius: '50%',
-      },
-    ],
-  },
-  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,
-    },
-  },
-  yAxis: {
-    min: 0,
-    max: 100,
-    lineWidth: 0,
-    tickPositions: [] as number[],
-  },
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_1,
-      borderWidth: 20,
-      color: colors.data_1,
-      radius: 90,
-      innerRadius: "90%",
-      y: -26,
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_lt_default,
-        enabled: true,
-        format: '<span class="fix">{y:,f}</span>',
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default gaugeTheme;

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

@@ -1,3 +0,0 @@
-rect.highcharts-background {
-    fill: #0000 !important;
-}

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

@@ -1,166 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { deprecatedKitWarning} from "../utilities/deprecated";
-
-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 { merge } from '../utilities/object' 
-
-type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
-  chartData: {
-    name: string;
-    data: number[];
-  }[];
-  customOptions?: Partial<Highcharts.Options>;
-  gradient?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  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",
-  customOptions = {},
-  dark = false,
-  gradient = false,
-  type = "line",
-  htmlOptions = {},
-  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 htmlProps = buildHtmlProps(htmlOptions)
-
-  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 filteredProps: any = {...props};
- delete filteredProps.verticalAlign;
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-
-    useEffect(() => {
-      // Warn about deprecated kit
-      deprecatedKitWarning('LineGraph', 'Please use "PbLineGraph" instead.');
-    }, []);
-
-  return (
-    <HighchartsReact
-        containerProps={{
-        className: classnames(globalProps(filteredProps), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
-  );
-};
-
-export default LineGraph;

data/app/pb_kits/playbook/pb_line_graph/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 lineGraphTheme.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_line_graph/docs/_line_graph_colors.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}, {
-    name: 'Manufacturing',
-    data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
-}, {
-    name: 'Sales & Distribution',
-    data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
-}, {
-    name: 'Project Development',
-    data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
-}, {
-    name: 'Other',
-    data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-colors", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Line Graph with Custom Data Colors', 
-    axis_title: 'Number of Employees',
-    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
-}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
-}, {
-  name: 'Project Development',
-  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
-}, {
-  name: 'Other',
-  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphColors = () => {
-  const chartOptions = {
-    title: {
-      text: 'Line Graph with Custom Data Colors',
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data,
-    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
-  }
-
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_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_line_graph/docs/_line_graph_colors_react.md

@@ -1,3 +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 colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}, {
-    name: 'Manufacturing',
-    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
-}, {
-    name: 'Sales & Distribution',
-    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
-}, {
-    name: 'Project Development',
-    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
-}, {
-    name: 'Other',
-    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-default", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Solar Employment Growth by Sector, 2010-2016', 
-    subtitle: 'Source: thesolarfoundation.com', 
-    axis_title: 'Number of Employees' 
-}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphDefault = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphDefault

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-fixed-height", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Fixed Height (300px)', 
-    axis_title: 'Number of Employees',
-    height: '300'
-}) %>
-
-<br /><br />
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-precentage-height", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Percentage Height (50%)', 
-    axis_title: 'Number of Employees',
-    height: '50%'
-}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Number of Installations',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphHeight = () => {
-  const chartOptionsFirst = {
-    title: {
-      text: 'Fixed Height (300px)',
-    },
-    chart: {
-      height: '300px'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const chartOptionsSecond = {
-    title: {
-      text: 'Percentage Height (50%)',
-    },
-    chart: {
-      height: '50%'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-    </div>
-  )
-}
-
-export default LineGraphHeight

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb

@@ -1,15 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-test-2", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
-    title: 'Line Graph with Legend', 
-    axis_title: 'Number of Employees',
-    legend: true
-}) %>
-