chore: backup old files, will be removed them when final version be ready

__old/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

__old/ChartBarSimple.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor } from '@coreui/utils'
+import { CChartBar } from '@coreui/react-chartjs'
+
+const ChartBarSimple = (props) => {
+  const {
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props
+
+  const defaultDatasets = {
+    data: dataPoints,
+    backgroundColor: getColor(backgroundColor),
+    pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
+    label: label,
+    barPercentage: 0.5,
+    categoryPercentage: 1,
+  }
+
+  const defaultOptions = {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false,
+          drawTicks: false,
+        },
+        ticks: {
+          display: false,
+        },
+      },
+      y: {
+        grid: {
+          display: false,
+          drawBorder: false,
+          drawTicks: false,
+        },
+        ticks: {
+          display: false,
+        },
+      },
+    },
+  }
+
+  // render
+  return (
+    <CChartBar
+      {...attributes}
+      data={defaultDatasets}
+      // options={defaultOptions}
+      // labels={label}
+    />
+  )
+}
+
+ChartBarSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool,
+}
+
+ChartBarSimple.defaultProps = {
+  backgroundColor: 'rgba(0,0,0,.2)',
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: 'Sales',
+}
+
+export default ChartBarSimple

__old/ChartLineSimple.js

@@ -0,0 +1,165 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils'
+
+import { CChartLine } from '@coreui/react-chartjs'
+
+const brandSuccess = getStyle('success') || '#4dbd74'
+const brandInfo = getStyle('info') || '#20a8d8'
+const brandDanger = getStyle('danger') || '#f86c6b'
+
+const ChartLineSimple = (props) => {
+  const {
+    borderColor,
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props
+
+  const pointHoverColor = (() => {
+    if (pointHoverBackgroundColor) {
+      return pointHoverBackgroundColor
+    } else if (backgroundColor !== 'transparent') {
+      return backgroundColor
+    }
+    return borderColor
+  })()
+
+  const defaultDatasets = (() => {
+    return [
+      {
+        data: dataPoints,
+        borderColor: getColor(borderColor),
+        backgroundColor: getColor(backgroundColor),
+        pointBackgroundColor: getColor(pointHoverColor),
+        pointHoverBackgroundColor: getColor(pointHoverColor),
+        label,
+      },
+    ]
+  })()
+
+  const pointedOptions = (() => {
+    return {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          grid: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+        y: {
+          display: false,
+          grid: {
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      },
+      elements: {
+        line: {
+          borderWidth: 1,
+          tension: 0.4,
+        },
+        point: {
+          radius: 4,
+          hitRadius: 10,
+          hoverRadius: 4,
+        },
+      },
+    }
+  })()
+
+  const straightOptions = (() => {
+    return {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          display: false,
+        },
+        y: {
+          display: false,
+        },
+      },
+      elements: {
+        line: {
+          borderWidth: 2,
+          tension: 0.4,
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+        },
+      },
+    }
+  })()
+
+  const defaultOptions = (() => {
+    const options = pointed ? pointedOptions : straightOptions
+    return Object.assign({}, options, {
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+    })
+  })()
+
+  const computedDatasets = (() => {
+    return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
+  })()
+
+  const computedOptions = (() => {
+    return deepObjectsMerge(defaultOptions, attributes.options || {})
+  })()
+
+  // render
+
+  return (
+    <CChartLine
+      {...attributes}
+      datasets={computedDatasets}
+      options={computedOptions}
+      labels={label}
+    />
+  )
+}
+
+ChartLineSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  borderColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool,
+}
+
+ChartLineSimple.defaultProps = {
+  borderColor: 'rgba(255,255,255,.55)',
+  backgroundColor: 'transparent',
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: 'Sales',
+}
+
+export default ChartLineSimple

__old/MainChartExample.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle, hexToRgba } from '@coreui/utils'
+
+const brandSuccess = getStyle('success') || '#4dbd74'
+const brandInfo = getStyle('info') || '#20a8d8'
+const brandDanger = getStyle('danger') || '#f86c6b'
+
+const MainChartExample = (attributes) => {
+  const random = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1) + min)
+  }
+
+  let elements = 27
+  const data1 = []
+  const data2 = []
+  const data3 = []
+
+  for (let i = 0; i <= elements; i++) {
+    data1.push(random(50, 200))
+    data2.push(random(80, 100))
+    data3.push(65)
+  }
+
+  const data = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        backgroundColor: hexToRgba(brandInfo, 10),
+        borderColor: brandInfo,
+        pointHoverBackgroundColor: brandInfo,
+        borderWidth: 2,
+        data: data1,
+        fill: true,
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'transparent',
+        borderColor: brandSuccess,
+        pointHoverBackgroundColor: brandSuccess,
+        borderWidth: 2,
+        data: data2,
+      },
+      {
+        label: 'My Third dataset',
+        backgroundColor: 'transparent',
+        borderColor: brandDanger,
+        pointHoverBackgroundColor: brandDanger,
+        borderWidth: 1,
+        borderDash: [8, 5],
+        data: data3,
+      },
+    ],
+  }
+
+  const options = {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          drawOnChartArea: false,
+        },
+      },
+      y: {
+        ticks: {
+          beginAtZero: true,
+          maxTicksLimit: 5,
+          stepSize: Math.ceil(250 / 5),
+          max: 250,
+        },
+      },
+    },
+    elements: {
+      line: {
+        tension: 0.4,
+      },
+      point: {
+        radius: 0,
+        hitRadius: 10,
+        hoverRadius: 4,
+        hoverBorderWidth: 3,
+      },
+    },
+  }
+
+  return <CChartLine data={data} options={options} {...attributes} />
+}
+
+export default MainChartExample