@hospitalrun-org/components - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/components.cjs.development.js

@@ -13,2 +13,3 @@ 'use strict';
 var Button = _interopDefault(require('react-bootstrap/Button'));
+var ChartJs = _interopDefault(require('chart.js'));
 
@@ -179,3 +180,281 @@ var titleWithMessage = function titleWithMessage(title, message) {
 
+function getAxisType(type) {
+  if (type === 'category') {
+    return 'category';
+  } else if (type === 'linear') {
+    return 'linear';
+  } else if (type === 'time') {
+    return 'time';
+  }
+
+  return 'category';
+}
+
+function getAxisLabel(item) {
+  return {
+    display: !!item.label,
+    labelString: item.label
+  };
+}
+
+function axisMapper(item) {
+  var axis = {
+    display: !!item.label,
+    scaleLabel: getAxisLabel(item),
+    type: getAxisType(item.type),
+    ticks: {
+      beginAtZero: true
+    }
+  };
+
+  if (item.type === 'time') {
+    var timeScale = {
+      unit: item.timeFormat,
+      stepSize: item.timeStepSize
+    };
+    axis.time = timeScale;
+  }
+
+  return axis;
+}
+
+function getAxes(axes, stacked) {
+  var chartAxes = [];
+
+  if (axes) {
+    chartAxes = axes.map(axisMapper);
+  }
+
+  chartAxes.forEach(function (axis) {
+    return axis.stacked = stacked;
+  });
+  return chartAxes;
+}
+
+function getChartDataset(dataset) {
+  var label = dataset.label;
+  var data = [];
+  var backgroundColor = [];
+  var borderColor = [];
+  dataset.data.forEach(function (d) {
+    data.push(d.y);
+    var background = d.backgroundColor ? d.backgroundColor : dataset.backgroundColor;
+    var border = d.borderColor ? d.borderColor : dataset.borderColor;
+
+    if (background !== undefined) {
+      backgroundColor.push(background);
+    }
+
+    if (border !== undefined) {
+      borderColor.push(border);
+    }
+  });
+  var pointBackgroundColor = backgroundColor;
+  var pointBorderColor = borderColor;
+  return {
+    label: label,
+    data: data,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    pointBackgroundColor: pointBackgroundColor,
+    pointBorderColor: pointBorderColor,
+    borderWidth: 1
+  };
+}
+
+function getChartDatasets(datasets) {
+  return datasets.map(getChartDataset);
+}
+
+function getLabelsFromDataset(datasets) {
+  var labels = [];
+  datasets.forEach(function (dataset) {
+    return dataset.data.forEach(function (d) {
+      if (!labels.includes(d.x)) {
+        labels.push(d.x);
+      }
+    });
+  });
+  return labels;
+}
+
+function getChartData(graph) {
+  return {
+    labels: getLabelsFromDataset(graph.datasets),
+    datasets: getChartDatasets(graph.datasets)
+  };
+}
+
+function getCommonChartOptions(graph) {
+  var options = {
+    title: {
+      display: !!graph.title,
+      text: graph.title
+    }
+  };
+
+  if (options.title) {
+    if (graph.titleFontSize) {
+      options.title.fontSize = graph.titleFontSize;
+    }
+
+    if (graph.titleFontColor) {
+      options.title.fontColor = graph.titleFontColor;
+    }
+  }
+
+  return options;
+}
+
+function getCommonChartConfigurations(type, graph) {
+  return {
+    type: type,
+    data: getChartData(graph),
+    options: getCommonChartOptions(graph)
+  };
+}
+
+var BarGraph =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(BarGraph, _Component);
+
+  function BarGraph() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = BarGraph.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var stacked = !!this.props.stacked;
+    var _this$props = this.props,
+        horizontal = _this$props.horizontal,
+        xAxes = _this$props.xAxes,
+        yAxes = _this$props.yAxes;
+    var type = horizontal ? 'horizontalBar' : 'bar';
+    var config = getCommonChartConfigurations(type, this.props);
+
+    if (config && config.options) {
+      var scales = undefined;
+
+      if (!horizontal) {
+        scales = {
+          xAxes: getAxes(xAxes, stacked),
+          yAxes: getAxes(yAxes, stacked)
+        };
+      } else {
+        scales = {
+          xAxes: getAxes(yAxes, stacked),
+          yAxes: getAxes(xAxes, stacked)
+        };
+      }
+
+      config.options.scales = scales;
+    }
+
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto.render = function render() {
+    var _this = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this.chart = chart;
+      }
+    });
+  };
+
+  return BarGraph;
+}(React.Component);
+
+var PieGraph =
+/*#__PURE__*/
+function (_Component2) {
+  _inheritsLoose(PieGraph, _Component2);
+
+  function PieGraph() {
+    return _Component2.apply(this, arguments) || this;
+  }
+
+  var _proto2 = PieGraph.prototype;
+
+  _proto2.componentDidMount = function componentDidMount() {
+    var doughnut = this.props.doughnut;
+    var type = doughnut ? 'doughnut' : 'pie';
+    var config = getCommonChartConfigurations(type, this.props);
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto2.render = function render() {
+    var _this2 = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this2.chart = chart;
+      }
+    });
+  };
+
+  return PieGraph;
+}(React.Component);
+
+var LineGraph =
+/*#__PURE__*/
+function (_Component3) {
+  _inheritsLoose(LineGraph, _Component3);
+
+  function LineGraph() {
+    return _Component3.apply(this, arguments) || this;
+  }
+
+  var _proto3 = LineGraph.prototype;
+
+  _proto3.componentDidMount = function componentDidMount() {
+    var type = 'line';
+    var fill = false;
+
+    if (this.props.fill) {
+      fill = this.props.fill;
+    }
+
+    var config = getCommonChartConfigurations(type, this.props);
+
+    if (config && config.data && config.data.datasets) {
+      for (var i = 0; i < this.props.datasets.length; i++) {
+        config.data.datasets[i].fill = fill;
+        config.data.datasets[i].backgroundColor = this.props.datasets[i].backgroundColor;
+        config.data.datasets[i].borderColor = this.props.datasets[i].borderColor;
+      }
+    }
+
+    if (config && config.options) {
+      var stacked = !!this.props.stacked;
+      var scales = {
+        xAxes: getAxes(this.props.xAxes, false),
+        yAxes: getAxes(this.props.yAxes, stacked)
+      };
+      config.options.scales = scales;
+    }
+
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto3.render = function render() {
+    var _this3 = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this3.chart = chart;
+      }
+    });
+  };
+
+  return LineGraph;
+}(React.Component);
+
+exports.BarGraph = BarGraph;
 exports.Confirm = Confirm;
+exports.LineGraph = LineGraph;
+exports.PieGraph = PieGraph;
 exports.Spinner = Spinner;
@@ -182,0 +461,0 @@ exports.Toast = Toast;

dist/components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),r=e(t),a=require("react-toastify");require("react-toastify/dist/ReactToastify.min.css");var n=require("react-spinners"),s=require("react-confirm-alert");require("react-confirm-alert/src/react-confirm-alert.css");var o=e(require("react-bootstrap/Button")),i=function(e,r){return t.createElement(t.Fragment,null,t.createElement("div",{className:"titles",style:{fontSize:"1.1em",fontWeight:600}},e),t.createElement("div",null,r))},c=function(e){return t.createElement("div",null,e)};function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}var p=function(e){var t,a;function s(){var t;return(t=e.apply(this,arguments)||this).commonStyles={loading:t.props.loading,color:t.props.color?t.props.color:"grey",margin:t.props.margin?t.props.margin:"2px"},t.loaderStyles1=l({},t.commonStyles,{size:t.props.size?t.props.size:15,sizeUnit:t.props.sizeUnit?t.props.sizeUnit:"px"}),t.loaderStyles2=l({},t.commonStyles,{width:t.props.size?t.props.size[0]:5,height:t.props.size?t.props.size[1]:15,widthUnit:t.props.sizeUnit?t.props.sizeUnit[0]:"px",heightUnit:t.props.sizeUnit?t.props.sizeUnit[1]:"px"}),t}return a=e,(t=s).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a,s.prototype.render=function(){switch(this.props.type){case"BarLoader":return r.createElement(n.BarLoader,Object.assign({},this.loaderStyles2));case"BeatLoader":return r.createElement(n.BeatLoader,Object.assign({},this.loaderStyles1));case"BounceLoader":return r.createElement(n.BounceLoader,Object.assign({},this.loaderStyles1));case"ClimbingBoxLoader":return r.createElement(n.ClimbingBoxLoader,Object.assign({},this.loaderStyles1));case"ClipLoader":return r.createElement(n.ClipLoader,Object.assign({},this.loaderStyles1));case"DotLoader":return r.createElement(n.DotLoader,Object.assign({},this.loaderStyles1));case"FadeLoader":return r.createElement(n.FadeLoader,Object.assign({},this.loaderStyles2));case"PulseLoader":return r.createElement(n.PulseLoader,Object.assign({},this.loaderStyles1));case"RotateLoader":return r.createElement(n.RotateLoader,Object.assign({},this.loaderStyles1));case"ScaleLoader":return r.createElement(n.ScaleLoader,Object.assign({},this.loaderStyles2));case"SyncLoader":return r.createElement(n.SyncLoader,Object.assign({},this.loaderStyles1));default:return r.createElement("div",null,"Invalid spinner")}},s}(t.Component),u=function(e){return function(r){var a=r.onClose;return t.createElement(t.Fragment,null,t.createElement("div",{className:"confirm-container"},t.createElement("h3",null,e.title),t.createElement("p",null,e.message),t.createElement("div",{className:"confirm-buttons"},t.createElement(o,{onClick:function(){e.cancel.callback(),a()},style:{float:"left"},className:"confirm-btn",variant:"danger"},e.cancel.label||"Cancel"),t.createElement(o,{onClick:function(){e.ok.callback(),a()},style:{float:"right"},className:"confirm-btn",variant:"success"},e.ok.label||"Confirm"))))}};exports.Confirm=function(e){return s.confirmAlert({customUI:u(e)})},exports.Spinner=p,exports.Toast=function(e,t,r){return"error"===e?a.toast.error(r?i(t,r):c(t)):"info"===e?a.toast.info(r?i(t,r):c(t)):"success"===e?a.toast.success(r?i(t,r):c(t)):"warning"===e?a.toast.warn(r?i(t,r):c(t)):a.toast(r?i(t,r):c(t))},exports.Toaster=function(e){return t.createElement(a.ToastContainer,{autoClose:e.autoClose||5e3,hideProgressBar:!1!==e.hideProgressBar,draggable:!1!==e.draggable,transition:a.Slide,draggablePercent:35})};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),r=e(t),o=require("react-toastify");require("react-toastify/dist/ReactToastify.min.css");var n=require("react-spinners"),a=require("react-confirm-alert");require("react-confirm-alert/src/react-confirm-alert.css");var s=e(require("react-bootstrap/Button")),i=e(require("chart.js")),c=function(e,r){return t.createElement(t.Fragment,null,t.createElement("div",{className:"titles",style:{fontSize:"1.1em",fontWeight:600}},e),t.createElement("div",null,r))},l=function(e){return t.createElement("div",null,e)};function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function u(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}var d=function(e){function t(){var t;return(t=e.apply(this,arguments)||this).commonStyles={loading:t.props.loading,color:t.props.color?t.props.color:"grey",margin:t.props.margin?t.props.margin:"2px"},t.loaderStyles1=p({},t.commonStyles,{size:t.props.size?t.props.size:15,sizeUnit:t.props.sizeUnit?t.props.sizeUnit:"px"}),t.loaderStyles2=p({},t.commonStyles,{width:t.props.size?t.props.size[0]:5,height:t.props.size?t.props.size[1]:15,widthUnit:t.props.sizeUnit?t.props.sizeUnit[0]:"px",heightUnit:t.props.sizeUnit?t.props.sizeUnit[1]:"px"}),t}return u(t,e),t.prototype.render=function(){switch(this.props.type){case"BarLoader":return r.createElement(n.BarLoader,Object.assign({},this.loaderStyles2));case"BeatLoader":return r.createElement(n.BeatLoader,Object.assign({},this.loaderStyles1));case"BounceLoader":return r.createElement(n.BounceLoader,Object.assign({},this.loaderStyles1));case"ClimbingBoxLoader":return r.createElement(n.ClimbingBoxLoader,Object.assign({},this.loaderStyles1));case"ClipLoader":return r.createElement(n.ClipLoader,Object.assign({},this.loaderStyles1));case"DotLoader":return r.createElement(n.DotLoader,Object.assign({},this.loaderStyles1));case"FadeLoader":return r.createElement(n.FadeLoader,Object.assign({},this.loaderStyles2));case"PulseLoader":return r.createElement(n.PulseLoader,Object.assign({},this.loaderStyles1));case"RotateLoader":return r.createElement(n.RotateLoader,Object.assign({},this.loaderStyles1));case"ScaleLoader":return r.createElement(n.ScaleLoader,Object.assign({},this.loaderStyles2));case"SyncLoader":return r.createElement(n.SyncLoader,Object.assign({},this.loaderStyles1));default:return r.createElement("div",null,"Invalid spinner")}},t}(t.Component),h=function(e){return function(r){var o=r.onClose;return t.createElement(t.Fragment,null,t.createElement("div",{className:"confirm-container"},t.createElement("h3",null,e.title),t.createElement("p",null,e.message),t.createElement("div",{className:"confirm-buttons"},t.createElement(s,{onClick:function(){e.cancel.callback(),o()},style:{float:"left"},className:"confirm-btn",variant:"danger"},e.cancel.label||"Cancel"),t.createElement(s,{onClick:function(){e.ok.callback(),o()},style:{float:"right"},className:"confirm-btn",variant:"success"},e.ok.label||"Confirm"))))}};function f(e){return{display:!!e.label,labelString:e.label}}function m(e){var t,r={display:!!e.label,scaleLabel:f(e),type:(t=e.type,"category"===t?"category":"linear"===t?"linear":"time"===t?"time":"category"),ticks:{beginAtZero:!0}};return"time"===e.type&&(r.time={unit:e.timeFormat,stepSize:e.timeStepSize}),r}function y(e,t){var r=[];return e&&(r=e.map(m)),r.forEach(function(e){return e.stacked=t}),r}function g(e){var t=e.label,r=[],o=[],n=[];return e.data.forEach(function(t){r.push(t.y);var a=t.backgroundColor?t.backgroundColor:e.backgroundColor,s=t.borderColor?t.borderColor:e.borderColor;void 0!==a&&o.push(a),void 0!==s&&n.push(s)}),{label:t,data:r,backgroundColor:o,borderColor:n,pointBackgroundColor:o,pointBorderColor:n,borderWidth:1}}function b(e){return e.map(g)}function v(e){return{labels:(t=e.datasets,r=[],t.forEach(function(e){return e.data.forEach(function(e){r.includes(e.x)||r.push(e.x)})}),r),datasets:b(e.datasets)};var t,r}function C(e){var t={title:{display:!!e.title,text:e.title}};return t.title&&(e.titleFontSize&&(t.title.fontSize=e.titleFontSize),e.titleFontColor&&(t.title.fontColor=e.titleFontColor)),t}function x(e,t){return{type:e,data:v(t),options:C(t)}}var E=function(e){function t(){return e.apply(this,arguments)||this}u(t,e);var o=t.prototype;return o.componentDidMount=function(){var e,t=!!this.props.stacked,r=this.props,o=r.horizontal,n=r.xAxes,a=r.yAxes,s=x(o?"horizontalBar":"bar",this.props);s&&s.options&&(e=o?{xAxes:y(a,t),yAxes:y(n,t)}:{xAxes:y(n,t),yAxes:y(a,t)},s.options.scales=e),this.graph=new i(this.chart,s)},o.render=function(){var e=this;return r.createElement("canvas",{ref:function(t){return e.chart=t}})},t}(t.Component),S=function(e){function t(){return e.apply(this,arguments)||this}u(t,e);var o=t.prototype;return o.componentDidMount=function(){var e=x(this.props.doughnut?"doughnut":"pie",this.props);this.graph=new i(this.chart,e)},o.render=function(){var e=this;return r.createElement("canvas",{ref:function(t){return e.chart=t}})},t}(t.Component),L=function(e){function t(){return e.apply(this,arguments)||this}u(t,e);var o=t.prototype;return o.componentDidMount=function(){var e=!1;this.props.fill&&(e=this.props.fill);var t=x("line",this.props);if(t&&t.data&&t.data.datasets)for(var r=0;r<this.props.datasets.length;r++)t.data.datasets[r].fill=e,t.data.datasets[r].backgroundColor=this.props.datasets[r].backgroundColor,t.data.datasets[r].borderColor=this.props.datasets[r].borderColor;if(t&&t.options){var o=!!this.props.stacked,n={xAxes:y(this.props.xAxes,!1),yAxes:y(this.props.yAxes,o)};t.options.scales=n}this.graph=new i(this.chart,t)},o.render=function(){var e=this;return r.createElement("canvas",{ref:function(t){return e.chart=t}})},t}(t.Component);exports.BarGraph=E,exports.Confirm=function(e){return a.confirmAlert({customUI:h(e)})},exports.LineGraph=L,exports.PieGraph=S,exports.Spinner=d,exports.Toast=function(e,t,r){return"error"===e?o.toast.error(r?c(t,r):l(t)):"info"===e?o.toast.info(r?c(t,r):l(t)):"success"===e?o.toast.success(r?c(t,r):l(t)):"warning"===e?o.toast.warn(r?c(t,r):l(t)):o.toast(r?c(t,r):l(t))},exports.Toaster=function(e){return t.createElement(o.ToastContainer,{autoClose:e.autoClose||5e3,hideProgressBar:!1!==e.hideProgressBar,draggable:!1!==e.draggable,transition:o.Slide,draggablePercent:35})};
 //# sourceMappingURL=components.cjs.production.min.js.map

dist/components.esm.js

@@ -8,2 +8,3 @@ import React__default, { createElement, Fragment, Component } from 'react';
 import Button from 'react-bootstrap/Button';
+import ChartJs from 'chart.js';
 
@@ -174,3 +175,278 @@ var titleWithMessage = function titleWithMessage(title, message) {
 
-export { Confirm, Spinner, Toast, Toaster };
+function getAxisType(type) {
+  if (type === 'category') {
+    return 'category';
+  } else if (type === 'linear') {
+    return 'linear';
+  } else if (type === 'time') {
+    return 'time';
+  }
+
+  return 'category';
+}
+
+function getAxisLabel(item) {
+  return {
+    display: !!item.label,
+    labelString: item.label
+  };
+}
+
+function axisMapper(item) {
+  var axis = {
+    display: !!item.label,
+    scaleLabel: getAxisLabel(item),
+    type: getAxisType(item.type),
+    ticks: {
+      beginAtZero: true
+    }
+  };
+
+  if (item.type === 'time') {
+    var timeScale = {
+      unit: item.timeFormat,
+      stepSize: item.timeStepSize
+    };
+    axis.time = timeScale;
+  }
+
+  return axis;
+}
+
+function getAxes(axes, stacked) {
+  var chartAxes = [];
+
+  if (axes) {
+    chartAxes = axes.map(axisMapper);
+  }
+
+  chartAxes.forEach(function (axis) {
+    return axis.stacked = stacked;
+  });
+  return chartAxes;
+}
+
+function getChartDataset(dataset) {
+  var label = dataset.label;
+  var data = [];
+  var backgroundColor = [];
+  var borderColor = [];
+  dataset.data.forEach(function (d) {
+    data.push(d.y);
+    var background = d.backgroundColor ? d.backgroundColor : dataset.backgroundColor;
+    var border = d.borderColor ? d.borderColor : dataset.borderColor;
+
+    if (background !== undefined) {
+      backgroundColor.push(background);
+    }
+
+    if (border !== undefined) {
+      borderColor.push(border);
+    }
+  });
+  var pointBackgroundColor = backgroundColor;
+  var pointBorderColor = borderColor;
+  return {
+    label: label,
+    data: data,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    pointBackgroundColor: pointBackgroundColor,
+    pointBorderColor: pointBorderColor,
+    borderWidth: 1
+  };
+}
+
+function getChartDatasets(datasets) {
+  return datasets.map(getChartDataset);
+}
+
+function getLabelsFromDataset(datasets) {
+  var labels = [];
+  datasets.forEach(function (dataset) {
+    return dataset.data.forEach(function (d) {
+      if (!labels.includes(d.x)) {
+        labels.push(d.x);
+      }
+    });
+  });
+  return labels;
+}
+
+function getChartData(graph) {
+  return {
+    labels: getLabelsFromDataset(graph.datasets),
+    datasets: getChartDatasets(graph.datasets)
+  };
+}
+
+function getCommonChartOptions(graph) {
+  var options = {
+    title: {
+      display: !!graph.title,
+      text: graph.title
+    }
+  };
+
+  if (options.title) {
+    if (graph.titleFontSize) {
+      options.title.fontSize = graph.titleFontSize;
+    }
+
+    if (graph.titleFontColor) {
+      options.title.fontColor = graph.titleFontColor;
+    }
+  }
+
+  return options;
+}
+
+function getCommonChartConfigurations(type, graph) {
+  return {
+    type: type,
+    data: getChartData(graph),
+    options: getCommonChartOptions(graph)
+  };
+}
+
+var BarGraph =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(BarGraph, _Component);
+
+  function BarGraph() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = BarGraph.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var stacked = !!this.props.stacked;
+    var _this$props = this.props,
+        horizontal = _this$props.horizontal,
+        xAxes = _this$props.xAxes,
+        yAxes = _this$props.yAxes;
+    var type = horizontal ? 'horizontalBar' : 'bar';
+    var config = getCommonChartConfigurations(type, this.props);
+
+    if (config && config.options) {
+      var scales = undefined;
+
+      if (!horizontal) {
+        scales = {
+          xAxes: getAxes(xAxes, stacked),
+          yAxes: getAxes(yAxes, stacked)
+        };
+      } else {
+        scales = {
+          xAxes: getAxes(yAxes, stacked),
+          yAxes: getAxes(xAxes, stacked)
+        };
+      }
+
+      config.options.scales = scales;
+    }
+
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto.render = function render() {
+    var _this = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this.chart = chart;
+      }
+    });
+  };
+
+  return BarGraph;
+}(Component);
+
+var PieGraph =
+/*#__PURE__*/
+function (_Component2) {
+  _inheritsLoose(PieGraph, _Component2);
+
+  function PieGraph() {
+    return _Component2.apply(this, arguments) || this;
+  }
+
+  var _proto2 = PieGraph.prototype;
+
+  _proto2.componentDidMount = function componentDidMount() {
+    var doughnut = this.props.doughnut;
+    var type = doughnut ? 'doughnut' : 'pie';
+    var config = getCommonChartConfigurations(type, this.props);
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto2.render = function render() {
+    var _this2 = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this2.chart = chart;
+      }
+    });
+  };
+
+  return PieGraph;
+}(Component);
+
+var LineGraph =
+/*#__PURE__*/
+function (_Component3) {
+  _inheritsLoose(LineGraph, _Component3);
+
+  function LineGraph() {
+    return _Component3.apply(this, arguments) || this;
+  }
+
+  var _proto3 = LineGraph.prototype;
+
+  _proto3.componentDidMount = function componentDidMount() {
+    var type = 'line';
+    var fill = false;
+
+    if (this.props.fill) {
+      fill = this.props.fill;
+    }
+
+    var config = getCommonChartConfigurations(type, this.props);
+
+    if (config && config.data && config.data.datasets) {
+      for (var i = 0; i < this.props.datasets.length; i++) {
+        config.data.datasets[i].fill = fill;
+        config.data.datasets[i].backgroundColor = this.props.datasets[i].backgroundColor;
+        config.data.datasets[i].borderColor = this.props.datasets[i].borderColor;
+      }
+    }
+
+    if (config && config.options) {
+      var stacked = !!this.props.stacked;
+      var scales = {
+        xAxes: getAxes(this.props.xAxes, false),
+        yAxes: getAxes(this.props.yAxes, stacked)
+      };
+      config.options.scales = scales;
+    }
+
+    this.graph = new ChartJs(this.chart, config);
+  };
+
+  _proto3.render = function render() {
+    var _this3 = this;
+
+    return React__default.createElement("canvas", {
+      ref: function ref(chart) {
+        return _this3.chart = chart;
+      }
+    });
+  };
+
+  return LineGraph;
+}(Component);
+
+export { BarGraph, Confirm, LineGraph, PieGraph, Spinner, Toast, Toaster };
 //# sourceMappingURL=components.esm.js.map

dist/index.d.ts

 export * from './components/Toaster';
 export * from './components/Spinner';
 export * from './components/Confirm';
+export * from './components/Graph';

package.json

 {
   "name": "@hospitalrun-org/components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/index.js",
+  "license": "MIT",
   "module": "dist/components.esm.js",
@@ -20,5 +21,7 @@ "typings": "dist/index.d.ts",
     "test": "tsdx test --env=jsdom",
-    "lint": "tsdx lint",
+    "lint": "prettier --write \"src/**/*\" \"stories/**/*\" \"test/**/*\" \"README.md\" \"docs/**/*\" && tsdx lint --fix \"src/**/*\" \"test/**/*\"",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook -c .storybook",
+    "release": "standard-version",
+    "docgen": "genDocs.sh"
   },
@@ -30,5 +33,12 @@ "peerDependencies": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "npm run lint",
+      "git add"
+    ]
+  },
   "prettier": {
@@ -47,28 +57,42 @@ "printWidth": 100,
     "@storybook/addon-actions": "~5.1.11",
+    "@storybook/addon-info": "^5.1.11",
     "@storybook/addon-links": "~5.1.11",
     "@storybook/addons": "~5.1.11",
-    "@storybook/react": "^5.1.11",
+    "@storybook/react": "~5.1.11",
     "@storybook/theming": "~5.1.11",
-    "@types/jest": "^24.0.17",
-    "@types/react": "^16.9.1",
-    "@types/react-dom": "^16.8.5",
-    "@types/storybook__react": "^4.0.2",
-    "awesome-typescript-loader": "^5.2.1",
+    "@types/chart.js": "~2.8.2",
+    "@types/jest": "~24.0.17",
+    "@types/react": "~16.9.1",
+    "@types/react-dom": "~16.8.5",
+    "@types/storybook__addon-info": "^4.1.2",
+    "@types/storybook__react": "~4.0.2",
+    "awesome-typescript-loader": "~5.2.1",
     "babel-loader": "~8.0.6",
-    "husky": "^3.0.3",
-    "prettier": "^1.18.2",
-    "pretty-quick": "^1.11.1",
-    "react": "^16.9.0",
-    "react-bootstrap": "^1.0.0-beta.11",
-    "react-dom": "^16.9.0",
-    "tsdx": "^0.9.0",
-    "tslib": "^1.10.0",
-    "typescript": "^3.5.3"
+    "husky": "~3.0.5",
+    "jest-canvas-mock": "~2.1.1",
+    "lint-staged": "~9.2.5",
+    "prettier": "~1.18.2",
+    "react": "~16.9.0",
+    "react-bootstrap": "~1.0.0-beta.11",
+    "react-docgen": "^5.0.0-beta.1",
+    "react-docgen-typescript-loader": "^3.2.0",
+    "react-dom": "~16.9.0",
+    "standard-version": "~7.0.0",
+    "tsdx": "~0.9.0",
+    "tslib": "~1.10.0",
+    "typescript": "~3.5.3"
   },
   "dependencies": {
-    "formik": "^1.5.8",
-    "react-confirm-alert": "^2.4.1",
-    "react-spinners": "^0.5.12",
-    "react-toastify": "^5.3.2"
+    "chart.js": "~2.8.0",
+    "formik": "~1.5.8",
+    "moment": "~2.24.0",
+    "react-confirm-alert": "~2.4.1",
+    "react-spinners": "~0.6.1",
+    "react-toastify": "~5.3.2"
+  },
+  "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ]
   }
 }

README.md

@@ -5,5 +5,6 @@ # HospitalRun Components
 
-[![NPM Version](https://badgen.net/npm/v/@hospitalrun-org/components)](https://www.npmjs.com/package/@hospitalrun-org/components) [![Build Status](https://travis-ci.com/HospitalRun/components.svg?branch=master)](https://travis-ci.com/HospitalRun/components) [![NPM Downloads](https://badgen.net/npm/dt/@hospitalrun-org/components)](https://www.npmjs.com/package/@hospitalrun-org/components)
+[![Build Status](https://travis-ci.com/HospitalRun/components.svg?branch=master)](https://travis-ci.com/HospitalRun/components)
 [![Build Status](https://dev.azure.com/HospitalRun/components/_apis/build/status/HospitalRun.components?branchName=master)](https://dev.azure.com/HospitalRun/components/_build/latest?definitionId=1&branchName=master)
-[![Last commit](https://badgen.net/github/last-commit/hospitalrun/components)](https://github.com/HospitalRun/components/commits/master) [![Bundlephobia](https://badgen.net/bundlephobia/min/@hospitalrun-org/components)](https://bundlephobia.com/result?p=@hospitalrun-org/components) [![dependabot](https://badgen.net/dependabot/dependabot/dependabot-core/?icon=dependabot)](https://github.com/HospitalRun/components)  [![MIT](https://badgen.net/github/license/HospitalRun/components)](https://github.com/HospitalRun/components/blob/master/LICENSE) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/hospitalrun)
+[![Bundlephobia](https://badgen.net/bundlephobia/min/@hospitalrun-org/components)](https://bundlephobia.com/result?p=@hospitalrun-org/components)
+[![dependabot](https://badgen.net/dependabot/dependabot/dependabot-core/?icon=dependabot)](https://github.com/HospitalRun/components) [![MIT](https://badgen.net/github/license/HospitalRun/components)](https://github.com/HospitalRun/components/blob/master/LICENSE) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/hospitalrun) [![Netlify Status](https://api.netlify.com/api/v1/badges/70c843de-c1b2-4e7d-abb5-61939f21f8cb/deploy-status)](https://app.netlify.com/sites/hospitalrun/deploys) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 
@@ -19,2 +20,3 @@ </div>
 Install components:
+
 ```
@@ -25,2 +27,3 @@ npm install @hospitalrun-org/components
 Install react-bootstrap:
+
 ```
@@ -31,2 +34,3 @@ npm install react-bootstrap
 [Optional] You may need `node-sass` if you want to import components' `.scss` files:
+
 ```
@@ -50,81 +54,30 @@ npm install -D node-sass
 
-# Examples
+## How to commit
 
-## Spinner
+The [Conventional Commits](https://www.conventionalcommits.org) specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.
 
-Spinner it's a customizable spinner component. It's a wrapper component built upon react-spinners.
+The commit message should be structured as follows `<type>[optional scope]: <description>`
 
-Example:
-
 ```
-import React from "react";
-import { Spinner } from "components";
-import "components/scss/main.scss";
+feat: allow provided config object to extend other configs
 
-class App extends React.Component {
-  render() {
-    return (
-      <Spinner
-        type="ScaleLoader"
-        loading={true}
-        color={"orange"}
-        size={[5, 25]}
-        sizeUnit={["px", "px"]}
-      />
-    );
-  }
-}
+fix: correct minor typos in code
 
-export default App;
+BREAKING CHANGE: dropping Node 6 which hits end of life in April
 
+docs: correct spelling of CHANGELOG
 ```
 
-**MANDATORY PARAMETERS**
+Common types can be:
 
-`type: string`  
-Choose the spinner type. You can choose from:
+- build: Changes that affect the build system or external dependencies (example scopes: fastify, react, npm)
+- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Azure DevOps, SauceLabs)
+- docs: Documentation only changes
+- feat: A new feature
+- fix: A bug fix
+- perf: A code change that improves performance
+- refactor: A code change that neither fixes a bug nor adds a feature
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- test: Adding missing tests or correcting existing tests
 
-
-* BarLoader 
-* BeatLoader 
-* BounceLoader 
-* ClimbingBoxLoader 
-* ClipLoader 
-* DotLoader 
-* FadeLoader 
-* PulseLoader 
-* RotateLoader 
-* ScaleLoader 
-* SyncLoader 
-
-
-`loading: boolean`  
-This prop tells Spinner when to show itself. It should be linked to something dynamic, like a property in the parent component's state.
-
-
-**OPTIONAL PARAMETERS**
-
-`color: string`  
-Choose the spinner color.
-
-
-`margin: string`  
-Adds a margin to the Spinner component.
-
-
-`size: number | [number, number]`  
-Declares the size of the spinner. If you choose to declare it, in the following spinners it must be an array of two numbers (for width & height):
-
-* BarLoader 
-* FadeLoader 
-* ScaleLoader 
-
-
-`sizeUnit: "px" | "%" | "em" | ["px" | "%" | "em", "px" | "%" | "em"]`  
-Declares the unit of measure for the previous size parameter. If you choose to declare it, in the following spinners it must be an array of two strings (respectively for width & height):
-
-* BarLoader 
-* FadeLoader 
-* ScaleLoader 
-
 <hr />
@@ -140,9 +93,10 @@
 
-[![Sponsors](https://opencollective.com/hospitalrun/sponsors.svg?width=890)](https://opencollective.com/hospitalrun/contribute/sponsors-336/checkout) 
+[![Sponsors](https://opencollective.com/hospitalrun/sponsors.svg?width=890)](https://opencollective.com/hospitalrun/contribute/sponsors-336/checkout)
 
 ## Backers
 
-[![Backers](https://opencollective.com/hospitalrun/backers.svg?width=890)](https://opencollective.com/hospitalrun/contribute/backers-335/checkout) 
+[![Backers](https://opencollective.com/hospitalrun/backers.svg?width=890)](https://opencollective.com/hospitalrun/contribute/backers-335/checkout)
 
 ## Lead Maintainer
+
 [<img src="https://avatars2.githubusercontent.com/u/1620916?s=460&v=4" width="100px;"/><br /><sub><b>Maksim Sinik</b></sub>](https://github.com/fox1t)<br />
@@ -152,8 +106,8 @@
 
+<!-- prettier-ignore -->
 |[<img src="https://avatars1.githubusercontent.com/u/11684?s=460&v=4" width="100px;"/><br /><sub><b>Travis Boudreaux</b></sub>](https://github.com/tjboudreaux) | [<img src="https://avatars3.githubusercontent.com/u/25089405?s=460&v=4" width="100px;"/><br /><sub><b>Stefano Casasola</b></sub>](https://github.com/irvelervel) | [<img src="https://avatars3.githubusercontent.com/u/3400442?s=460&v=4" width="100px;"/><br /><sub><b>Michael J Feher</b></sub>](https://github.com/PhearZero) | [<img src="https://avatars1.githubusercontent.com/u/25009192?s=460&v=4" width="100px;"/><br /><sub><b>Riccardo Gulin</b></sub>](https://github.com/bazuzu666) | [<img src="https://avatars0.githubusercontent.com/u/6388707?s=460&v=4" width="100px;"/><br /><sub><b>Matteo Vivona</b></sub>](https://github.com/tehKapa) |
 |---|---|---|---|---|
 
+## Medical Supervisor
 
-## Medical Supervisor 
-
 [<img src="https://avatars2.githubusercontent.com/u/24660474?s=460&v=4" width="100px;"/><br /><sub><b>M.D. Daniele Piccolo</b></sub>](https://it.linkedin.com/in/danielepiccolo)<br />
@@ -163,3 +117,3 @@
 
-[![Contributors](https://opencollective.com/hospitalrun/contributors.svg?width=960&button=false)](https://github.com/HospitalRun/hospitalrun-frontend/graphs/contributors) 
+[![Contributors](https://opencollective.com/hospitalrun/contributors.svg?width=960&button=false)](https://github.com/HospitalRun/hospitalrun-frontend/graphs/contributors)
 
@@ -166,0 +120,0 @@ ## Founders

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112375

increased by86.18%

Number of package files

26

increased by13.04%

Lines of code

933

increased by130.94%

Worsened metrics

Dependency count

7

increased by40%

Dev dependency count

28

increased by33.33%

Number of lines in readme file

121

decreased by-27.54%

Dependency changes

• + Addedchart.js@~2.8.0

• + Addedmoment@~2.24.0

• + Addedchart.js@2.8.0(transitive)

• + Addedchartjs-color@2.4.1(transitive)

• + Addedchartjs-color-string@0.6.0(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.31.1.4(transitive)

• + Addeddom-helpers@3.4.0(transitive)

• + Addedmoment@2.24.0(transitive)

• + Addedreact-confirm-alert@2.4.1(transitive)

• + Addedreact-spinners@0.6.1(transitive)

• + Addedreact-toastify@5.3.2(transitive)

• + Addedreact-transition-group@2.9.0(transitive)

• + Addedresolve@1.22.9(transitive)

• - Removedchange-emitter@0.1.6(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removedreact-confirm-alert@2.8.0(transitive)

• - Removedreact-spinners@0.5.13(transitive)

• - Removedreact-toastify@5.5.0(transitive)

• - Removedreact-transition-group@4.4.5(transitive)

• - Removedrecompose@0.30.0(transitive)

• - Removedresolve@1.22.10(transitive)

• - Removedsymbol-observable@1.2.0(transitive)

• Updatedformik@~1.5.8

• Updatedreact-confirm-alert@~2.4.1

• Updatedreact-spinners@~0.6.1

• Updatedreact-toastify@~5.3.2