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

playbook_ui 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 (49) hide show

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'

data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts DELETED Viewed

@@ -1,106 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-const barGraphTheme = {
-    title: {
-        text: "",
-        style: {
-            color: colors.text_lt_default,
-            fontFamily: typography.font_family_base,
-            fontWeight: typography.bold,
-            fontSize: typography.heading_3,
-        },
-    },
-    subtitle: {
-        text: "",
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
-            fontSize: typography.text_base,
-        },
-    },
-    chart: {
-        type: "column",
-    },
-    tooltip: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            stops: [
-                [0, colors.bg_dark],
-                [1, colors.bg_dark],
-            ],
-        },
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_dk_default,
-            fontWeight: typography.regular,
-            fontSize: typography.text_smaller,
-        },
-    },
-    colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-    ],
-    credits: { enabled: false },
-    legend: {
-        enabled: false,
-        itemStyle: {
-            color: colors.text_lt_light,
-            fill: colors.text_lt_light,
-            fontSize: typography.text_smaller,
-        },
-     },
-    xAxis: {
-        gridLineWidth: 0,
-        lineColor: colors.border_light,
-        tickColor: colors.border_light,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                color: colors.text_lt_default,
-                fontFamily: typography.font_family_base,
-                fontWeight: typography.regular,
-                fontSize: typography.heading_4,
-            },
-        },
-    },
-    yAxis: {
-        alternateGridColor: undefined as string | undefined,
-        minorTickInterval: null as number | null,
-        gridLineColor: colors.border_light,
-        minorGridLineColor: colors.border_light,
-        lineWidth: 0,
-        tickWidth: 0,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-    },
-}
-export default barGraphTheme;

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb DELETED Viewed

	@@ -1 +0,0 @@
1	- <%= react_component('PbBarGraph', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb DELETED Viewed

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-module Playbook
-  module PbPbBarGraph
-    class PbBarGraph < ::Playbook::KitBase
-      prop :options, default: {}
-      prop :container_props, default: {}
-      def react_props
-        {
-          options: options,
-          containerProps: container_props_hash,
-        }
-      end
-      def container_props_hash
-        container_props.merge({
-                                id: id,
-                                className: classname,
-                              }).compact
-      end
-      def classname
-        generate_classname("pb_pb_bar_graph")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx DELETED Viewed

@@ -1,31 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import PbBarGraph from './_pb_bar_graph';
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-const testId = 'bargraph1';
-test('bargraph uses exact classname', () => {
-  render(
-    <PbBarGraph
-        className='super_important_class'
-        data={{ testid: testId }}
-        id='bar-default'
-    />
-  );
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('super_important_class');
-});