playbook_ui 15.8.0.pre.rc.1 → 16.0.0

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb

@@ -1,11 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 45,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-default",
-  chart_data: data,
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 45 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugeDefault = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDefault;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Participants',
-    value: 84,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-disable-animation",
-  chart_data: data,
-  disable_animation: true,
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Participants", y: 84 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-  },
-};
-
-const GaugeDisableAnimation = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          disableAnimation
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDisableAnimation;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Capacity',
-    value: 75,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "full-circle",
-  chart_data: data,
-  full_circle: true,
-  title: "Seating Capacity",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Capacity", y: 75 }]
-
-const baseOptions = {
-  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 GaugeFullCircle = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-full-circle"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeFullCircle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-px",
-  chart_data: [{ name: "Pixels", value: 400 }],
-  height: '400',
-  title: "Fixed Height in Pixels",
-  suffix: "px"
-}) %>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-percent",
-  chart_data: [{ name: "Percentage", value: 45 }],
-  height: '45%',
-  title: "Height as Percentage of Width",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const GaugeHeight = () => {
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={Highcharts.merge({}, gaugeTheme, {
-            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>`,
-                },
-              },
-            },
-          })}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={Highcharts.merge({}, gaugeTheme, {
-            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>`,
-                },
-              },
-            },
-          })}
-      />
-    </div>
-  );
-};
-
-export default GaugeHeight;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,76 +0,0 @@
-import React, { useState, useRef } from 'react'
-import Button from '../../pb_button/_button'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const GaugeLiveData = (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 options = Highcharts.merge({}, gaugeTheme,
-    {
-      title: {
-        text: name,
-      },
-      series: [{
-        data: [{ name: name, y: value }]
-      }]
-    }
-  )
-
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-          {...props}
-      />
-      <Button
-          onClick={updateName}
-          text="Update Name"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-          ref={chartRef}
-      />
-    </div>
-  )
-}
-
-export default GaugeLiveData

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb

@@ -1,15 +0,0 @@
-<% data = [
-  {
-    name: 'Rating',
-    value: 4.5,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-min-max",
-  chart_data: data,
-  min: 0,
-  max: 5,
-  show_labels: true,
-  title: "Product Rating"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Rating", y: 4.5 }]
-
-const baseOptions = {
-  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 GaugeMinMax = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-min-max"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeMinMax;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md

@@ -1 +0,0 @@
-### Min defaults to 0, Max to 100.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -1,27 +0,0 @@
-<%= 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("gauge", props: {
-        id: "gauge-sizing4",
-        chart_data: [{ name: "Point 1", value: 100 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing3",
-        chart_data: [{ name: "Point 2", value: 75 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing2",
-        chart_data: [{ name: "Point 3", value: 50 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing1",
-        height: '100%',
-        chart_data: [{ name: "Point 4", value: 25 }],
-      }) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -1,80 +0,0 @@
-import React from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const GaugeSizing = (props) => (
-  <div>
-    <Flex
-        align="center"
-        wrap
-        {...props}
-    >
-      <FlexItem
-          fixedSize="400px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 1", y: 100 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="300px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 2", y: 75 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="200px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 3", y: 50 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="125px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              chart: {
-                height: "100%",
-              },
-              series: [{ data: [{ name: "Point 4", y: 25 }] }],
-            })}
-        />
-      </FlexItem>
-    </Flex>
-  </div>
-)
-
-export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

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

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Score',
-    value: 780,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-title",
-  chart_data: data,
-  min: 300,
-  max: 850,
-  title: "Credit Score",
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Score", y: 780 }]
-
-const baseOptions = {
-  title: {
-    text: "Credit Score",
-  },
-  yAxis: {
-    min: 300,
-    max: 850,
-  },
-  series: [{ data: data }],
-};
-
-const GaugeTitle = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-title"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeTitle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -1,29 +0,0 @@
-<% data1 = [
-  {
-    name: 'Data Used',
-    value: 32,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-units1",
-  chart_data: data1,
-  title: "Data Usage",
-  suffix: "GB"
-}) %>
-
-<% data2 = [
-  {
-    name: 'Sales to Date',
-    value: 65,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-units2",
-  chart_data: data2,
-  title: "Sales Goal",
-  prefix: "$",
-  suffix: "k",
-
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data1 = [
-  { name: 'Data Used', y: 32 },
-]
-const data2 = [
-  { name: 'Sales to Date', y: 65 },
-]
-
-const baseOptions1 = {
-  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 baseOptions2 = {
-  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 GaugeUnits = () => {
-  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
-  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units1"
-          options={options1}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units2"
-          options={options2}
-      />
-    </div>
-  );
-};
-
-export default GaugeUnits;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md

@@ -1 +0,0 @@
-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_gauge/docs/example.yml

@@ -1,27 +0,0 @@
-examples:
-
-  rails:
-  - gauge_default: Default
-  - gauge_disable_animation: Disable Animation
-  - gauge_title: Title
-  - gauge_units: Units
-  - gauge_full_circle: Full Circle
-  - gauge_min_max: Min Max Labels
-  - gauge_sizing: Sizing
-  - gauge_height: Height
-  - gauge_colors: Color Overrides
-  - gauge_complex: Complex
-
-
-  react:
-  - gauge_default: Default
-  - gauge_disable_animation: Disable Animation
-  - gauge_title: Title
-  - gauge_units: Units
-  - gauge_full_circle: Full Circle
-  - gauge_min_max: Min Max Labels
-  - gauge_sizing: Sizing
-  - gauge_height: Height
-  - gauge_live_data: Live Data
-  - gauge_colors: Color Overrides
-  - gauge_complex: Complex