From 2d75b2757352697781a79b7d33f0c54c9f9b768b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 May 2021 14:08:36 +0200 Subject: [PATCH] chore: backup old files, will be removed them when final version be ready --- __old/.eslintrc | 6 ++ __old/ChartBarSimple.js | 83 +++++++++++++++++++ __old/ChartLineSimple.js | 165 ++++++++++++++++++++++++++++++++++++++ __old/MainChartExample.js | 95 ++++++++++++++++++++++ 4 files changed, 349 insertions(+) create mode 100644 __old/.eslintrc create mode 100644 __old/ChartBarSimple.js create mode 100644 __old/ChartLineSimple.js create mode 100644 __old/MainChartExample.js diff --git a/__old/.eslintrc b/__old/.eslintrc new file mode 100644 index 0000000..11b3647 --- /dev/null +++ b/__old/.eslintrc @@ -0,0 +1,6 @@ +{ + "plugins": ["prettier"], + "rules": { + "prettier/prettier": "error" + } +} diff --git a/__old/ChartBarSimple.js b/__old/ChartBarSimple.js new file mode 100644 index 0000000..54b76e4 --- /dev/null +++ b/__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 ( + + ) +} + +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 diff --git a/__old/ChartLineSimple.js b/__old/ChartLineSimple.js new file mode 100644 index 0000000..778ea33 --- /dev/null +++ b/__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 ( + + ) +} + +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 diff --git a/__old/MainChartExample.js b/__old/MainChartExample.js new file mode 100644 index 0000000..537d763 --- /dev/null +++ b/__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 +} + +export default MainChartExample