Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

847
app/routes/Graphs/ReCharts/ReCharts.js Executable file
View File

@@ -0,0 +1,847 @@
import React from 'react';
import {
Container,
Row,
Col,
Card,
CardBody,
CardDeck,
Button
} from './../../../components'
import { HeaderMain } from "../../components/HeaderMain";
import { HeaderDemo } from "../../components/HeaderDemo";
import { SimpleBarChart } from "./components/SimpleBarChart";
import { StackedBarChart } from "./components/StackedBarChart";
import { MixBarChart } from "./components/MixBarChart";
import { PositiveAndNegativeBarChart } from "./components/PositiveAndNegativeBarChart";
import { BarChartStackedBySign } from "./components/BarChartStackedBySign";
import { BarChartHasBackground } from "./components/BarChartHasBackground";
import { SimpleLineChart } from "./components/SimpleLineChart";
import { DashedLineChart } from "./components/DashedLineChart";
import { VerticalLineChart } from "./components/VerticalLineChart";
import { CustomizedLabelLineChart } from './components/CustomizedLabelLineChart';
import { SimpleAreaChart } from "./components/SimpleAreaChart";
import { StackedAreaChart } from "./components/StackedAreaChart";
import { PercentAreaChart } from "./components/PercentAreaChart";
import { AreaChartFillByValue } from "./components/AreaChartFillByValue";
import { TwoLevelPieChart } from "./components/TwoLevelPieChart";
import { StraightAnglePieChart } from "./components/StraightAnglePieChart";
import { PieChartWithCustomizedLabel } from "./components/PieChartWithCustomizedLabel";
import { PieChartWithPaddingAngle } from "./components/PieChartWithPaddingAngle";
import { PieChartWithPaddingAngleHalf } from "./components/PieChartWithPaddingAngleHalf";
import { SpecifiedDomainRadarChart } from "./components/SpecifiedDomainRadarChart";
import { SimpleRadialBarChart } from './components/SimpleRadialBarChart';
import { LineBarAreaComposedChart } from "./components/LineBarAreaComposedChart";
import { TinyLineChart } from "./components/TinyLineChart";
import { TinyAreaChart } from "./components/TinyAreaChart";
import { TinyBarChart } from './components/TinyBarChart';
import { TinyPieChart } from './components/TinyPieChart';
import { TinyDonutChart } from './components/TinyDonutChart';
import { VerticalComposedChart } from './components/VerticalComposedChart';
export const ReCharts = () => (
<Container>
<HeaderMain
title="ReCharts"
className="mb-4 mt-4"
/>
<p>
Recharts is a Redefined chart library built with React and D3.
The main purpose of this library is to help you to write charts in React applications without any pain.
Main principles of Recharts are:
</p>
<ul className="mb-5">
<li><strong>Simply</strong> deploy with React components</li>
<li><strong>Native</strong> SVG support, lightweight depending only on some D3 submodules</li>
<li><strong>Declarative</strong> components, components of charts are purely presentational</li>
</ul>
{ /* START Header 1 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={1}
title="Bar Charts"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 1 */}
{ /* START Section 1 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
SimpleBarChart
<span className="small ml-1 text-muted">
#1.01
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/30763kr7/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<SimpleBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
StackedBarChart
<span className="small ml-1 text-muted">
#1.02
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/90v76x08/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<StackedBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
MixBarChart
<span className="small ml-1 text-muted">
#1.03
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9hjfkp73/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<MixBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
PositiveAndNegativeBarChart
<span className="small ml-1 text-muted">
#1.04
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/q68cz43w/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<PositiveAndNegativeBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
BarChartStackedBySign
<span className="small ml-1 text-muted">
#1.05
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/p82xhe2a/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<BarChartStackedBySign />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
BarChartHasBackground
<span className="small ml-1 text-muted">
#1.06
</span>
</h6>
<p>Bar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/q4eonc12/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<BarChartHasBackground />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 1 */}
{ /* START Header 2 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={2}
title="Line Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 2 */}
{ /* START Section 2 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
SimpleLineChart
<span className="small ml-1 text-muted">
#2.01
</span>
</h6>
<p>Line Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/xqjtetw0/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<SimpleLineChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
DashedLineChart
<span className="small ml-1 text-muted">
#2.02
</span>
</h6>
<p>Line Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/nptzh7ez/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<DashedLineChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
VerticalLineChart
<span className="small ml-1 text-muted">
#2.03
</span>
</h6>
<p>Line Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/rrr9q7x5/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<VerticalLineChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
CustomizedLabelLineChart
<span className="small ml-1 text-muted">
#2.04
</span>
</h6>
<p>Line Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9y9zrpjp/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<CustomizedLabelLineChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 2 */}
{ /* START Header 3 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={3}
title="Area Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 3 */}
{ /* START Section 3 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
SimpleAreaChart
<span className="small ml-1 text-muted">
#3.01
</span>
</h6>
<p>Area Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/Lrffmzfc/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<SimpleAreaChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
StackedAreaChart
<span className="small ml-1 text-muted">
#3.02
</span>
</h6>
<p>Area Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/c1rLyqj1/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<StackedAreaChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
PercentAreaChart
<span className="small ml-1 text-muted">
#3.03
</span>
</h6>
<p>Area Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/zsax2hyq/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<PercentAreaChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
AreaChartFillByValue
<span className="small ml-1 text-muted">
#3.04
</span>
</h6>
<p>Area Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/64v6ocdx/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<AreaChartFillByValue />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 3 */}
{ /* START Header 4 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={4}
title="Pie Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 4 */}
{ /* START Section 4 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
TwoLevelPieChart
<span className="small ml-1 text-muted">
#4.01
</span>
</h6>
<p>Pie Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/w6wsrc52/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TwoLevelPieChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
StraightAnglePieChart
<span className="small ml-1 text-muted">
#4.02
</span>
</h6>
<p>Pie Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/pb1jwdt1/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<StraightAnglePieChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
PieChartWithPaddingAngle
<span className="small ml-1 text-muted">
#4.03
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/3Leoa7f4/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<PieChartWithPaddingAngle />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
PieChartWithPaddingAngleHalf
<span className="small ml-1 text-muted">
#4.04
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/3Leoa7f4/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<PieChartWithPaddingAngleHalf />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
PieChartWithCustomizedLabel
<span className="small ml-1 text-muted">
#4.05
</span>
</h6>
<p>Pie Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/c9pL8k61/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<PieChartWithCustomizedLabel />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 4 */}
{ /* START Header 5 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={5}
title="Radar Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 5 */}
{ /* START Section 5 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
SpecifiedDomainRadarChart
<span className="small ml-1 text-muted">
#5.01
</span>
</h6>
<p>Radar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/dpgb3xjq/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<SpecifiedDomainRadarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
SimpleRadialBarChart
<span className="small ml-1 text-muted">
#5.02
</span>
</h6>
<p>Radar Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9km41z5z/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<SimpleRadialBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 5 */}
{ /* START Header 6 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={6}
title="Composed Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 6 */}
{ /* START Section 6 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
LineBarAreaComposedChart
<span className="small ml-1 text-muted">
#6.01
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9xopwa9v/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<LineBarAreaComposedChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex">
<div>
<h6 className="card-title mb-1">
VerticalComposedChart
<span className="small ml-1 text-muted">
#6.02
</span>
</h6>
<p>Composed Charts</p>
</div>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/shjsn5su/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<VerticalComposedChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
{ /* START Section 6 */}
{ /* START Header 7 */}
<Row>
<Col lg={ 12 }>
<HeaderDemo
no={7}
title="Tiny Charts"
className="mt-5"
subTitle={(
<React.Fragment>
Quickly build your charts with decoupled, reusable React components.
</React.Fragment>
)}
/>
</Col>
</Row>
{ /* END Header 7 */}
{ /* START Section 7 */}
<CardDeck>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
TinyLineChart
<span className="small ml-1 text-muted">
#7.01
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/exh283uh/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TinyLineChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
TinyAreaChart
<span className="small ml-1 text-muted">
#7.02
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/tv8zfzxo/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TinyAreaChart />
</CardBody>
</Card>
{ /* START Card Graph */}
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
TinyBarChart
<span className="small ml-1 text-muted">
#7.03
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TinyBarChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</CardDeck>
<Row>
<Col lg={ 3 }>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
TinyDonutChart
<span className="small ml-1 text-muted">
#7.05
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TinyDonutChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</Col>
<Col lg={ 3 }>
{ /* START Card Graph */}
<Card className="mb-3">
<CardBody>
<div className="d-flex align-items-center mb-3">
<h6 className="card-title mb-1">
TinyPieChart
<span className="small ml-1 text-muted">
#7.06
</span>
</h6>
<span className="ml-auto">
<Button color="link" href="https://jsfiddle.net/alidingling/9kd8rssL/" target="_blank">
<i className="fa fa-external-link"></i>
</Button>
</span>
</div>
<TinyPieChart />
</CardBody>
</Card>
{ /* START Card Graph */}
</Col>
</Row>
{ /* START Section 7 */}
</Container>
);
export default ReCharts;

47
app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js Executable file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import {
AreaChart,
CartesianGrid,
DefAreaValueColor,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: -1000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 500, pv: 3908, amt: 2000},
{name: 'Page E', uv: -2000, pv: 4800, amt: 2181},
{name: 'Page F', uv: -250, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100}
];
export const AreaChartFillByValue = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<AreaChart
data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}
>
<CartesianGrid/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<defs>
<DefAreaValueColor
id="splitColor"
data={ data }
positiveColor={ colors['success-03'] }
negativeColor={ colors['danger-03'] }
/>
</defs>
<Area dataKey="uv" stroke={ colors['white'] } fill="url(#splitColor)" />
</AreaChart>
</ResponsiveContainer>
);

41
app/routes/Graphs/ReCharts/components/BarChartHasBackground.js Executable file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const BarChartHasBackground = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="pv" fill={ colors['primary'] } background={{ fill: colors['200'] }} barSize={ 5 } />
<Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { BarChartHasBackground };

43
app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js Executable file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
ReferenceLine,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const BarChartStackedBySign = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart data={data} stackOffset="sign"
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<ReferenceLine y={0} stroke={ colors['400'] } />
<Bar dataKey="pv" fill={ colors['primary'] } stackId="stack" barSize={ 5 } />
<Bar dataKey="uv" fill={ colors['purple'] } stackId="stack" barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { BarChartStackedBySign };

51
app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js Executable file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import {
Line,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
LineChart,
ValueLabel,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 5 }
strokeWidth={ 3 }
fill={ stroke }
stroke={ colors['white'] }
/>
);
export const CustomizedLabelLineChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<LineChart data={data}
margin={{top: 15, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line dataKey="pv" stroke={ colors['primary'] } label={ <ValueLabel /> } activeDot={{r: 5}} dot={generateDot} />
<Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
</LineChart>
</ResponsiveContainer>
);

53
app/routes/Graphs/ReCharts/components/DashedLineChart.js Executable file
View File

@@ -0,0 +1,53 @@
import React from 'react';
import {
Line,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
LineChart,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 5 }
fill={ stroke }
stroke={ colors['white'] }
strokeWidth={ 3 }
strokeDasharray={ 0 }
/>
);
const DashedLineChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<LineChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Line dataKey="pv" stroke={ colors['primary'] } activeDot={{r: 5}} dot={generateDot} strokeDasharray="5 5" />
<Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} strokeDasharray="3 4 5 2" />
</LineChart>
</ResponsiveContainer>
)
export { DashedLineChart };

68
app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js Executable file
View File

@@ -0,0 +1,68 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {
ResponsiveContainer,
ComposedChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
Legend,
Area,
Bar,
Line,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [{name: 'Page A', uv: 590, pv: 800, amt: 1400},
{name: 'Page B', uv: 868, pv: 967, amt: 1506},
{name: 'Page C', uv: 1397, pv: 1098, amt: 989},
{name: 'Page D', uv: 1480, pv: 1200, amt: 1228},
{name: 'Page E', uv: 1520, pv: 1108, amt: 1100},
{name: 'Page F', uv: 1400, pv: 680, amt: 1700}];
// eslint-disable-next-line react/prop-types
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 4 }
strokeWidth={ 2 }
fill={ stroke }
stroke={ colors['white'] }
/>
);
const LineBarAreaComposedChart = ({height, className}) => (
<ResponsiveContainer
width='100%'
minHeight='250px'
className={ className }
{...(!_.isUndefined(height) ? {
height
} : {
aspect: 2 / 1
})}
>
<ComposedChart data={data}
margin={{top: 5, right: 20, left: 20, bottom: 5}}>
<CartesianGrid />
<XAxis dataKey="name"/>
<YAxis />
<Tooltip />
<Legend />
<Area dataKey='amt' fill={ colors['200'] } stroke={ colors['400'] } />
<Bar dataKey='pv' barSize={ 5 } fill={ colors['primary'] } />
<Line dataKey='uv' stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
</ComposedChart>
</ResponsiveContainer>
);
LineBarAreaComposedChart.propTypes = {
height: PropTypes.string,
className: PropTypes.string
}
export { LineBarAreaComposedChart };

42
app/routes/Graphs/ReCharts/components/MixBarChart.js Executable file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const MixBarChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="female" stackId="a" fill={ colors['purple'] } barSize={ 5 } />
<Bar dataKey="male" stackId="a" fill={ colors['primary'] } barSize={ 5 } />
<Bar dataKey="uv" fill={ colors['success'] } barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { MixBarChart };

40
app/routes/Graphs/ReCharts/components/PercentAreaChart.js Executable file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import {
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const PercentAreaChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<AreaChart data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Area dataKey='uv' stackId="1" stroke={ colors['purple'] } fill={ colors['purple-03'] } />
<Area dataKey='pv' stackId="1" stroke={ colors['primary'] } fill={ colors['primary-03'] } />
<Area dataKey='amt' stackId="1" stroke={ colors['success'] } fill={ colors['success-03'] } />
</AreaChart>
</ResponsiveContainer>
)
export { PercentAreaChart };

38
app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js Executable file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import {
Pie,
ResponsiveContainer,
Cell,
PieChart,
PieValueLabel
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group D', value: 200}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
export const PieChartWithCustomizedLabel = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<PieChart>
<Pie
data={data}
dataKey="value"
stroke={ colors['white'] }
labelLine={false}
label={<PieValueLabel />}
outerRadius={80}
fill="#8884d8"
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
</ResponsiveContainer>
);

38
app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js Executable file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import {
PieChart,
Pie,
Cell,
ResponsiveContainer
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group D', value: 200}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
export const PieChartWithPaddingAngle = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<PieChart>
<Pie
data={data}
dataKey="value"
stroke={ colors['white'] }
innerRadius={70}
outerRadius={80}
fill="#8884d8"
paddingAngle={1}
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
</ResponsiveContainer>
);

40
app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js Executable file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import {
PieChart,
Pie,
Cell,
ResponsiveContainer
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group D', value: 200}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
export const PieChartWithPaddingAngleHalf = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<PieChart>
<Pie
data={data}
dataKey="value"
innerRadius={70}
stroke={ colors['white'] }
outerRadius={80}
startAngle={180}
endAngle={0}
fill="#8884d8"
paddingAngle={1}
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
</ResponsiveContainer>
);

43
app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js Executable file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
ReferenceLine,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const PositiveAndNegativeBarChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<ReferenceLine y={0} stroke={ colors['400'] } />
<Bar dataKey="pv" fill={ colors['primary'] } barSize={ 5 } />
<Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { PositiveAndNegativeBarChart };

38
app/routes/Graphs/ReCharts/components/SimpleAreaChart.js Executable file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import {
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const SimpleAreaChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<AreaChart data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Area dataKey='uv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
</AreaChart>
</ResponsiveContainer>
)
export { SimpleAreaChart };

49
app/routes/Graphs/ReCharts/components/SimpleBarChart.js Executable file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const SimpleBarChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart
data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}
>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name" />
<YAxis />
<Tooltip
contentStyle={{
background: colors['900'],
border: `1px solid ${colors['900']}`,
color: colors['white']
}}
/>
<Legend wrapperStyle={{ color: colors['900'] }}/>
<Bar dataKey="pv" fill={ colors['primary'] } barSize={ 5 } />
<Bar dataKey="uv" fill={ colors['purple'] } barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { SimpleBarChart };

74
app/routes/Graphs/ReCharts/components/SimpleLineChart.js Executable file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import {
Line,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
LineChart,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
// eslint-disable-next-line react/prop-types
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 5 }
fill={ stroke }
stroke={ colors['white'] }
strokeWidth={ 3 }
/>
);
const generateActiveDot = (props) => (
<Dot
{ ...props }
stroke={ colors['white'] }
r={ 5 }
/>
);
const SimpleLineChart = ({height, className}) => (
<ResponsiveContainer
width='100%'
className={ className }
{...(!_.isUndefined(height) ? {
height
} : {
aspect: 2 / 1
})}
>
<LineChart data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line dataKey="pv" stroke={ colors['primary'] } dot={generateDot} activeDot={generateActiveDot} />
<Line dataKey="uv" stroke={ colors['purple'] } dot={generateDot} activeDot={generateActiveDot} />
</LineChart>
</ResponsiveContainer>
);
SimpleLineChart.propTypes = {
height: PropTypes.string,
className: PropTypes.string
}
export { SimpleLineChart };

43
app/routes/Graphs/ReCharts/components/SimpleRadialBarChart.js Executable file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import {
ResponsiveContainer,
RadialBarChart,
RadialBar,
Legend
} from 'recharts';
import colors from './../../../../colors';
const data = [
{name: '18-24', uv: 31.47, pv: 2400, fill: colors['primary']},
{name: '25-29', uv: 26.69, pv: 4567, fill: colors['purple']},
{name: '30-34', uv: 15.69, pv: 1398, fill: colors['success']},
{name: '35-39', uv: 8.22, pv: 9800, fill: colors['yellow']},
{name: '40-49', uv: 8.63, pv: 3908, fill: colors['danger']},
{name: '50+', uv: 2.63, pv: 4800, fill: colors['info']},
{name: 'unk.', uv: 6.67, pv: 4800, fill: colors['warning']}
];
const style = {
top: 0,
left: 350,
lineHeight: '24px'
};
const SimpleRadialBarChart = () => (
<ResponsiveContainer width='100%' aspect={ 1 / 1}>
<RadialBarChart cx={ 150 } innerRadius={20} outerRadius={140} barSize={7} data={data}>
<RadialBar
minAngle={15}
label={{ position: 'insideStart', fill: colors['900'], fontSize: '11px' }}
background={{fill: colors['200']}}
clockWise={true}
dataKey='uv'
/>
<Legend iconSize={10} layout='vertical' verticalAlign='middle' wrapperStyle={style}/>
</RadialBarChart>
</ResponsiveContainer>
)
export { SimpleRadialBarChart };

36
app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js Executable file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import {
ResponsiveContainer,
Radar,
RadarChart,
PolarGrid,
Legend,
PolarAngleAxis,
PolarRadiusAxis
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{ 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 },
];
const SpecifiedDomainRadarChart = () => (
<ResponsiveContainer width='100%' aspect={ 1/1 }>
<RadarChart outerRadius={150} data={data}>
<PolarGrid stroke={ colors['400'] } />
<PolarAngleAxis dataKey="subject" />
<PolarRadiusAxis angle={30} domain={[0, 150]} />
<Radar name="Mike" dataKey="A" stroke={ colors['primary'] } fill={ colors['primary'] } fillOpacity={0.3}/>
<Radar name="Lily" dataKey="B" stroke={ colors['500'] } fill={ colors['500'] } fillOpacity={0.3}/>
<Legend />
</RadarChart>
</ResponsiveContainer>
);
export { SpecifiedDomainRadarChart };

40
app/routes/Graphs/ReCharts/components/StackedAreaChart.js Executable file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import {
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const StackedAreaChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<AreaChart data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Area dataKey='uv' stackId="1" stroke={ colors['primary'] } fill={ colors['primary-03'] } />
<Area dataKey='pv' stackId="1" stroke={ colors['purple'] } fill={ colors['purple-03'] } />
<Area dataKey='amt' stackId="1" stroke={ colors['success'] } fill={ colors['success-03'] } />
</AreaChart>
</ResponsiveContainer>
)
export { StackedAreaChart };

41
app/routes/Graphs/ReCharts/components/StackedBarChart.js Executable file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import {
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const StackedBarChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<BarChart data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="pv" stackId="a" fill={ colors['primary'] } barSize={ 5 } />
<Bar dataKey="uv" stackId="a" fill={ colors['purple'] } barSize={ 5 } />
</BarChart>
</ResponsiveContainer>
)
export { StackedBarChart };

37
app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js Executable file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import {
Pie,
ResponsiveContainer,
PieChart
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{ 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 }
];
const StraightAnglePieChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<PieChart>
<Pie
startAngle={180}
endAngle={0}
data={data}
dataKey="value"
outerRadius={80}
fill={ colors['primary'] }
stroke={ colors['white'] }
label={{fill: colors['900'], fontSize: '12px'}}
/>
</PieChart>
</ResponsiveContainer>
)
export { StraightAnglePieChart };

22
app/routes/Graphs/ReCharts/components/TinyAreaChart.js Executable file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import _ from 'lodash';
import {
ResponsiveContainer,
AreaChart,
Area
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = _.times(20, () => ({ pv: Math.random() * 100 }));
/* 99% - some wierd HACK that makes the container resize properly */
const TinyAreaChart = () => (
<ResponsiveContainer width="99%" height={ 40 }>
<AreaChart data={data}>
<Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-04'] } />
</AreaChart>
</ResponsiveContainer>
);
export { TinyAreaChart };

21
app/routes/Graphs/ReCharts/components/TinyBarChart.js Executable file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import _ from 'lodash';
import {
ResponsiveContainer,
BarChart,
Bar
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = _.times(40, () => ({ pv: Math.random() * 100 }));
const TinyBarChart = () => (
<ResponsiveContainer width='100%' height={ 40 }>
<BarChart data={data}>
<Bar dataKey='pv' fill={ colors['primary'] } barSize={5} />
</BarChart>
</ResponsiveContainer>
);
export { TinyBarChart };

36
app/routes/Graphs/ReCharts/components/TinyDonutChart.js Executable file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import {
PieChart,
Pie,
Cell
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group D', value: 200}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
const TinyDonutChart = () => (
<PieChart width={ 30 } height={ 30 }>
<Pie
data={data}
dataKey="value"
stroke={ colors['white'] }
innerRadius={ 10 }
outerRadius={ 15 }
fill="#8884d8"
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
}
</Pie>
</PieChart>
);
export { TinyDonutChart };

32
app/routes/Graphs/ReCharts/components/TinyLineChart.js Executable file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import _ from 'lodash';
import {
ResponsiveContainer,
LineChart,
Line,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = _.times(20, () => ({ pv: Math.random() * 100 }));
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 4 }
strokeWidth={ 2 }
fill={ stroke }
stroke={ colors['white'] }
/>
);
const TinyLineChart = () => (
<ResponsiveContainer width='100%' height={ 40 }>
<LineChart data={data}>
<Line dataKey='pv' stroke={ colors['primary'] } strokeWidth={2} activeDot={{r: 5}} dot={generateDot} />
</LineChart>
</ResponsiveContainer>
);
export { TinyLineChart };

35
app/routes/Graphs/ReCharts/components/TinyPieChart.js Executable file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import {
PieChart,
Pie,
Cell
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group D', value: 200}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
const TinyPieChart = () => (
<PieChart width={ 30 } height={ 30 }>
<Pie
data={data}
dataKey="value"
fill="#8884d8"
stroke={ colors['white'] }
outerRadius={ 15 }
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
}
</Pie>
</PieChart>
);
export { TinyPieChart };

55
app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js Executable file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import {
Pie,
ResponsiveContainer,
PieChart
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data01 = [
{ name: 'Group A', value: 400 },
{ name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 },
{ name: 'Group D', value: 200 }
];
const data02 = [
{ name: 'A1', value: 100 },
{ name: 'A2', value: 300 },
{ name: 'B1', value: 100 },
{ name: 'B2', value: 80 },
{ name: 'B3', value: 40 },
{ name: 'B4', value: 30 },
{ name: 'B5', value: 50 },
{ name: 'C1', value: 100 },
{ name: 'C2', value: 200 },
{ name: 'D1', value: 150 },
{ name: 'D2', value: 50 }
];
const TwoLevelPieChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<PieChart>
<Pie
data={data01}
dataKey="value"
outerRadius={67}
fill={ colors['primary'] }
stroke={ colors['white'] }
/>
<Pie
data={data02}
dataKey="value"
innerRadius={70}
outerRadius={80}
fill={ colors['purple'] }
stroke={ colors['white'] }
label={{fill: colors['800'], fontSize: '12px'}}
/>
</PieChart>
</ResponsiveContainer>
)
export { TwoLevelPieChart };

53
app/routes/Graphs/ReCharts/components/VerticalComposedChart.js Executable file
View File

@@ -0,0 +1,53 @@
import React from 'react';
import {
Area,
Line,
Bar,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
ComposedChart,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
// eslint-disable-next-line react/prop-types
const generateDot = ({stroke, ...other}) => (
<Dot
r={ 5 }
strokeWidth={ 2 }
{ ...other }
fill={ stroke }
stroke={ colors['white'] }
/>
);
export const VerticalComposedChart = () => (
<ResponsiveContainer width='100%' aspect={ 6.0/3.0 }>
<ComposedChart layout="vertical" width={600} height={400} data={data}
margin={{top: 5, right: 20, left: 20, bottom: 5}}>
<CartesianGrid />
<XAxis type="number"/>
<YAxis dataKey="name" type="category"/>
<Tooltip/>
<Legend/>
<Area dataKey='amt' fill={ colors['200'] } stroke={ colors['400'] } />
<Bar dataKey='pv' barSize={5} fill={ colors['primary'] } />
<Line dataKey='uv' stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
</ComposedChart>
</ResponsiveContainer>
);

51
app/routes/Graphs/ReCharts/components/VerticalLineChart.js Executable file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import {
Line,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
LineChart,
Dot
} from './../../../../components/recharts';
import colors from './../../../../colors';
const data = [
{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},
];
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
r={ 5 }
fill={ stroke }
stroke={ colors['white'] }
strokeWidth={ 3 }
/>
);
const VerticalLineChart = () => (
<ResponsiveContainer width='100%' aspect={ 6.0/3.0 }>
<LineChart layout="vertical" data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis type="number" />
<YAxis dataKey="name" type="category"/>
<Tooltip/>
<Legend />
<Line dataKey="pv" stroke={ colors['primary'] } activeDot={{r: 5}} dot={generateDot} />
<Line dataKey="uv" stroke={ colors['purple'] } activeDot={{r: 5}} dot={generateDot} />
</LineChart>
</ResponsiveContainer>
);
export { VerticalLineChart };

3
app/routes/Graphs/ReCharts/index.js Executable file
View File

@@ -0,0 +1,3 @@
import ReCharts from './ReCharts';
export default ReCharts;