playbook_ui 15.2.0.pre.alpha.play2318draggablelistnoborder11263 → 15.2.0.pre.alpha.play257911600

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+
+const data = [{ name: "Score", y: 780 }]
+
+const chartOptions = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+};
+
+const PbGaugeChartTitle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartTitle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb

@@ -0,0 +1,39 @@
+<% data1 = [{ name: 'Data Used', y: 32 }] %>
+<% data2 = [{ name: 'Sales to Date', y: 65 }] %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">GB</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span y="28" style="fill: #687887; font-size: 16px;">$</span>' +
+          '<span class="fix" y="38">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">k</span>',
+      },
+    },
+  },
+} %>
+
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+
+const data1 = [
+  { name: 'Data Used', y: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', y: 65 },
+]
+
+const chartOptions1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
+      },
+    },
+  },
+};
+const chartOptions2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
+          `<span class="fix" y="38">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartUnits = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions1}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartUnits

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  
+  react:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_live_data: Live Data
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbGaugeChartDefault } from './_pb_gauge_chart_default.jsx'
+export { default as PbGaugeChartDisableAnimation } from './_pb_gauge_chart_disable_animation.jsx'
+export { default as PbGaugeChartTitle } from './_pb_gauge_chart_title.jsx'
+export { default as PbGaugeChartUnits } from './_pb_gauge_chart_units.jsx'
+export { default as PbGaugeChartFullCircle } from './_pb_gauge_chart_full_circle.jsx'
+export { default as PbGaugeChartMinMax } from './_pb_gauge_chart_min_max.jsx'
+export { default as PbGaugeChartSizing } from './_pb_gauge_chart_sizing.jsx'
+export { default as PbGaugeChartHeight } from './_pb_gauge_chart_height.jsx'
+export { default as PbGaugeChartLiveData } from './_pb_gauge_chart_live_data.jsx'
+export { default as PbGaugeChartColor } from './_pb_gauge_chart_color.jsx'
+export { default as PbGaugeChartComplex } from './_pb_gauge_chart_complex.jsx'

data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts

@@ -0,0 +1,91 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbGaugeGraphTheme = {
+  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 pbGaugeGraphTheme;

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbGaugeChart
+    class PbGaugeChart < ::Playbook::KitBase
+      prop :options, default: {}
+
+      def react_props
+        {
+          className: classname,
+          data: data,
+          options: options,
+          id: id,
+        }
+      end
+
+      def classname
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbGaugeChart } from 'playbook-ui'
+
+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 chartOptions = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+}
+
+const testId = 'pbgaugechart1'
+
+test('Kit to exist', () => {
+  render(
+  <PbGaugeChart
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_gauge_chart')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbGaugeChart
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        id='gauge-chart-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'gauge-chart-id')
+})

data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss

@@ -0,0 +1,3 @@
+.pb_pb_line_graph {
+
+}

data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.tsx

@@ -0,0 +1,61 @@
+
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import pbLineGraphTheme from './pbLineGraphTheme'
+import { globalProps } from '../utilities/globalProps'
+
+
+type PbLineGraphProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  options: Record<string, unknown>
+}
+
+const PbLineGraph = (props: PbLineGraphProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  htmlOptions = {},
+  options
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(buildCss('pb_pb_line_graph'), globalProps(props), className)
+  
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <PbLineGraph />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbLineGraphTheme, options)
+  }, [options])
+  return (
+    <div>
+        <HighchartsReact
+            containerProps={{
+                    className: classnames(classes),
+                    id: id,
+                    ...ariaProps,
+                    ...dataProps,
+                    ...htmlProps
+                  }}
+            highcharts={Highcharts}
+            options={mergedOptions}
+        />
+    </div>
+  )
+}
+
+export default PbLineGraph

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

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb

@@ -0,0 +1,34 @@
+<% 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],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  series: data,
+  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
+  title: { text: "Line Graph with Custom Data Colors" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+import { colors } from 'playbook-ui'
+
+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 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 PbLineGraphColors = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphColors

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.
+
+For Rails, HEX values are required.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb

@@ -0,0 +1,34 @@
+<% 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],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  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",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+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 PbLineGraphDefault = (props) => (
+  <div>
+    <PbLineGraph
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphDefault

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb

@@ -0,0 +1,47 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options_first = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+  <% chart_options_second = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options_first}) %>
+<%= pb_rails("pb_line_graph", props: {options: chart_options_second}) %>