Merge branch 'gabshr' into dayana

41 files changed, 2566 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Charts/AreaCharts.js b/front/odiparpack/app/containers/Charts/AreaCharts.js
new file mode 100644
index 0000000..0468c22
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/AreaCharts.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  AreaSimple,
+  AreaStacked,
+  AreaPercent,
+  AreaNegativePositive,
+  AreaResponsive
+} from './demos';
+
+class AreaCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Area Chart" overflowX desc="">
+          <div>
+            <AreaSimple />
+            <SourceReader componentName={docSrc + 'AreaSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Stacked Area Chart" overflowX desc="">
+          <div>
+            <AreaStacked />
+            <SourceReader componentName={docSrc + 'AreaStacked.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Percent Area Chart" overflowX desc="">
+          <div>
+            <AreaPercent />
+            <SourceReader componentName={docSrc + 'AreaPercent.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Positive Negative Area Chart" overflowX desc="">
+          <div>
+            <AreaNegativePositive />
+            <SourceReader componentName={docSrc + 'AreaNegativePositive.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Responsive Area Chart" overflowX desc="">
+          <div>
+            <AreaResponsive />
+            <SourceReader componentName={docSrc + 'AreaResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default AreaCharts;
diff --git a/front/odiparpack/app/containers/Charts/BarCharts.js b/front/odiparpack/app/containers/Charts/BarCharts.js
new file mode 100644
index 0000000..4d24f78
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/BarCharts.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  BarSimple,
+  BarStacked,
+  BarMix,
+  BarCustom,
+  BarPositiveNegative,
+  BarCustomLabel,
+  BarResponsive
+} from './demos';
+
+class BarCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Bar Chart" desc="" overflowX>
+          <div>
+            <BarSimple />
+            <SourceReader componentName={docSrc + 'BarSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Stacked Bar Chart" desc="" overflowX>
+          <div>
+            <BarStacked />
+            <SourceReader componentName={docSrc + 'BarStacked.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Simple Mixing Bar" desc="" overflowX>
+          <div>
+            <BarMix />
+            <SourceReader componentName={docSrc + 'BarMix.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Bar Shape" desc="" overflowX>
+          <div>
+            <BarCustom />
+            <SourceReader componentName={docSrc + 'BarCustom.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Label Bar Chart" desc="" overflowX>
+          <div>
+            <BarCustomLabel />
+            <SourceReader componentName={docSrc + 'BarCustomLabel.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Positive Negative Bar Chart" desc="" overflowX>
+          <div>
+            <BarPositiveNegative />
+            <SourceReader componentName={docSrc + 'BarPositiveNegative.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Responsive Bar Chart" desc="" overflowX>
+          <div>
+            <BarResponsive />
+            <SourceReader componentName={docSrc + 'BarResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default BarCharts;
diff --git a/front/odiparpack/app/containers/Charts/CompossedCharts.js b/front/odiparpack/app/containers/Charts/CompossedCharts.js
new file mode 100644
index 0000000..08937c7
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/CompossedCharts.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  CompossedLineBarArea,
+  CompossedSameData,
+  CompossedVertical,
+  CompossedResponsive
+} from './demos';
+
+class CompossedCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Compossed Line Bar & Area Chart" desc="" overflowX>
+          <div>
+            <CompossedLineBarArea />
+            <SourceReader componentName={docSrc + 'CompossedLineBarArea.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Compossed Same Data Chart" desc="" overflowX>
+          <div>
+            <CompossedSameData />
+            <SourceReader componentName={docSrc + 'CompossedSameData.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Compossed Vertical Chart" desc="" overflowX>
+          <div>
+            <CompossedVertical />
+            <SourceReader componentName={docSrc + 'CompossedVertical.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Compossed Responsive Chart" desc="" overflowX>
+          <div>
+            <CompossedResponsive />
+            <SourceReader componentName={docSrc + 'CompossedResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default CompossedCharts;
diff --git a/front/odiparpack/app/containers/Charts/LineCharts.js b/front/odiparpack/app/containers/Charts/LineCharts.js
new file mode 100644
index 0000000..9f34f91
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/LineCharts.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  LineSimple,
+  LineVertical,
+  LineCustomDot,
+  LineCustomLabel,
+  LineResponsive
+} from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class DateTime extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Line Chart" desc="" overflowX>
+          <div>
+            <LineSimple />
+            <SourceReader componentName={docSrc + 'LineSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Vertical Line Chart" desc="" overflowX>
+          <div>
+            <LineVertical />
+            <SourceReader componentName={docSrc + 'LineVertical.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Dot Line Chart" desc="" overflowX>
+          <div>
+            <LineCustomDot />
+            <SourceReader componentName={docSrc + 'LineCustomDot.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Label Line Chart" desc="" overflowX>
+          <div>
+            <LineCustomLabel />
+            <SourceReader componentName={docSrc + 'LineCustomLabel.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Responsive Line Chart" desc="" overflowX>
+          <div>
+            <LineResponsive />
+            <SourceReader componentName={docSrc + 'LineResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(DateTime);
diff --git a/front/odiparpack/app/containers/Charts/PieCharts.js b/front/odiparpack/app/containers/Charts/PieCharts.js
new file mode 100644
index 0000000..b5609e2
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/PieCharts.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  PieSimple,
+  PieCustomShape,
+  PieCustomLabel,
+} from './demos';
+
+class PieCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Pie Chart" desc="" overflowX>
+          <div>
+            <PieSimple />
+            <SourceReader componentName={docSrc + 'PieSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Shape Pie Chart" desc="" overflowX>
+          <div>
+            <PieCustomShape />
+            <SourceReader componentName={docSrc + 'PieCustomShape.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Custom Label Pie Chart" desc="" overflowX>
+          <div>
+            <PieCustomLabel />
+            <SourceReader componentName={docSrc + 'PieCustomLabel.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default PieCharts;
diff --git a/front/odiparpack/app/containers/Charts/RadarCharts.js b/front/odiparpack/app/containers/Charts/RadarCharts.js
new file mode 100644
index 0000000..23fff3e
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/RadarCharts.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  RadarSimple,
+  DoubleRadar
+} from './demos';
+
+class RadarCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Radar Chart" desc="" overflowX>
+          <div>
+            <RadarSimple />
+            <SourceReader componentName={docSrc + 'RadarSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Double Radar Chart" desc="" overflowX>
+          <div>
+            <DoubleRadar />
+            <SourceReader componentName={docSrc + 'DoubleRadar.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default RadarCharts;
diff --git a/front/odiparpack/app/containers/Charts/ResponsiveCharts.js b/front/odiparpack/app/containers/Charts/ResponsiveCharts.js
new file mode 100644
index 0000000..ab8bb17
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/ResponsiveCharts.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  AreaResponsive,
+  BarResponsive,
+  LineResponsive,
+  ScatterResponsive,
+  CompossedResponsive
+} from './demos';
+
+class ScatterCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Area Responsive Chart" desc="" overflowX>
+          <div>
+            <AreaResponsive />
+            <SourceReader componentName={docSrc + 'AreaResponsive.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Bar Responsive Chart" desc="" overflowX>
+          <div>
+            <BarResponsive />
+            <SourceReader componentName={docSrc + 'BarResponsive.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Line Responsive Chart" desc="" overflowX>
+          <div>
+            <LineResponsive />
+            <SourceReader componentName={docSrc + 'LineResponsive.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Scatter Responsive Chart" desc="" overflowX>
+          <div>
+            <ScatterResponsive />
+            <SourceReader componentName={docSrc + 'ScatterResponsive.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Compossed Responsive Chart" desc="" overflowX>
+          <div>
+            <CompossedResponsive />
+            <SourceReader componentName={docSrc + 'CompossedResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default ScatterCharts;
diff --git a/front/odiparpack/app/containers/Charts/ScatterCharts.js b/front/odiparpack/app/containers/Charts/ScatterCharts.js
new file mode 100644
index 0000000..b680738
--- /dev/null
+++ b/front/odiparpack/app/containers/Charts/ScatterCharts.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+  ScatterSimple,
+  ScatterJoinLine,
+  ScatterMultiple,
+  ScatterCustom,
+  ScatterResponsive
+} from './demos';
+
+class ScatterCharts extends React.Component {
+  render() {
+    const title = brand.name + ' - Chart';
+    const description = brand.desc;
+    const docSrc = 'containers/Charts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Scatter Simple Chart" desc="" overflowX>
+          <div>
+            <ScatterSimple />
+            <SourceReader componentName={docSrc + 'ScatterSimple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Scatter Join Line Chart" desc="" overflowX>
+          <div>
+            <ScatterJoinLine />
+            <SourceReader componentName={docSrc + 'ScatterJoinLine.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Scatter Multiple Chart" desc="" overflowX>
+          <div>
+            <ScatterMultiple />
+            <SourceReader componentName={docSrc + 'ScatterMultiple.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Scatter Custom Icon Chart" desc="" overflowX>
+          <div>
+            <ScatterCustom />
+            <SourceReader componentName={docSrc + 'ScatterCustom.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Scatter Responsive Chart" desc="" overflowX>
+          <div>
+            <ScatterResponsive />
+            <SourceReader componentName={docSrc + 'ScatterResponsive.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default ScatterCharts;
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 (
+    <AreaChart
+      width={800}
+      height={450}
+      data={data3}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <defs>
+        <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
+          <stop offset={off} stopColor={color.secondary} stopOpacity={1} />
+          <stop offset={off} stopColor={color.primary} stopOpacity={1} />
+        </linearGradient>
+      </defs>
+      <Area type="monotone" dataKey="uv" stroke="#bcbcbc" fillOpacity="0.8" fill="url(#splitColor)" />
+    </AreaChart>
+  );
+}
+
+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 (
+    <div className="customized-tooltip-content">
+      <p className="total">{`${label} (Total: ${total})`}</p>
+      <ul className="list">
+        {
+          payload.map((entry, index) => (
+            <li key={`item-${index.toString()}`} style={{ color: entry.color }}>
+              {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  );
+};
+
+function AreaPercent() {
+  return (
+    <AreaChart
+      width={800}
+      height={450}
+      data={data1}
+      stackOffset="expand"
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip content={renderTooltipContent} />
+      <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity={0.8} fill={color.primary} />
+      <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity={0.8} fill={color.secondarydark} />
+      <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity={0.8} fill={color.thirddark} />
+    </AreaChart>
+  );
+}
+
+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 (
+    <div className={classes.chartFluid}>
+      <ResponsiveContainer>
+        <AreaChart
+          width={800}
+          height={450}
+          data={data1}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <CartesianGrid strokeDasharray="3 3" />
+          <Tooltip />
+          <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} />
+          <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity="0.8" fill={color.secondarydark} />
+          <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity="0.8" fill={color.thirddark} />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+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 (
+    <AreaChart
+      width={800}
+      height={450}
+      data={data2}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Area type="monotone" dataKey="uv" stroke={color.dark} fillOpacity="0.8" fill={color.main} />
+    </AreaChart>
+  );
+}
+
+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 (
+    <AreaChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} />
+      <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity="0.8" fill={color.secondarydark} />
+      <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity="0.8" fill={color.thirddark} />
+    </AreaChart>
+  );
+}
+
+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 <path d={getPath(x, y, width, height)} stroke="none" fillOpacity="0.8" fill={fill} />;
+};
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data2}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label={{ position: 'top' }}>
+        {
+          data2.map((entry, index) => (
+            <Cell key={`cell-${index.toString()}`} fill={colors[index % 20]} />
+          ))
+        }
+      </Bar>
+    </BarChart>
+  );
+}
+
+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 (
+    <g>
+      <circle cx={x + (width / 2)} cy={y - radius} r={radius} fillOpacity="0.8" fill="#689F38" />
+      <text x={x + (width / 2)} y={y - radius} fill="#fff" textAnchor="middle" dominantBaseline="middle">
+        {value.split(' ')[1]}
+      </text>
+    </g>
+  );
+};
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="pv" fill={color.primary}>
+        <LabelList dataKey="name" content={renderCustomizedLabel} />
+      </Bar>
+      <Bar dataKey="uv" fill={color.secondary}>
+        <LabelList dataKey="name" content={renderCustomizedLabel} />
+      </Bar>
+    </BarChart>
+  );
+}
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data2}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="female" stackId="a" fillOpacity="0.8" fill={color.primary} />
+      <Bar dataKey="male" stackId="a" fillOpacity="0.8" fill={color.secondary} />
+      <Bar dataKey="uv" fill={color.third} />
+    </BarChart>
+  );
+}
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data3}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <ReferenceLine y={0} stroke="#000" />
+      <Bar dataKey="pv" fillOpacity="0.8" fill={color.secondary} />
+      <Bar dataKey="uv" fillOpacity="0.8" fill={color.primary} />
+    </BarChart>
+  );
+}
+
+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 (
+    <div className={classes.chartFluid}>
+      <ResponsiveContainer>
+        <BarChart
+          width={800}
+          height={450}
+          data={data1}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <CartesianGrid strokeDasharray="3 3" />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="pv" fill={color.primary} />
+          <Bar dataKey="uv" fill={color.secondary} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="pv" fillOpacity="0.8" fill={color.primary} />
+      <Bar dataKey="uv" fillOpacity="0.8" fill={color.secondary} />
+    </BarChart>
+  );
+}
+
+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 (
+    <BarChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="pv" stackId="a" fillOpacity="0.8" fill={color.secondary} />
+      <Bar dataKey="uv" stackId="a" fillOpacity="0.8" fill={color.primary} />
+    </BarChart>
+  );
+}
+
+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 (
+    <ComposedChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid stroke="#f5f5f5" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Area type="monotone" dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} />
+      <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} />
+      <Line type="monotone" dataKey="uv" stroke={color.third} />
+    </ComposedChart>
+  );
+}
+
+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 (
+    <div className={classes.chartFluid}>
+      <ResponsiveContainer>
+        <ComposedChart
+          width={800}
+          height={450}
+          data={data1}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <CartesianGrid stroke="#f5f5f5" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Area type="monotone" dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} />
+          <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} />
+          <Line type="monotone" dataKey="uv" stroke={color.third} />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+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 (
+    <ComposedChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid stroke="#f5f5f5" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="uv" barSize={20} fillOpacity="0.8" fill={color.main} />
+      <Line type="monotone" dataKey="uv" stroke={color.secondary} />
+    </ComposedChart>
+  );
+}
+
+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 (
+    <ComposedChart
+      width={800}
+      height={450}
+      layout="vertical"
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid stroke="#f5f5f5" />
+      <XAxis type="number" />
+      <YAxis dataKey="name" type="category" />
+      <Tooltip />
+      <Legend />
+      <Area dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} />
+      <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} />
+      <Line dataKey="uv" stroke={color.third} />
+    </ComposedChart>
+  );
+}
+
+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 (
+    <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data7}>
+      <PolarGrid />
+      <PolarAngleAxis dataKey="subject" />
+      <PolarRadiusAxis angle={30} domain={[0, 150]} />
+      <Radar name="Mike" dataKey="A" stroke={color.maindark} fill={color.main} fillOpacity={0.6} />
+      <Radar name="Lily" dataKey="B" stroke={color.secondarydark} fill={color.secondary} fillOpacity={0.3} />
+      <Legend />
+    </RadarChart>
+  );
+}
+
+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 (
+      <svg x={cx - 10} y={cy - 10} width={20} height={20} fillOpacity="0.8" fill={color.primary} viewBox="0 0 1024 1024">
+        <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
+      </svg>
+    );
+  }
+  return (
+    <svg x={cx - 10} y={cy - 10} width={20} height={20} fillOpacity="0.8" fill={color.secondary} viewBox="0 0 1024 1024">
+      <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
+    </svg>
+  );
+};
+
+CustomizedDot.propTypes = {
+  cx: PropTypes.number,
+  cy: PropTypes.number,
+  value: PropTypes.number,
+};
+
+CustomizedDot.defaultProps = {
+  cx: 0,
+  cy: 0,
+  value: 0,
+};
+
+function LineCustomDot() {
+  return (
+    <LineChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Line type="monotone" dataKey="pv" stroke={color.primary} dot={<CustomizedDot />} />
+      <Line type="monotone" dataKey="uv" stroke={color.secondary} />
+    </LineChart>
+  );
+}
+
+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 (
+    <text x={x} y={y} dy={-4} fill={stroke} fillOpacity="0.8" fontSize={10} textAnchor="middle">
+      { value }
+    </text>
+  );
+};
+
+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 (
+    <LineChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Line type="monotone" dataKey="pv" stroke={color.primary} label={<CustomizedLabel stroke={color.primary} />} />
+      <Line type="monotone" dataKey="uv" stroke={color.secondary} label={<CustomizedLabel stroke={color.secondary} />} />
+    </LineChart>
+  );
+}
+
+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 (
+    <div className={classes.chartFluid}>
+      <ResponsiveContainer>
+        <LineChart
+          width={800}
+          height={450}
+          data={data1}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <CartesianGrid strokeDasharray="3 3" />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
+          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+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 (
+    <LineChart
+      width={800}
+      height={450}
+      data={data1}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      <Tooltip />
+      <Legend />
+      <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
+      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+    </LineChart>
+  );
+}
+
+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 (
+    <LineChart
+      width={800}
+      height={450}
+      data={data1}
+      layout="vertical"
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis type="number" />
+      <YAxis dataKey="name" type="category" />
+      <Tooltip />
+      <Legend />
+      <Line type="monotone" dataKey="pv" stroke={color.primary} activeDot={{ r: 8 }} />
+      <Line type="monotone" dataKey="uv" stroke={color.secondary} />
+    </LineChart>
+  );
+}
+
+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 (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+
+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 (
+      <PieChart
+        width={800}
+        height={450}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5
+        }}
+      >
+        <Pie
+          dataKey="value"
+          data={data6}
+          cx={300}
+          cy={200}
+          labelLine={false}
+          label={renderCustomizedLabel}
+          outerRadius={160}
+          fill="#8884d8"
+        >
+          {
+            data6.map((entry, index) => <Cell fill={colors[index % colors.length]} key={index.toString()} />)
+          }
+        </Pie>
+      </PieChart>
+    );
+  }
+}
+
+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 (
+    <g>
+      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+      <text x={ex + ((cos >= 0 ? 1 : -1) * 12)} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text>
+      <text x={ex + ((cos >= 0 ? 1 : -1) * 12)} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
+        {`(Rate ${(percent * 100).toFixed(2)}%)`}
+      </text>
+    </g>
+  );
+};
+
+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 (
+      <PieChart
+        width={800}
+        height={400}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5
+        }}
+      >
+        <Pie
+          dataKey="value"
+          activeIndex={this.state.activeIndex}
+          activeShape={renderActiveShape}
+          data={data6}
+          cx={300}
+          cy={200}
+          innerRadius={60}
+          outerRadius={100}
+          fill={color.secondary}
+          fillOpacity="0.8"
+          onMouseEnter={(event) => this.onPieEnter(event)}
+        />
+      </PieChart>
+    );
+  }
+}
+
+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 (
+    <PieChart
+      width={800}
+      height={450}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <Pie isAnimationActive={false} dataKey="value" data={data4} cx={200} cy={200} outerRadius={80} fill={color.primary} label />
+      <Pie data={data5} cx={500} dataKey="value" cy={200} innerRadius={40} outerRadius={80} fill={color.secondary} />
+      <Tooltip />
+    </PieChart>
+  );
+}
+
+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 (
+    <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data7}>
+      <PolarGrid />
+      <PolarAngleAxis dataKey="subject" />
+      <PolarRadiusAxis />
+      <Radar name="Mike" dataKey="A" stroke={color.dark} fill={color.main} fillOpacity={0.8} />
+    </RadarChart>
+  );
+}
+
+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 (
+    <ScatterChart
+      width={800}
+      height={450}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid />
+      <XAxis dataKey="x" type="number" name="stature" unit="cm" />
+      <YAxis dataKey="y" type="number" name="weight" unit="kg" />
+      <ZAxis range={[100]} />
+      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+      <Legend />
+      <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} shape="star" />
+      <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} shape="triangle" />
+    </ScatterChart>
+  );
+}
+
+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 (
+    <ScatterChart
+      width={800}
+      height={450}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid />
+      <XAxis dataKey="x" type="number" name="stature" unit="cm" />
+      <YAxis dataKey="y" type="number" name="weight" unit="kg" />
+      <ZAxis range={[100]} />
+      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+      <Legend />
+      <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} line shape="cross" />
+      <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} line shape="diamond" />
+    </ScatterChart>
+  );
+}
+
+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 (
+    <ScatterChart
+      width={800}
+      height={450}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid />
+      <XAxis dataKey="x" type="number" name="stature" unit="cm" />
+      <YAxis dataKey="y" type="number" name="weight" unit="kg" />
+      <ZAxis range={[100]} />
+      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+      <Legend />
+      <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} />
+      <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} />
+    </ScatterChart>
+  );
+}
+
+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 (
+    <div className={classes.chartFluid}>
+      <ResponsiveContainer width="100%" min-height="100%">
+        <ScatterChart
+          width={800}
+          height={450}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <CartesianGrid />
+          <XAxis dataKey="x" type="number" name="stature" unit="cm" />
+          <YAxis dataKey="y" type="number" name="weight" unit="kg" />
+          <ZAxis range={[100]} />
+          <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+          <Legend />
+          <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} />
+          <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} />
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+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 (
+    <ScatterChart
+      width={800}
+      height={450}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5
+      }}
+    >
+      <CartesianGrid />
+      <XAxis dataKey="x" type="number" name="stature" unit="cm" />
+      <YAxis dataKey="y" type="number" name="weight" unit="kg" />
+      <Scatter name="A school" data={data8} fill={color.primary} />
+      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+    </ScatterChart>
+  );
+}
+
+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
+  }
+];