playbook_ui_docs 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_disable_animation.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+const data = [{ name: "Participants", y: 84 }]
+
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+};
+
+const PbGaugeChartDisableAnimation = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartDisableAnimation

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

@@ -0,0 +1,23 @@
+<% data = [{ name: "Capacity", y: 75 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Capacity", y: 75 }]
+
+const chartOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+
+const PbGaugeChartFullCircle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartFullCircle

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

@@ -0,0 +1,40 @@
+<% chart_options = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">px</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const chartOptions = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+      },
+    },
+  },
+};
+
+const chartOptions2 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartHeight = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartHeight

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

@@ -0,0 +1,64 @@
+import React, { useState, useRef } from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Button from '../../pb_button/_button'
+
+const PbGaugeChartLiveData = (props) => {
+  const [value, setValue] = useState(50)
+  const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const updateValue = () => {
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
+  }
+
+  const updateName = () => {
+    let index = namesArray.indexOf(name)
+    if (namesArray.indexOf(name) == 5) {
+      index = 0
+    } else {
+      index += 1
+    }
+    setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
+  }
+
+  const chartOptions = {
+    title: {
+      text: name,
+    },
+    series: [{
+      data: [{ name: name, y: value }]
+    }]
+  }
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+        />
+        <Button
+            onClick={updateName}
+            text="Update Name"
+        />
+      <PbGaugeChart
+          options={chartOptions}
+          ref={chartRef}
+          {...props}
+      />
+    </div>
+  );
+}
+
+export default PbGaugeChartLiveData

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

@@ -0,0 +1,27 @@
+<% data = [{ name: "Rating", y: 4.5 }] %>
+
+<% chart_options = {
+title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: nil,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: '#C1CDD6',
+        fontWeight:'700',
+      }
+    },
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Rating", y: 4.5 }]
+
+const chartOptions = {
+  title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: colors.neutral,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.bold,
+      }
+    },
+  },
+  series: [{ data: data }],
+};
+const PbGaugeChartMinMax = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartMinMax

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

@@ -0,0 +1 @@
+By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

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

@@ -0,0 +1,19 @@
+<% chart_options = { series: [{ data:[{ name: "Point 1", y: 100 }] }] } %>
+<% chart_options_1 = { series: [{ data:[{ name: "Point 2", y: 75 }] }] } %>
+<% chart_options_2 = { series: [{ data:[{ name: "Point 3", y: 50 }] }] } %>
+<% chart_options_3 = { series: [{ data:[{ name: "Point 4", y: 25 }] }] } %>
+
+<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
+      <%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "155px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_3 }) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+
+
+const PbGaugeChartSizing = (props) => (
+  <div>
+    <Flex
+        align="center"
+        wrap
+    >
+      <FlexItem
+          fixedSize="400px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 1", y: 100 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="300px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 2", y: 75 }] }],
+            }}
+            {...props}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="200px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 3", y: 50 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="125px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              chart: {
+                height: "100%",
+              },
+              series: [{ data: [{ name: "Point 4", y: 25 }] }],
+            }}
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default PbGaugeChartSizing

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

@@ -0,0 +1,3 @@
+The Gauge chart resizes dynamically to fit whatever element it's placed within. 
+
+**Note**: set overflow to hidden on the parent element when nesting gauges inside of flex items to best respond to shrinking screens.

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

@@ -0,0 +1,14 @@
+<% data = [{ name: "Score", y: 780 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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_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}) %>