playbook_ui 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730 → 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8736

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d54d5b30f8aa5a3674fbcf5e138889fa5621bf8f0ce5b4fa55106804e4dbb43e
-  data.tar.gz: 5ea3e7bdd1b718cfb5a6795512874bb12b012627edd9b82b82a04f2ca27f683f
+  metadata.gz: d5902e5bc12ee89151baef7b62f1d1a2e4fc92d9969305d9accb9a1e7554490e
+  data.tar.gz: 2240560d606feaee834230ede5011097b39a164e6c3720eb9c507d1387735084
 SHA512:
-  metadata.gz: 9b544a9e3c00e1a0cc07bc8f676349059100aad6ed934eefe690853543695c75f13e9a422da64cdd479f9d75375c6e6eab9829e0b8da497844928652e15e195c
-  data.tar.gz: 6f03c79d01b1bd9ab12a6be7c13cda2c02ad0f5d27d18eb64975d51d26b04cfddbf7c7faf694661c7c5f76afc65d6295076237726cdca20f007c68a25e67845a
+  metadata.gz: 817b988e9f566a354b634dcf2280df78aabfff9ba4c104052511a2a4c719e07d91692928b6072e77b193c8c8074dd6e07501871fc60ad8973aef1a46ff38217e
+  data.tar.gz: 820b313a60c018ebae9e1fd35db466d19b791615d46c961038307c099e8615a7559067efa4673b557a568e75b6864ae915d2f0daba0355e137cda5ba8978a201

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height: 18px;
+  $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
   align-items: center;
@@ -13,7 +13,6 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
-  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -31,10 +30,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height;
-    min-height: $pb_badge_height;
-    min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
 
   &[class*=_notification] {

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

@@ -1,10 +1,6 @@
 import React from 'react'
-import colors from '../../tokens/exports/_colors.module.scss'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import barGraphTheme from '../barGraphTheme';
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -23,33 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const BarGraphColors = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphColors = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="bar-colors"
+        title="Bar Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphColors

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
+
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
+
+const barGraphOptions = {
+  yAxis: {
+    tickInterval: 5,
+  },
+  xAxis: {
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
+}
+
+const BarGraphCustom = () => (
+  <div>
+    <BarGraph
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="happiness-dashboard"
+        legend
+        title="Bar Graph with Custom Overrides"
+    />
+  </div>
+)
+
+export default BarGraphCustom

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

@@ -0,0 +1,6 @@
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

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

@@ -1,8 +1,6 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -21,35 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-
-const BarGraphDefault = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphDefault = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphDefault

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

@@ -1,69 +1,39 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
-
-const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
-
-const BarGraphHeight = () => (
+const BarGraphDefault = (props) => (
   <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={pixelOptions}
-      />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="300"
+        id="bar-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
 
     <br />
     <br />
 
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={percentageOptions}
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="50%"
+        id="bar-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )
 
-export default BarGraphHeight
+export default BarGraphDefault

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

@@ -1,10 +1,9 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
-import barGraphTheme from '../barGraphTheme';
+import BarGraph from '../_bar_graph'
 
-const chartOptions = {
+
+const barGraphOptions = {
     chart: {
         type: 'bar'
     },
@@ -23,8 +22,13 @@ const chartOptions = {
         lineWidth: 0
     },
     yAxis: {
+        min: 0,
         title: {
-            text: '',
+            text: 'Population (millions)',
+            align: 'high'
+        },
+        labels: {
+            overflow: 'justify'
         },
     },
     tooltip: {
@@ -47,16 +51,16 @@ const chartOptions = {
     }, {
         name: 'Year 2018',
         data: [1276, 1007, 4561, 746]
-    }],
+    }]
 }
 
-const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-const BarGraphHorizontal = () => (
+const BarGraphHorizontal = (props) => (
   <div>
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={options}
+    <BarGraph
+        customOptions={barGraphOptions}
+        id="bar-horizontal"
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )

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

@@ -1,40 +1,24 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import barGraphTheme from '../barGraphTheme';
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { enabled: true },
-}
+const BarGraphLegend = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test-2"
+        legend
+        title="Bar Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-const BarGraphLegend = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-  
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
 export default BarGraphLegend

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

@@ -1,48 +1,25 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import barGraphTheme from '../barGraphTheme';
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const chartOptions = {
-    title: {
-      text: 'Bar Graph with Legend Non Clickable',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    legend: {
-      enabled: true,
-      events: {
-        itemClick: function () {
-          return false;
-        }
-      }
-    },
-  series: chartData
-}
-
-const BarGraphLegendNonClickable = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphLegendNonClickable = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test-3"
+        legend
+        title="Bar Graph with Legend Non Clickable"
+        toggleLegendClick={false}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphLegendNonClickable

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

@@ -1,11 +1,8 @@
 import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 import Title from "../../pb_title/_title"
 
-import barGraphTheme from '../barGraphTheme';
-
 const chartData = [{
   name: 'Installation',
   data: [1475],
@@ -23,76 +20,7 @@ const chartData = [{
   data: [1111],
 }]
 
-const alignChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Alignment of Legend',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    verticalAlign: 'top',
-    align: 'right',
-   },
-}
-
-const layoutChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Layout of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    layout: 'vertical',
-   },
-}
-
-const offsetChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Offset of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    layout: 'vertical',
-    x: 100,
-    y: 10,
-  },
-}
-
-const BarGraphLegendPosition = () => {
-  const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
-  const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
-  const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
-
-
-  return (
+const BarGraphLegendPosition = (props) => (
   <div>
     <Title
         paddingBottom="sm"
@@ -101,11 +29,19 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="align | verticalAlign"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={alignOptions}
+    <BarGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
     />
-
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -113,11 +49,19 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="layout"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={layoutOptions}
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
     />
-
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -125,12 +69,20 @@ const BarGraphLegendPosition = () => {
         tag="h4"
         text="x | y"
     />
-    <HighchartsReact 
-        highcharts={Highcharts}
-        options={offsetOptions}
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan']}
+        y={10}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )
-}
 
 export default BarGraphLegendPosition