playbook_ui 15.2.0.pre.alpha.play257911600 → 15.2.0.pre.alpha.testingmanual1

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

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<% 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

@@ -1,37 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<% 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

@@ -1,56 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<% 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

@@ -1,40 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<% 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

@@ -1,65 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<% 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

@@ -1,27 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<% 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

@@ -1,58 +0,0 @@
-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

@@ -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_pb_gauge_chart/docs/example.yml

@@ -1,29 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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;