Tomasz Owczarczyk
847
app/routes/Graphs/ReCharts/ReCharts.js
Executable file
847
app/routes/Graphs/ReCharts/ReCharts.js
Executable 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;
|
||||
Reference in New Issue
Block a user