playbook_ui_docs 13.22.0.pre.alpha.playbookgemspecrailsversion2608 → 13.23.0.pre.alpha.PLAY1284investigation2657

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45231373914385c1a87911aabeb3cc65256c4c874356894e30cc148c3edd18a9
-  data.tar.gz: 44843deb7040754391dec172d5397b5f7cd19626059da0e5912debd8ee8a5882
+  metadata.gz: 06bdd9ccfee263666899576e57d9ef54ccb2e7906006bcf984b7cf156aa9a8f3
+  data.tar.gz: 66c6fabfcc30a18004c79541dc5c354387a624261c3460b7c8442ef5872ec712
 SHA512:
-  metadata.gz: 0bc0f7bb219bd88b7d7aa34204fef9e82c4314cb53180801ca183662eb21cee32816748ddbaa544ed115a2eb1c728cd2b33bcb8ec278ad61554c2ab97830e4b6
-  data.tar.gz: 8480214ba05eace0268aafd2a1629787923baa167eb619d023c3a3b239edae9aae2cad3a91e7fe8766f97a50e422f4be3acbd7859505a8ec0492360737a853a0
+  metadata.gz: 617bf467c44ac9574c0a09f6818234df1d5f8db9f9303a620052ccc748d9112a03ac5c54ed57a0301dd3b091d9b5933ba752d29bbac7368cb9c89a398d69dcb0
+  data.tar.gz: 408a9dd519c47b3fde7761c3eccbb4975f12ac4f4d846a0e587b7c7d0ed78c50399196f92599440909a7c473ee5ddf6aa8aaff2a760d0309559d6a5cbca52f28

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Percentage',
+    data: [48, 70, 25, 55, 72],
+    color: '#F9BB00',
+    yAxis: 1
+}] %>
+
+<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
+
+<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_format: axis_formats,
+    axis_title: axis_titles,
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Secondary Y-axis',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Percentage',
+  data: [48, 70, 25, 55, 72],
+  color: '#F9BB00',
+  yAxis: 1
+}]
+
+const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
+
+const axisFormats = [{format: ""}, {format: "{value}%"}]
+
+const BarGraphSecondaryYAxis= (props) => (
+  <div>
+    <BarGraph
+        axisFormat={axisFormats}
+        axisTitle={axisTitles}
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Secondary Y-axis"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md

@@ -0,0 +1,3 @@
+Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array. 
+
+To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

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

@@ -9,6 +9,7 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
   react:
@@ -20,3 +21,4 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,3 +6,4 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+import {
+  Button,
+} from '../..'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Amaranth', value: '#9F2B68' },
+  { label: 'Key Lime', value: '#DAF7A6' },
+  { label: 'Turquois', value: '#00FFD0' },
+]
+
+const TypeaheadCustomMenuList = (props) => {
+  const defaultColorOptions = options.slice(0, 3)
+  const [colorOptions, setColorOptions] = useState(defaultColorOptions)
+
+  const moreToLoad = colorOptions.length == defaultColorOptions.length
+  const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
+
+  const menuListProps = {
+    footer: (<Button
+        margin="sm"
+        onClick={loadColors}
+        text={`Load ${moreToLoad ? "More" : "Less"}`}
+             />)
+  }
+
+  const MenuList = (props) => (
+    <Typeahead.MenuList
+        {...menuListProps}
+        {...props}
+    />
+  )
+
+  return (
+    <Typeahead
+        components={{ MenuList }}
+        label="Colors"
+        options={colorOptions}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCustomMenuList

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        highlighted => `<mark>${highlighted}</mark>`
+        (highlighted) => `<mark>${highlighted}</mark>`
       )
     }
     return (

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

@@ -22,3 +22,4 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
+    - typeahead_custom_menu_list: Custom MenuList

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

@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
+export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'