playbook_ui_docs 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335 → 14.23.0.pre.alpha.PLAY2303optD9000

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a0889bb7965dc4804ce05e5e498157fc41c82271a191ce23544542b60689f6d
-  data.tar.gz: bafe5d69a0f5a67f466e43a2c56b9bcef3d1b003195485359aa048afadf59137
+  metadata.gz: c236c171ceca27545160fdfed4dc5bb252419123f5ae9a5037f14bc032edd923
+  data.tar.gz: '0949388c881098167458cbebdbc50b949574299ec2ad1be156b13b9ea43db6cc'
 SHA512:
-  metadata.gz: 5a0a3c86bd03e2a6742b78caf87927266b799a6b55640fd3e32cad3d5999837458370bc4f140b7fe258aad8873bf83f42e19a44dcef89c38a38804d770f30ba9
-  data.tar.gz: 77823c2f78b4a40de203570323aaf1d8c508557386463a304c43227d7160185f372fe501c6a41fb5bd79ab08c1c00a562727db87513bf6af0a934864d574aa21
+  metadata.gz: a22b059c987a2e6c44b795291faf3dedb61f3ac3f257f38daef2bb32655779c8321743f0923a059327616b5eb044f9c38b853a0729a82051a776a0f167267f95
+  data.tar.gz: 226c6c407fa240a25f82ad46f530bb99528ea9b89a08f49ac13a59c909419c451749fdd87d64a67bb025dbc7aba36f5fa38c89a0616b85cf048c8a2a94b88883

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_header_no_action_bar",
+  id: "selectable_rows_with_actions",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -1 +1 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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

@@ -10,17 +10,14 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_column_border_color_rails: Column Group Border Color
@@ -30,8 +27,6 @@ examples:
   - advanced_table_default: Default (Required Props)
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - advanced_table_sort_per_column: Enable Sort By Column
-  - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
@@ -46,7 +41,6 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State
@@ -54,7 +48,6 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,7 +21,6 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
@@ -41,6 +40,3 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
-export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
-export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
-export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'

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

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
-          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1,2 +1 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
-If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx

@@ -18,7 +18,6 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
-          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,9 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  - dropdown_with_custom_radio_options: Custom Radio Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,5 +21,4 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'

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

@@ -1,36 +1,19 @@
 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 Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 67 },
+]
 
-const data = [{ name: "Name", y: 67 }]
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-
-const GaugeColors = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeColors;
+export default GaugeColors

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

@@ -2,44 +2,14 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Gauge from '../../pb_gauge/_gauge'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
-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: "Name", y: 10 }];
-
-const baseOptions = {
-  series: [{ data: data }],
-  chart: {
-    height: "150",
-  },
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
-      },
-    },
-  },
-};
-
-const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+const data = [{ name: "Name", value: 10 }];
 
 const GaugeComplex = (props) => (
   <Flex
@@ -130,9 +100,13 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <HighchartsReact
-                    highcharts={Highcharts}
-                    options={options}
+                <Gauge
+                    chartData={data}
+                    disableAnimation
+                    height="150"
+                    id="gauge-complex"
+                    suffix="%"
+                    {...props}
                 />
                </FlexItem>
             </Flex>

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

@@ -1,30 +1,18 @@
 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 Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 45 },
+]
 
-const data = [{ name: "Name", y: 45 }]
+const GaugeDefault = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugeDefault = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDefault;
+export default GaugeDefault

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

@@ -1,36 +1,19 @@
 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 Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Participants', value: 84 },
+]
 
-const data = [{ name: "Participants", y: 84 }]
+const GaugeDisableAnimation = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        disableAnimation
+        id="gauge-disable-animation"
+        {...props}
+    />
+  </div>
+)
 
-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;
+export default GaugeDisableAnimation

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

@@ -1,49 +1,21 @@
 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'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Capacity', value: 75 },
+]
 
-const data = [{ name: "Capacity", y: 75 }]
+const GaugeFullCircle = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        fullCircle
+        id="gauge-full-circle"
+        suffix="%"
+        title="Seating Capacity"
+        {...props}
+    />
+  </div>
+)
 
-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;
+export default GaugeFullCircle

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

@@ -1,62 +1,25 @@
 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'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const GaugeHeight = (props) => (
+  <div>
+    <Gauge
+        chartData={[ { name: 'Pixels', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+        {...props}
+    />
+    <Gauge
+        chartData={[ { name: 'Percentage', value: 45 } ]}
+        height="45%"
+        id="gauge-height-percent"
+        suffix="%"
+        title="Height as Percentage of Width"
+        {...props}
+    />
+  </div>
+)
 
-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;
+export default GaugeHeight

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

@@ -1,31 +1,15 @@
-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"
+import React, { useState } from 'react'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+import Button from '../../pb_button/_button'
+import Gauge from '../../pb_gauge/_gauge'
 
 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)
-    }
+    setValue(Math.floor(Math.random() * 100))
   }
-
   const updateName = () => {
     let index = namesArray.indexOf(name)
     if (namesArray.indexOf(name) == 5) {
@@ -34,23 +18,8 @@ const GaugeLiveData = (props) => {
       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 }]
-      }]
-    }
-  )
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   return (
     <div>
@@ -64,10 +33,10 @@ const GaugeLiveData = (props) => {
           text="Update Name"
           {...props}
       />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-          ref={chartRef}
+      <Gauge
+          chartData={[{ name: name, value: value }]}
+          id="gauge-live-data"
+          {...props}
       />
     </div>
   )