playbook_ui 15.8.0.pre.rc.1 → 16.0.0

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

@@ -1,43 +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']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Line Graph with Legend" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: {
-    enabled: true,
-  },
-}
-
-const LineGraphLegend = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegend

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

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

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

@@ -1,49 +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']
-
-const chartOptions = {
-  title: {
-    text: 'Line Graph with Legend Non Clickable',
-  },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    events: {
-      itemClick: function () {
-        return false;
-      }
-    }
-  },
-  series: data
-}
-
-const LineGraphLegendNonclickable = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegendNonclickable

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

@@ -1,62 +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("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
-
-<%= pb_rails("line_graph", props: {
-    id: "legend-position-line",
-    gradient: false,
-    chart_data: data,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
-    title: 'Alignment of Legend',
-    axis_title: 'Number of Employees',
-    legend: true,
-    align: 'right',
-    vertical_align: 'top',
-    padding_bottom: "sm",
-}) %>
-
-<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
-
-<%= pb_rails("line_graph", props: {
-    id: "legend-position-line-1",
-    gradient: false,
-    chart_data: data,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
-    title: 'Layout of Legend',
-    axis_title: 'Number of Employees',
-    legend: true,
-    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("line_graph", props: {
-    id: "legend-position-line-2",
-    gradient: false,
-    chart_data: data,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
-    title: 'Offset of Legend',
-    axis_title: 'Number of Employees',
-    legend: true,
-    layout: "vertical",
-    x: 100,
-    y: 10,
-    padding_top: "sm",
-}) %>

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

@@ -1,129 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import Title from '../../pb_title/_title'
-
-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']
-
-const LineGraphLegendPosition = (props) => {
-  const chartOptionsFirst = {
-    title: { text: "Alignment of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      align: 'right',
-      verticalAlign: 'top'
-    },
-  }
-
-  const chartOptionsSecond = {
-    title: { text: "Layout of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical'
-    },
-  }
-
-  const chartOptionsThird = {
-    title: { text: "Offset of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical',
-      x: 100,
-      y: 10
-    },
-  }
-
-  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-  const optionsThird = Highcharts.merge({}, lineGraphTheme, chartOptionsThird)
-
-  return (
-    <div>
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="align | verticalAlign"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="layout"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="x | y"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsThird}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegendPosition

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

@@ -1,14 +0,0 @@
-##### Prop
-
-`align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
-`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 alignment. Negative x moves it to the left, positive x moves it to the right
-
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

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

@@ -1,18 +0,0 @@
-examples:
-
-  rails:
-  - line_graph_default: Default
-  - line_graph_legend: Legend
-  - line_graph_legend_position: Legend Position
-  - line_graph_legend_nonclickable: Legend Nonclickable
-  - line_graph_height: Height
-  - line_graph_colors: Color Overrides
-
-
-  react:
-  - line_graph_default: Default
-  - line_graph_legend: Legend
-  - line_graph_legend_position: Legend Position
-  - line_graph_legend_nonclickable: Legend Nonclickable
-  - line_graph_height: Height
-  - line_graph_colors: Color Overrides

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

@@ -1,6 +0,0 @@
-export { default as LineGraphDefault } from './_line_graph_default.jsx'
-export { default as LineGraphLegend } from './_line_graph_legend.jsx'
-export { default as LineGraphLegendPosition } from './_line_graph_legend_position.jsx'
-export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
-export { default as LineGraphHeight } from './_line_graph_height.jsx'
-export { default as LineGraphColors } from './_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import LineGraph from './_line_graph';
-
-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 = 'linechart1';
-
-test('uses exact classname', () => {
-  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],
-  }]
-  render(
-    <LineGraph
-        axisTitle="Number of Employees"
-        chartData={data}
-        data={{ testid: testId }}
-        id="line-default"
-        subTitle="Source: thesolarfoundation.com"
-        title="Solar Employment Growth by Sector, 2010-2016"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_bar_graph');
-});

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -1,30 +0,0 @@
-import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const markerStyles = (highchart) => {
-  highchart.plotOptions.line.marker.enabled = true
-  highchart.plotOptions.series.marker.enabled = true
-  highchart.plotOptions.series.marker.fillColor = 'white'
-  highchart.plotOptions.series.marker.lineWidth = 2
-}
-
-const fixTooltipStyles = () => {
-  document.getElementById('main-view').setAttribute('style', 'position: static !important')
-}
-
-const styleDataLabels = (highchart) => {
-  const series = highchart.plotOptions.series
-
-  series.dataLabels.style.fontFamily = typography.font_family_base
-  series.dataLabels.style.fontSize = typography.text_small
-  series.dataLabels.style.fontWeight = typography.bold
-}
-
-const pbLineGraph = (highchart) => {
-  commonSettings(highchart)
-  styleDataLabels(highchart)
-  markerStyles(highchart)
-  fixTooltipStyles()
-}
-
-export default pbLineGraph

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -1,125 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const lineGraphTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    text: "" ,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  chart: {
-    type: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    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: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { 
-    enabled: false,
-    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,
-    },
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  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 as string | undefined,
-    minorTickInterval: null as number | null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    tickPixelInterval: 50,
-    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,
-      },
-    },
-  },
-}
-
-export default lineGraphTheme;

data/app/pb_kits/playbook/pb_line_graph/line_graph.html.erb

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

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -1,93 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbLineGraph
-    class LineGraph < Playbook::KitBase
-      prop :align, type: Playbook::Props::Enum,
-                   values: %w[left right center],
-                   default: "center"
-      prop :axis_title
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: []
-      prop :custom_options, default: {}
-      prop :gradient, type: Playbook::Props::Boolean,
-                      default: false
-      prop :point_start, type: Playbook::Props::Numeric
-      prop :subtitle
-      prop :title
-      prop :x_axis_categories, type: Playbook::Props::Array,
-                               default: []
-      prop :y_axis_min, type: Playbook::Props::Numeric
-      prop :y_axis_max, type: Playbook::Props::Numeric
-      prop :legend, type: Playbook::Props::Boolean,
-                    default: false
-      prop :toggle_legend_click, type: Playbook::Props::Boolean,
-                                 default: true
-      prop :height
-      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 chart_type
-        gradient ? "area" : "line"
-      end
-
-      def standard_options
-        {
-          align: align,
-          id: id,
-          className: classname,
-          chartData: chart_data,
-          dark: dark ? "dark" : "",
-          type: chart_type,
-          title: title,
-          subTitle: subtitle,
-          axisTitle: axis_title,
-          pointStart: point_start,
-          xAxisCategories: x_axis_categories,
-          yAxisMin: y_axis_min,
-          yAxisMax: y_axis_max,
-          legend: legend,
-          toggleLegendClick: toggle_legend_click,
-          height: height,
-          colors: colors,
-          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_line_graph")
-      end
-    end
-  end
-end