component-shared 1.0.0

package/Components/Charts/AreaChart.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+import { ScatterDataPoint, ChartDataset } from 'chart.js';
+interface IProps {
+    data?: ChartDataset<'line', (number | ScatterDataPoint | null)[]>[];
+    IsLoading?: boolean;
+}
+export declare class AreaChart extends Component<IProps> {
+    static defaultProps: {
+        data: {
+            fill: boolean;
+            label: string;
+            data: number[];
+            borderColor: string;
+            backgroundColor: string;
+        }[];
+    };
+    render(): JSX.Element | undefined;
+}
+export {};

package/Components/Charts/AreaChart.js

@@ -0,0 +1,59 @@
+import { defineProperty as _defineProperty, inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
+var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top'
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart'
+    }
+  }
+};
+var defaultData = [{
+  fill: true,
+  label: 'Audios',
+  data: [0, 200, 300, 500, 250, 300, 400, 600, 550],
+  borderColor: 'rgb(255, 99, 132)',
+  backgroundColor: 'rgba(255, 99, 132, 0.5)'
+}, {
+  fill: true,
+  label: 'Albums',
+  data: [0, 100, 150, 400, 480, 400, 420, 500, 400],
+  borderColor: 'rgb(53, 162, 235)',
+  backgroundColor: 'rgba(53, 162, 235, 0.5)'
+}];
+var AreaChart = /*#__PURE__*/function (_Component) {
+  function AreaChart() {
+    _classCallCheck(this, AreaChart);
+    return _callSuper(this, AreaChart, arguments);
+  }
+  _inherits(AreaChart, _Component);
+  return _createClass(AreaChart, [{
+    key: "render",
+    value: function render() {
+      if (!this.props.data) return;
+      return jsx(Line, {
+        options: options,
+        data: {
+          labels: labels,
+          datasets: this.props.data
+        }
+      });
+    }
+  }]);
+}(Component);
+_defineProperty(AreaChart, "defaultProps", {
+  data: defaultData
+});
+
+export { AreaChart };
+//# sourceMappingURL=AreaChart.js.map

package/Components/Charts/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.js","sources":["../../../src/Components/Charts/AreaChart.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { Title, Tooltip, Legend, Filler, ScatterDataPoint, ChartDataset } from 'chart.js'\r\nimport { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement } from 'chart.js'\r\nimport { Line } from 'react-chartjs-2'\r\n\r\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler)\r\n\r\nconst labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\nconst options = {\r\n  responsive: true,\r\n  plugins: {\r\n    legend: { position: 'top' as const },\r\n    title: { display: true, text: 'Chart.js Line Chart' }\r\n  }\r\n}\r\nconst defaultData = [\r\n  {\r\n    fill: true,\r\n    label: 'Audios',\r\n    data: [0, 200, 300, 500, 250, 300, 400, 600, 550],\r\n    borderColor: 'rgb(255, 99, 132)',\r\n    backgroundColor: 'rgba(255, 99, 132, 0.5)'\r\n  },\r\n  {\r\n    fill: true,\r\n    label: 'Albums',\r\n    data: [0, 100, 150, 400, 480, 400, 420, 500, 400],\r\n    borderColor: 'rgb(53, 162, 235)',\r\n    backgroundColor: 'rgba(53, 162, 235, 0.5)'\r\n  }\r\n]\r\n\r\ninterface IProps {\r\n  data?: ChartDataset<'line', (number | ScatterDataPoint | null)[]>[]\r\n  IsLoading?: boolean\r\n}\r\nexport class AreaChart extends Component<IProps> {\r\n  static defaultProps = { data: defaultData }\r\n  render() {\r\n    if (!this.props.data) return\r\n    return <Line options={options} data={{ labels, datasets: this.props.data }} />\r\n  }\r\n}\r\n"],"names":["ChartJS","register","CategoryScale","LinearScale","PointElement","LineElement","Title","Tooltip","Legend","Filler","labels","options","responsive","plugins","legend","position","title","display","text","defaultData","fill","label","data","borderColor","backgroundColor","AreaChart","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","props","_jsx","Line","datasets","Component"],"mappings":";;;;;;AAKAA,KAAO,CAACC,QAAQ,CAACC,aAAa,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAEC,MAAM,CAAC;AAEvG,IAAMC,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACnG,IAAMC,OAAO,GAAG;AACdC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,QAAQ,EAAE;KAAgB;AACpCC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE,IAAI;AAAEC,MAAAA,IAAI,EAAE;AAAuB;AACtD;CACF;AACD,IAAMC,WAAW,GAAG,CAClB;AACEC,EAAAA,IAAI,EAAE,IAAI;AACVC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AACjDC,EAAAA,WAAW,EAAE,mBAAmB;AAChCC,EAAAA,eAAe,EAAE;AAClB,CAAA,EACD;AACEJ,EAAAA,IAAI,EAAE,IAAI;AACVC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AACjDC,EAAAA,WAAW,EAAE,mBAAmB;AAChCC,EAAAA,eAAe,EAAE;AAClB,CAAA,CACF;AAMYC,IAAAA,SAAU,0BAAAC,UAAA,EAAA;AAAA,EAAA,SAAAD,SAAA,GAAA;AAAAE,IAAAA,eAAA,OAAAF,SAAA,CAAA;AAAA,IAAA,OAAAG,UAAA,CAAA,IAAA,EAAAH,SAAA,EAAAI,SAAA,CAAA;AAAA;EAAAC,SAAA,CAAAL,SAAA,EAAAC,UAAA,CAAA;EAAA,OAAAK,YAAA,CAAAN,SAAA,EAAA,CAAA;IAAAO,GAAA,EAAA,QAAA;AAAAC,IAAAA,KAAA,EAErB,SAAAC,MAAMA,GAAA;AACJ,MAAA,IAAI,CAAC,IAAI,CAACC,KAAK,CAACb,IAAI,EAAE;MACtB,OAAOc,GAAA,CAACC,IAAI,EAAC;AAAA1B,QAAAA,OAAO,EAAEA,OAAO;AAAEW,QAAAA,IAAI,EAAE;AAAEZ,UAAAA,MAAM,EAANA,MAAM;AAAE4B,UAAAA,QAAQ,EAAE,IAAI,CAACH,KAAK,CAACb;AAAM;AAAA,OAAA,CAAI;AAChF;AAAC,GAAA,CAAA,CAAA;AAAA,CAAA,CAL4BiB,SAAiB;gBAAnCd,SAAU,EACC,cAAA,EAAA;AAAEH,EAAAA,IAAI,EAAEH;CAAa,CAAA;;;;"}

package/Components/Charts/BarChart.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ChartData } from 'chart.js';
+import { ChartOptions } from 'chart.js';
+export declare const options: ChartOptions<'bar'>;
+export declare const monthLabels: string[];
+export declare const data: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string;
+    }[];
+};
+interface BarChartProps {
+    width?: number | string;
+    height?: number | string;
+    data: ChartData<'bar', number[], string>;
+}
+export declare const BarChart: FC<BarChartProps>;
+export {};

package/Components/Charts/BarChart.js

@@ -0,0 +1,81 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { Chart, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+import { faker } from '@faker-js/faker';
+import { FormatterUSD } from 'partner-local-lib/helper';
+
+var _excluded = ["data"];
+Chart.register(CategoryScale, LinearScale, BarElement,
+// Title,
+Tooltip, Legend);
+var options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'top'
+    },
+    // title: {
+    //     display: true,
+    //     text: 'Chart.js Bar Chart',
+    // },
+    tooltip: {
+      callbacks: {
+        label: function label(context) {
+          var label = context.dataset.label || context.label || '';
+          if (label) {
+            label += ': ';
+          }
+          if (context.parsed.y !== null) {
+            label += FormatterUSD().format(context.parsed.y);
+          }
+          return label;
+        }
+      }
+    }
+  },
+  scales: {
+    yAxes: {
+      ticks: {
+        callback: function callback(value, index, values) {
+          return FormatterUSD().format(value);
+        }
+      }
+    }
+  }
+};
+var monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var data = {
+  labels: monthLabels,
+  datasets: [{
+    label: 'Dataset 1',
+    data: monthLabels.map(function () {
+      return faker.datatype.number({
+        min: 0,
+        max: 1000
+      });
+    }),
+    backgroundColor: 'rgba(255, 99, 132, 0.5)'
+  }, {
+    label: 'Dataset 2',
+    data: monthLabels.map(function () {
+      return faker.datatype.number({
+        min: 0,
+        max: 1000
+      });
+    }),
+    backgroundColor: 'rgba(53, 162, 235, 0.5)'
+  }]
+};
+var BarChart = function BarChart(props) {
+  var data = props.data,
+    other = _objectWithoutProperties(props, _excluded);
+  return jsx(Bar, _objectSpread2({
+    options: options,
+    data: data
+  }, other));
+};
+
+export { BarChart, data, monthLabels, options };
+//# sourceMappingURL=BarChart.js.map

package/Components/Charts/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sources":["../../../src/Components/Charts/BarChart.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend, ChartData } from 'chart.js'\r\nimport { Bar } from 'react-chartjs-2'\r\nimport { ChartOptions } from 'chart.js'\r\nimport { faker } from '@faker-js/faker'\r\nimport { FormatterUSD } from 'partner-local-lib/helper'\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  // Title,\r\n  Tooltip,\r\n  Legend\r\n)\r\n\r\nexport const options: ChartOptions<'bar'> = {\r\n  responsive: true,\r\n  maintainAspectRatio: false,\r\n  plugins: {\r\n    legend: {\r\n      position: 'top' as const\r\n    },\r\n    // title: {\r\n    //     display: true,\r\n    //     text: 'Chart.js Bar Chart',\r\n    // },\r\n    tooltip: {\r\n      callbacks: {\r\n        label: function (context) {\r\n          let label = context.dataset.label || context.label || ''\r\n          if (label) {\r\n            label += ': '\r\n          }\r\n          if (context.parsed.y !== null) {\r\n            label += FormatterUSD().format(context.parsed.y)\r\n          }\r\n          return label\r\n        }\r\n      }\r\n    }\r\n  },\r\n  scales: {\r\n    yAxes: {\r\n      ticks: {\r\n        callback: function (value, index, values) {\r\n          return FormatterUSD().format(value as number)\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nexport const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n\r\nexport const data = {\r\n  labels: monthLabels,\r\n  datasets: [\r\n    {\r\n      label: 'Dataset 1',\r\n      data: monthLabels.map(() => faker.datatype.number({ min: 0, max: 1000 })),\r\n      backgroundColor: 'rgba(255, 99, 132, 0.5)'\r\n    },\r\n    {\r\n      label: 'Dataset 2',\r\n      data: monthLabels.map(() => faker.datatype.number({ min: 0, max: 1000 })),\r\n      backgroundColor: 'rgba(53, 162, 235, 0.5)'\r\n    }\r\n  ]\r\n}\r\n\r\ninterface BarChartProps {\r\n  width?: number | string\r\n  height?: number | string\r\n  data: ChartData<'bar', number[], string>\r\n}\r\nexport const BarChart: FC<BarChartProps> = (props) => {\r\n  const { data, ...other } = props\r\n  return <Bar options={options} data={data} {...other} />\r\n}\r\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","Legend","options","responsive","maintainAspectRatio","plugins","legend","position","tooltip","callbacks","label","context","dataset","parsed","y","FormatterUSD","format","scales","yAxes","ticks","callback","value","index","values","monthLabels","data","labels","datasets","map","faker","datatype","number","min","max","backgroundColor","BarChart","props","other","_objectWithoutProperties","_excluded","_jsx","Bar","_objectSpread"],"mappings":";;;;;;;;AAOAA,KAAO,CAACC,QAAQ,CACdC,aAAa,EACbC,WAAW,EACXC,UAAU;AACV;AACAC,OAAO,EACPC,MAAM,CACP;AAEM,IAAMC,OAAO,GAAwB;AAC1CC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,mBAAmB,EAAE,KAAK;AAC1BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,MAAM,EAAE;AACNC,MAAAA,QAAQ,EAAE;KACX;AACD;AACA;AACA;AACA;AACAC,IAAAA,OAAO,EAAE;AACPC,MAAAA,SAAS,EAAE;AACTC,QAAAA,KAAK,EAAE,SAAPA,KAAKA,CAAYC,OAAO,EAAA;AACtB,UAAA,IAAID,KAAK,GAAGC,OAAO,CAACC,OAAO,CAACF,KAAK,IAAIC,OAAO,CAACD,KAAK,IAAI,EAAE;AACxD,UAAA,IAAIA,KAAK,EAAE;AACTA,YAAAA,KAAK,IAAI,IAAI;AACd;AACD,UAAA,IAAIC,OAAO,CAACE,MAAM,CAACC,CAAC,KAAK,IAAI,EAAE;AAC7BJ,YAAAA,KAAK,IAAIK,YAAY,EAAE,CAACC,MAAM,CAACL,OAAO,CAACE,MAAM,CAACC,CAAC,CAAC;AACjD;AACD,UAAA,OAAOJ,KAAK;AACd;AACD;AACF;GACF;AACDO,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE;QACLC,QAAQ,EAAE,SAAVA,QAAQA,CAAYC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAA;AACtC,UAAA,OAAOR,YAAY,EAAE,CAACC,MAAM,CAACK,KAAe,CAAC;AAC/C;AACD;AACF;AACF;;AAGI,IAAMG,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK;AAEvG,IAAMC,IAAI,GAAG;AAClBC,EAAAA,MAAM,EAAEF,WAAW;AACnBG,EAAAA,QAAQ,EAAE,CACR;AACEjB,IAAAA,KAAK,EAAE,WAAW;AAClBe,IAAAA,IAAI,EAAED,WAAW,CAACI,GAAG,CAAC,YAAA;AAAA,MAAA,OAAMC,KAAK,CAACC,QAAQ,CAACC,MAAM,CAAC;AAAEC,QAAAA,GAAG,EAAE,CAAC;AAAEC,QAAAA,GAAG,EAAE;AAAM,OAAA,CAAC;KAAC,CAAA;AACzEC,IAAAA,eAAe,EAAE;AAClB,GAAA,EACD;AACExB,IAAAA,KAAK,EAAE,WAAW;AAClBe,IAAAA,IAAI,EAAED,WAAW,CAACI,GAAG,CAAC,YAAA;AAAA,MAAA,OAAMC,KAAK,CAACC,QAAQ,CAACC,MAAM,CAAC;AAAEC,QAAAA,GAAG,EAAE,CAAC;AAAEC,QAAAA,GAAG,EAAE;AAAM,OAAA,CAAC;KAAC,CAAA;AACzEC,IAAAA,eAAe,EAAE;GAClB;;IASQC,QAAQ,GAAsB,SAA9BA,QAAQA,CAAuBC,KAAK,EAAI;AACnD,EAAA,IAAQX,IAAI,GAAeW,KAAK,CAAxBX,IAAI;AAAKY,IAAAA,KAAK,GAAAC,wBAAA,CAAKF,KAAK,EAAAG,SAAA,CAAA;AAChC,EAAA,OAAOC,GAAC,CAAAC,GAAG,EAAAC,cAAA,CAAA;AAACxC,IAAAA,OAAO,EAAEA,OAAO;AAAEuB,IAAAA,IAAI,EAAEA;GAAUY,EAAAA,KAAK,EAAI;AACzD;;;;"}

package/Components/Charts/DoughnutChart.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+import { IChartDataItem } from './type';
+interface IProps {
+    data?: IChartDataItem[];
+}
+export declare class DoughnutChart extends Component<IProps> {
+    static defaultProps: {
+        data: IChartDataItem[];
+    };
+    render(): JSX.Element;
+}
+export {};

package/Components/Charts/DoughnutChart.js

@@ -0,0 +1,81 @@
+import { defineProperty as _defineProperty, inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Chart, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+
+Chart.register(ArcElement, Tooltip, Legend);
+var createChartData = function createChartData(params) {
+  var labelName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '# of Votes';
+  var initial = {
+    labels: [],
+    datasets: [{
+      label: labelName,
+      borderWidth: 1,
+      data: [],
+      backgroundColor: [],
+      borderColor: []
+    }]
+  };
+  return params.reduce(function (acc, cur) {
+    var _acc$labels;
+    (_acc$labels = acc.labels) === null || _acc$labels === void 0 || _acc$labels.push(cur.label);
+    acc.datasets[0].data.push(cur.data);
+    if (Array.isArray(acc.datasets[0].backgroundColor)) acc.datasets[0].backgroundColor.push(cur.backgroundColor);
+    if (Array.isArray(acc.datasets[0].borderColor)) acc.datasets[0].borderColor.push(cur.borderColor);
+    return acc;
+  }, initial);
+};
+var defaultData = [{
+  label: 'Red',
+  data: 12,
+  backgroundColor: 'rgba(255, 99, 132, 0.2)',
+  borderColor: 'rgba(255, 99, 132, 1)'
+}, {
+  label: 'Blue',
+  data: 19,
+  backgroundColor: 'rgba(54, 162, 235, 0.2)',
+  borderColor: 'rgba(54, 162, 235, 1)'
+}, {
+  label: 'Yellow',
+  data: 3,
+  backgroundColor: 'rgba(255, 206, 86, 0.2)',
+  borderColor: 'rgba(255, 206, 86, 1)'
+}, {
+  label: 'Green',
+  data: 5,
+  backgroundColor: 'rgba(75, 192, 192, 0.2)',
+  borderColor: 'rgba(75, 192, 192, 1)'
+}, {
+  label: 'Purple',
+  data: 2,
+  backgroundColor: 'rgba(153, 102, 255, 0.2)',
+  borderColor: 'rgba(153, 102, 255, 1)'
+}, {
+  label: 'Orange',
+  data: 3,
+  backgroundColor: 'rgba(255, 159, 64, 0.2)',
+  borderColor: 'rgba(255, 159, 64, 1)'
+}];
+var DoughnutChart = /*#__PURE__*/function (_Component) {
+  function DoughnutChart() {
+    _classCallCheck(this, DoughnutChart);
+    return _callSuper(this, DoughnutChart, arguments);
+  }
+  _inherits(DoughnutChart, _Component);
+  return _createClass(DoughnutChart, [{
+    key: "render",
+    value: function render() {
+      var _this$props$data;
+      return jsx(Doughnut, {
+        data: createChartData((_this$props$data = this.props.data) !== null && _this$props$data !== void 0 ? _this$props$data : [])
+      });
+    }
+  }]);
+}(Component);
+_defineProperty(DoughnutChart, "defaultProps", {
+  data: defaultData
+});
+
+export { DoughnutChart };
+//# sourceMappingURL=DoughnutChart.js.map

package/Components/Charts/DoughnutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoughnutChart.js","sources":["../../../src/Components/Charts/DoughnutChart.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { ChartData } from 'chart.js'\r\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'\r\nimport { Doughnut } from 'react-chartjs-2'\r\nimport { IChartDataItem } from './type'\r\n\r\nChartJS.register(ArcElement, Tooltip, Legend)\r\n\r\nconst createChartData = (params: IChartDataItem[], labelName: string = '# of Votes') => {\r\n  const initial: ChartData<'doughnut', number[], string> = {\r\n    labels: [],\r\n    datasets: [{ label: labelName, borderWidth: 1, data: [], backgroundColor: [] as string[], borderColor: [] as string[] }]\r\n  }\r\n  return params.reduce((acc, cur) => {\r\n    acc.labels?.push(cur.label)\r\n    acc.datasets[0].data.push(cur.data)\r\n    if (Array.isArray(acc.datasets[0].backgroundColor)) acc.datasets[0].backgroundColor.push(cur.backgroundColor)\r\n    if (Array.isArray(acc.datasets[0].borderColor)) acc.datasets[0].borderColor.push(cur.borderColor)\r\n    return acc\r\n  }, initial)\r\n}\r\n\r\nconst defaultData: IChartDataItem[] = [\r\n  { label: 'Red', data: 12, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)' },\r\n  { label: 'Blue', data: 19, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)' },\r\n  { label: 'Yellow', data: 3, backgroundColor: 'rgba(255, 206, 86, 0.2)', borderColor: 'rgba(255, 206, 86, 1)' },\r\n  { label: 'Green', data: 5, backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)' },\r\n  { label: 'Purple', data: 2, backgroundColor: 'rgba(153, 102, 255, 0.2)', borderColor: 'rgba(153, 102, 255, 1)' },\r\n  { label: 'Orange', data: 3, backgroundColor: 'rgba(255, 159, 64, 0.2)', borderColor: 'rgba(255, 159, 64, 1)' }\r\n]\r\n\r\ninterface IProps {\r\n  data?: IChartDataItem[]\r\n}\r\nexport class DoughnutChart extends Component<IProps> {\r\n  static defaultProps = { data: defaultData }\r\n  render() {\r\n    return <Doughnut data={createChartData(this.props.data ?? [])} />\r\n  }\r\n}\r\n"],"names":["ChartJS","register","ArcElement","Tooltip","Legend","createChartData","params","labelName","arguments","length","undefined","initial","labels","datasets","label","borderWidth","data","backgroundColor","borderColor","reduce","acc","cur","_acc$labels","push","Array","isArray","defaultData","DoughnutChart","_Component","_classCallCheck","_callSuper","_inherits","_createClass","key","value","render","_this$props$data","_jsx","Doughnut","props","Component"],"mappings":"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"}

package/Components/Charts/HorizontalBarChart.d.ts

@@ -0,0 +1,38 @@
+import { Component } from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+interface IProps {
+    data?: ChartData<'bar', number[], string>;
+    options?: ChartOptions<'bar'>;
+    title?: string;
+}
+export declare class HorizontalBarChart extends Component<IProps> {
+    getOptions: (title?: string) => {
+        indexAxis: "y";
+        elements: {
+            bar: {
+                borderWidth: number;
+            };
+        };
+        responsive: boolean;
+        plugins: {
+            legend: {
+                position: "right";
+            };
+            title: {
+                display: boolean;
+                text: string;
+            };
+        };
+    };
+    getData: (unitName?: string) => {
+        labels: string[];
+        datasets: {
+            label: string;
+            data: number[];
+            borderColor: string;
+            backgroundColor: string;
+        }[];
+    };
+    render(): JSX.Element;
+}
+export default HorizontalBarChart;

package/Components/Charts/HorizontalBarChart.js

@@ -0,0 +1,83 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+import { faker } from '@faker-js/faker';
+
+Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+var labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+var HorizontalBarChart = /*#__PURE__*/function (_Component) {
+  function HorizontalBarChart() {
+    var _this;
+    _classCallCheck(this, HorizontalBarChart);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, HorizontalBarChart, [].concat(args));
+    _defineProperty(_this, "getOptions", function (title) {
+      return {
+        indexAxis: 'y',
+        elements: {
+          bar: {
+            borderWidth: 2
+          }
+        },
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'right'
+          },
+          title: {
+            display: true,
+            text: title || 'Horizontal Bar Chart'
+          }
+        }
+      };
+    });
+    _defineProperty(_this, "getData", function () {
+      var unitName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Unit';
+      var data = labels.map(function (e) {
+        return {
+          label: e,
+          value: faker.datatype.number({
+            min: 0,
+            max: 1000
+          })
+        };
+      });
+      var sortData = data.sort(function (a, b) {
+        return b.value - a.value;
+      });
+      return {
+        labels: sortData.map(function (e) {
+          return e.label;
+        }),
+        datasets: [{
+          label: unitName,
+          data: sortData.map(function (e) {
+            return e.value;
+          }),
+          borderColor: 'rgb(255, 99, 133, 0.6)',
+          backgroundColor: 'rgba(255, 99, 133, 0.3)'
+        }]
+      };
+    });
+    return _this;
+  }
+  _inherits(HorizontalBarChart, _Component);
+  return _createClass(HorizontalBarChart, [{
+    key: "render",
+    value: function render() {
+      var data = this.props.data || this.getData();
+      var options = this.props.options || this.getOptions(this.props.title);
+      return jsx(Bar, {
+        options: options,
+        data: data
+      });
+    }
+  }]);
+}(Component);
+
+export { HorizontalBarChart, HorizontalBarChart as default };
+//# sourceMappingURL=HorizontalBarChart.js.map

package/Components/Charts/HorizontalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarChart.js","sources":["../../../src/Components/Charts/HorizontalBarChart.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport {\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  ChartData,\r\n  ChartOptions,\r\n} from 'chart.js'\r\nimport { Bar } from 'react-chartjs-2'\r\nimport { faker } from '@faker-js/faker'\r\n\r\nChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)\r\n\r\nconst labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']\r\n\r\ninterface IProps {\r\n  data?: ChartData<'bar', number[], string>\r\n  options?: ChartOptions<'bar'>\r\n  title?: string\r\n}\r\nexport class HorizontalBarChart extends Component<IProps> {\r\n  getOptions = (title?: string) => ({\r\n    indexAxis: 'y' as const,\r\n    elements: { bar: { borderWidth: 2 } },\r\n    responsive: true,\r\n    plugins: {\r\n      legend: { position: 'right' as const },\r\n      title: { display: true, text: title || 'Horizontal Bar Chart' },\r\n    },\r\n  })\r\n\r\n  getData = (unitName: string = 'Unit') => {\r\n    const data = labels.map((e) => ({ label: e, value: faker.datatype.number({ min: 0, max: 1000 }) }))\r\n    const sortData = data.sort((a, b) => b.value - a.value)\r\n    return {\r\n      labels: sortData.map((e) => e.label),\r\n      datasets: [\r\n        {\r\n          label: unitName,\r\n          data: sortData.map((e) => e.value),\r\n          borderColor: 'rgb(255, 99, 133, 0.6)',\r\n          backgroundColor: 'rgba(255, 99, 133, 0.3)',\r\n        },\r\n      ],\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const data = this.props.data || this.getData()\r\n    const options: ChartOptions<'bar'> = this.props.options || this.getOptions(this.props.title)\r\n    return <Bar options={options} data={data} />\r\n  }\r\n}\r\nexport default HorizontalBarChart\r\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Title","Tooltip","Legend","labels","HorizontalBarChart","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","title","indexAxis","elements","bar","borderWidth","responsive","plugins","legend","position","display","text","unitName","undefined","data","map","e","label","value","faker","datatype","number","min","max","sortData","sort","a","b","datasets","borderColor","backgroundColor","_inherits","_createClass","key","render","props","getData","options","getOptions","_jsx","Bar","Component"],"mappings":"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"}

package/Components/Charts/LineChart.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ChartData } from 'chart.js';
+import { ChartOptions } from 'chart.js';
+export declare const options: ChartOptions<'line'>;
+export declare const monthLabels: string[];
+export declare const data: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string;
+    }[];
+};
+interface LineChartProps {
+    width?: number | string;
+    height?: number | string;
+    data: ChartData<'line', number[], string>;
+    options?: ChartOptions<'line'>;
+}
+export declare const LineChart: FC<LineChartProps>;
+export {};

package/Components/Charts/LineChart.js

@@ -0,0 +1,133 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Filler, Legend } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { faker } from '@faker-js/faker';
+import { mergeDeep } from '../Helper/index.js';
+
+var _excluded = ["data", "options"];
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement,
+// Title,
+Tooltip, Filler, Legend, {
+  id: 'uniqueid5',
+  afterDraw: function afterDraw(chart, easing) {
+    var _chart$tooltip$getAct, _chart$tooltip;
+    var activePoints = (_chart$tooltip$getAct = (_chart$tooltip = chart.tooltip) === null || _chart$tooltip === void 0 ? void 0 : _chart$tooltip.getActiveElements()) !== null && _chart$tooltip$getAct !== void 0 ? _chart$tooltip$getAct : [];
+    if (activePoints.length) {
+      var _chart$scales$y, _chart$scales$y2;
+      var activePoint = activePoints[0];
+      var ctx = chart.ctx;
+      var x = activePoint.element.x;
+      var topY = (_chart$scales$y = chart.scales.y) === null || _chart$scales$y === void 0 ? void 0 : _chart$scales$y.top;
+      var bottomY = (_chart$scales$y2 = chart.scales.y) === null || _chart$scales$y2 === void 0 ? void 0 : _chart$scales$y2.bottom;
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, bottomY);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = '#a5b4c3';
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+});
+var options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    mode: 'index',
+    intersect: false
+  },
+  // elements: {
+  //     line: {
+  //         tension: 0.1  // smooth lines,
+  //     },
+  // },
+  hover: {
+    intersect: false
+  },
+  plugins: {
+    legend: {
+      position: 'top'
+    }
+    // title: {
+    //     display: true,
+    //     text: 'Chart.js Bar Chart',
+    // },
+    // tooltip: {
+    //     callbacks: {
+    //         label: function (context) {
+    //             let label = context.label || context.dataset.label || '';
+    //             if (label) {
+    //                 label += ': ';
+    //             }
+    //             if (context.parsed.y !== null) {
+    //                 label += FormatterUSD().format(context.parsed.y);
+    //             }
+    //             return label;
+    //         }
+    //     }
+    // },
+  },
+  scales: {
+    // "yAxes": {
+    //     ticks: {
+    //         callback: function (value, index, values) {
+    //             return FormatterUSD().format(value as number)
+    //         }
+    //     }
+    // }
+    x: {
+      ticks: {
+        // For a category axis, the val is the index so the lookup via getLabelForValue is needed
+        callback: function callback(val, index, ticks) {
+          var amount = Math.floor(ticks.length / 6);
+          // Hide every amount  tick label
+          return index % amount === 0 ? typeof val === 'string' ? val : this.getLabelForValue(val) : null;
+        },
+        maxRotation: 0,
+        align: 'inner'
+      }
+    }
+  }
+};
+var monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var data = {
+  labels: monthLabels,
+  datasets: [{
+    label: 'Dataset 1',
+    data: monthLabels.map(function () {
+      return faker.datatype.number({
+        min: 0,
+        max: 1000
+      });
+    }),
+    backgroundColor: 'rgba(255, 99, 132, 0.5)'
+  }, {
+    label: 'Dataset 2',
+    data: monthLabels.map(function () {
+      return faker.datatype.number({
+        min: 0,
+        max: 1000
+      });
+    }),
+    backgroundColor: 'rgba(53, 162, 235, 0.5)'
+  }]
+};
+var LineChart = function LineChart(props) {
+  var data = props.data,
+    optionProps = props.options,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(mergeDeep({}, options, optionProps !== null && optionProps !== void 0 ? optionProps : {})),
+    _useState2 = _slicedToArray(_useState, 2),
+    opt = _useState2[0];
+    _useState2[1];
+  return jsx(Line, _objectSpread2({
+    options: opt,
+    data: data
+  }, other));
+};
+
+export { LineChart, data, monthLabels, options };
+//# sourceMappingURL=LineChart.js.map

package/Components/Charts/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sources":["../../../src/Components/Charts/LineChart.tsx"],"sourcesContent":["import React, { FC, useState } from 'react'\r\nimport { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, ChartData, Filler } from 'chart.js'\r\nimport { Line } from 'react-chartjs-2'\r\nimport { ChartOptions } from 'chart.js'\r\nimport { faker } from '@faker-js/faker'\r\nimport { mergeDeep } from '../Helper'\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  // Title,\r\n  Tooltip,\r\n  Filler,\r\n  Legend,\r\n  {\r\n    id: 'uniqueid5', //typescript crashes without id,\r\n    afterDraw: (chart, easing) => {\r\n      const activePoints = chart.tooltip?.getActiveElements() ?? []\r\n      if (activePoints.length) {\r\n        const activePoint = activePoints[0]\r\n        const ctx = chart.ctx\r\n        const x = activePoint.element.x\r\n        const topY = chart.scales.y?.top\r\n        const bottomY = chart.scales.y?.bottom\r\n        ctx.save()\r\n        ctx.beginPath()\r\n        ctx.moveTo(x, topY)\r\n        ctx.lineTo(x, bottomY)\r\n        ctx.lineWidth = 1\r\n        ctx.strokeStyle = '#a5b4c3'\r\n        ctx.stroke()\r\n        ctx.restore()\r\n      }\r\n    }\r\n  }\r\n)\r\n\r\nexport const options: ChartOptions<'line'> = {\r\n  responsive: true,\r\n  maintainAspectRatio: false,\r\n  interaction: {\r\n    mode: 'index',\r\n    intersect: false\r\n  },\r\n  // elements: {\r\n  //     line: {\r\n  //         tension: 0.1  // smooth lines,\r\n  //     },\r\n  // },\r\n  hover: {\r\n    intersect: false\r\n  },\r\n  plugins: {\r\n    legend: {\r\n      position: 'top' as const\r\n    }\r\n    // title: {\r\n    //     display: true,\r\n    //     text: 'Chart.js Bar Chart',\r\n    // },\r\n    // tooltip: {\r\n    //     callbacks: {\r\n    //         label: function (context) {\r\n    //             let label = context.label || context.dataset.label || '';\r\n    //             if (label) {\r\n    //                 label += ': ';\r\n    //             }\r\n    //             if (context.parsed.y !== null) {\r\n    //                 label += FormatterUSD().format(context.parsed.y);\r\n    //             }\r\n    //             return label;\r\n    //         }\r\n    //     }\r\n    // },\r\n  },\r\n  scales: {\r\n    // \"yAxes\": {\r\n    //     ticks: {\r\n    //         callback: function (value, index, values) {\r\n    //             return FormatterUSD().format(value as number)\r\n    //         }\r\n    //     }\r\n    // }\r\n    x: {\r\n      ticks: {\r\n        // For a category axis, the val is the index so the lookup via getLabelForValue is needed\r\n        callback: function (val, index, ticks) {\r\n          const amount = Math.floor(ticks.length / 6)\r\n          // Hide every amount  tick label\r\n          return index % amount === 0 ? (typeof val === 'string' ? val : this.getLabelForValue(val)) : null\r\n        },\r\n        maxRotation: 0,\r\n        align: 'inner'\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nexport const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n\r\nexport const data = {\r\n  labels: monthLabels,\r\n  datasets: [\r\n    {\r\n      label: 'Dataset 1',\r\n      data: monthLabels.map(() => faker.datatype.number({ min: 0, max: 1000 })),\r\n      backgroundColor: 'rgba(255, 99, 132, 0.5)'\r\n    },\r\n    {\r\n      label: 'Dataset 2',\r\n      data: monthLabels.map(() => faker.datatype.number({ min: 0, max: 1000 })),\r\n      backgroundColor: 'rgba(53, 162, 235, 0.5)'\r\n    }\r\n  ]\r\n}\r\n\r\ninterface LineChartProps {\r\n  width?: number | string\r\n  height?: number | string\r\n  data: ChartData<'line', number[], string>\r\n  options?: ChartOptions<'line'>\r\n}\r\nexport const LineChart: FC<LineChartProps> = (props) => {\r\n  const { data, options: optionProps, ...other } = props\r\n  const [opt, setOpt] = useState(mergeDeep<ChartOptions<'line'>>({}, options, optionProps ?? {}))\r\n  return <Line options={opt} data={data} {...other} />\r\n}\r\n"],"names":["ChartJS","register","CategoryScale","LinearScale","PointElement","LineElement","Tooltip","Filler","Legend","id","afterDraw","chart","easing","_chart$tooltip$getAct","_chart$tooltip","activePoints","tooltip","getActiveElements","length","_chart$scales$y","_chart$scales$y2","activePoint","ctx","x","element","topY","scales","y","top","bottomY","bottom","save","beginPath","moveTo","lineTo","lineWidth","strokeStyle","stroke","restore","options","responsive","maintainAspectRatio","interaction","mode","intersect","hover","plugins","legend","position","ticks","callback","val","index","amount","Math","floor","getLabelForValue","maxRotation","align","monthLabels","data","labels","datasets","label","map","faker","datatype","number","min","max","backgroundColor","LineChart","props","optionProps","other","_objectWithoutProperties","_excluded","_useState","useState","mergeDeep","_useState2","_slicedToArray","opt","setOpt","_jsx","Line","_objectSpread"],"mappings":"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"}

package/Components/Charts/PieChart.d.ts

@@ -0,0 +1,20 @@
+import { Component, FC } from 'react';
+import { ChartData } from 'chart.js';
+import { IChartDataItem } from './type';
+interface PieChartProps {
+    width?: number | string;
+    height?: number | string;
+    data: ChartData<'pie', number[], string>;
+    disableTooltip?: boolean;
+}
+export declare const PieChartV2: FC<PieChartProps>;
+interface IProps {
+    data?: IChartDataItem[];
+}
+export declare class PieChart extends Component<IProps> {
+    static defaultProps: {
+        data: IChartDataItem[];
+    };
+    render(): JSX.Element;
+}
+export {};