playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: {shadow: "deepest"}) do %>
   Card content
 <% end %>

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

@@ -0,0 +1,84 @@
+import colors from "../tokens/_colors.scss"
+import typography from "../tokens/_typography.scss";
+
+const applyCustomColors = function(highchart) {
+  var data_colors = [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7
+  ];
+
+  highchart.series.forEach(function(item, index) {
+    var selected_color = data_colors[index % data_colors.length];
+    item.color = selected_color;
+    item.data.forEach(function(data_item) {
+      data_item.color = selected_color;
+    });
+  });
+};
+
+const adjustAxisStyle = function(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.light;
+  axis.labels.style.fontSize = typography.font_small;
+};
+
+/* Remove grid from background */
+const styleAxis = function(highchart) {
+  if (Array.isArray(highchart.yAxis)) {
+    highchart.yAxis.forEach(function(item) {
+      adjustAxisStyle(item);
+    });
+  } else {
+    adjustAxisStyle(highchart.yAxis);
+  }
+
+  if (Array.isArray(highchart.xAxis)) {
+    highchart.xAxis.forEach(function(item) {
+      adjustAxisStyle(item);
+    });
+  } else {
+    adjustAxisStyle(highchart.xAxis);
+  }
+};
+
+const styleChartContainer = function(highchart) {
+  highchart.chart.spacingTop = 30;
+  highchart.chart.spacingBottom = 40;
+  highchart.chart.spacingLeft = 50;
+  highchart.chart.spacingRight = 50;
+};
+
+const styleLegend = function(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 = function(highchart) {
+  applyCustomColors(highchart);
+  styleAxis(highchart);
+  styleChartContainer(highchart);
+  styleLegend(highchart);
+};
+
+export default commonSettings;

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

@@ -0,0 +1,120 @@
+import { highchartsTheme } from './pbChartsLightTheme.js';
+
+
+(function(root, factory) {
+  const plugin_name = 'pbChart';
+
+  if (typeof define === 'function' && define.amd) {
+    define([], factory(plugin_name));
+  } else if (typeof exports === 'object') {
+    module.exports = factory(plugin_name);
+  } else {
+    root[plugin_name] = factory(plugin_name);
+  }
+}((window || module || {}), function(plugin_name) {
+  'use strict';
+
+  const plugin = {};
+
+  const defaults = {
+    callbackInitializeBefore: () => {},
+    callbackInitializeAfter: () => {},
+    callbackRefreshBefore: () => {},
+    callbackRefreshAfter: () => {},
+    callbackDestroyBefore: () => {},
+    callbackDestroyAfter: () => {},
+    property: 'Value'
+  };
+
+  function Plugin(element, options) {
+    plugin.this = this;
+    plugin.name = plugin_name;
+    plugin.element = element;
+    plugin.defaults = defaults;
+    plugin.options = options;
+    plugin.settings = extendDefaults(defaults, options);
+    plugin.this.initialize();
+  }
+
+
+  const extendDefaults = (defaults, options) => {
+    for (let property in options) {
+      if (options.hasOwnProperty(property)) {
+        defaults[property] = options[property];
+      }
+    }
+
+    return defaults;
+  };
+
+
+  Plugin.prototype = {
+    initialize: (silent = false) => {
+      plugin.this.destroySilently();
+
+      if (!silent) {
+        plugin.settings.callbackInitializeBefore.call();
+      }
+
+      Highcharts.setOptions(highchartsTheme);
+      Highcharts.chart(plugin.defaults.id, {
+        title: {
+          text: plugin.defaults.title
+        },
+        chart: {
+          type: plugin.defaults.type
+        },
+        subtitle: {
+          text: plugin.defaults.subtitle
+        },
+        yAxis: {
+          title: {
+            text: plugin.defaults.axisTitle
+          }
+        },
+        plotOptions: {
+          series: {
+            pointStart: plugin.defaults.pointStart
+          }
+        },
+        series: plugin.defaults.chartData,
+        credits: false,
+      });
+
+      if (!silent) {
+        plugin.settings.callbackInitializeAfter.call();
+      }
+    },
+
+    refresh: (silent = false) => {
+      if (!silent) {
+        plugin.settings.callbackRefreshBefore.call();
+      }
+
+      plugin.this.destroy(silent);
+      plugin.this.initialize(silent);
+      if (!silent) {
+        plugin.settings.callbackRefreshAfter.call();
+      }
+    },
+
+    destroy: (silent = false) => {
+      if (!silent) {
+        plugin.settings.callbackDestroyBefore.call();
+      }
+      if (!silent) {
+        plugin.settings.callbackDestroyAfter.call();
+      }
+    },
+
+    refreshSilently: () => {
+      plugin.this.refresh(true);
+    },
+
+    destroySilently: () => {
+      plugin.this.destroy(true);
+    }
+  };
+
+  return Plugin;
+}));

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

@@ -0,0 +1,162 @@
+import colors from '../tokens/_colors.scss';
+import typography from '../tokens/_typography.scss';
+
+const highchartsTheme = {
+  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: null,
+    plotShadow: false,
+    plotBorderWidth: 0,
+
+  },
+  title: {
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.regular,
+      fontSize: typography.heading_3,
+    }
+  },
+  subtitle: {
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    }
+  },
+  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: null,
+    minorTickInterval: 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,
+      }
+    }
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller
+    },
+    itemHoverStyle: {
+      color: colors.text_lt_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_lt_lighter,
+    }
+  },
+  labels: {
+    style: {
+      color: colors.primary,
+    }
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark]
+      ]
+    },
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    }
+  },
+
+  plotOptions: {
+    series: {
+      type: 'area',
+      nullColor: colors.text_lt_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1
+        },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, "white"]
+        ]
+      },
+      threshold: null
+    },
+    line: {
+      dataLabels: {
+        color: '#CCC'
+      },
+      marker: {
+        lineColor: '#333'
+      },
+      area: {
+        shadow: false,
+        states: {
+            hover: {
+                lineWidth: 1
+            }
+        },
+        threshold: null
+      }
+    }
+  },
+}
+
+export { highchartsTheme };

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.stat_label %>
+  <%= object.stat_value %>
+  <%= object.stat_change %>
+<% end %>

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class DashboardValue extends React.Component {
+  render() {
+    return (
+      <div className="pb_dashboard_value">
+        <span>DASHBOARD VALUE CONTENT</span>
+      </div>
+    )
+  }
+}
+
+DashboardValue.propTypes = propTypes;
+
+export default DashboardValue;

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss

@@ -0,0 +1,10 @@
+@import "dashboard_value_mixins";
+@import "child_kits/stat_value";
+
+[class^=pb_dashboard_value]{
+  @each $align_name, $align_value in $pb_dashboard_value_align {
+    &[class*=_#{$align_name}]  {
+      @include pb_dashboard_value($align_value);
+    }
+  }
+}

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss

@@ -0,0 +1,12 @@
+$pb_dashboard_value_align: (
+  left:     flex-start,
+  center:   center,
+  right:    flex-end,
+);
+
+@mixin pb_dashboard_value($align: "flex-start") {
+  display: flex;
+  justify-content: flex-start;
+  align-items: $align;
+  flex-direction: column;
+}

data/app/pb_kits/playbook/pb_dashboard_value/child_kits/_stat_change.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.display_value %>
+<% end %>

data/app/pb_kits/playbook/pb_dashboard_value/child_kits/_stat_label.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.display_label %>
+<% end %>

data/app/pb_kits/playbook/pb_dashboard_value/child_kits/_stat_value.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <div class="pb_stat_value_wrapper">
+    <%= object.display_value %>
+    &nbsp;
+    <%= object.display_unit %>
+  </div>
+<% end %>