playbook_ui 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512 → 15.0.0.pre.alpha.PLAY236510413

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb

@@ -0,0 +1,93 @@
+<% data_first = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_second = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_third = [{
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+] %>
+
+
+<% chart_options_first = {
+    title: { text: "Alignment of Legend" },
+    series: [{ data: data_first }],
+    legend: {
+      align: 'right',
+      verticalAlign: 'top'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_second = {
+  title: { text: "Layout of Legend" },
+    series: [{ data: data_second }],
+    legend: {
+      layout: 'vertical'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_third = {
+   title: { text: "Offset of Legend" },
+    series: [{ data: data_third }],
+    legend: {
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+<%= pb_rails("title", props: { size: 4, text: "align | verticalAlign", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_first }) %>
+<%= pb_rails("title", props: { size: 4, text: "layout", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_second }) %>
+<%= pb_rails("title", props: { size: 4, text: "x | y", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_third }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { PbCircleChart, Title } from "playbook-ui";
+
+const dataFirst = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const dataSecond = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}]
+
+const dataThird = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+]
+
+
+const PbCircleChartDataLegendPosition = (props) => {
+const chartOptionsFirst = {
+    title: { text: "Alignment of Legend" },
+    series: [{ data: dataFirst }],
+    legend: {
+      align: 'right',
+      verticalAlign: 'top'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const chartOptionsSecond = {
+    title: { text: "Layout of Legend" },
+    series: [{ data: dataSecond }],
+    legend: {
+      layout: 'vertical'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const chartOptionsThird = {
+    title: { text: "Offset of Legend" },
+    series: [{ data: dataThird }],
+    legend: {
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  return (
+  <div>
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <PbCircleChart
+        options={chartOptionsFirst}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <PbCircleChart
+        options={chartOptionsSecond}
+        {...props}
+    />
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <PbCircleChart
+        options={chartOptionsThird}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartDataLegendPosition;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md

@@ -0,0 +1,14 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+`layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb

@@ -0,0 +1,42 @@
+<% data = [
+  {
+    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,
+  },] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: true,
+      },
+    },
+  },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data = [
+  {
+    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 PbCircleChartDataWithLabels = (props) => {
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: true,
+      },
+    },
+  },
+};
+
+  return (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartDataWithLabels;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb

@@ -0,0 +1,24 @@
+<% data = [
+{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    pie: {
+    showInLegend: true,
+    },
+  },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}]
+
+
+const PbCircleChartDataWithLegend = (props) => {
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    pie: {
+      showInLegend: true,
+    },
+  },
+};
+
+  return (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartDataWithLegend;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb

@@ -0,0 +1,22 @@
+<% chart_options = {
+  series: [
+    {
+      data: [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ],
+    },
+  ],
+} %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const chartOptions = {
+  series: [
+    {
+      data: [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ],
+    },
+  ],
+};
+const PbCircleChartDefault = (props) => (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+
+export default PbCircleChartDefault;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb

@@ -0,0 +1,118 @@
+<% data_first = [
+  {
+    name: 'Bugs',
+    y: 8,
+  },
+  {
+    name: 'Chores',
+    y: 1,
+  },
+  {
+    name: 'Stories',
+    y: 12,
+  },
+] %>
+
+<% data_second = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+] %>
+
+<% data_third = [
+  {
+    name: '1 Point Tickets',
+    y: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    y: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    y: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    y: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    y: 1,
+  },
+] %>
+
+<% data_fourth = [
+  {
+    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,
+  },
+] %>
+
+<% chart_options_small = {
+ series: [{ 
+      data: data_first,
+      innerSize: '35%'
+    }],  } %>
+  
+<% chart_options_md = {
+ series: [{ 
+      data: data_second,
+      innerSize: '50%'
+    }],  } %>
+
+<% chart_options_lg = {
+ series: [{ 
+      data: data_third,
+      innerSize: '85%'
+    }],  } %>
+
+<% chart_options_xl = {
+ series: [{ 
+      data: data_fourth,
+      innerSize: '0%'
+    }],  } %>
+
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_small }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_md }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_lg }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_xl }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const dataFirst = [
+  {
+    name: 'Bugs',
+    y: 8,
+  },
+  {
+    name: 'Chores',
+    y: 1,
+  },
+  {
+    name: 'Stories',
+    y: 12,
+  },
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+]
+
+const dataThird = [
+  {
+    name: '1 Point Tickets',
+    y: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    y: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    y: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    y: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    y: 1,
+  },
+]
+
+const dataFourth = [
+  {
+    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 PbCircleChartInnerSizes= (props) => {
+const chartOptionsSmall = {
+    series: [{ 
+      data: dataFirst,
+      innerSize: '35%'
+    }],
+  }
+
+  const chartOptionsMedium = {
+    series: [{ 
+      data: dataSecond,
+      innerSize: '50%'
+    }],
+  }
+
+  const chartOptionsLarge = {
+    series: [{ 
+      data: dataThird,
+      innerSize: '85%'
+    }],
+  }
+
+  const chartOptionsNone = {
+    series: [{ 
+      data: dataFourth,
+      innerSize: '0%'
+    }],
+  }
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptionsSmall}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsMedium}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsLarge}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsNone}
+          {...props}
+      />
+    </div>
+  );
+};
+
+
+export default PbCircleChartInnerSizes;