RubyGems - playbook_ui_docs - Versions diffs - 15.0.0.pre.alpha.play2377bargraphscaffoldnewkit10368 → 15.0.0 - Mend

playbook_ui_docs 15.0.0.pre.alpha.play2377bargraphscaffoldnewkit10368 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx DELETED Viewed

@@ -1,126 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import Title from "../../pb_title/_title"
-const chartData = [{
-  name: 'Installation',
-  data: [1475],
-}, {
-  name: 'Manufacturing',
-  data: [4434],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387],
-}, {
-  name: 'Project Development',
-  data: [3227],
-}, {
-  name: 'Other',
-  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 PbBarGraphLegendPosition = () => {
-  return (
-  <div>
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="align | verticalAlign"
-    />
-    <PbBarGraph
-        options={alignChartOptions}
-    />
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="layout"
-    />
-    <PbBarGraph
-        options={layoutChartOptions}
-    />
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="x | y"
-    />
-    <PbBarGraph
-        options={offsetChartOptions}
-    />
-  </div>
-)
-}
-export default PbBarGraphLegendPosition

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb DELETED Viewed

@@ -1,32 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [-475, 400, -1000, 354, -856],
-    threshold: 0
-  }, {
-    name: 'Manufacturing',
-    data: [1475, 200, 1000, 654, -656],
-    threshold: 0
-  },
-  {
-    name: 'Sales & Distribution',
-    data: [1270, 100, -1200, 554, 756],
-    threshold: 0
-  }] %>
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Negative Numbers",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-} %>
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx DELETED Viewed

@@ -1,48 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-const chartData = [{
-  name: 'Installation',
-  data: [-475, 400, -1000, 354, -856],
-  threshold: 0
-}, {
-  name: 'Manufacturing',
-  data: [1475, 200, 1000, 654, -656],
-  threshold: 0
-},
-{
-  name: 'Sales & Distribution',
-  data: [1270, 100, -1200, 554, 756],
-  threshold: 0
-}]
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Negative Numbers",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-};
-const PbBarGraphStacked = () => {
-  return(
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphStacked

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb DELETED Viewed

@@ -1,68 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Percentage',
-    data: [48, 70, 25, 55, 72],
-    color: '#F9BB00',
-    yAxis: 1
-}] %>
-<% chart_options = {
-series: chart_data,
-  title: {
-    text: "Bar Graph with Secondary Y-axis",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: [{
-  format: "{value}%",
-    labels: {
-      style: {
-        fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-    title: {
-      text: "Number of Employees",
-      style: {
-             fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-  }, {
-    labels: {
-      style: {
-            fontFamily: "Power Centra",
-            color: "#C1CDD6",
-            fontWeight: "bold",
-            fontSize: "12px",
-      },
-    },
-    title: {
-      text: "Percentage",
-      style: {
-        fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-    opposite: true,
-    min: 0,
-    max: 100
-  }],
-  legend: { enabled: true },
-}
-%>
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx DELETED Viewed

@@ -1,81 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Percentage',
-  data: [48, 70, 25, 55, 72],
-  color: '#F9BB00',
-  yAxis: 1
-}]
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Secondary Y-axis",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: [{
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Number of Employees",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  }, {
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Percentage",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    opposite: true,
-    min: 0,
-    max: 100
-  }],
-  legend: { enabled: true },
-}
-const PbBarGraphSecondaryYAxis = () => {
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb DELETED Viewed

@@ -1,31 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Trend Line',
-    data: [1975, 600, 2500, 924, 500],
-    color: '#F9BB00',
-}] %>
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Bar Graph with Spline',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-    legend: { enabled: true },
-}
-%>
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx DELETED Viewed

@@ -1,42 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Trend Line',
-  data: [1975, 600, 2500, 924, 500],
-  color: '#F9BB00',
-}]
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Spline",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-};
-const PbBarGraphSpline = () => {
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphSpline

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
2	- A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb DELETED Viewed

@@ -1,35 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  },
-  {
-    name: 'Manufacturing',
-    data: [1270, 800, 200, 454, 956],
-  }, {
-    name: 'Sales & Distribution',
-    data: [975, 1600, 1500, 924, 500],
-  }] %>
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-} %>
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx DELETED Viewed

@@ -1,51 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-},
-{
-  name: 'Manufacturing',
-  data: [1270, 800, 200, 454, 956],
-}, {
-  name: 'Sales & Distribution',
-  data: [975, 1600, 1500, 924, 500],
-}]
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-};
-const PbBarGraphStacked = () => {
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphStacked

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml DELETED Viewed

@@ -1,27 +0,0 @@
-examples:
-  rails:
-  - pb_bar_graph_default: Default
-  - pb_bar_graph_legend: Legend
-  - pb_bar_graph_legend_position: Legend Position
-  - pb_bar_graph_height: Height
-  - pb_bar_graph_spline: Spline
-  - pb_bar_graph_colors: Color Overrides
-  - pb_bar_graph_stacked: Stacked
-  - pb_bar_graph_negative_numbers: Negative Numbers
-  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
-  - pb_bar_graph_horizontal: Horizontal Bar Graph
-  react:
-  - pb_bar_graph_default: Default
-  - pb_bar_graph_legend: Legend
-  - pb_bar_graph_legend_position: Legend Position
-  - pb_bar_graph_legend_non_clickable: Legend Non Clickable
-  - pb_bar_graph_height: Height
-  - pb_bar_graph_spline: Spline
-  - pb_bar_graph_colors: Color Overrides
-  - pb_bar_graph_stacked: Stacked
-  - pb_bar_graph_negative_numbers: Negative Numbers
-  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
-  - pb_bar_graph_horizontal: Horizontal Bar Graph

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js DELETED Viewed

@@ -1,11 +0,0 @@
-export { default as PbBarGraphDefault } from './_pb_bar_graph_default.jsx'
-export { default as PbBarGraphLegend } from './_pb_bar_graph_legend.jsx'
-export { default as PbBarGraphLegendPosition } from './_pb_bar_graph_legend_position.jsx'
-export { default as PbBarGraphLegendNonClickable } from './_pb_bar_graph_legend_non_clickable.jsx'
-export { default as PbBarGraphHeight } from './_pb_bar_graph_height.jsx'
-export { default as PbBarGraphSpline } from './_pb_bar_graph_spline.jsx'
-export { default as PbBarGraphColors } from './_pb_bar_graph_colors.jsx'
-export { default as PbBarGraphStacked } from './_pb_bar_graph_stacked.jsx'
-export { default as PbBarGraphNegativeNumbers } from './_pb_bar_graph_negative_numbers.jsx'
-export { default as PbBarGraphSecondaryYAxis } from './_pb_bar_graph_secondary_y_axis.jsx'
-export { default as PbBarGraphHorizontal } from './_pb_bar_graph_horizontal.jsx'