playbook_ui 15.8.0.pre.rc.1 → 16.0.0

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -1,22 +0,0 @@
-<% data_rounded = [{
-    name: 'Waiting for Calls',
-    value: 20,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After Call',
-    value: 10,
-  }
-] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    chart_data: data_rounded,
-    id: "default-test-rounded",
-    inner_size: "lg",
-    rounded: true,
-
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const dataRounded = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const CircleChartRounded = () => {
-  const chartOptions = {
-    series: [{ data: dataRounded }],
-    plotOptions: {
-      pie: {
-        borderColor: null,
-        borderWidth: 20,
-        innerSize: '100%',
-      },
-    },
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartRounded

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb

@@ -1,37 +0,0 @@
- <% data = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    chart_data: data,
-    id: "with-labels-example",
-    data_labels: true
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const dataWithLabels = [
-  {
-    name: 'Facebook',
-    y: 2498,
-  },
-  {
-    name: 'YouTube',
-    y: 2000,
-  },
-  {
-    name: 'WhatsApp',
-    y: 2000,
-  },
-  {
-    name: 'Facebook Messenger',
-    y: 1300,
-  },
-  {
-    name: 'WeChat',
-    y: 1165,
-  },
-  {
-    name: 'Instagram',
-    y: 1000,
-  },
-  {
-    name: 'Tik Tok',
-    y: 800,
-  },
-]
-
-const CircleChartWithLabels = () => {
-  const chartOptions = {
-    series: [{ data: dataWithLabels }],
-    plotOptions: {
-      pie: {
-        dataLabels: {
-          enabled: true,
-        }
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartWithLabels

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb

@@ -1,22 +0,0 @@
-<% data_1 = [{
-      name: 'Bugs',
-      value: 8,
-
-    },
-    {
-      name: 'Chores',
-      value: 1,
-
-    },
-    {
-      name: 'Stories',
-      value: 12,
-    }
-  ] %>
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    chart_data: data_1,
-    legend: true,
-    id: "with-legend-example",
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const dataWithLegend = [{
-  name: 'Bugs',
-  y: 8,
-},
-{
-  name: 'Chores',
-  y: 1,
-},
-{
-  name: 'Stories',
-  y: 12,
-}]
-
-const CircleChartWithLegendKit = () => {
-  const chartOptions = {
-    series: [{ data: dataWithLegend }],
-    plotOptions: {
-      pie: {
-        showInLegend: true
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb

@@ -1,38 +0,0 @@
- <% data_5 = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    title: "Active Users on Social Media",
-    chart_data: data_5,
-    id: "with-caption-example",
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const dataWithTitle = [
-  {
-    name: 'Facebook',
-    y: 2498,
-  },
-  {
-    name: 'YouTube',
-    y: 2000,
-  },
-  {
-    name: 'WhatsApp',
-    y: 2000,
-  },
-  {
-    name: 'Facebook Messenger',
-    y: 1300,
-  },
-  {
-    name: 'WeChat',
-    y: 1165,
-  },
-  {
-    name: 'Instagram',
-    y: 1000,
-  },
-  {
-    name: 'Tik Tok',
-    y: 800,
-  },
-]
-
-const CircleChartWithTitle = () => {
-  const chartOptions = {
-    title: { text: "Active Users on Social Media" },
-    series: [{ data: dataWithTitle }],
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartWithTitle

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,26 +0,0 @@
-examples:
-
-  rails:
-  - circle_chart_default: Default Style
-  - circle_chart_rounded: Rounded Corners
-  - circle_chart_block: Accepts Any Block
-  - circle_chart_colors: Color Overrides
-  - circle_chart_with_labels: Data Labels
-  - circle_chart_with_legend_kit: Legend
-  - circle_chart_legend_position: Legend Position
-  - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
-  - circle_chart_custom_tooltip: Tooltip Customization
-
-  react:
-  - circle_chart_default: Default Style
-  - circle_chart_live_data: Live Data
-  - circle_chart_rounded: Rounded Corners
-  - circle_chart_block: Accepts Any Block
-  - circle_chart_colors: Color Overrides
-  - circle_chart_with_labels: Data Labels
-  - circle_chart_with_legend_kit: Legend
-  - circle_chart_legend_position: Legend Position
-  - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
-  - circle_chart_custom_tooltip: Tooltip Customization

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

@@ -1,11 +0,0 @@
-export { default as CircleChartDefault } from './_circle_chart_default.jsx'
-export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
-export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
-export { default as CircleChartBlock } from './_circle_chart_block.jsx'
-export { default as CircleChartColors } from './_circle_chart_colors.jsx'
-export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
-export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
-export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
-export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
-export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,104 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const dataColors = [
-  colors.data_1,
-  colors.data_2,
-  colors.data_3,
-  colors.data_4,
-  colors.data_5,
-  colors.data_6,
-  colors.data_7,
-  colors.data_8,
-]
-
-const applyCustomSeriesColors = (highchart) => {
-  highchart.series.forEach((item, index) => {
-    const selectedColor = dataColors[index]
-    item.color = selectedColor
-    item.data.forEach((dataItem) => {
-      if (dataItem.color){
-        dataItem.color = selectedColor
-      }
-
-      if (!dataItem.marker) return
-
-      if (dataItem.marker.lineColor){
-        dataItem.marker.lineColor = selectedColor
-      }
-
-      if (dataItem.marker.states.hover !== undefined){
-        dataItem.marker.states.hover.lineColor = selectedColor
-      }
-
-      if (dataItem.marker.states.select.lineColor){
-        dataItem.marker.states.select.lineColor = selectedColor
-      }
-    })
-  })
-}
-
-const adjustAxisStyle = (axis) => {
-  /* Styles grid */
-  axis.minorGridLineColor = colors.slate
-  axis.minorGridLineWidth = 0.5
-  axis.minorGridLineDashStyle = 'Dash'
-  axis.gridLineWidth = 0.5
-  axis.gridLineColor = colors.slate
-  axis.gridLineDashStyle = 'Dash'
-
-  /* Change line color to $sky */
-  axis.lineColor = colors.sky
-
-  /* Change axis label styles */
-  axis.labels.style.fontFamily = typography.font_family_base
-  axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.regular
-  axis.labels.style.fontSize = typography.font_small
-}
-
-/* Remove grid from background */
-const styleAxis = (highchart) => {
-  if (Array.isArray(highchart.yAxis)) {
-    highchart.yAxis.forEach((item) => {
-      adjustAxisStyle(item)
-    })
-  } else {
-    adjustAxisStyle(highchart.yAxis)
-  }
-
-  if (Array.isArray(highchart.xAxis)) {
-    highchart.xAxis.forEach((item) => {
-      adjustAxisStyle(item)
-    })
-  } else {
-    adjustAxisStyle(highchart.xAxis)
-  }
-}
-
-const styleChartContainer = (highchart) => {
-  highchart.chart.spacingTop = 30
-  highchart.chart.spacingBottom = 40
-  highchart.chart.spacingLeft = 50
-  highchart.chart.spacingRight = 50
-}
-
-const styleLegend = (highchart) => {
-  highchart.legend.itemStyle.fontFamily = typography.font_family_base
-  highchart.legend.itemStyle.color = colors.text_lt_light
-  highchart.legend.itemStyle.fontWeight = typography.regular
-  highchart.legend.itemStyle.fontSize = typography.text_smaller
-}
-
-// Exportable Global Styles Function
-const commonSettings = (highchart) => {
-  applyCustomSeriesColors(highchart)
-  styleAxis(highchart)
-  styleChartContainer(highchart)
-  styleLegend(highchart)
-}
-
-export {
-  commonSettings,
-  dataColors,
-}

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -1,16 +0,0 @@
-import colors from "../tokens/exports/_colors.module.scss";
-
-
-// Map Data Color String Props to our SCSS Variables
-const mapColors = (array: string[]): string[] => {
-    const regex = /(data)\-[1-8]/; //eslint-disable-line
-  
-    const newArray = array.map((item) => {
-      return regex.test(item)
-        ? `${colors[`data_${item[item.length - 1]}`]}`
-        : item;
-    });
-    return newArray;
-  };
-
-  export default mapColors

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -1,174 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-import { ThemeProps } from './themeTypes'
-
-const highchartsDarkTheme: ThemeProps = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotBackgroundColor: undefined,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_dk_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_dark,
-    tickColor: colors.border_dark,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_dk_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined,
-    minorTickInterval: null,
-    gridLineColor: colors.border_dark,
-    minorGridLineColor: colors.border_dark,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_dk_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_dk_lighter,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.card_light],
-        [1, colors.card_light],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
-      // @ts-ignore
-      borderColor: colors.border_dark,
-    },
-  },
-
-  plotOptions: {
-    series: {
-      borderColor: colors.bg_dark_card,
-      borderWidth: 2,
-      threshold: null,
-    },
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_dk_light,
-          fontWeight: typography.regular,
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: colors.text_dk_light,
-      },
-      marker: {
-        lineColor: colors.border_dark,
-      },
-    }
-  },
-  credits: {
-    enabled: false
-  },
-}
-
-export { highchartsDarkTheme }