playbook_ui 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3975

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5daa365c41ed9327bba1499769eed256b0dad354cb6eb38a522723885329127b
-  data.tar.gz: ab0a8207ba8250f6cfd189c1dcd09706ea22e74485e458567490cf1db87a23a3
+  metadata.gz: 3b79d5e5075d26c70b637b9acf58b4bd5ce652258bbde4710e8b689abfa0da94
+  data.tar.gz: bcaf6b58c947935677f963dfd40c9f8f06028061f84c0562ce73db42f49191e7
 SHA512:
-  metadata.gz: f34fff2a97be348639735790f39740bfc6a44113c7dccc99e7a5651bcb2babf3a1ca946c7a872929d00b53f800895ad79a1f64d0be63ab56914981af42682cbb
-  data.tar.gz: 6052de28664531556ce2ed71d373af06677c5c6100d3b1379d36ee7ca701a761f2f43ef1006993d6eb96f8040ad69f9b88221febdaf96cea2b552a62b235742d
+  metadata.gz: 413b631cb2dcc47020d03a33609fabcb52e9657d043e359b0975b1c8e13600e32103b624f408a0d6c3e18b82326aba3ebf1548a1248d232ca6adc8a83ea35944
+  data.tar.gz: 62a646b45791bce8e95058cf1f240ad8e8176c216e12903f7c93a7f0c28911784adf1650282c1bd66332b18e90049d55a8d8e6fa8b5e97da5b33d9f093ce2aae

data/app/pb_kits/playbook/_playbook.scss

@@ -17,7 +17,6 @@
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
-@import 'pb_dashboard/highcharts_theme.scss';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss

@@ -1,8 +1,6 @@
-@import "../tokens/colors";
-@import "../tokens/typography";
-
 .pb_bar_graph {
     rect.highcharts-background {
         fill: #0000 !important;
     }
 }
+

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,10 +1,189 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { merge } from 'lodash'
+
+import classnames from "classnames";
+
+type BarGraphProps = {
+  align?: "left" | "right" | "center";
+  axisTitle: { name: string; }[] | string;
+  dark?: boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  chartData: { name: string; data: number[], yAxis: number }[];
+  className?: string;
+  customOptions?: Partial<Highcharts.Options>;
+  id: string;
+  pointStart: number;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  subTitle?: string;
+  title: string;
+  type?: string;
+  legend?: boolean;
+  toggleLegendClick?: boolean;
+  height?: string;
+  colors: string[];
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+  stacking?: "normal" | "percent" 
+  axisFormat?: { format: string; }[] | string;
+};
+
+
+const BarGraph = ({
+  aria = {},
+  data = {},
+  align = "center",
+  axisTitle,
+  dark = false,
+  chartData,
+  className = "pb_bar_graph",
+  colors,
+  htmlOptions = {},
+  customOptions = {},
+  axisFormat,
+  id,
+  pointStart,
+  stacking,
+  subTitle,
+  type = "column",
+  title = "Title",
+  xAxisCategories,
+  yAxisMin,
+  yAxisMax,
+  legend = false,
+  toggleLegendClick = true,
+  height,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  ...props
+}: BarGraphProps): React.ReactElement => { 
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    subtitle: {
+      text: subTitle,
+    },
+    yAxis: [{
+      labels: {
+        format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
+
+      },
+      min: yAxisMin,
+      max: yAxisMax,
+      opposite: false,
+      title: {
+        text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
+      },
+      plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
+        value: 0,
+        zIndex: 10,
+        color: "#E4E8F0"
+    }],
+    }],
+    xAxis: {
+      categories: xAxisCategories,
+    },
+    legend: {
+      enabled: legend,
+      align: align,
+      verticalAlign: verticalAlign,
+      layout: layout,
+      x: x,
+      y: y,
+    },
+    colors:
+      colors !== undefined && colors.length > 0
+        ? mapColors(colors)
+        : highchartsTheme.colors,
+    plotOptions: {
+      series: {
+        stacking: stacking,
+        pointStart: pointStart,
+        borderWidth: stacking ? 0 : "",
+        events: {},
+        dataLabels: {
+          enabled: false,
+        },
+      },
+    },
+    series: chartData,
+    credits: false,
+  };
+
+if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
+  staticOptions.yAxis.push({
+    labels: {
+      format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
+    },
+    min: yAxisMin,
+    max: yAxisMax,
+    opposite: true,
+    title: {
+      text: axisTitle[1].name,
+    }, 
+    plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
+      value: 0,
+      zIndex: 10,
+      color: "#E4E8F0"
+  }],
+  });
+}
+
+  if (!toggleLegendClick) {
+    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
+  }
+
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions(merge(staticOptions, customOptions));
+  }, [chartData]);
 
-const BarGraph: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+          className: classnames(globalProps(filteredProps), className),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+          ...htmlProps
+        }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'bargraph1';
 
-test.skip('bargraph uses exact classname', () => {
+test('bargraph uses exact classname', () => {
   render(
     <BarGraph
         className='super_important_class'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -1,10 +1,221 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+import HighchartsReact from "highcharts-react-official";
+import highchartsMore from "highcharts/highcharts-more";
+
+import Highcharts from "highcharts";
+
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { merge } from 'lodash'
+
+type CircleChartProps = {
+  align?: "left" | "right" | "center";
+  aria: { [key: string]: string };
+  chartData?: [];
+  children?: Node;
+  className?: string;
+  colors?: string[];
+  customOptions?: Partial<Highcharts.Options>;
+  dark?: boolean;
+  data?: {[key: string]: string},
+  dataLabelHtml?: string;
+  dataLabels?: boolean;
+  height?: string;
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  innerSize?: "sm" | "md" | "lg" | "none";
+  legend?: boolean;
+  maxPointSize?: number;
+  minPointSize?: number;
+  rounded?: boolean;
+  startAngle?: number;
+  style?: string;
+  title?: string;
+  tooltipHtml: string;
+  useHtml?: boolean;
+  zMin?: number;
+  layout?: "horizontal" | "vertical" | "proximate";
+  verticalAlign?: "top" | "middle" | "bottom";
+  x?: number;
+  y?: number;
+  borderColor?: string;
+  borderWidth?: number;
+};
+
+
+
+const alignBlockElement = (event: any) => {
+  const itemToMove = document.querySelector<HTMLElement>(
+    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
+  );
+  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
+
+  if (itemToMove !== null && chartContainer !== null) {
+    itemToMove.style.height = `${event.target.chartHeight}px`;
+    itemToMove.style.width = `${event.target.chartWidth}px`;
+    if (chartContainer.firstChild !== null) {
+      chartContainer.firstChild.before(itemToMove);
+    }
+  }
+};
+
+const CircleChart = ({
+  align = "center",
+  aria = {},
+  rounded = false,
+  borderColor = rounded ? null : "",
+  borderWidth = rounded ? 20 : null,
+  chartData,
+  children,
+  className,
+  colors = [],
+  customOptions = {},
+  dark = false,
+  data = {},
+  dataLabelHtml = "<div>{point.name}</div>",
+  dataLabels = false,
+  height,
+  htmlOptions = {},
+  id,
+  innerSize = "md",
+  legend = false,
+  maxPointSize = null,
+  minPointSize = null,
+  startAngle = null,
+  style = "pie",
+  title,
+  tooltipHtml,
+  useHtml = false,
+  zMin = null,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  ...props
+}: CircleChartProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  highchartsMore(Highcharts);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  Highcharts.setOptions({
+    tooltip: {
+      headerFormat: null,
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+      useHTML: useHtml,
+    },
+  });
+
+  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
+    innerSizes[size];
+
+
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj: any) => {
+      obj.y = obj.value;
+      delete obj.value;
+      return obj;
+    });
+
+    const staticOptions = {
+      title: {
+        text: title,
+      },
+      chart: {
+        height: height,
+        type: style,
+        events: {
+          render: (event: any) => alignBlockElement(event),
+          redraw: (event: any) => alignBlockElement(event),
+        },
+      },
+
+      legend: {
+        align: align,
+        verticalAlign: verticalAlign,
+        layout: layout,
+        x: x,
+        y: y,
+      },
+      plotOptions: {
+        pie: {
+          colors:
+            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
+          dataLabels: {
+            enabled: dataLabels,
+            connectorShape: "straight",
+            connectorWidth: 3,
+            format: dataLabelHtml,
+          },
+          showInLegend: legend,
+        },
+      },
+      series: [
+        {
+          minPointSize: minPointSize,
+          maxPointSize: maxPointSize,
+          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
+          data: formattedChartData,
+          zMin: zMin,
+          startAngle: startAngle,
+          borderWidth: borderWidth,
+          borderColor: borderColor,
+        },
+      ],
+      credits: false,
+    };
+    setOptions(merge(staticOptions, customOptions));
+  }, [chartData]);
+
 
-const CircleChart: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <>
+      {children ? (
+        <div id={`wrapper-circle-chart-${id}`}>
+          <HighchartsReact
+              containerProps={{
+              className: classnames("pb_circle_chart", globalProps(filteredProps)),
+              id: id,
+              ...ariaProps,
+              ...dataProps,
+              ...htmlProps,
+            }}
+              highcharts={Highcharts}
+              options={options}
+          />
+          <div className="pb-circle-chart-block">{children}</div>
+        </div>
+      ) : (
+        <HighchartsReact
+            containerProps={{
+            className: classnames("pb_circle_chart", globalProps(filteredProps)),
+            id: id,
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          }}
+            highcharts={Highcharts}
+            options={options}
+        />
+      )}
+    </>
   );
 };
 

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'circlechart1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [
     {
       name: 'Waiting for Calls',

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

@@ -1,7 +1,11 @@
 import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
-const highchartsDarkTheme = {
+import { ThemeProps } from './themeTypes'
+
+import { PlotTreemapOptions } from "highcharts";
+
+const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
   },
@@ -17,6 +21,7 @@ const highchartsDarkTheme = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -58,6 +63,8 @@ const highchartsDarkTheme = {
     },
   },
   yAxis: {
+    alternateGridColor: undefined,
+    minorTickInterval: null,
     gridLineColor: colors.border_dark,
     minorGridLineColor: colors.border_dark,
     lineWidth: 0,
@@ -128,6 +135,7 @@ const highchartsDarkTheme = {
     series: {
       borderColor: colors.bg_dark_card,
       borderWidth: 2,
+      threshold: null,
     },
     // PIE STYLES
     pie: {
@@ -194,11 +202,11 @@ const highchartsDarkTheme = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false
   },
 }
 
-export default highchartsDarkTheme
+export { highchartsDarkTheme }

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

@@ -1,7 +1,11 @@
 import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 
-const highchartsTheme = {
+import { ThemeProps } from './themeTypes'
+
+import { PlotTreemapOptions } from "highcharts";
+
+const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
   },
@@ -17,6 +21,7 @@ const highchartsTheme = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -58,6 +63,8 @@ const highchartsTheme = {
     },
   },
   yAxis: {
+    alternateGridColor: undefined,
+    minorTickInterval: null,
     gridLineColor: colors.border_light,
     minorGridLineColor: colors.border_light,
     lineWidth: 0,
@@ -125,6 +132,9 @@ const highchartsTheme = {
   },
 
   plotOptions: {
+    series: {
+      threshold: null,
+    },
     // PIE STYLES
     pie: {
       colors: [
@@ -191,11 +201,11 @@ const highchartsTheme = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false
   },
 }
 
-export default highchartsTheme
+export { highchartsTheme }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-loading", 
-    size: "sm", 
-    title: "Loading Exmaple", 
-    text: "Make a loading request?", 
-    cancel_button: "Cancel Button", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay", 
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+
+        });
+  }
+</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md

@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -0,0 +1,8 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md

@@ -0,0 +1 @@
+Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.

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

@@ -3,3 +3,4 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_loading: Default + Loading

data/app/pb_kits/playbook/pb_form/form.rb

@@ -7,6 +7,7 @@ module Playbook
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
+      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -22,6 +23,7 @@ module Playbook
           aria: aria,
           class: classname,
           data: data,
+          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end