From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../Charts/demos/AreaNegativePositive.js | 62 +++++ .../app/containers/Charts/demos/AreaPercent.js | 79 +++++++ .../app/containers/Charts/demos/AreaResponsive.js | 67 ++++++ .../app/containers/Charts/demos/AreaSimple.js | 42 ++++ .../app/containers/Charts/demos/AreaStacked.js | 49 ++++ .../app/containers/Charts/demos/BarCustom.js | 80 +++++++ .../app/containers/Charts/demos/BarCustomLabel.js | 84 +++++++ .../app/containers/Charts/demos/BarMix.js | 48 ++++ .../containers/Charts/demos/BarPositiveNegative.js | 47 ++++ .../app/containers/Charts/demos/BarResponsive.js | 64 +++++ .../app/containers/Charts/demos/BarSimple.js | 45 ++++ .../app/containers/Charts/demos/BarStacked.js | 45 ++++ .../Charts/demos/CompossedLineBarArea.js | 51 ++++ .../containers/Charts/demos/CompossedResponsive.js | 69 ++++++ .../containers/Charts/demos/CompossedSameData.js | 46 ++++ .../containers/Charts/demos/CompossedVertical.js | 52 ++++ .../app/containers/Charts/demos/DoubleRadar.js | 35 +++ .../app/containers/Charts/demos/LineCustomDot.js | 78 ++++++ .../app/containers/Charts/demos/LineCustomLabel.js | 74 ++++++ .../app/containers/Charts/demos/LineResponsive.js | 56 +++++ .../app/containers/Charts/demos/LineSimple.js | 37 +++ .../app/containers/Charts/demos/LineVertical.js | 46 ++++ .../app/containers/Charts/demos/PieCustomLabel.js | 83 +++++++ .../app/containers/Charts/demos/PieCustomShape.js | 143 +++++++++++ .../app/containers/Charts/demos/PieSimple.js | 36 +++ .../app/containers/Charts/demos/RadarSimple.js | 30 +++ .../app/containers/Charts/demos/ScatterCustom.js | 46 ++++ .../app/containers/Charts/demos/ScatterJoinLine.js | 46 ++++ .../app/containers/Charts/demos/ScatterMultiple.js | 46 ++++ .../containers/Charts/demos/ScatterResponsive.js | 64 +++++ .../app/containers/Charts/demos/ScatterSimple.js | 40 ++++ .../app/containers/Charts/demos/index.js | 31 +++ .../app/containers/Charts/demos/sampleData.js | 262 +++++++++++++++++++++ 33 files changed, 2083 insertions(+) create mode 100644 front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/AreaPercent.js create mode 100644 front/odiparpack/app/containers/Charts/demos/AreaResponsive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/AreaSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/AreaStacked.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarCustom.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarMix.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarResponsive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/BarStacked.js create mode 100644 front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js create mode 100644 front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/CompossedSameData.js create mode 100644 front/odiparpack/app/containers/Charts/demos/CompossedVertical.js create mode 100644 front/odiparpack/app/containers/Charts/demos/DoubleRadar.js create mode 100644 front/odiparpack/app/containers/Charts/demos/LineCustomDot.js create mode 100644 front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js create mode 100644 front/odiparpack/app/containers/Charts/demos/LineResponsive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/LineSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/LineVertical.js create mode 100644 front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js create mode 100644 front/odiparpack/app/containers/Charts/demos/PieCustomShape.js create mode 100644 front/odiparpack/app/containers/Charts/demos/PieSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/RadarSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/ScatterCustom.js create mode 100644 front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js create mode 100644 front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js create mode 100644 front/odiparpack/app/containers/Charts/demos/ScatterSimple.js create mode 100644 front/odiparpack/app/containers/Charts/demos/index.js create mode 100644 front/odiparpack/app/containers/Charts/demos/sampleData.js (limited to 'front/odiparpack/app/containers/Charts/demos') diff --git a/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js b/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js new file mode 100644 index 0000000..dd5793a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { data3 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const gradientOffset = () => { + const dataMax = Math.max(...data3.map((i) => i.uv)); + const dataMin = Math.min(...data3.map((i) => i.uv)); + + if (dataMax <= 0) { + return 0; + } else if (dataMin >= 0) { + return 1; + } + return dataMax / (dataMax - dataMin); +}; + +const off = gradientOffset(); + +function AreaNegativePositive() { + return ( + + + + + + + + + + + + + + ); +} + +export default AreaNegativePositive; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaPercent.js b/front/odiparpack/app/containers/Charts/demos/AreaPercent.js new file mode 100644 index 0000000..32902e1 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaPercent.js @@ -0,0 +1,79 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { red } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenNatureTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: red[500], + thirddark: red[900], +}); + +const toPercent = (decimal, fixed = 0) => ( + `${(decimal * 100).toFixed(fixed)}%` +); + +const getPercent = (value, total) => { + const ratio = total > 0 ? value / total : 0; + return toPercent(ratio, 2); +}; + +const renderTooltipContent = (o) => { + const { payload, label } = o; + const total = payload.reduce((result, entry) => (result + entry.value), 0); + + return ( +
+

{`${label} (Total: ${total})`}

+ +
+ ); +}; + +function AreaPercent() { + return ( + + + + + + + + + + ); +} + +export default AreaPercent; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js b/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js new file mode 100644 index 0000000..a1bc4c0 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: green[500], + thirddark: green[900], +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function AreaResponsive(props) { + const { classes } = props; + return ( +
+ + + + + + + + + + + +
+ ); +} + +AreaResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AreaResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/AreaSimple.js b/front/odiparpack/app/containers/Charts/demos/AreaSimple.js new file mode 100644 index 0000000..590d19c --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaSimple.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { data2 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + main: theme.palette.primary.main, + dark: theme.palette.primary.dark, +}); + +function AreaSimple() { + return ( + + + + + + + + ); +} + +export default AreaSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaStacked.js b/front/odiparpack/app/containers/Charts/demos/AreaStacked.js new file mode 100644 index 0000000..82abd40 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaStacked.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: green[500], + thirddark: green[900], +}); + +function AreaStacked() { + return ( + + + + + + + + + + ); +} + +export default AreaStacked; diff --git a/front/odiparpack/app/containers/Charts/demos/BarCustom.js b/front/odiparpack/app/containers/Charts/demos/BarCustom.js new file mode 100644 index 0000000..d9a572d --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarCustom.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Cell +} from 'recharts'; +import PropTypes from 'prop-types'; +import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors'; +import { data2 } from './sampleData'; + + +const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]]; + +const getPath = (x, y, width, height) => ( + `M${x},${y + height} + C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y} + C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height} + Z` +); + +const TriangleBar = props => { + const { + fill, + x, + y, + width, + height + } = props; + return ; +}; + +TriangleBar.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + fill: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, +}; + +TriangleBar.defaultProps = { + x: 0, + y: 0, + fill: '#9f9f9f', + width: 0, + height: 0, +}; + +function BarCustom() { + return ( + + + + + + } label={{ position: 'top' }}> + { + data2.map((entry, index) => ( + + )) + } + + + ); +} + +export default BarCustom; diff --git a/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js new file mode 100644 index 0000000..79968d5 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js @@ -0,0 +1,84 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + LabelList +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const renderCustomizedLabel = props => { + const { + x, + y, + width, + value, + } = props; + const radius = 10; + + return ( + + + + {value.split(' ')[1]} + + + ); +}; + +renderCustomizedLabel.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + width: PropTypes.number, + value: PropTypes.number, +}; + +renderCustomizedLabel.defaultProps = { + x: 0, + y: 0, + width: 0, + value: 0, +}; + +function BarCustomLabel() { + return ( + + + + + + + + + + + + + + ); +} + +export default BarCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/BarMix.js b/front/odiparpack/app/containers/Charts/demos/BarMix.js new file mode 100644 index 0000000..e2e0e4e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarMix.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data2 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, + third: green[500] +}); + +function BarMix() { + return ( + + + + + + + + + + + ); +} + +export default BarMix; diff --git a/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js b/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js new file mode 100644 index 0000000..c3d6fcf --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ReferenceLine +} from 'recharts'; +import { data3 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarPositiveNegative() { + return ( + + + + + + + + + + + ); +} + +export default BarPositiveNegative; diff --git a/front/odiparpack/app/containers/Charts/demos/BarResponsive.js b/front/odiparpack/app/containers/Charts/demos/BarResponsive.js new file mode 100644 index 0000000..a2d3a48 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarResponsive.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenNatureTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function BarResponsive(props) { + const { classes } = props; + return ( +
+ + + + + + + + + + + +
+ ); +} + +BarResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BarResponsive); + diff --git a/front/odiparpack/app/containers/Charts/demos/BarSimple.js b/front/odiparpack/app/containers/Charts/demos/BarSimple.js new file mode 100644 index 0000000..eb06ee6 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarSimple.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarSimple() { + return ( + + + + + + + + + + ); +} + +export default BarSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/BarStacked.js b/front/odiparpack/app/containers/Charts/demos/BarStacked.js new file mode 100644 index 0000000..e5dfb0a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarStacked.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarStacked() { + return ( + + + + + + + + + + ); +} + +export default BarStacked; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js b/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js new file mode 100644 index 0000000..9063062 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +function CompossedLineBarArea() { + return ( + + + + + + + + + + + ); +} + +export default CompossedLineBarArea; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js b/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js new file mode 100644 index 0000000..ff06fb4 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.magentaTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function CompossedResponsive(props) { + const { classes } = props; + return ( +
+ + + + + + + + + + + + +
+ ); +} + +CompossedResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CompossedResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js b/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js new file mode 100644 index 0000000..ca81de1 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + main: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function CompossedSameData() { + return ( + + + + + + + + + + ); +} + +export default CompossedSameData; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js b/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js new file mode 100644 index 0000000..8e6d382 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +function CompossedVertical() { + return ( + + + + + + + + + + + ); +} + +export default CompossedVertical; diff --git a/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js b/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js new file mode 100644 index 0000000..ba6774c --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + Radar, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + Legend +} from 'recharts'; +import { data7 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, +}); + +function DoubleRadar() { + return ( + + + + + + + + + ); +} + +export default DoubleRadar; diff --git a/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js b/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js new file mode 100644 index 0000000..0b36702 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const CustomizedDot = props => { + const { + cx, + cy, + value + } = props; + if (value > 2500) { + return ( + + + + ); + } + return ( + + + + ); +}; + +CustomizedDot.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + value: PropTypes.number, +}; + +CustomizedDot.defaultProps = { + cx: 0, + cy: 0, + value: 0, +}; + +function LineCustomDot() { + return ( + + + + + + + } /> + + + ); +} + +export default LineCustomDot; diff --git a/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js new file mode 100644 index 0000000..32f4288 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js @@ -0,0 +1,74 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const CustomizedLabel = props => { + const { + x, + y, + stroke, + value + } = props; + return ( + + { value } + + ); +}; + +CustomizedLabel.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + value: PropTypes.number, + stroke: PropTypes.string, +}; + +CustomizedLabel.defaultProps = { + x: 0, + y: 0, + value: 0, + stroke: '#000' +}; + +function LineCustomLabel() { + return ( + + + + + + + } /> + } /> + + ); +} + +export default LineCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/LineResponsive.js b/front/odiparpack/app/containers/Charts/demos/LineResponsive.js new file mode 100644 index 0000000..b27223f --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineResponsive.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data1 } from './sampleData'; + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function LineResponsive(props) { + const { classes } = props; + return ( +
+ + + + + + + + + + + +
+ ); +} + +LineResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LineResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/LineSimple.js b/front/odiparpack/app/containers/Charts/demos/LineSimple.js new file mode 100644 index 0000000..54c1be5 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineSimple.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +function LineSimple() { + return ( + + + + + + + + + + ); +} + +export default LineSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/LineVertical.js b/front/odiparpack/app/containers/Charts/demos/LineVertical.js new file mode 100644 index 0000000..28ffc07 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineVertical.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.cyanTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function LineVertical() { + return ( + + + + + + + + + + ); +} + +export default LineVertical; diff --git a/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js new file mode 100644 index 0000000..1787ef3 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors'; +import { data6 } from './sampleData'; +const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]]; + +const RADIAN = Math.PI / 180; +const renderCustomizedLabel = ({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + percent, +}) => { + const radius = innerRadius + ((outerRadius - innerRadius) * 0.5); + const x = cx + (radius * Math.cos(-midAngle * RADIAN)); + const y = cy + (radius * Math.sin(-midAngle * RADIAN)); + + return ( + cx ? 'start' : 'end'} dominantBaseline="central"> + {`${(percent * 100).toFixed(0)}%`} + + ); +}; + +renderCustomizedLabel.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + midAngle: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + percent: PropTypes.number, +}; + +renderCustomizedLabel.defaultProps = { + cx: 0, + cy: 0, + midAngle: 0, + innerRadius: 0, + outerRadius: 0, + percent: 0, +}; + +class PieCustomLabel extends React.Component { + render() { + return ( + + + { + data6.map((entry, index) => ) + } + + + ); + } +} + +export default PieCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js b/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js new file mode 100644 index 0000000..ae58dba --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js @@ -0,0 +1,143 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + PieChart, + Pie, + Sector +} from 'recharts'; +import { data6 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const renderActiveShape = props => { + const RADIAN = Math.PI / 180; + const { + cx, + cy, + midAngle, + innerRadius, + outerRadius, + startAngle, + endAngle, + fill, + payload, + percent, + value + } = props; + const sin = Math.sin(-RADIAN * midAngle); + const cos = Math.cos(-RADIAN * midAngle); + const sx = cx + ((outerRadius + 10) * cos); + const sy = cy + ((outerRadius + 10) * sin); + const mx = cx + ((outerRadius + 30) * cos); + const my = cy + ((outerRadius + 30) * sin); + const ex = mx + ((cos >= 0 ? 1 : -1) * 22); + const ey = my; + const textAnchor = cos >= 0 ? 'start' : 'end'; + return ( + + {payload.name} + + + + + = 0 ? 1 : -1) * 12)} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`} + = 0 ? 1 : -1) * 12)} y={ey} dy={18} textAnchor={textAnchor} fill="#999"> + {`(Rate ${(percent * 100).toFixed(2)}%)`} + + + ); +}; + +renderActiveShape.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + midAngle: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + startAngle: PropTypes.number, + endAngle: PropTypes.number, + fill: PropTypes.string, + payload: PropTypes.string, + percent: PropTypes.number, + value: PropTypes.number, +}; + +renderActiveShape.defaultProps = { + cx: 0, + cy: 0, + midAngle: 0, + innerRadius: 0, + outerRadius: 0, + startAngle: 0, + endAngle: 0, + fill: '#eee', + payload: '', + percent: 0, + value: 0, +}; + +class PieCustomShape extends React.Component { + state = { + activeIndex: 0 + }; + + onPieEnter(evt) { + const index = data6.findIndex(p => p.name === evt.name); + this.setState({ + activeIndex: index, + }); + } + + render() { + return ( + + this.onPieEnter(event)} + /> + + ); + } +} + +export default PieCustomShape; diff --git a/front/odiparpack/app/containers/Charts/demos/PieSimple.js b/front/odiparpack/app/containers/Charts/demos/PieSimple.js new file mode 100644 index 0000000..f0a4f6e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieSimple.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + PieChart, + Pie, + Tooltip +} from 'recharts'; +import { data4, data5 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function PieSimple() { + return ( + + + + + + ); +} + +export default PieSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/RadarSimple.js b/front/odiparpack/app/containers/Charts/demos/RadarSimple.js new file mode 100644 index 0000000..f0e86cd --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/RadarSimple.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + Radar, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis +} from 'recharts'; +import { data7 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + main: theme.palette.primary.main, + dark: theme.palette.primary.dark, +}); + +function RadarSimple() { + return ( + + + + + + + ); +} + +export default RadarSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js b/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js new file mode 100644 index 0000000..9e61b27 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterCustom() { + return ( + + + + + + + + + + + ); +} + +export default ScatterCustom; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js b/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js new file mode 100644 index 0000000..74c238e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterJoinLine() { + return ( + + + + + + + + + + + ); +} + +export default ScatterJoinLine; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js b/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js new file mode 100644 index 0000000..a870692 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterMultiple() { + return ( + + + + + + + + + + + ); +} + +export default ScatterMultiple; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js b/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js new file mode 100644 index 0000000..791117d --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.skyBlueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function ScatterResponsive(props) { + const { classes } = props; + return ( +
+ + + + + + + + + + + + +
+ ); +} + +ScatterResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ScatterResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js b/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js new file mode 100644 index 0000000..4b8717a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + CartesianGrid, + Tooltip, +} from 'recharts'; +import { data8 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.cyanTheme); +const color = ({ + primary: theme.palette.primary.main, +}); + +function ScatterSimple() { + return ( + + + + + + + + ); +} + +export default ScatterSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/index.js b/front/odiparpack/app/containers/Charts/demos/index.js new file mode 100644 index 0000000..da6ac01 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/index.js @@ -0,0 +1,31 @@ +export LineSimple from './LineSimple'; +export LineVertical from './LineVertical'; +export LineCustomDot from './LineCustomDot'; +export LineCustomLabel from './LineCustomLabel'; +export LineResponsive from './LineResponsive'; +export BarSimple from './BarSimple'; +export BarMix from './BarMix'; +export BarStacked from './BarStacked'; +export BarCustom from './BarCustom'; +export BarPositiveNegative from './BarPositiveNegative'; +export BarCustomLabel from './BarCustomLabel'; +export BarResponsive from './BarResponsive'; +export AreaSimple from './AreaSimple'; +export AreaStacked from './AreaStacked'; +export AreaPercent from './AreaPercent'; +export AreaNegativePositive from './AreaNegativePositive'; +export AreaResponsive from './AreaResponsive'; +export PieSimple from './PieSimple'; +export PieCustomShape from './PieCustomShape'; +export PieCustomLabel from './PieCustomLabel'; +export RadarSimple from './RadarSimple'; +export DoubleRadar from './DoubleRadar'; +export ScatterSimple from './ScatterSimple'; +export ScatterJoinLine from './ScatterJoinLine'; +export ScatterMultiple from './ScatterMultiple'; +export ScatterCustom from './ScatterCustom'; +export ScatterResponsive from './ScatterResponsive'; +export CompossedLineBarArea from './CompossedLineBarArea'; +export CompossedSameData from './CompossedSameData'; +export CompossedVertical from './CompossedVertical'; +export CompossedResponsive from './CompossedResponsive'; diff --git a/front/odiparpack/app/containers/Charts/demos/sampleData.js b/front/odiparpack/app/containers/Charts/demos/sampleData.js new file mode 100644 index 0000000..4c6e524 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/sampleData.js @@ -0,0 +1,262 @@ +export const data1 = [ + { + name: 'Page A', + uv: 4000, + pv: 2400, + amt: 2400 + }, + { + name: 'Page B', + uv: 3000, + pv: 1398, + amt: 2210 + }, + { + name: 'Page C', + uv: 2000, + pv: 9800, + amt: 2290 + }, + { + name: 'Page D', + uv: 2780, + pv: 3908, + amt: 2000 + }, + { + name: 'Page E', + uv: 1890, + pv: 4800, + amt: 2181 + }, + { + name: 'Page F', + uv: 2390, + pv: 3800, + amt: 2500 + }, + { + name: 'Page G', + uv: 3490, + pv: 4300, + amt: 2100 + }, +]; + +export const data2 = [ + { + name: 'Page A', + uv: 4000, + female: 2400, + male: 2400 + }, { + name: 'Page B', + uv: 3000, + female: 1398, + male: 2210 + }, { + name: 'Page C', + uv: 2000, + female: 9800, + male: 2290 + }, { + name: 'Page D', + uv: 2780, + female: 3908, + male: 2000 + }, { + name: 'Page E', + uv: 1890, + female: 4800, + male: 2181 + }, { + name: 'Page F', + uv: 2390, + female: 3800, + male: 2500 + }, { + name: 'Page G', + uv: 3490, + female: 4300, + male: 2100 + }, +]; + +export const data3 = [ + { + name: 'Page A', + uv: 4000, + pv: 2400, + amt: 2400 + }, { + name: 'Page B', + uv: -3000, + pv: 1398, + amt: 2210 + }, { + name: 'Page C', + uv: -2000, + pv: -9800, + amt: 2290 + }, { + name: 'Page D', + uv: 2780, + pv: 3908, + amt: 2000 + }, { + name: 'Page E', + uv: -1890, + pv: 4800, + amt: 2181 + }, { + name: 'Page F', + uv: 2390, + pv: -3800, + amt: 2500 + }, { + name: 'Page G', + uv: 3490, + pv: 4300, + amt: 2100 + }, +]; + +export const data4 = [ + { + name: 'Group A', + value: 400 + }, { + name: 'Group B', + value: 300 + }, + { + name: 'Group C', + value: 300 + }, { + name: 'Group D', + value: 200 + }, + { + name: 'Group E', + value: 278 + }, { + name: 'Group F', + value: 189 + } +]; + +export const data5 = [ + { + name: 'Group A', + value: 2400 + }, { + name: 'Group B', + value: 4567 + }, + { + name: 'Group C', + value: 1398 + }, { + name: 'Group D', + value: 9800 + }, + { + name: 'Group E', + value: 3908 + }, { + name: 'Group F', + value: 4800 + } +]; + +export const data6 = [ + { + name: 'Group A', + value: 400 + }, { + name: 'Group B', + value: 300 + }, + { + name: 'Group C', + value: 300 + }, { + name: 'Group D', + value: 200 + } +]; + +export const data7 = [ + { + subject: 'Math', + A: 120, + B: 110, + fullMark: 150 + }, { + subject: 'Chinese', + A: 98, + B: 130, + fullMark: 150 + }, { + subject: 'English', + A: 86, + B: 130, + fullMark: 150 + }, { + subject: 'Geography', + A: 99, + B: 100, + fullMark: 150 + }, { + subject: 'Physics', + A: 85, + B: 90, + fullMark: 150 + }, { + subject: 'History', + A: 65, + B: 85, + fullMark: 150 + }, +]; + +export const data8 = [ + { + x: 10, + y: 30 + }, { + x: 30, + y: 200 + }, { + x: 45, + y: 100 + }, { + x: 50, + y: 400 + }, { + x: 70, + y: 150 + }, { + x: 100, + y: 250 + } +]; + +export const data9 = [ + { + x: 30, + y: 20 + }, { + x: 50, + y: 180 + }, { + x: 75, + y: 240 + }, { + x: 100, + y: 100 + }, { + x: 120, + y: 190 + } +]; -- cgit v1.2.3